Using Netbeans IDE With Sencha Touch

After testing several IDEs (including but not limited to EclipseAptana Studio 3 and WebStorm), my personal favorite is stillNetbeans and this tutorial will walk you through harnessing the IDE’s code completion and set up a Sencha Project.

Step 1 : What you need to download.

a) Download the Netbeans 7.1 IDE (I chose the complete package 210MB file since it contains everything you could possibly need

b) Download the Sencha Touch library from here. Unzip the file (if necessary) and rename the folder touch.

Step 2 : Making a new project.

After Installing the IDE. Start the application and choose New>Java Web>Web Application. Press the Next button. Name the app “SenchaApp”. Choose the project location. Press the Next button.

Step 3 : Choosing a server.

Choose the Server you wish to run for your project.

Mac OS X 10.5 (Leopard) OS and the OS versions after that come with both Apache 2.2.6 and  PHP 5.2.4 preinstalled, but they’re not enabled by default. In order to enable  Apache and PHP you can follow the instructions in the following post :

<TO DO ADD POST LINK HERE >

However, you can also opt to use the Tomcat or GlassFish servers bundled with  NetBeans here. Select one of the servers and click the Finish button.

 Step 4 : Creating the Sencha App Structure

a) Delete the current index.jsp page and replace it with your own index.html page with links to all your Sencha files

b) Create the app folder, views folder, models folder, controllers folder in NetBeans to add your javascript files into.

c) Add the previously downloaded “Sencha Touch” or “touch” folder into the  Web Pages folder in hierarchical line with the index.html page and the app folder.

d) If needed add the stylesheets folder for additional css files into your Web Pages folder.

We will add the necessary javascript files in a later step.

For further information about the MVC Sencha Application structure refer to the API documentation. UTSL 🙂

The general folder structure followed in Sencha Touch Applications has been shown in the screen  shot below with the folders mentioned above.

Step 6 : Harnessing NetBeans Code Completion :

a) Right click on the SenchaApp application and select Properties from the drop down menu

b) Under the Libraries menu, choose “Add Libraries” and from the window that opens click “Create…”

c) Name the Library “Sencha_Touch” and choose “Class Library” from the drop down.

d) Under the “Classpath” tab, click on “Add JAR/Folder” and select the “touch” folder previously downloaded.

e) Click “OK” and choose the newly created “Sencha_Touch” library.

To check if you’ve added code completion correctly, create an app.js file in the app folder. Type Ext followed by a “.” — If the steps above were followed correctly, the code completion should work.

Step 7 : Create your Sencha Touch application

A tutorial for your First Sencha Touch Application can be found on this site and followed if you are new to the framework.

Step 8 : Run the Application.

Hit Run. Your application should start in the default browser with the url :  localhost:8084/SenchaApp/
Advertisements

7 thoughts on “Using Netbeans IDE With Sencha Touch

    • Hi Chathura
      Did it work for create and define methods also. Because for me when I type Ext. + (ctrl+space) i get a list of Ext properties and methods. But some are missing such as create() , define() , … etc

      • To be honest, I haven’t used Netbeans to develope Sencha in a long long time. I find it too heavy. I’ve started preferring Sublime Text 2 with Tomcat. If needed, I can create a post on that 🙂

          • Actually, with the new Sencha Touch SDK/Command Line tools in Sencha Touch 2, I’ve found its much easier to develop the entire app using Sublime Text and Tomcat. If there’s a demand for that, I can add in a post for it.

Leave a message :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s