| Oracle® Enterprise Pack for Eclipse User's Guide Release 12.1.3.3 E57399-01 |
|
 Previous |
 Next |
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:
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.
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:
In the Eclipse IDE, if the Welcome page is open close it by clicking the Close button on the Welcome tab.
In the IDE, click Open Perspective 
to select the appropriate perspective for your development, as shown in Figure 2-1.
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.
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 will get a chance to explore the content of some of the tabs.
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.
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.
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:
To start working, from the main menu select File > New > Other, as shown in Figure 2-5.
You could choose ADF Application directly, but by selecting Other you can see the other options available.
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.
Click Next.
In the New Oracle ADF Application page, enter ADFFacesTutorial as the Application name, as shown in Figure 2-7.
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.
Click Next.
In the server dialog, shown in Figure 2-9, click Browse 
next to the WebLogic home field and browse to the location of the running Oracle WebLogic Server.
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.
In the New Oracle ADF wizard click Finish.
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.
Expand the nodes of the ADFFacesTutorial project to review the default environment created for an EAR project.
Double-click adf-config.xml, shown in Figure 2-11 to open it in the editor.
By default the file opens in Design view, shown in Figure 2-12.
You can change to Source view by clicking the Source tab on the editor.
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).
Expand the nodes of the ADFFacesTutorialWeb project, shown in Figure 2-13, to review the default environment created for a Web project.
Expand the WebContentnode 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.
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.
Expand the WebContent and WEB-INF nodes and double-click weblogic.xml to open it in the editor, illustrated in Figure 2-16.
Expand the nodes to show the Shared Libraries. These libraries were generated when you created a new J2EE workbench.
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.
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.
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:
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.
In the Define a New Server dialog, expand Oracle and choose Oracle WebLogic Server 12c (12.1.3) as shown in Figure 2-19.
Click Next.
WebLogic Server requires a domain directory. You can Browse to select an already existing domain or click Create 
to create a new domain either directly or by using a wizard. Click Create and select Create Domain as shown in Figure 2-20.
The New WebLogic Domain dialog opens, as shown in Figure 2-21.
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.
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.
Click Next.
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.
Click Finish.
The new server appears in the server log view, as shown in Figure 2-24.
Expand the nodes to review its components.
Notice that the Server is in a Stopped state.
Now you create a Managed bean to interact with two JSP Pages that you will define later.
To create a managed bean:
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.
In the New Managed Bean wizard, select the Create a new Java class option, as shown in Figure 2-26 and click Next.
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.
Click Next.
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.
Click Next.
The Summary page of the New Managed Bean Wizard displays the properties for the bean, as shown in Figure 2-29.
Click Finish.
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.
Double-click loginBean to open the faces-config.xml file where the bean is referenced, as shown in Figure 2-31.
In the editor, click the Managed Bean tab as shown in Figure 2-32.
Select loginBean and click the Managed Bean class link, as shown in Figure 2-33.
The LoginBean.java class opens in the java editor, as shown in Figure 2-34.
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.
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;
Open the Source menu by pressing Alt+Shift+S. Select Generate Getters and Setters from the menu, as shown in Figure 2-37.
Alternatively, right-click in the editor and choose Source > Generate Getters and Setters.
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.
Ensure that After 'password' is selected for Insertion Point. This is the location of the method code. Click OK.
The generated code appears in the editor, as shown in Figure 2-39.
Click Save All 
to save your work.
You are now going to create two pages:
A login page which you use to enter your username and password.
A welcome page that displays your name being passed using the managed bean.
First you will create a login JSP page which passes a variable value to a second page using the Java bean.
Right-click the WebContent node in the Project Explorer and select New > JSP file, as shown in Figure 2-40.
The New JSP File wizard opens.
In the New JSP File wizard enter login.jspx as the File name, as shown in Figure 2-41.
Click Next.
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.
Select different templates and see in the Preview pane which statements are generated for each option.
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.
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.
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.
The page is created and it opens in the editor, as shown in Figure 2-44.
The buttons on the toolbar shown in Figure 2-45 allow you to choose between Design, the Source or split views.
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.
This shows you how easy it is to 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, as shown in Figure 2-47.
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.
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.
You are now going to create a navigation case that navigates quickly to a second page.
To create these two components:
In the code of the login page, delete the af:Form tags, as shown in Figure 2-49.
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.
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 .
In the Choose Bean/Bean Property dialog shown in Figure 2-51, select loginBean and click OK.
On the Form Type page of the New Form wizard, click Select a value next to Form action to open the Select Action Outcome dialog.
In the Form action field define a navigation case quickly. In the Select a navigation case dialog, click the 
button.
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.
In the New JavaServer Page dialog, type welcome.jspx as the name for the page, as shown in Figure 2-53.
Click Next to make sure the used template is the same as the one used for the login page. Click Finish.
In the New Navigation Case dialog, click OK, and click OK again to return to the Form Type dialog.
In 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, 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.
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.
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 two fields and the Submit button that you just created, as shown in Figure 2-56
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.
The Project Explorer now contains the new files, as shown in Figure 2-58.
You will use a resource bundle file for labels, texts and messages.
To use a resource bundle file:
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.
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, as show in Figure 2-60.
Click OK.
In the Variable name field enter bundle, as shown in Figure 2-61.
Click Finish.
Back in the code editor, using the split view, click the loadBundle icon 
. 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.
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.
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.
Back to the login.jspx page, select the af:panelLabelAndMessage tag.
In the Property View, click the Bind to a dynamic value button 
next to Label, as shown in Figure 2-65.
The Choose Binding dialog opens with the already defined binding elements (bundle and managed beans), as shown in Figure 2-66.
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.
In the New Resource dialog enter name as the Resource Key and Name: as the Resource Value, as shown in Figure 2-68.
Click OK. The new entry appears in the Resources, as shown in Figure 2-69.
Click the View arrow and select Resource Values, as shown in Figure 2-70.
Click OK. The application.properties file is now populated with the new value, as shown in Figure 2-71.
Back in the JSPX code, you can see the updated label field for the Panel Label And Message, as shown in Figure 2-72.
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.
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.
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, as shown in Figure 2-75.
Type ',' (comma) and from the JSP proposal popup, select password, as shown in Figure 2-76.
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.
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, as shown in Figure 2-78.
Click OK and OK again.
Your login page is now complete, as shown in Figure 2-79.
Click the Save All button to save your work.
You can use various code editor features to help you work fast and efficiently.
To optimize your way of working with the code editor:
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.
Hover your mouse over the loginBean word. This shows the properties of the bean component, as shown in Figure 2-81.
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.
Move to the loginBean and while pressing Ctrl + Space, select the Open getUserName() method, as shown in Figure 2-83.
This selection opens the LoginBean.java class and points to the getUserName() getter method, as shown in Figure 2-84.
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.
The inputText documentation from the afu.tld file is displayed, as shown in Figure 2-86.
Close the afu.tld tab.
You can add components to the welcome page for displaying the login name from the login bean.
To refine the welcome page:
Click the welcome.jspx tab and reopen the source code editor, as shown in Figure 2-87
From the JSF Core library, select the loadBundle component and drop it next to the f:view tag, as shown in Figure 2-88.
In the Load Bundle dialog, click the Bind a dynamic value icon next to the Base name field, as shown in Figure 2-89.
In the Resource Bundle Selection, expand the src | resources nodes and select application, as shown in Figure 2-90.
Click OK.
Back in the Load Bundle dialog, type bundle as the Variable name, as shown in Figure 2-91.
Click Finish.
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.
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.
In the Choose Binding dialog, click the Resources tab and click the Add button, as shown in Figure 2-94.
In the New Resource type welcome as Resource Key and Welcome: as Resource value, as shown in Figure 2-95.
Click OK twice.
Click Finish.
Repeat the operation by dropping an Output Text component below the one you just created, as shown in Figure 2-97.
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.
In the Choose Binding dialog, expand JSF Managed Beans | LoginBean and select userName, as shown in Figure 2-99.
Click OK.
Back to the Output Text creation, click Finish, as shown in Figure 2-100.
The login page now looks similar to Figure 2-101.
The Preview tab looks similar to Figure 2-102.
Click the Save All button to save your work.
Now you can run and test the application in the embedded browser.
To run and test the application:
In the Project Explorer, right-click the login.jspx node and select Run As > Run on Server, as shown in Figure 2-103.
In the Run On Server dialog, have the Choose an existing server option selected, as shown in Figure 2-104.
Click Finish.
WebLogic Server starts and the Console window opens reporting the loading steps, as shown in Figure 2-105.
The embedded browser launches and loads the login page, as shown in Figure 2-106.
Enter a value for the Name and Password then click the Login button, as shown in Figure 2-107.
The welcome page returns the username coming from the managed bean, as shown in Figure 2-108.
Close the embedded browser window.
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:
In the Project Explorer right-click the login.jspx node and select Show AppXray Dependencies, as shown in Figure 2-109.
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.
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, as shown in Figure 2-111.
And keep going on expanding the nodes.
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.
You can repeat the operation on each component.
Right-click the application.properties node and select Open, as shown in Figure 2-113.
The application.properties file opens in the editor, as shown in Figure 2-114.
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, as shown in Figure 2-115.
Click the Overview tab to visualize the application environment.
Click the Navigation Rule tab for a graphical presentation of pages and navigation cases, as shown in Figure 2-116.
Click the Managed Bean tab for reviewing the defined managed bean, as shown in Figure 2-117.
Review the other tabs, as shown in Figure 2-118.
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:
Set the Workbench Perspective for a project
Create an ADF application
Define the WebLogic server
Create a Managed Bean
Create JSP pages
Use a Resource Bundle file
Optimize the use of the code editor
Refine the welcome page
Run the ADF Application
Use AppXray dependencies tool
|
 Copyright © 2008, 2014, Oracle and/or its affiliates. All rights reserved. Legal Notices |
|
