Bundles

Besonders praktisch ist die Möglichkeit, viele Dateien zu einen Bundle zusammenzufügen. Somit kann man auch die Anzahl der Request reduzieren, aber in der Entwicklung mit vielen einzelnen JS und CSS Dateien arbeiten.  Optimalerweise, sollte man für jede Javascript Klasse eine eigene Datei verwenden.

Installation mit Maven 2

Die Installation in einen Maven Projekt ist genial einfach. Man fügt in die Pom Datei nur folgende Zeile ein:

<dependency>
      <groupId>net.jawr</groupId>
      <artifactId>jawr</artifactId>
      <version>[2,]</version>
</dependency>

Ein Repository muss man auch noch einfügen:

<repository>
          <id>maven2-repository.dev.java.net</id>
          <name>Java.net Repository for Maven</name>
          <url>http://download.java.net/maven/2/</url>
          <layout>default</layout>
</repository>

Log4J

Jawr benötigt zusätzlich Log4J. Deshalb muss noch folgende Abhängigkeit eingefügt werden:

<dependency>
        <groupId>log4j</groupId>
        <artifactId>log4j</artifactId>
        <version>1.2.15</version>
        <type>jar</type>
        <scope>compile</scope>
        <exclusions>
            <exclusion>
                <groupId>com.sun.jmx</groupId>
                <artifactId>jmxri</artifactId>
            </exclusion>
            <exclusion>
                <groupId>com.sun.jdmk</groupId>
                <artifactId>jmxtools</artifactId>
            </exclusion>
            <exclusion>
                <groupId>javax.jms</groupId>
                <artifactId>jms</artifactId>
            </exclusion>
        </exclusions>
 </dependency>

Hierbei ist es wichtig dass die JMX Abhängigkeit ausgeklammert wird, da Maven sonst eventuell nicht startet.

In die web.xml müssen nun noch die Servlets und das Mapping eingetragen werden:

<servlet>
        <servlet-name>JavascriptServlet</servlet-name>
        <servlet-class>net.jawr.web.servlet.JawrServlet</servlet-class>
        <init-param>
            <param-name>configLocation</param-name>
            <param-value>jawr.properties</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet>
        <servlet-name>CSSServlet</servlet-name>
        <servlet-class>net.jawr.web.servlet.JawrServlet</servlet-class>
        <init-param>
                <param-name>configLocation</param-name>
                <param-value>jawr.properties</param-value>
        </init-param>
        <init-param>
                <param-name>type</param-name>
                <param-value>css</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>JavascriptServlet</servlet-name>
        <url-pattern>*.js</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>CSSServlet</servlet-name>
        <url-pattern>*.css</url-pattern>
    </servlet-mapping>

Konfiguration

Die Konfiguration geschieht in der jawr.properties

jawr.debug.on=false
jawr.gzip.on=true
jawr.gzip.ie6.on=false
jawr.charset.name=UTF-8

Jawr erkennt automatisch ob der Browser gzip unterstützt. Wenn die Einstellung jawr.debug.on auf true steht, werden Dateien nicht komprimiert und die Bundles werden einzeln geladen. Das ist in der Entwicklung sehr wichtig.

jawr.js.bundle.basedir=/js
jawr.js.bundle.names=lib,core,model

jawr.js.bundle.lib.id=/bundles/lib.js
jawr.js.bundle.lib.mappings=/js/lib/**

jawr.js.bundle.core.id=/bundles/core.js
jawr.js.bundle.core.mappings=/js/helper/**,/js/.../version.js,/js/.../all/**

jawr.js.bundle.model.id=/bundles/model.js
jawr.js.bundle.model.mappings=/js/kosmos/cockpit/**,/js/.../../DragAndDrop.js,/js/.../reportone/**

Hier definiere ich 3 verschiedene Bundles. Die Bundles können aus ganzen Ordnern oder einzeln Dateien bestehen. Doppelte Dateien überspringt Jawr automatisch.

jawr.css.bundle.basedir=/css
jawr.css.bundle.names=style
jawr.css.bundle.style.id=/style.css
jawr.css.bundle.style.mappings=/css/**
jawr.csslinks.flavor = xhtml

Hier wird ein CSS Bundle definiert. Wichtig ist die Einstellung jawr.csslinks.flavor = xhtml , da der Link Tag sonst nicht geschlossen wird.

In der JSP muss nur noch die Taglib angegeben werden.

<%@ taglib uri="http://jawr.net/tags" prefix="jwr" %>

Und dieTags für die Bundles eingefügt werden.

<jwr:style src="/style.css" media="all" />
<jwr:script src="/bundles/lib.js"/>
...

Den Unterschied merkt man bei umfangreichen Javascript Anwenungen deutlich.

Jetty

Zur Zeit arbeite ich gerade mit den Jetty Plugin für Maven. Dort muss man erst mal in der .pom Datei für Maven die Plugin Konfiguration anpassen und eine eigene webDefaultXml angeben.

<configuration>
   <webDefaultXml>src/main/recources/webdefault.xml</webDefaultXml>
   ....

Mit dieser Datei kann man Jetty feiner einstellen als mit der Plugin Konfiguration. Diese Date kann man sich auch den Jar Archiv von Jetty kopieren.

Hier muss man dann den Parameter useFileMappedBuffer auf false stellen.

<init-param>
  <param-name>useFileMappedBuffer</param-name>
  <param-value>false</param-value>
</init-param>

Mit dieser Einstellung kann man dann die Dateien auch unter Windows zur Laufzeit ändern.

Ein Flot Chart wird immer in ein Jquery Element generiert. Dieses muss ein HTML Element mit einer festen Höhe und Breite haben. Wie bei Jquery üblich, ist der Aufruf mit ein paar Zeilen möglich.

$().ready(function() {
	var data = {
			label:"Dummy Daten",
			data:[[1,1.5],[2,5],[3,2.3],[4,3.3]]
	};
	var options = {
		lines:{show:true},
		points:{show:true}
	}
	var plot = $.plot($('#placeholder'), [data], options)
});

Dieser Simple Code erzeugt folgenden Chart:

Das schöne an einem Javscript generierten Chart ist die Möglichkeit diesen zur Laufzeit anzupassen. Man kann auf Kopfdruck weitere Daten im vorhandenen Chart anzeigen. Flot Charts sind auch an klickbar. So kann man Punkte auf dem Chart anklicken und dem User dann weiterer Daten zu den bestimmten Punkt anzeigen.

Zoom Funktion

Spannend ist auch die Zoom Funktion um bestimmte Bereiche auf den Chart genauer anzusehen. Dazu muss man nur in den Optionen die Selection aktivieren:

selection: { mode: "x"  oder "y" oder "xy"}

Dann kann man sich an den Event plotselected anhängen und den Chart anzoomen:

$("#placeholder").bind("plotselected", function (event, ranges) {
        plot = $.plot($("#placeholder"), [data],
                      $.extend(true, {}, options, {
                          xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
          }));
});