craig pelkie copyright © 2015, craig pelkie all rights reserved use rpg to mobilize your ibm i

Craig [email protected]

Copyright © 2015, Craig PelkieALL RIGHTS RESERVED

Use RPG to Mobilize your IBM i

The starting point: browser-based HTML forms

This is the example menu that is provided with CGIDEV2

2

http://www.web400.com/ocean

Item 1: CGIDEV2 menu


This is an example form that is provided with CGIDEV2

3


Item 3: CGIDEV form


4

5

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

6


Item 2: CGIDEV2 menu jQM

How all of this works with RPG

7

HTML Templatein IFS

DB2 database files

CGIDEV2 RPG Programs

HTTP Server

onIBM i

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

8

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>9

<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.4.5/ jquery.mobile-1.4.5.min.css">

<script src="http://code.jquery.com/jquery-1.11.3.min.js"> </script>

<script src="http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.js"> </script></head>

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 Framework 10

A basic jQuery Mobile 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

14


Review: the original form

15

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

16


Item 5: CGIDEV2 form Pass 1

An HTML form using jQuery Mobile attributes and classes

17


Item 11: CGIDEV2 form Pass 4

Creating a form on a web page

18

<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

The <input> fields definewhere the user can makeentries on the page

The <submit> button(or equivalent JavaScriptcode) causes the actionof the form to be invoked

Processing with CGIDEV2 - text input

19

<div data-role="fieldcontain"> <label for="custname">Your name</label> <input type="text" name="custname" id="custname" maxlength="40"></div>

// Get Customer Name from HTML input custname = zhbGetVar('custname');

zhbGetVar procedure (CGIDEV2 module XXXCGIPARS)

Parm 1: HTML name of variable to get not case-sensitive, 50 char max name length

Returns: character string if found, else blank

/$BodyListItemMultiText <li> <a href="/%listItemAHref%/"> <h2>/%listItemText%/</h2> <p>/%listItemText2%/</p> </a> </li>

/$BodyEndListView </ul></div>

Writing to the browser with RPG - HTML template file

20

// Write a list item UpdtHtmlVar('listItemAHref' : '/cmb/item01.html');UpdtHtmlVar('listItemText' : 'POST using ZhbGetVar');UpdtHtmlVar('listItemText2' : 'Externally described HTML...');

WrtSection('BodyListItemMultiText');

The jQuery Mobile web site

21

Download the jQuery Mobileand CSS file from here

Many examples of widgits andtheir attributes

Lab-based training course:

Create Mobile Web Applications using RPGhttp://www.Lab400.com

craig pelkie copyright © 2015, craig pelkie all rights reserved use rpg to mobilize your ibm i

Documents