Upload
herbert-tucker
View
232
Download
0
Embed Size (px)
Citation preview
/ / 2 Software AG
AJAX
reach
rich
Desktop
Applications
Classical
HTML Applications
AJAXRich Internet
Applications
/ / 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 Data Data Data
Page
Server Application
classical
rich
/ / 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 Software AG
Dedicated
Areas
Dedicated
Areas
General
Purpose
Pages
General
Purpose
Pages
Why is AJAX important for Enterprise Applications?
Enterprise ApplicationEnterprise ApplicationIntranet
Internet
Employee‘s DeskEmployee‘s Desk
„Reach“
is still critical!
Interactivity is
critical!
AJAX
classic
/ / 6 Software AG
<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>
Using Javascript for interactive pages
/ / 7 Software AG
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>
var req = new XMLHttpRequest();
Ouch!
/ / 9 Software AG
Productivity AspectsB
row
ser
HT
ML
/Jav
asc
ript
AJA
XA
ppl
ica
tion
BrowserCompatibility
Issues
Javascript„Ugliness“
Missing ToolSupport
ControlConcept
ControlIntergation
Concept
PageModularization
Bind Client Logicto
Server Side Logic
Client ServerCommunication
WAN awareRoundtrips
Basis Challenge Goal
/ / 10 Software AG
Bro
wse
rH
TM
L/J
ava
scrip
t
AJA
XA
ppl
ica
tion
BrowserCompatibility
Issues
Javascript„Ugliness“
Missing ToolSupport
ControlConcept
ControlIntergation
Concept
PageModularization
Bind Client Logicto
Server Side Logic
Client ServerCommunication
WAN awareRoundtrips
Basis Challenge Goal
Productivity Aspects
XML layout definitionHigh Quality Control Library
Automated Client-Server CouplingTool Support
Application Composer overcomes these challenges!
/ / 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 Software AG
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>
<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 Software AG
Processing View: Data + Events
DATA:
<header></header><data> <echoIn>AAAAA</echoIn> <echoOut>Echo: AAAAA</echoOut></data><trailer></trailer>
______________________________________
EVENTS:
onTest
DATA:
<header></header><data> <echoIn>AAAAA</echoIn> <echoOut>Echo: AAAAA</echoOut></data><trailer></trailer>
______________________________________
EVENTS:
onTest
/ / 14 Software AG
Interaction Processing
User Interface
Processing<data>
<echoIn>AAAAA</echoIn>
<echoOut></echoOut>
</data>
onTest!
<data>
<echoIn>AAAAA</echoIn>
<echoOut>Echo: AAAAA</echoOut>
</data>
Interaction Processing
/ / 16 Software AG
Interaction Processing
<data>
<echoIn>AAAAA</echoIn>
<echoOut></echoOut>
</data>
onTest!
<data>
<echoIn>AAAAA</echoIn>
<echoOut>Echo: AAAAA</echoOut>
</data>
Interaction Processing
JavaJava BPELBPEL ????????
Interaction ProcessingInteraction Processing
/ / 17 Software AG
Java Object
<data> <echoIn>AAAAA</echoIn> <echoOut></echoOut></data>
onTest!
<data> <echoIn>AAAAA</echoIn> <echoOut></echoOut></data>
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 Software AG
BPEL Object
<data> <echoIn>AAAAA</echoIn> <echoOut></echoOut></data>
onTest!
<data> <echoIn>AAAAA</echoIn> <echoOut></echoOut></data>
onTest!
<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>
<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>
/ / 19 Software AG
Basic Structure
Java Servlet Engine (Tomcat, Websphere, SAP NetWeaver, BEA, …)Java Servlet Engine (Tomcat, Websphere, SAP NetWeaver, BEA, …)
Application Composer Runtime
Java Page
Adapter
BPEL Page
Adapter
http(s)
Ser
ver
Bro
wse
r
XML
/ / 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 Software AG
On Top of SOA
Java Servlet Engine (Tomcat, Websphere, SAP NetWeaver, BEA, …)Java Servlet Engine (Tomcat, Websphere, SAP NetWeaver, BEA, …)
Application Composer Runtime
Java Page
Adapter
BPEL Page
Adapter
http(s)
UI P
roce
ssin
gB
row
ser
WebService
App
licat
ions
/
Ser
vice
s
General
LedgerGeneral
LedgerShippingShipping
Inventory
MgmtInventory
Mgmt
ServerMail
Server
/ / 22 Software AG
On Top of SOA
Registry - R
epository
App
WebService
App
RPC
App
3270
App
xxx
Workflow
Runtim
e Governance
Service Enabling
Service Orchestration
User Interface
Business Process
Management
Security
Com
munications
Data
Integration
Developm
ent Tools
/ / 23 Software AG
On Top of Natural SOA
Java Servlet Engine (Tomcat, Websphere, SAP NetWeaver, BEA, …)Java Servlet Engine (Tomcat, Websphere, SAP NetWeaver, BEA, …)
Application Composer Runtime
Java Page
Adapter
BPEL Page
AdapterUI P
roce
ssin
g
WebService
App
licat
ions
/
Ser
vice
s
Natural ApplicationNatural Application
Subprogram
Natural
Business
Services
Natural
Business
Services
Screen/
Map Processing
ApplinXApplinX
/ / 24 Software AG
Business LogicBusiness Logic
On Top of the SOA Stack
User Interface
Processing
Interaction Processing
Control LogicControl Logic NavigationNavigation
Applications / Services
Web
ServicesWeb
Services
Application C
omposer
Busíness
Logic
/ / 25 Software AG
Mapped Web Service Calling
Interaction ProcessingInteraction Processing
Web
ServiceWeb
Service
XML Data of PageXML Data of Page
Input XMLInput XML Output XMLOutput XML
Request
MappingRequest
Mapping
Response
MappingResponse
Mapping
Mapped Web Service Call
/ / 26 Software AG
Page Adapter
Application Composer & Java
Generated Java
Base Class
Implementation
Class
/ / 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 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");}
<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>
<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>
/ / 29 Software AG
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>
<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 XMLDataObject 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 XMLDataObject 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“);
// readXMLString 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“);}
// readXMLString 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 Software AG
Interaction Processing
<data>
<echoIn>AAAAA</echoIn>
<echoOut></echoOut>
</data>
onTest!
<data>
<echoIn>AAAAA</echoIn>
<echoOut>Echo: AAAAA</echoOut>
</data>
Interaction Processing
JavaJava BPELBPEL ????????
Interaction ProcessingInteraction Processing
/ / 31 Software AG
Interaction Processing
<data>
<echoIn>AAAAA</echoIn>
<echoOut></echoOut>
</data>
onTest!
<data>
<echoIn>AAAAA</echoIn>
<echoOut>Echo: AAAAA</echoOut>
</data>
Interaction Processing
JavaJava BPELBPEL NaturalNatural
Interaction ProcessingInteraction Processing
/ / 32 Software AG
Natural
<data> <echoIn>AAAAA</echoIn> <echoOut></echoOut></data>
onTest!
<data> <echoIn>AAAAA</echoIn> <echoOut></echoOut></data>
onTest!
PROCESS PAGE USING „PAGE01“ #ECHOIN #ECHOOUT
DECIDE ON FIRST *EVENT VALUE „onTest“ #ECHOOUT := „Hello: “ + #ECHOIN PROCESS PAGE UPDATEEND-DECIDE
END
PROCESS PAGE USING „PAGE01“ #ECHOIN #ECHOOUT
DECIDE ON FIRST *EVENT VALUE „onTest“ #ECHOOUT := „Hello: “ + #ECHOIN PROCESS PAGE UPDATEEND-DECIDE
END
/ / 33 Software AG
Natural
PROCESS PAGE 'office' WITHNAME '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 PARAMETER1 offices.id (U/1:*) DYNAMIC1 offices.name (U/1:*) DYNAMIC1 zip (P19)1 phone (P19)1 fax (P19)1 office (U) DYNAMIC1 street (U) DYNAMIC1 city (U) DYNAMIC1 country (U) DYNAMIC1 message (U) DYNAMIC1 longitude (U) DYNAMIC1 latitude (U) DYNAMIC1 zoomlevel (U) DYNAMIC1 infotext (U) DYNAMICEND-DEFINE
EVENT-STARTDECIDE ON FIRST *EVENT
VALUE 'nat:page.begin'/* add event codePROCESS PAGE UPDATE
VALUE 'nat:page.end'/* add event codeIGNORE
VALUE 'onGetDetails'/* add event code
PROCESS PAGE UPDATEVALUE 'onBack'
/* add event codePROCESS PAGE UPDATE
NONE VALUEPROCESS PAGE UPDATE
END-DECIDEEVENT-END
END
/ / 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 PARAMETER1 offices.id (U/1:*) DYNAMIC1 offices.name (U/1:*) DYNAMIC1 zip (P19)1 phone (P19)1 fax (P19)1 office (U) DYNAMIC1 street (U) DYNAMIC1 city (U) DYNAMIC1 country (U) DYNAMIC1 message (U) DYNAMIC1 longitude (U) DYNAMIC1 latitude (U) DYNAMIC1 zoomlevel (U) DYNAMIC1 infotext (U) DYNAMICEND-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-DECIDEEVENT-END
END
/ / 35 Software AG
Runtime
Java Servlet Engine (Tomcat, Websphere, SAP NetWeaver, BEA, …)Java Servlet Engine (Tomcat, Websphere, SAP NetWeaver, BEA, …)
Application Designer Runtime
http(s)
Ser
ver
Bro
wse
rN
atur
al
NaturalNatural
Natural
Page
Adapter
PROCESS PAGE USING „PAGE01“ #ECHOIN #ECHOOUT
DECIDE ON FIRST *EVENT VALUE „onTest“ #ECHOOUT := „Hello: “ + #ECHOIN PROCESS PAGE UPDATEEND-DECIDE
END
PROCESS PAGE USING „PAGE01“ #ECHOIN #ECHOOUT
DECIDE ON FIRST *EVENT VALUE „onTest“ #ECHOOUT := „Hello: “ + #ECHOIN PROCESS PAGE UPDATEEND-DECIDE
END
/ / 36 Software AG
EclipseEclipse
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 UPDATEEND-DECIDE
END
PROCESS PAGE USING „PAGE01“ #ECHOIN #ECHOOUT
DECIDE ON FIRST *EVENT VALUE „onTest“ #ECHOOUT := „Hello: “ + #ECHOIN PROCESS PAGE UPDATEEND-DECIDE
END
Generation of Data Structure
Generation of „PROCESS PAGE … END“