Sample Store Catalog Application using Visual Web Pack and the Java Persistence APIs
Posted by caroljmcdonald on June 4, 2007 at 10:06 AM PDT
This Sample Store Catalog app demonstrates the usage of Visual Web Pack
and the new Java Persistence APIs to implement pagination in a
Web application.
Below are step by step instructions on how to build this example
on your own.
sample code
If you would like to learn more about building a sample store
application using Visual Web Pack, try out this JavaOne HOL:
a Real Life Application With Ajax and JavaServer Faces Components using
the NetBeans Visual Web Pack
Creating a new
Project
From NetBeans IDE, Create a new Visual Web Pack NetBeans project:
- Select File->
- Under Choose Project
pane,
select Web under
under Projects, and click
- the Name and
Location
pane appears.
- Enter the project name vwp-sessionpagination.
- For the Project Location
field, browse to select where you want to put your project.
- Click Finish
Adding
scrolling to the application using the Java Persistence APIs
The steps below explain how to
- access a
database with the Java Persistence API. - develop a JSP page which uses a Property Sheet
component - bind data
objects to JavaServer Faces components to
dynamically show the details of the catalog item on the page.
Choose Tools > Java DB Database > Start
Java DB
Server.
You'll see in the Output window indicating the server has been
started.
Unzip the dowloaded source code example. Copy the directory
vwp-sessionpagination\setup (and
all of its contents) from the
example into your project directory (the build.xml uses your project's
netbeans properties files). From a command line
window cd
into the directory yourprojectname\setup.
Then on the
command
line type: ant create-db. This will create the database
tables. The
text file with the SQL is in the directory:
vwp-sessionpagination\setup\sql\javadb .
Creating
the
Entity Classes and Persistence Unit
Create the JPA entity
classes from the data base tables.
Right-click the project node and choose New
>
File/Folder.
From the Persistence category, select Entity Classes
from
Database and click Next.
In the Data Source drop-down, select the jdbc/PETCatalogDB
database. If
prompted for a user name and password, use app and app. Select the
ITEM
table from the list, click Add and
then click Next.
Leave the tables and class names as their default, and set
the package
to model .
Click the Create Persistence Unit button. You can
leave the default the persistence unit name (Remember this name, it
will be used later to get the EntityManagerFactory) . If you installed
another persistence
provider you can select that, otherwise use TopLink. Select
as the table generation strategy. Click
Create.
Click Finish in the Entity
Classes from
Database wizard. The IDE
creates the persistence unit (persistence.xml in the
projectname\src\conf directory) and the entity
classes (in Source Packages ).
In the Projects window expand Source Packages > data to
look at the
Item.java Entity Class which was
generated from the item table.
Classes from
Database wizard. The IDE
creates the persistence unit (persistence.xml in the
projectname\src\conf directory) and the entity
classes (in Source Packages ).
In the Projects window expand Source Packages > data to
look at the
Item.java Entity Class which was
generated from the item table.
Adding
code
to the Session Bean to get a list of items
In the Projects window,Double-click the
SessionBean1 node
to open
the SessionBean1.java source file in the editor. Add the following code
(shown in
to the code already in SessionBean1.
PersistenceUnit unitName (shown in Red below) is the same name you used
when
creating the Persistence Unit above. This is JPA code to get and
page through a list of Items which
we will use for
scrolling through the catalog.This JPA code calls the EntityManager
createQuery and Query
getResultList methods to get a list of items and stores the results in
the SessionBean1 items property. The next(), prev()... methods will be
used by the page button action methods to scroll through
the items list.
private Item item;
Add the following code
in bold to the SessionBean1 init() method :
public void init() {
. . .
}
Right-click in the source and choose Fix
Imports from the
pop-up
menu.
The Fix Imports dialog appears.
Select the following fully qualified
names, and click OK.
Queryjavax.persistence.QueryListjava.util.ListClose and save the file.
Close and reopen the project.
You must close and reopen the project to make the Session Bean Item
appear in the list of Bind
to Data Objects, which we will do later with the Property components.
appear in the list of Bind
to Data Objects, which we will do later with the Property components.
Add a
property
sheet and Properties to the Page1
In the Projects window, double-click Web Pages
> Page1.jsp
to open the page in the Visual Designer.
From the Layout section of the Palette,
drag a Property
Sheet component onto the page.
The Property Sheet component provides a
container for laying out the catalog item information. The Property
Sheet component contains a Property
Sheet Section, which in turn contains a Property component.
container for laying out the catalog item information. The Property
Sheet component contains a Property
Sheet Section, which in turn contains a Property component.
Select Property Sheet Section 1. In the Properties
window, set the label property to
.
In the Outline window, expand
propertySheet1 >
section1 and then select the property1 node. In the Properties window,
set the
and press Enter.
In the Outline window, select section1, right-click, and
choose
Add Property from the pop-up menu. In the Properties window, set the
property to
In the Outline window, select section1, right-click, and
choose
Add Property from the pop-up menu. In the Properties window, set the
property to
In the Outline window, select section1, right-click, and
choose
Add Property from the pop-up menu. In the Properties window, set the
property to
In the Outline window, select section1, right-click, and
choose
Add Property from the pop-up menu. In the Properties window, set the
property to
Your Page1 page should now look like the figure below:
propertySheet1 >
section1 and then select the property1 node. In the Properties window,
set the
label property to Scroll:and press Enter.
In the Outline window, select section1, right-click, and
choose
Add Property from the pop-up menu. In the Properties window, set the
labelproperty to
Name:In the Outline window, select section1, right-click, and
choose
Add Property from the pop-up menu. In the Properties window, set the
labelproperty to
Description:In the Outline window, select section1, right-click, and
choose
Add Property from the pop-up menu. In the Properties window, set the
labelproperty to
Price: and press Enter. In the Outline window, select section1, right-click, and
choose
Add Property from the pop-up menu. In the Properties window, set the
labelproperty to
Photo: and press Enter.Your Page1 page should now look like the figure below:
Drag a Button component from the
Palette and drop
it on
the property1 node in the Outline window.
The Button becomes a subnode of
property1. The Button also appears in
the Visual Designer. In the Button properties window (or on the button
itself) type << for the text property .
property1. The Button also appears in
the Visual Designer. In the Button properties window (or on the button
itself) type << for the text property .
Drag another Button component
from the Palette and
drop
it on the property1 node in the Outline window.
In the Button properties window type
< for the
text property .
< for the
text property .
Drag another Button component
from the Palette and
drop
it on the property1 node in the Outline window.
In the Button properties window type
> for the
text property .
> for the
text property .
Drag another Button component
from the Palette and
drop
it on the property1 node in the Outline window.
In the Button properties window type >>
for the
text property.
Your Page1 page should now look like the figure below.
for the
text property.
Your Page1 page should now look like the figure below.
Drag a Static Text component from
the Palette and
drop
it on the property2 node in the Outline window.
The Static Text becomes a subnode of
property2. The Static Text also
appears in the Visual Designer. In the static text properties window
set the id property to
property2. The Static Text also
appears in the Visual Designer. In the static text properties window
set the id property to
name . Right-click the Static Text component and
choose Bind to
Data
from the pop-up menu.
In the dialog box, In the Bind to
an Object tab,
expand SessionBean1,
expand item, select property itemname and click OK.
This will set the label text property to
, as shown in the figure below:
For the Description and Price properties repeat the steps
above
to drag a static text component onto the associated property, then bind
to the associated SessionBean1 item properties:
For the Photo property drag an Image component
from the
Palette and drop it on the property4 node in the Outline window. In the
image Properties Window enter photoid
property, enter 150 for the width property, enter 150
for the height property.
an Object tab,
expand SessionBean1,
expand item, select property itemname and click OK.
This will set the label text property to
#{SessionBean1.item.itemname}, as shown in the figure below:
For the Description and Price properties repeat the steps
above
to drag a static text component onto the associated property, then bind
to the associated SessionBean1 item properties:
#{SessionBean1.item.description}, #{SessionBean1.item.price}For the Photo property drag an Image component
from the
Palette and drop it on the property4 node in the Outline window. In the
image Properties Window enter photoid
property, enter 150 for the width property, enter 150
for the height property.
Right-click the Image component and
choose Bind to Data
from the pop-up menu.
In the dialog box, In the Bind to
an Object tab,
expand
SessionBean1, expand item, select property imageurl and click
OK.
This will set the image url property to
Go to the Page1 in the
Your Page1 should now look like the figure below (I added a image of a
parrot and a Label "Java Pet Store" to the page below):
Add
Actions
to the scrolling buttons on Page1:
In the Projects window, double-click Web Pages
>Page1.jsp
to open the page in the Visual Designer.
Double-click the << button component that you just
added
to
the page.
The IDE adds a button1_action() method for processing a click on the
button and displays the button1_action() method in the source editor.
The IDE also registers the method as a handler for the action event.
Next you add code to this method.
Add the following code (shown in bold)
to the
button1_action() method. This code calls the SessionBean1.prevBatch()
method to query to get the previous batch (resultList) of items (based
on the batchSize query variable) from the item table. The
items table in this sample is not very large, but for large databases
it is useful to set a size for the query result list .
border="1" cellpadding="2" cellspacing="0">
Code Sample : button1_action()
border="1" cellpadding="2" cellspacing="0">
Code Sample : prerender()
an Object tab,
expand
SessionBean1, expand item, select property imageurl and click
OK.
This will set the image url property to
#{SessionBean1.item.imageurl}.Go to the Page1 in the
Your Page1 should now look like the figure below (I added a image of a
parrot and a Label "Java Pet Store" to the page below):
Add
Actions
to the scrolling buttons on Page1:
In the Projects window, double-click Web Pages
>Page1.jsp
to open the page in the Visual Designer.
Double-click the << button component that you just
added
to
the page.
The IDE adds a button1_action() method for processing a click on the
button and displays the button1_action() method in the source editor.
The IDE also registers the method as a handler for the action event.
Next you add code to this method.
Add the following code (shown in bold)
to the
button1_action() method. This code calls the SessionBean1.prevBatch()
method to query to get the previous batch (resultList) of items (based
on the batchSize query variable) from the item table. The
items table in this sample is not very large, but for large databases
it is useful to set a size for the query result list .
public String button1_action() {
return null;
}
open the
button2_action()
method in the Java editor.
Add the following code (shown in bold)
to the
button2_action() method. This code calls the SessionBean1.prev() method
to decrement the item list index .
| Code Sample : button2_action() |
|
Double-click on the > button to open the
button3_action()
method in the Java editor.
Add the following code (shown in bold)
to the
button3_action() method. This code calls the SessionBean1.next() method
to increment the item list index .
| Code Sample : button3_action() |
|
Double-click on the >> button to open the
button4_action()
method in the Java editor.
Add the following code (shown in bold)
to the
button4_action() method. This code calls the SessionBean1.nextBatch()
method to query to get the next batch (resultList) of items (based on
the batchSize query variable) from
the item table.
| Code Sample : button4_action() |
|
page, scroll
up to
the prerender() method. Add the following code
(shown in bold) to the
prerender() method.
public void prerender() {
getSessionBean1().setItem(getSessionBean1().getIndex());
}
Run
the
project to test scrolling through the Page1 Pages using
Hibernate with the Java Persistence API
Now you are ready to build and run the project.
In the main toolbar, click Run Main
Project to run the
project.
The detailed item information for the 1st item from the ITEM database
table should be
displayed. Click on the << (Previous Batch), < (Previous),
> (Next), and >> (Next Batch)
buttons
to
scroll through the items, from the ITEM database table, displayed on
the page.
In the main toolbar, click Run Main
Project to run the
project.
The detailed item information for the 1st item from the ITEM database
table should be
displayed. Click on the << (Previous Batch), < (Previous),
> (Next), and >> (Next Batch)
buttons
to
scroll through the items, from the ITEM database table, displayed on
the page.
height="712" width="723">
Summary:
We went over how to develop a quick application that
accesses a database with the Java Persistence API
and how to configure and use the Property Sheet, Property, Static Text,
and Button components in NetBeans Visual Web Pack
to display and scroll through dynamic data from the database.
Related Topics >>
Blog Links >>
- Login or register to post comments
- Printer-friendly version
- caroljmcdonald's blog
- 2225 reads
