Legacy TUI to EGL/Web Application Modernization

Copyright 2008, Synchrony Systems, Inc.

Legacy TUI to EGL/WebApplication Modernization

Enterprise Modernizations


Page 2

State of Affairs of Legacy Applications

Applications are text-based, monolithic, inflexibleArchitecture is single-tierTools, language and platform are antiquatedDomain knowledge buried deep inside sourcePressures to modernize; fear of risks, costs, complexity


Page 3

The Need

Move to browser-based rich UI and Web 2.0Refactor into component architecture and SOAExtract application software assetsAccelerate EGL adoptionManage risk, cost and complexity of modernization


Page 4

The Solution

Analysis to generate modernization planText forms transformation metricsProgram flow transformation metricsTransformation challenges metrics

Technology enabled modernization to EGL/WebInversion of controlUI Facelift

JSFRich UI

Business logic refactoringSOA Enablement


Page 5

The Result

Improved architectureSingle language; multiple deployment targetsNo middleware or proprietary runtime componentsSOA enabled

Improved language and platformFull integration with EGLModern IDE – RBDNative look and feel (JSF or Rich UI)


Page 6

Modernization Roadmap

Terminal

(EGL TUI3270/5250)

Host

(EGL Programs/Display Logic

Business LogicData Access)

Web Browser

(EGL/JSFFacelift)

App Server

(EGL Handlers/Display Logic


Web Browser

(EGL/JSFFacelift)

App Server

(EGL Handlers/Display Logic)

Host

(EGL Services/Business Logic

Data Access)

Web Browser

(Rich UI Facelift/RUI Handlers

Display Logic)

Host

(TUI Programs/COBOL

RPGNatural)

Terminal

(TUI3270/5250)

Host/App Server


Data Access)

Monolithic LegacyHost Architecture

Monolithic EGLHost Architecture

JSF Single-tier Architecture

SOA/JSF Multi-tierArchitecture

SOA/RUI Multi-tier Architecture


Page 7

Modernization Roadmap

Host

(TUI Programs/COBOL

RPGNatural)

Terminal

(TUI3270/5250)


Terminal

(EGL TUI3270/5250)

Host




Web Browser

(EGL/JSFFacelift)

App Server




Web Browser

(EGL/JSFFacelift)

App Server


Host


Data Access)


Web Browser

(Rich UI Facelift/RUI Handlers

Display Logic)

Host/App Server


Data Access)



Page 8

Critical Web Transition

Host

(TUI Programs/COBOL

RPGNatural)

Terminal

(TUI3270/5250)


Terminal

(EGL TUI3270/5250)

Host




Web Browser

(EGL/JSFFacelift)

App Server




Web Browser

(EGL/JSFFacelift)

App Server


Host

(EGL Services/Business LogicData Access)


Web Browser

(Rich UI Facelift/RUI HandlersDisplay Logic)

Host/App Server

(EGL Services/Business LogicData Access)


TUI forms → web pagesTUI programs → JSF HandlersMonolithic → web modelHost → application server

Preserve execution sequenceMaintain program stateRetain transactions


Page 9

Modernized TUI Application – Before and After


Page 10

EGL/TUI Application


Page 11

EGL/Web Application


Page 12

UI Facelift

Improve on “text based” UI look and feelLinks replace selection entry fieldsToolbars and buttons replace function keysStyles, colors and graphics highlight logical screen areas


Page 13

Program Flow

“main” Function Page request handler

Submit function

User interacts with form

TUI Program (sequential) Web Application (event-driven)

program initialization

validate

form initialization

converse

forward

Return

input loop

redisplay

program initialization

form initialization

validate

forward

Return

redisplay

onConstruction

onPreRender

Display

Submit

User interacts with page


Page 14

Implementation Differences

TUI Web

Program flow Sequential Event-driven

Presentation Text-based HTML/JSF/RUI


Page 15

TUI Transformation Technology (T3) Overview


Page 16

EGL Modernization Toolset

AnalyticsApplication knowledge miningModernization scenarios, metrics, estimates

Rules-based transformationBulk transformation of monolithic application flow to web modelBusiness logic extraction into servicesFacelift of Text UI to JSF/Rich UI


Page 17

T3 Transformation Approach

Source code rewritingTransformation scripting languageGeneric transformation rulesApplication specific transformation rules

Web page generationPattern matching languageGenerate JSP pages with smart layoutGeneric and application specific layout transformation rules

Rules-basedReusableReplayableCustomizable to customer requirement


Page 18

T3 Primary Components

AnalysisIdentify common characteristics of TUI formsIdentify common program structures of TUI programs

Program flow transformationGeneration of JSF page handlersEGL program transformation to use JSF/RUI formsGenerate submit functions

Function-key toolbar linksMenu selection links

Transformation of state management

Text UI transformationGrouping fields according to common usage patternsConversion of text forms to web pages


Page 19

T3 Block Diagram

Transformation Rules

EGL TUI Code EGL Web CodeEGL Source

Transformation Engine

JSP Web PageForm GenerationEngine

Form GenerationRules

Form specifications

(e.g. 3270,5250, DDS)

Web ApplicationTUI Application

Legacy Code(Cobol, RPG,

Natural Adabas)

T3 Primary Components


Page 20

T3 – EGL Transformation

Transformation scripts

Transformation script writtenin our own

transformation language

Debugging log of transformation actions

Resulting EGL code generated by the selected

transformation action


Page 21

T3 – Transformation Results Overview

EGL source filesto be transformed

EGL source code of the selected file

Abstract syntax treeof EGL code

Transformed EGL source


Page 22

T3 – TUI Form Pattern Matching

EGL TUI forms to be generated

as JSP

The fields on the selected TUI

form

Colors indicatewhich fields are

matched by each pattern

Facelift patterns

Pattern matchinglanguage

Embedded scriptto generate

JSP for matchingfields

Debugginginformation


Page 23

T3 – Facelift Generation Preview

A view of the resulting

web page


Page 24

Modernization of TUI Application – Phase I


Page 25

Text Forms Transformation

JSP/JSF page Data Record

Text Form

Page Handler


Page 26

Extracting JSP/JSF Page from Text Form

Layout is extracted from text form specificationJSF components are bound to fields in data records


Text Form

Page Handler


Page 27

Converting Text Form to Data Record

One data record per text formProvides data displayed by JSF pageProvides data to be processed by handlerContains presentation fields to control appearance (color, enabled/disabled state, etc.)


Text Form

Page Handler


Page 28

JSF Page Handler

One page handler per formHolds data record used JSF pageHandles requests to display the pageHandles requests to process page when submitted


Text Form

Page Handler


Page 29

UI FaceliftHeader AreaHeader Area

Input AreaInput Area

Selection AreaSelection Area

Message AreaMessage Area

Navigation AreaNavigation Area


Page 30

Layout Areas – Target UI

Header AreaHeader Area

Input AreaInput Area

Selection AreaSelection Area

Message AreaMessage Area

Navigation AreaNavigation Area


Page 31

Behavior Mapping - Example

Description options are maintainedSelection codes are embedded into link logicText borders are replaced with graphic bordersInput fields are removed (hidden)


Page 32

Resizable Layout

Expected web browser behaviorSupport multiple monitor sizes


Page 33

Resizable Text


Page 34

Centralized Style Information

Simplified maintenanceCustomization of lookUse style sheets (CSS) and page templates (JTPL)


Page 35

Core Program Logic Transformations

Convert flow from monolithic to webSplit functions at the converse statementReplace control flow statements with navigation statementsRemove 'input loops‘Connect logic to JSF lifecycle events

Convert TUI artifacts to JSF equivalentsTUIPrograms to JSF Handlers‘Use form’ statements‘Set’ statements

Create handler functionsPF Keys Menu selections


Page 36

Support Components

Native EGL libraries (NavLib & FormLib)Handle program control flowProvide state managementEncapsulate JSF/HTML widget style interactions

Custom Style SheetProject set-up and configuration

Data source configurationProject build filesApplication deployment descriptor


Page 37

Multiple Forms

A single TUIProgram converses multiple formsFor floating forms and or help forms

Transformed to use JSF dialog panels

For independent forms Split into multiple JSFHandlersEach form is a separate web page


Page 38

Co-dependent Multiple Forms

Maintain a single JSF HandlerManage internal page display state

Multiple form submitsAJAX refreshes

Multiple UI paradigmsMerged screens into single web pageNotebook model – JSF tab group panelWizard model


Page 39

Open Cursors – Challenges

Programs that keep an open database cursor across converse statements

Open statement, perhaps with ‘forUpdate’ clauseRetrieve one or more rows from the databaseConverse form, show the retrieved dataAfter converse use the cursor for:

Getting more dataReplacing or deleting the current row

Cursors don’t remain open across web page renderings

When the from is submitted the cursor can no longer be used


Page 40

Open Cursors – Solutions

For programs that show one record at a timePre-fetch the records into a dynamic arrayKeep an index for the currently displayed recordMove data to the form based on the currently indexed recordUpdate or Delete the current record as a separate DB transaction

The record must specify a primary key

For programs that page through a table of several records

Define a record to hold displayed dataPre-fetch rows into a dynamic array of these recordsUse a JSF DataTable to display many rows of data

For large record setsImplement programmatic paging using EGL and DB positioning options


Page 41

SOA Enablement – Phase II


Page 42

Phase I EGL Modernization Recap

TUI forms transformed to web pagesAll text programs transformed to JSF HandlersMonolithic programs transformed to web modelDeployed on single web tier


Page 43

Phase II – SOA Enablement

Starting point – EGL/Web ApplicationSingle tier deployment

Extract business logic/data access to EGL ServicesBusiness logic/data access extracted into ‘stateless’ functions

Requires analysis of variable/data usagePass required data as arguments to functions

Put functions into servicesCreate interfaces for the servicesJSF Handlers are modified to invoke service functions

EGL Services are deployed to host platformMulti tier deployment


Page 44

Summary

Transformation from EGL TUI to WebModernization AnalysisHigh degree of automationSystematic and repeatable transformationCo-existence of ongoing development and modernizationQ&A

Documents

Legacy TUI to EGL/Web Application Modernization