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

Download Report

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

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
/ / 2 Software AG
AJAX - No reloading of pages!
Seite
Page
Seite
Page
HTML
Seite
Page
HTML
Seite
Page
HTML
HTML
Server Application
Anwendung
classical
Seite
Page
Data
rich
Data
Data
Data
Server Application
Anwendung
/ / 3 Software AG
AJAX Hype Level
2001
JavaScript ???!
Classical Web
IE 6.0
JSP / JSF Frustration
2002
2003
2004
Firefox 1.0
AJAX
GoogleMaps
2005
Backbase, Dojo, Software AG, Tibco, Zimbra
Web 2.0
2006
JavaScript !!!?
OpenAJAX
/ / 4 Software AG
Why is AJAX important for Enterprise Applications?
Employee‘s Desk
Intranet
Interactivity is
critical!
Enterprise Application
Internet
AJAX
General
Purpose
Pages
Dedicate
d
Areas
„Reach“
is still critical!
classic
/ / 5 Software AG
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>
/ / 6 Software AG
Using Javascript for http-Communication
 Communication via explicit Javascript Classes

IE

Mozilla
<script>
function sendMessageToServer()
Ouch!
{
var req = new ActiveXObject(„Microsoft.XMLHTTP“);
req.open(„GET“,“http://host:port/aplication“,true);
req.send(„….“);
}
</script>
var req = new XMLHttpRequest();
 …or: Hidden Frame Communication
/ / 7 Software AG
DEMO
/ / 8 Software AG
Basis
Browser
Compatibility
Issues
Control
Concept
Bind Client Logic
to
Server Side Logic
Javascript
„Ugliness“
Control
Intergation
Concept
Client Server
Communication
Missing Tool
Support
Page
Modularization
WAN aware
Roundtrips
Challenge
AJAX
Application
Browser
HTML/Javascript
Productivity Aspects
Goal
/ / 9 Software AG
Productivity Aspects
Basis
Browser
Compatibility
Issues
Control
Concept
Bind Client Logic
to
Server Side Logic
XML layout
definition
Control
Javascript High Quality Control Library Client Server
Intergation
„Ugliness“
Communication
Automated Client-Server
Coupling
Concept
Tool Support
Missing Tool
Support
Page
Modularization
Challenge
AJAX
Application
Browser
HTML/Javascript
Application Composer overcomes these challenges!
WAN aware
Roundtrips
Goal
/ / 10 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
/ / 11 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>
/ / 12 Software AG
Processing View: Data + Events
DATA:
<header></header>
<data>
<echoIn>AAAAA</echoIn>
<echoOut>Echo: AAAAA</echoOut>
</data>
<trailer></trailer>
______________________________________
EVENTS:
onTest
/ / 13 Software AG
Interaction Processing
User Interface
Processing
<data>
<echoIn>AAAAA</echoIn>
<echoOut></echoOut>
</data>
<data>
<echoIn>AAAAA</echoIn>
<echoOut>Echo: AAAAA</echoOut>
</data>
onTest!
Interaction Processing
/ / 14 Software AG
Mashup
 Integrate other AJAX UIs with complex processing behind in a simple way
/ / 15 Software AG
Interaction Processing
<data>
<echoIn>AAAAA</echoIn>
<echoOut></echoOut>
</data>
<data>
<echoIn>AAAAA</echoIn>
<echoOut>Echo:
AAAAA</echoOut>
</data>
onTest!
Interaction Processing
Interaction Processing
Java
BPEL
????
/ / 16 Software AG
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!
/ / 17 Software AG
BPEL Object
<data>
<echoIn>AAAAA</echoIn>
<echoOut></echoOut>
</data>
<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>
onTest!
/ / 18 Software AG
Browser
Basic Structure
http(s)
Server
Java Servlet Engine (Tomcat, Websphere, SAP NetWeaver, BEA, …)
Application Composer Runtime
XML
Java Page
Adapter
BPEL Page
Adapter
/ / 19 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!
;-)
/ / 20 Software AG
Browser
On Top of SOA
UI Processing
http(s)
Java Servlet Engine (Tomcat, Websphere, SAP NetWeaver, BEA, …)
Application Composer Runtime
Java Page
Adapter
BPEL Page
Adapter
Applications/
Services
WebService
General
Ledger
Shipping
Inventory
Mgmt
Mail
Server
/ / 21 Software AG
On Top of SOA
Development Tools
Runtime Governance
Security
Communications
Registry - Repository
Business
Process
Workflow
Management
User Interface
Service Orchestration
Data
Integration
Service Enabling
WebService
RPC
3270
xxx
App
App
App
App
/ / 22 Software AG
On Top of Natural SOA
UI Processing
Java Servlet Engine (Tomcat, Websphere, SAP NetWeaver, BEA, …)
Application Composer Runtime
Java Page
Adapter
BPEL Page
Adapter
Applications/
Services
WebService
Natural
Business
Services
Subprogram
ApplinX
Screen/
Map Processing
Natural Application
/ / 23 Software AG
On Top of the SOA Stack
User Interface
Processing
Interaction Processing
Control Logic
Busíness
Logic
Navigation
Web
Services
Business Logic
Business Logic
Applications / Services
/ / 24 Software AG
Mapped Web Service Calling
Interaction Processing
Mapped Web Service Call
XML Data of Page
Request
Mapping
Input XML
Response
Mapping
Output XML
Web
Service
/ / 25 Software AG
Application Composer & Java
Generated Java
Base Class
Implementation
Class
Page Adapter
/ / 26 Software AG
Application Composer & Java
protected void wsmapped_readInboxForUsers()
{
// generated code
...
}
Generated Java
Base Class
Implementation
Class
public void onRefresh()
{
wsmapped_readInboxForUsers();
Page Adapter
MessageOutput.showMessage(„Refreshed!“);
}
/ / 27 Software AG
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");
}
/ / 28 Software AG
Application Composer & Java
 SDO (Service Data Object) – Simple, standardized access to XML data
<data>
// create XML
<firstName>Henry</firstName>
DataObject data = new DataObject();
<lastName>Ford</lastName>
data.set(„firstName“,“Henry“);
<car>
data.set(„lastName“,“Ford“);
<type>limo</type>
DataObject car;
<model>Taurus</model>
car = data.createDataObject(„car“);
</car>
car.set(„type“,“limo“);
<car>
cat.set(„model“,“Taurus“);
<type>limo</type>
car = data.createDataObjedct(„car“);
<model>Sierra</model>
car.set(„type“,“limo“);
// readXML
</car>
car.set(„model“,“Sierra“);
String fn, ln;
</data>
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“);
/ / 29 Software AG
}
Interaction Processing
<data>
<echoIn>AAAAA</echoIn>
<echoOut></echoOut>
</data>
<data>
<echoIn>AAAAA</echoIn>
<echoOut>Echo:
AAAAA</echoOut>
</data>
onTest!
Interaction Processing
Interaction Processing
Java
BPEL
????
/ / 30 Software AG
Interaction Processing
<data>
<echoIn>AAAAA</echoIn>
<echoOut></echoOut>
</data>
<data>
<echoIn>AAAAA</echoIn>
<echoOut>Echo:
AAAAA</echoOut>
</data>
onTest!
Interaction Processing
Interaction Processing
Java
BPEL
Natural
/ / 31 Software AG
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!
/ / 32 Software AG
Natural
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
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
/ / 33 Software AG
Natural
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
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
/ / 34 Software AG
Browser
Runtime
Server
http(s)
Java Servlet Engine (Tomcat, Websphere, SAP NetWeaver, BEA, …)
Application Designer Runtime
Natural
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
/ / 35 Software AG
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
/ / 36 Software AG
Application
Composer
Natural
Business
Logic
Implement
UI Processing
in Natural!
Application
Designer
Processing
User
Interface
AJAX and Natural
Natural
Provide
WebServices for
Natural functions!
/ / 37 Software AG