It is important to be able to identify different builds, not just the build version but also when the build was compiled. The project version is defined in the pom.xml file using the version property:

<groupId>com.gieman</groupId>
<artifactId>task-time-tracker</artifactId>
<version>1.0</version>
<packaging>war</packaging>

Performing a Maven build will result in a WAR file being generated with the filename task-time-tracker-1.0.war; it is a combination of the artifactId and version fields with the .war extension.

In enterprise environments, a new release could be anything from a minor change (for example, Release Version 1.3.2) to a major release (such as Release Version 4.0). The exact naming conventions for the version value in use will depend on the enterprise organization. Regardless of the naming convention, it is important to identify when the build was made. This is obvious when the timestamp on the WAR file is examined, but not so obvious for the testers of the application, who only have access to the frontend. We recommend adding the release version and build timestamp to the Ext JS application to allow users to identify the version they are using. The logon window is an obvious place to display this information and we will add the build version and timestamp as shown in the following screenshot:

The first change that we will make is add two constants to the Application.js file in the init function:

init : function(application){
  TTT.URL_PREFIX = 'ttt/';
  Ext.Ajax.on('beforerequest', function(conn, options, eOpts){
    options.url = TTT.URL_PREFIX + options.url;
  });
  TTT.BUILD_DATE = '$BUILD_DATE$';
  TTT.BUILD_VERSION = '$BUILD_VERSION$';
}

The TTT.BUILD_DATE and TTT.BUILD_VERSION fields define tokens (or placeholders) that will dynamically be replaced in the all-classes.js file during the Maven build. These tokens will not be populated for the index-dev.html file and the logon window for development will look like the following screenshot:

The token replacement with the correct build and timestamp is defined in the pom.xml file and requires several additions, the first being the maven.build.timestamp.format property:

<properties>
  <endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
  <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  <maven.build.timestamp.format>dd-MMM-yyyy HH:mm</maven.build.timestamp.format>
  <spring.version>3.2.4.RELEASE</spring.version>
  <logback.version>1.0.13</logback.version>
</properties>

The maven.build.timestamp.format property defines the format of the timestamp in the LogonWindow.js file. The second change is the addition of the maven-replacer -plugin:

<plugin>
  <groupId>com.google.code.maven-replacer-plugin</groupId>
  <artifactId>maven-replacer-plugin</artifactId>
  <version>1.3</version>
  <executions>
    <execution>
      <phase>prepare-package</phase>
      <goals>
        <goal>replace</goal>
      </goals>
      <configuration>
        <ignoreMissingFile>false</ignoreMissingFile>
        <file>src/main/webapp/all-classes.js</file>
        <regex>false</regex>
           <replacements>
           <replacement>
             <token>$BUILD_DATE$</token>
             <value>${maven.build.timestamp}</value>
           </replacement>
           <replacement>
             <token>$BUILD_VERSION$</token>
             <value>${project.version}</value>
           </replacement>
         </replacements>
      </configuration>
    </execution>
  </executions>
</plugin>

This plugin examines the src/main/webapp/all-classes.js file and replaces the $BUILD_DATE$ token with the build timestamp defined by the Maven property ${maven.build.timestamp}. The $BUILD_VERSION$ token is also replaced by the project version defined by the Maven property ${project.version}.

The final change required is to display these properties in the logon window. We will simply add a container below the toolbar in the LogonWindow.js file's item s array:

{
  xtype:'container',   
  style:{
    textAlign:'center'
  },
  html:' Version ' + TTT.BUILD_VERSION + ' built on ' + TTT.BUILD_DATE
}

Running the project will now display the build version and timestamp in the application logon window of the index-prod.html page: