Application Composer

Application Composer

Rich Internet User Interfaces for Enterprise Applications

Björn Müller

/ / 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!

/ / 8 Software AG

DEMO

/ / 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>


<echoOut>Echo: AAAAA</echoOut>

</data>


/ / 15 Software AG

Mashup

Integrate other AJAX UIs with complex processing behind in a simple way

/ / 16 Software AG


<data>


<echoOut></echoOut>

</data>

onTest!

<data>



</data>


JavaJava BPELBPEL ????????

Interaction ProcessingInteraction Processing

/ / 17 Software AG

Java Object

<data> <echoIn>AAAAA</echoIn> <echoOut></echoOut></data>

onTest!


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


onTest!


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

Mail

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


Control LogicControl Logic NavigationNavigation

Applications / Services

Web

ServicesWeb

Services

Application C

omposer

Busíness

Logic

/ / 25 Software AG

Mapped Web Service Calling


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


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


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


<data>


<echoOut></echoOut>

</data>

onTest!

<data>



</data>


JavaJava BPELBPEL ????????


/ / 31 Software AG


<data>


<echoOut></echoOut>

</data>

onTest!

<data>



</data>


JavaJava BPELBPEL NaturalNatural


/ / 32 Software AG

Natural


onTest!


onTest!

PROCESS PAGE USING „PAGE01“ #ECHOIN #ECHOOUT

DECIDE ON FIRST *EVENT VALUE „onTest“ #ECHOOUT := „Hello: “ + #ECHOIN PROCESS PAGE UPDATEEND-DECIDE

END



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


Application Designer Runtime

http(s)

Ser

ver

Bro

wse

rN

atur

al

NaturalNatural

Natural

Page

Adapter



END



END

/ / 36 Software AG

EclipseEclipse

Page

Layout

Definition

Page

Layout

Definition

Design time

layout.xml

Natural

Adapter

Implementation

Natural

Adapter

Implementation



END



END

Generation of Data Structure

Generation of „PROCESS PAGE … END“

/ / 37 Software AG

AJAX and Natural

Use

r

Inte

rfac

e

Bus

ines

s

Logi

c

Application

Designer

Application

ComposerImplement

UI Processing

in Natural!

Pro

cess

ing

Provide

WebServices for

Natural functions!

Natural

Natural

Documents

Application Composer