Cross-Platform Mobile Development #4

Cross-Platform Mobile Development #4

Integrating innovative JavaScript web components in traditional web applications.

Post 4 of an ongoing series

Written by Pablo Elustondo

 

Our tasks was to place that component into the page and parameterize it appropriately for our tasks and then integrating it into the existing .NET webforms application by connecting it to the server via web services. The next figure tries to illustrate the integration.

 

 

The code to implement this “timeline” page is based, primarily on 3 files: a) an ASP.NET page that produces the html (timeline.aspx), the associated c# code (timeline.aspx.c) and a JavaScript file (timeline.js) with all the client side logic. In the ASP page, first we need to include all the JavaScript libraries and stylesheets corresponding to the Ext Js and Ext Gantt component. Then, to place the component into the page we just used an html placeholder. We did that with a code like this: <div id="GanttPlaceholder"></div>

 

That empty html div is just a placeholder where the Ext Gantt chart will appear after it is created. Our JavaScript code is responsible for initializing and configuring our Gantt chart and feeds it with the information about the timeline that it needs. This is a ‘model-view-controller’ implementation. So, one of the first things we need to create is a “store’ to keep the model information.  For that, we use a code that looks like this: timelineModel = Ext.create('Gnt.data.TaskStore',...).  This line creates the object to hold the “model” of our application which is a categorized set of tasks. All the information was included in the page during creation at the server side.

 

Then, we created the actual gantt panel with a sentence like ganttPanel = Ext.create('Gnt.panel.Gantt', { taskStore: taskStore,  renderTo: 'GanttPlaceholder', ….}) . Here we are creating and configuring our Gantt chart view object and telling it which is the model that it must use and where is it that it should render itself. The rest of the configuration elements are meant to define how to set up colors, how to handle the menu options, print, etc.

 

            Finally, we need to be able to send the information back to the server when he presses the save button after doing some changes. For that we use a JavaScript function to get the data out of the model and send it to the web service using the concepts described in the previous post in this the series.

 

            Our JavaScript will pack that information into a string using a process known as “serialization” and send it to the server using an Ajax call provided by the underlying framework. That information will be un-coded (“de-serialized”) by the web service, converted into a model object in the server side and used to save it to the DB via the corresponding application layer. Making the Ajax from the client side is relatively standard and can be found in the documentation, but placing the web service on the server side may pose the question of where this should be placed in the code.

            One possible solution, more suitable for the development of a complete SOA API, would be to create a complete web service interface for the web application independent on the existing pages. But in our case that would be an overkill and probably not too good from a modularity point of view, we just want to integrate with our existing code in a way that respects the existing architecture modularity. So, we used a very simple approach and placed the web service directly in the “code behind” of the timeline ASP page. The beauty of this from a maintenance point of view is that all this implementation is self-contained and not affecting or involving anything beyond this particular page. Our server side code in timeline.aspx.c file (normally called the ‘code behind’) looks like this:

 

            [WebMethod(EnableSession = true)]

       public static string saveTimelineService(string timelineString) {

                        …......

               TimelineModel timeline = decodeTimelineString(timelineString);

               saveTimelineModelInDB(timeline); };

 

The first sentence will decode the string (which could be json, xml or any other string representation) into a model object in the server and then it will save that model object into the database.

In our next post we will see how the same concept and almost same technology can be applied to produce a server based mobile app.

 

 

The opinions expressed on this discussion room are writer's and don't necessarily represent NTT DATA Canada's positions, strategies or opinions.