SmartPad4i SystemObjects 2017 Release version 2.0 Page: 1/55

Size: px

Start display at page:

Download "SmartPad4i SystemObjects 2017 Release version 2.0 Page: 1/55"

Tyler Stone
5 years ago
Views:

1 SmartPad4i SystemObjets 2017 Release version 2.0 Page: 1/55

2 Development Tutorial for Rdi SmartPad4i SystemObjets 2017 Release version 2.0 Page: 2/55

3 This tutorial is provided to reate quikly and simply your first appliations with the Express version of SmartPad4i. In this tutorial, we will use the database file COUNTRY in the library SP4I. We will do three programs: display the COUNTRY reords, add a new ountry entry, modify a reord. Before to begin, please make sure that two sub-systems CO406JTCP and SP4I are running on the System i: Work with Ative Jobs CPU %: Opt.0 03/14/17 Ative jobs: 194 Elapsed time: 00:00:00 Current Subsystem/Job User Type CPU % Funtion CO406JTCP CO406JSVR.0.0 PGM-SERVSOCKET.0 PGM-SP4IMSG QSYS QSECOFR SBS ASJ SYSOBJ 09:39:07 Status DEQW TIMW SP4I SP4IMSGW QSYS QUSER SBS.0 ASJ DEQW MSGW More... ===> F21=Display instrutions/keys The sub-system CO406JTCP is started with the ommand: STRSBS CO406J/CO406JTCP In this subs-system, the job CO406JSVR is the sever program that listens on port This program must be running. The sub-system SP4I is started with the ommand: STRSBS SP4I/SP4I In this sub-system, the job SP4IMSGW waits for any SmartPad4i eventual error message ourred in QSYSOPR message-queue in order to prevent the user. SmartPad4i SystemObjets 2017 Release version 2.0 Page: 3/55

4 How to reate an appliation The general proess to reate an appliation is the following: Create your HTML doument with all your presentation and fields, Publish this page to your web server, in the C:\Program Files\Apahe Software Foundation\Tomat 7.0\webapps\smartpad4i\html\TUTORIAL diretory. The C:\Program Files\Apahe Software Foundation\Tomat 7.0\webapps\smartpad4i\html\ diretory exists already. Create sub-diretory TUTORIAL. TUTORIAL must be upperase. On the System i, reate library TUTORIAL, Use SmartPad4i Designer and desribe your ative omponents, From SmartPad4i Designer, deploy the appliation to the System i. This ation will reate System i objets like I/O external data strutures and program skeleton, From SmartPad4i Designer, deploy the appliation to your web server, Use PDM in your System i to add the logi program inside the SmartPad4i generated program, Compile your program, Run your appliation. SmartPad4i SystemObjets 2017 Release version 2.0 Page: 4/55

5 Create Display the COUNTRY reords appliation If you run DSPFFD SP4I/COUNTRY, you will see the file desription as follows: Reord format : COUNTRY Format level identifier : 381CBE4ECAF4B Number of fields : 4 Reord length : 74 Field Level Information Field Data Type Field Length Buffer Length Buffer Position Field Usage Column Heading C_NAME CHAR Both C_NAME C_CON00001 CHAR Both C_CONTINENT C_DATE DATE Both C_DATE LANGID CHAR Both LANGID We reate then a HTML file that we name ountry.html and we plae this file in the C:\Program Files\Apahe Software Foundation\Tomat 7.0\webapps\smartpad4i \html\tutorial diretory. This ountry.html file an ontain all features suh as ompany logo, bakground image, bakground olor, images, CSS. These features will not be used by the System i program. What we need in this file is a table of five olumns to display database file reords: a hek box to selet the reord to modify, a olumn for C_NAME, a olumn for C_CON00001, a olumn for C_DATE, a olumn for LANGID. a button for adding new reord entry, a button for modifying seleted reord, a button for appliation exit. And So we reate the file as the following ode: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 5/55

6 <html> <head> <title>list of ountries</title> </head> <body bgolor="#a6deee"> <form method="post"> <div style="text-align: enter;"> List of Countries<br> </div> <br> <div style="text-align: enter;"> <input id="bt1" value="add" type="button"> <input id="bt2" value="modify" type="button"> <input id="bt3" value="exit" type="button"> </div> <br> <table id="tbl1" border="1" ellpadding="1" width="100%"> <thead> <tr> <td style="text-align: enter;" width="10%"> Seletion </td> <td width="40%"> Country name</td> <td width="30%"> Continent name </td> <td width="10%"> Date </td> <td width="10%"> Language ID</td> </tr> </thead> <tbody> <tr> <td style="text-align: enter;"> <input id="hek" type="hekbox"> </td> <td id="name">my ountry name</td> <td id="ont">my ontinent name</td> <td id="date"> </td> <td id="lang">enu</td> </tr> </tbody> </table> </form> </body> </html> In this ode, we put only one row in the <Tbody> blo. This row defines one reord entry of the database file COUNTRY. It s the System i program to redefine and display the number of rows or reords. The ountry.html file an be previewed on the browser as the following: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 6/55

$html file in the C:\Program Files\Apahe Software Foundation\Tomat 7.0\webapps\smartpad4i \html\tutorial diretory.$

7 At this step, we have reated: System i library TUTORIAL, Country.html file in the C:\Program Files\Apahe Software Foundation\Tomat 7.0\webapps\smartpad4i \html\tutorial diretory. SmartPad4i SystemObjets 2017 Release version 2.0 Page: 7/55

8 Now we are going to reate the appliation with SmartPad4i Designer. In RDI environment open "SmartPad4i" perspetive, as below: SmartPad4i Designer will open as the following: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 8/55

9 On the menu bar selet "File" and "New Projet" like in the sreen below: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 9/55

$of the ountry.html file (C:\Program Files\Apahe Software Foundation\Tomat 7.0\webapps\smartpad4i\html\TUTORIAL) : SmartPad4i SystemObjets 2017 Release version 2.$

10 In the window as below, selet the diretory where you want to save your projet and type the name of your projet, for example List of ountries Projet1 in the same diretory of the ountry.html file (C:\Program Files\Apahe Software Foundation\Tomat 7.0\webapps\smartpad4i\html\TUTORIAL) : SmartPad4i SystemObjets 2017 Release version 2.0 Page: 10/55

11 Clik on the "Open" button. the following sreen will shown so you an set the System i IP address and its CCSID ode. SmartPad4i SystemObjets 2017 Release version 2.0 Page: 11/55

(You an obtain the above sreen with Menu bar/options/system i) IP Address: Type IP address of the System i, example 213.56.7.12 Port Number: 19003.

12 (You an obtain the above sreen with Menu bar/options/system i) IP Address: Type IP address of the System i, example Port Number: This value is also set in the data-area TCPPORTSRV in the CO406J library. Timeout: In milliseonds, time to onnet to System i, Default value is milliseonds. SmartPad4i SystemObjets 2017 Release version 2.0 Page: 12/55

13 CCSID: CCSID of your System i. Charset for DBCS: this information onerns Japanese language. Example x-sjis. Clik on the button "Chek Connetion» to be sure that the input values are orret. You should be prompted to the Sign on sreen to onnet to your System i: Type your User ID, your password and lik on OK button. If the onnetion to your System i is suessful, you will reeive the message "Connetion Test Suessful" on the sreen. See the sreen below: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 13/55

14 Clik on Selet button, you should be prompted again to the Sign on sreen to onnet to your System i: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 14/55

$You will get a sreen like the sreen below: Selet C:\Program Files\Apahe Software Foundation\Tomat 7.$

15 Type your User ID, your password and lik on OK button You return to SmartPad4i Designer main sreen. On the menu bar selet "Options" and "Selet Html File Pathname". You will get a sreen like the sreen below: Selet C:\Program Files\Apahe Software Foundation\Tomat 7.0\webapps\ smartpad4i\ html\tutorial diretory. Clik on Choose. You ome bak to the SmartPad4i as follows: On the menu bar selet "Options" and "Selet WebServer deployment Root". SmartPad4i SystemObjets 2017 Release version 2.0 Page: 15/55

$Selet C:\Program Files\Apahe Software Foundation\Tomat 7.$ Now lik on the button of the toolbar. You will get the following sreen: Open ountry.

16 Selet C:\Program Files\Apahe Software Foundation\Tomat 7.0\webapps, as below: Clik on Choose button. You ome bak to the Smarpad4i Designer main sreen. Now lik on the button of the toolbar. You will get the following sreen: Open ountry.html file. You will ome bak to the SmarPad4i Designer main menu as follows: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 16/55

17 Enter: System i Name System i Length Ation BT1 AD BT2 UP BT3 F3 CHECK Usage Input CNAME 40 CCONT 20 DATE 10 CLANG 4 The result on the sreen should be the following: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 17/55

the following sreen: You will get a sreen like the sreen

18 Clik on the button to save the projet On the menu bar selet "Deployment" and "Deploy Projet to the System i", as shown on the following sreen: You will get a sreen like the sreen below: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 18/55

The SmartPad4i Designer generates soure ode in the TUTORIAL library and after all shows the following report: Clik OK

19 Type ountry in the System i program Name and press Enter. The word ountry beomes COUNTRY. Chek ILE RPG and lik on Deploy button. The SmartPad4i Designer generates soure ode in the TUTORIAL library and after all shows the following report: Clik OK button. On the menu bar selet "Deployment" and "Deploy Projet to WebServer, the SmartPad4i Designer generates result to the Apahe Tomat Server and shows the following report: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 19/55

20 At this step, lose the SmartPad4i Perspetive. Open iprojets perspetive Exeute on the System i the follozing ommand: CALL TUTORIAL/SETENV You will see the library list of your environment, as follows SmartPad4i SystemObjets 2017 Release version 2.0 Page: 20/55

21 Open and edit the soure file COUNTRY.RPGLE in library TUTORIAL Insert one line after line 15 and define database file COUNTRY as the following: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 21/55

Go now to line 459 and add after this line the following ode: 0448.01 0448.02 0448.03 0448.04 0448.05 0448.06 0448.07 0448.08 0448.09 0448.10 0448.11 0448.12 0448.13 0448.

22 Go now to line 459 and add after this line the following ode: C C *in50 *in50 ount move z-add doweq read ifeq add our endif enddo Z-ADD *off *in50 0 ount *off fountry *off 1 ount SOOF02 OCNAME = C_NAME OCCONT = C_CON00001 ODATE = C_DATE OCLANG = LANGID ount SPL901 The sreen should look like the following: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 22/

23 In this ode, we read and display all the existing reords in the database file COUNTRY. The variable SPL102 indiates the first reord in the data-struture SOOF02 to display and SPL901 indiates the last reord to show. Beause in our ode we intend to show all the reords, so we set the value SPL901 to the value of COUNT. We an also deide to do a loop for only 20 times to display 20 reords and then to prepare two buttons on the sreen for roll-up and roll-down and we need to manage the pagination in the ode. Save the member. Create the program in the library Tutorial, with options CVTOPT(*DATETIME) and ALWNULL(*YES), as follows: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 23/55

24 Start Apahe Tomat servie, as shown in the following figure: Open a browser and type: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 24/55

25 SmartPad4i SystemObjets 2017 Release version 2.0 Page: 25/55

26 Enter : your System i user profile, your password, program to Start: COUNTRY, environment Library: TUTORIAL. As shown in the following figure: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 26/55

27 Press Enter, you will get the result as the following: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 27/55

28 SmartPad4i SystemObjets 2017 Release version 2.0 Page: 28/55

29 At this step, we have not yet work with three buttons Add, Modify and Exit. In the SmartPad4i Designer, we have defined an ation ode for eah of these buttons: AD for Add, UP for Modify, F3 for Exit. We need to implement in the RPG ode to say what the program must do when it reeives these ation odes. We an deide to say when the ation ode is AD or UP, the COUNTRY program will all a program that we name UPDCTRY with parameters: Code ation, Country name, Continent name, Date, Lang ID result So we return to PDM and modify the COUNTRY member. Insert the following ode for Add button after line number 116: spatn ifeq 'AD' all 'UPDCTRY' parm 'AD' ation parm wname parm wont parm wdate parm wlang parm result * if reord added, put the reord at the end of the list result ifeq 'OK' add 1 ount ount our SOOF02 OCNAME = wname OCCONT = wont ODATE = wdate OCLANG = wlang C Z-ADD ount SPL901 endif endif Like the following: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 29/55

Insert the following ode for Modify button just after the ode for Add button: 0113.20 0113.21 0113.22 0113.23 0113.24 0113.25 0113.26 0113.27 0113.28 0113.29 0113.30 0113.31 0113.32 0113.33 0113.

30 Insert the following ode for Modify button just after the ode for Add button: spatn ifeq do myindie our ihek ifeq leave endif enddo myindie ifle myindie our all parm parm parm parm parm parm * if reord updated, refresh result ifeq endif endif endif 'UP' ount SOIF02 '1' myindie ount SOOF02 wname = OCNAME wont = OCCONT wdate = ODATE wlang = OCLANG 'UPDCTRY' 'UP' ation wname wont wdate wlang result the reord in the list 'OK' OCNAME = wname OCCONT = wont ODATE = wdate OCLANG = wlang SmartPad4i SystemObjets 2017 Release version 2.0 Page: 30/55 4 0

Like the following: Insert the following ode for Exit button just after the ode for Modify button: 0113.49 0113.50 0113.51 spatn ifne goto endif 'F3' T200 Save the member.

31 Like the following: Insert the following ode for Exit button just after the ode for Modify button: spatn ifne goto endif 'F3' T200 Save the member. Create the program in the library Tutorial, with options CVTOPT(*DATETIME) and ALWNULL(*YES), as follows: Now to ontinue, we have to develop the program UPDCTRY. SmartPad4i SystemObjets 2017 Release version 2.0 Page: 31/55

32 Create UPDCTRY appliation First, we need to reate updtry.html file in the C:\Program Files\Apahe Software Foundation\Tomat 7.0\webapps\smartpad4i \html\tutorial diretory. The ode is the following: <html> <head> <title>manage Country Reord</title> </head> <body bgolor="#a6deee"> <form method="post"> <div style="text-align: enter;"> <span id="title">add/update Country Reord </span><br> </div> <br> <div style="text-align: enter;"> <input id="bt1" value="ok" type="button"> <input id="bt2" value="canel" type="button"> </div> <br> <table border="1" ellpadding="1" width="100%"> <tbody> <tr> <td>country name</td> <td><input id="name" value="" type="text" size=40 maxlength=40> </td> </tr> <tr> <td>continent name</td> <td><input id="ont" value="" type="text" size=20 maxlength=20> </td> </tr> <tr> <td>date</td> <td><input id="date" value="" type="text" size=10 maxlength=10> </td> </tr> <tr> <td>lang ID</td> <td><input id="lang" value="" type="text" size=4 maxlength=4> </td> </tr> </tbody> </table> </form> </body> </html> That gives a presentation on the browser as below: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 32/55

33 Now we are going to reate the appliation UPDCTRY with SmartPad4i Designer. SmartPad4i SystemObjets 2017 Release version 2.0 Page: 33/55

opened. On the menu bar selet "File" and "Open Projet" to open the projet List of ountries.jdp projet.

34 In RDI environment open "SmartPad4i" perspetive, as below: If the SP4i designer has been losed, to reopen itm in the SmartPad4i perspetive, double lik the SP4i Designer on the leftside view: SmartPad4i Designer will be opened. On the menu bar selet "File" and "Open Projet" to open the projet List of ountries.jdp projet. You need to sign in with your user profile and password. SmartPad4i SystemObjets 2017 Release version 2.0 Page: 34/55

35 Now lik on the button of the toolbar. You will get the following sreen: Open updtry.html file. You will ome bak to the SmarPad4i Designer main menu as follows: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 35/55

Here we an see that the fields CNAME, CCONT, DATE and CLANG have already a length, they are respetively 40, 20, 10 and 4. We have these lengths beause in the updtry.

36 Here we an see that the fields CNAME, CCONT, DATE and CLANG have already a length, they are respetively 40, 20, 10 and 4. We have these lengths beause in the updtry.html file, the Maxlength parameters are defined. We need now define the length for TITLE field and ation odes for BT1 and BT2 button. Enter: System i Name System i Length TITLE 30 Ation Usage Output BT1 OK Input BT2 12 Input CNAME 40 Both CCONT 20 Both DATE 10 Both CLANG 4 Both The result on the sreen should be the following: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 36/55

37 Clik on the button to save the projet Be sure that the updtry.html file is seleted. On the menu bar selet "Deployment" and "Deploy File to the System i", as shown on the following sreen: You will get a sreen like the sreen below: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 37/55

Enter. The word updtry beomes UPDCTRY. Chek ILE RPG and lik on Deploy button.

38 Reply Yes. You get the following sreen: Type updtry in the System i program Name and press Enter. The word updtry beomes UPDCTRY. Chek ILE RPG and lik on Deploy button. The SmartPad4i Designer generates soure ode in the TUTORIAL library and after all shows the following report: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 38/55

Designer generates result to the Apahe Tomat Server and shows the following report:

39 Clik OK button. On the menu bar selet "Deployment" and "Deploy Projet to WebServer, the SmartPad4i Designer generates result to the Apahe Tomat Server and shows the following report: At this step, lose the SmartPad4i Designer. Open a 5250 session on the System i and type: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 39/55

40 Exeute on the System i the follozing ommand: CALL TUTORIAL/SETENV You will see the library list of your environment, as follows SmartPad4i SystemObjets 2017 Release version 2.0 Page: 40/55

41 Open and edit the soure file UPDCTRY.RPGLE in library TUTORIAL SmartPad4i SystemObjets 2017 Release version 2.0 Page: 41/55

42 Change Type=RPGLE to SQLRPGLE for UPDCTRY member, as follows: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 42/55

Edit UPDCTRY member. Insert at line 75 the following ode: 0075.01 0075.02 0075.03 0075.04 0075.05 0075.06 0075.

43 Edit UPDCTRY member. Insert at line 75 the following ode: *entry plist parm parm parm parm parm parm ation wname wont wdate wlang result Like the following sreen: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 43/

Insert at line 342, in the sub-routine YRINIT, the ode to initialize fields before display, as the following ode: 0336.01 0336.02 0336.03 0336.04 0336.05 0336.06 0336.07 0336.08 0336.09 0336.10 0336.

44 Insert at line 342, in the sub-routine YRINIT, the ode to initialize fields before display, as the following ode: ation ation ifeq lear lear lear lear endif ifeq endif 'AD' OTITLE='Add a new ountry' OCNAME OCCONT ODATE OCLANG 'UP' OTITLE OCNAME OCCONT ODATE OCLANG ='Modify ountry reord' = wname = wont = wdate = wlang Like in the following sreen: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 44/55

45 In the SmartPad4i Designer, we have defined an ation ode for eah of these buttons: OK for OK button, 12 for Canel button. We need to implement in the RPG ode to say what the program must do when it reeives these ation odes. Insert the following ode for Add button after line number 114: spatn ation ation ifeq ifeq exsr endif ifeq exsr endif else endif 'OK' 'AD' addreord 'UP' updreord result='ok' wname=iname wont =iont wdate =idate wlang =ilang result='12' Like the following: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 45/55

We need to reate now two sub-routines: addreord to insert a ountry, updreord to modify a reord entry. Insert these sub-routines before the last line of the member.

46 We need to reate now two sub-routines: addreord to insert a ountry, updreord to modify a reord entry. Insert these sub-routines before the last line of the member. The ode to insert is the following: * * Insert reord * C addreord BEGSR C/EXEC SQL C+ INSERT INTO COUNTRY (C_NAME, C_CONTINENT, C_DATE, LANGID) C+ VALUES (:ICNAME, :ICCONT, :IDATE, :ICLANG) C/END-EXEC C ENDSR * * Update reord * C updreord BEGSR C/EXEC SQL C+ UPDATE COUNTRY SET C_NAME=:ICNAME, C_CONTINENT=:ICCONT, C+ C_DATE=:IDATE, LANGID=:ICLANG WHERE C_NAME=:WCNAME C/END-EXEC C ENDSR Like the following: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 46/55

47 Save the member. Create the program in the library Tutorial, with options COMMIT(*NONE) as shown in the following sreen: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 47/55

48 Start Apahe Tomat servie, as shown in the following figure: Open a browser and type: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 48/55

49 Enter : your System i user profile, your password, program to Start: COUNTRY, environment Library: TUTORIAL. As shown in the following figure: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 49/55

50 Press Enter, you will get the result as the following: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 50/55

51 Clik on Add button: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 51/55

Enter: Country name = My ountry 1 Continent name = Europe Date = 2011-05-19 Lang ID = FRF Clik on OK button, the new reord is added in

52 Enter: Country name = My ountry 1 Continent name = Europe Date = Lang ID = FRF Clik on OK button, the new reord is added in the bottom of the List of ountries: Chek SINGAPORE and lik Modify button. SmartPad4i SystemObjets 2017 Release version 2.0 Page: 52/55

53 Modify Date= and lik on OK. SmartPad4i SystemObjets 2017 Release version 2.0 Page: 53/55

54 Clik on Exit button: SmartPad4i SystemObjets 2017 Release version 2.0 Page: 54/55

55 End of tutorial. SmartPad4i SystemObjets 2017 Release version 2.0 Page: 55/55

Development Tutorial With Free-Form ILE RPG

Development Tutorial With Free-Form ILE RPG SmartPad4i SystemObjects 2015 Release version 2.1 Page: 1/55 This tutorial is provided to create quickly and simply your first applications with SmartPad4i (SP4i).