Building a Java EE Web Application with Oracle Enterprise Pack for Eclipse (OEPE)

Purpose

This tutorial shows how to build some of the components needed for a Web Application. It demonstrates how to create Java Beans, JSF pages and provides a tour of major components in Oracle Enterprise Pack for Eclipse, and shows you how they are used to build a basic application.

Time to Complete

Approximately 30 minutes.

Topics

This tutorial covers the following topics:

	Overview
	Prerequisites
	Launching Eclipse
	Creating a Dynamic Web Project
	Launching Oracle WebLogic Server
	Creating a Managed Bean
	Adding a JSP to the Project
	Adding Navigation Case to the Project
	Working with Bundle
	Running the Application Using a Locale
	Using AppXray Dependencies
	Using the Data Palette
	Using Custom Style Class
	Summary

Viewing Screenshots

Place the cursor over this icon to load and view all the screenshots for this tutorial. (Caution: This action loads all screenshots simultaneously, so response time may be slow depending on your Internet connection.)

Note: Alternatively, you can place the cursor over an individual icon in the following steps to load and view only the screenshot associated with that step. You can hide an individual screenshot by clicking it.

Overview

In the tutorial, you learn how to create a Dynamic Web Project in the Oracle Enterprise Pack for Eclipse tool, define and start the WebLogic Server and additionally you create JSP pages. You see how to create bundle messages for internationalization and how to create page flow diagrams. You see how to add CSS.

Back to Topic List

Prerequisites

Before you begin this tutorial, you should:

1.	Have access to or have installed Eclipse . You can download it from Oracle Technology Network. Unzip to a directory of your choice, which in this tutorial is referred to as ECLIPSE_HOME.
2.	Have access to or have installed Oracle WebLogic Server 10.3. You can download it from Oracle Technology Network. To install WebLogic, double click the .exe file to launch the Oracle Installer and install it into the directory of your choice, which in this tutorial is referred to as WEBLOGIC_HOME.
3.	Since we are using WLS 10.3 and because Weblogic Server 10.3 requires JDK 1.6, OEPE 11g must be launched with JDK 1.6 as well. There are two ways to do this: update the system PATH variable so that JDK 1.6 is the default JDK for the OS. (ie: PATH=<WEBLOGIC_HOME>\jdk160_05\bin;%PATH%). update the eclipse.ini with a –vm flag to specify which JDK they want Eclipse launched with. To implement the second option, locate the directory where the WebLogic JDK was installed. (for example: <WEBLOGIC_HOME>\jdk160_05\bin) and copy the path in the clipboard.
4.	Locate the ECLIPSE_HOME directory and open the eclipse.ini file using notepad.
5.	Enter the following statements : -vm then copy the content of the clipboard.
6.	Save and close the eclipse.ini file.

Back to Topic List

Launching Eclipse

Now that the environment is set, you can start Eclipse. To launch the tool, perform the following steps:

1.	Start Eclipse by double clicking the Eclipse executable eclipse.exe found in the ECLIPSE_HOME directory.
2.	Eclipse starts loading up and a Workspace Launcher dialog pops up. Specify a Workspace folder for your work. Click OK.
3.	The Eclipse Welcome screen appears.
4.	Hover your mouse on each icon of the Welcome screen and review the possible options. Overview What's New Samples Tutorials Workbench
5.	To start working, click the Workbench icon. The term Workbench refers to the desktop development environment. The Workbench aims to achieve seamless tool integration and controlled openness by providing a common paradigm for the creation, management, and navigation of workspace resources.
6.	The Eclipse IDE opens up.

Back to Topic List

Creating a Dynamic Web Project

The Project Explorer navigator allows you to create various type of projects. Depending on the nature of the project you create, a corresponding perspective will be used. A perspective defines the initial set and layout of views in the Workbench window. Within the window, each perspective shares the same set of editors. Each perspective provides a set of functionality aimed at accomplishing a specific type of task or works with specific types of resources. For example, the Java perspective combines views that you would commonly use while editing Java source files, while the Debug perspective contains the views that you would use while debugging Java programs.

To define a dynamic web project, perform the following steps:

1.	A dynamic web project ties together various modules. To create a new web project, perform the following steps: Right click within the Project Explorer pane and select New --> Dynamic Web Project from context.
2.	In the New Dynamic Web Project dialog, enter JSF_Intro as the project name, check the Use Default check box, and click the New button next to the Target Runtime field.
3.	In the New Server Runtime Environment, select Oracle --> Oracle WebLogic Server 11gR1 PatchSet 1 and the Create a new local server check box. Click Next.
4.	In the following step of the wizard, click the Browse button next to the WebLogic Home field: Specify the home path of WebLogic Server. Click OK, then Next.
5.	In the following step, check Local as the Server Type and click the Click here to launch Configuration Wizard to create a new domain link.
6.	In the Fusion Middleware Configuration Wizard, select the Create a new WebLogic domain option. Click Next.
7.	In the following step, click Next to accept default values.
8.	In the following step, click the Browse button next to the Domain location field.
9.	In the Select a WebLogic Domain Directory, specify a directory name (Domain for example) and a location. Click OK and confirm the new directory creation. If prompted to create the new directory, click OK to accept.
10.	Back in the location and domain step, click Next.
11.	In the Configure Administrator User Name and Password step, specify values. (weblogic/weblogic1 for example). Click Next.
12.	In the Configure Server Start Mode and JDK, choose the Development Mode and click Next. Click Next.
13.	In the Select Optional Configuration step, select the Administration Server option. Click Next.
14.	Click Next again to accept the default Administration Server Configuration values.
15.	In the Configuration Summary step, click Create to proceed. Wait for the domain creation to be finished, then click the Done button.
16.	Back in the New Server Runtime Environment dialog, click the Browse button next to the Domain Directory field to point to the base_domain directory you just created. Click OK. in the Define a WebLogic Server step, click the Finish button. Back in the Dynamic Web Project, click the Modify button next to the Configuration field.
17.	The Project Facets dialog shows the facets that are enabled for your current project, allowing you to set up your own facet configuration. In the Project Facets dialog, check the JavaServer Faces and JSTL Project Facet options to add these to the current configuration. Click OK.
18.	Back in the Dynamic Web Project, Click Next. In the Java step, click Next. In the Web Module step, click Next. In the JSF Capabilities step, click Next. Finally in the JSTL Library step, click Finish.
19.	In the Open Associated Perspective dialog, click Yes to open the the proposed perspective (Java EE).
20.	The Eclipse IDE should now look like the following: Notice the project name in the left pane and the used perspective (Java EE) for this project in the top right corner.
21.	Expand the JSF_Intro project node and review all the default components created for this new project. J2EE architecture supports component-based development of multi-tier enterprise applications. A J2EE application system typically includes the following tiers: Client tier: In the client tier, Web components, such as Servlets and JavaServer Pages (JSPs), or standalone Java applications provide a dynamic interface to the middle tier. Middle tier: In the server tier, or middle tier, enterprise beans and Web Services encapsulate reusable, distributable business logic for the application. These server-tier components are contained on a J2EE Application Server, which provides the platform for these components to perform actions and store data. Enterprise data tier: In the data tier, the enterprise's data is stored and persisted, typically in a relational database.

Back to Topic List

Launching Oracle WebLogic Server

To launch WebLogic Server and run the default Index page, perform the following steps:

1.	In the log window, open the Servers tab (Window --> Show View --> Servers) and click the Start icon to start Oracle WebLogic Server. The Console pane opens up where you can follow the start operation. (To open the Console if not opened, select Window --> Show View --> Console)
2.	The index.jsp node is the starting point for your application. In the Project Explorer, right click the index.jsp node and select Run As --> Run on Server.
3.	In the Run on Server, click Finish to use the existing started server.
4.	Click the Servers tab to see the new status:
5.	The index.jsp displays in the embedded eclipse web browser.

Back to Topic List

Creating a Managed Bean

We're going to create a managed bean to handle login values such as name and email address. To do so, perform the following steps:

1.	In the Project Explorer, expand the Faces Configuration node, right click the Managed Beans entry and select New Managed Bean from context.
2.	In the New Managed Bean Wizard, check the Create a new Java class option. Click Next.
3.	In the following step, type demo as the package name and UserBean as the Name for the class. Leave other default values. Click Next. Then click Next again. In the Wizard Summary, click Finish.
4.	The new bean appears as a Managed Bean and as a Java class in the Java Resources \| src \| demo nodes.
5.	Double click the UserBean.java to open it in the Java editor.
6.	Add 3 variable declaration statements to the class: private String firstName; private String lastName; private String emailid;
7.	Right click within the editor and select Quick Outline from context. The quick outline displays exposing the variables defined so far in the Java class. Press [Esc] to close the outline window. Notice that the outline is also visible in a specific Outline pane.
8.	Right click within the editor inside the class delimiters ({}) and select Source --> Generate Getters and Setters from context.
9.	In the Generate Getters and Setters dialog, click the Select All button. Notice that the Insertion point field lets you specify where you want the getters and setters statements to be added. Select After 'emailid'. Click OK.
10.	The new statements are added to the class.
11.	Save your work.

Back to Topic List

Adding a JSP to the Project

To add a new JSP page to the project, perform the following steps:

1.	In the Project Explorer, right click the WebContent node and select New --> JSP from context.
2.	In the New JavaServer Page dialog, enter register.jspx as the file name. Click Next.
3.	In the Select JSP Template step, notice that various templates are available for your new page. Select the third one in the list. Click Finish.
4.	The new page displays in the Web Page Editor.
5.	The Web Page Editor includes a docked Tag and Data Palette. For this exercise, we will undock the Palette. From the main menu, select Window \| Show View \| Other and select General \| Palette in the Show View list. Click OK.
6.	Notice that you can move around any of the panes in the IDE. You can also do this with the Palette if the default location doesn't suit your choice. Right clicking in the Palette pane, you can detach the pane.
7.	Try the Fast View option.
8.	Restore the palette pane by clicking the Palette icon in the down left corner.
8.	Right click within the Palette header and select Move --> Tab Group. Move the Palette to the pane where to add it as tab.
9.	From the Palette, open the JSF HTML library, select the Form component and drop it within the page inside the f:view tags (inner dotted lines rectangle).
10.	In the New Form dialog, select the Generate a form tag and content from data option, and next to the Form Bean field click the Select a variable button .
11.	In the Choose Bean dialog, select the userBean and click OK.
12.	Back in the New Form, next to the Form action field, enter register. click Next.
13.	In the Choose Fields step, uncheck emailid since we'll see how to add it manually afterward. Click Next.
14.	In the following step, notice the various rendering properties you can set for each field. Leave the existing Text Field choice. Click Next.
15.	In the Choose options step, uncheck the Insert Footer option. click Finish.
16.	The page is rendered in the editor.
17.	Click the Preview tab to see the page rendering.
18.	Return to the Design view. From the Palette, using the JSF HTML library, drag and drop an Output Text component next to the message component. In the New Output Text dialog, type Email ID as the Value. Click Finish.
19.	From the Palette, drag and drop a Text Input component next to the Email ID output text. Type email in the ID field. In the New Input Text dialog, click the Bind to a dynamic value icon next to the Value field. In the Choose Binding dialog, select emailid as the bean component. Click OK, then Finish.
20.	From the Palette, drag and drop a Message component next to the Email ID input text. In the New Message dialog, click Finish.
21.	Your page should now look like the following:
22.	Select the Submit Query button and using the properties tab, scroll down the properties and type Register as the value. Click the Select a value icon next to the Action field.
23.	In the Select Navigation Case, click the New navigation case icon to create a new navigation case. In the New Navigation Case dialog, type register as the Outcome name, the click the Create a new JavaServer Page icon to create a new page as destination page.
24.	In the New JavaServer Page dialog, expand the JSF_Intro node and selecting the WebContent entry, type welcome.jspx as the File name. Click Next.
25.	Make sure to use the same template (3rd one). Click OK and then Finish.
26.	Back to the New Navigation Case, click the Browse for JSP button next to the Destination page field.
27.	In the Select JSP File, select welcome.jspx and click OK. Click OK then click OK again to close all dialogs. The navigation case is now created.
28.	The new page welcome.jspx should now open in the editor. If not open it from the Project Navigator.
29.	Click the Save icon to save your work.
30.	From the Palette, drag and drop an Output Text component within the view tags of the welcome page.
31.	In the New Output Text dialog, type Welcome! as the Value. Click Finish.
32.	Your page should look like the following:
33.	Save your work.

Back to Topic List

Adding Navigation Case to the Project

To add navigation case to the project and design the navigation between pages, perform the following steps:

1.	In the Project Explorer, select index.jsp to open the page, and from the Palette, drag and drop a Command Button next to the existing text.
2.	In the New Command Button dialog, type login in the Action field and type Register as the Value property. Click Finish.
3.	In the WebContent \| WEB-INF folders, double click the faces-config.xml entry to open the pages flow diagram.
4.	The Faces Configuration Introduction page appears.
5.	In the faces-config editor, click the Navigation Rule tab to see the page flow diagram. Both pages previously created appear as well as the register navigation that was defined.
6.	From the Project Explorer, drag and drop the index.jsp node onto the diagram.
7.	From the Palette select the Link component and clicking within the index icon, draw a link to the register icon.
8.	In the Palette, click the Select icon and click the link you just draw to select it.
9.	In the Properties tab for the link, click the dotted button next to the From Outcome field.
10.	In the Outcome Selection dialog, select the login action. Click OK.
11.	In the Project Explorer, right click the index.jsp and select Validate from context. In the Save dialog, click OK to accept to save the index page.
12.	Click the Markers tab to visualize the any pending problems.
13.	In the Validation Results information window, see the messages resulting from the validation process. If problems are reported, these should only be warnings. Click OK.
14.	Save your work.

Back to Topic List

Working with Bundle

To create a bundle file mapping all your display values, perform the following steps:

1.	Re-open the register.jspx page, and select the loadBundle component from the JSF Core library, and drag and drop it under the <f:view> tag in the html editor.
2.	In the New Load Bundle, enter application.properties as the Base name and res as the Variable name. Click Finish.
3.	The loadBundle icon is added to your page and the corresponding xml statement is added too. Notice the error message that the application.properties resource bundle does not exist in this project. In the xml editor, change the base name from "application.properties" to the correct name of "resources.application" Save your work.
4.	Select the First Name OutputText and from the Properties pane, click the Bind to a dynamic value icon next to the Value field.
5.	In the Choose Binding dialog, notice that the new res entry is created. Click the Reources tab, and click the Add icon to create a new resource key.
6.	In the New Resource Key dialog, enter firstName as the ResourceKey and First Name as the Resource Value. Click OK. Click OK. again.
7.	Notice the changes in the page design, and in the Property pane.
8.	Repeat the last 5 steps for the Last Name output text.
9.	Now, let's explore another way of creating a label definition. Double click the Java Resources \| src \| resources \| application.properties file to open it in the editor and type the following entries: emailId=Email ID register=Register Save your work.
10.	Re-open the register page and select the Email ID Input text. In the properties pane, click the Bind to a variable button.
11.	In the Choose Binding dialog, select the emailId in the res node. Click OK.
12.	Select the Register button and in the properties pane, click the Bind to a variable icon next to the Value field.
13.	In the Choose Binding, select the register entry. Click OK.
14.	The page should now look like the following:
15.	Click the Preview tab at the bottom of the register page to see the page rendering.
16.	Return to the Design view and Save your work.

Back to Topic List

Running the Application Using a Locale Parameter

To see the use of a locale parameter fro internationalization use, perform the following steps:

1.	In the Project Explorer, right click the resources \| application.resources node and select Copy from context.
2.	Right click the resources node and select Paste from context.
3.	In the Name Conflict dialog, change the current name to application_fr.properties. Click OK.
4.	In the project Explorer, double click the application_fr.properties file to open it.
5.	In the text editor, update to the following text: lastName=Nom firstName=Prenom emailId=Adresse Email register=Enregistrer Save your work.
6.	Re-open the register.jspx page. From main Menu select Text \| Resource Locale in the Resource Locale dialog, set the locale value to French from the drop down list. Click OK. The list of values is dynamically created from the country suffixes (_xx) existing in the application_xx.properties files.
7.	The new text labels should now be in French.

Back to Topic List

Using AppXray Dependencies

To see dependencies between components, perform the following steps:

1.	In the Project Explorer, right click the register.jspx node and choose ShowAppXray Dependencies from context.
2.	The AppXaminer displays the components related to the register.jspx page.
3.	Click on each component to view an outline of the component. Notice that the number on the link indicates the number of elements involved between 2 components.
4.	Examine each relationship content.
5.	Open the index.jsp page and update the action="login" syntax by action="loginx". To create a wrong reference. Save your work.
6.	Close the AppXaminer by clicking the the x icon on the tab.
7.	In the Project Explorer, right click the index.jsp node and select ShowAppXray Dependencies. The Diagram displays now an error in the index.jsp page icon.
8.	Within the diagram, click the index.jsp icon to re-open the page and reset the value of the action to login. Save your work.
9.	Switch back to the diagram. The page is not reporting any error. From the AppXaminer, click on a component to open it in it's corresponding editor.

Back to Topic List

Using the Data Palette

To see which data components you can bind your pages to, perform the following steps:

1.	In the Palette pane, open the Data Palette node.
2.	Open all depending nodes. It displays all data components useable for your pages.
3.	Open the welcome.jspx page and from the userBean, select the firstName variable node and drag and drop it onto the page next to the Welcome! output text.
4.	The page should now look like the following: It will display the first name typed in the register page.
5.	Right click the index.jsp node and select Run As --> 1 Run on Server
6.	In the embedded browser, click the Register button.
7.	In the Register page, type some values for first name, last name, and email id. Click the Register button.
8.	Now the welcome page displays the welcome! message with your first name.

Back to Topic List

Using Custom Style Class

To add custom style class on your JSP Pages, perform the following steps:

1.	Right click the EmailId field and select Style \| EditStyle from context.
2.	In the CSS Style Definition dialog, select the Text node and choose a Font a Size and a Color.
3.	In the Background node, pick up a background color and specify an horizontal position. Click OK.
4.	Your page should now look like the following:
5.	Click the Preview tab to see the how the page rendering.

Back to Topic Lis t

You can close Eclipse. You've successfully perform this Eclipse overview OBE.

Back to Topic List

Summary

This tutorial gave you a basic overview of Oracle Enterprise Pack for Eclipse. You created a Web Application project added a Managed Bean and JSP pages to run in Oracle WebLogic Server. You also saw how to use bundles with a locale parameter for internationalization purpose.

You've learned how to:

	Create a Dynamic Web Project
	Launch Oracle WebLogic Server
	Create a Managed Bean
	Add a JSP to the Project
	Add Navigation Case to the Projects
	Work with Bundle
	Run the Application Using a Locale Parameter
	Use AppXray Dependencies and the Data Palette
	Create and Use Custom Style Class

Back to Topic List