Survey
* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project
Download ppt
Document related concepts
no text concepts found
Transcript
1
27
Ajax-Enabled
JavaServer™
Faces Web
Applications
2007 Pearson Education, Inc. All rights reserved.
2
Whatever is in any way beautiful hath its
source of beauty in itself, and is
complete in itself; praise forms no part of it.
—Marcus Aurelius Antoninus
There is something in a face, An air,
and a peculiar grace, Which boldest
painters cannot trace.
—William Somerville
Cato said the best way to keep good
acts in memory was to refresh them with new.
—Francis Bacon
2007 Pearson Education, Inc. All rights reserved.
3
I never forget a face, but in your
case I’ll make an exception.
—Groucho Marx
Painting is only a bridge linking the
painter’s mind with that of the viewer.
—Eugéne Delacroix
2007 Pearson Education, Inc. All rights reserved.
4
OBJECTIVES
In this chapter you will learn:
To use data providers to access databases
from web applications built in Netbeans.
To include Ajax-enabled JSF components in
a Netbeans web application project.
To configure virtual forms that enable subsets
of a form’s input components to be submitted
to the server.
2007 Pearson Education, Inc. All rights reserved.
5
27.1
27.2
27.3
27.4
Introduction
Accessing Databases in Web Applications
27.2.1 Building a Web Application That Displays
Data from a Database
27.2.2 Modifying the Page Bean File for the
AddressBook Application
Ajax-Enabled JSF Components
AutoComplete Text Field and Virtual Forms
27.4.1 Configuring Virtual Forms
27.4.2 JSP File with Virtual Forms and a
AutoComplete Text Field
27.4.3 Providing Suggestions for a AutoComplete
Text Field
2007 Pearson Education, Inc. All rights reserved.
6
27.5
27.6
27.7
Google Maps Map Viewer Component
27.5.1 Obtaining a Google Maps API Key
27.5.2 Adding Map Viewer Component to a Page
27.5.3 JSP File with Map Viewer Component
27.5.3 JSP File with Map Viewer Component
27.5.4 Page Bean that Displays a Map in the Map
Viewer Component
Wrap-Up
Web Resources
2007 Pearson Education, Inc. All rights reserved.
7
27.1 Introduction
AddressBook Application
– Three stages
Introduce Ajax-Enabled JSF components from
the Java BluePrints Ajax componlibrary
1992-2007 Pearson Education, Inc. All rights reserved.
8
27.2 Accessing Databases in Web
Applications
Many web applications access databases to store
and retrieve persistent data
1992-2007 Pearson Education, Inc. All rights reserved.
9
27.2.1 Building a Web Application That
Displays Data from a Database
Table component
– Formats and displays data from database tables
– Change the Table’s title property to specify the text displayed
at the top of the Table
1992-2007 Pearson Education, Inc. All rights reserved.
10
27.2.1 Building a Web Application That
Displays Data from a Database
To add a Java DB database to a project
– To create database, perform the following steps:
- Select Tools > Java DB Database > Create Java DB
Database….
- Enter the name of the database to create (AddressBook), a
username (iw3htp4) and a password (iw3htp4), then click OK
to create the database.
– In the Netbeans Runtime tab (to the right of the Projects and
Files tabs), the preceding steps create a new entry in the
Databases node showing the URL of the database
jdbc:derby://localhost:1527/AddressBook
– This URL indicates that the database resides on the local
machine and accepts connections on port 1527.
1992-2007 Pearson Education, Inc. All rights reserved.
11
27.2.1 Building a Web Application That
Displays Data from a Database
To add a table to a database
– Use the Runtime tab to create tables and to execute SQL statements that
populate the database with data
- Click the Runtime tab and expand the Databases node
- 2. Netbeans must be connected to the database to execute SQL statements. If
Netbeans is already connected, proceed to Step 3. If Netbeans is not
connected to the database, the icon appears next to the database’s URL
(jdbc:derby://localhost:1527/AddressBook). In this case, right click the
icon and click Connect….
– Expand the node for the AddressBook database, right click the Tables
node and select Execute Command… to open a SQL Command editor in
Netbeans
- We provided the file AddressBook.sql in this chapter’s examples folder
- Copy the SQL statements and paste them into the SQL Command editor in
Netbeans
- Highlight all the SQL commands, right click inside the SQL Command editor
and select Run Selection
- You may need to refresh the Tables node of the Runtime tab to see the new table
1992-2007 Pearson Education, Inc. All rights reserved.
12
27.2.1 Building a Web Application That
Displays Data from a Database
To configure a Table component to display database data
–
–
–
–
Right click the Table component
Select Bind to Data
Items under Selected will appear in the table
You can remove a column by selecting it and clicking <
1992-2007 Pearson Education, Inc. All rights reserved.
13
27.2.1 Building a Web Application That
Displays Data from a Database
By default, the Table’s column headings are the
column names in the database table displayed in
all capital letters
– Can change these headings by selecting a column and
editing its headerText property in the Properties
window
– To select a column, click the column’s name in Design
mode
1992-2007 Pearson Education, Inc. All rights reserved.
14
27.2.1 Building a Web Application That
Displays Data from a Database
Checking a Table’s paginationControls
property configures a Table for automatic
pagination
– Five rows displayed at a time
– Buttons for moving forward and backward between
groups of five contacts added to the bottom of the Table
Set internalVirtualForm property
– Allows subsets of Form components to be submitted
to server
– Prevents table’s pagination controls from submitting
entire form every time the user moves to the next set
of contacts
1992-2007 Pearson Education, Inc. All rights reserved.
15
27.2.1 Building a Web Application That
Displays Data from a Database
Binding a Table to a data provider adds a new
CachedRowSetDataProvider to the
application’s node in the Outline window
CachedRowSetDataProvider
– Provides a scrollable RowSet that can be bound to a Table
component to display the RowSet’s data
1992-2007 Pearson Education, Inc. All rights reserved.
16
27.2.1 Building a Web Application That
Displays Data from a Database
CachedRowSet object is configured by default
to execute a SQL query that selects all the data in
the database table
– Can edit this SQL query by expanding the SessionBean
node in the Outline window and double clicking the
RowSet element to open the query editor window
1992-2007 Pearson Education, Inc. All rights reserved.
17
Fig. 27.1 | AddressBook application form for adding a contact.
2007 Pearson Education, Inc. All rights reserved.
18
FirstName LastName
Bob
Green
Liz
White
Mike
Brown
Mary
Green
John
Gray
Meg
Gold
James
Blue
Sue
Black
Street
City
State
5 Bay St. San
CA
Francisco
100 5th
New York NY
Ave.
3600
St. Louis MO
Delmar
Blvd.
300
MA
Massachus Boston
etts Ave.
500 South Philadelp PA
St.
hia
1200
Denver
CO
Stout St.
1000
Seattle
WA
Harbor
Ave.
1000
IL
Michigan Chicago
Ave.
Zip
94133
10011
63108
02115
19147
80204
98116
60605
Fig. 27.2 | Addresses table data.
2007 Pearson Education, Inc. All rights reserved.
19
Fig. 27.3 | Dialog for binding to the Addresses table.
2007 Pearson Education, Inc. All rights reserved.
20
Fig. 27.4 | Table component after binding it to a database table and
editing its column names for display purposes.
2007 Pearson Education, Inc. All rights reserved.
21
Fig. 27.5 | Editing addressesRowSet’s SQL statement.
2007 Pearson Education, Inc. All rights reserved.
1
<?xml version="1.0" encoding="UTF-8"?>
2
<!-- Fig. 27.6: AddressBook.jsp -->
3
<!-- AddressBook JSP with an add form and a Table JSF component. -->
4
<jsp:root version="1.2"
5
xmlns:f="http://java.sun.com/jsf/core"
6
xmlns:h="http://java.sun.com/jsf/html"
7
xmlns:jsp="http://java.sun.com/JSP/Page"
8
xmlns:webuijsf="http://www.sun.com/webui/webuijsf">
9
<jsp:directive.page contentType="text/html;charset=UTF-8"
10
<f:view>
12
<webuijsf:page binding="#{AddressBook.page1}" id="page1">
14
15
16
AddressBook.jsp
(1 of 7 )
<webuijsf:html binding="#{AddressBook.html1}" id="html1">
<webuijsf:head binding="#{AddressBook.head1}" id="head1">
<webuijsf:link binding="#{AddressBook.link1}" id="link1"
url="/resources/stylesheet.css"/>
17
</webuijsf:head>
18
<webuijsf:body binding="#{AddressBook.body1}" id="body1"
19
style="-rave-layout: grid">
20
<webuijsf:form binding="#{AddressBook.form1}" id="form1">
21
<webuijsf:staticText binding="#{AddressBook.staticText1}"
22
id="staticText1" style="font-size: 18px; left: 24px;
23
top: 24px; position: absolute"
24
text="Add a contact to the address book:"/>
25
Outline
pageEncoding="UTF-8"/>
11
13
22
<webuijsf:label binding="#{AddressBook.fnameLabel}"
26
for="fnameTextField" id="fnameLabel" style=
27
"position: absolute; left: 24px; top: 72px"
28
text="First name:"/>
2007 Pearson Education,
Inc. All rights reserved.
29
<webuijsf:textField binding="#{AddressBook.fnameTextField}"
30
id="fnameTextField" maxLength="30" required="true"
31
style="left: 100px; top: 72px; position: absolute;
32
width: 192px"/>
33
for="lnameTextField" id="lnameLabel" style="left: 312px;
35
top: 72px; position: absolute" text="Last name:"/>
<webuijsf:textField binding="#{AddressBook.lnameTextField}"
37
id="lnameTextField" maxLength="30" required="true"
38
style="left: 390px; top: 72px; position: absolute;
39
width: 214px"/>
40
for="streetTextField" id="streetLabel" style="position:
42
absolute; left: 24px; top: 96px" text="Street:"/>
"#{AddressBook.streetTextField}" id="streetTextField"
45
maxLength="150" required="true" style="left: 100px;
46
top: 96px; position: absolute; width: 504px"/>
<webuijsf:label binding="#{AddressBook.cityLabel}"
48
for="cityTextField" id="cityLabel" style="left: 24px;
49
top: 120px; position: absolute" text="City:"/>
50
<webuijsf:textField binding="#{AddressBook.cityTextField}"
51
id="cityTextField" maxLength="30" required="true"
52
style="left: 100px; top: 120px; position: absolute;
53
width: 240px"/>
54
(2 of 7 )
<webuijsf:textField binding=
44
47
AddressBook.jsp
<webuijsf:label binding="#{AddressBook.streetLabel}"
41
43
Outline
<webuijsf:label binding="#{AddressBook.lnameLabel}"
34
36
23
<webuijsf:label binding="#{AddressBook.stateLabel}"
55
for="stateTextField" id="stateLabel" style="left: 360px;
56
top: 120px; position: absolute" text="State:"/>
2007 Pearson Education,
Inc. All rights reserved.
57
<webuijsf:textField binding="#{AddressBook.stateTextField}"
58
id="stateTextField" maxLength="2" required="true"
59
style="left: 412px; top: 120px; position: absolute;
60
width: 48px"/>
61
for="zipTextField" id="zipLabel" style="left: 490px;
63
top: 120px; position: absolute" text=" Zip:"/>
<webuijsf:textField binding="#{AddressBook.zipTextField}"
65
id="zipTextField" maxLength="5" required="true"
66
style="left: 534px; top: 120px; position: absolute;
67
width: 70px"/>
68
"#{AddressBook.submitButton_action}" binding=
70
"#{AddressBook.submitButton}" id="submitButton"
71
primary="true" style="left: 100px; top: 168px;
72
position: absolute; width: 100px" text="Submit"/>
id="clearButton" reset="true" style="left: 215px; top:
75
168px; position: absolute; width: 100px" text="Clear"/>
<webuijsf:messageGroup binding=
77
"#{AddressBook.messageGroup1}" id="messageGroup1"
78
showGlobalOnly="true" style="left: 624px; top: 72px;
79
position: absolute"/>
80
81
(3 of 7 )
<webuijsf:button binding="#{AddressBook.clearButton}"
74
76
AddressBook.jsp
<webuijsf:button actionExpression=
69
73
Outline
<webuijsf:label binding="#{AddressBook.zipLabel}"
62
64
24
<webuijsf:table augmentTitle="false" binding=
"#{AddressBook.addressesTable}" id="addressesTable"
2007 Pearson Education,
Inc. All rights reserved.
82
paginateButton="true" paginationControls="true"
83
style="left: 24px; top: 216px; position: absolute"
84
title="Contacts" width="816">
85
<webuijsf:tableRowGroup binding=
86
"#{AddressBook.tableRowGroup1}" id="tableRowGroup1"
87
rows="5"
88
sourceData="#{AddressBook.addressesDataProvider}"
89
sourceVar="currentRow">
90
<webuijsf:tableColumn binding=
91
"#{AddressBook.fnameColumn}" headerText=
92
"First Name" id="fnameColumn"
93
sort="ADDRESSES.FIRSTNAME">
94
<webuijsf:staticText binding=
95
"#{AddressBook.staticText2}" id="staticText2"
96
text="#{currentRow.value[
97
'ADDRESSES.FIRSTNAME']}"/>
98
</webuijsf:tableColumn>
99
<webuijsf:tableColumn binding=
100
"#{AddressBook.lnameColumn}"
101
headerText="Last Name" id="lnameColumn"
102
sort="ADDRESSES.LASTNAME">
103
<webuijsf:staticText binding=
104
"#{AddressBook.staticText3}" id="staticText3"
105
text="#{currentRow.value[
106
'ADDRESSES.LASTNAME']}"/>
107
</webuijsf:tableColumn>
108
<webuijsf:tableColumn binding=
109
"#{AddressBook.streetColumn}" headerText="Street"
110
id="streetColumn" sort="ADDRESSES.STREET">
111
<webuijsf:staticText binding=
112
"#{AddressBook.staticText4}" id="staticText4"
25
Outline
AddressBook.jsp
(4 of 7 )
2007 Pearson Education,
Inc. All rights reserved.
113
text="#{currentRow.value[
114
'ADDRESSES.STREET']}"/>
115
</webuijsf:tableColumn>
116
<webuijsf:tableColumn binding=
117
"#{AddressBook.cityColumn}" headerText="City"
118
id="cityColumn" sort="ADDRESSES.CITY">
119
<webuijsf:staticText binding=
120
"#{AddressBook.staticText5}" id="staticText5"
121
text="#{currentRow.value['ADDRESSES.CITY']}"/>
122
</webuijsf:tableColumn>
123
<webuijsf:tableColumn binding=
124
"#{AddressBook.stateColumn}" headerText="State"
125
id="stateColumn" sort="ADDRESSES.STATE">
126
<webuijsf:staticText binding=
127
"#{AddressBook.staticText6}" id="staticText6"
128
text="#{currentRow.value['ADDRESSES.STATE']}"/>
129
</webuijsf:tableColumn>
130
<webuijsf:tableColumn binding=
131
"#{AddressBook.zipColumn}" headerText="Zip"
132
id="zipColumn" sort="ADDRESSES.ZIP" width="106">
133
<webuijsf:staticText binding=
134
"#{AddressBook.staticText7}" id="staticText7"
135
text="#{currentRow.value['ADDRESSES.ZIP']}"/>
AddressBook.jsp
(5 of 7 )
</webuijsf:tableRowGroup>
137
</webuijsf:table>
138
</webuijsf:form>
139
141
Outline
</webuijsf:tableColumn>
136
140
26
</webuijsf:body>
</webuijsf:html>
142
</webuijsf:page>
143
</f:view>
144 </jsp:root>
2007 Pearson Education,
Inc. All rights reserved.
27
Outline
AddressBook.jsp
(6 of 7 )
2007 Pearson Education,
Inc. All rights reserved.
28
Outline
AddressBook.jsp
(7 of 7 )
2007 Pearson Education,
Inc. All rights reserved.
1
// Fig. 27.7: SessionBean1.java
2
// Session bean that initializes the data source for the
3
// AddressBook database.
4
package addressbook;
29
Outline
5
6
import com.sun.rave.web.ui.appbase.AbstractSessionBean;
7
import com.sun.sql.rowset.CachedRowSetXImpl;
8
import javax.faces.FacesException;
9
SessionBean1
.java
(1 of 2 )
10 public class SessionBean1 extends AbstractSessionBean
11 {
12
private int __placeholder;
13
14
private void _init() throws Exception
15
{
16
17
18
addressesRowSet.setDataSourceName(
"java:comp/env/jdbc/dataSource" );
addressesRowSet.setCommand(
19
"SELECT ALL IW3HTP4.ADDRESSES.FIRSTNAME, \n" +
20
"IW3HTP4.ADDRESSES.LASTNAME, \n" +
21
"IW3HTP4.ADDRESSES.STREET, \n" +
22
"IW3HTP4.ADDRESSES.CITY, \n" +
23
"IW3HTP4.ADDRESSES.STATE, \n" +
24
"IW3HTP4.ADDRESSES.ZIP \n" +
25
"FROM IW3HTP4.ADDRESSES\n" +
26
"ORDER BY IW3HTP4.ADDRESSES.LASTNAME ASC, \n" +
27
"IW3HTP4.ADDRESSES.FIRSTNAME ASC " );
28
addressesRowSet.setTableName( "ADDRESSES" );
29
Specifies the database for
the RowSet
Specifies the SQL used to
obtain the data that will
be displayed in the Table
} // end method _init
2007 Pearson Education,
Inc. All rights reserved.
30
31
30
private CachedRowSetXImpl addressesRowSet = new CachedRowSetXImpl();
32
33
public CachedRowSetXImpl getAddressesRowSet()
34
{
return addressesRowSet;
35
Outline
}
SessionBean1
.java
38
public void setAddressesRowSet( CachedRowSetXImpl crsxi )
(2 of 2 )
39
{
36
37
this.addressesRowSet = crsxi;
40
41
}
42
43
// To save space, we omitted the code in lines 42-78. The complete
44
// source code is provided with this chapter's examples.
79 } // end class SessionBean1
2007 Pearson Education,
Inc. All rights reserved.
31
27.2.2 Modifying the Page Bean File for
the AddressBook Application
Every row in a CachedRowSetDataProvider
has its own key
– Method appendRow adds a new row and returns its key
Method commitChanges of class
CachedRowSetDataProvider
– Applies any changes to the CachedRowSet to the
database
CachedRowSetDataProvider method
refresh
– Re-executes the wrapped CachedRowSet’s SQL
statement
1992-2007 Pearson Education, Inc. All rights reserved.
1
// Fig. 27.8: AddressBook.java
2
// Page bean for AddressBook.jsp.
3
package addressbook;
32
Outline
4
5
import com.sun.data.provider.RowKey;
6
import com.sun.data.provider.impl.CachedRowSetDataProvider;
7
import com.sun.rave.web.ui.appbase.AbstractPageBean;
8
import com.sun.webui.jsf.component.Body;
9
import com.sun.webui.jsf.component.Button;
AddressBook.java
(1 of 4 )
10 import com.sun.webui.jsf.component.Form;
11 import com.sun.webui.jsf.component.Head;
12 import com.sun.webui.jsf.component.Html;
13 import com.sun.webui.jsf.component.Label;
14 import com.sun.webui.jsf.component.Link;
15 import com.sun.webui.jsf.component.MessageGroup;
16 import com.sun.webui.jsf.component.Page;
17 import com.sun.webui.jsf.component.StaticText;
18 import com.sun.webui.jsf.component.Table;
19 import com.sun.webui.jsf.component.TableColumn;
20 import com.sun.webui.jsf.component.TableRowGroup;
21 import com.sun.webui.jsf.component.TextField;
22 import com.sun.webui.jsf.model.DefaultTableDataProvider;
23 import javax.faces.FacesException;
24
2007 Pearson Education,
Inc. All rights reserved.
25 public class AddressBook extends AbstractPageBean
26 {
27
33
Outline
private int __placeholder;
28
29
private void _init() throws Exception
30
{
( javax.sql.rowset.CachedRowSet ) getValue(
32
"#{SessionBean1.addressesRowSet}" ) );
33
(2 of 4 )
addressesTable.setInternalVirtualForm( true );
34
35
AddressBook.java
addressesDataProvider.setCachedRowSet(
31
} // end method _init
36
37
// To save space, we omitted the code in lines 37-505. The complete
38
// source code is provided with this chapter's examples.
39
506
public void prerender()
507
{
addressesDataProvider.refresh();
508
509
} // end method prerender
510
511
public void destroy()
512
{
513
514
515
addressesDataProvider.close();
} // end method destroy
Refreshes the
addressesDataProvider
so that records are sorted
properly after new rows are
added.
Ensure
that data provider
is closed when
application terminates
2007 Pearson Education,
Inc. All rights reserved.
516
// To save space, we omitted the code in lines 516-530. The complete
517
// source code is provided with this chapter's examples.
Outline
518
531
// action handler that adds a contact to the AddressBook database
532
// when the user clicks Submit
533
public String submitButton_action()
534
{
535
if ( addressesDataProvider.canAppendRow() )
536
{
537
try
538
{
34
AddressBook.java
(3 of 4 )
543
Adds new row and gets
Uses
key
to specify the
addressesDataProvider.setCursorRow( rk );
its
key
row to which the cursor
should point Sets the value of one
addressesDataProvider.setValue( "ADDRESSES.FIRSTNAME",
column (first name)
fnameTextField.getValue() );
544
addressesDataProvider.setValue( "ADDRESSES.LASTNAME",
539
540
541
542
545
546
547
548
549
550
551
552
553
554
555
RowKey rk = addressesDataProvider.appendRow();
lnameTextField.getValue() );
addressesDataProvider.setValue( "ADDRESSES.STREET",
streetTextField.getValue() );
addressesDataProvider.setValue( "ADDRESSES.CITY",
cityTextField.getValue() );
addressesDataProvider.setValue( "ADDRESSES.STATE",
stateTextField.getValue() );
addressesDataProvider.setValue( "ADDRESSES.ZIP",
zipTextField.getValue() );
addressesDataProvider.commitChanges();
Commits the changes to
the database
2007 Pearson Education,
Inc. All rights reserved.
556
// reset text fields
557
lnameTextField.setValue( "" );
558
fnameTextField.setValue( "" );
559
streetTextField.setValue( "" );
560
cityTextField.setValue( "" );
561
stateTextField.setValue( "" );
562
zipTextField.setValue( "" );
563
} // end try
564
catch ( Exception ex )
565
{
566
567
568
569
error( "The address book was not updated.
35
Outline
AddressBook.java
(4 of 4 )
" +
ex.getMessage() );
} // end catch
} // end if
570
571
572
return null;
} // end method submitButton_action
573 } // end class AddressBook
2007 Pearson Education,
Inc. All rights reserved.
36
27.3 Ajax-Enabled JSF Components
Ajax—Asynchronous JavaScript and XML
– Term coined by Jesse James Garrett of Adaptive Path, Inc.
– Describes a range of technologies for developing highly
responsive, dynamic web applications
Separates the user interaction portion of an application
from its server interaction
– Enables both to proceed asynchronously in parallel
– Enables Ajax web-based applications to perform at speeds
approaching those of desktop applications
Makes asynchronous calls to the server to exchange small
amounts of data
Allows only the necessary portions of the page to reload,
saving time and resources
1992-2007 Pearson Education, Inc. All rights reserved.
37
27.3 Ajax-Enabled JSF Components
Java BluePrints Ajax component library provides Ajaxenabled JSF components
To use the Java BluePrints Ajax-enabled components
–
–
–
–
Must download and import them
Choose Tools > Update Center
Click Next > to search for available updates
In the Available Updates and New Modules area of the
dialog, select BluePrints AJAX Components and click the
right arrow (>) button
– Click Next > and follow the prompts to accept the terms of use
and download the components
– When the download completes, click Next > then click Finish.
– Click OK to restart the IDE.
1992-2007 Pearson Education, Inc. All rights reserved.
38
27.3.1 Java BluePrints Component
Library
To import the components into the Palette
– Select Tools > Component Library Manager
– Click Import…
– Click Browse…
– Select the ui.complib file and click Open
– Click OK to import both the BluePrints AJAX
Components and the BluePrints AJAX SupportBeans
1992-2007 Pearson Education, Inc. All rights reserved.
39
27.3.1 Java BluePrints Component
Library
To see the new components in the Palette, you
must add the BluePrints AJAX Components
– Make sure your application’s node is expanded in the
Projects tab
– Right click the Component Libraries node and select
Add Component Library
– Select the BluePrints AJAX Components library and
click Add Component Library
1992-2007 Pearson Education, Inc. All rights reserved.
40
Component
Description
AutoComplete Text Field
Makes Ajax requests to display a list of suggestions as the user types in the
text field.
Buy Now Button
Initiates a transaction through the PayPal web site.
Map Viewer
Uses the Google Maps API to display a map that pans, zooms, and can
display markers for locations of interest.
Popup Calendar
Provides a calendar that enables a user to scroll between months and years.
Fills a Text Field with a formatted date when the user selects a day.
Progress Bar
Visually displays the progress of a long-running operation. Uses a
programmer-supplied calculation to determine the progress percentage.
Rating
Provides a customizable five-star rating bar that can display messages as the
user moves the mouse over the ratings.
Rich Textarea Editor
Provides an editable text area that allows the user to format text with fonts,
colors, hyperlinks and backgrounds.
Select Value Text Field
Displays a list of suggestions in a drop-down list as the user types, similar
to the AutoComplete Text Field.
Fig. 27.9 | Java BluePrints component library’s Ajax-enabled components.
2007 Pearson Education, Inc. All rights reserved.
41
27.4 AutoComplete Text Field and Virtual
Forms
AutoComplete Text Field
– Provides a list of suggestions from a data source as the user
types
1992-2007 Pearson Education, Inc. All rights reserved.
42
27.4.1 Configuring Virtual Forms
Virtual forms
– Used when you would like a button to submit a subset of
the page’s input fields to the server
– Can display multiple forms on the same page
– Can specify a submitter and one or more participants for
each form
– When the virtual form’s submitter component is clicked,
only the values of its participant components will be
submitted to the server
1992-2007 Pearson Education, Inc. All rights reserved.
43
27.4.1 Configuring Virtual Forms
To add virtual forms to a page
–
–
–
–
–
Right click the submitter component
Choose Configure Virtual Forms… from the pop-up menu
Click New to add a virtual form
Click in the Name column and specify the new form’s name
Double click the Submit column and change the option to Yes
- this button submits the virtual form
– Click OK to exit the dialog
– Select all the input components that will participate in the virtual form
– Right click one of the selected components and choose Configure
Virtual Forms…
– In the Participate column of the appropriate virtual form, change the
option to Yes
- Values in these components are submitted to the server when the form is
submitted
1992-2007 Pearson Education, Inc. All rights reserved.
44
27.4.1 Configuring Virtual Forms
To see the virtual forms in the Design mode
– Click the Show Virtual Forms button
– This displays a legend of the virtual forms on the page
1992-2007 Pearson Education, Inc. All rights reserved.
45
Fig. 27.10 | Configure Virtual Forms dialog.
2007 Pearson Education, Inc. All rights reserved.
46
Fig. 27.11 | Virtual forms legend.
2007 Pearson Education, Inc. All rights reserved.
47
27.4.2 JSP File with Virtual Forms and an
AutoComplete Text Field
AutoComplete Text Field
– completionMethod attribute is bound to a page bean’s
complete event handler
– To create this handler
- Right click the AutoComplete Text Field component in
Design view
- Select Edit Event Handler > complete
1992-2007 Pearson Education, Inc. All rights reserved.
1
<?xml version="1.0" encoding="UTF-8"?>
2
<!-- Fig. 27.12: AddressBook.jsp -->
3
<!-- AddressBook JSP with an add form and a Table JSF component. -->
4
<jsp:root version="1.2"
5
xmlns:bp="http://java.sun.com/blueprints/ui/14"
6
xmlns:f="http://java.sun.com/jsf/core"
7
xmlns:h="http://java.sun.com/jsf/html"
8
xmlns:jsp="http://java.sun.com/JSP/Page"
9
xmlns:webuijsf="http://www.sun.com/webui/webuijsf">
10
<jsp:directive.page contentType="text/html;charset=UTF-8"
11
<f:view>
13
<webuijsf:page binding="#{AddressBook.page1}" id="page1">
15
16
17
AddressBook.jsp
(1 of 7 )
<webuijsf:html binding="#{AddressBook.html1}" id="html1">
<webuijsf:head binding="#{AddressBook.head1}" id="head1">
<webuijsf:link binding="#{AddressBook.link1}" id="link1"
url="/resources/stylesheet.css"/>
18
</webuijsf:head>
19
<webuijsf:body binding="#{AddressBook.body1}" id="body1"
20
style="-rave-layout: grid">
21
<webuijsf:form binding="#{AddressBook.form1}" id="form1"
22
Outline
pageEncoding="UTF-8"/>
12
14
48
virtualFormsConfig="addForm | zipTextField lnameTextField
23
fnameTextField streetTextField cityTextField
24
stateTextField | submitButton , searchForm |
25
nameAutoComplete | lookUpButton">
26
<webuijsf:staticText binding="#{AddressBook.staticText1}"
27
id="staticText1" style="font-size: 18px; left: 24px;
28
top: 24px; position: absolute"
29
text="Add a contact to the address book:"/>
Configures the virtual
forms on this page
2007 Pearson Education,
Inc. All rights reserved.
30
<webuijsf:label binding="#{AddressBook.fnameLabel}"
31
for="fnameTextField" id="fnameLabel" style="position:
32
absolute; left: 24px; top: 72px" text="First name:"/>
33
<webuijsf:textField binding="#{AddressBook.fnameTextField}"
34
id="fnameTextField" maxLength="30" required="true"
35
style="left: 100px; top: 72px; position: absolute;
36
width: 192px"/>
37
<webuijsf:label binding="#{AddressBook.lnameLabel}"
38
for="lnameTextField" id="lnameLabel" style="left: 312px;
39
top: 72px; position: absolute" text="Last name:"/>
40
id="lnameTextField" maxLength="30" required="true"
42
style="left: 390px; top: 72px; position: absolute;
43
width: 214px"/>
for="streetTextField" id="streetLabel" style="position:
46
absolute; left: 24px; top: 96px" text="Street:"/>
"#{AddressBook.streetTextField}" id="streetTextField"
49
maxLength="150" required="true" style="left: 100px;
50
top: 96px; position: absolute; width: 504px"/>
<webuijsf:label binding="#{AddressBook.cityLabel}"
52
for="cityTextField" id="cityLabel" style="left: 24px;
53
top: 120px; position: absolute" text="City:"/>
54
<webuijsf:textField binding="#{AddressBook.cityTextField}"
55
id="cityTextField" maxLength="30" required="true"
56
style="left: 100px; top: 120px; position: absolute;
57
width: 240px"/>
58
(2 of 7 )
<webuijsf:textField binding=
48
51
AddressBook.jsp
<webuijsf:label binding="#{AddressBook.streetLabel}"
45
47
Outline
<webuijsf:textField binding="#{AddressBook.lnameTextField}"
41
44
49
<webuijsf:label binding="#{AddressBook.stateLabel}"
59
for="stateTextField" id="stateLabel" style="left: 360px;
60
top: 120px; position: absolute" text="State:"/>
2007 Pearson Education,
Inc. All rights reserved.
61
<webuijsf:textField binding="#{AddressBook.stateTextField}"
62
id="stateTextField" maxLength="2" required="true"
63
style="left: 412px; top: 120px; position: absolute;
64
width: 48px"/>
65
for="zipTextField" id="zipLabel" style="left: 490px;
67
top: 120px; position: absolute" text="Zip:"/>
<webuijsf:textField binding="#{AddressBook.zipTextField}"
69
id="zipTextField" maxLength="5" required="true"
70
style="left: 534px; top: 120px; position: absolute;
71
width: 70px"/>
72
"#{AddressBook.submitButton_action}" binding=
74
"#{AddressBook.submitButton}" id="submitButton" primary=
75
"true" style="left: 100px; top: 168px; position:
76
absolute; width: 100px" text="Submit"/>
id="clearButton" reset="true" style="left: 215px; top:
79
168px; position: absolute; width: 100px" text="Clear"/>
<webuijsf:messageGroup binding=
81
"#{AddressBook.messageGroup1}" id="messageGroup1"
82
showGlobalOnly="true" style="left: 624px; top: 72px;
83
position: absolute"/>
84
(3 of 7 )
<webuijsf:button binding="#{AddressBook.clearButton}"
78
80
AddressBook.jsp
<webuijsf:button actionExpression=
73
77
Outline
<webuijsf:label binding="#{AddressBook.zipLabel}"
66
68
50
<webuijsf:table augmentTitle="false" binding=
85
"#{AddressBook.addressesTable}" id="addressesTable"
86
paginateButton="true" paginationControls="true"
87
style="left: 24px; top: 216px; position: absolute"
88
title="Contacts" width="816">
2007 Pearson Education,
Inc. All rights reserved.
89
<webuijsf:tableRowGroup binding=
90
"#{AddressBook.tableRowGroup1}" id="tableRowGroup1"
91
rows="5" sourceData=
92
"#{AddressBook.addressesDataProvider}"
93
sourceVar="currentRow">
94
<webuijsf:tableColumn binding=
95
"#{AddressBook.fnameColumn}" headerText=
96
"First Name" id="fnameColumn"
97
sort="ADDRESSES.FIRSTNAME">
98
<webuijsf:staticText binding=
99
"#{AddressBook.staticText2}" id="staticText2"
100
text="#{currentRow.value[
101
'ADDRESSES.FIRSTNAME']}"/>
102
</webuijsf:tableColumn>
103
<webuijsf:tableColumn binding=
104
"#{AddressBook.lnameColumn}"
105
headerText="Last Name" id="lnameColumn"
106
sort="ADDRESSES.LASTNAME">
107
<webuijsf:staticText binding=
108
"#{AddressBook.staticText3}" id="staticText3"
109
text="#{currentRow.value[
110
'ADDRESSES.LASTNAME']}"/>
111
112
Outline
AddressBook.jsp
(4 of 7 )
</webuijsf:tableColumn>
<webuijsf:tableColumn binding=
113
"#{AddressBook.streetColumn}" headerText="Street"
114
id="streetColumn" sort="ADDRESSES.STREET">
115
<webuijsf:staticText binding=
116
"#{AddressBook.staticText4}" id="staticText4"
117
text="#{currentRow.value[
118
'ADDRESSES.STREET']}"/>
119
51
</webuijsf:tableColumn>
2007 Pearson Education,
Inc. All rights reserved.
120
<webuijsf:tableColumn binding=
121
"#{AddressBook.cityColumn}" headerText="City"
122
id="cityColumn" sort="ADDRESSES.CITY">
123
<webuijsf:staticText binding=
124
"#{AddressBook.staticText5}" id="staticText5"
125
text="#{currentRow.value['ADDRESSES.CITY']}"/>
126
</webuijsf:tableColumn>
127
<webuijsf:tableColumn binding=
128
"#{AddressBook.stateColumn}" headerText="State"
129
id="stateColumn" sort="ADDRESSES.STATE">
130
<webuijsf:staticText binding=
131
"#{AddressBook.staticText6}" id="staticText6"
132
text="#{currentRow.value['ADDRESSES.STATE']}"/>
133
</webuijsf:tableColumn>
134
<webuijsf:tableColumn binding=
135
"#{AddressBook.zipColumn}" headerText="Zip"
136
id="zipColumn" sort="ADDRESSES.ZIP" width="106">
137
<webuijsf:staticText binding=
138
"#{AddressBook.staticText7}" id="staticText7"
139
text="#{currentRow.value['ADDRESSES.ZIP']}"/>
140
141
Outline
AddressBook.jsp
(5 of 7 )
</webuijsf:tableColumn>
</webuijsf:tableRowGroup>
142
</webuijsf:table>
143
<webuijsf:staticText binding="#{AddressBook.searchHeader}"
144
id="searchHeader" style="font-size: 18px; left: 24px;
145
top: 420px; position: absolute"
146
text="Search the address book by last name:"/>
147
52
<bp:autoComplete binding="#{AddressBook.nameAutoComplete}"
148
completionMethod=
149
"#{AddressBook.nameAutoComplete_complete}"
150
id="nameAutoComplete"
151
style="left: 96px; top: 444px; position: absolute"/>
Configures the
AutoComplete Text
Field 2007 Pearson Education,
Inc. All rights reserved.
<webuijsf:label binding="#{AddressBook.label1}"
152
153
for="nameAutoComplete" id="label1" style="left: 24px;
154
top: 447px; position: absolute" text="Last name:"/>
155
<webuijsf:button binding="#{AddressBook.lookUpButton}"
156
id="lookUpButton" style="left: 288px; top: 446px;
157
position: absolute; width: 100px" text="Look Up"/>
160
Outline
AddressBook.jsp
</webuijsf:form>
158
159
53
</webuijsf:body>
(6 of 7 )
</webuijsf:html>
161
</webuijsf:page>
162
</f:view>
163 </jsp:root>
2007 Pearson Education,
Inc. All rights reserved.
54
Outline
AddressBook.jsp
(7 of 7 )
2007 Pearson Education,
Inc. All rights reserved.
55
27.4.3 Providing Suggestions for an
AutoComplete Text Field
complete event handler is invoked after every
keystroke in an AutoComplete Text Field
– Updates the list of suggestions based on the text the user
has typed so far
– Receives a string containing the text the user has entered
and a CompletionResult object that is used to display
suggestions to the user
1992-2007 Pearson Education, Inc. All rights reserved.
1
// Fig. 27.13: AddressBook.java
2
// Page bean for AddressBook.jsp.
3
package addressbook;
56
Outline
4
5
import com.sun.data.provider.RowKey;
6
import com.sun.data.provider.impl.CachedRowSetDataProvider;
7
import com.sun.j2ee.blueprints.ui.autocomplete.AutoCompleteComponent;
8
import com.sun.j2ee.blueprints.ui.autocomplete.CompletionResult;
9
import com.sun.rave.web.ui.appbase.AbstractPageBean;
AddressBook.java
(1 of 3 )
10 import com.sun.webui.jsf.component.Body;
11 import com.sun.webui.jsf.component.Button;
12 import com.sun.webui.jsf.component.Form;
13 import com.sun.webui.jsf.component.Head;
14 import com.sun.webui.jsf.component.Html;
15 import com.sun.webui.jsf.component.Label;
16 import com.sun.webui.jsf.component.Link;
17 import com.sun.webui.jsf.component.MessageGroup;
18 import com.sun.webui.jsf.component.Page;
19 import com.sun.webui.jsf.component.StaticText;
20 import com.sun.webui.jsf.component.Table;
21 import com.sun.webui.jsf.component.TableColumn;
22 import com.sun.webui.jsf.component.TableRowGroup;
23 import com.sun.webui.jsf.component.TextField;
24 import com.sun.webui.jsf.model.DefaultTableDataProvider;
25 import javax.faces.FacesException;
26 import javax.faces.context.FacesContext;
27
2007 Pearson Education,
Inc. All rights reserved.
28 public class AddressBook extends AbstractPageBean
29 {
30
// To save space, we omitted the code in lines 30-625. The complete
31
// source code is provided with this chapter's examples.
57
Outline
32
626
// action handler for the autocomplete box that fetches names
627
// from the address book whose prefixes match the letters typed so far
628
// and displays them in a suggestion list.
629
public void nameAutoComplete_complete(
{
632
try
633
{
634
(2 of 3 )
FacesContext context, String prefix, CompletionResult result )
630
631
AddressBook.java
boolean hasNext = addressesDataProvider.cursorFirst();
635
636
while ( hasNext )
637
{
638
// get a name from the database
639
String name =
640
(String) addressesDataProvider.getValue(
641
"ADDRESSES.LASTNAME" ) + ", " +
642
(String) addressesDataProvider.getValue(
643
"ADDRESSES.FIRSTNAME" ) ;
644
645
// if the name in the database starts with the prefix,
646
// add it to the list of suggestions
647
if ( name.toLowerCase().startsWith( prefix.toLowerCase() ) )
648
{
result.addItem( name );
649
650
} // end if
651
else
652
{
2007 Pearson Education,
Inc. All rights reserved.
653
// terminate the loop if the rest of the names are
654
// alphabetically less than the prefix
655
if ( prefix.compareTo( name ) < 0 )
656
{
657
break;
658
} // end if
} // end else
659
660
661
// move cursor to next row of database
662
hasNext = addressesDataProvider.cursorNext();
664
} // end try
665
catch ( Exception ex )
666
{
668
669
Outline
AddressBook.java
(3 of 3 )
} // end while
663
667
58
result.addItem( "Exception getting matching names." );
} // end catch
} // end method nameAutoComplete_complete
670 } // end class AddressBook
2007 Pearson Education,
Inc. All rights reserved.
59
Performance Tip 27.1
When using database columns to provide
suggestions in an AutoComplete Text Field,
sorting the columns eliminates the need to
check every row in the database for potential
matches. This significantly improves
performance when dealing with a large
database.
2007 Pearson Education, Inc. All rights reserved.
60
27.5 Google Maps Map Viewer
Component
Map Viewer Ajax-enabled JSF component
– Uses the Google Maps API web service to find and display
maps
Map Marker points to a location on a map
1992-2007 Pearson Education, Inc. All rights reserved.
61
27.5.1 Obtaining a Google Maps API Key
To use the Map Viewer component
– Must have an account with Google
– Register for a free account at
https://www.google.com/accounts/ManageAccount
– Must obtain a key to use the Google Maps API from
www.google.com/apis/maps
– Key is specific to your web application; limits the number
of maps the application can display per day
– Must provide a URL for the application
- If you are deploying the application only on Java Studio
Creator 2’s built-in test server, use http://localhost:8080/
1992-2007 Pearson Education, Inc. All rights reserved.
62
27.5.2 Adding a Map Viewer Component
to a Page
To use the Map Viewer componen
– Set its key property to the your Google Maps API key
Map Marker
– From the AJAX Support Beans section of the Palette
– Marks a location on a map
– Must bind the marker to the map so that the marker will display
on the map
- Right click the Map Viewer in Design mode
- Choose Property Bindings…
- Select info from the Select bindable property column, then select
the Map Marker from the Select binding target column.
- Click Apply, then Close
1992-2007 Pearson Education, Inc. All rights reserved.
63
27.5.2 Adding a Map Viewer Component
to a Page
Geocoding Service Object
– From the AJAX Support Beans section of the Palette
– Converts street addresses into latitudes and longitudes
– These are used to display appropriate map
1992-2007 Pearson Education, Inc. All rights reserved.
64
27.5.3 JSP File with a Map Viewer
Component
Map Viewer center attribute
– Bound to the page bean property mapViewer_center
– Manipulated in the page bean file to center the map on the
desired address
1992-2007 Pearson Education, Inc. All rights reserved.
1
<?xml version="1.0" encoding="UTF-8"?>
2
<!-- Fig. 27.14: AddressBook.jsp -->
3
<!-- AddressBook JSP with an add form and a Table JSF component. -->
65
Outline
4
5
<jsp:root version="1.2"
6
xmlns:bp="http://java.sun.com/blueprints/ui/14"
7
xmlns:f="http://java.sun.com/jsf/core"
8
xmlns:h="http://java.sun.com/jsf/html"
9
xmlns:jsp="http://java.sun.com/JSP/Page"
10
xmlns:webuijsf="http://www.sun.com/webui/webuijsf">
11
<jsp:directive.page contentType="text/html;charset=UTF-8"
12
<f:view>
14
<webuijsf:page binding="#{AddressBook.page1}" id="page1">
16
17
18
(1 of 7 )
pageEncoding="UTF-8"/>
13
15
AddressBook.jsp
<webuijsf:html binding="#{AddressBook.html1}" id="html1">
<webuijsf:head binding="#{AddressBook.head1}" id="head1">
<webuijsf:link binding="#{AddressBook.link1}" id="link1"
url="/resources/stylesheet.css"/>
19
</webuijsf:head>
20
<webuijsf:body binding="#{AddressBook.body1}" id="body1"
21
style="-rave-layout: grid">
22
<webuijsf:form binding="#{AddressBook.form1}" id="form1"
23
virtualFormsConfig="addForm | zipTextField lnameTextField
24
fnameTextField streetTextField cityTextField stateTextField
25
| submitButton , searchForm | nameAutoComplete |
26
lookUpButton">
27
<webuijsf:staticText binding=
28
"#{AddressBook.staticText1}" id="staticText1" style=
29
"font-size: 18px; left: 24px; top: 24px; position:
2007 Pearson Education,
Inc. All rights reserved.
30
31
absolute" text="Add a contact to the address book:"/>
<webuijsf:label binding="#{AddressBook.fnameLabel}"
32
for="fnameTextField" id="fnameLabel" style="position:
33
absolute; left: 24px; top: 72px" text="First name:"/>
34
<webuijsf:textField binding="#{AddressBook.fnameTextField}"
35
id="fnameTextField" maxLength="30" required="true"
36
style="left: 100px; top: 72px; position: absolute;
37
width: 192px"/>
38
for="lnameTextField" id="lnameLabel" style="left: 312px;
40
top: 72px; position: absolute" text="Last name:"/>
id="lnameTextField" maxLength="30" required="true"
43
style="left: 390px; top: 72px; position: absolute;
44
width: 214px"/>
for="streetTextField" id="streetLabel" style="position:
47
absolute; left: 24px; top: 96px" text="Street:"/>
<webuijsf:textField binding=
49
"#{AddressBook.streetTextField}" id="streetTextField"
50
maxLength="150" required="true" style="left: 100px;
51
top: 96px; position: absolute; width: 504px"/>
52
<webuijsf:label binding="#{AddressBook.cityLabel}"
53
for="cityTextField" id="cityLabel" style="left: 24px;
54
top: 120px; position: absolute" text="City:"/>
55
(2 of 7 )
<webuijsf:label binding="#{AddressBook.streetLabel}"
46
48
AddressBook.jsp
<webuijsf:textField binding="#{AddressBook.lnameTextField}"
42
45
Outline
<webuijsf:label binding="#{AddressBook.lnameLabel}"
39
41
66
<webuijsf:textField binding="#{AddressBook.cityTextField}"
56
id="cityTextField" maxLength="30" required="true"
57
style="left: 100px; top: 120px; position: absolute;
58
width: 240px"/>
2007 Pearson Education,
Inc. All rights reserved.
59
<webuijsf:label binding="#{AddressBook.stateLabel}"
60
for="stateTextField" id="stateLabel"
61
style="left: 360px; top: 120px; position: absolute"
62
text="State:"/>
63
id="stateTextField" maxLength="2" required="true"
65
style="left: 412px; top: 120px; position: absolute;
66
width: 48px"/>
<webuijsf:label binding="#{AddressBook.zipLabel}"
68
for="zipTextField" id="zipLabel" style="left: 490px;
69
top: 120px; position: absolute" text="Zip:"/>
70
id="zipTextField" maxLength="5" required="true"
72
style="left: 534px; top: 120px; position: absolute;
73
width: 70px"/>
"#{AddressBook.submitButton_action}" binding=
76
"#{AddressBook.submitButton}" id="submitButton"
77
primary="true" style="left: 100px; top: 168px; position:
78
absolute; width: 100px" text="Submit"/>
<webuijsf:button binding="#{AddressBook.clearButton}"
80
id="clearButton" reset="true" style="left: 215px; top:
81
168px; position: absolute; width: 100px" text="Clear"/>
82
<webuijsf:messageGroup binding=
83
"#{AddressBook.messageGroup1}" id="messageGroup1"
84
showGlobalOnly="true" style="left: 624px; top: 72px;
85
position: absolute"/>
86
(3 of 7 )
<webuijsf:button actionExpression=
75
79
AddressBook.jsp
<webuijsf:textField binding="#{AddressBook.zipTextField}"
71
74
Outline
<webuijsf:textField binding="#{AddressBook.stateTextField}"
64
67
67
<webuijsf:table augmentTitle="false" binding=
87
"#{AddressBook.addressesTable}" id="addressesTable"
88
paginateButton="true" paginationControls="true"
89
style="left: 24px; top: 216px; position: absolute"
90
title="Contacts" width="816">
2007 Pearson Education,
Inc. All rights reserved.
91
<webuijsf:tableRowGroup binding=
92
"#{AddressBook.tableRowGroup1}" id="tableRowGroup1"
93
rows="5" sourceData=
94
"#{AddressBook.addressesDataProvider}"
95
sourceVar="currentRow">
96
<webuijsf:tableColumn binding=
97
"#{AddressBook.fnameColumn}"
98
headerText="First Name" id="fnameColumn"
99
sort="ADDRESSES.FIRSTNAME">
100
<webuijsf:staticText binding=
101
"#{AddressBook.staticText2}" id="staticText2"
102
text="#{currentRow.value[
103
'ADDRESSES.FIRSTNAME']}"/>
104
</webuijsf:tableColumn>
105
<webuijsf:tableColumn binding=
106
"#{AddressBook.lnameColumn}"
107
headerText="Last Name" id="lnameColumn"
108
sort="ADDRESSES.LASTNAME">
109
<webuijsf:staticText binding=
110
"#{AddressBook.staticText3}" id="staticText3"
111
text="#{currentRow.value[
112
'ADDRESSES.LASTNAME']}"/>
113
</webuijsf:tableColumn>
114
<webuijsf:tableColumn binding=
115
"#{AddressBook.streetColumn}" headerText="Street"
116
id="streetColumn" sort="ADDRESSES.STREET">
117
<webuijsf:staticText binding=
118
"#{AddressBook.staticText4}" id="staticText4"
119
text="#{currentRow.value[
120
'ADDRESSES.STREET']}"/>
121
</webuijsf:tableColumn>
68
Outline
AddressBook.jsp
(4 of 7 )
2007 Pearson Education,
Inc. All rights reserved.
122
<webuijsf:tableColumn binding=
123
"#{AddressBook.cityColumn}" headerText="City"
124
id="cityColumn" sort="ADDRESSES.CITY">
125
<webuijsf:staticText binding=
126
"#{AddressBook.staticText5}" id="staticText5"
127
text="#{currentRow.value['ADDRESSES.CITY']}"/>
128
</webuijsf:tableColumn>
129
<webuijsf:tableColumn binding=
130
"#{AddressBook.stateColumn}" headerText="State"
131
id="stateColumn" sort="ADDRESSES.STATE">
132
<webuijsf:staticText binding=
133
"#{AddressBook.staticText6}" id="staticText6"
134
text="#{currentRow.value['ADDRESSES.STATE']}"/>
135
</webuijsf:tableColumn>
136
<webuijsf:tableColumn binding=
137
"#{AddressBook.zipColumn}" headerText="Zip"
138
id="zipColumn" sort="ADDRESSES.ZIP" width="106">
139
<webuijsf:staticText binding=
140
"#{AddressBook.staticText7}" id="staticText7"
141
text="#{currentRow.value['ADDRESSES.ZIP']}"/>
142
143
Outline
AddressBook.jsp
(5 of 7 )
</webuijsf:tableColumn>
</webuijsf:tableRowGroup>
144
</webuijsf:table>
145
<webuijsf:staticText binding="#{AddressBook.searchHeader}"
146
id="searchHeader" style="font-size: 18px; left: 24px;
147
top: 420px; position: absolute"
148
text="Search the address book by last name:"/>
149
69
<bp:autoComplete binding=
150
"#{AddressBook.nameAutoComplete}" completionMethod=
151
"#{AddressBook.nameAutoComplete_complete}"
152
id="nameAutoComplete"
153
style="left: 96px; top: 444px; position: absolute"/>
2007 Pearson Education,
Inc. All rights reserved.
<webuijsf:label binding="#{AddressBook.label1}"
154
155
for="nameAutoComplete" id="label1" style="left: 24px;
156
top: 447px; position: absolute" text="Last name:"/>
158
"#{AddressBook.lookUpButton_action}"
159
binding="#{AddressBook.lookUpButton}" id="lookUpButton"
160
style="left: 288px; top: 446px; position: absolute;
161
width: 100px" text="Look Up"/>
<bp:mapViewer binding="#{AddressBook.mapViewer}"
162
163
center="#{AddressBook.mapViewer_center}"
164
id="mapViewer" info="#{AddressBook.mapMarker}"
165
key="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
166
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
167
style="height: 550px; left: 24px; top: 480px;
168
position: absolute; width: 814px" zoomLevel="4"/>
AddressBook.jsp
(6 of 7 )
Configures the Map
Viewer component
</webuijsf:form>
169
171
Outline
<webuijsf:button actionExpression=
157
170
70
</webuijsf:body>
</webuijsf:html>
172
</webuijsf:page>
173
</f:view>
174 </jsp:root>
2007 Pearson Education,
Inc. All rights reserved.
71
Outline
AddressBook.jsp
(7 of 7 )
2007 Pearson Education,
Inc. All rights reserved.
72
27.5.4 Page Bean that Displays a Map in
the Map Viewer Component
Geocoding Service Object
– geoCode method receives an address as an argument
– Returns an array of GeoPoint objects representing
locations that match the address parameter
– GeoPoints provide a location’s latitude and longitude
1992-2007 Pearson Education, Inc. All rights reserved.
1
// Fig. 27.15: AddressBook.java
2
// Page bean for AddressBook.jsp.
3
package addressbook;
73
Outline
4
5
import com.sun.data.provider.RowKey;
6
import com.sun.data.provider.impl.CachedRowSetDataProvider;
7
import com.sun.j2ee.blueprints.ui.autocomplete.AutoCompleteComponent;
8
import com.sun.j2ee.blueprints.ui.autocomplete.CompletionResult;
9
import com.sun.j2ee.blueprints.ui.geocoder.GeoCoder;
AddressBook.java
(1 of 4 )
10 import com.sun.j2ee.blueprints.ui.geocoder.GeoPoint;
11 import com.sun.j2ee.blueprints.ui.mapviewer.MapComponent;
12 import com.sun.j2ee.blueprints.ui.mapviewer.MapMarker;
13 import com.sun.j2ee.blueprints.ui.mapviewer.MapPoint;
14 import com.sun.rave.web.ui.appbase.AbstractPageBean;
15 import com.sun.webui.jsf.component.Body;
16 import com.sun.webui.jsf.component.Button;
17 import com.sun.webui.jsf.component.Form;
18 import com.sun.webui.jsf.component.Head;
19 import com.sun.webui.jsf.component.Html;
20 import com.sun.webui.jsf.component.Label;
21 import com.sun.webui.jsf.component.Link;
22 import com.sun.webui.jsf.component.MessageGroup;
23 import com.sun.webui.jsf.component.Page;
24 import com.sun.webui.jsf.component.StaticText;
25 import com.sun.webui.jsf.component.Table;
26 import com.sun.webui.jsf.component.TableColumn;
27 import com.sun.webui.jsf.component.TableRowGroup;
28 import com.sun.webui.jsf.component.TextField;
29 import javax.faces.FacesException;
30 import javax.faces.context.FacesContext;
2007 Pearson Education,
Inc. All rights reserved.
31
74
32 public class AddressBook extends AbstractPageBean
33 {
34
Outline
private int __placeholder;
35
36
private void _init() throws Exception
37
{
addressesDataProvider.setCachedRowSet(
38
39
( javax.sql.rowset.CachedRowSet ) getValue(
40
"#{SessionBean1.addressesRowSet}" ) );
41
addressesTable.setInternalVirtualForm( true );
42
mapViewer.setRendered( false );
43
addressesSearchDataProvider.setCachedRowSet(
44
( javax.sql.rowset.CachedRowSet ) getValue(
45
"#{SessionBean1.addressesSearchRowSet}" ) );
46
AddressBook.java
(2 of 4 )
} // end method _init
47
48
// To save space, we omitted the code in lines 48-741. The complete
49
// source code is provided with this chapter's examples.
50
742
// action handler for the lookUpButton that searches the address book
743
// database and displays the requested address on a corresponding map.
744
public String lookUpButton_action()
745
{
746
// split text in autocomplete field into first and last name
747
String name = String.valueOf( nameAutoComplete.getValue() );
748
int splitIndex = name.indexOf( "," );
749
String lname = name.substring( 0, splitIndex );
750
String fname = name.substring( splitIndex + 2 );
751
2007 Pearson Education,
Inc. All rights reserved.
752
try
753
{
75
754
// set the parameters for the addressesSearchDataProvider
755
addressesSearchDataProvider.getCachedRowSet().setObject(
1, fname );
756
757
addressesSearchDataProvider.getCachedRowSet().setObject(
2, lname );
758
759
addressesSearchDataProvider.refresh();
760
String street = (String) addressesSearchDataProvider.getValue(
String city = (String) addressesSearchDataProvider.getValue(
"ADDRESSES.CITY" );
763
764
String state = (String) addressesSearchDataProvider.getValue(
"ADDRESSES.STATE" );
765
766
Set the query
parameters
to the
AddressBook.java
specified first and
(3 of 4 )
last name
"ADDRESSES.STREET" );
761
762
Outline
String zip =
(String) addressesSearchDataProvider.getValue(
"ADDRESSES.ZIP" );
767
768
769
// format the address for Google Maps
770
String googleAddress = street + ", " + city + ", " + state +
" " + zip;
771
772
773
// get the geopoints for the address
774
GeoPoint points[] = geoCoder.geoCode( googleAddress );
775
776
// if Google Maps cannot find the address
777
if ( points == null )
778
{
779
error( "Map for " + googleAddress + " could not be found" );
780
mapViewer.setRendered( false ); // hide map
781
return null;
782
} // end if
Get the GeoPoints
that match the
address
2007 Pearson Education,
Inc. All rights reserved.
783
76
784
// center the map for the given address
785
mapViewer_center.setLatitude( points[0].getLatitude() );
786
mapViewer_center.setLongitude( points[0].getLongitude() );
787
788
// create a marker for the address and set its display text
789
mapMarker.setLatitude( points[0].getLatitude() );
790
mapMarker.setLongitude( points[0].getLongitude() );
791
mapMarker.setMarkup(
fname + " " + lname + "<br/>" + street +
"<br/>" + city + ", " + state + " " + zip );
792
793
mapViewer.setRendered( true ); // show map
794
795
} // end try
796
catch ( Exception e )
797
{
798
799
Outline
Specify the map’s
center location
AddressBook.java
Place (4
a marker
of 4 ) on
the map to indicate
the location with the
person’s name and
address displayed on
the marker
error( "Error processing search. " + e.getMessage() );
} // end catch
800
801
802
return null;
} // end method lookUpButton_action
803 } // end class AddressBook
2007 Pearson Education,
Inc. All rights reserved.
Related documents