Oracle® Enterprise Pack for Eclipse User's Guide
Release 12.1.3.1
E53428-02
  Go To Table Of Contents
Contents

Previous
Previous
 
Next
Next
 

2 Oracle ADF Tutorial

This tutorial provides a tour of the major components in Oracle Enterprise Pack for Eclipse and shows you how to build a basic Oracle ADF application.

This tutorial contains the following sections:

2.1 Overview

In the tutorial, you learn how to create an Oracle ADF Application using Oracle Enterprise Pack for Eclipse (OEPE), define the WebLogic Server and configure the deployment environment. Additionally you create two JSP pages and run these pages in the embedded browser. Finally, you explore the functionality of AppXray and review the dependencies between the components of your application.

The tutorial will take you approximately 30 minutes to complete.

2.2 Setting the Workbench Perspective for an Application

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.

Each Workbench window contains one or more perspectives. 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. As you work in the Workbench, you will probably switch perspectives frequently. More than one Workbench window can exist on the desktop at any given time.

To define a perspective for your project:

  1. In the Eclipse IDE, if the Welcome page is open close it by clicking the Close button on the Welcome tab.

  2. In the IDE, click Open Perspective Choose perspective button to select the appropriate perspective for your development, as shown in Figure 2-1.

    Figure 2-1 Open Perspective Button

    Open Perspective Button
  3. The Open Perspective dialog opens allowing you to review the list of possible perspectives. Select Java EE, as shown in Figure 2-2, and click OK.

    Figure 2-2 Open Perspective Dialog

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

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

  6. From the main menu, select Window > Show View. This allows you to open or reopen specific views. Select Other, as shown in Figure 2-3.

    Figure 2-3 Show View Menu

    Show view menu
  7. In the Show View dialog, expand the General node. Notice that views or editors already opened are greyed out. Select Palette as shown in Figure 2-4 and click OK.

    Figure 2-4 Show View Dialog

    Show view dialog

2.3 Creating an Oracle ADF Application

An enterprise application project ties together one or more J2EE modules, including application client modules, EJB modules, Connector modules, or Web modules.

To create a new Oracle ADF Application:

  1. To start working, from the main menu select File > New > Other, as shown in Figure 2-5.

    Figure 2-5 Options on the File Menu

    Options on the file menu

    You could choose ADF Application directly, but by selecting Other you can see the other options available.

  2. In the New wizard, expand Oracle then Application Development Framework and from the list of available Oracle templates, select ADF Application, as shown in Figure 2-6.

    Figure 2-6 New Wizard

    New wizard

    Click Next.

  3. In the New Oracle ADF Application page, enter ADFFacesTutorial as the Application name, as shown in Figure 2-7.

    Figure 2-7 New Oracle ADF Application Dialog

    New Oracle ADF Application Dialog
  4. Click New Runtime to set WebLogic Runtime environment.

    In the New Server Runtime environment expand Oracle and choose Oracle WebLogic Server 12c (12.1.3), as shown in Figure 2-8.

    Figure 2-8 New Server Runtime Dialog

    New Server Runtime Dialog

    Click Next.

  5. In the server dialog, shown in Figure 2-9, click Browse Browse button next to the WebLogic home field and browse to the location of the running Oracle WebLogic Server.

    Figure 2-9 New Server Runtime Environment Dialog

    New Server Runtime Environment Dialog

    The IDE validates the WebLogic home to ensure that there is a running instance of WebLogic Server with a properly configured ADF Runtime. It displays the location of the Java home and lists relevant server extensions.

    Ensure that the server extension Oracle ADF 12.1.3 is listed. If it is not listed, consider installing a full install of Oracle WebLogic Server 12c (12.1.3) from the Oracle WebLogic Server page at the Oracle Technology Network (http://www.oracle.com/technetwork/middleware/weblogic).

    Click Finish.

  6. In the New Oracle ADF wizard click Finish.

  7. The IDE creates two projects, an Enterprise Application Project (EAR project in Eclipse) called ADFFacesTutorial and a Dynamic Web Project called ADFFAcesTutorialWeb. The projects are listed in the Project Explorer, as shown in Figure 2-10.

    Figure 2-10 New Projects in Project Explorer

    New Projects in Project Explorer
  8. Expand the nodes of the ADFFacesTutorial project to review the default environment created for an EAR project.

  9. Double-click adf-config.xml, shown in Figure 2-11 to open it in the editor.

    Figure 2-11 adf-config.xml in Project Explorer

    adf-config.xml in Project Explorer

    By default the file opens in Design view, shown in Figure 2-12.

    Figure 2-12 adf-config.xml in Editor

    adf-config.xml in Editor

    You can change to Source view by clicking the Source tab on the editor.

  10. 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).

  11. Expand the nodes of the ADFFacesTutorialWeb project, shown in Figure 2-13, to review the default environment created for a Web project.

    Figure 2-13 Dynamic Web Project in Project Explorer

    Dynamic Web Project in Project Explorer
  12. Expand the WebContent node then the WEB-INF node and double-click web.xml to open the file in the editor, as shows in Figure 2-14. Click on the nodes to show their contents. Notice the resources.application reference to a resource bundle file usable for internationalizing applications.

    Figure 2-14 web.xml in Editor

    web.xml in Editor
  13. Open the Java Resources, src, and resources nodes and double-click application.properties to open it and review the content of the bundle file, as shown in Figure 2-15.

    Figure 2-15 application.properties Bundle File

    application.properties Bundle File
  14. Expand the WebContent and WEB-INF nodes and double-click weblogic.xml to open it in the editor, illustrated in Figure 2-16.

    Figure 2-16 weblogic.xml File in Editor

    weblogic.xml File in Editor

    Expand the nodes to show the Shared Libraries. These libraries were generated when you created a new J2EE workbench.

  15. Scroll down and open the index.jspx page that has been created by default in your Web project. Notice that, as shown in Figure 2-17, the page is referencing the bundle file resources.application.

    Figure 2-17 index.jspx in Design View

    index.jspx in Design View
  16. 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.

2.4 Defining the WebLogic Server

Before starting to create your pages, you need to create a server configuration. It will be the link to the Oracle WebLogic instance that you will use to run the project.

To configure the WebLogic Server:

  1. Click the Servers tab to display the Server View. In the editor right-click and select New > Server, as shown in Figure 2-18. Alternatively, you could just click the No servers are available. Click this link to create new server. link.

    Figure 2-18 New Server Context Menu

    New Server Context Menu
  2. In the Define a New Server dialog, expand Oracle and choose Oracle WebLogic Server 12c (12.1.3) as shown in Figure 2-19.

    Figure 2-19 New Server Dialog

    New Server Dialog

    Click Next.

  3. WebLogic Server requires a domain directory. You can Browse Browse button to select an already existing domain or click Create Create button to create a new domain either directly or by using a wizard. Click Create Create button and select Create Domain as shown in Figure 2-20.

    Figure 2-20 Create Domain Option

    Create Domain Option
  4. The New WebLogic Domain dialog opens, as shown in Figure 2-21.

    Figure 2-21 New WebLogic Domain Dialog

    New WebLogic domain dialog

    Oracle JRF template is already installed, make sure it is selected. Change the default name to adf_tutorial. Optionally, you can specify a different password to use in place of the default welcome1.

    Click Finish.

  5. The new domain is created in WebLogic server and details of it are shown in the New Server dialog, as shown in Figure 2-22.

    Figure 2-22 New Server Dialog

    New Server Dialog

    Click Next.

  6. In the Add and Remove page, select ADFFacesTutorial in the Available pane and click Add to shuttle the selection to the Configured pane, as shown in Figure 2-23.

    Figure 2-23 Modify Server Resources Page

    Modify Server Resources Page

    Click Finish.

  7. The new server appears in the server log view, as shown in Figure 2-24.

    Figure 2-24 Server Log View

    Server log view

    Expand the nodes to review its components.

    Notice that the Server is in a Stopped state.

2.5 Creating a Managed Bean

Now you create a Managed bean to interact with two JSP Pages that you will define later.

To create a managed bean:

  1. In the Project Explorer, expand ADFFacesTutorialWeb project and then the Faces Configuration node. Right-click Managed Beans and choose New Managed Bean, as shown in Figure 2-25.

    Figure 2-25 Create Managed Bean

    Create Managed Bean
  2. In the New Managed Bean wizard, select the Create a new Java class option, as shown in Figure 2-26 and click Next.

    Figure 2-26 New Managed Bean Wizard

    New Managed Bean Wizard
  3. In the Java Class page of the New Managed Bean Wizard, change the default package name to tutorial and enter LoginBean as the name, as shown in Figure 2-27. Leave other options to default values.

    Figure 2-27 Java Class Page of New Managed Bean Wizard

    Java Class Page

    Click Next.

  4. On the Managed Bean Configuration page of the New Managed Bean Wizard, check that the Scope is set to session, as shown in Figure 2-28.

    Figure 2-28 Managed Bean Configuration Page of New Managed Bean Wizard

    Managed Bean Configuration Page

    Click Next.

  5. The Summary page of the New Managed Bean Wizard displays the properties for the bean, as shown in Figure 2-29.

    Figure 2-29 Summary Page of New Managed Bean Wizard

    Summary Page

    Click Finish.

  6. Creating the managed bean added several entries in the Project Explorer, one is the new LoginBean in the Managed Beans node, as shown in Figure 2-30.

    Figure 2-30 LoginBean in Project Explorer

    New managed bean in the project explorer

    Double-click loginBean to open the faces-config.xml file where the bean is referenced, as shown in Figure 2-31.

    Figure 2-31 faces-config.xml in Editor

    faces-config.xml in Editor
  7. In the editor, click the Managed Bean tab as shown in Figure 2-32.

    Figure 2-32 Managed Beans in faces-config.xml

    Managed Beans in faces-config.xml

    Select loginBean and click the Managed Bean class link, as shown in Figure 2-33.

    Figure 2-33 Managed Bean Tab of faces-config.xml in Editor

    Managed Bean Tab
  8. The LoginBean.java class opens in the java editor, as shown in Figure 2-34.

    Figure 2-34 LoginBean Class in Editor

    LoginBean class in Editor
  9. Notice that in the Project Explorer, the LoginBean Java class is under the Java Resources, src nodes in the tutorial package, as shown in Figure 2-35.

    Figure 2-35 LoginBean Class in Explorer

    LoginBean class in Explorer
  10. In the LoginBean class in the editor, add two String type variables for userName and password, as shown in Figure 2-36.

    private String userName;private String password;
    

    Figure 2-36 LoginBean Class with New Variables

    LoginBean Class with New Variables
  11. Open the Source menu by pressing Alt+Shift+S. Select Generate Getters and Setters from the menu, as shown in Figure 2-37.

    Figure 2-37 Source Menu

    Source Menu

    Alternatively, right-click in the editor and choose Source > Generate Getters and Setters.

  12. In the Generate Getters and Setters dialog select the two variables you want to create getters and setters for, as shown in Figure 2-38.

    Figure 2-38 Generate Getters and Setters Dialog

    Generate Getters and Setters Dialog

    Ensure that After 'password' is selected for Insertion Point. This is the location of the method code. Click OK.

  13. The generated code appears in the editor, as shown in Figure 2-39.

    Figure 2-39 LoginBean Class in Editor

    LoginBean Class in Editor
  14. Click Save All Save all button to save your work.

2.6 Creating JSP Pages

You are now going to create two pages:

2.6.1 Creating a Login JSP Page

First you will create a login JSP page which passes a variable value to a second page using the Java bean.

  1. Right-click the WebContent node in the Project Explorer and select New > JSP file, as shown in Figure 2-40.

    Figure 2-40 JSP File Option on WebContent Context Menu

    JSP File Option

    The New JSP File wizard opens.

  2. In the New JSP File wizard enter login.jspx as the File name, as shown in Figure 2-41.

    Figure 2-41 New JSP File Wizard

    New JSP File wizard

    Click Next.

  3. In the Select JSP Template page of the wizard, shown in Figure 2-42, notice the variety of JSP templates available for JSP, JSF, and ADF development.

    Figure 2-42 Select JSP Template Page of New JSP File Wizard

    Select JSP Template Page

    Select different templates and see in the Preview pane which statements are generated for each option.

  4. Click the JSP Templates link at the bottom right of the wizard. This opens the Web> JSP Files > Editor > Templates page of the Preferences dialog, as shown in Figure 2-43.

    Figure 2-43 JSP Templates Page of Preferences Dialog

    JSP Templates Page

    In this dialog you can select any template and see its content in the Preview pane.

    You can customize a template for your own needs using the Edit button, or you can create your own template using the New button.

    In this case you are going to use an existing template, so click Cancel.

  5. In the Select JSP Templates page of the New JSP File wizard, select ADF Rich Faces Page - Basic (xhtml, xml syntax) (the first template in the list), and click Finish.

  6. The page is created and it opens in the editor, as shown in Figure 2-44.

    Figure 2-44 login.jspx in Editor

    login.jspx in Editor
  7. The buttons on the toolbar shown in Figure 2-45 allow you to choose between Design, the Source or split views.

    Figure 2-45 Visualization Buttons on Toolbar

    Visualization Buttons on Toolbar
  8. Locate the Palette View which you opened in Section 2.2, "Setting the Workbench Perspective for an Application". If necessary, choose Window > Show View and choose the palette from the list of Eclipse Views. Drag it to the upper right pane and drop it there.

    Figure 2-46 Palette Pane

    Palette view

    This shows you how easy it is to customize the layout of the IDE.

  9. The palette displays all the available library components.

  10. 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, as shown in Figure 2-47.

    Figure 2-47 ADF Data Visualizations Node

    ADF Data Visualizations Node
  11. 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, as shown in Figure 2-48.

    Figure 2-48 Data Palette

    Data Palette

    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.

2.6.2 Creating a Navigation Case and a Welcome Page

You are now going to create a navigation case that navigates quickly to a second page.

To create these two components:

  1. In the code of the login page, delete the af:Form tags, as shown in Figure 2-49.

    Figure 2-49 login.jspx in Editor

    login.jspx in Editor
  2. In the 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.

  3. In the Form Type page of the New Form Type wizard, shown in Figure 2-50, select Generate a form with content from managed beans. In the Form bean field click Browse Browse button.

    Figure 2-50 New Form Type Dialog

    New Form Type Dialog
  4. In the Choose Bean/Bean Property dialog shown in Figure 2-51, select loginBean and click OK.

    Figure 2-51 Choose Bean/Bean Property Dialog

    Choose Bean/Bean Property Dialog
  5. On the Form Type page of the New Form wizard, click Select a value Browse button next to Form action to open the Select Action Outcome dialog.

  6. In the Form action field define a navigation case quickly. In the Select a navigation case dialog, click the Add button button.

  7. In the New Navigation Case dialog, enter login as the Outcome. In the Destination page field, click the Create a new JavaServer Page button to create a new page quickly, as shown in Figure 2-52.

    Figure 2-52 New Navigation Case Dialog

    New Navigation Case Dialog
  8. In the New JavaServer Page dialog, type welcome.jspx as the name for the page, as shown in Figure 2-53.

    Figure 2-53 New JavaServer Page Dialog

    New JavaServer Page Dialog

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

  9. In the New Navigation Case dialog, click OK, and click OK again to return to the Form Type dialog.

  10. In the Form Type dialog, click Next.

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

  12. In the Form fields, notice that both variables are rendering as Text Field, as shown in Figure 2-54. 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.

    Figure 2-54 Form Type Dialog

    Form Type Dialog

    If necessary, using the up and down arrows on the right, move one of the field so that userName appears on top, as shown in Figure 2-55.

    Figure 2-55 Form Type Dialog

    Form Type Dialog

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

  13. In the Menu toolbar, click the appropriate button visualize button to show the design page view exposing the two fields and the Submit button that you just created, as shown in Figure 2-56

    Figure 2-56 Login Page

    Login Page
  14. 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, as shown in Figure 2-57.

    Figure 2-57 Login Page

    Login Page
  15. The Project Explorer now contains the new files, as shown in Figure 2-58.

    Figure 2-58 Project Explorer

    Project Explorer

2.7 Using a Resource Bundle File for the Pages

You will use a resource bundle file for labels, texts and messages.

To use a resource bundle file:

  1. 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, as shown in Figure 2-59.

    Figure 2-59 Design View

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

    Locate the src | Resources | application file, as show in Figure 2-60.

    Figure 2-60 Resource Bundle Selection Dialog

    Resource Bundle Selection Dialog

    Click OK.

  3. In the Variable name field enter bundle, as shown in Figure 2-61.

    Figure 2-61 New Load Bundle Dialog

    New Load Bundle Dialog

    Click Finish.

  4. Back in the code editor, using the split view, click the loadBundle icon Load bundle button. In the Log View at the bottom, select the Properties tab, as shown in Figure 2-62. You can review and update the properties of any component using the Properties View.

    Figure 2-62 Properties Tab in Log View

    Properties Tab in Log View
  5. In the source view of the login.jspx page press the Ctrl key, then hover over resources.application and click the hyperlink, as shown in Figure 2-63.

    Figure 2-63 Source Code of Login Page

    Source Code of Login Page

    The application.properties bundle file opens in the editor displaying the existing messages, as shown in Figure 2-64. You can define new key resources directly in the file or create new ones dynamically.

    Figure 2-64 Application Properties Tab

    Application Properties Tab
  6. Back to the login.jspx page, select the af:panelLabelAndMessage tag.

    In the Property View, click the Bind to a dynamic value button binding button next to Label, as shown in Figure 2-65.

    Figure 2-65 Panel Label and Message

    Panel Label and Message
  7. The Choose Binding dialog opens with the already defined binding elements (bundle and managed beans), as shown in Figure 2-66.

    Figure 2-66 Choose Binding Dialog

    Choose Binding Dialog
  8. Click the Resources tab to display the resources keys, then click the Add button to create a new key entry, as shown in Figure 2-67.

    Figure 2-67 Resources Tab

    Resources Tab

    In the New Resource dialog enter name as the Resource Key and Name: as the Resource Value, as shown in Figure 2-68.

    Figure 2-68 New Resource Dialog

    New Resource Dialog

    Click OK. The new entry appears in the Resources, as shown in Figure 2-69.

    Figure 2-69 Resources Tab

    Resources Tab
  9. Click the View arrow and select Resource Values, as shown in Figure 2-70.

    Figure 2-70 Choose Binding Dialog

    Choose Binding Dialog

    Click OK. The application.properties file is now populated with the new value, as shown in Figure 2-71.

    Figure 2-71 application.properties File

    application.properties File
  10. Back in the JSPX code, you can see the updated label field for the Panel Label And Message, as shown in Figure 2-72.

    Figure 2-72 Updated Label Field

    Updated Label Field
  11. Look at the Outline pane located on the right side. It gives a hierarchy view of the page tags, as shown in Figure 2-73.

    Figure 2-73 Outline Tab

    Outline Tab
  12. 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\:, as shown in Figure 2-74.

    Figure 2-74 application.properties Tab

    application.properties Tab

    Click the Save All button to save your work.

  13. 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, as shown in Figure 2-75.

    Figure 2-75 Login Page

    Login Page

    Type ',' (comma) and from the JSP proposal popup, select password, as shown in Figure 2-76.

    Figure 2-76 Login Page

    Login Page
  14. Now select the Submit button and in the Property View, click the Bind to a dynamic value button next to the Text field, as shown in Figure 2-77.

    Figure 2-77 Bind to a Dynamic Value Button

    Bind to a Dynamic Value Button
  15. In the Choose Binding dialog, click the Resources tab, then Click the New Resource New Resource button button.

    In the New Resource dialog, enter submit as the Resource Key and Login as the Resource Value, as shown in Figure 2-78.

    Figure 2-78 New Resource Dialog

    New Resource Dialog

    Click OK and OK again.

  16. Your login page is now complete, as shown in Figure 2-79.

    Figure 2-79 Login Page

    Login Page
  17. Click the Save All button to save your work.

2.8 Optimizing the Use of the Code Editor

You can use various code editor features to help you work fast and efficiently.

To optimize your way of working with the code editor:

  1. 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, as shown in Figure 2-80.

    Figure 2-80 View Tag Properties

    View Tag Properties
  2. Hover your mouse over the loginBean word. This shows the properties of the bean component, as shown in Figure 2-81.

    Figure 2-81 Bean Component Properties

    Bean Component Properties
  3. 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, as shown in Figure 2-82.

    Figure 2-82 Code Completion

    Code Completion
  4. Move to the loginBean and while pressing Ctrl + Space, select the Open getUserName() method, as shown in Figure 2-83.

    Figure 2-83 Method Properties

    Method Properties

    This selection opens the LoginBean.java class and points to the getUserName() getter method, as shown in Figure 2-84.

    Figure 2-84 Getter Method

    Getter Method
  5. Back to the code of the login.jspx page, press the Ctrl key, hover over the inputText tag and click the link, as shown in Figure 2-85.

    Figure 2-85 Login Page

    Login Page
  6. The inputText documentation from the afu.tld file is displayed, as shown in Figure 2-86.

    Figure 2-86 afu.tld Tab

    afu.tld Tab
  7. Close the afu.tld tab.

2.9 Refining the Welcome Page

You can add components to the welcome page for displaying the login name from the login bean.

To refine the welcome page:

  1. Click the welcome.jspx tab and reopen the source code editor, as shown in Figure 2-87

    Figure 2-87 Welcome Page

    Welcome Page
  2. From the JSF Core library, select the loadBundle component and drop it next to the f:view tag, as shown in Figure 2-88.

    Figure 2-88 loadBundle Component

    loadBundle Component
  3. In the Load Bundle dialog, click the Bind a dynamic value icon next to the Base name field, as shown in Figure 2-89.

    Figure 2-89 Load Bundle Dialog

    Load Bundle Dialog
  4. In the Resource Bundle Selection, expand the src | resources nodes and select application, as shown in Figure 2-90.

    Figure 2-90 Resource Bundle Selection

    Resource Bundle Selection

    Click OK.

  5. Back in the Load Bundle dialog, type bundle as the Variable name, as shown in Figure 2-91.

    Figure 2-91 Load Bundle Dialog

    Load Bundle Dialog

    Click Finish.

  6. In the Palette View, open the ADF Faces library, and drag and drop the Output Text component within the af:form tag, as shown in Figure 2-92.

    Figure 2-92 Output Text Component

    Output Text Component
  7. In the New Output Text dialog, type welcome as the Id and click the Bind to a dynamic value icon, as shown in Figure 2-93.

    Figure 2-93 New Output Text Dialog

    New Output Text Dialog
  8. In the Choose Binding dialog, click the Resources tab and click the Add button, as shown in Figure 2-94.

    Figure 2-94 Resources Tab

    Resources Tab
  9. In the New Resource type welcome as Resource Key and Welcome: as Resource value, as shown in Figure 2-95.

    Figure 2-95 New Resource Dialog

    New Resource Dialog

    Click OK twice.

    Figure 2-96 Common Pane

    Common Pane

    Click Finish.

  10. Repeat the operation by dropping an Output Text component below the one you just created, as shown in Figure 2-97.

    Figure 2-97 Output Text Component

    Output Text Component
  11. In the New Output Text dialog, type username as the Id and click the Bind to a dynamic value icon, as shown in Figure 2-98.

    Figure 2-98 Common Pane

    Common Pane
  12. In the Choose Binding dialog, expand JSF Managed Beans | LoginBean and select userName, as shown in Figure 2-99.

    Figure 2-99 Choose Binding Dialog

    Choose Binding Dialog

    Click OK.

  13. Back to the Output Text creation, click Finish, as shown in Figure 2-100.

    Figure 2-100 Output Text Dialog

    Output Text Dialog
  14. The login page now looks similar to Figure 2-101.

    Figure 2-101 Login Page

    Login Page
  15. The Preview tab looks similar to Figure 2-102.

    Figure 2-102 Preview Tab

    Preview Tab
  16. Click the Save All button to save your work.

2.10 Running the Application

Now you can run and test the application in the embedded browser.

To run and test the application:

  1. In the Project Explorer, right-click the login.jspx node and select Run As > Run on Server, as shown in Figure 2-103.

    Figure 2-103 Context Menu of Login File

    Context Menu of Login File
  2. In the Run On Server dialog, have the Choose an existing server option selected, as shown in Figure 2-104.

    Figure 2-104 Run On Server Dialog

    Run On Server Dialog

    Click Finish.

  3. WebLogic Server starts and the Console window opens reporting the loading steps, as shown in Figure 2-105.

    Figure 2-105 Console Window

    Console Window
  4. The embedded browser launches and loads the login page, as shown in Figure 2-106.

    Figure 2-106 Embedded Browser

    Embedded Browser
  5. Enter a value for the Name and Password then click the Login button, as shown in Figure 2-107.

    Figure 2-107 Embedded Browser

    Embedded Browser
  6. The welcome page returns the username coming from the managed bean, as shown in Figure 2-108.

    Figure 2-108 Welcome Page

    Welcome Page
  7. Close the embedded browser window.

2.11 Using AppXray Dependencies

AppXRay is a central feature of Oracle Enterprise Pack for Eclipse designed for dependency tracking, validation, and visualization. AppXRay analyzes your project artifacts in order to understand their interdependencies and then uses this information to drive many of the core OEPE features such as code completion and validation in your source files, variable information in the Palette, data binding in the Property sheet, and much more. AppXRay also enables you to visualize the dependency relationships within a project.

To use and analyze AppXray results:

  1. In the Project Explorer right-click the login.jspx node and select Show AppXray Dependencies, as shown in Figure 2-109.

    Figure 2-109 Show AppXray Dependencies

    Show AppXray Dependencies
  2. AppXaminer opens in the Editor displaying the relationship the login page has with other components, as shown in Figure 2-110. The numeric values indicate the number of references a component has with another.

    Figure 2-110 AppXaminer

    AppXaminer

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

  3. You can expand another level, as shown in Figure 2-111.

    Figure 2-111 AppXaminer

    AppXaminer
  4. And keep going on expanding the nodes.

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

    Figure 2-112 AppXaminer

    AppXaminer
  6. You can repeat the operation on each component.

  7. Right-click the application.properties node and select Open, as shown in Figure 2-113.

    Figure 2-113 AppXaminer

    AppXaminer
  8. The application.properties file opens in the editor, as shown in Figure 2-114.

    Figure 2-114 application.properties File

    application.properties File

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

  9. In Project Explorer, double-click the WebContent | WEB-INF | faces-config.xml to open the file in the editor, as shown in Figure 2-115.

    Figure 2-115 Faces Configuration Overview

    Faces Configuration Overview
  10. Click the Overview tab to visualize the application environment.

  11. Click the Navigation Rule tab for a graphical presentation of pages and navigation cases, as shown in Figure 2-116.

    Figure 2-116 Graphical Presentation

    Graphical Presentation
  12. Click the Managed Bean tab for reviewing the defined managed bean, as shown in Figure 2-117.

    Figure 2-117 Managed Bean Tab

    Managed Bean Tab
  13. Review the other tabs, as shown in Figure 2-118.

    Figure 2-118 Faces Configuration Tabs

    Faces Configuration Tabs

2.12 Summary

You've successfully performed this Eclipse overview of Oracle building an Oracle ADF application.

This tutorial gave you a basic overview of Oracle Enterprise Pack for Eclipse. Using a workbench, you created several projects, and defined the WebLogic server, created a managed bean and some JSP pages using it, and run the application on the server.

You've learned how to: