iRUI - The Rich Client and i - IBM€¦ · iRUI - The Rich Client and i Pluta Brothers Design, Inc....

iRUI - The Rich Client and iiRUI - The Rich Client and i

Pluta Brothers Design, Inc.Joe Pluta

Pluta Brothers Design, Inc.http://www.plutabrothers.com

joepluta@plutabrothers.com

Agenda

Who is PBD?Multi-Tiered Application DesignThe Tiers of a Rich ClientThe MessagesCreating a Business Logic Library FunctionCreating a ClientConnecting to ILE CodeAdvanced Concepts

Who is PBD?

In business since 1998 Devoted to application modernization through industry standards

using IBM tooling

Products CPYSPLFPDF - The first commercial Java-based product for the i

family PSC/400 - The first tool to completely replace the display file with

servlets and JSPs

Services Training, mentoring, consulting Specializing in proofs of concept

Who is PBD?

Started building open source and commercial solutions for Java-based modernization in 1999

Early adopter of Visual Age for Java, Eclipse, and WDSC ("wrote the book" on the latter two)

Started writing about EGL in 2005 Began pushing the multi-tiered EGL/RPG concept in

2006 Advocate EGL as the primary interface to the i Gave the first hands-on lab for EGL at an i-related

conference

Who is PBD?

Articles, sessions, labs Wrote the business logic for the first public EGL

application, the scheduling application for the Rational Software Developer Conference This was a unique accomplishment, since it used the

Rich UI in conjunction with an i back end Working with a large i ISV to web enable their product

line using thin client EGL to access their existing back end logic

Blog - "EGL and i" on EGL Cafe Rich UI book coming out Real Soon Now

Multi-Tiered Application Design

Multi-Tiered ApplicationsThick Client5250 - The original multi-tierThin Client (Browser Based)Multi-Tiered Rich Internet Applications

Multi-Tiered Applications

UserInterface

BusinessLogic

Thick Client Applications

PC Host

5250-Based Applications

5250Emulation

Business Logic /Database

Thin Client Applications (Browser-Based)

Browser

WebApplication

Server

Thin Client (JSF) in EGL

EGLPageHandler

JSFPage

EGLLibraryFunction

ILEBusinessLogic

Multi-Tiered Rich Internet Applications

Browser

JavaScriptInterpreter

WebApplication

Server

DOM(Web Page)

Rich Client with EGL

RESTService

EGLLibraryFunction

ILEBusinessLogic

The point here is that regardless of the interface, the business logic stays the same. And with the concept of a dynamic array of records, even the EGL library function can remain the same, leaving only the interface to change, which is the ultimate goal of a UI independent application development environment.

WebService

EGLRich UIApplication

Tiers of a Rich Client

Business LogicService LayerRich UI TierBetween these, you have messages

Business Logic

Two componentsFirst is the library function within EGL

Note: not necessarily a call to ILE!It could be a call to SQLIt could be a call to another service

In the iRUI architecture, it is a call to an ILE programThe other component of the business logic for iRUI is the code in the ILE program

Service Layer

Written entirely in EGLRuns in a web application server

WebSphere or TomcatThe web application server provides the infrastructure to support REST or SOAP services

The web application server can run on the i or notNOTE: The EGL portion of the business logic interface also runs in the web application server

Rich UI Tier

JavaScriptRuns in the browser on the end user PCResponds to events from the user (keystrokes, button clicks, mouse movement)Calls logic on the host via services (REST or SOAP)

Business Logic Messaging

RESTService

EGLLibraryFunction

ILEBusinessLogic

WebService

EGLRich UIApplication

SOAP/REST Flexible Records Fixed Records

Fixed vs. Flexible

Not a whole lot of differencesFixed records have fixed length fields

Used when calling ILEMap directly to data structures

Flexible records do not (especially character fields)Better between EGL layers

Used to hide the complexities of service call formattingCan be translated easily to either XML or JSON

Simple vs. Composite

When talking to the host, use simple fixed recordsThese are interchangeable with data structuresWhen passing data between layers, however, you can use more complex data structuresLet's take a look how this would map out

record DSOrderHeader{} 10 OrderNumber string(10); 10 CustomerNumber decimal(6,0); 10 CustomerName string(50); 10 ShippingAddr string(50); 10 Tax money(9,2); 10 Freight money(9,2); 10 Total money(9,2);endrecord DSOrderLine{} 10 ItemNumber string(15); 10 Description string(30); 10 Quantity decimal(9,2); 10 Price money(9,2); 10 Extended money(11,2);end

I use the prefix DS on these records to indicate clearly that they are data structures (fixed), not flexible records.

record OrderHeader{} OrderNumber string; CustomerNumber decimal(6,0); CustomerName string; ShippingAddr string; Tax money(9,2); Freight money(9,2); Total money(9,2);endrecord OrderLine{} ItemNumber string; Description string; Quantity decimal(9,2); Price money(9,2); Extended money(11,2);endrecord Order{} Header OrderHeader; Lines OrderLine[];end

Note that in the flexible records strings have no lengths. Also, we see the concept of the Order, which is a composite.

Messaging Design Points

The primary message format is flexibleComposite flexible records are used between EGL functionsFixed is used only in the lowest level of the library functions to interface with the ILE programs

The functions that call ILE are responsible for reformatting and packaging the simple records into composites

Support may be added for "simplified" flexible records

Flexible records are directly supported by the service generation pieces (SOAP and REST)

Creating the Business Logic Function

Now that we've got the architecture in place, it's time to start cooking with gasFirst, create a dummy library function

Creating the Business Logic Function

Add some logic to create a dummy recordfunction getOrderLocal(orderNumber string in, order Order out) returns (Error)

order = new Order { Header = new OrderHeader {OrderNumber = orderNumber,CustomerNumber = 789,CustomerName = "Pluta Brothers Design, Inc.",ShippingAddr = "542 E. Cunningham, Palatine, IL, 60074",Tax = 17.19,Freight = 14.95,Total = (17.19 + 14.95 + 4.32 + 23.95 + 9.45)

},Lines = [

new OrderLine {ItemNumber = "AS-1445", Description = "Squirt Guns",Quantity = 36, Price = .12, Extended = 4.32 },

new OrderLine {ItemNumber = "IIR-7728", Description = "Wading Pool",Quantity = 1, Price = 23.95, Extended = 23.95 },

new OrderLine {ItemNumber = "IIR-7243", Description = "Metal Ladder",Quantity = 1, Price = 9.45, Extended = 9.45 }

]};return (null);

Thin Client is Now Enabled

From this point forward, you can start developing thin client (JSF) applicationsThe flexible record definitions can be used to build the screenBy creating a library function (and not a service), the business logic is now available to the thin client

At this point, it takes just a few minutes to throw together a JSF interfaceA few minutes more, you add AJAX support

Create a Service

But we're here for the SOA piece, so let's get thereFirst, create a service partservice OrderServicefunction getOrder(orderNumber string in, order Order out) returns (Error)

return ((OrderLib.getOrder(orderNumber, order)));endend

This is a proxy. Its purpose is to surface the library function as a service.

And Now We Generate a Service

That's all it takes.

Creating the Rich UI

Rich UI is different than JSFFor green screen veterans like me, it's different than just about anything we've ever doneBut it's not that bad; you build boxes

Creating the Rich UI

Boxes are like grids - you specify the number of columns, and then put components in the box and they get laid out in the columns

Components can be simple things like labels and text fieldsComplex things like gridsEven other boxes

You can also create custom widgets that have their own layout, and embed them

The Order Widget

Three Boxes:

Header Box

Lines Box

Totals Box

Crafting the UI

orderBox Box { columns = 1, paddingtop = 20,children = [ header, lines, totals] };

header Box = new Box { columns = 2, class = "header",children = [ new TextLabel { text = "Order Number", class = "prompt" }, new TextLabel { class = "value" },

new TextLabel { text = "Customer Number", class = "prompt" }, new TextLabel { class = "value" }, new TextLabel { text = "Customer Name", class = "prompt" }, new TextLabel { class = "value" }]

Crafting the UI (cont'd)lines Grid { behaviors = [ GridBehaviors.alternatingColor, formatCells ], headerBehaviors = [ GridBehaviors.grayCells ], columns = [ new GridColumn{name = "ItemNumber", width = 90, displayName = "Item Number"}, new GridColumn{name = "Description", width = 170 }, new GridColumn{name = "Quantity", width = 70 }, new GridColumn{name = "Price", width = 80 }, new GridColumn{name = "Extended", width = 80 } ],

data = (new any[])};

totals Box = new Box { columns = 2, class = "totals",children = [ new TextLabel { text = "Tax", class = "prompt", width = 430 }, new TextLabel { class = "rvalue", width=80 }, new TextLabel { text = "Shipping and Handling", class = "prompt" }, new TextLabel { class = "rvalue" }, new TextLabel { text = "Order Total", class = "prompt" }, new TextLabel { class = "rvalue" }] };

A Little Stylin'

/* Standard overrides */body { font-family: "Verdana"; }

.prompt, .value, .rvalue { padding: 3px 10px 2px 10px }

.header .prompt { text-align: left; background-color: blue; color: white; }

.totals .prompt { text-align: right; }

.rvalue, .right { text-align: right; }

</style>

And a Little Gridwork

// Handle column formattingfunction formatCells(

grid Grid in, cell Widget in, row any in,rowNumber int in, column GridColumn in)// Set attributes based on column namecase

when (column.name == "Quantity")html HTML = cell.children[1];cell.class = "EglRuiGridCell right";tf TextField = new TextField {

text = html.text, width = 50, class = "right",onChange ::= updateQuantity };

tf.setAttribute("row", rowNumber);cell.children = [ tf ];

when (column.name == "Price" or column.name == "Extended")cell.class = "EglRuiGridCell right";

endend

The Magic (Info)Bus

function setId(ibmSrc string in)id = ibmSrc;InfoBus.subscribe(id, listener);

endfunction listener(eventName String in, eventData any in)

ibm = eventData;case

when (ibm.action == "SHOW")showOrder(ibm.data);

endendfunction sendResponse(action string in, data any in)

InfoBus.publish(ibm.src,new InfobusMessage {

src = id, action = action, data = data });end

More on the Bus

MC Press Online just published an article today(Great timing, eh?)http://tinyurl.com/8jddd6That's short for this:http://www.mcpressonline.com/programming/web-languages/rich-ui-unleashed.html

Install the Service

Generate a WSDL in the EGL projectCopy the WSDL into the RUI projectRight-click on the WSDL and generate the client interface

Invoking the Service

function showOrder(order string)InfoBus.publish(ibm.src, new InfobusMessage

{ action = "*STATUS", data = "Reading Order " :: order } );OrderLib.getOrder(order, orderNotify);

// Remote functionsfunction getOrderRemote(orderNumber string, orderNotify OrderNotify in)

oncb = orderNotify;orderService OrderService { @WebBinding {

wsdlLocation="wsdl/OrderService.wsdl",wsdlPort = "OrderService",wsdlService = "OrderServiceService"}};

wOrder order;wError error;call orderService.getOrder(orderNumber, wOrder, wError

returning to gORCallback;endfunction gORCallback(order Order in, error Error in)

oncb(order, error);end

Getting the Results

function orderNotify(orderIn Order in, error Error in)if (error != null and error.severity != 0)

sendResponse("*STATUS","Order Read Error[" :: error.severity :: "]:" :: error.message);

else;(header.children[2] as TextLabel).text = order.Header.OrderNumber;(header.children[4] as TextLabel).text = order.Header.CustomerNumber;(header.children[6] as TextLabel).text = order.Header.CustomerName;orderLines.data = order.Lines as any[]; (totals.children[2] as TextLabel).text = order.Header.Tax;(totals.children[4] as TextLabel).text = order.Header.Freight;(totals.children[6] as TextLabel).text = order.Header.Total;(shipping.children[2] as TextLabel).text = order.Header.ShippingAddr;(shipping.children[2] as TextLabel).text = MyAddress;sendResponse("SHOW", orderBox);

endend

Connecting Back to the i

function getOrderPgmCall(orderNumber string in, order Order out) returns (Error)control Control;line OrderLine;control.opcode = "H";order.Header.OrderNumber = orderNumber;call "ORDSVR" (control, order.Header, line); // Fill headercontrol.opcode = "D";call "ORDSVR" (control, order.Header, line); // First linewhile (control.retcode == "0")

order.Lines.appendElement(line);call "ORDSVR" (control, order.Header, line); // Next line

endend

The RPG Code FORDHDR IF E K DISK FORDDTL IF E K DISK

DdsCONTROL E DS QUALIFIED DdsORDHDR E DS QUALIFIED DdsORDDTL E DS QUALIFIED

DORDSVR PR D P1 likeds(dsCONTROL) D P2 likeds(dsORDHDR) D P3 likeds(dsORDDTL)

DORDSVR PI D P1 likeds(dsCONTROL) D P2 likeds(sdORDHDR) D P3 likeds(dsORDDTL)

/free select; when P1.opcode = 'H'; chain P2.OHNUM ORDHDR dsORDHDR; P1.retcode = %found(ORDHDR); setll P2.OHNUM ORDDTL; when P1.opcode = 'D'; reade P2.OHNUM ORDDTL dsORDDTL; P1.retcode = %eof(ORDDTL); endsl; /end-free

Advanced Concepts

EncapsulationREST vs SOAPExtensionsDebugging

Encapsulation

function getOrder(orderNumber string in, order Order out) returns (Error)case (access)

when (Utility.ACCESS_LOCAL)return (getOrderLocal(orderNumber, order));

when (Utility.ACCESS_SQL)return (getOrderSql(orderNumber, order));

when (Utility.ACCESS_PGMCALL)return (getOrderPgmCall(orderNumber, order));

otherwisereturn (Utility.Fatal("Invalid access " :: access));

endend

REST vs. SOAP

ios com.pbd.svc.IOrderService { @RESTBinding{baseURI = "http://localhost:9081/iEGL/restservices/OrderService"}};

order com.pbd.data.Order;call ios.getOrder(orderNumber, order)

returning to gORCallBackonException ServiceLib.serviceExceptionHandler;

ExtensionsExternalType Fmt type JavaScriptObject {

relativePath = "com/pbd/util",javaScriptName = "Fmt"

} function getNow() returns (string);

egl.defineClass('com.pbd.util', 'Fmt', // this class{"constructor" : function() {

this.ms = new Date().getTime(); },"getNow" : function( ) {

function two(x) {return ((x>9)?"":"0")+x}function three(x) {return ((x>99)?"":"0")+((x>9)?"":"0")+x}var sec = Math.floor(this.ms/1000);var msec = this.ms % 1000;var min = Math.floor(sec/60);sec = sec % 60;var hr = Math.floor(min/60);min = min % 60;hr = (hr + 18) % 24;return (two(hr) + ":" + two(min) + ":" +

two(sec) + "." + three(msec));}});

Debugging

EGL-level debuggingJava debuggingConsole loggingWeb service explorerChris Laffra's service monitorService Entry Points (SEPs)

Summary

Multi-tiered applications are complex beasts, usually requiring multiple languages and skill sets, not to mention toolsEGL provides a consistent syntax, both in data representation and in program flowAll components, both EGL and non-EGL, can be developed within the RDi-SOA workbenchBy providing end-to-end development capabilities, EGL is the only tool that can leverage the i out of the box to build powerful rich Internet applications

iRUI - The Rich Client and i - IBM€¦ · iRUI - The Rich Client and i Pluta Brothers Design, Inc....

Documents

EGL Rich UI 7.5.1 - IBM...A developer writes Rich UI applications using EGL syntax. For advanced purposes, however, a developer can write custom JavaScript or use JavaScript libraries

jQuery Part III: j y Rich Interfaces with jQuery UI

MSDN Roadshow Session 3 - Building Rich Internet UI with Silverlight 2

Rich Interfaces with jQuery UI - courses.moreservlets.comcourses.moreservlets.com/Course-Materials/pdf/ajax/jQuery-UI-2... · – jQuery and jQuery UI loaded as in previous lecture

Microsoft Confidential ASP.NET Broadest reach Most mature dev platform Silverlight Broad reach Rich, Interactive UI WPF Richest, Interactive UI

디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기

40 Essential Controls Flipbook.graffle - Theresa Neil · 2013-09-23 · Rich UI Fish Eye, Spotlight Control Rich UI Gantt Chart Control Rich UI Floating Footer Control Rich UI Growing

bblr ui bblr ui

Database access with EGL Rich UI - IBM · Access a database with EGL Rich UI In this tutorial, you create a Rich UI application that you can use to create, display, update, and delete

EGL Language Reference - IBM · iv EGL Language Reference. Error conditions .....249 ... #dli directive ... Form processing with Rich UI

UI/UI prototype generation

Rich Interfaces with jQuery UI - Core Servletscourses.coreservlets.com/.../ajax/jQuery-UI-2-Advanced.pdf · 2010-11-15 · Uses the json.org utilities to turn Java List or array into

Case study: Rich UI Test Automation - Happiest Minds

Signal Integrity Consulting€¦ · Original AEL code was implemented by Suhas Jawale! Signal UI Pre-pulse Noise UI Noise UI-1 Noise UI-2 Noise UI-3 Noise UI-4 Noise UI-5 Noise UI-6

maltatoday The Cabinet ‘rich-list’content.maltatoday.com.mt/ui/files/Cabinet rich-list 2014...€58,665, University of Malta €3,413, Bank interest €6 €70,091 Carmelo Abela

Copyright 2007-2011, Synchrony Systems, Inc. EGL Rich UI / Web 2.0 GUI to RUI Transformation with Enterprise Application Modernizations Slavik Zorin Founder

Metawidget White Papermetawidget.sourceforge.net/media/whitepaper/MetawidgetWhitePap… · the clinic's screens. The application was built around a rich, Web-based UI making extensive

EGL Rich UI – Overview and Demonstration

maltatodaycontent.maltatoday.com.mt/ui/files/2015 RICH LIST 2.pdf · Jonathan Cardona Identity Malta, €75,000 Philip Micallef Air Malta €125,000 Joseph Cuschieri Malta Gaming

Enabling Feature-Rich HMI Requirements for an open UI ... · Automotive Linux Summit 2012 Eva Brucherseifer 20.09.2012 21/22 Conclusion l Open UI Framework enables —software reuse