Creating a simple Web application and deploying it to Tomcat

yanchuen

Creating a simple Web application and deploying it to Tomcat


Current revision (unreviewed)

Contents [hide] 1 Introduction 2 Prerequisites 2.1 Integrating Tomcat Server with IntelliJ IDEA 3 Creating a New Project 4 Exploring a Web Application 5 Creating Elements of Your Application 5.1 Creating a HelloWorld Class 5.2 Defining a styles.css Style sheet 5.3 Developing an Application index.jsp Home Page 6 Packing the Application Data to Deploy 7 Getting Ready for Deployment 8 Running a Web Application on a Local Tomcat Server 9 More Information

　　
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:

• Integrate IntelliJ IDEA and the local Tomcat server.
  

• Create a Web application using the New Project Wizard and get all the facilities required for Web development.
  

• Explore a Web application as a tree-view of files and folders.
  

• Create elements of a Web application.
  

• 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.
  

• Create a run configuration.
  

　　
Prerequisites

• You are working with IntelliJ IDEA Ultimate Edition version 9 or higher.
  

• Tomcat 6 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. 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. On the Application Servers page, click http://wiki.jetbrains.net/i/images/a/a7/Add.png (1), and select Tomcat Server. In the Tomcat Server dialog box, specify two things:

• Tomcat home (2) – a directory where your Tomcat server is installed.
  

• Tomcat base directory (3) - a directory where Tomcat config files are located (by default the Tomcat installation directory is used).
  

http://wiki.jetbrains.net/i/images/d/d9/Configure_application_server.png
　　Having defined the paths for your local Tomcat server, click OK and return to the Application Servers page. Let’s assign some meaningful name to our server configuration – let it be Tomcat 6.
　　If you so need, you can extend the configuration with the various additional libraries, but for our example they are not required.
http://wiki.jetbrains.net/i/images/4/40/Settings_application_servers_page.png
　　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.
http://wiki.jetbrains.net/i/images/d/d4/Welcome_screen.png
　　On the first page of the New Project wizard, make sure that the option Create project from scratch is selected.
http://wiki.jetbrains.net/i/images/a/af/Create_project_wizard_page1.png
　　On the second page of the wizard, specify the name of the project. Select the Create module check box, and choose Java Module as the module type. The name of this module will be Hello_world.
http://wiki.jetbrains.net/i/images/f/fc/Create_project_wizard_page2.png
　　On the third page of the wizard, choose the Create source directory option and accept the default name src for it.
http://wiki.jetbrains.net/i/images/1/12/Create_project_wizard_page3.png
　　On the fourth page of the wizard, we’ll enable Web development through the dedicated Web facet. To do that, let’s select the Web Application check box.
　　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.
http://wiki.jetbrains.net/i/images/e/e3/Create_project_wizard_page_4.png
　　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:
http://wiki.jetbrains.net/i/images/8/89/Project_tree.png
　　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: in the Project tool window, right-click index.jsp and choose Run index.jsp on the context menu. IntelliJ IDEA creates a temporary run configuration index.jsp on the fly and launches the application.
　　Your default browser displays the following page:
http://wiki.jetbrains.net/i/images/3/3c/Launch_default.png
　　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.
  

• An  application home page that displays the result of executing this Java code.
  

• A  style sheet to define the layout of the homepage.
  

　　
Creating a HelloWorld Class
　　Let’s start with creating a HelloWorld Java class inside a package.
　　Create a Sample package: right-click the src node, choose New | Package on the context menu, and type Sample in the New Package dialog box.
http://wiki.jetbrains.net/i/images/9/92/New_package_menu.png
　　Right-click the Sample node, choose New | Java Class, and type HelloWorld in the Create New Class dialog box.
http://wiki.jetbrains.net/i/images/2/28/New_class_menu_1.png
　　IntelliJ IDEA creates a stub class HelloWorld with the package statement and class declaration:
http://wiki.jetbrains.net/i/images/6/6d/Stub_clas_java.png
　　Type the following code of the getMessage method inside the stub class:
　　public static String getMessage() {
　　return “Hello, world!”;
　　}
　　
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.

• Open index.jsp in the editor (F4).
  

• Add a link to the style sheet:
  

　　 (2)

• Replace the default text inside the  tag as follows (3):
  

　　
　　As you type, IntelliJ IDEA suggests you to import the Sample.HelloWorld class.
http://wiki.jetbrains.net/i/images/6/6d/Add_import_statement_intention_action.png
　　Press Alt+Enter. IntelliJ IDEA inserts the following import statement:
　　
http://wiki.jetbrains.net/i/images/f/f8/Import_statement_added.png
　　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, select the Show contents of elements check box (1).
http://wiki.jetbrains.net/i/images/a/a8/Artifact.png

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.
http://wiki.jetbrains.net/i/images/8/82/Run_edit_configurations.png
　　In the Run/Debug Configurations dialog box, click http://wiki.jetbrains.net/i/images/a/a7/Add.png, and from the list of available run/debug configurations, select Tomcat – Local:
http://wiki.jetbrains.net/i/images/8/85/Configure_server_choose_server_type_local.png
　　The page for the Tomcat server consists of four tabs; in our example we’ll use just two of them.
　　In the Server tab, let’s specify the following:

• Name of the run configuration (1): Hello_world_local.
  

• Application server to use (2): Tomcat 6.
  

• URL address at which the home page of the application will be available (3): http://localhost:8080.
  

　　To have the default browser opened automatically upon the application start, select the Start browser check box (4).
http://wiki.jetbrains.net/i/images/1/1a/Run_configuration_server.png
　　Next, in the Deployment tab, let’s choose the artifact to be deployed: select the check box next to the Hello_world:war exploded artifact (1):
http://wiki.jetbrains.net/i/images/5/5a/Run_configuration_deployment.png
　　Next, specify the application context root. In the Application context field (2), leave the default / (slash).
　　Select the Build Artifacts' check box (3).
　　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 http://wiki.jetbrains.net/i/images/9/98/Run.png on the toolbar (2).
http://wiki.jetbrains.net/i/images/a/a6/Launch_application.png
　　IntelliJ IDEA opens the http://localhost:8080/index.jsp page in the default browser:
http://wiki.jetbrains.net/i/images/3/3c/Result.png
　　Congrats! You have created and deployed a web application on a Tomcat server.