Creating a simple Web application for Tomcat in IntelliJ IDEA 12

From IntelliJ-Wiki

Jump to: navigation, search

Contents

Introduction

IntelliJ IDEA supports integration with the Apache Tomcat servlet container and makes it possible to develop and deploy Web applications right from within the IDE. This spares you from the need to download any libraries and create a deployment descriptor manually. IntelliJ IDEA also arranges the sources of your application so they comply with the requirements to the runtime application organization.

IntelliJIDEA helps:

  • Pack the data to deploy. For this purpose, IntelliJ IDEA uses an artifact which defines the files and resources to be packed and where to put them after packing.

Prerequisites

  • You are working with IntelliJ IDEA Ultimate Edition version 12 or higher.
  • Tomcat 7 server is installed on your machine and integrated with IntelliJ IDEA. Let us configure this integration in the next section.


Integrating Tomcat Server with IntelliJ IDEA

Before we start working on an application, let’s integrate Tomcat server and IntelliJIDEA using the application server configuration (Image 1). This can be done even without an open project, because application server settings belong to the level of your workspace.

To do that, press Ctrl+Alt+S, and then under the IDE Settings, click Application Servers (1). On the Application Servers page, click File:idea_12_add.png (2), and select Tomcat Server. In the Tomcat Server dialog box, specify two things:

  • Tomcat home (3) – a directory where your Tomcat server is installed.
  • Tomcat base directory (4) - a directory where Tomcat config files are located (by default the Tomcat installation directory is used).
Image 1. Adding Tomcat server.

Having defined the paths for your local Tomcat server, click OK and return to the Application Servers page (Image 2). Let’s assign some meaningful name to our server configuration – let it be Tomcat 7 (1).

If you so need, you can extend the configuration with the various additional libraries, but for our example they are not required.

Image 2. Application Servers page: Tomcat server added.

That is all; your local Tomcat server is ready for running applications from IntelliJ IDEA, and we’ll now start with the project.

Creating a New Project

The first step in developing a Web application in IntelliJ IDEA is to create a project:

Choose File | New Project on the main menu or click the Create New Project icon on the Welcome screen (Image 3).

Image 3. Welcome screen.

On the first page of the New Project wizard (Image 4), choose Java Module (1) in the left-hand pane.

Specify the name of the project Hello_world (2) and its location (3). IntelliJ IDEA automatically creates a Java module in the project. By default, the name of this module will be the same as the project name, Hello_world (4).

Select the Create source root check box (5) and accept the default name src (6) for it.

Image 4. Creating a new project: choosing module type and specifying project name.

On the second page of the wizard (Image 5), we’ll enable Web development through the dedicated Web facet. To do that, let’s select the Web Application check box (1).

Note: The term facet is used exclusively in IntelliJ IDEA. A facet determines the way IntelliJ IDEA treats the contents of a module, the set of components to be downloaded and configured, and the descriptors to be generated.

Image 5. Creating a new project: adding Web facet.

Now the skeleton of our application is ready. First, let’s look deeper into its structure.

Exploring a Web Application

To explore our Web application, we’ll use the Project tool window that shows the following files and folders (Image 6):

Image 6. Exploring the application.

The .idea (1) folder contains a number of subfolders, mainly with internal IntelliJ IDEA information.

The web (2) folder contains a WEB-INF subfolder with the web.xml (3) application descriptor.

index.jsp file (4) generated by IntelliJ IDEA represents the home page of your application.

The External Libraries (5) folder contains all the libraries required for Web development.

Besides generating the above structure and data, IntelliJ IDEA has produced an artifact to deploy. So we can start the application straight away (Image 7): in the Project tool window, right-click index.jsp (1) and choose Run index.jsp on the context menu (2). IntelliJ IDEA creates a temporary run configuration index.jsp on the fly and launches the application.

Image 8. The application home page.

Your default browser displays the following page at http://localhost:8080/index.jsp (Image 8):

Image 8. The application home page.

The page is empty because the index.jsp file is just an empty stub.

Congratulations! You have created and launched a Web application. Now it is just a stub, and we are going to expand its functionality, which is described in details in the following section.

Creating Elements of Your Application

To illustrate the mainstream Web development workflow in IntelliJ IDEA, let’s develop a simple “Hello world!” application that will consist of the following elements:

  • A Java class with one method that returns a “Hello, world!” string.

Creating a HelloWorld Class

Let’s start with creating a HelloWorld Java class inside a package.

Create a Sample package (Image 9): right-click the src node (1), choose New (2) | Package (3) on the context menu, and type Sample (4) in the New Package dialog box.

Image 9. Creating a package.

To create a class (Image 10), right-click the Sample node (1), choose New (2) | Java Class (3), and type HelloWorld (4) in the Create New Class dialog box.

Image 10. Creating a Java class in a package.

IntelliJ IDEA creates a stub class HelloWorld (Image 11) with a package statement (1) and class declaration (2):

Image 11. Generated class stub.

Type the following code of the getMessage method inside the stub class:

public static String getMessage() {

return “Hello, world!”;

}

Now the class HelloWorld looks as follows (Image 12):

Image 12. The HelloWorld class is ready.

Defining a styles.css Style sheet

Now let’s configure the layout of our home page by defining a style sheet. We won’t configure a sophisticated layout - defining the color and positioning for messages seem enough to illustrate the process.

Create a style sheet: right-click the web node, choose New | File on the context menu, and type styles.css in the New File dialog box. IntelliJ IDEA opens the new styles.css file in the editor.

Let’s make the messages green and centered – for this purpose, type the following code:


.message { color: green; text-align: center; }

Developing an Application index.jsp Home Page

On creating the project, IntelliJ IDEA has produced a stub index.jsp file which will be used as the home page of your application. Let’s add more flesh to its code, to show the result of executing the HelloWorld class (Image 13).

  • Open index.jsp in the editor (F4).
  • Add a link to the style sheet:

<link rel="stylesheet" type="text/css" href="styles.css"/> (1)

  • Inside the <body></body> tag, type the following code (2):

<h3 class="message"><%=HelloWorld.getMessage()%></h3>

As you type, IntelliJ IDEA suggests importing the Sample.HelloWorld class (3).

Image 13. Updating index.jsp.

Press Alt+Enter. IntelliJ IDEA inserts the following import statement, as shown in Image 14:

<%@ page import="Sample.HelloWorld" %> (1)

Image 14. The file index.jsp is ready for running the application.

Now we have a Java class, a style sheet and a JSP page ready. Our next step is to prepare the data to be deployed to the Tomcat server, which is discussed in the next section.

Packing the Application Data to Deploy

To tell the Tomcat server what to process and where to find the application data, you need to define an artifact. An artifact can be an archive (war) or an exploded directory. In our case, when the project output is stored and processed locally, it is enough to submit the data in the exploded form.

During the project setup, IntelliJ IDEA has created a default artifact Hello_world:war exploded.

Let’s examine the contents of this artifact more closely:

Press Ctrl+Alt+Shift+S and click Artifacts. In the Artifacts page (Image 15), select the Show contents of elements check box (1).

Image 15. Configured artifact.
According to this artifact definition, the following will be submitted to the server:
  • The result of compiling the Hello_world module (2): the compiled class Sample.HelloWorld.
  • The contents of the web folder (3): index.jsp and styles.css.
  • The deployment descriptor web.xml (4).
The location of the application data to be processed by the Tomcat server is defined in the Output directory field (5).

Note: When you run Web applications on a local Tomcat server, the application sources are not copied to the Tomcat server installation folder. IntelliJ IDEA stores all the project output data required for running an application in a local folder which emulates the organization of a Web application on the server.

This artifact definition is enough to have our application successfully deployed. You do not need to change anything here, provided that all the required static content resources (.jpg, .png, .css, etc.) are stored in the web folder root.

We are getting closer to our goal – deploying Hello World application. In the next section, let us prepare everything for deployment.

Getting Ready for Deployment

Let us now create a run configuration, which will contain the parameters required to deploy and launch your application. To do that, choose Run | Edit Configurations (Image 16).

Image 16. Choosing Edit Configurations.

In the Run/Debug Configurations dialog box (Image 17), click File:idea_12_add.png, and from the list of available run/debug configurations, select Tomcat – Local:

Image 17. Creating a run configuration: choosing the configuration type.

The page for the Tomcat server consists of four tabs; in our example we’ll use just two of them.

In the Server tab (Image 18), let’s specify the following:

  • Name of the run configuration (1): Hello_world_local.
  • Application server to use (2): Tomcat 7.0.

To have the default browser opened automatically upon the application start, select the Start browser check box (4).

Image 18. Creating a run configuration.

However, we have not told IntelliJ IDEA that we need to deploy the Hello_world:war exploded artifact which we configured earlier. IntelliJ IDEA detects this discrepancy, warns us about that (5), and even suggests to fix it itself! All you need is click Fix (6).

Now if we switch to the Deployment tab (Image 19), we will see that IntelliJ IDEA has already added the Hello_world:war exploded artifact to the deployment list (1) and to the Build before launch list (3).

We also need to specify the application context root. Again, IntelliJ IDEA has done it for us, so just leave the default / (slash) in the Application context field (2).

Image 19. Specifying artifacts to deploy.

Now the run/debug configuration is ready, we can save it, and proceed with launching our application.

Running a Web Application on a Local Tomcat Server

From the Select Run/Debug Configuration drop-down list (1) on the toolbar, choose Hello_world_local, and click File:run.png on the toolbar (2), as shown in Image 20:

Image 20. Launching the application.

IntelliJ IDEA opens the http://localhost:8080/index.jsp page in the default browser (Image 21):

Image 21. The application is running.

Congrats! You have created and deployed a web application on a Tomcat server.

More Information

Documentation on Apache Tomcat 7.0 available at http://tomcat.apache.org/tomcat-7.0-doc/index.html.

Personal tools