simple mobile programming for rpg using jquery … · the starting point: the menu, recoded for...

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


This is an example form that is provided with CGIDEV2

3


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>


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>


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

simple mobile programming for rpg using jquery … · the starting point: the menu, recoded for...

Documents