Video Tutorial: Generating a Sencha Touch Application

7 min read

Originally published June 05, 2014

Creating a video tutorial has been in my pipeline of things to do for a while and now I've finally created the first in what will hopefully be a long series of new tutorials. In this tutorial I cover how to use Sencha Cmd to generate a new Sencha Touch application and walk through some of the automatically generated code.

My apologies for the less than exciting topic matter in the video, it's a very basic tutorial. It was a good topic and short enough for me to get my feet wet though, and get over the weirdness of talking to myself. There will be many more to come in the future as well, I plan on going back and recording videos for some tutorials that I have posted already and some completely new ones. I'll do my best to create both a text based and video tutorial wherever possible. Anyway, I hope you enjoy it and let me know any feedback or suggestions you have.

Video Transcript

Hello everyone, and welcome to my first Sencha Touch video tutorial. I thought I'd start off with something really simple to begin with and just create a new Sencha Touch app. A lot of you probably already know how to do this but I thought I'd start with the basics.

I'm going to assume that you already have Sencha Touch installed and ready to go, if not you can just look up a simple tutorial on Google. There's plenty of stuff out there that walk you through how to get everything set up.

To start off with let's open up the Command Prompt and create out first application. So, to run the Sencha Touch commands you're going to have to change your directory into your Sencha Touch installation first. To do that, I'm going to change my directory – if you're not familiar with Command Prompt you can use 'cd' to change into different directories.

Now I want to run the following command:

cd c:\xampp\htdocs\touch-2.3.1```

_So now to generate the app all I have to do is run this command, which is:_

sencha generate app ExampleApp ../ExampleApp```

'ExampleApp' specifies the name of the application and '../ExampleApp' specifies the directory, in this case we are saying we want it to be in one directory above where we are now – in the 'htdocs' folder.

Now when I hit enter for that it should start running through the process for generating the application. It takes a little while but not too long though.

We will now be able to see it in the 'htdocs' folder. Let me just open it up to show you – I should be able to find one in here now called 'ExampleApp' and this is everything that Sencha Touch has generated. So I'll walk through a couple of these in a second, there's quite a lot of things in here, a lot of stuff going on… which could be a bit confusing to start off with but a lot of this you don't need to worry about too much now.

I'm going to jump into the browser now, and show you what that looks like. So to get to that you need to have a webserver (like XAMPP) installed. To access that I'm going to go to 'localhost/ExampleApp' and now that will load up the application that was just automatically generated by Sencha Touch. I'm just going to emulate it using Chrome Dev Tools to make it look a little nicer.

If you don't have it already it would be a very good idea to download the App Inspector plugin, there's some really helpful stuff in here that can help you debug your application. I'll include a link to it in the description of this video. I highly recommend you add that to your Chrome installation. So you can see right now, we've got a pretty basic looking application here. We can switch between the two tabs they've got here, they even have a little video I think? Yes. Of how to get started with Sencha Touch. Probably a lot like this one actually I can't remember watching it.

So now we can take a look at that in our code editor, just give me a second to open that up. Ok, so I'm using Sublime Text 2 – really good text editor, really cheap too I think it was $70 so I really recommend looking into that if you don't already have a favourite text editor that you use. But of course, you can just use anything – Notepad, Notepad++ whatever you'd prefer to code with. It's probably also worth mentioning you can download something called 'Sencha Architect', which costs, I think, $399 I could be wrong – that basically is an IDE for Sencha Touch that can help you design and build your applications. If you do have the money to spend it might be worth buying that, but I do most of my development just in a normal text editor.

Let's take a look at the 'app.js' file. I'm not going to talk too much about this at the moment, but this is one of the main files. This is where you application really first gets launched, you can see here the 'Main' view. What that does – if we go into the 'app/view' folder you can see 'Main.js', if we open up that, that's what we just saw a second ago with the app we looked at in the browser. You can see here it has "Welcome to Sencha Touch 2, you've just generated a new Sencha Touch 2 project"… You'll notice we have two tab bars here – or tab buttons – you can see here we're extending the 'Ext.tab.Panel' class so this is Tab style layout but there's lot's of different layouts we can create in Sencha Touch. So we have the two tabs here one called 'Welcome' and the other called 'Get Started'. We can change these to whatever we like. Let me change that to 'Example App' and this to "Welcome to my first video tutorial". So if I save that and go back and reload the application, we can see the changes have been made there.

There's a few more interesting things to talk about here, and I'll probably leave that mainly for another video to go through it in depth, but a lot these files in here you don't need to worry about. If I just expand them all out you can sort of see how many different files and folders are sitting in here. But really the main ones you'll be editing will be this 'app.js' file, 'index.html' is an important one but you won't be editing it much at all, and the rest will be in this 'app' folder – your controllers, models, views, stores. These are the things you will be creating and editing the most. Like I said, I'll save that for another video tutorial, hopefully this can help you get your first application set up if you were having trouble with that and I'll see you next time, thanks for watching.