In this video I’m going to show how to make a Sencha Touch application within Sencha Architect that communicates to a backend server using ASP.NET Web API. ASP.NET Web API is a great way to make a RESTful application using the .NET framework. I’ve downloaded and installed the Release Candidate version of ASP.NET MVC 4, which includes ASP.NET Web API, and I’m using Visual Studio 2010.

If you want to re-create the app in Architect, I’ve included the steps below.

I’ve already created a simple database in SQL Server 2008 Express for this particular demo, and at the moment this has one table called “user” with some records in. What I’m going to do is make a simple Sencha Touch application that administers the contents of that table, via ASP.NET Web API calls.

First thing to do is to create a new project in Visual Studio.

  1. Open Visual Studio 2010 as an Administrator (due to using IIS)
  2. Create a new project.
  3. Under C#, select Web, then choose the option to create a “ASP.NET MVC 4 Web Application”
  4. For project name type in “UserAdmin”
  5. On the Project Template popup screen, select the “Web API” option. We’re not going to bother creating a unit test project for this demo
  6. Right click on the project, and select Properties
  7. Select the “Web” tab
  8. Select the option to use the “Local IIS Web Server”
  9. Click the “Create Virtual Directory” button
  10. Right-click on the project and Add New Item
  11. Select “Data” under Templates, and choose the “ADO.NET Entity Data Model” option
  12. Set Name to “Model.edmx”
  13. Generate from database
  14. Create a new connection string, with SQL authentication, user name “demo”, password “demo”. Database server is “.\sqlexpress”.
  15. Save the Password
  16. Set Entity connection string name to “Entities”. Hit “Next”
  17. Choose the “user” table to add to the entity data model
  18. Set the Model Namespace to “DemoEntities”
  19. Build the project
  20. Right-click Controllers, and add a new Controller
  21. Under name enter “UserController”
  22. Under Scaffolding options, select the “API controller with read/write actions, using Entity Framework”
  23. Choose the “user” for Model class
  24. Choose the “Entities” for Data context class
  25. Click “Add”

This has now created a class with methods for returning the list of users, getting a particular user by ID, plus saving, adding and deleting user records. You can add your own logic in here if needed, but for this demo we’re just going to use the template that has been created automatically. Depending on the type of HTTP request a particular method is called:

  • For a GET request with a specified ID, a particular record is returned
  • For a GET request with no ID specified in the query string, the list of records is returned
  • For a POST request, a new record is created
  • For a PUT request, an existing record is updated
  • For a DELETE request, an existing record is deleted
  1. Build the project.
  2. In the web browser, browse to http://localhost/UserAdmin/api/user

You can see that the set of data is returned. It’s in XML format at the moment because we’re calling the service directly via the web browser. When it’s called via an Ajax request, JSON format will be requested.

  1. Open Sencha Architect, and create a new Sencha Touch project
  2. Save the project in the root of the .NET project, with a project name of “app”
  3. Click Save.
  4. First thing to do in the Sencha Touch project is to add a new Model for our user entity
  5. Add a new Model
  6. Call the new Model “User”
  7. Add 4 fields:
  • id – int
  • name
  • emailAddress
  • age – int
  1. Add a Rest Proxy to the Model
  2. Specify the url on the Rest Proxy to http://localhost/UserAdmin/api/user
  3. Add an Email Validation to the model, and set name to “emailAddress”
  4. Add a Presence Validation to the model, and set name to “name”

Now we’re going to add a Store to the project, which is going to hold the list of users when initially loaded from the server.

  1. Add a new JSON Store
  2. Set the “autoLoad” to true
  3. Set the model to “User”
  4. Set the userClassName to Users
  5. On the Proxy, set the URL to http://localhost/UserAdmin/api/user
  6. Right-click on the Store and Load Data
  7. Click the “Preview” icon to preview the returned dataset

Now that’s the data side of things defined. Now we’re going to create two views – one that lists the users, and another view to edit the user’s details.

  1. Add a Navigation View to the project
  2. Set the ID of the navigation view to “Main”
  3. Add a new List to the Navigation View
  4. Set the ID of the List to “UserList”
  5. Set the Title of the List to “Users”
  6. Set the itemTpl to: <div>{name} ({emailAddress})</div>
  7. Set the List’s Store to “Users”
  8. Add a new Form Panel
  9. Set the userClassName to UserForm
  10. Set the id to UserForm
  11. Add a Text Field, with label “Name”
  12. Set the name to “name”
  13. Add a Email Field, with label “Email”
  14. Set the name to “emailAddress”
  15. Add a Number Field, with label “Age”
  16. Set the name to “age”
  17. Add a new Panel to the Form
  18. Set the panel’s layout to hbox
  19. Set the panel’s margin to 6px
  20. Add a button to the panel
  21. Set the text to “Save”
  22. Set the flex to “1”
  23. Set the ui to “confirm”
  24. Add a custom property of “action” with value “save” (lower case)
  25. Add a button to the panel
  26. Set the text to “Delete”
  27. Set the flex to “1”
  28. Set the ui to “decline”
  29. Add a custom property of “action” with value “delete” (lower case)
  30. Add a new Controller
  31. Set the userClassName to “User”
  32. Add a Controller Reference for “mainView” which has a selector of “#Main”
  33. Add a Controller Reference for “userForm” which has a selector of “#UserForm”
  34. Add a Controller Reference for “userList” which has a selector of “#UserList”
  35. Add a new Controller Action targeting “Ext.dataview.List”, with “itemtap” event
  36. Set the controlQuery to “#UserList”
  37. Set the fn to “onItemTap”
  38. Add the following code:
var form = Ext.create("MyApp.view.UserForm",
{
    title: record.data.name
});

this.getMainView().push(form);

form.setRecord(record);
  1. Add a new Controller Action targeting “Ext.Button”, with “tap” event
  2. Set the controlQuery to “[action=save]”
  3. Set the fn to “onSave”
  4. Add the following code:
var me = this;
var form = this.getUserForm();
var values = form.getValues();
var record = form.getRecord();

record.set(values);

if (record.isValid()) {
    record.save({
        success: function()
        {
            me.getMainView().pop();

            me.getUserList().deselectAll();
        }
    });
}
else {
    Ext.Msg.alert("Error", "There are errors with the record!"); 
}
  1. Add a new Controller Action targeting “Ext.Button”, with “tap” event
  2. Set the controlQuery to “[action=delete]”
  3. Set the fn to “onDelete”
  4. Add the following code:
var me = this;
var form = this.getUserForm();
var record = form.getRecord();

record.erase({
    success: function()
    {
        record.stores[0].remove(record);

        me.getMainView().pop();
    }
});
  1. Finally, save the project, and view the application in the browser by going to http://localhost/UserAdmin/app/app.html