Click the Open Perspective icon to select the appropriate perspective for your development.

In the list of perspectives, select the Other option to view all available perspectives.

Review the list of possible perspectives, and select the Java EE one.

Click OK.

The IDE updates to a new set of views and editors that are best suited to performing Java EE tasks.

Review each of the tabs in the bottom section of the IDE. As the tutorial goes on, you get a chance to explore the content of some of the tabs.

From the main menu, selecting Window --> Show View allows you to open or reopen specific views. Select the Other option.

In the Show View dialog, expand the General node. Notice that views or editors already opened are greyed out. Select the Palette view and click OK.

To start working, from the main menu select File --> New --> Other.

Notice that since you want to use the new Oracle ADF Application type of template, you could directly use the Oracle ADF Application choice, but selecting the Other option will show you what other Java EE type of application templates are usable.

In the New dialog, expand the Java EE node and from the list of available Java EE templates, select Oracle ADF Application. This will create 2 projects, an EAR and a dependant Web Module

Click Next.

In the New Oracle ADF Application, enter ADFFacesTutorial as the Application name. Click the New Runtime button to set WebLogic Runtime environment.

In the New Server Runtime environment select Oracle | Oracle Weblogic Server 11gR1 PatchSet 3.

Click Next.

In the Define a WebLogic Runtime step, click the Browse icon next to the WebLogic home field.

In the Browse for Folder, select wlserver_10.3 corresponding to the location of your WebLogic server home directory.

Click OK.

Back in the dialog check the Server extensions Oracle ADF runtime 11.1.1.4.0 is installed. OEPE 11g validates a WebLogic Server installation for a properly configured ADF Runtime. Using the full install should have included the Oracle ADF Runtime. (If not click the Install link and follow the steps to install it from OTN.)

Click Finish then Finish again. Eclipse starts building your application environment.

This creates two projects, an Enterprise Application Project (EAR project in Eclipse) ADFFacesTutorial and then a Dynamic Web Project ADFFAcesTutorialWeb. Back to the Eclipse IDE, the two projects now appear in the Project Explorer.

Expand the nodes of the ADFFacesTutorial project to review the default environment created for an EAR project.

Double-click the adf-config.xml file to open it in the editor with the Source view.

Note that the adf library adf-loc.jar has been added to your project. Open and examine the configuration file application.xml.

Open the weblogic-application.xml. Notice the shared libraries (adf.oracle.domain).

Click the Source tab , and notice the declared components such as listeners and libraries.

In the Project Explorer window, collapse the ADFFacesTutorial node.

Expand the nodes of the ADFFacesTutorialWeb project to review the default environment created for a Web project.

Double-click the WebContent | WEB-INF | web.xml node to edit the file. Notice the resources.application reference to a resource bundle file usable for internationalizing applications.

Open the application.properties file and review the content of the bundle file.

Open the weblogic.xml showing the Shared Libraries. All these libraries were generated when you created a new J2EE workbench.

Scroll down and open the index.jsp page that has been created by default in your Web project. Notice that the page is referencing the bundle file.

Collapse all the open nodes in the Project Explorer then right-click in any tab and select Close All to close all open tabs of the Editor pane.

In the bottom pane, click the Servers tab. In the editor right-click and select New-> Server.

In the Define a New Server dialog, select Oracle WebLogic Server 11gR1 PatchSet 3.

Click Next.

WebLogic Server requires a domain directory. You can Browse to select an already existing domain or click the Create button to create a new domain either directly or by using a wizard. Select the Create Domain option.

The Oracle JRF template is already installed, make sure it is selected. Specify adf_tutorial as the name. You could also specify a different password to override the default welcome1 one.

Click Finish. This will create a new domain in WebLogic server.

Back to the New Server dialog, the Domain directory field is now completed.

Click Next.

Select the upper node ADFFacesTutorial in the Available pane and using the Add button, shuttle the selection in the Configured pane.

click Finish.

The new server appears in the server log pane. Expand the nodes to review its components.

Notice that the Server is in a Stopped state.

In the ADFFacesTutorialWeb project , expand the Faces Configuration node and right-click the Managed Beans entry to select New Managed Bean from context.

In the New Managed Bean dialog, select the Create a new Java class option.

In the New Managed Bean Wizard, enter tutorial as the package name and LoginBean as the name, leave other options to default values.

Click Next.

Set the Scope to session and click Next.

The Summary reports all the properties for the bean.

Click Finish.

Creating the managed bean added several entries in the Project Explorer, one is the LoginBean in the Managed Beans node. Double-click it; this will open the faces-config.xml file where the bean is referenced.

Click the Managed Bean tab and select the loginBean. Click the Managed Bean class link.

The LoginBean.java class opens in the java editor.

Notice that in the Project Explorer, the LoginBean Java class is in the Java Resources | tutorial package.

Add two String type variables for userName and password.

private String userName;
private String password;

Use the short cut Alt + Shift + S and select the Generate Getters and Setters option from the pop up menu. (You could get the same menu doing a right-click in the editor and from context select Source --> Generate Getters and Setters).

In the Generate Getters and Setters dialog, select the two variables you want to create getters and setters for. Select the After 'password' option for the location of the method code.

The new class should now look like this:

Click the Save All button to save your work.

Right-click the WebContent node in the Project Explorer and select New --> JSP file from context.

In the New JSP File dialog type login.jspx as the File name, then Next.

Notice the variety of JSP templates available for JSP, JSF, and ADF development. Select different templates and see in the Preview pane which statements are generated for each option.

Notice the JSP Templates link at the bottom right of the wizard, click on it.

From here, you can select any template, see its content in the Preview pane and using the Edit button customize it for your own needs or using the New button create your own template. Since you are going to use an already existing one, click Cancel.

Notice the proposed templates with one, two or three columns. In your case you are going to use the Basic (xhtml, xml syntax) one. Select it.

Click Finish and wait for the page to be created.

The page opens in the editor.

Notice the toolbar buttons in the menu bar allowing you to choose visualization between the Design, the Source or split views.

Locate the Palette pane. Drag and drop it onto the upper right pane. You can easily customize the layout of the IDE.

The palette displays all the available library components.

Explore the content of the various libraries. Click on an item to expand it. For example the ADF Data Visualizations node shows all of the GUI components available to represent data such as Bar, Pies or Gauges.

Notice that the last item in the Palette is the Data Palette. Expand it and see that its content is related to the available variables. Variables displayed in the Data Palette range from local Page Variables declared within the current jsp to JSF Managed Beans available to the whole application. The Data Palette enables easy navigation to variable and class declarations as well as Drag and Drop onto the page.

In the code of the login page, delete the af:Form tags.

In the Component Palette, open the ADF Faces library, scroll down and select the Form tag. Drag and drop it in place of the previous Form tag location using the tag drop editor facility.

In the New Form Type check the Generate a form tag and content from data option. In the Form bean field click the browse button.

Select the loginBean which will be used in the page.

Click OK.

Back to the Form Type, click the Select a value button next to the Form Action field.

In the Form action field define a navigation case on the fly. In the Select a navigation case dialog, click the button.

In the New Navigation Case, enter login as the Outcome. In the Destination page field, click the Create a new JavaServer Page button to create a new page on the fly.

In the New JavaServer Page dialog, type welcome.jspx as the name for the page.

Click Next to make sure the used template is the same as the one used for the login page. Click Finish.

Back to the New Navigation Case dialog, click OK.

Click OK again.

Back to the Form Type dialog, click Next.

The username and password fields are already selected, click Next.

In the Form fields, notice that both variables are rendering as Text Field. Select the password variable and using the drop-down list change the Rendering property to Password field. The same way, set the userName as TextArea.

If necessary, using the up and down arrows on the right, move one of the field so that userName appears on top.

Click Next. You could define in this new step an error message using resource bundle, but click Finish.

In the Menu toolbar, click the appropriate button to show the design page view exposing the 2 fields and the Submit button that you just created. The page should now look like this:

Click the Preview tab at the bottom of the Page editor to have a closer view of the rendering of the page in a Browser.

The Project Explorer should now look like the following:

Return to the Design view, then click the JSF Core library in the Palette to add a loadBundle component. Drag the tag next to the f:view tag.

In the New Load Bundle dialog click the Bind a dynamic value button next to the Base name field .

Locate the src | Resources | application file and click OK.

In the Variable name field enter bundle.

Click Finish.

Back in the code editor, using the split view, click the loadBundle icon . In the Log pane at the bottom, select the Properties tab. You can review and update the properties of any component using the Properties pane.

Back to the code of the login.jspx page press the Ctrl key, then hover over resources.application and click the hyperlink.

The application.properties bundle file opens in the editor displaying the existing messages. You can define new key resources directly in the file or create new ones dynamically.

Back to the login.jspx page, select the af:panelLabelAndMessage tag.

In the Property pane, click the Bind to a dynamic value button next to the Label.

The Choose Binding dialog opens with the already defined binding elements (bundle and managed beans).

Click the Resources tab to display the resources keys, then click the Add button to create a new key entry.

In the New Resource type name as Resource Key and Name: as the Resource Value.

Click OK.

The new entry appears in the Resources.

Click the View arrow and select Resource Values.

Click OK. The application.properties file is now populated with the new value.

Back in the JSPX code, you can see the updated label field for the Panel Label And Message.

Look at the Outline pane located on the right side. It gives a hierarchy view of the page tags.

To experiment in another way to use the resource bundle file, click the application.properties tab to open the editor and add a new entry for password. Type password=Password\:

Click the Save All button to save your work.

Back in the code of the login.jspx page, delete password in the label of the af:panelLabelAndMessage and type #{}. Within the brackets, press Ctrl + Space and select bundle from the suggested list.

Type '.' (comma) and from the JSP proposal popup, select password.

Now select the Submit button and in the Property pane, click the Bind to a dynamic value Icon next to the Text field.

In the Choose Binding dialog, click the Resources tab, then Click the New Resource + button.

In the New Resource dialog, enter submit as the Resource Key and Login as the Resource Value.

Click OK and OK again.

Your login page should now look like the following:

You can review the properties of all your tags in the Source code editor. For example select the af:form tag in the code editor to pop up its properties.

Hover your mouse over the loginBean word. This shows the properties of the bean component.

Move your mouse over the true property of the inputText tag and hold Ctrl + Space to launch code completion providing you with the possible code values.

Move to the loginBean and while pressing Ctrl + Space, select the Open getUserName() method.

This selection opens the LoginBean.java class and points to the getUserName() getter method.

Back to the code of the login.jspx page, press the Ctrl key, hover over the inputText tag and click the link.

The inputText documentation from the afu.tld file is displayed.

Click the welcome.jspx tab and reopen the source code editor.

From the JSF Core library, select the loadBundle component and drop it next to the f:view tag.

In the Load Bundle dialog, click the Bind a dynamic value icon next to the Base name field.

In the Resource Bundle Selection, expand the src | resources nodes and select application.

Click OK.

Back in the Load Bundle dialog, type bundle as the Variable name.

Click Finish.

In the Palette pane, open the ADF Faces library, and drag and drop the Output Text component within the af:form tag.

In the New Output Text dialog, type welcome as the Id and click the Bind to a dynamic value icon .

In the Choose Binding dialog, click the Resources tab and click the Add button.

In the New Resource type welcome as Resource Key and Welcome: as Resource value.

Click OK twice.

Click Finish.

Repeat the operation by dropping an Output Text component below the one you just created.

In the New Output Text dialog, type username as the Id and click the Bind to a dynamic value icon .

In the Choose Binding dialog, expand JSF Managed Beans | LoginBean and select userName.

Click OK.

Back to the Output Text creation, click Finish.

Your page should now look like the following:

Clicking the Preview tab displays the following:

Click the Save All button to save your work.

In the Project Explorer, right-click the login.jspx node and select Run As --> Run on Server from context.

In the Run On Server dialog, have the Choose an existing server option selected.

Click Finish.

WebLogic Server starts and the Console window opens reporting the loading steps.

The embedded browser launches and loads the login page.

Enter a value for the Name and Password then click the Login button.

The welcome page returns the username coming from the managed bean.

Close the embedded browser window.

In the Project Explorer right-click the login.jspx node and select Show AppXray Dependencies from context.

AppXaminer opens in the Editor displaying the relationship the login page is having with other components. The numeric values indicate the number of references a component is having with another.

For instance the login.jspx page has 2 references with loginBean (username and password), 4 references with the application.properties and so on.

You can expand another level.

And keep going on expanding the nodes.

Right-click in a node to view details. Right-click the loginBean node and select Show Reference Detail from context, which invokes a popup window displaying the detailed components involved.

You can repeat the operation on each component.

Right-click the application.properties node and select Open from context.

The application.properties file opens in the editor.

You can open all components of your application navigating through the AppXaminer diagram.

In Project Explorer, double-click the WebContent | WEB-INF | faces-config.xml to open the file in the editor.

Click the Overview tab to visualize the application environment.

Click the Navigation Rule tab for a graphical presentation of pages and navigation cases.

Click the Managed Bean tab for reviewing the defined managed bean.

Review the other tabs.