Sencha Touch In Action - using the book with Windows 7

I wrote this quick and un-fancy web page after my frustrations in trying to use the Sencha Touch In Action book to learn Sencha Touch.

When I wrote this, I was only up to Chapter 2.3 and stuck. I'd typed up the Hello World example, but then realised that the book didn't offer any hints about where to save the helloworld.html file, nor how to run it. In fact, I realised that the book didn't seem to actually explain how to get Sencha running under Windows (or in fact under any OS at all).

Maybe I'm not the target audience, but it seems to me that there's an awful lot missing between chapters 2.2 and 2.3.

Chapter 2.2 tells the reader to install Sencha Touch (but doesn't explain where to install it, even though the examples expect it to be in a particular place, or sometimes in a different particular place).

Chapter 2.3 then tells you to write a hello world program and run it (but doesn't explain where to put the code and HOW to run it). Opening helloworld.html with a web browser certainly won't run it without a web server running somewhere, and it seems that the book doesn't even mention that until chapter 11.

After much googling and a lot of trial and error, I came up with the instructions below (for Windows 7). Some of this is from memory, so if it doesn't work, tell me and we'll fix whatever I forgot or mistyped.

A. Install everything that Sencha needs:

  1. Download Sencha Touch Commercial from here.
  2. Install Sencha Touch Commercial into c:\Sencha on your computer.
  3. Download Sencha Cmd from here.
  4. Install Sencha Cmd into c:\Sencha on your computer.
  5. Download the Java Runtime Environment from here and install it.
  6. Download the current stable version of Ruby from here.
  7. Install Ruby into c:\Ruby on your computer.

B. Install Microsoft IIS (Internet Information Services):

IIS probably isn't already installed on your computer, so install it like this:

  1. Open the Windows Control Panel and click on the Programs heading.
  2. Click on Turn Windows features on or off.
  3. Tick the checkbox next to Internet Information Services to select it.
  4. Click on the OK button to install IIS.
  5. When the installation is complete, close the Control Panel.

C. Configure IIS to handle json

  1. Type IIS into the search field in the Windows Start Menu.
  2. Using the link that was found, run IIS Manager.
  3. Double-click on the MIME Types icon.
  4. Right-click somewhere on the MIME Types screen and select Add from the menu that pops up.
  5. In the File name extension field, type .json
  6. In the MIME type field, type application/json
  7. Click on the OK button to save the new MIME type.
  8. Close IIS Manager.

D. Copy Sencha Touch to where it needs to be for IIS

  1. Open Windows Explorer and go to the C:\inetpub\wwwroot folder, which is where IIS (Internet Information Services) stores its files.
  2. Create a js sub-folder.
  3. Go to the c:\Sencha folder and copy everything in it to the C:\inetpub\wwwroot\js folder.
  4. After copying is finished, you can delete the following folders:
    c:\inetpub\wwwroot\js\builds
    c:\inetpub\wwwroot\js\docs
    c:\inetpub\wwwroot\js\examples
  5. Close Windows Explorer.

E. Install Google Chrome

If you don't already have the Google Chrome browser installed, download it from here and install it now.

F. Set up a folder for your project

  1. Create a Sencha folder in your c:\My Documents folder.
  2. In this Sencha folder, create a sub-folder for each project as you create the project. The first program is the HelloWorld project, so create a HelloWorld sub-folder and store the helloworld.html file from section 2.3 of the book in that folder.
  3. In the helloworld.html file, change the lines that refer to sencha-touch.css and sencha-touch-debug.js so that they look like the lines below. This is because the Sencha files are in a different place to the code in the book:
    <link rel="stylesheet" href="/js/sencha/resources/css/sencha-touch.css"" type="text/css">
    <script type="text/javascript" src="/js/sencha/sencha-touch-debug.js"></script>
        

Note for later: To create other projects, all you need to do is substitute the name of your new project for HelloWorld in the steps above, and continue with the steps below.

G. Use Sencha Cmd to put everything you need into the right places in your project sub-folder

  1. Open a command prompt and CD to the HelloWorld sub-folder that you just created.
  2. Run the following command (the . at the end is important):
    sencha -sdk c:\Sencha generate app HelloWorld .
  3. The above command may take a long time to finish. This command puts all the files you need into the right places in your project sub-folder.
  4. Close the command prompt.

H. Configure IIS (Internet Information Services) for the project

  1. Type IIS into the search field in the Windows Start Menu.
  2. Using the link that was found, run IIS Manager.
  3. In the Connections list on the left side of the screen, right-click on Default Web Site and select Add Virtual Directory.
  4. In the Alias field, type the program name, which is HelloWorld in this example.
  5. In the Physical Path field, select the sub-folder that you created for the project (c:\My Documents\Sencha\HelloWorld).
  6. Close IIS Manager.

I. Run your project

  1. Open Google Chrome and type in the following URL:
    localhost/HelloWorld/helloworld.html
  2. Google Chrome should now show your Hello World project.

No doubt as I get further into the book, I'll find that there are other things that are unstated or equally unclear. I'll try to keep this page (or others like it) up to date with my solutions.

Regards,
Peter Jetson
18-Jun-2014