In this tutorial you review an existing database schema by creating
a schema diagram. You also create a plan of the application by creating a page
flow diagram.
Place
the cursor over this icon to load and view
all the screenshots for this tutorial. (Caution: This action loads all
screenshots simultaneously, so, depending on your Internet connection,
may result in a slow response time.)
Note: Alternatively, you can place the cursor
over an individual icon in the following steps to load and view only the
screenshot associated with that step. You can hide an individual screenshot
by clicking it.
Overview
As a Forms or Designer developer, before you begin to build your application it is helpful to have an idea of the tables or views the application will use, the screens that you will need to build, and how they will work together. JDeveloper's modeling and page flow tools enable you to visualize these elements of the application as you build it.
In this tutorial you quickly create a diagram of the tables you
use in this workshop. You review the tables and generate the DDL. You then sketch
out the flow of the application in the form of a page flow diagram that is used
to control the navigation and behavior of the application that you develop.
You have been asked to create a small Order Entry application based on tables in a schema that already exists. You know there are query pages, update and data capture pages and you have been given the rough sketches of the desired layout for the completed screens. You first want to verify that the schema is appropriate for the task and as such would like to review the full schema before proceeding. You also want to capture the flow of the application in a high-level diagram from which you can build the various components of the application.
Have access to or have installed Oracle
JDeveloper10g version 10.1.3.
2
Ensure the embedded OC4J server settings are correct.
In the JDeveloper menu, select Tools | Embedded OC4J Server
Preferences. Expand Global and select
Startup. Select the Specify Host Name
option and set it to localhost,
then click OK.
3.
Have access to or install the Oracle 10g database.
4.
Have access to or install the OE
sample schema. If you have dropped the sample schemas from Oracle 10g,
or if you did not install them in the first place, you should install
them following the instructions in Oracle
Database Sample Schemas 10g Release 1 (10.1).
Warning: For security reasons, it
may not be advisable to install the sample schemas into a production
database. If you do install them, you should use passwords other
than default passwords, although default passwords are used in the examples
shown in tutorials provided by Oracle. When you are finished using the
sample schemas for tutorial and demo purposes, you may drop them by
issuing the following SQL*Plus command for each installed sample schema:
DROP USER <schema_name> CASCADE;
5.
If you are using the sample schemas for the first
time, you may find that you must unlock the OE sample schema user, and
then grant CONNECT and RESOURCE roles to it. You
can do this by using Oracle Enterprise Manager, which is part of Oracle
10g.
Alternatively, you can issue the following SQL*Plus
commands:
ALTER USER oe IDENTIFIED BY OE ACCOUNT
UNLOCK;
GRANT CONNECT, RESOURCE to OE;
Java Database Connectivity (JDBC) is a standard application
programming interface (API) that is used for connecting a Java application to
relational databases. To create a JDBC connection to the OE schema, perform
the following steps:
1.
Choose View | Connection Navigator.
2.
Right-click the Database
node and choose New Database Connection from the context
menu.
3.
In the Create Database Connection wizard,
review the information on the Welcome page and click Next.
4.
In the Connection Name
field type a name for the connection. Name the connection oeconn.
Click Next.
5.
On the Authentication page:
In the Username and Password fields,
type oe and oe.
Select Deploy password.
Click Next.
6.
On the Connection page:
In the Host name field, type the name (or IP address)
of the computer where the database is located. If the database is on
your PC, the value is the default: localhost.
In the JDBC Port and SID fields,
enter the information for the connection to the database. If you do
not know these values, check with your database administrator. The default
values are 1521 and ORCL.
Click Next.
7.
Click Test Connection.
If the database is available and the connection details are correct,
you will see Success! in the Status window.
If an error occurs, verify the settings with your database administrator,
click Back to make any changes necessary, and then
retest the connection.
8.
Click Finish. The connection now appears
below the Database connection node in the Connections Navigator.
You can create a web application without modeling the database schema. In some instances you may know the schema structure and so this step is unnecessary. However, you may have no tables at all and so need to model the schema and generate the DDL, or you may simply want a visual picture of the schema.
In this tutorial, you work with an existing schema,
and you use a database diagram to generate the DDL for all the tables. To model
the existing schema tables and generate the DDL script, perform the following
steps:
If you want to create a web application using JDeveloper,
you start by creating an application. An application is the highest level in
the control structure, and is made up of one or more projects. JDeveloper projects
are organizational structures used to logically group related files. You can
use projects to organize your source code. JDeveloper uses templates to expose
only those technology choices required for the particular aspect of work you
are interested in. By applying the Web Application[JSF, ADF BC] template, two
projects, Model and ViewController, are created for you. In this example you
want to review the tables in the database schema and so for that purpose, you
create an additional project.
To do this, perform the following steps:
1.
In the Applications Navigator, right-click the Applications
node and select New Application... from the context
menu.
2.
In the Create Application dialog, enter
the Application Name OrderEntry. Notice that as you
enter the application name, the directory name changes automatically.
Select the Application Template Web Application [JSF, ADF BC]
from the Application Template dropdown list.
Click OK.
The Applications Navigator shows the OrderEntry application and two default
projects: Model and ViewController.
3.
Add an additional project to the new application.
Right-click the OrderEntry application node and select
New Project from the context menu.
4.
In the New Gallery, expand General
and select Projects from the Categories list. Select
Empty Project from the Items list and click OK.
5.
In the Create Project dialog, enter the
Project Name OESchema. Notice that
as you enter the project name, the directory name changes automatically.
Click OK.
6.
The Applications Navigator shows that the OrderEntry
application now has three projects: Model, ViewController, and OESchema.
Note: The next two steps are optional. By doing them
you simplify the list of choices presented to you in the screens you'll
be using as you progress through the rest of the tutorial. You do not
need to do this in order to work with the database diagrammer.
Right-click the OESchema project and select Project
Properties from the context menu.
7.
In the Project Properties window, select Technology
Scope.
Select Database from the Available Technologies list.
Click Addto
shuttle it to the Selected Technologies list.
Click OK.
By completing this action, it now means that as you work with the OESchema
project, you will only be presented with database related information.
You can change this setting at any stage to display all available options.
8.
Click Save All
or select File | Save All to save your work.
In this section you display a selection of tables
from the OE schemas on a diagram. To display objects from online schemas on
a single diagram, perform the following steps:
1.
In the Applications Navigator, right-click
the OESchema project and select New
from the context menu
2.
In the Categories list of the New Gallery,
expand General and select Diagrams.
Because of the technology scope that you set for the project, the only
item available in the Items list is Database Diagram;
select this and click OK.
3.
In the Create Database Diagram dialog, enter
the name OESchema and give the package
the name OE.
Click OK.
The database diagram opens in the visual editor with the Database Component
Palette to the right.
4.
Switch to the Connections tab to display
the Connections Navigator. (If it is not available, use the menu choice
View | Connection Navigator.
Expand the Database node, then expand the oeconn
connection, the OE schema, and the Tables
node.
Select the tables CUSTOMERS, ORDERS,
ORDER_ITEMS and PRODUCT_INFORMATION
and drag them onto the page.
The Create from Database Object dialog presents you with a single choice:
Offline Database Objects. This single choice is due to the technology
scope you set. (You can select All Technologies from the dropdown list
to see the other choices if you like.)
Select Offline Database Objects and click OK.
Click Save All
or select File | Save All to save your work.
Note: In this section, you
review the tables and some of the features available in JDeveloper for enhancing
your diagram visually. If you do not have time, you can do some of this section
or move directly to the section 2.4.
Note: Dragging the tables from
the online connection onto the diagram causes two things to happen: 1) all the
tables were created as offline tables in the project and 2) they were drawn
on the diagram.
You can review the structures in a number of ways. To review the structures, do the following:
1.
In the Applications Navigator, expand the
OESchema project, the Offline Database Sources
node, and the OE package.
2.
Select any one of the tables and note the
columns, constraints and indexes displayed in the Structure window below
the Applications Navigator.
Hint: If the Structure window is not visible, select
View | Structure from the menu.
3.
Click the Thumbnail view, or select View
| Thumbnail from the menu if the Thumbnail is not visible.
Drag the little black square around the Thumbnail to focus on different
areas of the main database diagram. If your mouse has a wheel, rolling
the wheel will zoom the diagram in and out.
4.
To make the diagram appear less complicated
and easier to work with, right-click a blank space in the diagram and
select View As | Compact from the context menu. This
eliminates the column and constraint names from the display.
You can reverse this action at any time by right-clicking the diagram
and selecting View As | Standard from the context menu.
Note: By clicking in a blank space you compact all
the tables in the diagram. To compact just one table, select the table
first.
5.
If you change the shapes from Standard to
Compact, then you may need to redo the layout. Right-click a blank space
in the diagram and select Lay Out Shapes | Hierarchical (Bottom
to Top) from the context menu.
6.
You can use the Zoom controls at the top
left of the diagram editor to display a magnified or compacted diagram.
7.
You can use color to visually distinguish the tables
on a diagram. As an example isolate PRODUCT_INFORMATION
visually.
Click the PRODUCT_INFORMATION table in the diagram.
Right-click and select Visual Properties... from the
context menu.
8.
In the Visual Properties window, select Color / Font.
Click Fill Color to display a color picker for the
fill color of the selected tables. Click a color to select it, then
click OK.
9.
Lay out the tables on the diagram to suit your preference.
An illustration is offered as a guideline. Right-click on a single table,
a collection of tables, or anywhere on the diagram to see the various
drawing capabilities offered.
For example, to display the Foreign Key names on the diagram, select
all objects [ctrl A] and invoke the Visual Properties
dialog as you did before. Use the drop list to find Foreign Key and
set the display on.
You can also drag tables, lines and labels to different positions on
the diagram.
Click Save All
or select File | Save All to save your work.
NOTE: If you are extending
existing applications, you may need to modify the schema by adding tables or
by adding columns and regenerating the structures. In this tutorial you don't
modify any of the tables, instead just review the details and create a CREATE
DDL script. If you do not have time, you can do some of this section or move
directly to the Section 3.
There are a number of ways to invoke the table
definitions. To review a table and generate DDL, do the following:
1.
Double-click the CUSTOMERS
table either in the database diagram or in the Applications Navigator
(expand the OESchema project, the Database
Objects node, and the OE package).
Double-clicking the table invokes the Edit Offline Table dialog. Review
the various options, specifically the primary key and foreign key categories.
2.
You can also review the columns visually.
Right-click the CUSTOMERS table in the database diagram
and select View As | Standard to see the columns displayed.
(If all the columns are not visible, you may have to expand the height
of the table and of the column display compartment of the table in the
diagram).
3.
It is often useful to have a full CREATE
TABLE DDL script to hand. To do this select all the tables
in the diagram, right-click and select Generate | Data Definition
Language from the context menu.
4.
If the Welcome page of the Generate SQL
from Offline Database Objects wizard displays, click Next.
The Select Objects page of the wizard should show the four tables already
in the Selected list. Click Next.
5.
In the Generate Options page of the wizard, select CREATE
Objects and click Next.
6.
In the SQL Scripts Options page select
Generate SQL scriptsand enter a SQL
file name create_tables.sql.
Click Next.
7.
Do NOT select "Perform the Operation against the
Database." Click Finish.
8.
While you will not run this script in the tutorial,
you can run a SQL script, by right-clicking it in the code editor and
select Run in SQL*Plus and then select the desired
connection from the context menu. Do Not Run the Script against oeconn.
Note: The first time you run a script from JDeveloper,
in a new setup, you will be prompted for the path to the SQL*Plus executable.
As a Forms developer, you probably have some sort of plan in mind when you begin to build forms. In addition to knowing what tables the forms will use, you have an idea of screens that the user needs to see and how the user should navigate from one to another. Perhaps you draw a rough sketch of these ideas similar to the following:
.
Many developers do not build a page flow at this early
stage of the development cycle; instead they go ahead and build the business
service first. In this tutorial we take a slightly alternative approach, believing
that it is not only good to know what each independent page looks like by having
a rough sketch, but also by looking at the possible flow between pages. JDeveloper
provides a visual tool to diagram the page flow of the application. As subsequent
workshop sessions demonstrate, there is much that occurs behind the scenes of
this visual tool, which provides far more functionality than simply drawing
a diagram. However, for now you use it to capture an overview of the application
you plan to build.
To create a page flow diagram of the planned application, perform the following steps:
1.
In the Applications
Navigator, select the ViewController project.
Right-click and select Open JSF Navigation. This
opensthe faces-config.xml file in the Web Content
| Web INF node.
The page flow diagram opens in the editor.
2.
In the Component Palette to the right of
the visual page flow editor, ensure that JSF Navigation Diagram
is selected from the dropdown list at the top. Click JSF
Page, then click the diagram. Type over the name of the new
page: /browseCustomers.
(You need only type browseCustomers, the "/" and
extension .jsp are added for you.)
Note that the page icon for /browseCustomers shows a yellow alert because
there is no corresponding page built for it yet.
3.
Create two additional pages, /editCustomers
and /browseCustomerOrders, on the diagram:
You'll notice the file extension for both these pages is .jsp
4.
Next you create JSF Navigation Cases between the pages.
The significance of these becomes clear later; for now you can think
of them as visual indicators of the flow of the application.
To add the navigation, click JSF Navigation Case in
the Component Palette, then click the source, browseCustomers,
and then the destination, browseCustomerOrders. You
can also click any intermediate points where you want the line to bend.
5.
To modify the navigation properties, select the JSF
Navigation Case you have just created and change the From Outcome
property to customerOrders using the Property Palette.
You'll notice the navigation flow name changes on the diagram to customerOrders.
6.
Create a return navigation case from browseCustomerOrders
to browseCustomers. Again, change the name of the navigation
flow. This time edit it directly on the diagram by selecting
the flow name. Call the navigation case browseCustomers.
7.
Now create three JSF Navigation Cases between the pages
browseCustomers and editCustomers, the first from browseCustomers
to editCustomers, setting the From Outcome property
to editCustomers.
Create the next two from the editCustomers back to
the browseCustomers, setting the From Outcome property
to cancel and commit, respectively.
An alternative approach to setting this property is to double-click
the flow to invoke the dialog and edit the From Outcome property.
8.
Click Save All
or select File | Save All to save your work.
In this tutorial you created a diagram of the existing schema
available to you for this workshop. You reviewed the relationships and generated
the DDL. You will use these tables in future workshop sessions.
In addition, you created a page flow diagram for a few pages.
Bookmark
to
shuttle it to the Selected Technologies list.
or select File | Save All to save your work. 