Setup Eclipse

In this section we introduce the tools which can be used for developing web applications based on ExtJS. You can use different editors to write javascript code such as PICO, VI, gEdit, etc. I encourage you to do not use text editors, instead use an Integrated Development Environment (IDE). You can found various IDEs in the market. We propose to use Eclipse as it provides lot of plugins, which can help for debugging or coding javascript. In addition it is free.

• Using IDEs

• Install Eclipse

• Install ExtJS

• Eclipse and ExtJS

Using IDEs

Text editors are used to write text, but they are not used to write efficient code. We would like to highlight some disadvantages of the text editors:

• code quality: It is not easy to have same code style.

• missing the auto-complete feature

• it is not easy to manage the code

Advantages of the IDEs:

• code quality: Each developer can use the same template

• auto-complete feature: When you type a class name and after press a dot the IDE show the possible methods as well as a short description of the method

• easy to manage the code

• it is easy to create tasks: When required to change some code in the comment we can add //TODO and text; This will appears a Tasks list

• easy to navigate between classes. etc.

Install Eclipse

• You can download from: Eclipse IDE

• installation instructions can be found: Eclipse wiki

Install ExtJS

• download from Sencha page and un-zip it. Note if you have installed WebAppDIRAC, you can found it under WebApp/static/extjs directory.

Eclipse and ExtJS

We used the DuckQuoc’s blog to set up our Eclipse. There is an other page when you can read about how to setup Eclipse in Spket page.

We use Indigo Eclipse and Spket plugin for developing better javascript code.

Install Spket plugin:

1. Click Help -> Install New software… The following form Install form will appears:

Please give a name and use the following link: http://www.agpad.com/update/

1. Click Ok -> select all components

2. Accept the term and conditions -> Finish

3. Wait till the package will be downloaded and installed in case of warning click OK.

4. Restart Eclipse (If it will not restart automatically)

Create Spket profile for ExtJs (Configuration panel):

• Click “Eclipse” -> “Preferences…” You will see the following configuration form:

• select “Spket JavaScript Profile” and click to the New button and then type ExtJs.

  

• Click “Add Library” select ExtJs

• Click “Add Folder” you have to add the path of the ExtJs folder (more details in <https://github.com/DIRACGrid/WebAppDIRAC/wiki/_preview#wiki-extjs>` section).

Make default JavaScript profile

• In the same window (“Spket JavaScript Profile”) click on the Extjs profile and after make it default by clicking on the “Default” button.

• in the “Configuration panel” click on the “General”->”Editors”->”File Associations”

• Please select *.js and then select “Spket JavaScript Editor” and click on the “Default button”

• Restart Eclipse.

Auto-complete feature

After the restart you can create a javascript file and try type Ext. and Ctrl+Space https://zmathe.web.cern.ch/zmathe/spketauto.png

Code convention

We use similar code convention to DIRAC. We have created a template used to format the code. You can download from https://zmathe.web.cern.ch/zmathe/extjs-template.xml. In order to use the template you have to import to your Spket profile:

1. Click “Eclipse” -> “Preferences…”

2. In the “Preferences” window select “Spket->Editors->JavaScript Editor->Formatter”

3. Click on the “Import button”

4. Apply

NOTE:

If you encounter some problem, please check you java jdk. We tested with jdk6 and jdk7. We did not discovered any problem using those versions.