In the Application Navigator, right mouse click on the Applications node. Select New Application Workspace from the context menu.

Enter an Application Name of BIBeansApp. As an Application Template select Web Application [Default]. This sets the technologies scope to only those technologies that are commonly used when building JSP-Struts applications.

Click OK.. This creates an application workspace with two empty projects, ViewController and Model.

You will create the Business Component model in the Model project. Right-click the Model project in the Application Navigator, then select New from the context menu.

The technologies shown in the New Gallery are determined by the application template that you chose when you created the workspace.

Expand the Business Tier node. Select Business Components in the Categories list and Business Components from Tables in the Items list.

Click OK.

In the connection dialog select the HR connection and click OK. In this example, the connection is named hr_conn, but you can use any database connection to the HR or HR8 schema. For information on how to set up this connection, see Prerequisites.

If the Welcome page of the Create Business Components wizard is displayed, click Next.

In the Entity Objects page of the wizard select (Control-click) the Departments and Employees tables in the Available list. Click the Copy button to move the selected tables to the Selected list on the right.

Click Next.

In the Create Business Components wizard, you can create either updateable or read-only view objects. For this project, you will create updateable view objects.

In the Updateable View Objects from Entity Objects page, click the Add All button to move both entries to the Selected list on the right. This defines both selected Entity Objects as the source of the updateable View Objects.

Click Next.

In the Read-Only VIew Objects from Tables page, because you are not creating read-only View Objects, do not select any tables; just click Next to accept all default settings.

In the Application Module page click Next to accept all default settings.

In the Finish page, click Finish to create the Business Component model. You can see the model displayed in the Applications Navigator.

With the Model project selected in the Application Navigator, click the Save button and then Make in the JDeveloper toolbar to save and compile your project.

From the View menu open the following JDeveloper windows if not already open: Data Control Palette, Property Inspector, Structure window, Component Palette.

Note: Optionally, to save some space in the editor, you can drag the Component Palette on top of the Data Control Palettel. You navigate between them using tabs at the bottom.

Expand the ViewController node. Expand Web Content and WEB-INF then double-click the
struts-config.xml entry to open it in the Code Editor. Click the Page Flow Diagram tab in the Code Editor to open the visual editor for the Struts controller.

In the Component Palette select Struts Page Flow in the drop-down list, then click the Data Page icon and click in the empty Struts Page Flow Diagram.

Rename the data page: change /dataPage1 to /deptemp.

To create a JSP page, double-click the /deptemp icon. Accept the suggested JSP page name /deptemp.jsp and click OK.

The visual JSP editor opens automatically for you to create the application's view.

Type JSP Graph Example into the page, highlight the words with the mouse, and select Heading 1 from the Block Format drop-down list at the top of the page editor.

Place the cursor at the end of the title, then press [Enter] to begin a new line.

In the Component Palette, select CSS in the drop-down list. From the stylesheets shown, click Blaf.

Note that the appearance of the JSP changes to the new look and feel.

8.

Navigate to the Data Control Palette that shows the entries of the model created earlier (if it doesn't, use the right mouse context menu to refresh the Data Control Palette.)

Select DepartmentsView1 and select Read-Only Form from the Drag and Drop As drop-down list. Drag DepartmentsView1 to the deptemp.jsp page to a location below the title.

In the Data Control palette, again select DepartmentsView1, but this time select Navigation Buttons from the Drag and Drop As drop-down list.

Drag the Navigation Buttons into the form frame at the end of the existing table on the JSP page. This automatically adds the navigation bar to the form tag of the DepartmentsView1 Read Only Form.

Expand the DepartmentsView1 node in the Data Control Palette. Select the EmployeesView3 entry and choose Graph in the Drag and Drop As drop-down list.

Drag the EmployeesView3 to the deptemp.jsp page to a location below the DeptEmpView1 Read Only Form.

Click the Save button to save your work.

In the Application Navigator, expand the ViewController node, then Application Sources, then view. Select the deptempUIModel.xml entry.

In the Structure window right-click the EmployeesView3 entry at the end of the list and select Edit... from the context menu.

On the Select Data Collection dialog page click Next because EmployeesView3 is already selected.

In the Select Attributes dialog select LastName from the Series Attributes drop-down list. In the Data Attributes list box, select Salary, then click Finish.

Select the struts-config.xml tab at the top of the editor window to open the Struts Page Flow editor.

Right-click the /deptemp icon and from the context menu select Run to run the application

The application should display the departments:

The salaries of the employees in the displayed department are presented in a bar graph:

To invoke a WYSIWYG graph editor, in the Application Navigator expand ViewController > Application Sources > view, then double-click he BIGraphDef1.xml file..

In the Graph Editor, click the Graph Type button at the upper left of the editor.

.

Select Pie as the Graph Type and click OK.

You can run the application again to see the effects of the change.