Advanced Cmd: How to integrate Ext JS with Maven

Posted on in Environment Ext JS Ext JS 5 Ext JS 6 Uncategorized

This last article, will show you, how you can integrate Ext JS with tools like Maven.
Please understand, Maven is not a required Sencha setup, though it is possible to build your Sencha projects with Maven.

About Apache Maven

Maven is a build automation tool used primarily for Java projects. Maven addresses two aspects of building software: First, it describes how software is built, and second, it describes its dependencies. Contrary to preceding tools like Apache Ant, it uses conventions for the build procedure, and only exceptions need to be written down.
An XML Project Object Model file (pom.xml) describes the software project being built, its dependencies on other external modules and components, the build order, directories, and required plugins.

Maven is built using a plugin-based architecture that allows it to make use of any application controllable through standard input. Theoretically, this would allow anyone to write plugins to interface with build tools (compilers, unit test tools, etc.) for any other language. In reality, support and use for languages other than Java has been minimal.

Generate a Maven project for a web project

First, make sure Maven is installed on your machine. If not installed, you can follow this guide: https://maven.apache.org/install.html

Once Maven is installed, we will use it to generate a web application. To do so, we can choose the webapp archetype, which has folders and settings for a (Java) web application configured:
https://maven.apache.org/archetypes/maven-archetype-webapp/
We can run the following command from the command-line, (it’s very similar to sencha generate app, but then for Java web applications.):

mvn archetype:generate -DgroupId=com.folder.name.you.like -DartifactId=NameOfProject -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false

For example:

mvn archetype:generate -DgroupId=com.ladysign.MavenApp -DartifactId=MavenApp
-DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false

Maven will start processing and will create the complete web based java application project structure, with the following folders:

MavenApp            # contains src folder and pom.xml
src/main/webapp         # contains index.jsp and WEB-INF folde
src/main/webapp/WEB-INF  # contains web.xmlthemes
src/main/resources      # it contains images/properties files

The pom.xml (project object model), will look like this:

As you noticed, there is also an index.jsp file in the webapp folder.
This means, you should be able to see this file in your browser, after a build.

Build with Maven

Let’s build this project:

cd MavenApp
mvn clean package
(or mvn compile)

(Mac OSX users might need to prefix with sudo)
Maven will start building the project. It will create a targets folder, with a MavenApp.war file. This is the file that you can deploy, with a server like for example, Apache Tomcat.

Deploy with Tomcat

When you are new to Apache Tomcat, you can find the setup guide here: https://tomcat.apache.org/tomcat-9.0-doc/setup.html

Once Tomcat is installed, you only need to copy the war file into the webapps folder of Tomcat.
(It’s setup that easy, in /TOMCAT_HOME/conf/server.xml actually.)

Sometimes you might need to stop/start your server. Navigate on the command-line to the Tomcat app bin folder. And run:
sudo sh shutdown.sh (or execute .bat for Windows), and startup.sh (.bat).

Integrate Ext JS with Maven

Now, that we have seen how Maven works, let’s see how we can integrate an Ext JS app with a Maven web app project. Our goal is to have the Sencha build within our src/main/webapp folder. We want to automate it as much as possible, so index.jsp will contain the Sencha microloader.

I have a working example, in my Github repository, which you can find here:
https://github.com/savelee/maven-ant-sencha

These steps, will let you do the same from scratch:

1) From the downloaded ext js folder, start with generating a new workspace:

sencha generate workspace [path to the folder]/sencha

for example:
sencha generate workspace src/main/sencha

2) Navigate to the new generated sencha/ext folder

3) Then generate a new app

sencha generate app MyApp ../myapp

4) You can test the demo application by booting the sencha internal (Jetty) server, from the myapp folder, execute:

sencha app watch

Sencha spins off an internal server, it should give you the location with the port number, where it’s currently hosted. By default this will be: http://localhost:1841/myapp/

5) Great, now that it works, let see where the sencha build is located:

sencha app build

The production build is located in:
sencha/build/MyApp/production

Now there are two things that we can do. We can either modify the build.xml file in the app folder, which can copy the build into the Maven folder. (Like how I described Ant build scripts, in article 2.) or we can create a Maven task for this.
Ideally we need a separate Maven task. Because by just modifying it in the build.xml, we have to run 2 tasks on the command-line. The sencha app build and the mvn clean package commands. Let’s see how we can fix this…

Build through Maven Plugins

There are 2 maven plugins that can help with building the Sencha app via Maven.

We could create a Maven task which executes Sencha Cmd via the sencha.jar that’s available in the Sencha Cmd installation folder, or we can use Maven Ant task integration, since Sencha Cmd itself is build on top of Ant.
With both solutions, you can achieve the same, it’s just a matter where you want to store your Ant tasks. In the Maven pom.xml file, or in the Sencha App build.xml file.

I will show both solutions:

Sencha Cmd execution, with the Maven exec-maven-plugin

With the exec-maven-plugin, (http://www.mojohaus.org/exec-maven-plugin/usage.htm), you can use Maven to execute commands from the command-line.
This will require, that you have Sencha Cmd installed on the machine that runs the Maven commands.

Your pom.xml file, will look like this:

When you want to work with environment vars,
you can configure a profiles block:

--environment
${sencha.env}

See also: https://github.com/savelee/maven-ant-sencha/blob/master/pom_backup.xml for my complete solution.

Ant Task runner, with the Maven maven-antrun-plugin

With the maven-antrun-plugin (https://maven.apache.org/plugins/maven-antrun-plugin/), you can use Maven to run Apache Ant task. To make sure it recognizes the Sencha Ant command, you will need to have the sencha.jar somewhere on your machine. By default it’s located in the Cmd installation folder, but you could copy this over to your Maven environment/machine.

Your pom.xml file, will look like this:

See also: https://github.com/savelee/maven-ant-sencha/blob/master/pom.xml for my complete solution.

Here are some handy resources:

How to prepare your machine for GXT 4 development

Posted on in GXT

For this tutorial, we will setup a GXT development machine with:
Java, Eclipse, GWT Eclipse plugin, Maven and GXT 4 installed.

Install Java

You'll need to have Java 1.7 JDK installed on the mac. Sourcing down from Java 1.8 with GWT 2.7 has issues at times. If you install the Java 1.7 JDK you can change back in for with an export env variable for JAVA_HOME.

http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

In my case I had Java 1.8 JDK already installed. So I removed the 1.8 folder this from:
/Library/Java/JavaVirtualMachines/

Then I set the correct JAVA_HOME. On the command-line I type:
/usr/libexec/java_home -v 1.7.0.79 --exec javac -version

Then I run on the command-line:
javac -version

When correct, it outputs: javac 1.7.0_79

Install Eclipse

I choose Eclipse Mars EE:
http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/mars/1/eclipse-java-mars-1-macosx-cocoa-x86_64.tar.gz

After downloading unpack, and drag the application into the Mac applications folder.

Install the GWT Plugin for Eclipse

Start Eclipse. It will ask you to select a workspace. I suggest using a clean separate workspace. For example: /Applications/Tomcat/webapps/ROOT/GXT
You can enter the name of a new workspace or select the default. If Eclipse presents you with a welcome screen, you may close it.

Eclipse → Help → Install New Software
Click the Add button.
Use this update site: http://storage.googleapis.com/gwt-eclipse-plugin/snapshot
Select the following software:

  • GWT for Eclipse → Google Plugin for Eclipse
  • GWT for Eclipse → GWT SDK

Click, Next, Next, Accept, Finish
Restart Eclipse

Download GXT 4

If your company has a support contract for GXT, download the latest GXT zip file from the Sencha Support Portal.

The Sencha GXT zip file contains GXT source code, GXT Javadoc and the jar files for GXT and charting. There's also a deployable Web Archive (war) for the GXT Explorer Demo.

  • Create a directory for the Sencha GXT distribution and unzip the file into it.
  • Navigate to index.html in the new directory and open it in the browser.

Install Maven

I've downloaded apache-maven-3.3.9-bin.zip from: https://maven.apache.org/download.cgi.

  • Unzip it to a place on your hard drive, for example ~/bin/apache-maven-3.3.9
  • Add the bin directory of the created directory apache-maven-3.3.9 to the PATH environment variable.

Confirm it worked, by running mvn -v on the CLI.
It should output, something similar like:

Apache Maven 3.3.9 (bb52d8502b132ec0a5a3f4c09453c07478323dc5; 2015-11-10T17:41:47+01:00)
Maven home: /Users/myusername/bin/apache-maven-3.3.9
Java version: 1.7.0_79, vendor: Oracle Corporation
Java home: /Library/Java/JavaVirtualMachines/jdk1.7.0_79.jdk/Contents/Home/jre
Default locale: en_US, platform encoding: UTF-8
OS name: "mac os x", version: "10.11.1", arch: "x86_64", family: "mac"
MacBook-Pro-3:~ myusername$ 

And that's it, you are good to go!
To get your first GXT project up and running, I followed these 3 Sencha guides:

  1. Create a GWT project
  2. Getting Started with GXT
  3. Optimizing for touch support

(In case you don't get the prompt to install the GWT Google Chrome developer plugin, follow these steps: http://docs.sencha.com/gxt/4.x/getting_started/Getting_Started_with_Touch.html

Java Heap Exception when using Sencha Cmd

Posted on in Cmd Environment

Are you running Sencha Cmd (typically on Windows), and you run into a Java Heap Space error, like the one below?

[ERROR] com.sencha.exceptions.BasicException: java heap space

The problem is that your JVM is running out of memory. Luckily you can control this great site.
Open the sencha.cfg file, in your Sencha Cmd installation folder.
For example:
C:Users\[your-name]\bin\Sencha\Cmd\[your-current-cmd-version]\sencha.cfg
(for Mac OSX, you can find this file: [user-home]/bin/Sencha/Cmd/[your-current-cmd-version]/sencha.cfg)

Search in this file for: cmd.jvm.args
Here you can change the minimum heap space (xms) and the maximum heap space (xmx).
The xmx, is what you need to higher up. For example:

# These are the JVM startup arguments. The primary things to tweak are the JVM
# heap sizes.
# java.awt.headless=true - required to make phantomjs (used by theme slicer)
# work in headless environments
# cmd.jvm.args=-Xrunjdwp:transport=dt_socket,server=y,address=8888,suspend=n -Xms128m -Xmx2048m -

Djava.awt.headless=true
cmd.jvm.args=-Xms128m -Xmx2048m -Dapple.awt.UIElement=true

Now restart your terminal, and try the sencha command again. This should work.