© 2002 IBM Corporation Confidential | Date | Other Information, if necessary Web Application Development with WTP EclipseWorld 2005 Tim Wagner, WTP PMC lead BEA Systems Paul Meijer, program manager BEA Systems Ted Bashor, development lead BEA Systems *Other brands and names are the property of their respective owners

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v1.0 2 Talk Division Part I WTP project overview Basic WTP features Upcoming release summary (tool focus) Part II Advanced topics Upcoming release summary (API focus)

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v1.0 3 Agenda WTP overview Setup and configuration Development basics JSP editing Servlets Deployment descriptors Structure Source Editing (SSE) framework Server Running and debugging the web app

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v1.0 4 Deliver vendor-neutral tools and frameworks for Web applications on the Eclipse platform Open Standards + Open Source Eclipse WebTools Project

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v1.0 5 BEAs Eclipse Involvement Strategic Developer and board member Leading WTP project management committee WTP contributors JDT project to add 1.5 apt/mirror support AspectWerks / AspectJ merge XML and Schema enhancements JRockit profiling and memory leak detection Involvement with Pollinate (tools for Beehive)

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v1.0 6 Delivery Model User Workshop WTP Platform Ubiquity Shared Costs Plumbing Value-add Proprietary Customer-centric

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v1.0 7 Major WTP Themes (0.7 Release) Extend Eclipse into the domain of J2EE/Web Application development Define servers, runtimes, and modules Provide platform API and suitable models for tool developers Provide core tools for application developers High quality tools in their own right, plus exemplars for tool developers Collection of high-fidelity editing services for Web and J2EE-related languages

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v1.0 8 Contributing Organizations BEA Eteration Exadel IBM Inoopract JBoss ObjectWeb SAS Thales Turkcell University of Karlsruhe Oracle

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v1.0 9 IETF W3C OASIS WS-I ECMA ANSI 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 PHPStruts Hibernate Spring JDOSQL JCP Apache ObjectWeb SourceForge WTP Project Scopes

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v WTP Architecture Platform Frameworks Projects/Resources EMFGEFJEM WTP JDT JST WST Apache Xerces Axis Common J2EE Core Advanced Server Runtime JSP Advanced Web resources Web Services Debugging Basis XML RDB SQL Web Projects Server Runtime EJBJava WS Projects Modules Servlets Annotations CommonNavigatorViewsValidationCommand Internet

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Agenda WTP overview Setup and configuration WTP 0.7 download and setup JRE configuration Server runtime configuration Development basics JSP editing Servlets Deployment descriptors Structure Source Editing (SSE) framework Server Running and debugging the web app

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Setting up the WTP Plug-in Download the 0.7 WTP build from the download page at Before downloading WTP: Download and install Eclipse 3.1 Download and install the required plug-ins listed on the download page (EMF, GEF and JEM). Install these plug-ins into [eclipse-home] Download WTP-0.7. zip (without source) or WTP-sdk-0.7. zip (with source). Install WTP into [eclipse-home] On the first next launch, run eclipse –clean from the command line to update the installation's configuration (To run this tutorial, also download Apache Tomcat v5.5 from and J2SE JDK5.0 from

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Configuration – Installed JRE Point Eclipse to the installed JDK5.0

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Configuration – Server Runtime Add the appropriate server runtime

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Agenda WTP overview Setup and configuration Development basics J2EE perspective Project navigation JSP editing Servlets Deployment descriptors Structure Source Editing (SSE) framework Server Running and debugging the web app

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Development Basics - J2EE Perspective Switch to the J2EE perspective

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Development Basics – Project Navigation The Project Explorer categorizes the types of project you can create Previous Java projects are categorized under Other Projects There are separate projects for the various J2EE runtime components, that is, EJBs, Web Services, and Web projects A J2EE application is assembled in an Enterprise Application project

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Development Basics – Project Navigation To create a JSP-based web application, you need to create a Dynamic Web Project first File New Dynamic Web Project

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Development Basics – Project Navigation Make sure that Add module to an EAR project is not selected Here we build a standalone web application Checking this option will add a web application to an enterprise application You can create EJB projects, web service projects and additional web projects and add these to the same enterprise application and/or other enterprise applications Enterprise application projects assemble the associated EJBs, web services and web projects into an EAR and deploy it as a single unit Tomcat doesnt support EARs. To build an enterprise application, you will need a J2EE-compliant server runtime, such as JBoss or WebLogic Server

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Development Basics – Project Navigation The web project should look like this:

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Agenda WTP overview Setup and configuration Development basics JSP editing JSP tags HTML CSS JavaScript EL Completion Servlets Deployment descriptors Structure Source Editing (SSE) framework Server Running and debugging the web app

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v JSP Editing Create a JSP page Right-click WebContent, New JSP. Type addCandidate.jsp addCandidate.jsp is added to WebContent, and opens in the editor

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v JSP Editing Edit the title tags: registration page In the body of the page, start typing

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v JSP Editing Add the following code to the body: Name: ' /> User Name: ' /> Password: ' />

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Java Editing Create the CandidateForm bean Right-click JavaSource and select New Class Type package beans Type name CandidateForm The file is created in JavaSource/beans and opens in the source editor In the source editor, type: private String name = ; private String userName = ; private String password = ;

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Java Editing Select the fields and select Generate Getters and Setters…

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Java Editing In the dialog, create all getters and setters Save the form bean

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v JavaScript Editing The Generate button on the JSP page invokes JavaScript. Add the following JavaScript directly above the tag // Generate Random Password arrayOfChars = new Array("a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"); function randomChar() { arrayIndex = Math.ceil(Math.random() * (arrayOfChars.length - 1)); return arrayOfChars[arrayIndex]; } function generatePassword() { var password = randomChar() + randomChar() + randomChar() + randomChar() + Math.ceil(Math.random() * 100); document.myForm.password.value = password; }

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Agenda WTP overview Setup and configuration Development basics JSP editing Servlets Deployment descriptors Structure Source Editing (SSE) framework Server Running and debugging the web app

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Servlets NewCandidate servlet does server- side validation To create a servlet fast you should use the Servlet Wizard. In the demo we will use the manual approach To create the NewCandidate servlet: File New Other Select Class and click Next Type name NewCandidateServlet Type package servlets Type superclass javax.servlet.http.HttpServlet Click Finish

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Servlets Note in the package explorer that the servlet is by default stored under JavaSource

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Servlets Define the Servlet class as follows: public class NewCandidateServlet extends HttpServlet { public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String name = req.getParameter("name"); String userName = req.getParameter("userName"); String password = req.getParameter("password"); if (name.equals("") || userName.equals("") || password.equals("")) { req.setAttribute("validate-error", "Please fill in all fields"); req.getRequestDispatcher("/addCandidate.jsp").forward(req, resp); } else { req.getRequestDispatcher("/candidateAdded.jsp").forward(req, resp); }

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Servlets Place your cursor in the code fragment with red squiggles and press Ctrl+1 for Quick Fix suggestions.

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Servlets Do the suggested imports for all errors. The import section should now look like this: import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; If you use the Servlet Wizard, doPost and doGet stubs are created for you, and the right imports are included. Also, the servlet is automatically declared in web.xml. In our roundabout method, we will do this step manually.

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Agenda WTP overview Setup and configuration Development basics JSP editing Servlets Deployment descriptors Structure Source Editing (SSE) framework Server Running and debugging the web app

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Deployment Descriptors The servlet needs to be declared and bound to a URL: Locate web.xml in the package explorer and open it The file opens web.xml in design view

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Deployment Descriptors Declare the servlet by adding a deployment descriptor

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Deployment Descriptors Declare the servlet-name and servlet-class attributes. Now add the deployment descriptor to map the servlet to a URL pattern. In source view, you should see this fragment:

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v CSS Editing Edit addCandidate.jsp to display validation errors … A style errorFont is used to display errors. Link in a style sheet … registration page

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v CSS Editing Create the style sheet eclipseworld.css File New Other Web CSS

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v CSS Editing Edit the css "ISO ";.errorFont { font-weight: bold; font-style: normal; color: red; font-size: 150%; } Unfortunately, we created the css file in the wrong location…

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Refactoring In Project Explorer, right-click WebContent and select New Folder. Create the folder resources In Project Explorer, right-click eclipseworld.css and select Refactor Move…. Select resources

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v HTML Editing Create candidateAdded.jsp under WebContent and add this to the source: Registration Successful Register for Courses Registration Successful Welcome. Your registration under user name was successful.

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v HTML Editing Move the location of the hyperlink In Outline View click the anchor sign and drag it underneath the paragraph Notice that the source has been adjusted Press Ctrl+Shift+F to reformat the document

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v JSP Expression Language Completion In the tag, after courses.jsp, type ?name=${. Notice that the closing } automatically appears, and that an EL syntax error is detected Type pageContext. and see auto-completion Delete pageContext. and replace it with param['userName']

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Agenda WTP overview Setup and configuration Development basics JSP editing Servlets Deployment descriptors Structure Source Editing (SSE) framework Server Running and debugging the web app

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Structured Source Editor Framework About all these editors….. Multi-language editing support Extends basic Eclipse text editor… Partitions documents into language regions Associates editing services to each language Goal: create editors with JDT-like features Syntax highlighting As-you-type validation/checking Outline view Property view Content assist

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Agenda WTP overview Setup and configuration Development basics JSP editing Servlets Deployment descriptors Structure Source Editing (SSE) framework Server Deployment model Defining, associating and starting a server Running and debugging the web app

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Ready to Run The Project Explorer should now look like this

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Server – Deployment Model To run this application against a server, you need to: Create a server (that is, an instance of server runtime) Add the web module to the server Start the server Run the web application First verify in project properties that the server runtime was set but the server is not Select the project in the Project Explorer Type Alt+Enter, or right-click and select Properties

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Server – Deployment Model In the properties dialog, select Server. Notice that the server runtime is given. No server has been associated yet.

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Server – Defining a Server User the Server View to work with servers Windows Show View Servers To create a new server, right-click the Server View

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Server – Defining a Server Select the server type

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Server – Associating a Server In the web app project properties dialog, associate the project with the server

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Server – Starting a Server In the Server View, start the server Notice that the Server state is Synchronized, meaning that the latest version of your web app is deployed on the server

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Agenda WTP overview Setup and configuration Development basics JSP editing Servlets Deployment descriptors Structure Source Editing (SSE) framework Server Running and debugging the web app

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Running the Web Application

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Running the Web Application

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Running the Web Application

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Running the Web Application Click Register for Courses. Notice the URL with the EL expression evaluated (btw, we didnt create this JSP page) Alternatively, open your favorite browser and enter the URL

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Debugging the Web Application Lets verify that all information was entered correctly In candidateAdded.jsp, set a breakpoint next to the tag Make sure that you set breakpoints inside jsp fragments. You cannot set breakpoints in html, css, or JavaScript regions You can set breakpoints anywhere in servlets, beans, or any other Java code

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Debugging the Web Application In Server View, right-click the server and restart it in debug mode

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Debugging the Web Application

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Debugging the Web Application Submit information on the first page Switch to the Debug perspective By default you are prompted to switch to the Debug perspective

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Debugging the Web Application

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Debugging the Web Application In the Variables view open the form bean CandidateForm select name = Paul Meijer In the lower pane, type Secret User and enter Ctrl+S to save

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Debugging the Web Application The changed value of the variable is stored Continue running the application

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Debugging the Web Application The changed value is displayed on the JSP page Debugging WTP projects using Cactus is also available See for more informationhttp://eclipse.org/webtools/jst/components/server/tutorials/cactus/article.html

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Demo - Conclusion WTP provides a comprehensive environment for web app development Multi-language editing support Support for many server environments Full build, deploy and debugging support WTP is integrated with JDT. It provides and expands standard JDT Search Refactoring Auto-completion Error reporting

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Release Timeline JUNJULAUGSEPOCTNOVDECJANFEBMARAPRJUN WTP WTP 1.0 WTP

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Release (December) Complete flexible project model and enhancements to server functionality modeling Capture platform point release (3.1.1) Extend documentation coverage Hardening: bug fixes, performance

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Release (Summer 06) Support J2SE 1.5 (especially annotations) Leverage new apt component in JDT Support J2EE 1.5 JSR 181, e.g. Rev other standards/supported versions Soap 1.2, WSDL 2.0 New WS-I profiles WS Security Axis 2.0 Additional server types in distribution Architectural harmonization with other projects New features: JSR 88, JSF (Oracle), WS-*, …

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Getting and Using WTP Submit bug reports or enhancement requests Ask questions in the WTP Newsgroup: news://news.eclipse.org/eclipse.webtools Develop and contribute: Download 0.7 now at

Eclipse Foundation, Inc. | Copyright © 2005 BEA and made available under the EPL v Q&A