Ext JS in a maven project.

**SimoAmi** · 17 Aug 2012 11:42 AM

Originally Posted by ykey

My requirements have grown quite large for the maven build, and it has been hell organizing all of this in a POM but I am making progress. The following list includes everything I want maven to be able to do:

Be able to run jslint/jshint against development source
Be able to filter an html template with the current extjs version and build
Be able to run Sencha SDK tools to compile development source into a single JavaScript file
Be able to run unit tests against development source in browser
Be able to run unit tests headlessly against compiled source
Be able to run integration screen tests against development source in browser
Be able to run integration screen tests headlessly against compiled source
Be able to configure Jasmine spec filter while testing
Be able to execute Compass css build
Be able to insert the maven project version into JavaScript source

I have been making my way through this list just using various maven plugins like the maven-resource-plugin and the jasmine-maven-plugin or resorting to the maven-antrun-plugin for some tasks. I'd say I am about 60% through this list and I am not very happy with it from a maintainability standpoint.

I will try and share what I have but like others most of it seems hackish. The first step for everyone should be creating a maven project for ExtJS that they can then bring in as a dependency in builds.

frank - I have never written a maven plugin but could be interested in it, though I am not sure of my availability at the moment.

Have you considered JAWR? It would take care of most of your packaging and bundling needs and has Maven support: http://jawr.java.net/features.html

**btarantina** · 21 Aug 2012 7:26 AM

For what it is worth, this is what I started with. This binds the SDK tools to the prepare-package phase so that you only have to execute 'mvn clean install' to get the WAR generated.

Steps:
1. Create an app-config.js file that has your Ext.loader.setConfig and

Code:

Ext.require calls
Ext.Loader.setConfig({

enabled: true,
paths: {
            'HelloAppWidget': 'app/'

        }

});

 

Ext.require(\[

 

'HelloAppWidget.controller.*',

'HelloAppWidget.model.*',

'HelloAppWidget.store.*',

'HelloAppWidget.view.*'

\]);

2. Modfiy the index.html file to only reference the SDK generated files:

HTML Code:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>My First Sencha MVC Application</title>
    
    <!-- bring in the required ExtJs CSS and library files -->
    <link rel="stylesheet" type="text/css" href="../ext-4.0/resources/css/ext-all.css">
    <script type="text/javascript" src="../extjs-4.1.1/ext.js"></script>
    
    <!-- finally bring in our application file -->
    <script type="text/javascript" src="all-classes.js"></script>
    <script type="text/javascript" src="app-all.js"></script>
    
</head>

3. Create the POM to call the SDK tools:

Code:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.mycompany.hello-world-app</groupId>
    <artifactId>hello-world-app</artifactId>
    <packaging>war</packaging>
    <version>0.0.1-SNAPSHOT</version>
    <name>Hello World</name>

    <dependencies></dependencies>

    <build>
        <plugins>
            <plugin>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.2</version>
                <configuration>
                    <!-- We don't need our development files for production deployment
                         so exclude app.jsb3 and app-config.js 
                     -->
                    <packagingExcludes>
                        app.*,
                        app-config*
                    </packagingExcludes>
                </configuration>
            </plugin>

            <!-- Call the first Sencha SDK tool. This command will interrogate the ExtJS application
                 and create a JSBuilder file.
             -->
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <version>1.2.1</version>
                <executions>
                    <execution>
                        <id>Sencha Pre-compile</id>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <phase>prepare-package</phase>
                    </execution>
                </executions>

                <configuration>
                    <executable>sencha</executable>
                    <workingDirectory>src/main/webapp/</workingDirectory>
                    <arguments>
                        <argument>create</argument>
                        <argument>jsb</argument>
                        <argument>-a</argument>
                        <argument>app-config.js</argument>
                        <argument>-p</argument>
                        <argument>app.jsb3</argument>
                    </arguments>
                </configuration>
            </plugin>

            <!--  Call the second Sencha SDK tool. This command will build the production JavaScript
                  files (app-all.js, all-classes.js).
            -->
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <version>1.2.1</version>
                <executions>
                    <execution>
                        <id>Sencha Build</id>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <phase>prepare-package</phase>
                    </execution>
                </executions>
                <configuration>
                    <executable>sencha</executable>
                    <workingDirectory>src/main/webapp/</workingDirectory>
                    <arguments>
                        <argument>build</argument>
                        <argument>-p</argument>
                        <argument>app.jsb3</argument>
                        <argument>-d</argument>
                        <argument>./</argument>
                        <argument>--nocompress</argument>
                    </arguments>
                </configuration>
            </plugin>

        </plugins>
    </build>
</project>

**brian428** · 21 Aug 2012 7:49 AM

Thanks, that may help some of the folks in the thread. Unfortunately, it doesn't help me because first, our build servers are Ubuntu, and second, even if they were Windows the server admins won't allow us to just add and execute arbitrary executable files (for security reasons).

So what we really need is a platform-independent JAR that can do the SDK build duties. Ideally, Sencha would create a full Maven plugin, but even if we just had the JAR that would get us a lot of the way there.

**btarantina** · 21 Aug 2012 8:01 AM

You're right, it is a simplified POM and doesn't cover all of your needs.

I'm not sure what you mean about having an Ubuntu build server...The POM that I posted was tested against Fedora with the 64-bit SDK tools.

**brian428** · 21 Aug 2012 8:09 AM

Huh, you know I never even noticed that they had the other downloads because the Windows one is the big green button. So that's good, but unfortunately it doesn't avoid the need to execute code at the command line. But thanks for pointing that out, I'll *try* to see if they might make an exception. Not holding my breath though, these guys are fairly psycho about the sanctity of the build servers...

**btarantina** · 21 Aug 2012 8:14 AM

No problem. Just keep in mind that there is currently a bug in the 64-bit Linux version... it references 32-bit libraries. You'll need to install them to get it working:

Code:

sudo yum install glibc.i686

sudo yum install libstdc++.i686

**maciasoft** · 18 Dec 2012 6:24 AM

I thought of another approach, but didn't have time to test it:

concatenate and minify all your .js into single app-all-min.js in any file order with simple tool like yui-compressor (http://alchim.sourceforge.net/yuicom...-maven-plugin/)
write a custom extjs classloader that waits for the script to load completely, and only then start to register classes in appropriate order.

Solution differs from ones that use jsbuilder, bacause it does not mix in the framework code into your js file. You need to provide the ext-all.js separately.

Ext JS in a maven project.

Thread Tools

Search Thread

Display

Example POM for simple Maven building

Example POM for simple Maven building

Tags for this Thread