PhoneGap By Example
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

Generating the application

Let's try some of the Sencha Cmd features and generate the Travelly application. First of all, we should change our current directory to Sencha Touch SDK and run the Sencha generate command there:

$ cd /Development/touch-2.4.1
$ sencha generate app Travelly ~/Projects/phonegap-by-example/sencha-travelly

The same result can be achieved without changing the directory to the SDK, but passing an additional argument within the command:

$ sencha -sdk /Development/touch-2.4.1 generate app Travelly ~/Projects/phonegap-by-example/sencha-travelly

Where:

  • /Development/touch-2.4.1 is the directory where you unzipped the Touch SDK
  • The generate command is used to generate the appropriate part of the application; in our case, it is entire application
  • Travelly is the name of our application
  • ~/Projects/phonegap-by-example/sencha-travelly is the path where we want our application to be generated

There is a new sencha-travelly folder created with the following file structure:

├── app
├── app.js
├── app.json
├── bootstrap.js
├── bootstrap.json
├── build
├── build.xml
├── index.html
├── packages
├── resources
└── touch

Where:

  • index.html: This is the page from where our application will be hosted.
  • app: This is the main application directory. In general, it is a collection of Models, Views, Controllers, Stores, and Profiles, which are explained here:
    • Model: This represents the type of data that should be used/stored in the application
    • View: This displays data to the user with the help of inbuilt Sencha UI components/custom components
    • Controller: This handles UI interactions and the interaction between the Model and the View
    • Store: This is responsible for loading data into the application
    • Profile: This helps in customizing the UI for various phone and tablets
  • app.js: This is the main JavaScript entry point for our app. It contains the following elements:
    • The app name, and references to all the models, views, controllers, profiles, and stores.
    • The app launch function that is called after the models, views, controllers, profiles, and stores are loaded. The app launch function is the starting point of the application, where the first view gets instantiated and loaded.
  • app.json: This is the configuration file for our app.
  • bootstrap.js: This file should not be edited. It is provided to support global includes and other.
  • bootstrap.json: This file should not be edited. It is a combination of contents from app.json and all the required package's package.json files.
  • build: This is a folder where Sencha Touch places the built application.
  • build.xml: This is the configuration file for the build process.
  • packages: This folder serves as the storage of all packages used by the applications (or other packages) in the workspace. We will not work with packages for now.
  • resources: This is a directory, and it contains images, CSS, and other media assets.
  • touch: This is a directory, and it contains the Sencha Touch framework files.

You might be interested in why we generated the application under the sencha-travelly folder while we already have the travelly folder with a configured PhoneGap project structure. Sencha Touch already has a good integration with PhoneGap and with Sencha Cmd. So, we will explore it on a new, clear project.

We can easily do this with the following command:

$ sencha cordova init com.cybind.travelly Travelly

Where:

  • com.cybind.travelly: This is a bundle identifier of our application. Remember that we entered the same in Xcode in Chapter 1, Installing and Configuring PhoneGap.
  • Travelly: This is the name of our application for our packaged application.

You will notice that in root folder of our application, we got the cordova subfolder with the following content:

├── config.xml
├── hooks
│  └── README.md
├── platforms
├── plugins
└── www
    ├── css
    ├── img
    ├── index.html
    └── js

It is exactly the same basic Cordova application that we generated in Chapter 1, Installing and Configuring PhoneGap. Only our platforms folder is still empty. Let's fix it.

Just open the app.json file in a text editor, find section builds in it, and uncomment the row with platforms list. So, your builds section will look something like this:

"builds": {
   "web": {"default": true},
   "native": {
       "packager": "cordova",
       "cordova" : {
           "config": {
               "platforms": "ios android",

               "id": "com.cybind.travelly",
               "name": "Travelly"
           }
       }
   }
}

Here, you can see that by default, the build for Web is turned on, and as a packager, Sencha Touch uses Cordova. Also, in the config section, you can see the id and name properties, which we got from our cordova init command.

Now, we can run our application in iOS and Android emulators simply by executing this command:

$ sencha app build -run native

In the preceding command, we specified that we should build our application first and run the native application only after this. Here is a step-by-step working of the command:

  1. Build the Sencha Touch web application.
  2. Get information about the available platforms from the preceding config section.
  3. Generate projects for these platforms.
  4. Copy the built web application into the platforms' web folders:
    • cordova/platforms/ios/www for iOS
    • cordova/platforms/android/assets/www for Android
  5. Start the default native emulator or device for each platform; we already configured them in Chapter 1, Installing and Configuring PhoneGap.
  6. Deploy our Sencha Touch application onto every running device.
  7. Run our application.

As a result, we will see something similar to this screenshot:

Generating the application

Tip

You might get the following error when running an iOS simulator:

Error: ios-sim was not found. Please download, build, and install version 3.0 or greater from https://github.com/phonegap/ios-sim into your path. Or npm install -g ios-sim using Node.js: http://nodejs.org/.

In this case, we need to install the ios-sim package, as presented earlier. Just run the npm install -g ios-sim command in the terminal. Repeat the build command again.

This is kind of cool, right? Not much development, but we got the basic Sencha Touch application running on our emulators. I agree that there are a lot of configuration aspects, but it's worth getting everything configured for effective development.

Now, let's go deeper into the Sencha Touch framework and prepare the web side of our application.

上一章目录下一章