Netflix Sencha Touch 2 app with JayData

Author: Viktor Lazar June 7th, 2012

, , , ,

JayData seamlessly integrates into Sencha Touch 2 through the JayData Sencha module. You only have to modify the proxy on your Sencha data store to use the JayData proxy and define a queryable as the data source. Using remoteFilter, remoteSort and pageSize your query will be processed by JayData. Currently the module only supports read-only functions. To add, update or delete entities you can still use JayData directly in your code.


To follow this tutorial it’s required to have basic knowledge of Sencha Touch 2 to understand the Sencha Touch 2 parts of the tutorial.

You can see the final app here.

Initializing the JayData context

Initializing the JayData context is easy as always. This Netflix app uses the public OData service of Netflix. After running the JaySvcUtil tool to get the context definition of the Netflix service you only have to reference the context script. JaySvcUtil already includes an instance of the context in the generated script so you don’t have to do it manually. Here you can find a tutorial about using the JaySvcUtil tool.

Store definition using JayData proxy

JayData integrates itself into Sencha Touch 2 through a data proxy. You only have to define the JayData proxy on your store. Here is the store definition part of our example:

As you can see the proxy uses a queryable as the data source instead of an URL like other Sencha server stores. This way you can use any queryable of any context you defined and instantiated in your application. You are not restricted to the OData provider. You can use the Facebook, YQL or any other providers of JayData too.

Predefined query filtering and sorting is supported like in the example. By default we sort the data as defined in the store and you can have as many query operators in the store definition as you want.

From now on you can use the filtering, sorting and paging functions of the store as is.

The function parameter of the filterBy function of the Sencha store or any other filter or sort method of the store where you can pass a function as a parameter you literally pass the function to the equivalent JayData method (like .filter(), .orderBy(), etc.).

If a use case is not supported by Sencha or the JayData module you can still use JayData directly. Like in the details view of a movie. When a movie item is tapped we load the details in the event listener function.

In the above source code part we directly query the database using JayData. For the data query we don’t use anything from the Sencha library. But in the callback function of the toArray method we build the content using the templating engine of Sencha.


Native mobile app

The Netflix example app is a hybrid application. You can launch it in the browser or you can use PhoneGap and convert it to a native mobile app. Because of the browser limitation of cross-domain AJAX calls you have to include a few additional lines if you want to deploy the app on the web.

With this function we hijack the AJAX request to transform it to a JSONP request. This way the cross-domain issue no longer bothers you. But be careful because JSONP is only valid in a read-only scenario.

, , , ,