Enterprise Application Development with Ext JS and Spring

5 (1 reviews total)
By Gerald Gierer
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Preparing Your Development Environment

About this book

Spring and Ext JS are cutting edge frameworks that allow us to build high performance web applications for modern devices, that are now consuming data at a faster rate than ever before. It is the appropriate time for you to understand how to best leverage these technologies when architecting, designing, and developing large scale web development projects.

This practical guide condenses an approach to web development that was gained from real world projects, and outlines a simple, practical approach to developing high performance, and enterprise grade web applications.

Starting with configuring Java, NetBeans, and MySQL to prepare your development environment, you will then learn how to connect your NetBeans IDE to the MySQL database server. We will then explore the Task Time Tracker (3T) project database structure and populate these tables with test data.

Following on from this, we will examine core JPA concepts after reverse engineering the domain layer with NetBeans. Leveraging the Data Access Object design pattern, you will learn how to build the Java DAO implementation layer assisted by generics in base classes, followed by a Data Transfer Object enabled service layer to encapsulate the business logic of your 3T application.

The final chapters that focus on Java explore how to implement the request handling layer using Spring annotated controllers, and deploy the 3T application to the GlassFish server. We will then configure the Ext JS 4 development environment and introduce key Ext JS 4 concepts, including MVC and practical design conventions.

Covering a variety of important Ext JS 4 strategies and concepts, you will be fully-equipped to implement a variety of different user interfaces using the Ext JS MVC design pattern. Your journey ends by exploring the production build and deployment process using Maven, Sencha Cmd and GlassFish.

Publication date:
December 2013
Publisher
Packt
Pages
446
ISBN
9781783285457

 

Chapter 1. Preparing Your Development Environment

This chapter will install and configure your development environment. The Rapid Application Development (RAD) tool is NetBeans, an open source, cross-platform Integrated Development Environment (IDE) that can be used for creating visual desktop, mobile, web, and Service-Oriented Architecture (SOA) applications. NetBeans officially supports Java, PHP, JavaScript, and C/C++ programming languages, but it is best known for providing a complete toolset for all the latest Java Enterprise Edition (Java EE) standards (currently Java EE 7).

The database of choice for this book is MySQL, the world's most widely used open source Relational Database Management System (RDBMS). MySQL is the most popular choice of database for web applications hosted on Linux platforms and continues to deliver outstanding performance in a multitude of applications. Its small footprint and ease of use makes it perfect for development use on a single computer.

The application server used in this book is GlassFish 4, which comes bundled with the NetBeans download. GlassFish is installed as part of the NetBeans installation, and the tight integration between the two makes configuring GlassFish a simple process. GlassFish is an open source, production-quality application server that implements all the Java EE 7 features. It has enterprise-grade reliability and is considered by many to be the best open source application server available. GlassFish 4 is the Reference Implementation (RI) for the Java EE 7 specification, a full description of which can be found at https://glassfish.java.net/downloads/ri/.

All of these development tools are freely available for PC, Mac, and Linux. Each tool has extensive examples, comprehensive tutorials, and online support forums available.

It should be noted that although this chapter focuses on NetBeans, MySQL, and GlassFish, it is possible for you to configure any appropriate combination of tools that they are familiar with. The development tasks outlined in this book can just as easily be followed using Eclipse, Oracle, and JBoss—although some described configuration details may require minor modifications.

In this chapter, we will perform the following tasks:

  • Install the MySQL Database server

  • Install the Java SDK

  • Install and configure the NetBeans IDE

  • Create the application project and explore Maven

  • Run the project in GlassFish

 

Installing MySQL


MySQL can be downloaded from http://www.mysql.com/downloads/mysql. Select the appropriate MySQL Community server for your operating system and architecture. It is important to follow the instructions, making note of installation directories and paths for future reference. After downloading and running the setup file, you should select the Developer Default installation for this book.

Choosing the default settings is best unless you are familiar with MySQL. This will include setting the default port to 3306, enabling TCP/IP networking, and opening the required firewall port for network access (not strictly required for a developer machine where all apps are running on the same environment, but required if you are configuring a dedicated MySQL server).

Regardless of the environment, it is important to set a root user password during the installation process. We will use the root user to connect to the running MySQL server to execute commands.

Note

The rest of this book will assume the root user has the password adminadmin. This is not a very secure password but should be easy to remember!

We recommend that the MySQL server is configured to start when the operating system starts. How this is done will depend on your environment, but it is usually performed at the end of the Initial Configuration action. Windows users will have the option to start the MySQL server at system startup. Mac users will need to install the MySQL Startup Item after the server has been installed.

Should you decide not to start MySQL when the operating system starts, you will need to start the MySQL server manually whenever required. How this is done will once again depend on your environment, but you should start your server now to confirm that the installation was successful.

Note

Unix and Linux users will need to install MySQL as appropriate for their operating system. This may include the use of Advanced Packaging Tool (APT) or Yet another Setup Tool (YaST), or even the installation of MySQL from source. There are detailed instructions for various operating systems found at http://dev.mysql.com/doc/refman/5.7/en/installing.html.

At the end of the configuration process, you will have a running MySQL server ready to be used in Chapter 2, The Task Time Tracker Database.

 

Installing the Java SE Development Kit (JDK)


The Java SE Development Kit (JDK) can be downloaded from http://www.oracle.com/technetwork/java/javase/downloads/index.html. You may choose to skip this step if you already have the JDK 7 Update 45 (or later) installed on your system.

Note

Do not select the NetBeans bundle as it does not contain the GlassFish server.

You will need to accept the JDK 7 License Agreement before selecting the appropriate distribution. After downloading the JDK, run the setup program and follow the instructions and prompts.

 

Installing the NetBeans IDE


NetBeans can be downloaded from https://netbeans.org/downloads/. The distribution requires a valid JDK to be already installed on your platform. At the time of this writing, I used JDK 7 Update 45, but any JDK 7 (or higher) version would be fine. There are several distribution bundles; you will need to select the Java EE bundle.

The latest version at the time of this writing was NetBeans 7.4, which introduced significant new features, including extended HTML5 and JavaScript support. For the first time, NetBeans also included editing and code completion support for the Ext JS framework.

To install the software, simply download and follow the detailed instructions available from the NetBeans website. This will take you through a sequence of setup screens as follows:

  1. The GlassFish 4 server is automatically selected. You do not need to install Tomcat.

  2. Accept the terms in the license agreement.

  3. Accept the terms of the JUnit license agreement. JUnit is used for testing in Chapter 5, Testing the DAO Layer with Spring and JUnit.

  4. Note the installation path of the NetBeans IDE for future reference. Select the appropriate JDK that was installed previously (if there is more than one JDK on your system).

  5. Note the installation path for the GlassFish 4 server for future reference.

  6. The final screen summarizes the installation. Ensure to Check for Updates before clicking on Install to start the process.

The process may take several minutes depending on your platform and hardware.

When the installation is complete, you can run NetBeans for the first time. If you had a previous version of NetBeans installed, you may be prompted to Import Settings. The default opening screen will then be displayed as follows:

The most useful panels can now be opened from the menu:

  • Projects: This panel is the main entry point to your project sources. It shows a logical view of important project content, grouped into appropriate contexts.

  • Files: This panel shows the actual file structure of the project node as it exists on your filesystem.

  • Services: This panel displays your runtime resources. It shows a logical view of important runtime resources such as the servers and databases that are registered with the IDE.

At this stage, the first two panels will be empty but the Services panel will have several entries. Opening the Servers panel will display the installed GlassFish 4 Server as seen in the following screenshot:

 

Introducing Maven


Apache Maven is a tool that is used for building and managing Java-based projects. It is an open source project hosted at http://maven.apache.org and comes bundled with the NetBeans IDE. Maven simplifies many steps common to all Java development projects and provides numerous features, including the following:

  • The provision of convention over configuration. Maven comes with a series of predefined targets for performing certain well-defined tasks including compilation, testing, and packaging of projects. All tasks are managed through a single configuration file: pom.xml.

  • A consistent coding structure and project framework. Each Maven project has the same directory structure and location for source files, test files, build files, and project resources. This common structure brings us easily up to speed with projects.

  • A consistent build system with numerous plugins to make common tasks easy.

  • The ability to execute tests as part of the build process.

  • A highly flexible and powerful dependency management system. This allows software developers to publish information and share Java libraries through (external or remote) Maven repositories hosted on the Internet. Libraries are then downloaded and cached locally by Maven for use in the project.

We encourage you to visit the Maven website to explore the many features available. NetBeans will use Maven to create and manage the web application project.

 

Creating the Maven Web Application project


A NetBeans project encapsulates all the source code and related components required to maintain and develop an application. Navigate to File | New Project from the menu to start the process:

Select Maven in the Categories listing and Web Application from the Projects listing, as shown in the preceding screenshot, before selecting the Next button. This will present you with the project configuration screen with the following fields:

  • Project Name: This specifies the display name of the project in the project window. This name is also used to create the project folder and must not contain spaces.

    Note

    Our project is called Task Time Tracker. This tool will allow users to manage the time spent on different tasks for different projects. The project name field is the lowercase, nonspaced translation of the name of the project: task-time-tracker.

  • Project Location: This specifies the filesystem root folder where you want to store the project metadata and source code. We normally create a project-specific folder at the root level of a drive, rather than burying it deep within a folder structure under NetBeans. This makes it easier to find and copy files into the project.

    Note

    Windows users should create a project folder under c:\projects. Mac users may wish to replace this with /Users/{username}/projects and Unix users with /home/{username}/projects. The rest of the book will refer to this location in all examples as the project folder.

  • Project Folder: The project folder is read-only and generated based on the name of the project and the project location.

  • Artifact Id: This is a read-only Maven-specific property to identify the project and is based on the project name.

  • Group Id: This is another Maven property that represents a top-level container for multiple artifacts. It usually represents the Top-Level Domain (TLD) of the organization owning the project.

    Note

    The Group Id for the project is com.gieman, the company of the author.

  • Version: This is another Maven property that represents the version of the artifact. The default version is 1.0-SNAPSHOT, which we will change to 1.0. As projects evolve and new versions are released, Maven will keep track of the different builds based on their versions.

  • Package: The IDE will automatically create a Java source package structure based on this field. We will use the package com.gieman.tttracker.

You should now have entered the following project details:

Click on the Next button to view the final screen. Do not change the default GlassFish Server 4.0 and Java EE 7 settings before clicking on the Finish button. You will now see activity in the Project Creation output tab as the project is created and configured. Opening the Project and Files panels will allow you to see the project structure:

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Right-clicking on the project name in either tab will allow you to select the Properties for the project. This will display all properties and paths relevant to the project under different categories:

You should not need to change these properties for the remainder of the book.

Understanding the POM and dependency management

Each Maven project has a pom.xml configuration file at the root level of the NetBeans project. Click on the Files view and double-click on the pom.xml file to open it in the editor:

Note

You should see the Navigator window open in the bottom-left panel. This displays an outline of the file being edited and is very helpful when navigating through large files. Double-clicking on a node in the Navigator will position the cursor at the appropriate line in the editor.

If the Navigator window does not open (or has been closed), you can open it manually by navigating to Window | Navigating | Navigator from the menu.

The Project Object Model (POM) fully defines the project and all required Maven properties and build behaviors. There is only one dependency shown in pom.xml:

<dependencies>
  <dependency>
    <groupId>javax</groupId>
    <artifactId>javaee-web-api</artifactId>
    <version>7.0</version>
    <scope>provided</scope>
  </dependency>
</dependencies>

This dependency identifies that the project requires Java EE 7 for building. This entry ensures the full Java EE 7 APIs are available for Java coding in the Task Time Tracker project. Our project also requires the Spring Framework, which must now be added as additional dependencies. Typing in the editor will result in autocompletion help to determine the correct dependencies. After adding the Spring Framework groupId and artifactId entries, as shown in the following screenshot, the Ctrl + Space bar keyboard shortcut will open the available matching entries for the artifactId starting with the text spring:

If this autocomplete list is not available, it may be due to the Maven repository being indexed for the first time. In this situation you will then see the following screenshot at the bottom of the editor:

Be patient and in a few minutes the indexing will be finished and the autocomplete will become available. Indexing is required to download available entries from the Maven repository.

The required Spring Framework components are as follows:

  • spring-context: This is the central artifact required for Spring's dependency injection container

  • spring-tx: This is the transaction management abstraction required for implementing transactional behavior

  • spring-context-support: These are various application context utilities, including Ehcache, JavaMail, Quartz, and FreeMarker integration

  • spring-jdbc: This is the JDBC data access library

  • spring-orm: This is the Object-to-Relation-Mapping (ORM) integration for JPA development

  • spring-instrument: This is for the weaving of classes

  • spring-webmvc: This is the Spring Model-View-Controller (MVC) for Servlet environments

  • spring-test: This is the support for testing Spring applications with JUnit

To add these dependencies using the latest Spring release version (3.2.4) requires the following additions to the pom.xml file:

<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-context</artifactId>
  <version>3.2.4.RELEASE</version>
</dependency>
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-context-support</artifactId>
  <version>3.2.4.RELEASE</version>
</dependency>
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-tx</artifactId>
  <version>3.2.4.RELEASE</version>
</dependency>
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-jdbc</artifactId>
  <version>3.2.4.RELEASE</version>
</dependency>
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-orm</artifactId>
  <version>3.2.4.RELEASE</version>
</dependency>
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-instrument</artifactId>
  <version>3.2.4.RELEASE</version>
</dependency>
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-webmvc</artifactId>
  <version>3.2.4.RELEASE</version>
</dependency>
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-test</artifactId>
  <version>3.2.4.RELEASE</version>
</dependency>

Understanding dependency scope

The final Spring Framework dependency is only required for testing. We can define this by adding a scope attribute with value test. This tells Maven that the dependency is only required when running the testing phase of the build and is not required for deployment.

<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-test</artifactId>
  <version>3.2.4.RELEASE</version>
  <scope>test</scope>
</dependency>

The javaee-web-api dependency that was automatically created by NetBeans has a scope of provided. This means the dependency is not required for deployment and is provided by the target server. The GlassFish 4 server itself is the provider of this dependency.

If the scope attribute has not been included, the dependency JAR will be included in the final build. This is the equivalent of providing a scope entry of compile. As a result, all the Spring Framework dependency JARs will be included in the final build file.

A full explanation of the Maven dependency mechanism and scoping can be found at http://maven.apache.org/guides/introduction/introduction-to-dependency-mechanism.html.

Defining Maven properties

The Spring Framework dependencies defined in pom.xml all have the same version (3.2.4.RELEASE). This duplication is not ideal, especially when we wish to upgrade to a newer version at a later time. Changes would be required in multiple places, one for each Spring dependency. A simple solution is to add a property to hold the release version value as shown in the following code:

<properties>
<endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<spring.version>3.2.4.RELEASE</spring.version>
</properties>

This custom property, which we have named spring.version, can now be used to replace the multiple duplicates as follows:

<dependency>
<groupId>org.springframework</groupId>
  <artifactId>spring-context-support</artifactId>
  <version>${spring.version}</version>
</dependency>

The ${spring.version} placeholder will then be substituted with the properties value during the build process.

Understanding Maven-build plugins

The Maven build process executes each defined build plugin during the appropriate build phase. A full list of build plugins can be found at http://maven.apache.org/plugins/index.html. We will introduce plugins as needed in subsequent chapters, but the default plugins created by the NetBeans IDE are of interest now.

The maven-compiler-plugin controls and executes the compilation of Java source files. This plugin allows you to specify both the source and target Java versions for compilation as shown in the following code:

<plugin>
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-compiler-plugin</artifactId>
  <version>3.1</version>
  <configuration>
    <source>1.7</source>
    <target>1.7</target>
    <compilerArguments>
      <endorseddirs>${endorsed.dir}</endorseddirs>
    </compilerArguments>
  </configuration>
</plugin>

Changing these values to 1.6 may be required when compiling projects for older Java servers running on the earlier versions of Java.

The maven-war-plugin builds a WAR file for the project as follows:

<plugin>
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-war-plugin</artifactId>
  <version>2.3</version>
  <configuration>
    <failOnMissingWebXml>false</failOnMissingWebXml>
  </configuration>
</plugin>

The default generated WAR filename is {artifactId}-{version}.war, which can be changed by including the warName configuration property. We will be adding properties to this plugin when building the project for production release in the final chapter. A full list of maven-war-plugin options may be found at http://maven.apache.org/plugins/maven-war-plugin/war-mojo.html.

The maven-dependency-plugin copies dependency JAR files to the defined output directory as shown in the following code:

<plugin>
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-dependency-plugin</artifactId>
  <version>2.6</version>
  <executions>
    <execution>
      <phase>validate</phase>
      <goals>
        <goal>copy</goal>
      </goals>
      <configuration>
        <outputDirectory>${endorsed.dir}</outputDirectory>
        <silent>true</silent>
        <artifactItems>
          <artifactItem>
            <groupId>javax</groupId>
            <artifactId>javaee-endorsed-api</artifactId>
            <version>7.0</version>
            <type>jar</type>
          </artifactItem>
        </artifactItems>
      </configuration>
    </execution>
  </executions>
</plugin>

This is useful to see which JARs are used by the project and to identify what transitive dependencies are required (dependencies of dependencies).

We will modify this plugin to copy all compile-time dependencies of the project to a directory in ${project.build.directory}. This special build directory is under the root folder of the project and is named target, the target destination of the build process. The updated entry will now look as follows:

<plugin>
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-dependency-plugin</artifactId>
  <version>2.1</version>
  <executions>
    <execution>
      <id>copy-endorsed</id>
      <phase>validate</phase>
      <goals>
        <goal>copy</goal>
      </goals>
      <configuration>
        <outputDirectory>${endorsed.dir}</outputDirectory>
        <silent>true</silent>
        <artifactItems>
          <artifactItem>
            <groupId>javax</groupId>
            <artifactId>javaee-endorsed-api</artifactId>
            <version>7.0</version>
            <type>jar</type>
          </artifactItem>
        </artifactItems>
      </configuration>
    </execution> 
    <execution>
      <id>copy-all-dependencies</id>
      <phase>compile</phase>
      <goals>
        <goal>copy-dependencies</goal>
      </goals>
      <configuration>
        <outputDirectory>${project.build.directory}/lib
        </outputDirectory>
        <includeScope>compile</includeScope>
      </configuration> 
    </execution>
  </executions>
</plugin>

As we are now performing two executions in the single plugin, each execution needs its own <id>. The second execution, with ID copy-all-dependencies, will copy all dependent JARs with the scope compile to the target/lib directory.

Executing the Maven build

The simplest way to execute a build is to click on the Clean and Build Project button in the toolbar. You can also right-click on the project node in the Projects tab and select Clean and Build from the menu. The build process will then execute each defined phase in the POM, resulting in Java code compilation, dependency resolution (and copying), and finally, WAR file generation. Opening the target directory structure will display the build result as follows:

Even though we have not written a single line of code, the generated WAR file task-time-tracker-1.0.war can now be deployed to the GlassFish server.

 

Starting the GlassFish 4 server


Opening the Services tab and expanding the Servers node will list the GlassFish server that was installed during the NetBeans installation process. You can now right-click on the GlassFish Server 4.0 node and select Start as shown in the following screenshot:

The Output panel should now open at the bottom of your NetBeans IDE and display the startup results. Select the GlassFish Server 4.0 tab to view the details.

The fifth-last line identifies that the server has started and is listening to port 8080, written as 8,080 in the log:

INFO: Grizzly Framework 2.3.1 started in: 16ms - bound to [/0.0.0.0:8,080]

You can now open your preferred browser and view the page http://localhost:8080.

Note

Note that depending on your environment, you may have other applications listening to port 8080. In these circumstances, you will need to substitute the correct port, as defined in the GlassFish server output, in place of 8080.

You can now stop the server by right-clicking on the GlassFish Server 4.0 node and clicking on Stop.

 

Running the Task Time Tracker project


We have already built the project successfully; it is now time to run the project in GlassFish. Click on the Run toolbar item to start the process as follows:

The output should display the process, first building the project followed by starting and deploying to the GlassFish server. The final step will open your default browser and display the world-renowned message that is loved by all developers, as shown in the following screenshot:

Congratulations! You have now configured the core components for developing, building, and deploying a Spring Java project. The final step is to change the text on the default page. Open the index.html file as shown in the following screenshot:

Change <title> to Task Time Tracker Home Page and the <h1> text to Welcome to Task Time Tracker!. Save the page and refresh your browser to see the change.

Note

Didn't see the updated text change on browser refresh? Under some circumstances, after deploying to GlassFish for the first time, the changes made in the index.html file may not be seen in the browser when you refresh the page. Restarting your NetBeans IDE should fix the issue and ensure subsequent changes are immediately deployed to GlassFish when any project resource is saved.

 

Summary


In this chapter, you have been introduced to some of the key technologies we will be using in this book. You have downloaded and installed the MySQL database server, the JDK, and the NetBeans IDE. We then introduced Maven and how it is used to simplify the building and management of Java projects. We finally deployed our skeleton Task Time Tracker project to GlassFish without writing a single line of code.

Although we have added the Spring Framework to our project, we are yet to delve into how it is used. Likewise, we are yet to mention Sencha Ext JS. Be patient, there is plenty more to come! The next chapter will introduce our Task Time Tracker database tables and start our development journey.

About the Author

  • Gerald Gierer

    Gerald Gierer has been involved in enterprise web application projects for more than 15 years and continues to find his work challenging and rewarding. He started his software development career working with C, PowerBuilder, and Unix, until the rise of the Internet and Java caught his attention. In 2000, he made a conscious decision to focus on Internet application development using the Java language.

    The frustration of working with the first Enterprise JavaBeans (EJB) implementations was the predominant reason he investigated the alternatives that could make enterprise development more productive. In 2004, he first heard of the Spring framework and quickly realized how comprehensive and well-designed an alternative this was to EJB. Since then he has architected and developed many Spring projects using a range of view technologies including JSP, JSF, Struts, Tiles, Freemarker, DWR, and YUI.

    In 2009, he became aware of Ext JS and was immediately struck by the power of this JavaScript framework. Having spent countless hours building complex web pages from scratch, Ext JS was a breath of fresh air for the client realm. He has been working with Ext JS ever since.

    He lives in Geelong, Australia, but often spends time in Europe, having lived and worked for five years in Munich. In his spare time, he enjoys keeping fit, brewing beer, being outdoors, and rock climbing—a passion that has kept him sane for more than 25 years.

    Browse publications by this author

Latest Reviews

(1 reviews total)
Un excelente material que nos lleva paso a paso en la construcción de un software utilizando una metodología muy clara y fácil de seguir. Algo que me pareció muy importante es que todos los ejemplos de código fuente funcionaron a la perfección por lo que pude obtener un resultado muy satisfactorio.
Book Title
Unlock this full book FREE 10 day trial
Start Free Trial