From Mobile to IBM i

FORM BY CGIDEV2/JQUERY MOBILE

Summary

This form sample shows only a possible solution to move on Mobile devices native iseries applications. Obviously the example has no application meaning and don’t want to be a course, it is used only for understand the interactions between components of the software architecture.

The tool library CGIDEV2 was used for the realization, rich in tools and utilities for portability of native applications on the web, and the framework jQuery Mobile, extension of the classic jQuery platform, wich offers a set of graphical capabilities that are very effective for reactivity and efficiency. The solution is enjoyable and functional on both Mobile platforms and desktop browsers.

For a better usability of the content, the essential points are explained in the “Functional and Basic Concepts”, referring to technical insights in the “Insights” section.

For more details refer to the references:

http://jquerymobile.com/

http://www.easy400.net/easy400p/main.html

 

Functional and Basic Concepts

The logical flow of the example occurs with the following interactions.

The http server in the Iseries receives the request for processing of the initial Offer.html page and processes the issue; the user processes the form by choosing the item and entering the data, then submitting the request to the http server. The http server invokes the RPG program that reads the item master to retrieve the information (in this case the description, alternatively availability or otherwise …) and by using the pre-compiled Template.txt template sends the response to the http server that runs it to the User for the final delivery.

Benefits of using the JQuery Mobile framework in addition to CGIDEV2 are first of all linked to the best aesthetic and functional performance on Application Mobile. As you can see from the images, the GUI interface is suitable for mobile devices, allowing for better usability and navigation. In addition, there are no major aggravating factors in terms of development, since they are not obliged to use Javascript, with the use of appropriate keyword solutions for implementation.

The page is splitted into Header, Content and Footer, sections in which the individual components of the interface are placed.

The example shows how with a form you make a request that is processed by the iseries to get information that is then returned using a precompiled template.

In the example, you use the item master to get a simple description but of course the situations may be the most diverse.

The components involved in the example are the following:

1)   one program RPGILE: OFFERTE

2)   one starting page by HTML5: Offerte.html

3)   one template on iseries file system IFS: Offerte.txt

4)   one DATABASE file: Item master

Insights

Specifically, for example, it is necessary to:

1) On the iseries side, install and configure the CGIDEV2 library properly, following the instructions that are provided in the attachment to the tool

2) Make modifications to HTML5 code either to include JQuery files or to manage their tags. JQuery Mobile version 1.3.1 was used in the example, while the latest version is 1.4.5.

FILE Offerte.html

To include jQuery Mobile on a page, you need to include the following instructions in the <HEAD> section:

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css”>

<script src=”http://code.jquery.com/jquery-1.10.0.min.js”></script>

<script src=”http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js”></script>

The first for the style sheet link, the second for jquery and the third for the specific components of JQuery Mobile.

The HTML file is divided into specific areas of Header, Content and Footer by using specific tags (inside the page context):

<body>

<div data-role=”page”>

<div data-role=”header”>

<h1>TITOLO PAGINA</h1>

</div>

<div data-role=”content”>

<p>CONTENUTO</p>

</div>

<div data-role=”footer”>

<h4>FOOTER</h4>

</div>

</div>

</body>

The “data-role” tag defines mobile-specific behaviors that are typical of any type of usable component (“fieldcontain” for fields, “listview” for lists … etc.).

Then in the previous structure, in the “content” section, the contents of the page should be inserted, first the form reference:

<form method=”post” action=”/cgidev2p/offerte.pgm”>

which allows us to call the “OFFERTE” RPGILE program.

Then the individual fields of the form must be added. For example, the item:

<div data-role=”fieldcontain”>

<label for=”codart”>Articolo</label>

<select name=”codart” id=”codart” >

<option value=”none”>Seleziona</option>

<option value=”ARTICOLO1″>Articolo 1</option>

<option value=”ARTICOLO2″>Articolo 2</option>

<option value=”ARTICOLO3″>Articolo 3</option>

</select>

Or the Name:

</div>

<div data-role=”fieldcontain”>

<label for=”firstname”>Nome </label>

<input type=”text” name=”firstname” id=”firstname”  maxlength=”40″ size=”40″>

</div>

Or the slider to the customer:

<div data-role=”fieldcontain”>

<label for=”cliente”>Gia’ cliente</label>

<select id=”cliente” name=”cliente” data-role=”slider”>

<option value=”Si”>Si</option>

<option value=”No “>No</option>

</select>

</div>

Without going into all the details and without analyzing all the many possible components, I just add the details of the form buttons in special blocks:

<div class=”ui-grid-a”>

<div class=”ui-block-a”>

<input type=”submit” value=”Invia”>

</div>

<div class=”ui-block-b”>

<input type=”reset” value=”Ripristina”>

</div>

</div>

FILE Offerte.txt

The default Offer.txt template is present in the file system in the … \ cgidev \ html folder.

It has to define in the head a TOP section serving the RFP for the issue:

<as400>top                         *** SECTION “TOP”

And it must define the fields to be transmitted:

<tr><td><font face=”Helvetica,Helv,Arial” size=2>

Codice articolo:

</td>

<td><font face=”Helvetica,Helv,Arial” size=4>

<b>/%CODART%/</b>

</td></tr>

<tr><td><font face=”Helvetica,Helv,Arial” size=2>

Descrizione articolo:

</td>

<td><font face=”Helvetica,Helv,Arial” size=4>

<b>/%DESCRI%/</b>

</td></tr>

……………….

OFFERTE Program

The program defines the template file to use:

D extHtml        s          2000   inz(‘/cgidev/html/Offerte.txt’)

It uses the “zhbgetvar” procedure to execute the user-typed fields:

C                  eval     codart = zhbgetvar(‘codart’)

C                  eval     firstName = zhbgetvar(‘firstname’)

……

Performs its elaborations:

/free

select;

when codart <> ‘none’;

open     articoli;

…………

Set by updHTMLvar procedure Fields to be issued:

C                  callp    updHTMLvar(‘CODART’:codart)

C                  callp    updHTMLvar(‘DESCRI’:descri)

C                  callp    updHTMLvar(‘FIRSTNAME’:firstname)

………

Outputs the output session in the TOP section of the template:

C                  callp    wrtsection(‘top’)

Thanks for the attention.

2 Replies to “From Mobile to IBM i”

  1. Very good.
    I have made many applications for mobile phones, with the same technique and obtaining excellent response times. Additionally, implement ajax for the immediate update of the html sections that need to be refreshed.

Leave a Reply

Your email address will not be published. Required fields are marked *