22Feb

How To: Integrate JS Builder 3 with Eclipse or Aptana on Windows

Overview

Integrating JS Builder 3 with Eclipse or Aptana may save you some time building your Javascript application for a testing or production environment.

The aim of JS Builder is, ultimately, to make your website or application load quicker. It does this by combining your Javascript and CSS files, minifying them and outputting them to fewer files. You may, for example, opt to have one CSS file, and two Javascript files (Ext-all.js and app.js). This results in far fewer requests to your server which, although the individual file sizes are larger, boosts performance.


It’s also ideal if you want to pick and choose which bits of the Ext JS or Sencha Touch frameworks you require. You don’t need to include functionality from the framework that your application doesn’t use. If you’re not using any charting or drag’n'drop in your application then why include it in your Ext-all.js? This is just unnecessary overhead and reduces overall performance.

 

Integrating

So, first off you need to get a copy. It’s currently included with Sencha Touch and will undoubtedly be included with Ext JS 4 when it’s fully released.

I’m not going to talk you through how to actually pick and choose files. The .jsb3 and .jsb2 files included with Sencha Touch and Ext JS are pretty self explanatory and there is plenty of documentation.

External Tools Configuration

We need to use the “External Tools Configuration” features in Eclipse for this to work. There are two ways to access this:

1. Right Click your Project -> Choose Properties -> Builders.

2. In the top toolbar there is a “External Tools”  button (green play button with a small toolbox). In it’s menu there is an “External Tools Configuration” option.

Step by step:

  1. Click “New
  2. Select “Program” from the “Choose configuration type” selection
  3. We only need to use the “Main” tab. You’ll need to give it the following parameters:

Location:

This is the path to cmd.exe which should be “C:WINDOWSsystem32cmd.exe” without the quotes.

Working Directory:

The working directory is the directory where JSBuilder.bat is stored. In my case I’ve included the JSBuilder files in the project.

I’m therefore going to make use of the Variables on offer. More information can be found in Eclipses documentation.

So in the working directory we use “${workspace_loc:/SampleProject/JSBuilder}” again without quotes. You could alternatively put an absolute path to the correct directory.

Arguments:

The arguments are the parameters you’d supply the batch file. You’ll need to remember to include a reference to the batch file here also. We do this like this:

/C JSBuilder.bat -v -p “${workspace_loc:/SampleProject/build.jsb3}” -d “${workspace_loc:/SampleProject/deploy/}

Again I’ve made use of the Variables but you could use absolute paths like so:

/C JSBuilder.bat -v -p C:PathToSampleProjectbuild.jsb3 -d C:PathToSampleProject/deploy/

Note that if you decide to use variables or spaces in your path names you’ll need to wrap the individual arguments in quotations. Also, you don’t need to put a quotation mark at the end of the arguments.

Finally

You can try your new External Tool by running it with “CTRL + B“. The console will open and hopefully you’ll get some nice output of your application building and finally a few files in your deploy directory for inclusion in your application.

Hope you’ve found this useful. If you have any questions or run into issues please leave a comment below. You’ll also find some interesting reading in the JS Builder Forums.

Comments