Sencha Touch 2 Getting Started: creating one of the practical weather applications

Original title: Getting Started with Sencha Touch 2:build a Weather Utility App (Part 1)

Original address: http://www.sencha.com/blog/getting-started-with-sencha-touch-2-build-a-weather-utility-app-part-1/

Author:Lee Boonstra
Lee is a technical trainer at Sencha. She ' s located in Amsterdam and have experience in both front-end and back-end development. Lee spends her spare time developing web and mobile apps. She's writing a cookbook for O ' Reilly about Sencha Touch.

In this three-part Sencha Touch tutorial, you will create a simple utility application that I need an umbrella to load weather information from the Web service provided by worldweatheronline.com. Based on the weather code, the application can predict the need to take an umbrella.

In this tutorial, you need to write code for your application. In the next tutorial, the focus is to create a cool Sencha touch theme and how to use PhoneGap to convert your application to a local application.

This tutorial has the following requirements:
Sencha Touch 2.3 or later Sencha CMD 4.x a modern browser editor

Here are some additional resources:
You can view the application here and run it.
The final code can be downloaded here.
There are some good things to do with tutorials--controllers and features

build and run the sample application

The first thing to do is to create a Sencha folder on your hard disk. Download Sencha Touch 2.3 and unzip to the newly created Sencha folder. Now, to create a folder for the application, I'll name it Dinumu, which is the first letter combination of "do I need My Umbrella".

Now, at the command line (Command prompt for Mac OS x terminal), go to the Sencha Framework folder (CD sencha/touch-2.3.x) and run the following command to generate the directory structure for Sencha touch MVC:

[HTML] view plain copy Sencha generate App-name Dinmu-path. /dinmu

The above command will generate a complete MVC structure for the application "I need to bring an umbrella". Its namespace is Dinmu, which is the prefix for all classes. Check the directory structure that you have created.

You can now start the Web server from the command line-using the Sencha folder as the path. (If you want to use an existing Apache server, you can skip this step.) In Mac OS X, you may need permission to execute the following command: If a permission error occurs while running, you need to prefix sudowith the command.

[plain] view plain copy Sencha FS web-p start-map/path/to/sencha/folder/
The above command will start the built-in jetty server, because you need to ensure that the CLI window opens to keep the server running, so you need to open a new CLI window to execute the following command.

Here's a test of the generated Sencha touch application. Open a modern browser (such as Google Chrome Safari) and enter: HTTP://LOCALHOST/DINMU, you will see the Sencha demo application interface shown in the figure below, with two demo pages in the bottom tab panel:

Data Package

The next step is to build the model to define the data. The settings that you need to save in your application include: ID, City, Country (country), units (units), and geolocation (geo-targeting). This data will be defined as a field of the model. Sencha cmd can be used to build this model. Within the Dinmu folder, run the following command:

[plain] view plain copy Sencha generate model Setting Id,city,country,units,geo:boolean
The above command creates a model for the application. The command contains the class name Setting, which contains all the field names used to define the field in the final string. Check the directory structure again.

Open App/model/setting.jsin the editor. Note that Dinmu.model.Setting is equivalent to app/model/setting.js. This is the setting model to be implemented, and Sencha CMD defines a setting model class. It derives from the Sencha Touch Framework's model implementation Ext.data.Model, and contains all the fields and field types.

The field ID will be the identity of each model record in the application. To make it appear as a unique ID value, you need to configure it. Before The fields array, add the configuration items idproperty and identifier.

[JavaScript] view plain copy idproperty: ' id ', identifier: ' UUID ',
Because you want to use the unique ID class to Sencha, you need to import (import) The class into your application, which can be implemented by requires configuration items, in requires configuration items in the Zhongtian class Ext.data.identifier.Uuid.

[JavaScript] view plain copy requires: [' Ext.data.identifier.Uuid '],
The next step is to create some validation (validations) for the model. After the fields array, create an array of validations that contains validation objects that verify whether the field contains data.

[JavaScript] view plain copy validations: [{type: ' Presence ', field: ' City ', message: "Please       Provide a city. "}, {type: ' Presence ', field: ' Country ', message:" Please provide a country. " }   ],
Because you want to keep your local settings data on the device, the last step is to add a client agent.
Local Storage (localstorage) will be used here. The local storage agent ensures that all data is saved to the browser's local storage. After the validations array, add the following code to define the proxy object:

[JavaScript] view Plain copy proxy: {type: ' Localstorage ', id: ' Weathersettings '}

View Components