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 mode 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 MyHRConn, 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 from Tables wizard is displayed, click Next.

In the Entity Objects page of the wizard select (Control-click) the Departmentsand 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 View 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 View Objects.

Click Next.

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

In the Finish page, click Finish to create the Business Component model.

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 drag the Data Page icon to 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.

Press [Enter] to insert a blank 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.

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.