1. Application Composer Rich Internet User Interfaces for Enterprise Applications Björn Müller

2. / / 2 Software AG AJAX reach rich Desktop Applications Classical HTML Applications AJAX Rich Internet Applications

3. / / 3 Software AG AJAX - No reloading of pages! Server Anwendung Seite HTML Seite HTML Seite HTML Seite HTML Server Application Seite HTML Page HTML Seite HTML Page HTML Seite HTML Page HTML Seite HTML Page HTML Seite Server Anwendung Data Page Server Application classical rich

4. / / 4 Software AG AJAX Hype Level 2002 2003 2004 2005 2006 2001 GoogleMaps Firefox 1.0 OpenAJAX Backbase, Dojo, Software AG, Tibco, Zimbra IE 6.0 JavaScript ???! JavaScript !!!? AJAX Classical Web Web 2.0 JSP / JSF Frustration

5. / / 5 Software AG Dedicate d Areas Dedicate d Areas General Purpose Pages General Purpose Pages Why is AJAX important for Enterprise Applications? Enterprise Application Intranet Internet Employee‘s Desk „Reach“ is still critical! Interactivity is critical! AJAX classic

6. / / 6 Software AG + = function calculate() { var v1 = document.getElementById("I1").value * 1; var v2 = document.getElementById("I2").value * 1; var v3 = v1 + v2; document.getElementById("O1").innerHTML = v3; } Using Javascript for interactive pages

7. / / 7 Software AG Using Javascript for http-Communication Communication via explicit Javascript Classes  IE  Mozilla … or: Hidden Frame Communication function sendMessageToServer() { var req = new ActiveXObject(„Microsoft.XMLHTTP“); req.open(„GET“,“http://host:port/aplication“,true); req.send(„….“); } var req = new XMLHttpRequest(); Ouch!

8. / / 8 Software AG DEMO

9. / / 9 Software AG Productivity Aspects Browser HTML/Javascript AJAX Application Browser Compatibility Issues Javascript „Ugliness“ Missing Tool Support Control Concept Control Intergation Concept Page Modularization Bind Client Logic to Server Side Logic Client Server Communication WAN aware Roundtrips BasisChallengeGoal

10. / / 10 Software AG Browser HTML/Javascript AJAX Application Browser Compatibility Issues Javascript „Ugliness“ Missing Tool Support Control Concept Control Intergation Concept Page Modularization Bind Client Logic to Server Side Logic Client Server Communication WAN aware Roundtrips BasisChallengeGoal Productivity Aspects XML layout definition High Quality Control Library Automated Client-Server Coupling Tool Support Application Composer overcomes these challenges!

11. / / 11 Software AG Application Composer - The Basics A page is represented by an XML layout description The page‘s data is represented by an XML data document The UI  Renders the content of XML data document  Updates the XML data document  Sends XML data document to processing are adequate point of times The processing  Receives XML data document + event  Updates data document according to processing/business rules  Sends data document back to UI

12. / / 12 Software AG Layout View – Arrangement of Controls <field valueprop="echoIn” width="200“/> <field valueprop="echoOut” width="200" displayonly="true"/> <field valueprop="echoIn” width="200“/> <field valueprop="echoOut” width="200" displayonly="true"/>

13. / / 13 Software AG Processing View: Data + Events DATA: AAAAA Echo: AAAAA ______________________________________ EVENTS: onTest DATA: AAAAA Echo: AAAAA ______________________________________ EVENTS: onTest

14. / / 14 Software AG Interaction Processing User Interface Processing AAAAA onTest! AAAAA Echo: AAAAA Interaction Processing

15. / / 15 Software AG Mashup Integrate other AJAX UIs with complex processing behind in a simple way

16. / / 16 Software AG Interaction Processing Java BPEL ???? Interaction Processing

17. / / 17 Software AG Java Object AAAAA onTest! AAAAA onTest! public class TestEchoAdapter { public void onTest() { String echoIn = getXCIData().get(„echoIn“); String echoOut = „Echo: “ + echoIn; getXCIData().set(„echoOut“,echoOut); } public class TestEchoAdapter { public void onTest() { String echoIn = getXCIData().get(„echoIn“); String echoOut = „Echo: “ + echoIn; getXCIData().set(„echoOut“,echoOut); }

18. / / 18 Software AG BPEL Object AAAAA onTest! AAAAA onTest! … <from expression=concat(‚Echo‘, bpws:getVariableData(‚xciState‘, ‘xdo‘‚‘/xo:xdo/xo:data/xo:echoIn‘))/> <to variable=‚xciState‘ part=‚xdo‘ query=‚‘/xo:xdo/xo:data/xo:echoOut‘) ‘/> … … <from expression=concat(‚Echo‘, bpws:getVariableData(‚xciState‘, ‘xdo‘‚‘/xo:xdo/xo:data/xo:echoIn‘))/> <to variable=‚xciState‘ part=‚xdo‘ query=‚‘/xo:xdo/xo:data/xo:echoOut‘) ‘/> …

19. / / 19 Software AG Basic Structure Java Servlet Engine (Tomcat, Websphere, SAP NetWeaver, BEA, …) Application Composer Runtime Java Page Adapter BPEL Page Adapter http(s) Server Browser XML

20. / / 20 Software AG And now – SOA! Business functions are offered through Web Service API User Interface Processing provides  Creating screens according to users‘ needs  Picking the Web Services and plug them behind User Interface  Defining processing logic Calling Web Services Managing Navigation Aspects Managing User Interface Controls Application Composer does all of this, of course! ;-)

21. / / 21 Software AG On Top of SOA Java Servlet Engine (Tomcat, Websphere, SAP NetWeaver, BEA, …) Application Composer Runtime Java Page Adapter BPEL Page Adapter http(s) UI Processing Browser WebService Applications/ Services General Ledger General Ledger Shipping Inventory Mgmt Inventory Mgmt Mail Server Mail Server

22. / / 22 Software AG On Top of SOA Registry - Repository App WebService App RPC App 3270 App xxx Workflow Runtime Governance Service Enabling Service Orchestration User Interface Business Process Management Security Communications Data Integration Development Tools

23. / / 23 Software AG On Top of Natural SOA Java Servlet Engine (Tomcat, Websphere, SAP NetWeaver, BEA, …) Application Composer Runtime Java Page Adapter BPEL Page Adapter UI Processing WebService Applications/ Services Natural Application Subprogram Natural Business Services Natural Business Services Screen/ Map Processing ApplinX

24. / / 24 Software AG Business Logic On Top of the SOA Stack User Interface Processing Interaction Processing Control Logic Navigation Applications / Services Web Services Web Services Application Composer Busíness Logic

25. / / 25 Software AG Mapped Web Service Calling Interaction Processing Web Service Web Service XML Data of Page Input XML Output XML Request Mapping Request Mapping Response Mapping Response Mapping Mapped Web Service Call

26. / / 26 Software AG Page Adapter Application Composer & Java Generated Java Base Class Implementation Class

27. / / 27 Software AG Page Adapter Application Composer & Java Generated Java Base Class Implementation Class protected void wsmapped_readInboxForUsers() { // generated code... } protected void wsmapped_readInboxForUsers() { // generated code... } public void onRefresh() { wsmapped_readInboxForUsers(); MessageOutput.showMessage(„Refreshed!“); } public void onRefresh() { wsmapped_readInboxForUsers(); MessageOutput.showMessage(„Refreshed!“); }

28. / / 28 Software AG Page Navigation public void onNextPage(IXCIAdapterEvent event) { DataObject params = navigate_showdetails(); params.set("creditCardNumber","4711471147114711"); params.set("editMode","DISPLAY"); } public void onNextPage(IXCIAdapterEvent event) { DataObject params = navigate_showdetails(); params.set("creditCardNumber","4711471147114711"); params.set("editMode","DISPLAY"); } <xciparameter paramname="editMode“ paramtype="xs:string"> <xciparameter paramname="creditCardNumber" paramtype="xs:string">... <xciparameter paramname="editMode“ paramtype="xs:string"> <xciparameter paramname="creditCardNumber" paramtype="xs:string">...

29. / / 29 Software AG Application Composer & Java SDO (Service Data Object) – Simple, standardized access to XML data Henry Ford limo Taurus limo Sierra Henry Ford limo Taurus limo Sierra // create XML DataObject data = new DataObject(); data.set(„firstName“,“Henry“); data.set(„lastName“,“Ford“); DataObject car; car = data.createDataObject(„car“); car.set(„type“,“limo“); cat.set(„model“,“Taurus“); car = data.createDataObjedct(„car“); car.set(„type“,“limo“); car.set(„model“,“Sierra“); // create XML DataObject data = new DataObject(); data.set(„firstName“,“Henry“); data.set(„lastName“,“Ford“); DataObject car; car = data.createDataObject(„car“); car.set(„type“,“limo“); cat.set(„model“,“Taurus“); car = data.createDataObjedct(„car“); car.set(„type“,“limo“); car.set(„model“,“Sierra“); // readXML String fn, ln; fn = data.getString(„firstName“); ln = data.getString(„lastName“); List l; l = data.getList(„car“); for (int i=0; i<l.size(); i++) { DataObject car = l.get(i); car.getString(„type“); car.getString(„model“); } // readXML String fn, ln; fn = data.getString(„firstName“); ln = data.getString(„lastName“); List l; l = data.getList(„car“); for (int i=0; i<l.size(); i++) { DataObject car = l.get(i); car.getString(„type“); car.getString(„model“); }

30. / / 30 Software AG Interaction Processing Java BPEL ???? Interaction Processing

31. / / 31 Software AG Interaction Processing Java BPEL Natural Interaction Processing

32. / / 32 Software AG Natural AAAAA onTest! AAAAA onTest! PROCESS PAGE USING „PAGE01“ #ECHOIN #ECHOOUT DECIDE ON FIRST *EVENT VALUE „onTest“ #ECHOOUT := „Hello: “ + #ECHOIN PROCESS PAGE UPDATE END-DECIDE END PROCESS PAGE USING „PAGE01“ #ECHOIN #ECHOOUT DECIDE ON FIRST *EVENT VALUE „onTest“ #ECHOOUT := „Hello: “ + #ECHOIN PROCESS PAGE UPDATE END-DECIDE END

33. / / 33 Software AG Natural

34. / / 34 Software AG Natural PROCESS PAGE 'office' WITH NAME 'offices(*).id' VALUE offices.id NAME 'offices(*).name' VALUE offices.name NAME 'zip' VALUE zip NAME 'phone' VALUE phone NAME 'fax' VALUE fax NAME 'office' VALUE office NAME 'street' VALUE street NAME 'city' VALUE city NAME 'country' VALUE country NAME 'message' VALUE message NAME 'longitude' VALUE longitude NAME 'latitude' VALUE latitude NAME 'zoomlevel' VALUE zoomlevel NAME 'infotext' VALUE infotext DEFINE DATA PARAMETER 1 offices.id (U/1:*) DYNAMIC 1 offices.name (U/1:*) DYNAMIC 1 zip (P19) 1 phone (P19) 1 fax (P19) 1 office (U) DYNAMIC 1 street (U) DYNAMIC 1 city (U) DYNAMIC 1 country (U) DYNAMIC 1 message (U) DYNAMIC 1 longitude (U) DYNAMIC 1 latitude (U) DYNAMIC 1 zoomlevel (U) DYNAMIC 1 infotext (U) DYNAMIC END-DEFINE EVENT-START DECIDE ON FIRST *EVENT VALUE 'nat:page.begin' /* add event code PROCESS PAGE UPDATE VALUE 'nat:page.end' /* add event code IGNORE VALUE 'onGetDetails' /* add event code PROCESS PAGE UPDATE VALUE 'onBack' /* add event code PROCESS PAGE UPDATE NONE VALUE PROCESS PAGE UPDATE END-DECIDE EVENT-END END

35. / / 35 Software AG Runtime Java Servlet Engine (Tomcat, Websphere, SAP NetWeaver, BEA, …) Application Designer Runtime http(s) Server Browser Natural Page Adapter PROCESS PAGE USING „PAGE01“ #ECHOIN #ECHOOUT DECIDE ON FIRST *EVENT VALUE „onTest“ #ECHOOUT := „Hello: “ + #ECHOIN PROCESS PAGE UPDATE END-DECIDE END PROCESS PAGE USING „PAGE01“ #ECHOIN #ECHOOUT DECIDE ON FIRST *EVENT VALUE „onTest“ #ECHOOUT := „Hello: “ + #ECHOIN PROCESS PAGE UPDATE END-DECIDE END

36. / / 36 Software AG Eclipse Page Layout Definition Page Layout Definition Design time layout.xml Natural Adapter Implementation Natural Adapter Implementation PROCESS PAGE USING „PAGE01“ #ECHOIN #ECHOOUT DECIDE ON FIRST *EVENT VALUE „onTest“ #ECHOOUT := „Hello: “ + #ECHOIN PROCESS PAGE UPDATE END-DECIDE END PROCESS PAGE USING „PAGE01“ #ECHOIN #ECHOOUT DECIDE ON FIRST *EVENT VALUE „onTest“ #ECHOOUT := „Hello: “ + #ECHOIN PROCESS PAGE UPDATE END-DECIDE END Generation of Data Structure Generation of „PROCESS PAGE … END“

37. / / 37 Software AG AJAX and Natural User Interface Business Logic Application Designer Application Composer Implement UI Processing in Natural! Processing Provide WebServices for Natural functions! Natural