Getting Started with Sencha Touch

What is Sencha Touch?

Sencha Touch is a high-performance HTML5 mobile application framework. You can use Sencha Touch to produce a native-app-like experience inside a browser or in a hybrid shell. Sencha Touch supports Android, iOS, Windows Phone, Microsoft Surface Pro and RT, and BlackBerry devices.

Required Software

1. Download and unzip Sencha Touch. You can unzip the software to any directory.

2. Sencha Touch requires

   • Chrome
   • Safari
   • On a mobile device, you can use Chrome, Safari, or Internet Explorer 10 or 11.

3. Java Runtime Environment version 1.7. Sencha Cmd is written in Java and needs the JRE to run. Note: If you are building an Android app using Windows, you must install the Java SDK. You can build an iOS app under Windows with the JRE, but not an Android app.

4. Ruby to create the compiled CSS used by Touch.

• Windows: Download Ruby from rubyinstaller.org. Download the RubyInstaller .exe file and run it.

• Mac: Ruby is pre-installed. You can verify its presence with the ruby -v command.

• Ubuntu: Use sudo apt-get install ruby2.0.0 to download and install Ruby.

1. Sencha Cmd.
   Sencha Touch 2.3.1 requires Sencha Cmd 4.0.1, 4.0.2, or later. To check that you have correctly installed Sencha Cmd, type the sencha command, for example:

    $ sencha
    Sencha Cmd vn.n.n
    ...

If you are running the IIS web server on Windows, manually add application/x-json as a MIME Type for Sencha Touch to work properly. For information on adding this MIME type see this link.

Installation

Extract the Sencha Touch download zip file, which can be in any directory.

Start your web server. If using the Sencha Cmd web server, change directory to the location from which you want to serve your application, and start the Sencha Cmd web server with the sencha& web start command. To stop the web server, press CTRL+C, or open another command line window and type sencha web stop.

If you are using another web server such as XAMPP (a pre-configured Apache HTTP server), create an app directory where your web server expects to find apps. In the case of XAMPP, it’s the XAMPP_install_dir/htdocs directory.

Generating Your First App

Now that you have Sencha Touch and Sencha Cmd installed, you can generate an application.

Choose or create a directory where your application will reside, change to that directory, and issue the following command:

$ sencha -sdk /path/to/touch generate app MyApp

Where:

1. /path/to/touch is the directory where you unzipped the Touch software.
2. MyApp is the name you give your application.

This generates a skeleton Sencha Touch application namespaced to the MyApp variable and located in the current directory.

The skeleton app contains all the files you need to create a Sencha Touch application, including the default index.html file, a copy of the Touch SDK, the CSS file, and images and configuration files for creating native packages for your app.

You can verify if your application has generated successfully by opening it in a web browser. If you extracted the SDK to your webroot folder, navigate to http://localhost/MyApp. If you are using the Sencha Cmd web server, you can access served applications with the http://localhost:1841/ URL.

Note: If this command fails in Linux, re-install Sencha Cmd as a normal user versus installing with root privileges.

Explore the Code

The following listing provides a short description of each file and directory, the complete list of the generated files can be found in the Sencha Cmd documentation:

• app - The directory containing the Models, Views, Controllers, and Stores for your app.
• app.js - The main JavaScript entry point for your app.
• app.json - The configuration file for your app.
• index.html - The HTML file for your app.
• packager.json - The configuration file used by Sencha Cmd for creating native packages for your application.
• resources - The directory containing the CSS and the images for your app

Open app.js, the main entry point for your app, in your editor.

The launch function is the entry point to your application. In the default application, hide the application loading indicator, and create an instance of our Main view and add it to the Viewport.

The Viewport is a Ext.layout.Card Card Layout to which you can add application components. The default app adds the Main view to the viewport so it becomes visible on the screen.

Look at the code inside the Main view.

Open app/view/Main.js in your code editor and change a title line to:

title: 'Home Tab'

Then change another line as follows:

title: 'Woohoo!'

Also, change lines as follows:

html: [
    "I changed the default **HTML Contents** to something different!"
].join("")

Refresh the app in your browser to see the effects of your changes.

Next Steps

Follow the First Application guide, which builds on this guide, and helps you create a simple but powerful app in around 15 minutes.

Note: As a good practice, when you create an application, keep a copy of your app.js file as Sencha Cmd also updates this file.