Download - Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i
![Page 1: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/1.jpg)
Craig [email protected]
Copyright © 2015, Craig PelkieALL RIGHTS RESERVED
Use RPG to Mobilize your IBM i
![Page 2: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/2.jpg)
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
![Page 3: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/3.jpg)
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
![Page 4: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/4.jpg)
The starting point: browser-based HTML forms
4
![Page 5: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/5.jpg)
5
The starting point: the menu, recoded for mobile
![Page 6: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/6.jpg)
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
![Page 7: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/7.jpg)
How all of this works with RPG
7
HTML Templatein IFS
DB2 database files
CGIDEV2 RPG Programs
HTTP Server
onIBM i
![Page 8: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/8.jpg)
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
![Page 9: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/9.jpg)
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
![Page 10: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/10.jpg)
<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
![Page 11: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/11.jpg)
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
![Page 12: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/12.jpg)
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
![Page 13: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/13.jpg)
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
![Page 14: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/14.jpg)
14
The starting point: the menu, recoded for mobile
![Page 15: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/15.jpg)
Review: the original form
15
![Page 16: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/16.jpg)
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
![Page 17: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/17.jpg)
An HTML form using jQuery Mobile attributes and classes
17
http://www.web400.com/ocean
Item 11: CGIDEV2 form Pass 4
![Page 18: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/18.jpg)
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
![Page 19: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/19.jpg)
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
![Page 20: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/20.jpg)
/$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');
![Page 21: Craig Pelkie Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i](https://reader035.vdocuments.us/reader035/viewer/2022070616/5a4d1be37f8b9ab0599e0ff6/html5/thumbnails/21.jpg)
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