Ajax-Enabled JavaServer™ Faces Web Applications

2007 Pearson Education, Inc. All rights reserved.

1

27

Ajax-Enabled JavaServer™

Faces Web Applications


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


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


4

OBJECTIVESIn 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.


5

27.1 Introduction27.2 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

27.3 Ajax-Enabled JSF Components27.4 AutoComplete Text Field and Virtual Forms

27.4.1 Configuring Virtual Forms27.4.2 JSP File with Virtual Forms and a

AutoComplete Text Field 27.4.3 Providing Suggestions for a AutoComplete

Text Field


6

27.5 Google Maps Map Viewer Component27.5.1 Obtaining a Google Maps API Key27.5.2 Adding Map Viewer Component to a Page27.5.3 JSP File with Map Viewer Component27.5.3 JSP File with Map Viewer Component27.5.4 Page Bean that Displays a Map in the Map

Viewer Component27.6 Wrap-Up27.7 Web Resources

1992-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


8

27.2 Accessing Databases in Web Applications Many web applications access databases to store

and retrieve persistent data


9


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


10


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.


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


12


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 <


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


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


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


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


17

Fig. 27.1 | AddressBook application form for adding a contact.


18

Fig. 27.2 | Addresses table data.

FirstName LastName Street City State Zip

Bob Green 5 Bay St. San Francisco CA 94133

Liz White 100 5th Ave. New York NY 10011

Mike Brown 3600 Delmar Blvd.

St. Louis MO 63108

Mary Green 300 Massachusetts Ave.

Boston MA 02115

John Gray 500 South St.

Philadelphia PA 19147

Meg Gold 1200 Stout St. Denver CO 80204

James Blue 1000 Harbor Ave.

Seattle WA 98116

Sue Black 1000 Michigan Ave.

Chicago IL 60605


19

Fig. 27.3 | Dialog for binding to the Addresses table.


20

Fig. 27.4 | Table component after binding it to a database table andediting its column names for display purposes.


21

Fig. 27.5 | Editing addressesRowSet’s SQL statement.


22 1 <?xml version="1.0" encoding="UTF-8"?> 2  3  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 pageEncoding="UTF-8"/> 11 <f:view> 12 <webuijsf:page binding="#{AddressBook.page1}" id="page1"> 13 <webuijsf:html binding="#{AddressBook.html1}" id="html1"> 14 <webuijsf:head binding="#{AddressBook.head1}" id="head1"> 15 <webuijsf:link binding="#{AddressBook.link1}" id="link1" 16 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 <webuijsf:label binding="#{AddressBook.fnameLabel}" 26 for="fnameTextField" id="fnameLabel" style= 27 "position: absolute; left: 24px; top: 72px" 28 text="First name:"/>

Outline

AddressBook.jsp

(1 of 7 )


2329 <webuijsf:textField binding="#{AddressBook.fnameTextField}" 30 id="fnameTextField" maxLength="30" required="true" 31 style="left: 100px; top: 72px; position: absolute; 32 width: 192px"/> 33 <webuijsf:label binding="#{AddressBook.lnameLabel}" 34 for="lnameTextField" id="lnameLabel" style="left: 312px; 35 top: 72px; position: absolute" text="Last name:"/> 36 <webuijsf:textField binding="#{AddressBook.lnameTextField}" 37 id="lnameTextField" maxLength="30" required="true" 38 style="left: 390px; top: 72px; position: absolute; 39 width: 214px"/> 40 <webuijsf:label binding="#{AddressBook.streetLabel}" 41 for="streetTextField" id="streetLabel" style="position: 42 absolute; left: 24px; top: 96px" text="Street:"/> 43 <webuijsf:textField binding= 44 "#{AddressBook.streetTextField}" id="streetTextField" 45 maxLength="150" required="true" style="left: 100px; 46 top: 96px; position: absolute; width: 504px"/> 47 <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 <webuijsf:label binding="#{AddressBook.stateLabel}" 55 for="stateTextField" id="stateLabel" style="left: 360px; 56 top: 120px; position: absolute" text="State:"/>

Outline

AddressBook.jsp

(2 of 7 )


2457 <webuijsf:textField binding="#{AddressBook.stateTextField}" 58 id="stateTextField" maxLength="2" required="true" 59 style="left: 412px; top: 120px; position: absolute; 60 width: 48px"/> 61 <webuijsf:label binding="#{AddressBook.zipLabel}" 62 for="zipTextField" id="zipLabel" style="left: 490px; 63 top: 120px; position: absolute" text=" Zip:"/> 64 <webuijsf:textField binding="#{AddressBook.zipTextField}" 65 id="zipTextField" maxLength="5" required="true" 66 style="left: 534px; top: 120px; position: absolute; 67 width: 70px"/> 68 <webuijsf:button actionExpression= 69 "#{AddressBook.submitButton_action}" binding= 70 "#{AddressBook.submitButton}" id="submitButton" 71 primary="true" style="left: 100px; top: 168px; 72 position: absolute; width: 100px" text="Submit"/> 73 <webuijsf:button binding="#{AddressBook.clearButton}" 74 id="clearButton" reset="true" style="left: 215px; top: 75 168px; position: absolute; width: 100px" text="Clear"/> 76 <webuijsf:messageGroup binding= 77 "#{AddressBook.messageGroup1}" id="messageGroup1" 78 showGlobalOnly="true" style="left: 624px; top: 72px; 79 position: absolute"/> 80 <webuijsf:table augmentTitle="false" binding= 81 "#{AddressBook.addressesTable}" id="addressesTable"

Outline

AddressBook.jsp

(3 of 7 )


2582 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"

Outline

AddressBook.jsp

(4 of 7 )


26113 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']}"/> 136 </webuijsf:tableColumn> 137 </webuijsf:tableRowGroup> 138 </webuijsf:table> 139 </webuijsf:form> 140 </webuijsf:body> 141 </webuijsf:html> 142 </webuijsf:page> 143 </f:view> 144 </jsp:root>

Outline

AddressBook.jsp

(5 of 7 )


27

OutlineAddressBook.jsp

(6 of 7 )


28

OutlineAddressBook.jsp

(7 of 7 )


29 1 // Fig. 27.7: SessionBean1.java 2 // Session bean that initializes the data source for the 3 // AddressBook database. 4 package addressbook; 5 6 import com.sun.rave.web.ui.appbase.AbstractSessionBean; 7 import com.sun.sql.rowset.CachedRowSetXImpl; 8 import javax.faces.FacesException; 9 10 public class SessionBean1 extends AbstractSessionBean 11 { 12 private int __placeholder; 13 14 private void _init() throws Exception 15 { 16 addressesRowSet.setDataSourceName( 17 "java:comp/env/jdbc/dataSource" ); 18 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 } // end method _init

Outline

SessionBean1 .java

(1 of 2 )

Specifies the database for the RowSetSpecifies the SQL used to obtain the data that will be displayed in the Table


3030 31 private CachedRowSetXImpl addressesRowSet = new CachedRowSetXImpl(); 32 33 public CachedRowSetXImpl getAddressesRowSet() 34 { 35 return addressesRowSet; 36 } 37 38 public void setAddressesRowSet( CachedRowSetXImpl crsxi ) 39 { 40 this.addressesRowSet = crsxi; 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

Outline

SessionBean1 .java

(2 of 2 )


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


32 1 // Fig. 27.8: AddressBook.java 2 // Page bean for AddressBook.jsp. 3 package addressbook; 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; 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

Outline

AddressBook.java

(1 of 4 )


3325 public class AddressBook extends AbstractPageBean 26 { 27 private int __placeholder; 28 29 private void _init() throws Exception 30 { 31 addressesDataProvider.setCachedRowSet( 32 ( javax.sql.rowset.CachedRowSet ) getValue( 33 "#{SessionBean1.addressesRowSet}" ) ); 34 addressesTable.setInternalVirtualForm( true ); 35 } // 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 { 508 addressesDataProvider.refresh(); 509 } // end method prerender 510 511 public void destroy() 512 { 513 addressesDataProvider.close(); 514 } // end method destroy 515

Outline

AddressBook.java

(2 of 4 )

Refreshes the addressesDataProvider so that records are sorted properly after new rows are added.Ensure that data provider

is closed when application terminates


34516 // To save space, we omitted the code in lines 516-530. The complete 517 // source code is provided with this chapter's examples. 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 { 539 RowKey rk = addressesDataProvider.appendRow(); 540 addressesDataProvider.setCursorRow( rk ); 541 542 addressesDataProvider.setValue( "ADDRESSES.FIRSTNAME", 543 fnameTextField.getValue() ); 544 addressesDataProvider.setValue( "ADDRESSES.LASTNAME", 545 lnameTextField.getValue() ); 546 addressesDataProvider.setValue( "ADDRESSES.STREET", 547 streetTextField.getValue() ); 548 addressesDataProvider.setValue( "ADDRESSES.CITY", 549 cityTextField.getValue() ); 550 addressesDataProvider.setValue( "ADDRESSES.STATE", 551 stateTextField.getValue() ); 552 addressesDataProvider.setValue( "ADDRESSES.ZIP", 553 zipTextField.getValue() ); 554 addressesDataProvider.commitChanges(); 555

Outline

AddressBook.java

(3 of 4 )

Adds new row and gets its keyUses key to specify the

row to which the cursor should point Sets the value of one

column (first name)

Commits the changes to the database


35556 // 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 error( "The address book was not updated. " + 567 ex.getMessage() ); 568 } // end catch 569 } // end if 570 571 return null; 572 } // end method submitButton_action 573 } // end class AddressBook

Outline

AddressBook.java

(4 of 4 )


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


37

27.3 Ajax-Enabled JSF Components Java BluePrints Ajax component library provides Ajax-

enabled 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.


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


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


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.


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


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


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


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


45

Fig. 27.10 | Configure Virtual Forms dialog.


46

Fig. 27.11 | Virtual forms legend.


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


48 1 <?xml version="1.0" encoding="UTF-8"?> 2  3  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 pageEncoding="UTF-8"/> 12 <f:view> 13 <webuijsf:page binding="#{AddressBook.page1}" id="page1"> 14 <webuijsf:html binding="#{AddressBook.html1}" id="html1"> 15 <webuijsf:head binding="#{AddressBook.head1}" id="head1"> 16 <webuijsf:link binding="#{AddressBook.link1}" id="link1" 17 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 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:"/>

Outline

AddressBook.jsp

(1 of 7 )

Configures the virtual forms on this page


4930 <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 <webuijsf:textField binding="#{AddressBook.lnameTextField}" 41 id="lnameTextField" maxLength="30" required="true" 42 style="left: 390px; top: 72px; position: absolute; 43 width: 214px"/> 44 <webuijsf:label binding="#{AddressBook.streetLabel}" 45 for="streetTextField" id="streetLabel" style="position: 46 absolute; left: 24px; top: 96px" text="Street:"/> 47 <webuijsf:textField binding= 48 "#{AddressBook.streetTextField}" id="streetTextField" 49 maxLength="150" required="true" style="left: 100px; 50 top: 96px; position: absolute; width: 504px"/> 51 <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 <webuijsf:label binding="#{AddressBook.stateLabel}" 59 for="stateTextField" id="stateLabel" style="left: 360px; 60 top: 120px; position: absolute" text="State:"/>

Outline

AddressBook.jsp

(2 of 7 )


5061 <webuijsf:textField binding="#{AddressBook.stateTextField}" 62 id="stateTextField" maxLength="2" required="true" 63 style="left: 412px; top: 120px; position: absolute; 64 width: 48px"/> 65 <webuijsf:label binding="#{AddressBook.zipLabel}" 66 for="zipTextField" id="zipLabel" style="left: 490px; 67 top: 120px; position: absolute" text="Zip:"/> 68 <webuijsf:textField binding="#{AddressBook.zipTextField}" 69 id="zipTextField" maxLength="5" required="true" 70 style="left: 534px; top: 120px; position: absolute; 71 width: 70px"/> 72 <webuijsf:button actionExpression= 73 "#{AddressBook.submitButton_action}" binding= 74 "#{AddressBook.submitButton}" id="submitButton" primary= 75 "true" style="left: 100px; top: 168px; position: 76 absolute; width: 100px" text="Submit"/> 77 <webuijsf:button binding="#{AddressBook.clearButton}" 78 id="clearButton" reset="true" style="left: 215px; top: 79 168px; position: absolute; width: 100px" text="Clear"/> 80 <webuijsf:messageGroup binding= 81 "#{AddressBook.messageGroup1}" id="messageGroup1" 82 showGlobalOnly="true" style="left: 624px; top: 72px; 83 position: absolute"/> 84 <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">

Outline

AddressBook.jsp

(3 of 7 )


5189 <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 </webuijsf:tableColumn> 112 <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 </webuijsf:tableColumn>

Outline

AddressBook.jsp

(4 of 7 )


52120 <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 </webuijsf:tableColumn> 141 </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 <bp:autoComplete binding="#{AddressBook.nameAutoComplete}" 148 completionMethod= 149 "#{AddressBook.nameAutoComplete_complete}" 150 id="nameAutoComplete" 151 style="left: 96px; top: 444px; position: absolute"/>

Outline

AddressBook.jsp

(5 of 7 )

Configures the AutoComplete Text Field


53152 <webuijsf:label binding="#{AddressBook.label1}" 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"/> 158 </webuijsf:form> 159 </webuijsf:body> 160 </webuijsf:html> 161 </webuijsf:page> 162 </f:view> 163 </jsp:root>

Outline

AddressBook.jsp

(6 of 7 )


54

Outline

AddressBook.jsp

(7 of 7 )


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


56 1 // Fig. 27.13: AddressBook.java 2 // Page bean for AddressBook.jsp. 3 package addressbook; 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; 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

Outline

AddressBook.java

(1 of 3 )


5728 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. 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( 630 FacesContext context, String prefix, CompletionResult result ) 631 { 632 try 633 { 634 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 { 649 result.addItem( name ); 650 } // end if 651 else 652 {

Outline

AddressBook.java

(2 of 3 )


58653 // 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 659 } // end else 660 661 // move cursor to next row of database 662 hasNext = addressesDataProvider.cursorNext(); 663 } // end while 664 } // end try 665 catch ( Exception ex ) 666 { 667 result.addItem( "Exception getting matching names." ); 668 } // end catch 669 } // end method nameAutoComplete_complete 670 } // end class AddressBook

Outline

AddressBook.java

(3 of 3 )


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.


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


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/


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


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


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


65 1 <?xml version="1.0" encoding="UTF-8"?> 2  3  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 pageEncoding="UTF-8"/> 13 <f:view> 14 <webuijsf:page binding="#{AddressBook.page1}" id="page1"> 15 <webuijsf:html binding="#{AddressBook.html1}" id="html1"> 16 <webuijsf:head binding="#{AddressBook.head1}" id="head1"> 17 <webuijsf:link binding="#{AddressBook.link1}" id="link1" 18 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:

Outline

AddressBook.jsp

(1 of 7 )


6630 absolute" text="Add a contact to the address book:"/> 31 <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 <webuijsf:label binding="#{AddressBook.lnameLabel}" 39 for="lnameTextField" id="lnameLabel" style="left: 312px; 40 top: 72px; position: absolute" text="Last name:"/> 41 <webuijsf:textField binding="#{AddressBook.lnameTextField}" 42 id="lnameTextField" maxLength="30" required="true" 43 style="left: 390px; top: 72px; position: absolute; 44 width: 214px"/> 45 <webuijsf:label binding="#{AddressBook.streetLabel}" 46 for="streetTextField" id="streetLabel" style="position: 47 absolute; left: 24px; top: 96px" text="Street:"/> 48 <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 <webuijsf:textField binding="#{AddressBook.cityTextField}" 56 id="cityTextField" maxLength="30" required="true" 57 style="left: 100px; top: 120px; position: absolute; 58 width: 240px"/>

Outline

AddressBook.jsp

(2 of 7 )


6759 <webuijsf:label binding="#{AddressBook.stateLabel}" 60 for="stateTextField" id="stateLabel" 61 style="left: 360px; top: 120px; position: absolute" 62 text="State:"/> 63 <webuijsf:textField binding="#{AddressBook.stateTextField}" 64 id="stateTextField" maxLength="2" required="true" 65 style="left: 412px; top: 120px; position: absolute; 66 width: 48px"/> 67 <webuijsf:label binding="#{AddressBook.zipLabel}" 68 for="zipTextField" id="zipLabel" style="left: 490px; 69 top: 120px; position: absolute" text="Zip:"/> 70 <webuijsf:textField binding="#{AddressBook.zipTextField}" 71 id="zipTextField" maxLength="5" required="true" 72 style="left: 534px; top: 120px; position: absolute; 73 width: 70px"/> 74 <webuijsf:button actionExpression= 75 "#{AddressBook.submitButton_action}" binding= 76 "#{AddressBook.submitButton}" id="submitButton" 77 primary="true" style="left: 100px; top: 168px; position: 78 absolute; width: 100px" text="Submit"/> 79 <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 <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">

Outline

AddressBook.jsp

(3 of 7 )


6891 <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>

Outline

AddressBook.jsp

(4 of 7 )


69122 <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 </webuijsf:tableColumn> 143 </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 <bp:autoComplete binding= 150 "#{AddressBook.nameAutoComplete}" completionMethod= 151 "#{AddressBook.nameAutoComplete_complete}" 152 id="nameAutoComplete" 153 style="left: 96px; top: 444px; position: absolute"/>

Outline

AddressBook.jsp

(5 of 7 )


70154 <webuijsf:label binding="#{AddressBook.label1}" 155 for="nameAutoComplete" id="label1" style="left: 24px; 156 top: 447px; position: absolute" text="Last name:"/> 157 <webuijsf:button actionExpression= 158 "#{AddressBook.lookUpButton_action}" 159 binding="#{AddressBook.lookUpButton}" id="lookUpButton" 160 style="left: 288px; top: 446px; position: absolute; 161 width: 100px" text="Look Up"/> 162 <bp:mapViewer binding="#{AddressBook.mapViewer}" 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"/> 169 </webuijsf:form> 170 </webuijsf:body> 171 </webuijsf:html> 172 </webuijsf:page> 173 </f:view> 174 </jsp:root>

Outline

AddressBook.jsp

(6 of 7 ) Configures the Map Viewer component


71

Outline

AddressBook.jsp

(7 of 7 )


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


73 1 // Fig. 27.15: AddressBook.java 2 // Page bean for AddressBook.jsp. 3 package addressbook; 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; 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;

Outline

AddressBook.java

(1 of 4 )


7431 32 public class AddressBook extends AbstractPageBean 33 { 34 private int __placeholder; 35 36 private void _init() throws Exception 37 { 38 addressesDataProvider.setCachedRowSet( 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 } // 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

Outline

AddressBook.java

(2 of 4 )


75752 try 753 { 754 // set the parameters for the addressesSearchDataProvider 755 addressesSearchDataProvider.getCachedRowSet().setObject( 756 1, fname ); 757 addressesSearchDataProvider.getCachedRowSet().setObject( 758 2, lname ); 759 addressesSearchDataProvider.refresh(); 760 String street = (String) addressesSearchDataProvider.getValue( 761 "ADDRESSES.STREET" ); 762 String city = (String) addressesSearchDataProvider.getValue( 763 "ADDRESSES.CITY" ); 764 String state = (String) addressesSearchDataProvider.getValue( 765 "ADDRESSES.STATE" ); 766 String zip = (String) addressesSearchDataProvider.getValue( 767 "ADDRESSES.ZIP" ); 768 769 // format the address for Google Maps 770 String googleAddress = street + ", " + city + ", " + state + 771 " " + zip; 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

Outline

AddressBook.java

(3 of 4 )

Set the query parameters to the specified first and last name

Get the GeoPoints that match the address


76783 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 + 792 "<br/>" + city + ", " + state + " " + zip ); 793 794 mapViewer.setRendered( true ); // show map 795 } // end try 796 catch ( Exception e ) 797 { 798 error( "Error processing search. " + e.getMessage() ); 799 } // end catch 800 801 return null; 802 } // end method lookUpButton_action 803 } // end class AddressBook

Outline

AddressBook.java

(4 of 4 )

Specify the map’s center location

Place a marker on the map to indicate the location with the person’s name and address displayed on the marker

Documents

Ajax-Enabled JavaServer™ Faces Web Applications