Application Composer

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
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?
Employees Desk
Interactivity is critical!
Enterprise Application
Intranet
Internet
Dedicated Areas
General Purpose Pages
Reach is still critical!
AJAX
classic
6
Using Javascript for interactive pages
lthtmlgt ltbodygt ltinput type"text" id"I1"gt
ltinput type"text" id"I2"gt ltbutton
onclick"calculate()"gt lt/buttongt ltspan
id"O1"/gt lt/bodygt lt/htmlgt ltscriptgt function
calculate() var v1 document.getElementById
("I1").value 1 var v2 document.getElement
ById("I2").value 1 var v3 v1 v2
document.getElementById("O1").innerHTML
v3 lt/scriptgt
7
Using Javascript for http-Communication

• Communication via explicit Javascript Classes
• IE
• Mozilla
• or Hidden Frame Communication

ltscriptgt function sendMessageToServer() var
req new ActiveXObject(Microsoft.XMLHTTP)
req.open(GET,http//hostport/aplication,true)
req.send(.) lt/scriptgt
Ouch!
var req new XMLHttpRequest()
8
DEMO
9
Productivity Aspects
Browser Compatibility Issues
Control Concept
Bind Client Logic to Server Side Logic
Browser HTML/Javascript
AJAX Application
Javascript Ugliness
Control Intergation Concept
Client Server Communication
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
Browser HTML/Javascript
AJAX Application
Javascript Ugliness
Control Intergation Concept
Client Server Communication
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 pages 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
ltxcipage xciname"testecho"gt lttitlebar
name"TEST Echo"gtlt/titlebargt ltheadergt
ltbutton name"Test" method"onTest/gt
lt/headergt ltpagebodygt ltrowarea
name"Test"gt ltitrgt
ltlabel name"In" width"120/gt
ltfield valueprop"echoIn
width"200/gt lt/itrgt
ltitrgt ltlabel name"Out"
width"120"/gt ltfield
valueprop"echoOut
width"200"
displayonly"true"/gt lt/itrgt
lt/rowareagt lt/pagebodygt ltstatusbar/gt lt/xcip
agegt
13
Processing View Data Events
DATA ltheadergtlt/headergt ltdatagt
ltechoIngtAAAAAlt/echoIngt ltechoOutgtEcho
AAAAAlt/echoOutgt lt/datagt lttrailergtlt/trailergt _____
_________________________________ EVENTS onTes
t
14
Interaction Processing
User Interface
Processing
ltdatagt ltechoIngtAAAAAlt/echoIngt
ltechoOutgtlt/echoOutgt lt/datagt onTest!
ltdatagt ltechoIngtAAAAAlt/echoIngt
ltechoOutgtEcho AAAAAlt/echoOutgt lt/datagt
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)
ltdatagt ltechoIngtAAAAAlt/echoIngt
ltechoOutgtlt/echoOutgt lt/datagt onTest!
18
BPEL Object
ltxcibpelo gt ltxcimethod nameonHello"gt
ltsequence name"Sequence"gt ltassigngt ltcopygt
ltfrom expressionconcat(Echo,
bpwsgetVariableData(xciState,
xdo/xoxdo/xodata/xoechoIn))/gt ltto
variablexciState partxdo
query/xoxdo/xodata/xoechoOut) /gt
lt/copygt lt/assigngt lt/sequencegt lt/xcimethodgt lt
/xcibpelogt
ltdatagt ltechoIngtAAAAAlt/echoIngt
ltechoOutgtlt/echoOutgt lt/datagt 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
Runtime Governance
Security
Communications
Development Tools
Business Process Management
Workflow
User Interface
Service Orchestration
Service Enabling
Data Integration
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
Control Logic
Navigation
Web Services
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_readInboxFo
rUsers() MessageOutput.showMessage(Refreshed
!)
28
Page Navigation
ltxcipage xciname"crcadetails"gt ltxcisetupgt
ltxciparameter paramname"editMode
paramtype"xsstring"gt
lt/xciparametergt ltxciparameter
paramname"creditCardNumber"
paramtype"xsstring"gt lt/xciparametergt
lt/xcisetupgt lttitlebar name"Credit Card
Details"gtlt/titlebargt ... ...
ltstatusbargtlt/statusbargt lt/xcipagegt
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

ltdatagt ltfirstNamegtHenrylt/firstNamegt
ltlastNamegtFordlt/lastNamegt ltcargt
lttypegtlimolt/typegt ltmodelgtTauruslt/modelgt
lt/cargt ltcargt lttypegtlimolt/typegt
ltmodelgtSierralt/modelgt lt/cargt lt/datagt
// 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,lim
o) car.set(model,Sierra)
// readXML String fn, ln fn data.getString(fir
stName) ln data.getString(lastName) List
l l data.getList(car) for (int i0
iltl.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
ltdatagt ltechoIngtAAAAAlt/echoIngt
ltechoOutgtlt/echoOutgt lt/datagt 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
'natpage.begin' / add event code
PROCESS PAGE UPDATE VALUE 'natpage.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
Provide WebServices for Natural functions!
Natural
Business Logic