Saturday 8 November 2008

Updated - Minified Javascript and CSS files in netbeans

If you want automated minified javascript and css files in your netbeans generated war files during the build process do the following :-
These two files need to go in your netbeans ant\lib folder, for my windows/netbeans 6.5 installation thats C:\Program Files\NetBeans 6.5\java2\ant\lib.

For web applications that you want to build with compressed js/css files add the folloing xml to the build.xml for the project, overiding the "-pre-dist" ant target which is not currently configured by default in netbeans.

<target name="-pre-dist" >
<condition property="dont.do.compression">
<istrue value="${auxiliary.org-netbeans-modules-web-client-tools-api.clientdebug}"/>
</condition>
<antcall target="-do-compression"/>
</target>
<target name="-do-compression" unless="dont.do.compression" >
<echo level="info" message="Compressing JavaScript and CSS files...." />
<path id="yuicompressor.classpath">
<fileset dir="${ant.home}/lib">
<include name="yuicompressor-2.3.5.jar"/>
</fileset>
</path>
<taskdef name="yuicompress" classname="com.yahoo.platform.yui.compressor.YUICompressTask" >
<classpath>
<path refid="yuicompressor.classpath"/>
</classpath>
</taskdef>
<yuicompress linebreak="16000" warn="false" munge="no" preserveallsemicolons="true"
outputfolder="${basedir}/${build.web.dir}" >
<fileset dir="${basedir}/web" excludes="**/ext-2.2/**/*.js" >
<include name="**/*.js" />
<include name="**/*.css" />
</fileset>
</yuicompress>
<echo level="info" message="Compression Complete" />
</target>

On the line that includes <include name="yuicompressor-x.x.x.jar"/>
replace the x's with the version of the library you are using.

Then set your includes and excludes as per the example above.

This works for netbeans versions 6.1 onwards including 6.5.

Compression only takes place if client side debugging is configured off.


Sunday 26 October 2008

Is NetBeans 6.5 Release Candidate Ready for FCS?

Well, been using netbeans 6.5 beta and dev builds on and off for a while now and found a few niggles and stability issues with some of them. Nothing serious though which have mostly been addressed.

Downloaded 6.5 RC1 and WOW what an improvement in stability ! 

I am using this release all the time now for my main development which is usually database driven web applications.

The new features I like best are :-

  •  Speed up improvements
It is very much quicker in terms of start up and does not seem to suffer the pregnant pauses when bringing up hover overs like previous releases.
  •  Stability
It has not crashed, locked up or phoned home yet!
  •  Database Explorer changes
Having the ability to page through and update data from the IDE is great. I tend to use PL/SQl so coupled with the PL/SQL plugin it is getting close to not needing another database tool. Not quite there yet, I feel there is a need for the ability to at least list the database objects you have rights on even in other schema's.
  • Client Side Javascript Debugger
Especially IE support which I am stuck with at work, although I tend to use Google Chrome for speed unless I need to debug. 

So is NetBeans 6.5 RC ready for FCS
I would say definitely YES from a web app development point of view.

Neils Netbeans Wish List
  •  Google Chrome Javascript debugger plug in if possible.
  •  Cross Schema listing of all database objects you have rights on in the database explorer.
  •  Automatic minified Javascript/CSS builds.
  •  Geronimo Application Server Plug in.
My favourite general IDE feature is the ability to undock windows to another monitor in a multi monitor setup, especialy where you have a desktop with the ability to show and switch between multiple desktops.

Wednesday 13 August 2008

Minified Javascript and CSS files in netbeans

If you want automated minified javascript and css files in your netbeans generated war files during the build process, read on...

Since netbeans now has a Javascript debugger we want to suppress JavaScript and CSS file compression, it confuses the hell out of the js debugger as you might expect. So I have modified the build.xml from my earlier example to ignore compression when client side debugging is switched on.

So to get automated minified javascript and css files into your war files during the netbeans build process do the following :-
These two files need to go in your netbeans ant\lib folder, for my windows/netbeans 6.5 RC1 installation thats C:\Program Files\NetBeans 6.5 RC1\java2\ant\lib.

For web applications that you want to build with compressed js/css files add the folloing xml to the build.xml for the project, overiding the "-pre-dist" ant target which is not currently configured by default in netbeans.

<target name="-pre-dist" >
<condition property="dont.do.compression">
<istrue value="${debug.client}"/>
</condition>
<antcall target="-do-compression"/>
</target>
<target name="-do-compression" unless="dont.do.compression" >
<echo level="info" message="Compressing JavaScript and CSS files...." />
<path id="yuicompressor.classpath">
<fileset dir="${ant.home}/lib">
<include name="yuicompressor-x.x.x.jar"/>
</fileset>
</path>
<taskdef name="yuicompress" classname="com.yahoo.platform.yui.compressor.YUICompressTask" >
<classpath>
<path refid="yuicompressor.classpath"/>
</classpath>
</taskdef>
<yuicompress linebreak="16000" warn="false" munge="no" preserveallsemicolons="true"
outputfolder="${basedir}/${build.web.dir}" >
<fileset dir="${basedir}/web" excludes="/ext-2.1/**/*.js" >
<include name="**/*.js" />
<include name="**/*.css" />
</fileset>
</yuicompress>
<echo level="info" message="Compression Complete" />
</target>


On the line that includes <include name="yuicompressor-x.x.x.jar"/>
replace the x's with the version of the library you are using.

This works for netbeans versions 6.0,6.1,6.5 beta and 6.5 RC1. In 6.1 compression only takes place with debugging configured off, in 6.5 files are not compressed when run in debug mode, which is now a seperate option to 'run' on the toolbar.

enjoy...

Wednesday 23 July 2008

Instant Messenger Plugin for Netbeans ?

Anyone know of an IM plugin for netbeans ?

Sunday 22 June 2008

Compressing Javascript files in netbeans 6.1 - A solution

OK, I have a working solution for netbeans 6.1, I can not take any credit for this as my hunch was correct, it has been done before. I have adapted the work done by Philippe Mouawad and ANDREW GOMILKO using the YUI Compression tool as Ant Task so that it can be used with netBeans 6.1 web application projects.

To get automated javascript \and css files into your war files during the netbeans build process do the following :-

These two files need to go in your netbeans ant\lib folder, for my windows/netbeans 6.1 installation thats C:\Program Files\NetBeans 6.1\java2\ant\lib.

For web applications that you want to build with compressed js/css files add the folloing xml to the build.xml for the project, overiding the "-pre-dist" ant target which is not currently configured by default in netbeans.

<target name="-pre-dist">
<echo level="info" message="Compressing JavaScript and CSS files...." />
<path id="yuicompressor.classpath">
<fileset dir="${ant.home}/lib">
<include name="yuicompressor-2.3.5.jar"/>
</fileset>
</path>
<taskdef name="yuicompress"
classname="com.yahoo.platform.yui.compressor.YUICompressTask">
<classpath>
<path refid="yuicompressor.classpath"/>
</classpath>
</taskdef>
<yuicompress linebreak="300" warn="false" munge="no"
preserveallsemicolons="true"
outputfolder="${basedir}/${build.web.dir}" >
<fileset dir="${basedir}/web"
excludes="/ext-2.1/**/*.js" >
<include name="**/*.js" />
<include name="**/*.css" />
</fileset>
</yuicompress>
<echo level="info" message="Compression Complete" />
</target>
This will compress and copy the js and css files to the build directory before the war file is built and will thus be included in your war file.

Note there is a line in my example with an "exclude" for my ext-2.1 directory, the files there are already compressed so i have excluded them, just add/remove to suit your application.

The payload without compression on my current project is 880kb after compression 620kb, and has shaved a couple of seconds off the browser load time too.

All we need now is for someone to code a netbeans plugin that configures this all for us and makes it configurable from a wizard maybe, any takers ?

I have also stumbled upon this excellent nb6.1 plug-in for pl/sql editing be sure to check it out if you want to edit pl/sql from within netbeans.

Happy coding....

Saturday 21 June 2008

Compressing Javascript files in netbeans 6.1

After reading the ant manual and contemplating this further I couldnt help thinking that someone might have already built an ant task to do this.

A quick google search yielded several interesting results:-

  • http://blog.tremend.ro/2006/10/25/ant-task-for-javascript-compression/
  • http://code.google.com/p/jsmin-ant-task/
  • http://javaflight.blogspot.com/2008/01/introducing-yui-compressor-ant-task.html

According to YUI Compressor pages, it is JavaScript minifier designed to be 100% safe and yield a higher compression ratio than most other tools including JSMin.

I am going to have a go at modifying an ant task to use the YUI Compressor and add it to a test web app build script in netbeans.

There are step by step instructions on how to create the ant script on slideshare here.

Compressing Javascript files in netbeans 6.1

Netbeans 6.1 Javascript editor has some fantastic features and is my editor of choice, however it has a feature missing I would like to see implemented.

Background
I have recently been the lead developer on a corporate time sheet web application developed using netbeans and the excellent Extjs library front end, Java middle tier with an Oracle backend database.

The company I work for has a global presence around the world and some countries have less developed network infrastructure with often narrow bandwidth and slow links.

To let the users in these countries get the best from my web applications it was deemed necessary to compress/minify script files, in my case Javascript and may be good practice.

Avoiding Re-inventing the Wheel
There are a variety of tools available to do this, however it is an extra manual step in the build process which could quite easily be prone to error and being able to do it as part of the build process automaticlly would be a great enhancement to netbeans build process especialy where a project contains many javascript files.

So I have made a suggestion as an enhancement request. The idea is to compress script files during the netbeans build process so that war files only contain compressed javascript leaving the editable source intact.

Investigating the nb build process
With some spare time today, knowing nothing about the actual build process in netbeans I decided to investigate a solution myself.

So this is what I have ascertained to date in a couple of hours :-
  • netbeans uses ant build scripts to do the actual building process.
  • you can write your own ant tasks.
  • each netbeans project has its own build script.
  • The build script contains place holders for pre/post build and distribution ant tasks.
So whats the solution then?
  • Learn how to build ant tasks and hook them into build.xml for my projects.
  • Build an ant task that compresses javascript files. (easy in Java)
  • Set up the build script so that it runs during the build part of the process but before the distribution part so that compressed javascript files are included in the war file.
  • Share the solution with the nb community.
Doing this will leave the readable source intact and editable from within netbeans or your source code control such as cvs etc and provide compressed javascript files in your web applications.

OK, there must be some down side to this too. From my point of view:-
  • I have to spend the time learning ant (not really a downer for me) time is though....
  • Debugging might be an issue if the source is actually modified on the fly during building.
  • I know nothing about configuring netbeans so compression could be switched off etc.
watch this space for a working solution.....