Craig [email protected]
Copyright © 2014, Craig PelkieALL RIGHTS RESERVED
Simple Mobile Programmingfor RPG
using jQuery Mobile
The starting point: browser-based HTML forms
This is the example menu that is provided with CGIDEV2
2
The starting point: browser-based HTML forms
This is an example form that is provided with CGIDEV2
3
The starting point: browser-based HTML forms
4
The starting point: the menu, recoded for mobile
This is an adaptation of the CGIDEV2 menu, using jQuery Mobile
Still usable in a desktop browser
Usable in a mobile device
What makes this usable
Text is easy to read
Links are easily selected
5
6
The starting point: the menu, recoded for mobile
What is jQuery Mobile?
Touch-optimized mobile framework
Supports smart phones, tablets, desktop
Built upon the jQuery Framework, HTML5, CSS
Variety of widgets – easy to configure
Themes for customization
7
How jQuery Mobile Works
data-attributes implement and style widgets
Part of HTML5 specification
Custom attribute that begins with data-
The basis of the framework
No need to write any JavaScript code
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="c">
</div>
</div>8
data-role Attributes
data-role="page" Page that is visible in the viewport
data-role="header" Header section of the document
data-role="footer" Footer section of the document
data-role="content" Section for the page content
data-role="navbar" A navigation section
data-role="button" A clickable button
data-role="listview" A list of links
data-role="collapsible" A group of collapsible items
9
How to include jQuery Mobile on a page
min = minified version of file
code.jquery.com —Content Delivery Newtwork (CDN)
Link to jQuery Mobile CSS
jQuery Framework
jQuery Mobile Framework10
<head><meta charset="utf-8"><meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/
jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">
</script></head>
A basic single page document
<body> <div data-role="page">
<div data-role="header"><h1>Page Title</h1>
</div>
<div data-role="content"><p>Page content goes here.</p>
</div>
<div data-role="footer"><h4>Page Footer</h4>
</div>
</div></body>
11
Basic list of Links
<div data-role="page" id="main">
<div data-role="header"><h1>CGIDEV2 Library</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#old">Examples using old subprocedures</a></li>
<li><a href="#new">Examples using new subprocedures</a></li>
<li><a href="#other">Other examples</a></li><li><a href="#doc" >Documentation</a></li>
</ul></div>
</div> 12
A list of links with dividers
<div data-role="page" id="main">
<div data-role="header"><h1>CGIDEV2 Library</h1>
</div>
<div data-role="content">
<ul data-role="listview"data-inset="true" data-theme="e">
<li data-role="list-divider"><h2>Subprocedures</h2></li>
<li><a href="#old">Examples using old subprocedures</a></li>
<li><a href="#new">Examples using new subprocedures</a></li>
<li data-role="list-divider"><h2>Other</h2></li><li><a href="#other">Other examples</a></li><li><a href="#doc" >Documentation</a></li>
</ul></div>
</div>13
How jQuery Mobile handles form elements
Creates mobile optimized elements based on native HTML code
Adds styles and effects automatically with no additional coding
Supports HTML5 form elements and attributes
Requires the <label> element
Stacks elements on top of each other by default
14
An HTML form using jQuery Mobile attributes and classes
15
data-role Attributes
data-role="fieldcontain" Places labels and elements side by side
Used in <div> or any HTML5structural element
data-role="controlgroup" Groups radios / checkboxesMust be in <fieldset>
data-role="slider" Creates flip switch widgetIn <select> element
data-role="collapsible" Creates a collapsibile container
16
Basic use of fieldcontain
data-role="fieldcontain"
Places label and element side by side on screen >= 480px
<div data-role="fieldcontain"><label for="custname">Your name</label><input type="text" name="custname" id="custname"
maxlength="40"></div>
17
Slider widget
type="range"
Creates a slider widgetDefault range of 0 to 100data-highlight fills in the track
<div data-role="fieldcontain"><label for="years">Years lived there</label>
<input type="range" name="years" id="years" value="25" min="1" max="50" data-highlight="true">
</div>
18
Flip switch widget
data-role="slider"
Uses <select> and <option>Two choicesFirst choice is default
<div data-role="fieldcontain"><label for="ordered">Ordered from us</label>
<select id="ordered" name="ordered" data-role="slider"><option value="orderedYes">Yes</option><option value="orderedNo">No</option>
</select></div>
19
Radio Buttons — Label side-by-side
data-role="fieldcontain"
data-role="controlgroup"
<div data-role="fieldcontain"><fieldset data-role="controlgroup">
<legend>Received catalog from us</legend>
<label for="catYes">YES</label> <input type="radio" name="catalog" id="catYes"
value="1">
<label for="catNo">NO</label> <input type="radio" name="catalog" id="catNo"
value="0"></fieldset>
</div>20
Radio Buttons — Horizontal
data-type="horizontal"
<div data-role="fieldcontain"><fieldset data-role="controlgroup"
data-type="horizontal" ><legend>Received catalog from us</legend>
<label for="catYes">YES</label> <input type="radio" name="catalog" id="catYes"
value="1">
<label for="catNo">NO</label> <input type="radio" name="catalog" id="catNo"
value="0"></fieldset>
</div>21
Check Box — Basic
22
<div data-role="fieldcontain"><fieldset data-role="controlgroup">
<legend>Operating systems used</legend>
<label for="os1">IBM AIX</label> <input type="checkbox" name="os" id="os1" value="AIX">
<label for="os2">IBM CMS</label> <input type="checkbox" name="os" id="os2" value="CMS">
</fieldset></div>
data-role="fieldcontain"Controls location of <legend>
data-role="controlgroup"
Controls spacing between buttons
Check Box — Collapsible Container
23
<div data-role="fieldcontain"><fieldset data-role="collapsible">
<legend>Operating systems used</legend>
<div data-role="controlgroup"><label for="os1">IBM AIX</label> <input type="checkbox" name="os" id="os1" value="AIX">
<label for="os2">IBM CMS</label> <input type="checkbox" name="os" id="os2" value="CMS">
</div></fieldset>
</div>
data-role="collapsible"
Collapses everything through ending tag
How all of this works with RPG
24
HTML Template
in IFS
DB2 database files
CGIDEV2 RPG Programs
HTTP Server
onIBM i
/$*BodyBeginPage/*****************************************/* BodyBeginPage/* Begin page, set id, data theme for page/*****************************************/$BodyBeginPage<div data-role="page"
id="/%pageID%/" data-theme="/%dataTheme%/">
/$*BodyHeader/*****************************************/* BodyHeader/* Write out the body header/*****************************************/$BodyHeader<div data-role="header"><h1>/%bodyHeader%/</h1>
</div>
How all of this works with RPG - the HTML template file
25
/$*BodyBeginListView/********************************************/* BodyBeginListView/* BodyListDivider/* BodyListItem/* BodyListItemMultiText/* BodyEndListView/*/* These sections are used to write menu items:/* - divider /* - menu item with one line of text/* - menu item with two lines of text/**********************************************/$BodyBeginListView<div data-role="content"><ul data-role="listview" data-inset="true">
/$BodyBeginListDivider<li data-role="list-divider"><h2>/%listDividerText%/</h2>
</li>
How all of this works with RPG - the HTML template file
26
/$BodyListItem<li><a href="/%listItemAHref%/"><h2>/%listItemText%/</h2>
</a></li>
/$BodyListItemMultiText<li><a href="/%listItemAHref%/"><h2>/%listItemText%/</h2><p>/%listItemText2%/</p>
</a></li>
/$BodyEndListView</ul>
</div>
How all of this works with RPG - the HTML template file
27
Creating a form on a web page
28
<form method="post" action="/cgidev2p/template5.pgm">
<div data-role="fieldcontain"><label for="custname">Your name</label><input type="text"
name="custname" id="custname" maxlength="40">
</div>
<div data-role="fieldcontain"><label for="emailadd">E-mail address</label><input type="email"
name="emailadd" id="emailadd" maxlength="40">
</div>
<input type="submit" value="Send"></form>
A <form> elementencloses input fieldsthat are sent to the server
It is possible to have more than one <form>element on a web page
The <submit> button(or equivalent JavaScriptcode) causes the actionof the form to be invoked
Processing input with CGIDEV2
29
* Number of variablesD nbrVars s 10i 0
* Saved query stringD savedQueryString...D s 32767 varying
// Get inputnbrVars = zhbGetInput(savedQueryString : qusec);
zhbGetInput procedure (CGIDEV2 module XXXCGIPARS)
Fills internal work arrays with content received from browser
If GET, savedQueryString is set to blank
If POST, value in QUERY_STRING env var moved to savedQueryString(very unusual to use QUERY_STRING with POST)
Processing with CGIDEV2 - text input / output
30
<div data-role="fieldcontain"><label for="custname">Your name</label><input type="text"
name="custname" id="custname" maxlength="40">
</div>
// Customer namecustname = zhbGetVar('custname');
UpdtHtmlVar(listDividerText : 'Subprocedures');WrtSection('BodyBeginListDivider');
zhbGetVar procedure (CGIDEV2 module XXXCGIPARS)
Parm 1: HTML name of variable to getnot case-sensitive, 50 char max name length
Returns: character string if found, else blank
The jQuery Mobile web site
31
Download thejQuery Mobileand CSS filefrom here
Many examplesof widgits andtheir attributes