1. Craig Pelkie craig@web400.com Copyright © 2015, Craig Pelkie ALL RIGHTS RESERVED Use RPG to Mobilize your IBM i

2. 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

3. 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

4. The starting point: browser-based HTML forms 4

5. 5 The starting point: the menu, recoded for mobile

6. 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

7. How all of this works with RPG 7 HTML Template in IFS DB2 database files CGIDEV2 RPG Programs HTTP Server on IBM i      

8. 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

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

10. 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   

11. A basic jQuery Mobile document Page Title Page content goes here. Page Footer 11

12. Basic list of Links CGIDEV2 Library Examples using old subprocedures Examples using new subprocedures Other examples Documentation 12

13. A list of links with dividers CGIDEV2 Library Subprocedures Examples using old subprocedures Examples using new subprocedures Other Other examples Documentation 13

14. 14 The starting point: the menu, recoded for mobile

15. Review: the original form 15

16. 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 element Stacks elements on top of each other by default 16 http://www.web400.com/ocean Item 5: CGIDEV2 form Pass 1

17. An HTML form using jQuery Mobile attributes and classes 17 http://www.web400.com/ocean Item 11: CGIDEV2 form Pass 4

18. Creating a form on a web page 18 Your name <input type="text" name="custname" id="custname" maxlength="40"> E-mail address <input type="email" name="emailadd" id="emailadd" maxlength="40"> A element encloses input fields that are sent to the server The fields define where the user can make entries on the page The button (or equivalent JavaScript code) causes the action of the form to be invoked

19. Processing with CGIDEV2 - text input 19 Your name <input type="text" name="custname" id="custname" maxlength="40"> // 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

20. /$BodyListItemMultiText /%listItemText%/ /%listItemText2%/ /$BodyEndListView 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');

21. The jQuery Mobile web site 21 Download the jQuery Mobile and CSS file from here Many examples of widgits and their attributes Lab-based training course: Create Mobile Web Applications using RPG http://www.Lab400.com