Secha Ext JS

Ext JS is an immense step forward in the evolution of an amazing framework.

How to create OOP Smartphone or Tablet with Sencha Touch Framework

Leave a comment

 

sencha-large

Sencha Touch is an OOP JavaScript framework that makes it easy to build mobile web applications that look and feel native on iPhone, Android, and BlackBerry touch devices. To find more you can take a look at Sencha Touch website.

 

Required Software

  1. Download and unzip Sencha Touch. You can unzip the software to any directory.
  2. Sencha Touch requires Chrome or Safari. On a mobile device, you can use Chrome, Safari, or Internet Explorer 10 or 11.
  3. Download and install Sencha Cmd. Sencha Touch 2.3.1 and later requires Sencha Cmd 4.0.1, 4.0.2, and later. To check that you have correctly installed Sencha Cmd, type the sencha command, for example: 
    # sencha
Sencha Cmd vn.n.n
...
  4. 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.
  5. 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.

Create a Starting Environment

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 starting Sencha Touch application namespaced to the MyApp variable and located in the current directory.

The starting 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.

What We Are Creating

We are creating a simple mobile web app to use for a company’s mobile site. The app includes a home page, a contact form, and a simple list that fetches Sencha’s recent blog posts and allows visitors to read them on a mobile device.

senchatouch2