Mobile Access to Mainframe Apps

Mobile Interfaces to Mainframe
Applications – Architecture
Considerations
Louis JOLIBOIS
Patrick FOURNIER
(SysperTec Communication)
Monday, August 12, 2013 @ 1:30 PM
Session # 13455

Mobile 3270 TE
• Mobile devices are pervasive
• Will replace traditional workstations/PCs
• Work anywhere, anytime, using any mobile device
• Email
• Documents and spreadsheets
• Mobile access to mainframe applications
• Web user interfaces (WUI)
• Web services (WS)
• 3270 terminal emulation (TE)  Focus of our development
2

Defining MOBILE
• Mobile devices
Different screen sizes, keyboards, touchscreens, track pads …
• Mobile access
• Internet access via WIFI, 3G/LTE, 4G or Ethernet
3
Tablets Phones/PDA Laptops Desktops
MOBILE = accessing application from anywhere,
with any type of connected device

Web browser environment
• Connecting
• Communicate with outside world
• HTTP/S
• Rendering
• End-user display
• HTML & CSS
• Scripting
• User interactivity, background computations, programmatic
access to HTTP and HTML layers
• Powerful JavaScript runtime
4
Common denominator supported by all mobile devices

Architectural options
Traditional TN3270 technology
• Not portable
TN3270 = incompatible with web browser technology 
Need device-specific app for each current/future mobile device
• Not mobile
TN3270 relies on a single persistent TCP connection  Fragile
connection to host: mobile networks involve roaming, proxies, bad
reception…
5
✘
Host
TN3270 TN3270
Mobile device
WEB
Code

Browser-based 3270 TE
Accessing mainframe applications from the web browser:
What are the architectural options?
Where should the code reside?
6

HTTP
HTTP server can reside on host or middle tier server
7
Host
HTTP
Middle tier server
HTTP
HTTP
Server
HTTP
Server
Mobile device
WEB
HTTP HTTPTN3270 WEB

Exposing 3270 data through HTTP
Proprietary HTTP server
• Bridge between 3270 VTAM sessions and HTTP sessions
HTTP based on a Request/Reply behavior: one HTTP session
involves several requests
• Serves 3270 screen data to HTTP requests
8
3270 data stream
HTTP
Server
On-demand 3270 screen
images available in HTTP

Mobile 3270 TE
9
What Where
HTTP connectivity Host (or Server)
User interactivity Client
Screen rendering ???
HTTP HTTP
Mobile device
WEB
UI
Host
HTTP Server

Architectural options:
Mobile
Where should the rendering of the 3270 screen occur ?
10
Architectural Option Screen Rendering
Thin Client Host
Smart Client Client

Thin client architecture
Screen rendering on host
• Portable screen rendering: HTML
• Browser native rendering language
• Efficient at rendering complex text layout
11
Web pages
User display
WEB
Host
VTAM 3270
screen image
HTML + CSS
(+ JavaScript)
Application
Rendering
HTTP/S

Emulation implemented as browsing session
• Transforms 3270
screens into
webpages
• Sends user data
to mainframe
application
• Displays web pages
• User keystrokes sent to
HTML <input
type="text"> fields
• When user hits ENTER
(or PF key) <form> is
POST-ed to host,
host reply contains new
screen
12
GET /cics
CICS screen
as a webpage
POST PF=ENTER
screen as a
new webpage
POST PF=PF1
ENTER
PF1
screen as a
new webpage

HTML templating
13
<html>
<head>….</head>
{{{ON-CHARACTER-ATTRIBUTE (REVERSE,BLUE)<span class='RBLUE'>}}}{{{
ON-CHARACTER-ATTRIBUTE (REVERSE,RED)<span class='RRED'>}}}{{{
ON-CHARACTER-ATTRIBUTE (REVERSE,PINK)<span class='RPINK'>}}}{{{
ON-CHARACTER-ATTRIBUTE (REVERSE,GREEN)<span class='RGREEN'>}}}{{{
ON-CHARACTER-ATTRIBUTE (REVERSE,TURQUOISE)<span class='RTURQUOISE'>}}}
…
<body><div>
<form id=‚3270screen‛>{{{ GENERATE-HTML (1,1,1920) }}}</form>
<span>{{{NAME-OF (PRINT-RELAY),8}}}</span>
<span id="screenLines">{{{NUMBER-OF (SCREEN-LINES)}}}</span>
<span id="screenColumnss">{{{NUMBER-OF (SCREEN-COLUMNS)}}}</span>
<span id=‚cursor">{{{POSITION-OF-THE-CURSOR}}}</span>
</div></body>
</html>
HTML Template
Web pages
VTAM 3270
screen image
HTML + CSS
(+ JavaScript)
Templates
Screen image
Rendering

HTML templating
14
<html>
<head>
<script src=‚user-input.js‛/>
<script>
$(‘.inputFields’).click(function () {
// do something
});
</script>
<link rel=‘stylesheet’ type=‘text/css’ href=‘3270style.css’ />
</head>
{{{ON-CHARACTER-ATTRIBUTE (REVERSE,BLUE)<span class='RBLUE'>}}}{{{
ON-CHARACTER-ATTRIBUTE (REVERSE,RED)<span class='RRED'>}}}{{{
ON-CHARACTER-ATTRIBUTE (REVERSE,PINK)<span class='RPINK'>}}}{{{
ON-CHARACTER-ATTRIBUTE (REVERSE,GREEN)<span class='RGREEN'>}}}{{{
ON-CHARACTER-ATTRIBUTE (REVERSE,TURQUOISE)<span class='RTURQUOISE'>}}}
…
JavaScript and CSS embedded into HTML Template

Rendered screen
15
Web pages
VTAM 3270
screen image
HTML + CSS
(+ JavaScript)
Templates
Screen image
<html><head>
<script>…</script>
<style>…</style>
</head>
<body>
<form id="3270screen">
<pre>
<span vt="O" vp="0" vr="1" vc="1" vl="27" class="NGREEN‚ autoskip="">      …
<span vt="A" vp="27" vr="1" vc="28" vl="1" autoskip="1"> </span> …
<span vt="O" vp="28" vr="1" vc="29" vl="36" autoskip="" class="NBLUE">Signon to CICS  …
<span vt="A" vp="64" vr="1" vc="65" vl="1" autoskip="1"> </span><span vt="O" vp="65" vr="1" vc= …
<span vt="A" vp="71" vr="1" vc="72" vl="1" autoskip="1"> </span><span vt="O" vp="72" vr="1" vc= …
…
</pre>
</form>
<span>RHTIJM00</span>
<span id="screenLines">24</span><span id="screenColumnss">80</span>
<span id=‚cursor">2E9</span>
</html>
Rendering result
JavaScript
HTML
CSS
Rendering

3270 emulation embedded anywhere
Easy to embed anywhere with <iframe> tag
16

Pros
• Host manages 3270 data
• Fast: takes advantage of huge CPU power available
• Safe: screen or sensitive data may programmatically be
stripped from what is sent to clients
• Simple
• Same HTML delivered to all clients
• Universal device support: no custom development needed
18

Cons
• Host CPU usage
• HTML-compliant bandwidth requirement
• Rendering is not device dependent (cannot take
advantage of specific device ergonomics: screen sizes,
input devices, …)
• Difficult to script an emulation session on user device
(user macros)
Only display data is available, not original 3270 data
19

Going truly mobile
Putting intelligence in client
• Shift workload of rendering screen away from host
• Shift decision of what should be rendered where it
belongs, i.e. where display occurs
• Take full advantage of each device specific
ergonomics and computing power
20
Let client devices render the 3270 screens
Data on the wire versus display on the wire

Going truly mobile
Isn’t having screens rendered on client devices just going
back to old-style fat-client 3270 TE?
21
Not really
• Mobile-friendly interface between device and host
• Light: relies on universally installed client (browser-based)
“Full” emulation in JavaScript on client device made
relatively recently possible by:
• Browser advances (HTML5)
• Advent of the pocket supercomputer

Smart client architecture
Screen rendering on mobile device
22
HTML5 +
CSS
Emulation screen
VTAM 3270
screen
image
JSON
data
format
JSON
data
format
HTTP
NETWORK
Host preformats 3270 data
stream
Device renders and
displays screen
Preformatting Rendering

JSON format
• Recent but proven technology
• Lightweight
• Easy to read and write
• By computers
• By humans
• Native support by JavaScript engines
• Fast
• Easy to use
23

JSON templating
24
{
"rlay": "RHTVJO03",
"tran": "demo",
"appl": "SPCICSQ ",
"time": "20130619141450",
"screen": {
"rows": 24,
"cols": 80,
"cursor": {
"field": "V000017B",
"pos": "V000017B"
},
"sna": "",
"desc": [
{"n": "", "r": 1, "c": 1, "l": 8,
"a": "ASKIP,PROT,NUM,NORM,MDT",
"o": "NEUTRAL", "h": "OFF", "v": "DEMOM1 " },
{"n": "", "r": 1, "c": 10, "l": 0,
"a": "ASKIP,PROT,NUM,NORM",
"o": "NEUTRAL", "h": "OFF", "v": "" },
{"n": "", "r": 1, "c": 30, "l": 21,
"o": "NEUTRAL", "h": "OFF",
"v": " ** V.O.Y.A.G.E.S. **"
},
……………
}
{{{GENERATE-VARIABLES (1,1,9920) "FIELD" }}}
{
"rlay": ‚{{{ NAME-OF (RELAY) }}}",
"tran": ‚{{{ NAME-OF (TRANSACTION-EXTERNAL) }}}",
"appl": "{{{CURRENT-VALUE-OF "APPLID" }}}",
"time": "{{{ NAME-OF (DATE-TIME) }}}",
"screen": {
"rows": {{{ NUMBER-OF (SCREEN-LINES) }}},
"cols": {{{ NUMBER-OF (SCREEN-COLUMNS) }}},
"cursor": {
"field": "{{{ FIELD-WITH-CURSOR }}}",
"pos": "{{{ POSITION-OF-THE-CURSOR }}}"
},
"sna": "{{{ NAME-OF (SNA-STATUS) }}}",
"desc": [{{{
FOR-EACH-VALUE-IN "FIELDNAME" }}}{
"n": "{{{ TRIMMED-VALUE-OF "FIELDNAME" }}}",
"r": {{{ CURRENT-VALUE-OF "FIELDLINE" }}},
"c": {{{ CURRENT-VALUE-OF "FIELDCOLUMN" }}},
"l": {{{ CURRENT-VALUE-OF "FIELDLENGTH" }}},
"a": "{{{ CURRENT-VALUE-OF "FIELDATTRB" }}}",
"o": "{{{ CURRENT-VALUE-OF "FIELDCOLOR" }}}",
"h": "{{{ CURRENT-VALUE-OF "FIELDHILIGHT}}}",
"v": "{{{ CURRENT-VALUE-OF "FIELDVALUE" }}}"
}{{{AFTER-NOT-LAST-VALUE-OF "FIELDNAME",}}}
{{{ END-FOR "FIELDNAME" }}}]
}
}
Preformatting:
3270 screen
matched with
template
JSON Template Pseudo-3270 data image formatted in JSON

JSON screen data
25
{
"rlay": "RHTVJO03",
"tran": "demo",
"appl": "SPCICSQ ",
"time": "20130619141450",
"screen": {
"rows": 24,
"cols": 80,
"cursor": {
"field": "V000017B",
"pos": "V000017B"
},
"sna": "",
"desc": [
{"n": "", "r": 1, "c": 1, "l": 8,
"a": "ASKIP,PROT,NUM,NORM,MDT",
"o": "NEUTRAL", "h": "OFF", "v": "DEMOM1 " },
{"n": "", "r": 1, "c": 10, "l": 0,
"o": "NEUTRAL", "h": "OFF", "v": "" },
{"n": "", "r": 1, "c": 30, "l": 21,
"o": "NEUTRAL", "h": "OFF",
"v": " ** V.O.Y.A.G.E.S. **"
},
……………
}
9632
16763
Bytes on wire
Screen data size comparison
JSON HTML

Application code structure
• Mostly JavaScript
• GUI in HTML and CSS
26
Client code installed on device
HTML
CSS
JavaScript

App packaging and distribution
As web application:
27
GET WebApp
Web server
WebApp
Session data
Start 3270 session
HostMobile device
WebApp
GET WebApp

App packaging and distribution
Packaging as native application can be achieved with:
• PhoneGap
• Titanium
• …
28
Session data
Start 3270 session
Native
App
Mobile device Host

Emulator code
29
GUI code
Emulation
Core
GUI logic
HTML + CSS
+ JavaScript
Emulation Logic
Pure JavaScript program

Emulator code
30
Same Emulation Core
pure JavaScript code
Android Nexus S
Specific GUI
Emulation
Core
iPad Specific
GUI
Emulation
Core
Non-Specific
GUI
Emulation
Core

Emulation Core
Exposed JavaScript
API:
• login(‘transaction')
• request(‘ENTER’)
• disconnect()
• action('backspace')
• cols()
• rows()
• cursorPos()
• copy(from, to)
• paste(from, to)
• eraseEndOfField()
• inputText(‘text’)
• moveCursor("up");
• …
Broadcast events:
• screen:ready
• change:cursor
• keyboardLocked
• waitLocked
• …
31
Emulation Core
Screen
Model
Host
Host
Connection
HTTP

Emulation session scripting
32
var connection = new HostConnection(), // Handles the connection to the Host
model = new ScreenModel(), // Stores and represents the screen data
// bind the connection to the model using a dedicated controller
session = new SessionController(connection, model);
model.once('screen:ready', function () {
// this gets executed when the first screen is received
model.setCursor({row: 26, col: 10});
model.inputText(‘USER1’);
session.request(‘ENTER’);
…
});
session.login(‘DEMOAPP'); // start the session to the application
Entering data into DEMOAPP first screen

Emulation session scripting
33
var canvasView = new ScreenViewCanvas({
model: model,
el: ‘#3270screen’
});
var textView = new ScreenViewText({
model: model
});
With an HTML5 canvas embedded
into a web page
As a text displayed into the browser
console for debugging purposes

Summary
35
Thin Client Smart Client
Communication protocol HTTP (over TCP/IP) HTTP (over TCP/IP)
Screen rendering On Host On Client
Data format HTML + CSS
(+JavaScript)
JSON
Type of data Rendered screen image 3270 fields
Support device-specific
features
Difficult Easy
Support of new devices Instant May require
development
Screens responsiveness Very fast Depends on device
Application type Web page Web page, Web app,
native app in app store

Summary
36
Smart client?Thin clientFat client
• Few years back: Fat client  Thin client
• Thin client is “lighter” and easier to maintain
• Now: Smart client?
• Best of both worlds to offer

Thank you!
Questions?
37
Icons under Creative Commons Attribution 3.0 License:
IcoMoon by Keyamoon http://icomoon.io
Glyphs by WebHostingHub http://www.webhostinghub.com/glyphs/
Booth #521
louis.jolibois@syspertec.com
@LouisJolibois
patrick.fournier@syspertec.com

Mobile Access to Mainframe Apps

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Mobile Access to Mainframe Apps

Ähnlich wie Mobile Access to Mainframe Apps (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Mobile Access to Mainframe Apps