Innojam Las Vegas 2012 – Team One – Mumsy-Book App – Source

The Mumsy-Book App was designed using Codiqa, which is has a drag and drop interface making it easy to design a HTML5 app using jQueryMobile.

You can test the app on-line, then at a later stage export the entire code base as a HTML5 / jQueryMobile project.

Image

The exported code then needs a little modification. The pictures are typically still held on the Codiqa site, so these need to be modified to be local references.

The code then needs modifying to fetch its data from the Hana system, four tables with test data were created on the system. Team one ran out of time during the innoJam, so only one table was actually implemented.

Here is a code sample of how the data is read and applied to the HTML5 code:

The data was read on the page being loaded:

<script>
$(document).bind(‘pageinit’,function(event) {getMembersData()});
</script>

The insertion point within the html5 DOM is here:

<ul id=’members-element-id’ data-role=’listview’ data-divider-theme=’b’ data-inset=’true’></ul>

The data is read record by record become line by line within the application:

<script>
var nopoint = “ooga”;
function getMembersData()
{
// URL for calling getRewardsData function with all parameters.
var airline = “AA”;
var myEndpointUri = “http://192.168.12.3:8000/team01/membersij.xsodata/Members“;
// Send the request and define callback methods.
OData.read( {requestUri:myEndpointUri,user:”team01″,password:”InnoJam2012″}, function (data) {
//Success Callback (Received data is a Feed):
var html = “”;
//html += “<ul data-role=’listview’ data-divider-theme=’b’ data-inset=’true’>”;
html += “<li data-role=’list-divider’ role=’heading’>Individual</li>”;

for (var i = 0; i < data.results.length; i++) {
html += “<li data-theme=’c’> <a href=’#page3′ data-transition=’slide’>”;
html += data.results[i].MEMBER + ” ” + data.results[i].POINTS;
html += “</a> </li>”;
}
//html += “</ul>”;
document.getElementById(“members-element-id”).innerHTML = html;
$(‘#members-element-id’).listview(‘refresh’);
//Assuming your HTML page has DIV element with id ‘target-element-id’
},
function (err) {
//Error Callback:
var spacer = “nothing”;
alert(“Error occurred test – ” + err.message);
}
);
}
</script>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s