Sunday, April 22, 2012

Sencha Touch And Restful Models (The Problem)

This is the first of a couple posts that will discuss Sencha's Touch framework and the concept of using Rest.  The final post will present a solution and examples of this implementation while showing what I have created and learned along the way of solving this problem.

One of the features I have been thinking about with regards to Sencha Touch is having the ability to retrieve additional information while leveraging the very useful and powerful Model implementation. In the context of the Model implementation while using Restful services, the data should in the most strict form contain a URI.  This URI should be a reference to additional information.

In my instance, I am using a phone form factor to frame this problem.  In the context of a phone-based web application, the application should contain just enough information to render the screen useful.  Any additional information that needs to be given to the user should be done on-demand.  For example, a list of car makers shouldn't include a list of all of the cars ever made by the maker.  When the user selects the maker, then a list of cars should be provided to the user.  That should be done following a new request for information.

The on-demand retrieval of information is a convenient and arguably a core feature of restful services.  In the phone form factor, the ability to see the separation of the data requirements for the screen and utilization of the on-demand concept is very easy to see.  Taking the request model to a full-sized browser becomes a bit more tricky depending on the design of the screen and how the data is presented to the user.  For simplicity, we'll stick with the phone to simplify the concept and see some examples.

Hopefully the following pictures will illustrate this a little more obviously if I haven't portrayed the intent.


In it's most basic representation, there is a parent model with a child model.  The child model has enough details to create the proper linking between the parent and child.  Furthermore, it contains an URI property that will assist in retrieving additional information regarding the child object.










After some triggered action, likely a user driven action, the URI is expanded and additional information is "automagically" expanded into the model.  Now any interactions with this model will have the properties, prop1, prop2, and prop3 available for the selected child record.











In the next post, we'll see the implementation that I came up with, view some examples and discuss the project a little more in-depth.

For my solution, see my post Sencha Touch and Restful Models (My Solution).

Tuesday, April 10, 2012

Sencha Touch Debugging

I will start by prefacing this post with it is often very frustrating to try to debug Sencha based frameworks.  My particular gripe in this case is with Sencha Touch 2.0.  I am working on a little project to get more familiar with Sencha Touch.  The project is hosted on github if you want to look on and see what I am doing.  (Maybe you can shed some light on my stupidity.)

NOTE: This is not a post on how to debug Sencha Touch.  My intention is to document what I am seeing and hopefully find someone with similar issues or with a solution.  Check back later for the resolution, as I am sure it will be something ultimately simple.

My issue at the moment is the Observable mixin.  I have a controller, MlbSchedule, that is watching an event fired by the TeamList.  The event, itemtap, is caught by the MlbSchedule controller.  Then the method drillInOnTeam is then called.  So far so good.
Ext.define("MlbSchedule", { extend: 'Ext.app.Controller', mixins: ['Ext.mixin.Observable'], ... initializeListeners: function() { var tList = this.getTeamList(); tList.on("itemtap", this.drillInOnTeam); }

drillInOnTeam fires an event teamSelected, which does nothing more than pass the record along.  The intent here is to send the record out to the listener to transfer control to the next controller that is set to handle the selection of the item in the list.
drillInOnTeam: function(dataView, index, target, record, event, options) { console.log(this.fireEvent("teamSelected", record)); }
The application, app.js, initializes the listener attached to the MlbSchedule controller as follows.  There are no errors at this point and everything appears to be in good working order.
initializeListeners: function() { var mlb = this.getController("MlbSchedule"); mlb.on("teamSelected", this.showTeamNews, this); }
Now, when clicking the row list item, everything fires except he method showTeamNews is never executed.  I am not at a loss.

How do you debug this?  I can step through the various steps of the fireEvent method.  Is there a better approach?

[SOLVED]
It turns out that the event teamSelected was being fired off of the TeamList instance instead of the MlbSchedule instance.  (face palm)
initializeListeners: function() { var tList = this.getTeamList(); tList.on("itemtap", this.drillInOnTeam, this); }
Something so inane.  I don't know how Sencha can correct this sort of developer stupidity.

However, the garbage man showed up as I was writing this post.  I had not put the trash out yet and chased him down and even assisted in loading all the garbage from my current home project into the truck.  This is a good reminder that sometimes the simplest solution is to walk away.