1 / 37

Application Composer

Application Composer. Rich Internet User Interfaces for Enterprise Applications Björn Müller. AJAX. rich. Desktop Applications. AJAX Rich Internet Applications. Classical HTML Applications. reach. Seite. Seite. Page. Seite. Page. Seite. Seite. Page. Seite. Seite. Page.

aiko-tran
Download Presentation

Application Composer

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. AJAX rich Desktop Applications AJAX Rich Internet Applications Classical HTML Applications reach

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

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

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

  6. Using Javascript for interactive pages <html> <body> <input type="text" id="I1"> + <input type="text" id="I2"> <button onclick="calculate();"> = </button> <span id="O1"/> </body> </html> <script> 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; } </script>

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

  8. DEMO

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

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

  11. 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. Layout View – Arrangement of Controls <xcipage xciname="testecho"> <titlebar name="TEST Echo"></titlebar> <header> <button name="Test" method="onTest“/> </header> <pagebody> <rowarea name="Test"> <itr> <label name="In" width="120“/> <field valueprop="echoIn” width="200“/> </itr> <itr> <label name="Out" width="120"/> <field valueprop="echoOut” width="200" displayonly="true"/> </itr> </rowarea> </pagebody> <statusbar/> </xcipage>

  13. Processing View: Data + Events DATA: <header></header> <data> <echoIn>AAAAA</echoIn> <echoOut>Echo: AAAAA</echoOut> </data> <trailer></trailer> ______________________________________ EVENTS: onTest

  14. Interaction Processing User Interface Processing <data> <echoIn>AAAAA</echoIn> <echoOut></echoOut> </data> onTest! <data> <echoIn>AAAAA</echoIn> <echoOut>Echo: AAAAA</echoOut> </data> Interaction Processing

  15. Mashup • Integrate other AJAX UIs with complex processing behind in a simple way

  16. Interaction Processing Interaction Processing Java BPEL ????

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

  18. BPEL Object <xci:bpelo …> … <xci:method name=“onHello"> <sequence name="Sequence"> <assign> <copy> <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‘) ‘/> </copy> </assign> </sequence> </xci:method> … </xci:bpelo> <data> <echoIn>AAAAA</echoIn> <echoOut></echoOut> </data> onTest!

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

  20. 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. On Top of SOA Browser http(s) Java Servlet Engine (Tomcat, Websphere, SAP NetWeaver, BEA, …) Application Composer Runtime UI Processing Java Page Adapter BPEL Page Adapter WebService General Ledger Shipping Inventory Mgmt Mail Server Applications/ Services

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

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

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

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

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

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

  28. Page Navigation <xcipage xciname="crcadetails"> <xcisetup> <xciparameter paramname="editMode“ paramtype="xs:string"> </xciparameter> <xciparameter paramname="creditCardNumber" paramtype="xs:string"> </xciparameter> </xcisetup> <titlebar name="Credit Card Details"></titlebar> ... ... <statusbar></statusbar> </xcipage> public void onNextPage(IXCIAdapterEvent event) { DataObject params = navigate_showdetails(); params.set("creditCardNumber","4711471147114711"); params.set("editMode","DISPLAY"); }

  29. Application Composer & Java • SDO (Service Data Object) – Simple, standardized access to XML data <data> <firstName>Henry</firstName> <lastName>Ford</lastName> <car> <type>limo</type> <model>Taurus</model> </car> <car> <type>limo</type> <model>Sierra</model> </car> </data> // 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“); }

  30. Interaction Processing Interaction Processing Java BPEL ????

  31. Interaction Processing Interaction Processing Java BPEL Natural

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

  33. Natural

  34. 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 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 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

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

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

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

More Related