Over a million developers have joined DZone.

Creating a Sencha Touch Nested List with a .NET Backend

· Java Zone

Navigate the Maze of the End-User Experience and pick up this APM Essential guide, brought to you in partnership with CA Technologies

In this tutorial you will learn how to create a .Net endpoint to feed a Sencha Touch Nested List. This article is similar to the Creating a Sencha Touch Nested List with a PHP Backend tutorial I published, with the exception of the backend, which is done using c# instead of PHP.

The application you will create in this tutorial is very similar to the Nested List example in Sencha’s documentation. The difference is that instead of using local hard-coded data to populate the Nested List, you will create a server-side handler that will supply the data for the list.

Sencha Touch NestedList

Let’s start setting up your sample application. You can either use Sencha Cmd, or manually create the following directories structure for the app:

Nested List app directories

In the index.html file you will add the references to the Sencha Touch framework and the app’s main JavaScript file:

nested-list-4

Defining the Model

Now you can start working on the app’s components. First, you will create the Grocery.js file in the app/model directory. In the file, you will define the Grocery Model like so:

Ext.define('App.model.Grocery', {
    extend: 'Ext.data.Model',
    config: {
        fields: [{
            name: 'text',
            type: 'string'
        }]
    }
});

To keep the example as simple as possible, you will use a model with only one field, text, which you will render inside each item of the list.

Creating a TreeStore

Then you will create the Groceries.js file in the app/store directory. This is where you will define the Groceries store. The store’s code should look like this:

Ext.define('App.store.Groceries', {
    extend: 'Ext.data.TreeStore',
    config: {
        model: 'App.model.Grocery',
        defaultRootProperty: 'items',
        proxy: {
            type: 'ajax',
            url: '../../service /grocerieshandler.ashx'
         },
        autoLoad: true,
        root: {
            text:'Groceries'
        }
    }
});

Three important things to note in the store’s definition:

  • The store is a Ext.data.TreeStore, a great place to keep data that is hierarchical in nature.
  • The defaultRootProperty config, which you use to specify a default root property when you don’t explicitly define an XML reader for the store. This is what tells the store the exact place where it can find its data inside the XML document sent by the server.
  • The use of an Ajax proxy, pointing to the .Net handler page that will supply the data for the store.

Defining the Sencha Touch Nested List

Going back to the app’s components, in the app/view directory you will create the GroceriesList.js file. This is where the GroceriesList class goes:

Ext.define('App.view.GroceriesList', {
    extend: 'Ext.NestedList',
    alias: "widget.grocerieslist",
    config: {
        fullscreen: true,
        title: 'Groceries',
        displayField: 'text',
        store: 'Groceries'
    }
});

GroceriesList is a NestedList component that will use the text field of the Grocery model as its display field, and the Groceries store as its data supplier.

The Application Instance

With these components in place, you can define the application in the app.js file, just like this:

Ext.application({
    name: 'App',
    views: ['GroceriesList'],
    models:['Grocery'],
    stores:['Groceries'],
    launch: function () {

        Ext.Viewport.add([
            { xtype: 'grocerieslist' }
        ]);
    }
});

The application instance itself is pretty simple, after declaring the model, store and view, you use the launch function to create an instance of the GroceriesList component and bring it to the foreground.

Creating the Server Endpoint

The server endpoint is probably the most interesting part of this project. For this example you will use a .Net handler as the endpoint. You will create a generic handler named GroceriesHandler.ashx:

public class GroceriesHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {

    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

Before adding code to the handler, you will create a class to represent a grocery item:

public class GroceryItem
{
    [JsonProperty(PropertyName = "text")]
    public string Text { get; set; }
    [JsonProperty(PropertyName = "leaf")]
    public bool Leaf { get; set; }
    [JsonProperty(PropertyName = "items")]
    public GroceryItem[] Items { get; set; }

    public GroceryItem(string text, bool leaf, GroceryItem[] items)
    {
        this.Text = text;
        this.Leaf = leaf;
        this.Items = items;
    }
}

Note how you can use the JsonProperty attribute available in the Json.net library to control how the properties of the Class are serialized to Json.

Next, you will create a class to represent your groceries list:

public class Groceries
{
    [JsonProperty(PropertyName = "items")]
    public GroceryItem Items { get; set; }

    public Groceries(GroceryItem items)
    {
        this.Items = items;
    }
}

In the ProcessRequest method of the handler will create and output a sample groceries list like so:

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "application/json";

    GroceryItem redBull = new GroceryItem("Red Bull", true, null);
    GroceryItem coke = new GroceryItem("Coke", true, null);
    GroceryItem dietCoke = new GroceryItem("Diet Coke", true, null);

    GroceryItem espresso = new GroceryItem("Espresso", true, null);
    GroceryItem coffee = new GroceryItem("Coffee", true, null);

    GroceryItem stillWater = new GroceryItem("Still", true, null);
    GroceryItem sparklingWater = new GroceryItem("Sparkling", true, null);
    GroceryItem water = new GroceryItem("Water", false, new GroceryItem[] {stillWater, sparklingWater});

    GroceryItem drinks = new GroceryItem("Drinks", false, new GroceryItem[] { water, coffee, espresso, redBull, coke, dietCoke });


    Groceries groceries = new Groceries(drinks);

    context.Response.Write(JsonConvert.SerializeObject(groceries));

}

If this was a production app, this is the place where you would retrieve your groceries from a database, and then populate the list.

This is all it takes to connect a Sencha Touch Nested List component to a .NET server endpoint. If you run this app, you should see the groceries list working as expected.

Want To Learn More?

My Sencha Touch and jQuery Mobile books will guide you, step by step, through the process of building Sencha Touch and jQuery Mobile applications. If you like to learn by doing, you will love these books.


Thrive in the application economy with an APM model that is strategic. Be E.P.I.C. with CA APM.  Brought to you in partnership with CA Technologies.

Topics:
java ,mobile ,frameworks ,javascript ,tips and tricks ,.net & windows ,tools & methods ,sencha touch

Published at DZone with permission of Jorge Ramon, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}