SwarmOnline Menu Mobile
  • Home
  • About
  • Services
  • Portfolio
  • Blog
  • Contact

Recent Posts

  • Integrating the TestFlight SDK into your PhoneGap Application
  • Retrieving References to Internal View Components
  • Launching Sencha Insights
  • Documenting your Sencha apps with JSDuck
  • Localising Sencha Touch and Ext JS applications with Ux.locale.Manager

Recent Comments

  • Stuart on Ext.ux.TouchCalendar – A Sencha Touch Calendar component
  • Stuart on Localising Sencha Touch and Ext JS applications with Ux.locale.Manager
  • Manuel Rodriguez on Localising Sencha Touch and Ext JS applications with Ux.locale.Manager
  • Remi Bloch on Ext.ux.TouchCalendar – A Sencha Touch Calendar component
  • Remi Bloch on Ext.ux.TouchCalendar – A Sencha Touch Calendar component

Archives

  • May 2013
  • March 2013
  • February 2013
  • December 2012
  • September 2012
  • August 2012
  • November 2011
  • October 2011
  • May 2011
  • March 2011
  • February 2011
  • January 2011
  • November 2010

Categories

  • Development Tips
  • Ext JS
  • News
  • Sencha Touch
  • Sencha Touch Extensions & Plugins
  • Web Design
  • Web Design & Development Blog

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

5
22 Feb
2011
Eclipse-and-JS-Builder

Development Tips

Ext JS

Sencha Touch

Web Design & Development Blog

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.

Tweet

5
  1. André - Reply

    April 29, 2011 at 12:48 am

    I am unable to find neither “the .jsb3 [...] files included with [...] Ext JS” nor “SampleProject/build.jsb3″. I got ExtJS as well as the SDK Tools from http://www.sencha.com/products/extjs/download/. Could you be a bit more specific?

    • Andy - Reply

      May 2, 2011 at 6:02 pm

      Hi,

      It looks like JS Builder 3 hasn’t been included with Ext JS 4 – perhaps it will in the future. I would recommend you visit http://www.sencha.com/products/jsbuilder for full information on JS Builder 2 and a link to the download.

      If you are wanting a copy of JS Builder 3 you can get it by downloading Sencha Touch – the files are in the directory ‘jsbuilder’

      Hope this helps,

  2. Bruno - Reply

    December 15, 2011 at 7:24 pm

    Is it possible to do this on Aptana Studio 3? I can’t find any of the option to create the builder…
    Thank you!

  3. Bruno - Reply

    December 15, 2011 at 7:56 pm

    Aptana for Mac OS I mean…

    • Andy - Reply

      January 30, 2012 at 1:35 pm

      It probably is. I’ll have a play and see what’s possible.

      Have you been able to get any further?

      Your other option would be to use the Sencha SDK for this as well now.

Leave a Comment - Cancel reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

About SwarmOnline

Based in Glasgow’s West End, SwarmOnline provide web development, cross platform mobile app development and training services for local and international organisations. We have expert knowledge of Sencha technologies and have been Sencha Partners since 2011. We specialise in creating dynamic, innovative and practical solutions.

Meet the Team...

Newsletter

Subscribe to our newsletter and we’ll keep you up-to-date. We don't do spam.

Get in touch!

Email: info@swarmonline.com   
Skype: andrew-swarmonline stuart-swarmonline   
Phone: 0141 438 2231   


© 2013 SwarmOnline Ltd. All Rights Reserved.

SwarmOnline Ltd is a Limited Company registered in Scotland, with company number SC411633. Our Registered Office is 1-2 249 Byres Road, Glasgow G12 8UB.