Event : Common Europe Speaker : Koen Decorte CD-Invest nv

Size: px

Start display at page:

Download "Event : Common Europe Speaker : Koen Decorte CD-Invest nv"

Baldric Banks
6 years ago
Views:

1 Event : Common Europe Speaker : Koen Decorte CD-Invest nv

2 CONTENT WHO ARE WE BACKEND RPG TOOLS FRONT END EXTJS FRAMEWORK JSON INTRO LET RPG TALK JSON BUILD SCREENS IN EXTJS PUTTING EVERYTHING TOGETHER WITH AJAX

3 Who are we - Small IBM i ISV and IBM business partner located in Oostkamp, (near Bruges) Belgium. - Team of 11 people. - Working with IBM i and its predecessors for more than 40 years. - Expertise in RPG, SQL, PHP, HTML, JAVASCRIPT, WEBSERVICES, WEBSITES, WEBSHOPS, 3D, etc - Do contract programming for customers ranging from furniture, frames manufacturing to dairyvet webshops.

4 BACKEND RPG TOOLS EASY400.net : tools ranging from web development to ifs, excel handling, Scott Klement website : YJAL parser, Powerext framework : backend framework with optional frontend => combines both tools.

5 CGIDEV2 (EASY400.net) Free and open source toolkit to develop interactive web applications using RPG Started in 1999, we have used it since then. Usage : websites, web interfaces, powerful in combination with other tools or with enhanced features Very easy to use when you know RPG, web pages are like printing (record formats/variables). Main disadvantages : No session management No JSON support

6 YAJL and other Scott Klement tools LIBHTTP : tool to consume webservices from RPG (since 2002) YJAL : tool to parse and write JSON (since 2013) Both LIBHTTP and YJAL are great tools used in combination with cgidev2. You can use cgidev2 to read the request from the browser and use YJAL to write the answer in JSON. This way you can easily build a powerful and flexible backend.

7 POWEREXT framework Integration of cgidev2, yjal, extjs and even nodjs on ibm i

9 SENCHA EXTJS FRONT-END FRAMEWORK - Using it since it started in Javascript framework allowing cross-browser and crossplatform development of web and mobile touch applications. - Ext JS includes a set of GUI-based form controls (or "widgets") for use within web applications - More info on

10 SENCHA EXTJS FRONT-END FRAMEWORK Ext JS features 115+ integrated UI components including calendar, grids, charts and more. The Ext JS Grid and Charting package can handle millions of records with ease. The framework includes a robust data package that can consume data from any back-end data source

11 Why EXTJS Cross-browser support Rich UI components Two way binding MVC (Model View Controller)/MVVM (Model View, View Model) Easy DOM access Client-side routing Single-Page Application (SPA).

16 JSON JSON = JavaScript Object Notation JSON is a syntax for storing and exchanging data. JSON is text, written with JavaScript object notation.

17 JSON DATA EXCHANGE Any JavaScript object can be converted into JSON, and sent to the server. Any JSON received from the server can be converted into JavaScript objects. No complicated parsing and translations needed.

18 JSON - SYNTAX RULES JSON syntax is derived from JavaScript object notation syntax: Data is in name/value pairs Data is separated by commas Curly braces hold objects Square brackets hold arrays

19 JSON - NAME + VALUE JSON data is written as name/value pairs. A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a value: Example : {"name":"koen"}

20 JSON VERSUS XML Both JSON and XML can be used to receive data from a web server. The following JSON and XML examples both defines an persons object, with an array of 3 persons:

21 JSON EXAMPLE { persons":[ { "firstname":"koen", "lastname":"decorte" }, { "firstname":"jeroen", "lastname":"decorte" }, { "firstname":"bart", "lastname": Decorte" } ]}

22 XML example <persons> <person> <firstname>koen</firstname> <lastname>decorte</lastname> </person> <person> <firstname>jeroen</firstname> <lastname>decorte</lastname> </person> <person> <firstname>bart</firstname> <lastname>decorte</lastname> </person> </persons>

23 JSON - XML Both JSON and XML are "self describing" (human readable) Both JSON and XML are hierarchical (values within values) Both JSON and XML can be parsed and used by lots of programming languages Both JSON and XML can be fetched with an XMLHttpRequest

24 JSON - XML JSON doesn't use end tag JSON is shorter JSON is quicker to read and write JSON can use arrays The biggest difference is: XML has to be parsed with an XML parser. JSON can be parsed by a standard JavaScript function. For AJAX applications, JSON is faster and easier than XML.

25 PREPARE RPG BACKEND TO TALK JSON Install cgidev2 Install Yajl Configure HTTP Apache server Setup development library

26 HTTP CONFIG BASICS DefaultNetCCSID 1208 KeepAlive On KeepAliveTimeout 15 ExpiresActive On # A means expire after a month in the client's cache ExpiresByType text/css A ExpiresByType application/x-javascript A ExpiresByType application/javascript A ExpiresByType text/html A

27 HTTP CONFIG BASICS <Directory /QSYS.LIB/CSMEXT.LIB> CGIConvMode %%EBCDIC/MIXED%% Options +ExecCGI order allow,deny Allow From all AddOutputFilter INCLUDES.pgm.pl.class </Directory>

28 HTTP CONFIG BASICS AliasMatch ^/QSYS\.LIB/CSMEXT\.LIB/(.*) /QSYS.LIB/CSMEXT.LIB/$1 ScriptAliasMatch ^/csmextp/(.*) /QSYS.LIB/CSMEXT.LIB/$1

29 LET RPG TALK TO BROWSER RPG HEADER ADD binding directories CGIDEV2 an YJAL.

30 LET RPG TALK TO BROWSER RPG COPY BOOKS /copy *libl/qcpyprc,prototypeb /copy *libl/qcpyprc,usec /copy *libl/qcpyprc,variables3 /copy *libl/qcpyprc,yajl_h

31 LET RPG TALK TO BROWSER RPG READ INPUT FROM THE BROWSER * parse browser input nbrvars = zhbgetinput(savedquerystring:qusec) ; action = zhbgetvar('action') ;

32 LET RPG TALK TO BROWSER * succes output { SUCCESS : 1 } yajl_genopen(*off) ; yajl_beginobj(); yajl_addchar('success':'1') ; yajl_endobj();

33 LET RPG TALK TO BROWSER * send output to browser httpstatus = 200; yajl_writestdout(httpstatus: errout) ; yajl_genclose();

34 SQL SETTINGS set option srtseq=*langidshr, closqlcsr=*endmod, commit=*none First SQL line in code and needs to be excuted first.

35 LET RPG TALK TO BROWSER row = c2n2(zhbgetvar('wid')) ; exec sql select wid, wcode, wdesc, wseq into :wid, :wcode, :wdesc, :wseq from workw where wid = :row; if ( SqlStt <> SqlNormal ); SEND ERROR endif ;

36 BUILD JSON RECORD yajl_beginobj() ; yajl_addchar('wid': %trim(%editc(wid:'4'))) ; yajl_addchar('wcode':%trim(wcode)) ; yajl_addchar('wdesc': %trim(wdesc)) ; yajl_addchar('wseq':%trim(%editc(wseq:'4'))) yajl_endobj() ;

37 EXAMPLE OUTPUT {"SUCCESS":"1","WID":"1","WCODE": KDC01 ","WDESC": Koen Decorte","WSEQ":"10"}

38 SEND QUERY RESULT AS A PAGING GRID start=c2n2(zhbgetvar('start')); limit=c2n2(zhbgetvar('limit')); if limit=0; limit = 250; endif; search = zhbgetvar('search'); sort = zhbgetvar('sort ); sortdir = zhbgetvar('dir');

39 // build SQL statement SQ = X'7D' ; stmt='select wid, wcode,, wdesc, wseq from workw' ; if (search <> *blanks ) ; stmt = stmt + ' where wdesc like ' + sq + '%' + %trim(search) + '%' +sq; endif; if (sort <> *blanks ) ; stmt = stmt + ' order by ' + %trim(sort)+ ' '+ %trim(sortdir) + ', wid' ; else; eval stmt = stmt + ' order by wid ; endif ;

40 * prepare statement exec SQL include sqlca ; exec SQL prepare subfileselect from :stmt; if sqlstt=sqleof; // send no records error Endif; exec SQL declare csr001 insensitive scroll cursor for subfileselect; exec SQL open csr001; totalcount = sqler2;

41 if ( start <> 0 ); exec sql fetch relative :start from csr001 for :limit rows into :workwrecords; Else; exec sql fetch csr001 for :limit rows into :workwrecords; Endif; if sqlcod<>good; // send no records found Endif; If sqler2 < limit; limit = sqler2; endif ;

42 yajl_beginobj() ; yajl_addchar( SUCCES: 1 ) ; yajl_addchar('totalcount': %trim(%editc(totalcount:'4'))) ; yajl_beginarray('workwrec') ; For i = 1 to limit; yajl_beginobj() yajl_addchar('wid': %trim(%editc(workwrecords(i).wid:'4'))) ; yajl_addchar('wcode': %trim(workwrecords(i).wcode)) ; yajl_addchar('wdesc': %trim(workwrecords(i).wdesc)); yajl_addchar('wseq': %trim(%editc(workwrecords(i).wseq:'4'))) ; yajl_endobj() ; endfor; yajl_endarray() ; yajl_endobj() ;

43 LET RPG TALK TO BROWSER {"SUCCESS":"1","totalCount":"2","WORKWRE C":[{"WID":"1","WCODE":"KDC01","WDESC":" Koen Decorte","WSEQ":"10"},{"WID":"2","WCODE": "JDC01","WDESC":"Jeroen Decorte","WSEQ":"20"}]}

44 SENCHA EXTJS FRONTEND EXTJS 6 => 2 TOOLKITS Classic = for desktops Modern = for mobile devices If you want to target both = universal application

45 SENCHA EXTJS FRONTEND "builds": { "classic": { "toolkit": "classic", "theme": "theme-triton" }, "modern": { "toolkit": "modern", "theme": "theme-neptune" } },

46 SENCHA EXTJS FRONTEND Sencha Cmd command line tool to automate tasks (build, generate, update, etc... Requires Ruby Java run time sencha generate app ext... Sencha architect = integrated ide tool

47 MODEL VIEW CONTROLLER VIEW MODEL Model This represents the data layer. The model can contain data validation and logics to persist the data. In Ext JS, mostly model is used along with a data store. View This represents the user interface. So, components such as button, form, and message box are views. Controller This handles any view-related logic, event handling of the view, and any app logic. View model This encapsulates the presentation logic required for the view, binds the data to the view, and handles the updates whenever the data is changed.

50 <!DOCTYPE html> <html> <head> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximumscale=1, user-scalable=no"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>workwith</title> <link rel="stylesheet" type="text/css" href="/crext/css/crext.css" /> <link rel="stylesheet" type="text/css" href="/ext-6.0.2/build/classic/themeclassic/resources/theme-classic-all.css"> <script src="/ext-6.0.2/build/ext-all.js"></script> <script src="/ext-6.0.2/build/classic/theme-classic/theme-classic.js"></script>

51 EXTJS template Wait until the DOM is ready and Ext JS is loaded and parsed. Ext JS provides a function called Ext.onReady, which executes a callback automatically when all the nodes in the tree can be accessed. in jquery = $( document ).ready(). Ext.onReady(function(){ alert("this is my first Extjs app!"); });

52 EXTJS template An alternative to this code can also be: Ext.application({ name : 'MyFirstApplication', launch : function() { Ext.Msg.alert("Hello"," my first Ext JS app"); } });

53 LINK EVERYTHING TOGETHER - AJAX Ext.Ajax.request({ url:"serverside/rpgprogram.pgm", success: function(response,options){ console.log('success function executed, here we can do some stuff!'); }, failure: function(response,options){ Ext.Msg.alert("Message", 'server-side failure with status code ' + response.status); }, callback: function( options, success, response ){ console.log('callback executed, we can do some stuff!'); } });

54 LINK EVERYTHING TOGETHER - AJAX The success function will be executed only when the server responds with a status If the response status is 403, 404, 500, 503, and any other error status, the failure callback will be executed. Each function (success or failure) receives two parameters. The first parameter = server response object. The second parameter is the coniguration option The callback function will be executed always, no matter if it's a failure or success. Also, this function receives a third parameter: a Boolean value according to if the request was successful.

55 LINK EVERYTHING TOGETHER - AJAX success: function(response,options){ var data = Ext.decode(response.responseText); Ext.Msg.alert("Message", data.msg); }, if (data.success=='1') { Ext.getCmp('p0').setValue(data.WID); Ext.getCmp('p1').setValue(data.WCODE);.

56 THANK YOU FOR YOUR ATTENTION

So, if you receive data from a server, in JSON format, you can use it like any other JavaScript object.

So, if you receive data from a server, in JSON format, you can use it like any other JavaScript object. What is JSON? JSON stands for JavaScript Object Notation JSON is a lightweight data-interchange format JSON is "self-describing" and easy to understand JSON is language independent * JSON uses JavaScript