Sencha Touch is a HTML 5 framework that allows you to create cross platform mobile apps. When used with cordova you can build HTML apps that look and feel like a native app allowing you to cut down in your development time and budget. The frameworks learning curve is a little steep but once you get it down, development is quick and painless.
Lets get started
To get started we are going to need to download a couple things and get our environment set up. It might seem like a lot, but once you are set up you should be able to create Touch projects quick and easy. Here is what we need to download:
- The Sencha Touch SDK http://www.sencha.com/products/touch/download/ . This includes great demo apps, documentation and the source code.
- Sencha Cmd http://www.sencha.com/products/sencha-cmd/download. Cmd is a console drive toolbox that allows you to scaffold out a new project, to minifying and deploying your application to production.
- Compass http://compass-style.org/install/. Compass is a sass framework that sencha touch builds it themes and styling off of.
- MAMP http://www.mamp.info/en/downloads/. You will need to run your project on a local web server, you can use anything but I prefer MAMP. Sencha Cmd v4 now comes with a web server, for more info check outhttp://docs.sencha.com/cmd/4.0.0/#!/guide/command-section-sencha-cmd-web-server.
Now that we have everything downloaded, install MAMP to get your server up and running, and install sencha cmd. Once sencha cmd is installed run the following cmd:
You should see something like this in your terminal:
This means sencha cmd is installed correctly and you we are getting close to creating our app.
Next take your sencha touch sdk download and unzip its contents into you web server directory, put mine under a touch directory. This will allow you view documentation and demo apps locally on your machine, as well as a good getting started guide http://localhost/touch/SETUP.html.
Now that everything is set up lets build our app! We will be using sencha cmd to scaffold out the app. The command we are going to use is:
sencha -sdk /path/to/sencha-touch-sdk generate app MyApp /path/to/www/myapp
With my setup this is what my command will look like for my app called PowPowPowerball
sencha -sdk /Applications/MAMP/htdocs/touch generate app PowPowPowerball /Applications/MAMP/htdocs/PowPowPowerball
Take a look inside your project and you will see what sencha cmd has built out. Below is the basic layout of the project.
.sencha/ # Sencha-specific files (for example configuration) app/ # Application-specific content sencha.cfg # Configuration file for Sencha Cmd plugin.xml # Plugin for Sencha Cmd workspace/ # Workspace-specific content (see below) sencha.cfg # Configuration file for Sencha Cmd plugin.xml # Plugin for Sencha Cmd touch/ # A copy of the Sencha Touch SDK cmd/ # Sencha Touch-specific content for Sencha Cmd sencha.cfg # Configuration file for Sencha Cmd plugin.xml # Plugin for Sencha Cmd src/ # The Sench Touch source sencha-touch-*.js # Pre-compiled and bootstrap files ... app # Your application's source code in MVC structure controller model profile store view Main.js # The main view of the application resources css app.css # The main stylesheet, compiled from app.scss sass app.scss # The Sass file which compiles to app.css above, # includes Sencha Touch theme by default icons # Application icons for all mobile devices # When replacing these default images with your own, # make sure the file name and the dimension stays exactly the same ... loading # Application start-up screens for iOS devices # Similarly to icons, make sure the file names and # dimension stays the same ... images # Put other images used by your application here index.html app.js # Contains application's initialization logic app.json # Application descriptor packager.json # Configuration for native packaging
Thats it, now get started building out your app!