So we have this great little 5250 application which is now just an ugly web application.\u00a0 Truth is, this thing is so lightweight that as a web application, it is pretty snappy.\u00a0 But, not ALL applications are going to be this light weight and unless your standards are as low as mine when it comes to GUI, you’ll want to make this a *little* prettier.\u00a0 Here is where we are, so far:\u00a0 http:\/\/opensourceoni.com\/mobilerem\/cgi_punch.pgm<\/p>\n
The great news is that with CSS3 and HTML5 the road from ugly to beautiful is short and sweet.\u00a0 We just need to add a bit of css and perhaps a javascript library to improve things.\u00a0 But there is some redesign needed as well, especially since we are now going to add some more heft to the size of the application.\u00a0 Our original design had two separate CGI programs which basically presented the two screens of information.\u00a0 In each case a page is constructed at the server end and sent back to the browser to be rendered.\u00a0 Not a great design since a large portion of the page really doesn’t change.\u00a0 And imagine if we had headers, footers and graphics on the page as well.\u00a0 All that back and forth can eat bandwidth and breaks our “good citizen” rule.\u00a0 So we need a new approach.<\/p>\n
First, we are going to change from multiple pages to a single page.\u00a0 In jQuery mobile, the “trick” that is used is to define a div and treat it as if it were a page.\u00a0 With jQuery, jQuery mobile and the css added to the file, we can start to redesign the page like so:<\/p>\n
<body><\/p>\n
<div data-role=”page” id=”main” data-theme=”b” ><\/p>\n
<div><\/p>\n
<div data-role=”page” id=”punches” data-theme=”b” ><\/p>\n
<\/div><\/p>\n
<\/body><\/p>\n
That creates two “pages” for jQuery mobile to work with.\u00a0 The library takes care of the heavy lifting of showing and hiding the pages as we “page” back and forth.\u00a0 Make sense?<\/p>\n
For the “main” page, the first page we see that has the last punch and current time and date information as well as the buttons, there really isn’t all that much difference between the “classic” CGI page and our mobile page.\u00a0 We have a table with our information formatted into it.\u00a0 The “punches” page, where we list the information on the punches returned from the server, hasn’t changed all that much either except on both pages the \/% %\/ variable delimiters are gone because we are not making the round trip to the server so our CGI program no longer has to dump the information into the variables.\u00a0 So how, you ask, are we going to get data into the HTML forms?\u00a0 Ah! For that we use the magic of AJAX, JSON and the jQuery libraries.<\/p>\n
AJAX<\/strong><\/p>\n AJAX is the easiest part to understand.\u00a0 All AJAX does is send a small bit of data to the server (think of it as a miniscule web page) which the server reads and executes.\u00a0 That execution may return data, or it may not (usually does).\u00a0 The server packages up the data and sends it back to the AJAX requestor. At that point, the function that called the AJAX deals with the response.<\/p>\n JSON<\/strong><\/p>\n The second piece, JSON, is a little harder to understand.\u00a0 Basically, JSON is just a string of data in a particular format.\u00a0 Basically the format is this:\u00a0 { “name”:value}.\u00a0 Deceptively simple but very powerful because if you know anything about JavaScript you know that looks very similar to an object definition in JavaScript.\u00a0 So, as an example, if we wanted to create an object called Person and add some attributes to it you would do it something like this:<\/p>\n personObj=new Object(); But we could also do it like this: And when we needed to get values from the object we would do it like so:<\/p>\n var first = personObj.firstname;<\/p>\n It shouldn’t take much of your brain’s CPU cycles to think: Hey, wait a minute!\u00a0 If I had a string formatted like so on the server: ‘{firstname:”John”,lastname:”Doe”,age:50,eyecolor:”blue”}’ and I returned that string to my web page with an AJAX call,\u00a0 I can create objects of data on the client without much effort!\u00a0 Pseudocode would be something like: jQuery<\/strong><\/p>\n If we want to start hooking some of this stuff up, let’s begin by assuming that we have returned a JSON formatted string to our client application.\u00a0 jQuery pretty much handles all of the heavy lifting:<\/p>\n jsonURL =\u00a0 ‘cgi_mobile.pgm?action=getList’;\u00a0 \/\/ URL that calls our CGI program on the server<\/p>\n $.ajax({ try This code snippet would call the cgi_mobile.pgm and pass the action ‘getList’ and then the program would return that list in a JSON formatted string which is parsed back to an object using the $.parseJSON function in jQuery.\u00a0 You can take a look at the program source but basically the CGI program simply formats the data using a ‘json’ template and sends back the result which is a JSON string.\u00a0 It does it EXACTLY the way it would take an HTML template and send back HTML.\u00a0 You can take a look at the jsonlist.json template but there isn’t anything new except it formats the data as a JSON string.<\/p>\n That string is actually an array of JSON objects (because that is the way I formatted it!) so now I have an array of objects and those objects are “punches”.\u00a0 It looks like this:<\/p>\n [ { “lastPunch”: “IN”, “punchDate”: “12\/30\/11”, “punchTime”:”07:40:38″ } ,{ “lastPunch”: “IN”, “punchDate”: “12\/30\/11”, “punchTime”:”08:07:43″}]\u00a0 In fact, you can see the “raw” data just by calling that action in your browser: Nothing special.\u00a0 AND since we now have an object we can iterate through and format our table on the client side with a little bit of javascript:<\/p>\n for(var i =0;i<jsonContent.length;i++) }<\/p>\n Once we have that HTML constructed, jQuery just let’s us stuff the html into the empty body of the table in our “punches” “page”:<\/p>\n $(“#punchList tbody”).html(html);<\/p>\n And then we change the “page” (basically hiding the div we are on and showing the div named “punches”) Not a whole lot of magic here.\u00a0 Just taking advantage of the capabilities of AJAX, JSON, and jQuery.<\/p>\n Believe it or not, the hard part is done.\u00a0 We can easily take this mobile web application and turn it into a mobile “native” application using PhoneGap.\u00a0 But, that will have to wait until next week (or so).\u00a0 Remember that you can get this code right here<\/a>.<\/p>\n OH!\u00a0 I missed giving you a link to the actual web application.\u00a0 You will find that here: http:\/\/opensourceoni.com\/mobilerem\/cgi_mobile.pgm<\/p>\n Have fun!<\/p>\n","protected":false},"excerpt":{"rendered":" So we have this great little 5250 application which is now just an ugly web application.\u00a0 Truth is, this thing is so lightweight that as a web application, it is pretty snappy.\u00a0 But, not ALL applications are going to be … Continue reading
\npersonObj.firstname=”John”;
\npersonObj.lastname=”Doe”;
\npersonObj.age=50;
\npersonObj.eyecolor=”blue”;<\/p>\n
\npersonObj={firstname:”John”,lastname:”Doe”,age:50,eyecolor:”blue”};<\/p>\n
\nvar personObj = getJsonFromAjax();\u00a0 Nice!\u00a0 That is EXACTLY what we will do with a little help from jQuery.<\/p>\n
\nurl: jsonURL,
\nasync: false,
\ncache: false,
\nsuccess: function(data){<\/p>\n
\n{
\njsonContent = $.parseJSON(data);
\n}
\ncatch(err)
\n{
\nalert(‘(JSON exception)’);
\nreturn false;
\n}
\n}<\/p>\n
\nhttp:\/\/opensourceoni.com\/mobilerem\/cgi_mobile.pgm?action=getList<\/p>\n
\n{
\nvar rec = jsonContent[i];
\nhtml = html + ‘<tr><td><input type=text name=lastPunch id=lastPunch value=’+rec.lastPunch+’ readonly><\/td>’
\nhtml = html + ‘<td><input type=text name=punchDate id=punchDate value=’+rec.punchDate+’ readonly><\/td>’
\nhtml = html + ‘<td><input type=text name=punchTime id=punchTime id=punchTime value=’+rec.punchTime+’ readonly><\/td><\/tr>’<\/p>\n
\n$.mobile.changePage(“#punches”,’slide’,false,true);<\/p>\n