Sencha Touch And Restful Models (My Solution)

For those that have been sitting on the edges of their seats waiting for this post, here it is. Finally!

To start off, let's here is a list of my goals.

• Establish an automated method for retrieving a child model from a RESTful service.
• Reduce the application code to manage multiple result sets of slight variation.
• Reduce the code complexity for working with RESTful services and Sencha Touch.
• Simplify the development experience with Sencha Touch and model associations.

The pattern that I immediately see with any RESTful service is an initial subset of data that contains a URI.  To understand the full data set for the same RESTful service, a client would navigate the URI to retrieve the rest of the service details.  We end up with something like this.

{ id: 0, uri: 'makers/0' }

Once the uri of the makers Model is expanded, you should see something like this which contains a model of Chevrolet that I have owned.

{ id: 0, name: 'Chevrolet', models: [ { id: 0, maker_id: 0, name: 'S10', year: '2003', uri: 'cars/0/0' }, ... ] }

Inside the models array, there are potentially multiple records that will next need to be expanded. The complicating factor is the need to navigate and further expand the data sets that you see once the user requires more information. In the above example data set, I have chosen these fields to show on the initial view. I have identified these fields to display to the user to present them with enough information to make their next choice.

View my screencast to see this in action.

You can download the code to my solution from my github project, RestModel.  The implementation with some examples and unit tests are all included.  Please leave a comment if you have any questions or need assistance with setting this up and running with it.

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).