eclipse web tools

© 2006 IBM CorporationMade available under the EPL v1.0

2006 WebSphere Services Technical Conferenceworld class skill building and technical enablement

May 1-5, 2006 • Las Vegas, NV

SucceedCollaborate

Learn

Network

SucceedCollaborate

Learn

Network

Eclipse Web ToolsEclipse Web Tools

Session Number: D14Session Number: D14

Arthur Ryman, Arthur Ryman, [email protected]@ca.ibm.comChuck Brigham, Chuck Brigham, [email protected]@us.ibm.com

D142006 WebSphere Services Technical Conference

© 2006 IBM Corporation 2

ObjectivesObjectives

You will learn about the structure of the Eclipse Web Tools Platform (WTP) project

You will be given an overview the WTP release roadmap

You will be shown a Quick Tour demonstration that touches on many of the key functional components of WTP

After this session you will be able to use WTP and attend further sessions that go into more detail about J2EE and Web services tools

Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.

Other company, product, or service names may be trademarks or service marks of others.



AbstractAbstract

The Web Tools Platform (WTP) Project extends Eclipse with tools for developing Java Web Applications. The Web Standard Tools subproject contains tools for HTML, CSS, JavaScript, XML, Web Services and Data access. The J2EE Standard Tools subproject contains tools for servlets, JSP, JSF, EJB, and Java Web Services. The WTP project was initiated by IBM and seeded with core components of Rational Application Developer (RAD) V6. WTP will be the basis for the next major release of RAD. This session gives and overview of the project, explains its structure and goals, and demonstrates the tools.



OutlineOutline

Project Overview Release Roadmap

New in WTP 1.0

New in WTP 1.5

Beyond Callisto

Quick Tour Demo Dynamic Web Projects

JSPs and Servlet

Database Access

Web Services



Project OverviewProject Overview

WTP provides tools for Java Web application development Tools for application developers

Platform for tool developers

Subprojects focus on open standards Web Standard Tools – IETF, W3C, OASIS, WS-I, ANSI, etc

J2EE Standard Tools – JCP

IBM contributed core components of Rational Application Developer V6.0 and remains the largest contributor

BEA, Oracle, Sybase and many others participate in WTP development

IBM will adopt WTP 1.5 in Rational Application Developer V7.0



IETFW3COASISWS-IECMAANSI

De Jure Standards

De Facto Standards

Web Technologies

Java Technologies

WST

HTML, XML, XSLT, CSS, JS, WSDL,

SOAP, UDDI

JST

Servlet, JSP,EJB, JAX-RPC,JDBC, JAXP,

JSF, J2EE

XUL PHP

Struts Hibernate Spring

JDO

WTP Subprojects WTP Subprojects and Open Standardsand Open Standards

SQL

JCP

Apache ObjectWeb SourceForge

MozillaZend



Web Standard Tools (WST)Web Standard Tools (WST)

Web Projects

Web server control

Structured Source Editing Framework

HTML, JavaScript, CSS

XML, DTD, XSD

Web services (WSDL, WS-I)

SQL, relational database access



J2EE Standard Tools (JST)J2EE Standard Tools (JST)

J2EE Projects

J2EE server control

Servlets

JSP

EJB

Java Web services (JAX-RPC)



Release RoadmapRelease Roadmap

WTP 0.7, July 2005 – Tools for Application Developers 0.7.1 September, 2005

WTP 1.0, December 2005 – Platform for Tool Developers 1.0.1 February, 2006

1.0.2 April, 2006

1.0.3 TDB

WTP 1.5, June 2006 – Callisto Simultaneous Release 1.5.1 TBD

1.5.2 TBD

WTP 2.0, June 2007 – Web 2.0, Java EE 5



New in WTP 1.0New in WTP 1.0

First wave of Platform APIs Component descriptors/scanners

Initial Feature definitions

Project Facets

External server adapters and runtimes installed via Update Manager

More supported servers

Adopter Hot List

Improved Help

Improved Scalability

Lots of other bug fixes and enhancements!



New in WTP 1.5 (Callisto)New in WTP 1.5 (Callisto)

Initial steps towards Java EE 5 JSF Tools Incubator

Dali EJB 3.0 Persistence Tools

Glassfish server adapter hosted at java.net

Components moved to Eclipse Platform: Common Navigator (Project Explorer)

Tabbed Property View

More Platform APIs

Adopter Usage/Breakage Scans

XML based Help – DITA

Lots of other bug fixes and enhancements!



JSF Tools Incubator ProjectJSF Tools Incubator Project

Led by Oracle with contributions from Sybase and IBM JSF-JSP page source editor

application configuration (faces-config.xml) source/graphical editor

JSF library registry



Dali EJB ORM Incubator ProjectDali EJB ORM Incubator Project

Support for development of Java Persistence API (JPA) persistent Entities within Eclipse

Leverage and integrate into existing Eclipse platform and projects, esp. WTP, DTP



Design Time Mapping ValidationDesign Time Mapping Validation

ADDRESS

ID CITY COUNTRY P_CODE

Default mapping won’t work!



WTP 2.0 - Beyond CallistoWTP 2.0 - Beyond Callisto

DTP Adoption Remove Data Tools

Java EE 5 support Update J2EE models and API Graduation of JSF and Dali projects

AJAX Tools Framework Incubator Improved JavaScript editor and new debugger

Collaboration with PHP Tools Project Improved Apache Web server support

Collaboration with SOA Tools Project Improved WS-* support

Continued definition of Platform APIs and Features Focus on adopters

© 2006 IBM CorporationMade available under the EPL v1.0

2006 WebSphere Services Technical Conferenceworld class skill building and technical enablement

May 1-5, 2006 • Las Vegas, NV

SucceedCollaborate

Learn

Network

SucceedCollaborate

Learn

Network

Quick Tour of Eclipse WTPQuick Tour of Eclipse WTP



WTP Quick Tour IterationsWTP Quick Tour Iterations

1. Configure an application server, create a Web application, develop a simple JavaServerTM Pages (JSP) document that prints a greeting, and run it on the server.

2. Add a login JSP, write Java scriptlets to display the user name, create a Java servlet that controls the application page flow, and debug the servlet and JSPs.

3. Create a database to store user information, develop an SQL query to access it, and add Java Database Connectivity (JDBC) calls to your servlet to invoke the query and retrieve the user information.

4. Deploy the database query as a Web service, generate a JSP test client that invokes the Web service, and monitor the Simple Object Access Protocol (SOAP) message traffic.

For the most benefit, download a recent WTP release and follow along!



Iteration 1: J2EE Web ApplicationsIteration 1: J2EE Web Applications

In iteration 1 we will configure our development environment, and create a dynamic Web application

Tasks: Configure an application server

Create a Dynamic Web application project

Develop a simple JavaServer Pages (JSP) document that prints a greeting

Run the JSP on the server



Configure an Application ServerConfigure an Application Server

1. Window > Preference > Server preferences > Installed Runtimes

2. Click Add. Specify the location of Tomcat.

You must specify a JDK so your JSPs will compile.

An application server is needed to run our Java Web application



Create a Web Application ProjectCreate a Web Application Project

1. Select File > New > Project … > Web> Dynamic Web Project wizard.

2. Name the project Project1.

3. Associate Tomcat with Project1.

4. Click Finish.

The project will contain all of our Web artifacts such as JSPs, servlets



Develop a Simple JSP that Prints a Develop a Simple JSP that Prints a GreetingGreeting

1. Right click on Project1’s WebContent folder and select New->JSP.

2. Name the JSP hello-world.jsp.

3. Click Next. Select JSP with html markup.

4. Click Finish.

5. Change the title and add body contents for “Hello, world.”

The JSP will display “Hello, World” in a client’s Web browser



hello-world.jsphello-world.jsp



Run the JSP on the ServerRun the JSP on the Server

1. Right click on hello-world.jsp and select Run As > Run on Server.

2. Tomcat starts up and displays theJSP.

To make use of the JSP it must be run on a server, in our case Tomcat



Iteration 1 SummaryIteration 1 Summary

We configured Tomcat to act as our application server

We created a Web application project

We developed a simple JSP that prints “Hello, world” in a browser

We ran the JSP on the Tomcat server



Iteration 2: Servlets and ScriptletsIteration 2: Servlets and Scriptlets

In iteration 1 we created a JSP that had static content

In iteration 2 we will add dynamic content

Tasks:

Add a Java Scriptlet to a JSP

Debug a JSP

Create a Servlet

Debug a Servlet



Add a Java Scriptlet to a JSPAdd a Java Scriptlet to a JSP

1. Add the following scriptlet to the JSP’s body:<%

String person = "?";

String user = request.getParameter("user");

if (user != null) person = user;

%>

Welcome to WTP, <%= person %>!

2. Select Run As->Run on Server

3. Provide the name by appending ?user=EclipseCon

Scriptlets allow us to add Java code to a JSP that will get executed on the server



hello-world.jsp?user=EclipseConhello-world.jsp?user=EclipseCon



Debug a JSPDebug a JSP

1. Set a break point on the line

String user = request.getParameter("user");

by double clicking in the margin.

2. Right click on hello-world.jsp and select Debug As > Debug on Server. Tomcat will now restart in debug mode.

3. Select to resume execution.

4. Change the user to Alice. Notice the variables view shows the changed value.

Debugging a JSP allows us to step through the JSP’s execution path



Debug hello-world.jspDebug hello-world.jsp



Create a ServletCreate a Servlet

JSPs should only contain presentation logic.

Application logic should be performed by servlets.

We will now add a login JSP and a servlet to handle the login request.



Create a Login JSPCreate a Login JSP

1. Create login-user.jsp the same way we created hello-world.jsp.

2. Add the following content to the JSP:

The login JSP will submit information to a servlet using a form

<head> <title>Login User</title></head><body> <h1>Login User</h1> <% String error_message = ""; Object error = request.getAttribute("error"); if (error != null) error_message = error.toString(); %> <form action="HelloServlet"> <table cellspacing="4"> <tr> <td>Enter your user name:</td> <td><input name="user" type="text" size="20"></td> <td style="color: red"><%= error_message %></td> </tr> <tr> <td></td> <td><input type="submit" value="Login"></td> <td></td> </tr> </table> </form></body>



Create a ServletCreate a Servlet

1. Right click on Project1 and select New->Servlet.

2. Specify the package name org.eclipsecon and the name HelloServlet.

3. Click Next. Accept the default name and mapping.

4. Click Finish. The wizard creates the Servlet skeleton.

The servlet will take the input from our JSP, perform some logic, and return either the login JSP or the hello world JSP



Add Logic to the ServletAdd Logic to the Servlet

1. Add the following implementation to the doGet method:

Because we specified GET in login-user.jsp we will implement doGet()

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String url; String user = request.getParameter("user"); if (user == null || user.length() == 0) { url = "/login-user.jsp"; request.setAttribute("error", "User name must not be empty."); } else { url = "/hello-world.jsp"; } ServletContext context = getServletContext(); RequestDispatcher dispatcher = context.getRequestDispatcher(url); dispatcher.forward(request, response); }



Run the Updated ApplicationRun the Updated Application

Right click on login-user.jsp and select Run As->Run on Server



Debug a ServletDebug a Servlet

1. Set a breakpoint in HelloServlet on the lineString user = request.getParameter("user");

by double clicking in the margin.

2. Right click on HelloServlet.java and select Debug As->Debug on Server.

3. Select to resume execution.

4. Try changing the name and watch the execution path.

Debugging a servlet is very similar to debugging a Java class




We made our JSP dynamic by adding a Java Scriptlet

We debugged our JSP on the server

We created a login JSP and a servlet to handle login requests

We debugged the servlet on the server



Iteration 3: Database AccessIteration 3: Database Access

In iteration 2 we created a dynamic Web application

In iteration 3 we will add a data layer to our Web application

Tasks:

Connect to a Database

Execute SQL Statements

Add Database Access to our Web Application



Show the Database ViewsShow the Database Views

1. Click on Window > Show View > Other…

2. Select the Database Explorer and Data Output views and click OK.

WTP provides two views that assist in working with databases. We need to show these views before proceeding.



Connect to a DatabaseConnect to a Database

1. Right click in the Database Explorer and select New Connection…

2. Select Derby 10.1.

3. Enter a convenient location for the database such as C:\Project1db

4. Enter the location of derby.jar. It’s located in the plugins dir in org.apache.derby.core.

5. Click Test Connection.

6. If the connection test was successful, click Finish.

Before working with a database we must first connect to it.



Execute SQL StatementsExecute SQL Statements

1. Open the SQL Scrapbook by clicking the button in the Database Explorer, selecting the Project1db, and enter a name of project1sql.sqlpage.

2. Enter the following statements into the editor. (You can replace a name with your own.

3. Select each statement individually, right click on it and select Run SQL.

4. Results are shown in the Data Output view.

We will now populate our database by executing SQL statements.

CREATE TABLE WEB1.LOGIN (USERID CHAR(8) NOT NULL, FULLNAME CHAR(20), PRIMARY KEY(USERID))

INSERT INTO WEB1.LOGIN (USERID, FULLNAME) VALUES ('dai','Naci Dai')

INSERT INTO WEB1.LOGIN (USERID, FULLNAME) VALUES ('mandel','Lawrence Mandel')

INSERT INTO WEB1.LOGIN (USERID, FULLNAME) VALUES ('ryman','Arthur Ryman')

SELECT * FROM WEB1.LOGIN ORDER BY FULLNAME

SELECT FULLNAME FROM WEB1.LOGIN WHERE USERID = 'ryman'



Disconnect from the DatabaseDisconnect from the Database

Derby only supports a connection to a given database from one process – we need to disconnect before using the database in our Web application

1. Right click on the Project1db in the Database Explorer and select Disconnect.



Add Database Access to our Web Add Database Access to our Web ApplicationApplication

We will now update our Web application to retrieve user names from the database we created

There are 4 tasks to perform:

1. Add the Derby library to our Web application

2. Create a class that will access the database

3. Update our Servlet to access the user name from the database class

4. Update our hello world JSP to display the user name



Add the Derby Library to our Web Add the Derby Library to our Web ApplicationApplication

1. Copy derby.jar to WEB-INF/lib

• note: While this method works fine for a single application, if multiple applications need access to a Derby database a shared copy of Derby must be used.

Our application needs access to the Derby libraries in order to access a Derby database



Create a Class that will Access the Create a Class that will Access the DatabaseDatabase

1. Create a new class named Database.java in the same package as HelloServlet.java.

The class will contain all the logic to access the databasepublic class Database { public String lookupFullname(String userid) throws SQLException { Connection connection = null; PreparedStatement statement = null; ResultSet resultset = null; String fullname = ""; try { Class.forName("org.apache.derby.jdbc.EmbeddedDriver"); connection = DriverManager.getConnection("jdbc:derby:C:\\{Project1db"); String QUERY = "SELECT FULLNAME FROM WEB1.LOGIN WHERE USERID = ?“; statement = connection.prepareStatement(QUERY); statement.setString(1, userid); resultset = statement.executeQuery(); if (resultset.next()) fullname = resultset.getString("FULLNAME").trim(); } catch (Exception e) { e.printStackTrace(); } finally { if (resultset != null) resultset.close(); if (statement != null) statement.close(); if (connection != null) connection.close(); } return fullname; } }



Update Our Servlet to use the Database Update Our Servlet to use the Database classclass

1. Update the doGet method of HelloServlet.java to use Database.java.

The Servlet will now access the user name from the database

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String url = "/hello-world.jsp"; String user = request.getParameter("user"); if (user == null || user.length() == 0) { url = "/login-user.jsp"; request.setAttribute("error", "User name must not be empty."); } else { try { String fullname = new Database().lookupFullname(user); request.setAttribute("fullname", fullname); } catch (SQLException e) { e.printStackTrace(); } } ServletContext context = getServletContext(); RequestDispatcher dispatcher = context.getRequestDispatcher(url); dispatcher.forward(request, response); }



Update JSP to Display the User NameUpdate JSP to Display the User Name

1. Update the hello-world.jsp to retrieve the value of the fullname parameter and use it instead of the user parameter if it has been specified by changing the Scriptlet as follows:

<% String person = "?"; String user = request.getParameter("user"); if (user != null) person = user; Object fullname = request.getAttribute("fullname"); if (fullname != null) person = fullname.toString(); %>

The JSP needs to be updated to use fullname.



Run the Updated Web ApplicationRun the Updated Web Application

1. Run login-user.jsp on the server.

2. Try entering a user id. The resulting page now displays the name instead of the user id.




We connected to a Derby database

We executed SQL statements to populate the database and view the values we added

We added database access to our Web application enabling the application to display the user name instead of the user id.



Iteration 4: Web ServicesIteration 4: Web Services

In iteration 3 we created a data layer for our Web application

In iteration 4 we will expose that data through a Web service

Tasks:

Deploy a Web service

Test a Web service with a test client

Monitor SOAP messages



Deploy a Web ServiceDeploy a Web Service

1. Right click on Database.java and select Web Services > Create Web service.

2. Check the following items: Start Web service in Web

project

Generate a Proxy

Test the Web service

Monitor the Web service

3. Click Finish.

We will create a Web service using the bottom-up approach to expose our Database.java class.



Test a Web Service with a Test ClientTest a Web Service with a Test Client

1. Click on the lookupFullname method.

2. Enter the name “ryman”.

3. Click Invoke.

4. The Result pane displays the full name “Arthur Ryman” associated with the user id ryman.

The test client allows you to easily test a Web service. The test client was created by selecting the option in the WS wizard



Monitor SOAP MessagesMonitor SOAP Messages

1. The message you sent when testing the Web service can be seen by opening the TCP/IP monitor view. If not already open select Window > Show View > Other…> Debug > TCP/IP Monitor

2. Use the test client to test another name. The result shows up in the TCP/IP monitor.

Web services send SOAP messages between the client and server We can monitor these messages to see the traffic and find problems




We deployed a Web service that allows programmatic access to our database

We tested the Web service with a test client generated by the Web service wizard

We monitored SOAP messages sent to and from the Web service



SummarySummary

WTP contains many tools that simplify the development of Web applications including working with databases and working with Web services

Technologies supported by WTP include:CSS, DTD, EAR, EJB, HTML, XHTML, J2EE, JavaBeansTM, JavaScriptTM, JSP, Servlet, SQL, WSDL, XML, XML Schema, WAR, Web services

WTP is the base for WebSphere Application Server Toolkit (AST), Rational Application Developer (RAD), and more!

2006 WebSphere Services Technical Conference© 2006 IBM Corporation 55

QuestionsQuestions

•Please complete your session evaluation•Thank you

eclipse web tools

Documents