Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

eCommerce in OpenEdge 10 by tls14265

VIEWS: 65 PAGES: 12

									INNOV-2: Building eCommerce solutions in OpenEdge® 10
                     Roger Bentley




                           INNOV-2:
                Building eCommerce solutions in
                         OpenEdge® 10




          jrb@bravepoint.com




            eCommerce in OpenEdge 10
           Introductions
             Roger Bentley
             Senior Product Architect
             Using Progress since 1987
             BravePoint, Inc
             jrb@bravepoint.com




                                                        2




                      Progress Exchange 2007
                    10-13 June, Phoenix, AZ, USA
                                  1
INNOV-2: Building eCommerce solutions in OpenEdge® 10
                     Roger Bentley




            eCommerce in OpenEdge 10
           • Goals
              – Introduce new ways to build internet
                applications
              – Give examples of how to extend your
                application using OpenEdge 10
              – Provide simple examples that you can
                take home and make yours!


                                                        3




           eCommerce in OpenEdge 10

           Agenda


            –What Current Web sites look like
            –What Technology is Involved
            –How OpenEdge 10 makes it work
            –Creating your own RIAs


                                                        4




                   Progress Exchange 2007
                 10-13 June, Phoenix, AZ, USA
                               2
INNOV-2: Building eCommerce solutions in OpenEdge® 10
                     Roger Bentley




                          Current Sites
           RAIs

           •   http://maps.google.com/
               http://maps.google.com/
           •   http://www.asfusion.com/apps/homelocator/
           •   http://www.amitgupta.info/E41ST/RIA/E41ST.html
           •   http://www.watergatehotel.com/
               http://www.watergatehotel.com/
           •   http://home.disney.go.com/index
               http://home.disney.go.com/index




                                                                5




                                                                6




                     Progress Exchange 2007
                   10-13 June, Phoenix, AZ, USA
                                 3
INNOV-2: Building eCommerce solutions in OpenEdge® 10
                     Roger Bentley




                                                        7




                                                        8




                   Progress Exchange 2007
                 10-13 June, Phoenix, AZ, USA
                               4
INNOV-2: Building eCommerce solutions in OpenEdge® 10
                     Roger Bentley




           What Technology is Involved
           •   Html
           •   JavaScript
           •   Ajax
               – Why Ajax?
           • Flex2
               – Why Flex?




                                                        9




                   Technology - Ajax
           Asynchronous JavaScript and XML
           • HTML/XHTML/CSS/JavaScript
           • The Document Object Model
           • XML / XSLT
           • XMLHttpRequest object




                                                        10




                    Progress Exchange 2007
                  10-13 June, Phoenix, AZ, USA
                                5
INNOV-2: Building eCommerce solutions in OpenEdge® 10
                     Roger Bentley




                                          Technology – Ajax
           •           type="text/javascript" language="javascript">
               <script type="text/javascript" language="javascript">
           •               makeRequest(url)
                 function makeRequest(url) {
           •             httpRequest;
                    var httpRequest;

           •            (window.XMLHttpRequest)          Mozilla,
                     if (window.XMLHttpRequest) { // Mozilla, Safari, ...
           •                                  XMLHttpRequest();
                         httpRequest = new XMLHttpRequest();
           •                (httpRequest.overrideMimeType)
                         if (httpRequest.overrideMimeType) {
           •                 httpRequest.overrideMimeType('text/xml');
                             httpRequest.overrideMimeType('text/xml');
           •                 // See note below about this line
           •             }
           •                     (window.ActiveXObject)
                     } else if (window.ActiveXObject) { // IE
           •             try {
           •                 httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
           •             } catch (e) {
           •                 try {
           •                                      ActiveXObject("Microsoft.XMLHTTP");
                                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
           •                 } catch (e) {}
           •             }
           •         }

           •            (!httpRequest)
                     if (!httpRequest) {
           •             alert('Giving up :( Cannot create an XMLHTTP instance');
           •             return false;
           •         }
           •                                                        alertContents(httpRequest);
                     httpRequest.onreadystatechange = function() { alertContents(httpRequest); };
           •         httpRequest.open('GET', url,
                     httpRequest.open('GET', url, true);
           •         httpRequest.send(null);
                     httpRequest.send(null);

           •     }

           •              alertContents(httpRequest)
                 function alertContents(httpRequest) {

           •            (httpRequest.readyState
                     if (httpRequest.readyState == 4) {
           •                (httpRequest.status
                         if (httpRequest.status == 200) {
           •                 alert(httpRequest.responseText);
                             alert(httpRequest.responseText);
           •   </span>




                                                                                                    11




                                Technology – Flex 2
           •   MXML
           •   ActionScript 3.0
           •   Flex SDK
           •   Data Source - Remoting
                – XML
                – SOAP
                – Custom


                                                                                                    12




                                 Progress Exchange 2007
                               10-13 June, Phoenix, AZ, USA
                                             6
INNOV-2: Building eCommerce solutions in OpenEdge® 10
                     Roger Bentley




                         Technology – Flex 2.0
           •                       encoding="utf-
               <?xml version="1.0" encoding="utf-8"?>
           •                   xmlns:mx="http://www.adobe.com/2006/mxml"
               <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
           •                 layout="absolute"
           •                 xmlns:v="views.ecomm.*"
                             xmlns:v="views.ecomm.*"
           •                 xmlns:m="managers.*">
                             xmlns:m="managers.*">
           •                            source="as/ecomm.as"/>
                             <mx:Script source="as/ecomm.as"/>
           •
           •                  mx:states>
                             <mx:states>
           •                                                  name="cartView">
                                                    <mx:State name="cartView">
           •                                                                             target="{prodTile}"
                                                                         <mx:SetProperty target="{prodTile}" name="width" value="0"/>
           •                                                                             target="{prodTile}"
                                                                         <mx:SetProperty target="{prodTile}" name="height" value="0"/>
           •                                                             <mx:SetProperty target="{cartBox}" name="width" value="100%"/>
                                                                                         target="{cartBox}"
           •                                                                          relativeTo="{cartBox}" position="lastChild">
                                                                         <mx:AddChild relativeTo="{cartBox}" position="lastChild">
           •                                                                                            id="shoppingCart"
                                                                                               <v:Cart id="shoppingCart" width="100%" cart="{cart}"/>
           •                                                             </mx:AddChild>
                                                                         </mx:AddChild>
           •                                                                          relativeTo="{cartBox}" position="lastChild">
                                                                         <mx:AddChild relativeTo="{cartBox}" position="lastChild">
           •                                                                                                                            click="this.currentState=''"/>
                                                                                               <mx:LinkButton label="Continue Shopping" click="this.currentState=''"/>
           •                                                             </mx:AddChild>
                                                                         </mx:AddChild>
           •                                                             <mx:RemoveChild target="{linkbutton1}"/>
           •                                                             <mx:RemoveChild target="{cartView}"/>
                                                                                           target="{cartView}"/>
           •                                        </mx:State>
                                                    </mx:State>
           •                   </mx:states>
                               </mx:states>
           •                   <mx:ApplicationControlBar dock="true" height="90" width="100%">
           •                                          <mx:Canvas width="100%" height="100%"
           •                                                                horizontalScrollPolicy="off"
                                                                            horizontalScrollPolicy="off"
           •                                                                verticalScrollPolicy="off">
                                                                            verticalScrollPolicy="off">
           •                                                                <mx:Label x="0" y="0" text="Flex"/>
           •                                                                <mx:Label x="0" y="41" text="GROCER"/>
           •                                                                                   id="catView"
                                                                            <v:CategoryView id="catView" width="600" left="100" cats="{categories}"
               click="displayProdByCategory()"/>
               click="displayProdByCategory()"/>
           •                                                                                                     id="btnViewCart"
                                                                            <mx:Button y="10" label="View Cart" id="btnViewCart" right="90"
               click="this.currentState='cartView'"/>
               click="this.currentState='cartView'"/>
           •                                                                                                    id="bntCheckout"
                                                                            <mx:Button y="10" label="Checkout" id="bntCheckout" right="10"/>
           •                                          </mx:Canvas>
                                                      </mx:Canvas>
           •                   </mx:ApplicationControlBar>
                               </mx:ApplicationControlBar>




                                                                                                                                                                         13




               Technology – Data Source
           •   XML
           •   Soap
           •   Custom Data Packets

           This is where OpenEdge comes in….




                                                                                                                                                                         14




                                Progress Exchange 2007
                              10-13 June, Phoenix, AZ, USA
                                            7
INNOV-2: Building eCommerce solutions in OpenEdge® 10
                     Roger Bentley




                       OpenEdge 10
           • WebSpeed®
               – XML
               – Custom
           • AppServer™
               – SOAP




                                                        15




                  Code Example Ajax
           •   Ajax - reading XML
           •   Ajax – writing XML
           •   Ajax – custom




                                                        16




                    Progress Exchange 2007
                  10-13 June, Phoenix, AZ, USA
                                8
INNOV-2: Building eCommerce solutions in OpenEdge® 10
                     Roger Bentley




                  Code Example Flex
           • Reading XML
           • Writing XML




                                                        17




                 Code example SOAP
           • SOAP Show how to generate
              – OpenEdge Code
              – Input Parameters
              – Output Parameters




                                                        18




                   Progress Exchange 2007
                 10-13 June, Phoenix, AZ, USA
                               9
INNOV-2: Building eCommerce solutions in OpenEdge® 10
                     Roger Bentley




            Setting up for Web Services
           • AppServer
           • Tomcat
               – HTTP Server (optional)
           • Web Service Adapter
           • Deploying – Gen your WSDL



                                                        19




          Key Setup Points to Remember
           •   J2SE/TomCat/Jrun
           •   Jakarta Connector
           •   Web-inf/web.xml
           •   Ubroker.properties
           •   Test each step
           •   Enable Web Service
           •   Bprowsdldoc & prosoapview

                                                        20




                   Progress Exchange 2007
                 10-13 June, Phoenix, AZ, USA
                              10
INNOV-2: Building eCommerce solutions in OpenEdge® 10
                     Roger Bentley




                Walk though examples
           • Ajax
               – Show finished app
               – Show code
           • Flex
               – Show finished app
               – Show code



                                                        21




                      When and Why
           •   HTML
           •   Ajax
           •   Flex
           •   Other Solutions




                                                        22




                    Progress Exchange 2007
                  10-13 June, Phoenix, AZ, USA
                               11
INNOV-2: Building eCommerce solutions in OpenEdge® 10
                     Roger Bentley




           Building eCommerce solutions in
                     OpenEdge 10


                         Questions


            Contact Information:
            Roger Bentley
            jrb@bravepoint.com


                                                        23




                   Progress Exchange 2007
                 10-13 June, Phoenix, AZ, USA
                              12

								
To top