2012/09/24
24 Sep, 2012

How to develop and deploy web applications using WSO2 Developer Studio

  • Viraj Rajaguru
  • Associate Technical Lead - WSO2

 

Table Of Content

  1. Introduction
  2. Scenario
  3. Applies To
  4. Getting Ready
  5. Develop and deploy Web Applications
    1. Section 1 - Develop web applications using 'Dynamic Web Project' and deploy them on Apache Tomcat server.
    2. Section 2 - Develop web applications using 'WSO2 Web Application Project' and deploy them on Apache Tomcat server.
    3. Section 3 - Develop web applications using 'WSO2 Web Application' and deploy them on WSO2 Application Server.

Introduction

This tutorial shows how to develop web applications and deploy them on various servers using WSO2 Developer Studio. This article consists of 3 main topics.

1. Develop web applications using 'Dynamic Web Project' and deploy them on Apache Tomcat server.
2. Develop web applications using 'WSO2 Web Application Project' and deploy them on Apache Tomcat Server.
3. Develop web applications using 'WSO2 Web Application Project' and deploy them on WSO2 Application Server.


Scenario

In this tutorial I will explain how to develop and deploy a simple echo web application that requests the name of the user and replies with a greetings page after submitting the name. 


Applies To

WSO2 Developer Studio 2.0.0
Eclipse Helios SR2 3.6.2
Apache Tomcat 6.0.35
WSO2 Application Server 4.1.2


Getting Ready

1. Install WSO2 Developer Studio. You can find the installation guide here

2. Download Resources.zip file and extract to a directory. I will refer to this directory as "$DOWNLOAD_HOME" throughout this tutorial.

 


Develop and Deploy Web Applications



Section 1 - Develop web applications using 'Dynamic Web Project' and deploy them on Apache Tomcat server.

1.1. Create Web Application.

 

1.1.1 Download and install Apache Tomcat.

1.1.2 Open WSO2 Developer Studio. Go to File --> New --> Other

 

1.1.3 From the Dialog window select 'Dynamic Web Project' under 'Web' category. Click Next.

 

1.1.4 Give a name for the project. Let's give 'EchoWebApplication'. Click on 'New Runtime...' button under 'Target runtime' section.


 

1.1.5 Then select 'Apache Tomcat v6.0' under 'Apache' category. Check the checkbox 'Create a new local server' if it is unchecked. Click Next.


 

1.1.6 Give a name for the server and then browse the Tomcat installation directory. (I think you have successfully installed Apache Tomcat server earlier). Click Finish.


 

1.1.7 Select the created server for the Target runtime if it is not selected. Click Next. Again click Next while keeping default configurations. 


 

1.1.8 Check the 'Generate web.xml deployment descriptor' checkbox, unless it is checked. Click Finish.


 

1.1.9 Now you have successfully created a new web application. Let's add required source to complete our web application. Add index.jsp and Greetings.jsp from $DOWNLOAD_HOME/resources/jsp to 'WebContent' in the 'EchoWebApplication' project.


 

1.1.10 Create a package named 'org.wso2.sample', under 'src' in 'Java Resources' of the 'EchoWebApplication' project. (Right click on 'src' folder. Go to New --> Other. Select 'Package' under 'Java' Category. Click Next. Give the name 'org.wso2.sample' for the package. Click Finish)


 

1.1.11 Add ProcessServlet.java from $DOWNLOAD_HOME/resources/servlet to 'org.wso2.sample' package.


 

1.1.12 Let's Edit web.xml of this web application to map the servlet. You can find web.xml under 'WEB-INF' folder in the 'Web Content' folder of the Project.

1.1.13 Add following code snippet to web.xml

   <servlet>
        <servlet-name>Process Servlet</servlet-name>
        <servlet-class>org.wso2.sample.ProcessServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Process Servlet</servlet-name>
        <url-pattern>/echo.do</url-pattern>
    </servlet-mapping>

 

1.1.14 After editing the web.xml, content of the web.xml should be as follows.

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xmlns="https://java.sun.com/xml/ns/javaee" xmlns:web="https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="https://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
 <display-name>EchoWebApplication</display-name>
 <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
 </welcome-file-list>
 <servlet>
    <servlet-name>Process Servlet</servlet-name>
    <servlet-class>org.wso2.sample.ProcessServlet</servlet-class>
 </servlet>
 <servlet-mapping>
    <servlet-name>Process Servlet</servlet-name>
    <url-pattern>/echo.do</url-pattern>
 </servlet-mapping>
</web-app>  

 

1.2 Deploy web application on Apache Tomcat server.

 

1.2.1 Right click on 'EchoWebApplication' project. Go to Run As --> Run on Server.


 

1.2.2 Select the server and click Next.


 

1.2.3 You can see that EchoWebApplication is in the Configured section. Click Finish.


 

1.2.4 Now 'EchoWebApplication' will be deployed to the Apache Tomcat server and server will be automatically started. You can access your EchoWebApplication using https://localhost:8080/EchoWebApplication/


 



Section 2 - Develop web applications using 'WSO2 Web Application Project' and deploy them on Apache Tomcat server.

2.1. Create Web Application.

 

2.1.1 Open WSO2 Developer Studio using new workspace. Go to Developer Studio --> Open Dashboard



2.1.2 Click on "Web Application" under "Application Server" category.



2.1.3 Select "Create New Web Application" and click Next.



2.1.4 Enter Project name. Lets add "EchoWebApplication". Click Finish.



2.1.5 Now you have a created web application project containing folder structure as shown below.



2.1.6 Let's edit index.jsp according to our project. Add following code snippet to index.jsp and change the title to "Echo Web Application".

    <h3>Welcome !</h3>
    <FORM ACTION="echo.do" METHOD="POST">
           Please enter your name:
           <BR>
           <input type="text" name="name" value="" size=20/>
           <BR>
           <INPUT TYPE="SUBMIT" VALUE="Submit">
    </FORM>


2.1.7 After editing the index.jsp it should looks as bellow.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Echo Web Application</title>
</head>
<body>
    <h3>Welcome !</h3>
    <FORM ACTION="echo.do" METHOD="POST">
           Please enter your name:
           <BR>
           <input type="text" name="name" value="" size=20/>
           <BR>
           <INPUT TYPE="SUBMIT" VALUE="Submit">
    </FORM>
</body>
</html>

2.1.8 Add Greetings.jsp to "webapp" folder in "EchoWebApplication" project from $DOWNLOAD_HOME/resources/jsp. Following figure shows the folder structure after adding Greetings.jsp

2.1.9 To build this Web Application we should have servlet-api jar in project's build path. Lets add servlet-api jar into build path. Right click on the "EchoWebApplication" project and select Build Path --> Configure Build Path...  

2.1.10 Select "Libraries" tab. Click on Add External JARs... button and browse servlet-api-3.0.jar located in $DOWNLOAD_HOME/JARs folder. Click OK.

 

2.1.11 Now we have servlet-api jar in the build path. Lets add a servlet for our project. Create a package named 'org.wso2.sample', under 'src/main/java' in  'EchoWebApplication' project. (Right click on 'src/main/java' folder. Go to New --> Other. Select 'Package' under 'Java' Category. Click Next. Give the name 'org.wso2.sample' for the package. Click Finish)



2.1.12 Right click on created "org.wso2.sample" package and go to New --> Other... Select "Class" under "Java" category. Click Next.

2.1.13 Give "ProcessServlet" for name of the Java class and give "javax.servlet.http.HttpServlet" for the Superclass. Click Finish.

2.1.14 Insert following imports to the ProcessServlet.java class

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

2.1.15 And also insert following method to the ProcessServlet.java class

	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String name=req.getParameter("name");
		req.setAttribute("name", name);
		req.getRequestDispatcher("/Greetings.jsp").forward(req, resp);
	}

2.1.16 After editing the ProcessServlet.java , it should looks as below.

package org.wso2.sample;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ProcessServlet extends HttpServlet {

	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String name = req.getParameter("name");
		req.setAttribute("name", name);
		req.getRequestDispatcher("/Greetings.jsp").forward(req, resp);
	}
}

 

2.1.17 Let's edit web.xml of this web application to map the servlet. Open the web.xml of this web application. You can find web.xml under 'WEB-INF' folder in the 'webapp' folder.


 

2.1.18 Follow step 1.1.13 and step 1.1.14

2.1.19 Lets create a deployable archive out of this project. Right click on the "EchoWebApplication" project. Select "Export Project as Deployable Archive" Browse the Export Destination and click Finish.



 

2.1.20 Now we have EchoWebApplication_1.0.0.war file which can be deployed to Apache Tomcat server.

2.1.21 Put this EchoWebApplication_1.0.0.war to the $CATALINA_HOME/webapps folder. Start the Apache Tomcat server. You can access Web Application using https://localhost:8080/EchoWebApplication_1.0.0/


Section 3 - Develop web applications using 'WSO2 Web Application' and deploy them on WSO2 Application Server.

3.1. Create Web Application. 

3.1.1 Follow step 2.1.1 to step 2.1.18

3.1.2 Now you have "EchoWebApplication" project created in the workspace.

 

3.2. Deploy Web Application.

3.2.1 Go to Window --> Show View --> Other...



3.2.2 Select Servers under Server category. Click OK. Now you will have Servers View in the Eclipse Workbench.



3.2.3 Right Click on the Servers View. Select New --> Server.

3.2.4 Select WSO2 Carbon 3.2 based server for server type. Click Next.



3.2.5 Browse the WSO2 Application Server installation folder for CARBON_HOME. Click Finish.



3.2.6 Now you have added a WSO2 Application Server to the Servers View.

3.2.7 Now you have to create a "Carbon Application Project" which includes "EchoWebApplication" project, to deploy "EchoWebApplication" to WSO2 Application Server. So that go to WSO2 Developer Studio dashboard. (Developer Studio --> Open Dashboard). Click on "Carbon Application Project" under "Distribution" category. Give a name for project. Let's give "SampleDistributionProject". Check the "EchoWebApplication" item from the "Dependencies" list. Click Finish.

3.2.8 Right click on "SampleDistributionProject" in the Project Explorer and go to Run As --> Run on Server.

 

 

3.2.9 Select the server and Click Next.

3.2.10 You can see that "SampleDistributionProject" is in the Configured section. Click Finish.

3.2.11 WSO2 Application Server will be automatically started and Web Application will be deployed to the server. Go to https://localhost:9443/carbon/admin/login.jsp and enter "admin" as user name and password as well. Click on "Sign-in" button.

 

3.2.12 Click on "List" under Web Applications in the main menu.

3.2.13 Click on Go To URL of the "EchoWebApplication-1.0.0"

Author

Viraj Rajaguru, Software Engineer

 

About Author

  • Viraj Rajaguru
  • Associate Technical Lead
  • WSO2