craigweb400com Copyright 2015 Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i The starting point browserbased HTML forms This is the example menu that is provided with CGIDEV2 ID: 582785
Download Presentation The PPT/PDF document "Craig Pelkie" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Craig Pelkiecraig@web400.comCopyright © 2015, Craig PelkieALL RIGHTS RESERVED
Use RPG to Mobilize your IBM iSlide2
The starting point: browser-based HTML formsThis is the example menu that is provided with CGIDEV2
2
http://www.web400.com/ocean
Item 1:
CGIDEV2 menuSlide3
The starting point: browser-based HTML formsThis is an example form that is provided with CGIDEV2
3
http://
www.web400.com/ocean
Item 3:
CGIDEV formSlide4
The starting point: browser-based HTML forms4Slide5
5The starting point: the menu, recoded for mobileSlide6
The starting point: the menu, recoded for mobileThis is an adaptation of the CGIDEV2 menu, using jQuery Mobile
Still usable in a desktop browserUsable in a mobile device
What makes this usableText is easy to readLinks are easily selected
6
http://
www.web400.com/ocean
Item 2:
CGIDEV2 menu jQMSlide7
How all of this works with RPG7
HTML Templatein IFS
DB2 database files
CGIDEV2
RPG Programs
HTTP Server
on
IBM i
Slide8
What is jQuery Mobile?Touch-optimized mobile framework Supports smart phones, tablets, desktopBuilt upon the jQuery
Framework, HTML5, CSSVariety of widgets – easy to configureThemes for customization
8Slide9
How jQuery Mobile Worksdata-attributes implement and style widgetsPart of HTML5 specificationCustom attribute that begins with
data-The basis of the frameworkNo need to write any JavaScript code
<div
data-role
=
"
page
"
data-theme
=
"
b
"
>
<div
data-role
=
"
header
"
data-theme
=
"
c
"
>
</div>
</div>
9Slide10
<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
Slide11
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>
11Slide12
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>
12Slide13
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>
13Slide14
14The starting point: the menu, recoded for mobileSlide15
Review: the original form15Slide16
How jQuery Mobile handles form elementsCreates mobile optimized elements based on native HTML code
Adds styles and effects automatically with no additional codingSupports 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 1Slide17
An HTML form using jQuery Mobile attributes and classes17
http://www.web400.com/ocean
Item 11: CGIDEV2 form Pass 4Slide18
Creating a form on a web page18<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>
element
encloses input fields
that are sent to the server
The
<input>
fields define
where the user can make
entries on the page
The
<submit>
button
(or equivalent JavaScript
code) causes the
action
of the form to be invokedSlide19
Processing with CGIDEV2 - text input19
<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 blankSlide20
/$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
');Slide21
The jQuery Mobile web site21
Download the jQuery Mobile
and CSS file from hereMany examples of widgits andtheir attributes
Lab-based training course:
Create Mobile Web Applications using RPG
http://
www.Lab400.com