Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i.
Post on 20-Jan-2018
213 Views
Preview:
DESCRIPTION
Transcript
Craig Pelkiecraig@web400.com
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
The starting point: browser-based HTML forms
This is an example form that is provided with CGIDEV2
3
http://www.web400.com/ocean
Item 3: CGIDEV form
The starting point: browser-based HTML forms
4
5
The starting point: the menu, recoded for mobile
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
http://www.web400.com/ocean
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
The starting point: the menu, recoded for mobile
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
http://www.web400.com/ocean
Item 5: CGIDEV2 form Pass 1
An HTML form using jQuery Mobile attributes and classes
17
http://www.web400.com/ocean
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
top related