Creating a skeleton application

Now, let's switch from design to code and create a skeleton Sencha Touch application. This will show us that the framework is functional and give us a base to start converting our workflows and wireframes into code.

Generating files with Sencha cmd

Using what you learned from setting up your development environment, switch to the todo-app directory that you used to create a repository. Now, generate a new application in this directory:

$ sencha -sdk /path/to/sdk/touch-2.4.1/ generate app TodoApp .

This will create a skeleton application with all the files needed. Now, verify that everything works as expected. You'll want two command windows open: one for the web server and the other for any commands that you need to run. In the first tab, start the web server:

$ sencha web start

In the second tab, preview the page in your browser:

$ open http://localhost:1841

If everything worked correctly, you should see the following sample app in your browser. You may need to toggle the device mode first.

Welcome app

Note

Use the GitHub client to commit your latest changes. Give the commit a summary (and description, if you like), then click on Commit to master.

If you click the History tab, you can see your first commit. Click on Publish to upload this commit to GitHub as well. As we proceed, we'll prompt you to commit after completing a change. In general, it's a good habit to commit small chunks of code at frequent intervals as this makes debugging easier (and reduces the risk of lost work).

Creating the main view

Now, let's rip out the sample views and build our own. These views won't be very interactive but enough to show the rough shape of the final app.

In Sublime, open the todo-app folder. This will expose all the files under this folder for easy access in Sublime.

Now, open todo-app/app/view/Main.js. This file contains the code that describes the views in the skeleton application. Replace the existing code with the following:

Ext.define('TodoApp.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
      'Ext.TitleBar'
    ],
    config: {
      tabBarPosition: 'bottom',

      items: [
        {
          title: 'List',
          iconCls: 'home'
        },
        {
          title: 'Create',
          iconCls: 'action'
        },
        {
          title: 'Edit',
          iconCls: 'action'
        }
        ]
    }
});

Tip

Downloading the example code

You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Refresh your browser. This code created three empty panels named List, Create, and Edit, which you can open by clicking their respective icons in the toolbar. The toolbar is temporary until we wire these views to each other directly:

View switcher

Adding the list view

Now, let's recreate the wireframes by adding controls to each panel in turn. First, edit the list panel to include the following code:

{
    title: 'List',
    iconCls: 'home',

    xtype: 'list',

    store: {
      fields: ['name'],
      data: [
        {name: 'Eat food'},
        {name: 'Fetch slippers'},
        {name: 'Sit/stay'},
        {name: 'Chew bone'},
        {name: 'Go for a walk'},
        {name: 'Chase the mail carrier'},
        {name: ''},
        {name: 'Deleted items'},
        {name: 'Play with Sparky'},
        {name: 'Howl at the moon'},
        {name: 'Chase the cat'}
      ]
    },

  itemTpl: '{name}',

  items: [
    {
      docked: 'top',
      xtype: 'titlebar',
      title: 'Things to do',
      items: {
        align: 'right',
        text: 'Add'
      }
    }
  ]
}

This should result in the following screen:

Mocked list screen

Adding the create view

Now, edit the create panel with the following code:

{
  title: 'Create',
  iconCls: 'action',

  items: [
    {
      docked: 'top',
      xtype: 'titlebar',
      title: 'Add item',
      items: {
        align: 'right',
        text: 'Save'
      }
    },
    {
      xtype: 'formpanel',
      height: '100%',
      scrollable: true,

      items: [
        {
          xtype: 'fieldset',
          title: 'Description',
        items: {
          xtype: 'textfield',
                    name: 'description'
          }
        },
        {
          xtype: 'fieldset',
          title: 'Image',
          items: {
            xtype: 'button',
            text: 'Select image…'
          }
        },
        {
          xtype: 'fieldset',
          title: 'Location',
          defaults: {
            labelAlign: 'right',
            labelWidth: '240px',
            xtype: 'radiofield',
            name: 'location'
              },
          items: [
            {value: 'here', label: 'Current location'},
            {value: 'home', label: 'Home'},
            {value: 'work', label: 'Work'}
          ]
        }
      ]
    }
  ]
}

This should result in the following screen:

Mocked add screen

Adding the edit view

Finally, assign the following (nearly identical) code to the edit panel:

{
  title: 'Edit',
  iconCls: 'action',

  items: [
    {
      docked: 'top',
      xtype: 'titlebar',
      title: 'Edit item',
      items: {
        align: 'right',
        text: 'Save'
      }
    },
    {
      xtype: 'formpanel',
      height: '100%',
      scrollable: true,

      items: [
        {
          xtype: 'fieldset',
          title: 'Description',
          items: {
            xtype: 'textfield',
            name: 'description',
            value: 'Chase the mail carrier'
          }
        },
        {
          xtype: 'fieldset',
          title: 'Image',
          items: [
            {
              xtype: 'panel',
              width: '100%',
              height: 156,
              style: 'background: #AAAAAA'
            },
            {
              xtype: 'button',
              text: 'Remove image'
            }
          ]
        },
        {
          xtype: 'fieldset',
          title: 'Location',
          defaults: {
            labelAlign: 'right',
            labelWidth: '240px',
            xtype: 'radiofield',
            name: 'location'
          },
          items: [
            {value: 'home', label: 'Home', checked: true},
            {value: 'work', label: 'Work'},
            {value: 'other', label: 'Other'}
          ]
        }
      ]
    }
  ]
}

This should result in the following screen:

Mocked edit screen

When you start the application, you may notice a few warning messages in the developer console about missing requires. Add these requires to Main.js under the xtype attribute:

requires: [
  'Ext.TitleBar',
  'Ext.dataview.List',
  'Ext.form.Panel',
  'Ext.form.FieldSet',
  'Ext.field.Radio'
],

Committing your changes

At this point, you have mocked the wireframes in code. They don't do anything yet, but you can toggle through the three main views with the bottom tab bar.

Note

Now that the application is in a working state, commit these changes to Git before proceeding.