Monday, July 16, 2012

Sencha Touch 2: The Basics [Part 1]

Hi there again, I'm back on posting!
So, lets get to the basis shall we?

We'r going to build a project from command line first, to generalize the starting experience. You'll need Sencha Touch 2 SDKSDK Tools, a HTTP server (such as WAMP or XAMPP) and Google Chrome or Safari for debug.

Extract your SDK to the root of your HTTP server and install SDK Tools, this will add a PATH to your system variables so you can run 'sencha' commands, to check if its working open a Terminal and do the following:

$ cd ~/webroot/sencha-touch-2.0.0-gpl/
$ sencha
Sencha Command v2.0.0 for Sencha Touch 2
Copyright (c) 2012 Sencha Inc.

If you see this output, everything is set up ok.
Now we can create projects using this command line, the 'sencha generate' command does all that and builds up an autoloader:

$ sencha generate app GS ../GS
[INFO] Created file /Users/(...)/Projects/sencha/GS/.senchasdk
[INFO] Created file /Users/(...)/Projects/sencha/GS/index.html
[INFO] Created file /Users/(...)/Projects/sencha/GS/app.js

This will generate an (not so empty) new project with all the dependencies extracted and included in the main file. It also provides a preloader with css3 animation running on 'fly'.

With your chosen browser go to 'localhost/GS/' and you should see this:

The filesystem

In the '/GS/' directory you should see something like this:

App - Here are all your application files, all your code should be in here (and ONLY in here).
app.js - Main JavaScript file, every system call comes from here first.
app.json - Config file.
index.html - This is the file that the wrapper or browser will load automatically, so this should call the SDK and your APP main JavaScript file.
packager.json - Config file used to package your application in a native format.
resources - All CSS, images and application related files should be places in here.
sdk - Sencha Touch 2 SDK files, dont change this.


Now lets change some titles, and see how easy that can be in ST2:

Open 'app/view/Main.js', this is your main view at the moment. It contains all the content that you see in this example application.

Go to line 10 and change it to this:

title: 'Home Tab'

...line 19

title: 'Woohoo!'

...lines 22 to 26

html: [
    "I changed the default <b>HTML Contents</b> to something different!"

And refresh your browser.
There! This is how you debug your ST2 applications, you dont need to package it to a mobile device or a mobile emulator to test minor changes in the code. If it works on a computer browser it should work on a mobile one (or even a webkit wrapper).

I'll be posting PART2 shortly, stay tooned.


No comments:

Post a Comment