Hands-On Sencha Touch 2 (2014)

Part I. Sencha Touch Essentials

Chapter 2. Installation

To start developing Sencha Touch codes, you will need to install the following:

§ An integrated development environment (IDE) or text editor

§ Modern browser

§ Ruby

§ Java

§ Sencha Cmd 4 or higher

§ Web server

§ Sencha Touch 2.3

Optionally, there’s an extra set of software that might come in handy. In this chapter, I will explain why you might want these:

§ Sass and Compass

§ NodeJS

§ Adobe PhoneGap and Apache Cordova

§ Development SDK

This might look like a long list, but honestly it’s not that complicated and you might have already installed some of them. Let’s take a look at each item, one by one.

Some steps require that you work with the command-line interface (CLI):

§ Windows users can open the Command Prompt (Start → Run), type cmd, and press OK.

§ Mac users can open the Terminal Applications → Utils → Terminal.

Install the Required Software

Let’s start with the essential software.

IDE or Editor

You will need an editor that has JavaScript syntax highlighting, validation, and formatting to develop Sencha code. I also recommend that your editor include JavaScript syntax checking—for example, JSLint or JSHint. Feel free to use the editor or integrated development environment (IDE) of your choice. Popular editors include Sublime Text, WebStorm, Aptana/Eclipse, and NetBeans. If you have no preference, use one of my favorites:

§ Sublime Text for its simplicity

§ WebStorm because it has code completion for Sencha frameworks

TIP

Are you deeply in love with Sublime Text like I am? I have created some Sencha Ext JS and Touch code snippets/templates, available on Github. You will need to have package control installed.

Modern Browser

You will need a modern browser to preview Sencha Touch applications on your development machine. Modern browsers include Google Chrome, Safari, and Internet Explorer 10 (or higher). Currently, Mozilla Firefox 21 would work too, although it has experimental support.

If you have no preference, use Google Chrome.

TIP

There are some really great Google Chrome browser extensions online or currently in development that can help you with developing Sencha code. These include Bruno Tavares’s Sencha Inspector and Illuminations.

Ruby

Sencha Cmd requires Ruby to compile Sass to CSS for your Sencha Touch app builds. Make sure Ruby is available to your class PATH variables. Here are some helpful tips:

§ Ruby is automatically installed for Mac OS X users.

§ Windows users can download the RubyInstaller .exe file and run it.

§ Unix users can use sudo apt-get install ruby2.0.0 to download and install Ruby.

Java

Sencha Cmd is written in Java and needs the Java Runtime Environment 1.7 or Java SE Development Kit 7 to run (these are known as the JRE and JDK 7, respectively). JDK 7 is also used for running the command sencha app watch, which compiles the Sencha Touch application and your Sass stylesheet in the background every time you click Save. If you don’t need this feature, and you want to build your application manually (with sencha app build) or compile your Sass themes with compass (compass watch .), then the JRE is sufficient.

NOTE

Be aware that JDK 7 disables Java in Google Chrome for Mac OS X users. Java 7 runs only on 64-bit browsers, and Chrome is a 32-bit browser on Mac OS X. In addition, note that installing the JDK also installs the JRE. The one exception is that the system will not replace the current JRE with a lower version. To install a lower version of the JRE, first uninstall the current JRE version.

Sencha Cmd

To develop Sencha Touch code, you will need to have a copy of Sencha Cmd on your machine. With Sencha Cmd you can start scaffolding a new project, minifying, and deploying your application to production.

This book will make use of version 4.x. or higher. If you have the old Sencha SDK tools installed, remove them before completing this book’s examples.

Check whether you have the required version of Cmd by opening a terminal/command window and type the following command:

sencha which

Sencha Cmd not installed?

If Sencha Cmd is not installed, you’ll get a “command not found” message. If Cmd is installed, the response will list your version and install directory.

To install Sencha Cmd, download it and run the installer.

Remember where you installed the Sencha Cmd directory and the version number you are using. By default, the installation path is:

§ For Windows users: C:\Users\Me\bin\Sencha\Cmd{cmd-vers}

§ For Mac OS X users: ~/bin/Sencha/Cmd/4 or higher

§ For Unix users: ~/bin/Sencha/Cmd/4 or higher

Wrong version of Sencha Cmd?

If Cmd is installed, but it’s an earlier version, go to the terminal/command window and type:

sencha upgrade

Once you’ve upgraded Cmd, you can close the terminal/command window, restart it, and type:

sencha

This should display all the Sencha commands and options.

Manually adding Sencha Cmd to your system variables

Did you encounter problems while installing Sencha Cmd? Or are you not seeing the sencha command on the command line, but you are sure that you installed it? In that case, you will need to add Sencha Cmd (sencha) to your classpath/system variables manually.

Windows users:

1. Navigate to Start → Control Panel → Performance and Maintenance → System.

2. In your system properties, click the Advanced tab.

3. Click the Environment Variables button.

4. Edit the classpath variable or create a new variable called classpath.

5. Add the following value and save: C:\Users\Me\bin\Sencha\Cmd\<cmd-vers>. (Make sure you are entering the correct path and version number.)

Mac users:

1. Make hidden files visible by typing the following commands in your terminal:

2. defaults write com.apple.finder AppleShowAllFiles TRUE

killall Finder

(Running these commands with FALSE will hide the files again).

3. Now open ~.bash_profile. Add the following lines and save the file:

export PATH=/Users/username/bin/Sencha/_Cmd/{cmd-vers}:$PATH

(Make sure you are entering the correct path and version number.)

WARNING

Before Sencha Cmd version 4.0.1.x, Sencha Cmd was using Ruby 1.x. When you had Ruby 2.0 installed, you couldn’t build applications with Sencha Cmd. In October 2013, Mac OS X launched the free 10.9 (Mavericks) update. This update includes Ruby 2.0. When you’re having problems building your app, and you’re running a version lower than Sencha Cmd 4.0.1.x, you need to upgrade your Cmd to the latest stable version by typing sencha upgrade from the command line, or to the latest beta version by typing sencha upgrade -b.

Web Server

You will need a web server on your development system to preview Sencha Touch applications on your development machine. Sencha Cmd comes with a built-in web server (Jetty 8.1.7), which you can use for Sencha Touch, or you can install/use your own web server.

Use the built-in web server

To start the built-in web server, run the following command from the CLI:

sencha fs web -p 80 start -map /path/to/htdocs/

Point to the folder that contains your web projects and then the touch folder, which will become the web server root.

WARNING

Mac OS X users might need to prefix the preceding command with sudo to get admin rights.

If everything works, you should see something like this in the console/terminal:

sencha fs web -port 80 start -map ~/htdocs

Sencha Cmd v4.0.1.45

[INF] Starting shutdown listener socket

[INF] Listening for stop requests on: 53194

[INF] Mapping http://localhost/ to /Users/someuser/htdocs...

[INF] Starting http://localhost

[INF] jetty-8.1.7.v20120910

[INF] NO JSP Support for /, did not find org.apache.jasper.servlet.JspServlet

[INF] started o.e.j.w.WebAppContext{/,file:/Users/someuser/sencha/}

[INF] Started SelectChannelConnector@0.0.0.0

[INF] Started http://localhost

Use a different web server

Do you have your own preference for a web server? You’re welcome to use any one you like. If you have no preference, I would advise an Apache web server, such as XAMPP.

XAMPP is an Apache distribution containing MySQL, PHP, and Perl; it’s really easy to install and use—just download, extract, and start.

Sencha Touch

Of course, you will need the Sencha Touch framework. Follow these steps:

1. Extract the framework and copy the folder to your htdocs folder.

2. Rename the framework folder to touch (e.g., htdocs/touch).

3. The framework will be available via your localhost. Test whether you can access the Sencha Touch Kitchen Sink demo (using a modern browser) via the following URL: http://localhost/touch/docs/#!/example/kitchen-sink.

Install the Optional Software

By now, you should have a working Sencha Touch environment installed. The next sections cover some additional setup instructions to make your Sencha Touch dev environment a little more powerful.

Sass and Compass

Sencha Touch makes use of Sass and Compass to style a Sencha Touch app. Sass is a preprocessor. You will need to compile Sass to CSS so the browser can understand it. Sass and Compass are included in the Sencha Cmd build process. This means when you build your application from the CLI (via sencha app build or sencha app watch), Sencha Cmd will compile the stylesheet and you will not need to install Sass or Compass separately.

However, if you would rather compile Sass by yourself (e.g., with the command compass watch .), you will need to have Sass and Compass installed on your development machine. To install both, you will need to have Ruby installed to run the following commands from the CLI:

gem install compass

gem install sass -v 3.1.1

Wait until each process is completed. It will take a few minutes before the command completes and the command prompt returns.

WARNING

Mac OS X users might need to prefix the preceding command with sudo to get admin rights.

Verify that Sass and Compass are installed with the following commands, which should prompt you with a version number:

compass -v

sass -v

Install NodeJS

When you want to make use of Adobe PhoneGap or Apache Cordova to create a native build of your Sencha Touch app, you will need to have NodeJS version 0.9.9 or higher installed.

After running the wizard, node should be available on the CLI. Type the following command on the CLI, which should output the latest version:

node -v

Install PhoneGap and Cordova

You will need to have Adobe PhoneGap or Apache Cordova installed to package your mobile apps to a native (hybrid app) build. Apache Cordova is the free, open source, community-driven version of Adobe PhoneGap. Apache Cordova requires a development kit such as XCode or Android Tools to be installed on your machine, while Adobe PhoneGap can also build via the cloud web service. To build via the cloud, you will need a (free) Adobe ID and PhoneGap account.

Make sure NodeJS is installed, and the node command is available on the CLI. Run the following command from the CLI to install Adobe PhoneGap:

npm install -g phonegap

Run the following command from the CLI to install Apache Cordova:

npm install -g cordova

WARNING

Mac OS X users might need to prefix the preceding command with sudo to get admin rights.

After a successful installation, check for the latest version to verify that PhoneGap is correctly installed and available on the CLI:

phonegap -v

cordova -v

TIP

Mac OS X users who want to create a native package for iOS, and want to test their app in the simulator, will need to install ios-sim, the CLI launcher for the iOS simulator:

sudo npm install -g ios-sim

Also, you will need to have the latest iOS Simulator up and running. Go to XCode and click the XCode → Preferences → Download tab. Update/download the latest iOS 6 simulator and CLI tools.

To create a PhoneGap account, first visit the PhoneGap build website. You will need these account details for building a PhoneGap project from the CLI. There is a free and a paid plan; both plans work the same. Next, choose how you want to log in; for CLI use, you will need to log in with an Adobe account. However, you can choose to create an account with GitHub and later hook up the Adobe ID.

phonegap remote login -u myemailadress@gmail.com -p mypassw0rd

To log out, use phonegap remote logout.

Development SDK

When you are using Apache Cordova or the local build option of Adobe PhoneGap, you will need to install the SDK of the particular device. Here are the most common options:

§ Mac OS X, with XCode 5 for iOS development

§ Android Developer Tools for Android development

§ BlackBerry 10 SDK for BlackBerry 10 development

§ Windows 8 Pro with Visual Studio for Windows Phone development

§ Tizen SDK for Tizen development

To create a native package for iOS, Windows Phone, or BlackBerry, you will also need a signed developers account. For BlackBerry this is free, but for iOS and Windows Phone you will need to pay a yearly fee. See their websites for additional information.

Do you want to set up an Android emulator? Check out Patrick Chu’s blog post on the subject. If you need help with iOS provisioning and certificates, check out Appendix A for a short and simple guide.

Summary

This chapter explained how to install the necessary software for developing Sencha Touch code. Assuming you already have an environment with an IDE/editor and your browser of choice installed, the most important pieces are Sencha Cmd and the Sencha Touch framework. Sencha Cmd requires an installation of Ruby and Java (JRE or JDK), and it includes a web server.

If you are planning to create Sass stylesheets for Sencha Touch and you want to compile these by yourself, you may install Sass and Compass separately. When you want to build a native/hybrid app of a Sencha Touch app, you can install Adobe PhoneGap or Apache Cordova on top of NodeJS, and/or the device development SDK of your choice.

For a more complete guide on how to set up your Sencha environment for different operating systems, see my blog post on the subject.

Everything ready and set? All right, now we can start diving into the Sencha Touch code!