| |
Do you still remember the Sample Converted 5250 Application that was presented in
Section 3.4?
We used iWEBMaster language to "re-paint" it, while adding some simple functions.
Please take a look at the results (aren't they impressive?).
At the end of this section you will find:
- the CL commands used to perform this "restyling"
- the instruction to download, convert and restyle this application on your own iSeries
4.1.1 Results from the iWEBMaster restyling
 |
| Figure iWebMaster01 - Initial menu
Note the buttons at the bottom of the page: they stay for the Enter key, for F3 and F12.
|
 |
| Figure iWebMaster02 - Selection window
Note the selection buttons in the "Boat type selection" pop-up:
you do'nt use the keyboard any longer, you use the mouse.
|
|
| Figure iWebMaster03 - List of boats
Clicking on a boat image will take you to the "Boat details" screen (next figure)
You may instead select the boats to be shown just selecting them through their checkboxes
(in this case, selected boats will be shown one at a time, the next boat will be shown by pressing
the Enter Key or clicking on the corresponding Enter-key icon)
|
 |
| Figure iWebMaster04 - Boat details |
In this picture, three details are of some interest:
- if you click the boat image, a larger picture (a jpeg instead of a gif) is shown
- if you click on the calculator button, a link to a "calculator" WEB page is performed
- if you click on the Word symbol, a Word document - containing some detail description abouy that boat-
is opened.
In other words, the original 5250 Boat Search application has been extended with IFS images
and documentation. Think how many 5250 existing applications would immediately benefit from such
simple extensions. |
4.1.2 iWEBMaster commands used to perform the restyling
The following CL source - IWEBDEMO/QCLLESRC member IWEBMASTER -, compiled to a CL program, was used to perform the restyling.
(For a complete documentation of the iWEBMaster language, please refer to the next section.)
/*============================================================================*/
/* Here are the iWEBMaster commands used to perform IWEBDEMO restyling. */
/*============================================================================*/
/* */
/* Please note the structure of the IFS /iwebdemo directory: */
/* - three subdirectories: */
/* * /iwebdemo/graphics */
/* contains the images used for the restyling */
/* - bannerboats2.jpg */
/* - ok.gif */
/* - canc.gif */
/* - printer.gif */
/* - arrowLeft.gif */
/* - msword1.jpg */
/* - dollar.gif */
/* * /iwebdemo/pictures */
/* contains images of the boats */
/* - each boat has a serial number (plate number) */
/* - images are */
/* - "plate number".gif */
/* - "plate number".jpg */
/* * /iwebdemo/texts */
/* contains a document for each boat */
/* - "plate number".doc */
/* */
/*============================================================================*/
PGM
/*============================================================================*/
/* Clean-up library QTEMP */
/*============================================================================*/
CLRLIB LIB(QTEMP)
MONMSG MSGID(CPF0000)
/*============================================================================*/
/* Undo the current restyling for library IWEBDEMO: */
/* 1- remove connections from objects to display file fields */
/* 2- remove connections from objects to display file record formats */
/* 3- delete the object definitions */
/* 4- delete the collection */
/*============================================================================*/
IWEB/RMVOBJCNT OBJ(IWEBDEMO/*ALL) TOLEVEL(*FIELD) +
LIB(IWEBDEMO)
IWEB/RMVOBJCNT OBJ(IWEBDEMO/*ALL) TOLEVEL(*FORMAT) +
LIB(IWEBDEMO)
IWEB/DLTOBJDFN OBJ(IWEBDEMO/*ALL)
MONMSG MSGID(CPF0000) /* if the collection does not exist */
IWEB/DLTCLC COLLECTION(IWEBDEMO)
MONMSG MSGID(CPF0000) /* if the collection does not exist */
/*============================================================================*/
/* Create a Collection for library IWEBDEMO */
/*============================================================================*/
IWEB/CRTCLC COLLECTION(IWEBDEMO) TEXT('IWEBDEMO +
collection')
/*============================================================================*/
/* Define an image object to be used as a banner. */
/* Provide it with some properties as to positioning, dimensions, and border */
/*============================================================================*/
IWEB/CRTOBJDFN OBJ(IWEBDEMO/BANNER) OBJTYPE(IMG) +
TEXT('banner') +
IMG('/iwebdemo/graphics/bannerboats2.jpg') +
OUTSIDE(TOPCENTER) WIDTH(860) HEIGHT(112) +
UNIT(PIXEL) BORDER(LINE 5 *WHITE)
/*============================================================================*/
/* Connect the banner to the appropriate display file record formats */
/*============================================================================*/
IWEB/ADDOBJCNT OBJ(IWEBDEMO/BANNER) TOLEVEL(*FORMAT) +
LIB(IWEBDEMO) DSP(BOATSCH0) FMT(SCHCRIT)
IWEB/ADDOBJCNT OBJ(IWEBDEMO/BANNER) TOLEVEL(*FORMAT) +
LIB(IWEBDEMO) DSP(BOATSCH1) FMT(CTL)
IWEB/ADDOBJCNT OBJ(IWEBDEMO/BANNER) TOLEVEL(*FORMAT) +
LIB(IWEBDEMO) DSP(BOATSCH2) FMT(FULLBOAT)
/*============================================================================*/
/* Define a style object: */
/* - background color */
/* - color, font, and border for the input fields */
/* - color, font, and border for the output fields */
/* - color, font, and border for the constants */
/*============================================================================*/
IWEB/CRTOBJDFN OBJ(IWEBDEMO/BOATSTYLE) OBJTYPE(STYLE) +
BGCOLOR(007DA5) BGIMG('*NONE' *NONE +
*NONE) INPUTCOL(FFFFFF 000099) +
INPUTFONT((SANSSERIF NORMAL 12)) +
INPUTBORD((LOWERED 1 000000)) +
OUTPUTCOL(*NONE 000000) +
OUTPUTFONT((SANSSERIF NORMAL 12)) +
OUTPUTBORD((*NONE 1 000000)) +
CONSTCOL(*NONE FFFFFF) +
CONSTFONT(('SANSSERIF' ITALIC 12)) +
CONSTBORD((LINE 1 FFFFFF))
/*============================================================================*/
/* Connect this style to some generic% display record formats */
/*============================================================================*/
IWEB/ADDOBJCNT OBJ(IWEBDEMO/BOATSTYLE) TOLEVEL(*FORMAT) +
LIB(IWEBDEMO) DSP('BOATSCH%')
/*============================================================================*/
/* Define a style object for tables (subfiles): */
/* - headers color */
/* - color of the odd rows (1, 3, 5, ...) */
/* - color of the even rows (2, 4, 6, ...) */
/*============================================================================*/
IWEB/CRTOBJDFN OBJ(IWEBDEMO/BOATBLSTYL) +
OBJTYPE(TABLESTYLE) HEADCOL(*NONE 000000) +
ODDCOL(FFFFF0 000000) EVENCOL(DDDDF0 +
000000) TABLEGRID(*NONE 1 000000)
/*============================================================================*/
/* Connect this style to the appropriate display subfile record formats */
/*============================================================================*/
IWEB/ADDOBJCNT OBJ(IWEBDEMO/BOATBLSTYL) +
TOLEVEL(*FORMAT) LIB(IWEBDEMO) +
DSP(BOATSCH0) FMT('SFL%')
/*============================================================================*/
/* Define a constant object. */
/* It will be used as a title in the boat type selection window */
/*============================================================================*/
IWEB/CRTOBJDFN OBJ(IWEBDEMO/BOATCHOTIT) +
OBJTYPE(CONSTANT) CONSTANT('Choose a boat +
type') TOP(1) LEFT(1) BORDER(*NONE 1 +
000000) BGCOLOR(*NONE) COLOR(FFFFFF) +
FONT(SANSSERIF BOLD 24)
/*============================================================================*/
/* Connect this constant to the record format of the */
/* boat type selection window */
/*============================================================================*/
IWEB/ADDOBJCNT OBJ(IWEBDEMO/BOATCHOTIT) TOLEVEL(*Format) +
LIB(IWEBDEMO) DSP(BOATSCH0) FMT(CTLWDW)
/*============================================================================*/
/* Define a small icon that should transmit char "X" to field "SEL" */
/* and press the Enter key. */
/* Connect this button to all subfile lines of record format "SFLWDW" */
/* of display file BOATSCH0 (Boat type selection window, */
/* see Figure iWEBMaster02) */
/*============================================================================*/
IWEB/CRTOBJDFN OBJ(IWEBDEMO/BTNSLC) +
OBJTYPE(FIELDBUTTON) +
IMG('/iwebdemo/graphics/ok.gif') +
BUTTONACT(ENTER) EVAL((SEL 'X')) +
FLDBTNPOS(*FIELD)
IWEB/ADDOBJCNT OBJ(IWEBDEMO/BTNSLC) TOLEVEL(*FIELD) +
LIB(IWEBDEMO) DSP(BOATSCH0) FMT(SFLWDW) +
FLD(SEL)
/*============================================================================*/
/* Define a checkbox replacing a single character field */
/* which set the field value to 'x' if checked and '' if unchecked */
/* Connect this button to all subfile lines of record format "SFL" */
/* of display file BOATSCH1 (Boat selection window) */
/*============================================================================*/
IWEB/CRTOBJDFN OBJ(IWEBDEMO/CHECKBOAT) +
OBJTYPE(CHECKBOX) TEXT('boat list checkbox') +
VALUEON(x) CHECKALL('*NO')
IWEB/ADDOBJCNT OBJ(IWEBDEMO/CHECKBOAT) TOLEVEL(*FIELD) +
LIB(IWEBDEMO) DSP(BOATSCH1) FMT(SFL) +
FLD(SEL)
/*============================================================================*/
/* Define a small boat image object based on display file field "BGIF". */
/* It would make up the image name from the "BGIF" plate number field. */
/* When clicked, this image should */
/* - transmit char "X" to display file input field "SEL" */
/*============================================================================*/
IWEB/CRTOBJDFN OBJ(IWEBDEMO/BOATIMGSFL) OBJTYPE(BUTTON) +
TEXT('boat image for sfl') +
IMG('''/iwebdemo/pictures/'' *cat &BGIF +
*tcat ''.gif''') TOP(4) LEFT(20) WIDTH(5) +
HEIGHT(3) HREF('''/iwebdemo/pictures/'' +
*cat &BGIF *tcat ''.gif''') EVAL((SEL 'X'))
/*============================================================================*/
/* Connect the previous object to the subfile record format */
/* of the appropriate display file (see Figure iWEBMaster03) */
/*============================================================================*/
IWEB/ADDOBJCNT OBJ(IWEBDEMO/BOATIMGSFL) TOLEVEL(*FORMAT) +
LIB(IWEBDEMO) DSP(BOATSCH1) FMT(SFL)
/*============================================================================*/
/* Define a medium size boat image object based on display file field "BGIF". */
/* It would make up the image name from the "BGIF" plate number field. */
/* When clicked, this image should */
/* - link to the omonymous JPEG image, in the same IFS directory */
/*============================================================================*/
IWEB/CRTOBJDFN OBJ(IWEBDEMO/BOATIMG) OBJTYPE(IMG) +
TEXT('boat image') IMG('&GIF') TOP(3) +
LEFT(54) WIDTH(20) HEIGHT(9) +
BORDER(LOWERED 1 000000) +
HREF('''/iwebdemo/pictures/'' *cat &BGIF +
*tcat ''.jpg''') +
/*============================================================================*/
/* Connect the previous object to the record format */
/* of the appropriate display file (see Figure iWEBMaster04) */
/*============================================================================*/
IWEB/ADDOBJCNT OBJ(IWEBDEMO/BOATIMG) TOLEVEL(*FORMAT) +
LIB(IWEBDEMO) DSP(BOATSCH2) FMT(FULLBOAT)
/*============================================================================*/
/* Define a Frame object, with a heading */
/*============================================================================*/
IWEB/CRTOBJDFN OBJ(IWEBDEMO/BOATFRAME) OBJTYPE(FRAME) +
TEXT('Frame for boat description') TOP(1) +
LEFT(1) WIDTH(80) HEIGHT(12) +
BORDER(ETCHEDLOWE 1 000000) +
TITLE('Boats for sale' TOPLEFT FFFFFF)
/*============================================================================*/
/* Connect the previous object to the appropriate display record format */
/* (see Figure iWEBMaster04) */
/*============================================================================*/
IWEB/ADDOBJCNT OBJ(IWEBDEMO/BOATFRAME) TOLEVEL(*FORMAT) +
LIB(IWEBDEMO) DSP(BOATSCH2) FMT(FULLBOAT)
/*============================================================================*/
/* Define a second Frame object, with a heading */
/*============================================================================*/
IWEB/CRTOBJDFN OBJ(IWEBDEMO/BOATFRAME2) OBJTYPE(FRAME) +
TEXT('Frame2 for boat description') +
TOP(2) LEFT(1) WIDTH(80) HEIGHT(9) +
BORDER(ETCHEDLOWE 1 000000) TITLE('Search +
criteria' TOPLEFT FFFFFF)
/*============================================================================*/
/* Connect the previous object to the appropriate display record format */
/* (see Figure iWEBMaster01) */
/*============================================================================*/
IWEB/ADDOBJCNT OBJ(IWEBDEMO/BOATFRAME2) TOLEVEL(*FORMAT) +
LIB(IWEBDEMO) DSP(BOATSCH0) FMT(SCHCRIT)
/*============================================================================*/
/* Define a replacement pattern object */
/* It replaces " ." sequences with blanks */
/*============================================================================*/
IWEB/CRTOBJDFN OBJ(IWEBDEMO/REPL_PATT1) +
OBJTYPE(REPLACEPATTERN) PATTERN(' .') +
REPLACE(*blank)
/*============================================================================*/
/* Connect this replacement pattern */
/* to all generic% display files for all fields containing */
/* argument */
/*============================================================================*/
IWEB/ADDOBJCNT OBJ(IWEBDEMO/REPL_PATT1) TOLEVEL(*FIELD) +
LIB(IWEBDEMO) DSP('BOAT%') +
CONSTVALUE('% .%')
/*============================================================================*/
/* Define an ignore attribute */
/*============================================================================*/
IWEB/CRTOBJDFN OBJ(IWEBDEMO/IGNORE) OBJTYPE(IGNORE) +
TEXT('Ignore a field')
/*============================================================================*/
/* Apply this attribute to some given original constants */
/* in all generic% display files */
/*============================================================================*/
IWEB/ADDOBJCNT OBJ(IWEBDEMO/IGNORE) TOLEVEL(*FIELD) +
LIB(IWEBDEMO) DSP('BOAT%') +
CONSTVALUE('%Boats for Sale%' '%Search +
criteria%')
/*============================================================================*/
/* Define a small icon to replace the "Enter" key */
/* and connect it to all generic% display files */
/*============================================================================*/
IWEB/CRTOBJDFN OBJ(IWEBDEMO/FKEYENTER) OBJTYPE(FKEY) +
IMG('/iwebdemo/graphics/ok.gif') FKEY('ENTER')
IWEB/ADDOBJCNT OBJ(IWEBDEMO/FKEYENTER) TOLEVEL(*FORMAT) +
LIB(IWEBDEMO) DSP('BOAT%')
/*============================================================================*/
/* Define a small icon to replace the "F3=End" key */
/* and connect it to all generic% display files */
/*============================================================================*/
IWEB/CRTOBJDFN OBJ(IWEBDEMO/FKEYF3) OBJTYPE(FKEY) +
IMG('/iwebdemo/graphics/canc.gif') +
FKEY('CA-CF03')
IWEB/ADDOBJCNT OBJ(IWEBDEMO/FKEYF3) TOLEVEL(*FORMAT) +
LIB(IWEBDEMO) DSP('BOAT%')
/*============================================================================*/
/* Define a small icon to replace the "F6=Print" key */
/* and connect it to all generic% display files */
/*============================================================================*/
IWEB/CRTOBJDFN OBJ(IWEBDEMO/FKEYF6) OBJTYPE(FKEY) +
IMG('/iwebdemo/graphics/printer.gif') +
FKEY('CA-CF06')
IWEB/ADDOBJCNT OBJ(IWEBDEMO/FKEYF6) TOLEVEL(*FORMAT) +
LIB(IWEBDEMO) DSP('BOAT%')
/*============================================================================*/
/* Define a small icon to replace the "F12=Cancel" key */
/* and connect it to all generic% display files */
/*============================================================================*/
IWEB/CRTOBJDFN OBJ(IWEBDEMO/FKEYF12) OBJTYPE(FKEY) +
IMG('/iwebdemo/graphics/arrowLeft.gif') +
FKEY('CA-CF12')
IWEB/ADDOBJCNT OBJ(IWEBDEMO/FKEYF12) TOLEVEL(*FORMAT) +
LIB(IWEBDEMO) DSP('BOAT%')
/*============================================================================*/
/* Define a button containing the Word symbol as an image */
/* and linking to the "DOC" document specified in a display file hidden field */
/* Connect this button to a given display file format */
/* (see figure iWEBMaster4") */
/*============================================================================*/
IWEB/CRTOBJDFN OBJ(IWEBDEMO/BTNWORD) OBJTYPE(BUTTON) +
TEXT('') +
IMG('/iwebdemo/graphics/msword1.jpg') +
TOP(4) LEFT(45) WIDTH(60) HEIGHT(25) +
UNIT(PIXEL) BUTTONACT(LINK) HREF('&DOC')
IWEB/ADDOBJCNT OBJ(IWEBDEMO/BTNWORD) TOLEVEL(*FORMAT) +
LIB(IWEBDEMO) DSP(BOATSCH2) FMT(FULLBOAT)
/*============================================================================*/
/* Define a button containing the a small calculator image */
/* and linking to a WEB page. */
/* Connect this button to a given display file format */
/* (see figure iWEBMaster4") */
/*============================================================================*/
IWEB/CRTOBJDFN OBJ(IWEBDEMO/CALC) OBJTYPE(BUTTON) +
IMG('/iwebdemo/graphics/calculator.gif') +
LABEL(loan) TOP(6) LEFT(45) WIDTH(60) +
HEIGHT(25) UNIT(PIXEL) BUTTONACT(LINK) +
HREF('http://partners.leadfusion.com/tools/+
boats/auto11/tool.fcs')
IWEB/ADDOBJCNT OBJ(IWEBDEMO/CALC) TOLEVEL(*FORMAT) +
LIB(IWEBDEMO) DSP(BOATSCH2) FMT(FULLBOAT) +
FLD(SEL)
/*============================================================================*/
/* Clean-up library QTEMP */
/*============================================================================*/
CLRLIB LIB(QTEMP)
MONMSG MSGID(CPF0000)
/*============================================================================*/
RETURN
ENDPGM
|
4.1.3 Small icons
The above sample demo can be downloaded and installed on your iSeries to provide some training.
If you do that, you may take advantage of a number of small icons available in the IFS directory
/iwebdemo/graphics that you may use to restyle your application screens.
| |
 | arrowDown.gif |
 | arrowLeft.gif |
 | arrowRight.gif |
 | arrowUp.gif |
 | b&w.gif |
 | basket.gif |
 | calc.gif |
 | calendar.gif |
 | canc.gif |
 | colors.gif |
| |
 | colors0.gif |
 | colors1.gif |
 | colors2.gif |
 | colors4.gif |
 | colors5.gif |
 | comment.gif |
 | commentballoon.gif |
 | copy.gif |
 | decode.gif |
 | e-mail.gif |
| |
 | enter.gif |
 | escape.gif |
 | help.gif |
 | home.gif |
 | info.gif |
 | information.gif |
 | link.gif |
 | list.gif |
 | magnifier.gif |
 | mail.gif |
| |
 | ok.gif |
 | pdf.gif |
 | pgm.gif |
 | pictures.gif |
 | plus.gif |
 | printer.gif |
 | question.gif |
|
4.1.4 Download and install the sample conversion demo
The sample 5250 conversion demo presented in this manual can be easily downloaded and installed on
your iSeries. By doing this, you will be able to:
- run the 5250 version
- test its conversion to iWEB
- run the converted application
- restyle the application
- run the restyled application
This may result to a quicker learning of the conversion process and will enable you to demostrate iWEB to your
staff and / or to your customers.
4.1.4.a Download and install
Note: This pedagogical demo required first that iWeb (converter & runtime) is installed on your iSeries.
If you don't have iWeb installed you can download it from our website http://www.iseries-iweb
(download or free trial section). For installation please refer to the
User Guide - Chapter 1
(The overall installation takes 10 to 20 minutes)
- Click on this link to download the demo .zip file.
Save it in a directory of your local disk.
- Unzip this file; two files are created:
- a iWEBDemoGuide.pdf memo
- a iwebdemo.savf save file to be transfered to your iSeries
- On your iSeries, create a save file:
crtsavf qgpl/iwebdemo aut(*all)
- To transfer the save file from the local disk to your iSeries, open a DOS prompt,
position to the directory containing file iwebdemo.savf and run an FTP session as follow:
|
ftp n.n.n.n (n.n.n.n. = ip address of the iSeries)
(enter user_profile_name and password)
bin
quote site namefmt 1
cd /qsys.lib/qgpl.lib
put iwebdemo.savf
quit
|
|
|
|
- On the iSeries, open a 5250 session with a user profile having *secadm special authority
(usually user profile QSECOFR, or a similar one. This is needed to create user profile IWEBDEMO.), then
- rstlib iwebdemo *savf savf(qgpl/iwebdemo)
- strrexprc srcmbr(install) srcfile(iwebdemo/qrexsrc)
This will create pgm iwebdemo/compile, recreate missing objects, restore IFS directory /iwebdemo,
create library IWEBDEMOW (it will contain the IWEBDEMO programs converted to iWEB),
and create user profile IWEBDEMO (this is done by running the
iWEB enabling setup program,
IWEBDEMO/SETUP).
4.1.4.b Run the 5250 demo
Just signon as user profile IWEBDEMO and password IWEBDEMO.
You should be able to go across the screen presented in the
Sample 5250 application.
4.1.4.c Convert the 5250 demo to iWEB
- Be sure to have installed the latest iWEB release
- Follow the instructions of the
iWEB Conversion Guide
to convert library IWEBDEMO. The conversion target library must be IWEBDEMOW.
4.1.4.d Run the converted demo
4.1.4.e Improve the converted demo with iWEBMaster
- From a 5250 session
call iwebdemo/iwebmaster
This program
executes a number of iWEBMaster commands to provide the planned improvement.
To know more about the improvement technique, see page
iWEBMaster language.
- Some of those iWEBMaster commands make links to images in the IFS directory /iwebdemo.
In order to have those links honored by the HTTP server, you need to add some directives to your
iWEB Runtime HTTP instance. This is how you do it.
- If the iWEB Runtime HTTP instance is "Original" (V4R5 to V5R2), you must use command
wrkhttpcfg cfg(instance_name)
to update its directives.
You must add just the following directive (at the bottom):
- If the iWEB Runtime HTTP instance is "powered by Apache" (V5r1 on),
its directives are in a stream file, with extension .conf
in the IFS directory /iwebdata/http/conf.
Use command
edtf '/iwebdata/http/conf/(instance_name).conf'
to update its directives.
You must add the following directives (at the bottom):
Alias /iwebdemo/ /iwebdemo/
<Directory /iwebdemo>
AllowOverride None
Options None
order allow,deny
allow from all
</Directory> |
- After updating the iWEB Runtime HTTP instance, be sure to restart it:
STRTCPSVR SERVER(*HTTP) RESTART(*HTTP) HTTPSVR(xxx)
where xxx is the name of your iWEB Runtime HTTP instance.
4.1.4.f Running the improved converted demo
4.1.4.g Uninstalling this demo
Should you ever need to unistall this demo, please do the following:
- Signon with an user profile having *SECADM special authority
- CLROUTQ IWEBDEMO/IWEBDEMO
- DLTLIB IWEBDEMO
- DLTUSRPRF USRPRF(IWEBDEMO) OWNOBJOPT(*DLT)
- manually clear directory /iwebdemo.
However, do not delete such directory, unless you remove the related HTTP directives from the
iWEB Runtime instance configuration file.
|
|
