Web Applications: Part 2 Whatever is in any way beautiful ...

1

2007 Pearson Education, Inc. All rights reserved.

2727Web Applications:

Part 2

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


OBJECTIVES

In this chapter you will learn: To use data providers to access databases from

web applications built in Java Studio Creator 2. The basic principles and advantages of Ajax

technology. To include Ajax-enabled JSF components in a

Java Studio Creator 2 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 Introduction

27.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 Components

27.3.1 Java BluePrints Component Library

27.4 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

6


27.5 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

27.6 Wrap-Up

27.7 Web Resources

7

1992-2007 Pearson Education, Inc. All rights reserved.

27.1 Introduction

AddressBook Application– Three stages

Introduce Ajax-Enabled JSF components from the Java BluePrints library

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 To use a database in a Java Studio Creator 2 web

application– First start the IDE’s bundled database server

- Has drivers for many types of databases, including Java DB

– To start the server- Click the Servers tab below the File menu- Right click Bundled Database Server at the bottom of the

Servers window - Select Start Bundled Database Server

10



To add a Java DB database to a project– Right click the Data Sources node at the top of the Servers

window – Select Add Data Source…. – Enter the data source name and select Derby for the server type– Specify the user ID and password for the database– Database URL

- jdbc:derby://localhost:21527/YourDatabaseNameHere

– Click the Select button to choose a table that will be used to validate the database

– Click Select button – Click Add to add the database as a data source for the project

and close the dialog

11



To configure a Table component to display database data– Right click the Table – Select Bind to Data– Click Add Data Provider… – Expand the database’s node– Expand the Tables node– Select a table and click Add– The Table Layout dialog displays a list of the columns in the

database table- All of the items under the Selected heading will be displayed in the

Table- To remove a column from the Table, you can select it and click the <

button.

12



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, expand the table’s node in the Outline window (while in Design mode), then select the appropriate column object

13



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

14



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

15



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

16


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

17


Fig. 27.2 | Dialog to add a data source.

18


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

19


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

20


Fig. 27.5 | Editing addressesRowSet’s SQL statement.

21


1 <?xml version="1.0" encoding="UTF-8"?> 2

3  4  5

6 <jsp:root version="1.2" xmlns:f="http://java.sun.com/jsf/core" 7 xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp= 8 "http://java.sun.com/JSP/Page" xmlns:ui="http://www.sun.com/web/ui"> 9 <jsp:directive.page contentType="text/html;charset = UTF-8" 10 pageEncoding="UTF-8"/> 11 <f:view> 12 <ui:page binding="#{AddressBook.page1}" id="page1"> 13 <ui:html binding="#{AddressBook.html1}" id="html1"> 14 <ui:head binding="#{AddressBook.head1}" id="head1"> 15 <ui:link binding="#{AddressBook.link1}" id="link1" 16 url="/resources/stylesheet.css"/> 17 </ui:head> 18 <ui:body binding="#{AddressBook.body1}" id="body1" 19 style="-rave-layout: grid"> 20 <ui:form binding="#{AddressBook.form1}" id="form1"> 21 <ui:staticText binding="#{AddressBook.staticText1}" id= 22 "staticText1" style="font-size: 18px; left: 24px; 23 top: 24px; position: absolute" 24 text="Add a contact to the address book:"/> 25 <ui:textField binding="#{AddressBook.fnameTextField}" 26 id="fnameTextField" maxLength="20" required="true" 27 style="left: 120px; top: 72px; position: absolute; 28 width: 192px"/>

Outline

AddressBook.jsp

(1 of 7 )

22


29 <ui:textField binding="#{AddressBook.lnameTextField}"

30 id="lnameTextField" maxLength="30" required="true"

31 style="left: 432px; top: 72px; position: absolute;

32 width: 240px"/>

33 <ui:textField binding="#{AddressBook.streetTextField}"

34 id="streetTextField" maxLength="100" required="true"


36 width: 552px"/>

37 <ui:textField binding="#{AddressBook.cityTextField}"

38 id="cityTextField" maxLength="30" required="true"

39 style="left: 120px; top: 120px; position: absolute"/>

40 <ui:textField binding="#{AddressBook.stateTextField}"

41 id="stateTextField" maxLength="2" required="true"


43 width: 48px"/>

44 <ui:textField binding="#{AddressBook.zipTextField}"

45 id="zipTextField" maxLength="5" required="true"


47 width: 96px"/>

48 <ui:label binding="#{AddressBook.fnameLabel}" for=

49 "fnameTextField" id="fnameLabel" style="position:

50 absolute; left: 24px; top: 72px" text="First Name:"/>

51 <ui:label binding="#{AddressBook.lnameLabel}" for=

52 "lnameTextField" id="lnameLabel" style="left: 336px;

53 top: 72px; position: absolute" text="Last Name:"/>

54 <ui:label binding="#{AddressBook.streetLabel}" for=

55 "streetTextField" id="streetLabel" style="position:

56 absolute; left: 24px; top: 96px" text="Street:"/>

Outline

AddressBook.jsp

(2 of 7 )

23


57 <ui:label binding="#{AddressBook.cityLabel}" for= 58 "cityTextField" id="cityLabel" style="position: 59 absolute; left: 24px; top: 120px" text="City:"/> 60 <ui:label binding="#{AddressBook.stateLabel}" for= 61 "stateTextField" id="stateLabel" style="position: 62 absolute; left: 384px; top: 120px" text="State:"/> 63 <ui:label binding="#{AddressBook.zipLabel}" for= 64 "zipTextField" id="zipLabel" style="left: 528px; top: 65 120px; position: absolute" text="Zip:"/> 66 <ui:button action="#{AddressBook.submitButton_action}" 67 binding="#{AddressBook.submitButton}" id= 68 "submitButton" primary="true" style="position: 69 absolute; left: 120px; top: 168px" text="Submit"/> 70 <ui:button binding="#{AddressBook.clearButton}" id= 71 "clearButton" reset="true" style="left: 215px; top: 72 168px; position: absolute" text="Clear"/> 73 <ui:table augmentTitle="false" binding= 74 "#{AddressBook.addressesTable}" id="addressesTable" 75 paginationControls="true" style="left: 24px; top: 76 216px; position: absolute; width: 360px" 77 title="Contacts" width="720"> 78 <script><![CDATA[ 79  141 }]]></script>

Outline

AddressBook.jsp

(3 of 7 )

Autogenerated code that configures a Table element

24


142 <ui:tableRowGroup binding= 143 "#{AddressBook.tableRowGroup1}" id= 144 "tableRowGroup1" rows="5" sourceData= 145 "#{AddressBook.addressesDataProvider}" 146 sourceVar="currentRow"> 147 <ui:tableColumn binding= 148 "#{AddressBook.fnameColumn}" headerText= 149 "First Name" id="fnameColumn" sort= 150 "ADDRESSES.FIRSTNAME"> 151 <ui:staticText binding= 152 "#{AddressBook.fnameHeader}" id= 153 "fnameHeader" text="#{currentRow.value[ 154 'ADDRESSES.FIRSTNAME']}"/> 155 </ui:tableColumn> 156 <ui:tableColumn binding= 157 "#{AddressBook.lnameColumn}" headerText= 158 "Last Name" id="lnameColumn" 159 sort="ADDRESSES.LASTNAME"> 160 <ui:staticText binding= 161 "#{AddressBook.lnameHeader}" id= 162 "lnameHeader" text="#{currentRow.value[ 163 'ADDRESSES.LASTNAME']}"/> 164 </ui:tableColumn> 165 <ui:tableColumn binding= 166 "#{AddressBook.streetColumn}" headerText= 167 "Street" id="streetColumn" 168 sort="ADDRESSES.STREET">

Outline

AddressBook.jsp

(4 of 7 )

Autogenerated code that configures table rows

Autogenerated code that binds a database table’s column to a column in a Table element

25


169 <ui:staticText binding=

170 "#{AddressBook.streetHeader}" id=

171 "streetHeader" text="#{currentRow.value[

172 'ADDRESSES.STREET']}"/>

173 </ui:tableColumn>

174 <ui:tableColumn binding=

175 "#{AddressBook.cityColumn}" headerText="City"

176 id="cityColumn" sort="ADDRESSES.CITY">


178 "#{AddressBook.cityHeader}" id="cityHeader"

179 text="#{currentRow.value[

180 'ADDRESSES.CITY']}"/>



183 "#{AddressBook.stateColumn}" headerText="State"

184 id="stateColumn" sort="ADDRESSES.STATE">


186 "#{AddressBook.stateHeader}" id=

187 "stateHeader" text="#{currentRow.value[

188 'ADDRESSES.STATE']}"/>



191 "#{AddressBook.zipColumn}" headerText="Zip"

192 id="zipColumn" sort="ADDRESSES.ZIP">


194 "#{AddressBook.zipHeader}" id="zipHeader"


196 'ADDRESSES.ZIP']}"/>


198 </ui:tableRowGroup>

Outline

AddressBook.jsp

(5 of 7 )

26


199 </ui:table> 200 <ui:messageGroup binding="#{AddressBook.messageGroup1}" 201 id="messageGroup1" showGlobalOnly="true" style= 202 "position: absolute; left: 24px; top: 624px"/> 203 </ui:form> 204 </ui:body> 205 </ui:html> 206 </ui:page> 207 </f:view> 208 </jsp:root>

Outline

AddressBook.jsp

(6 of 7 )

27


Outline

AddressBook.jsp

(7 of 7 )

28


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 javax.faces.FacesException; 8 import com.sun.sql.rowset.CachedRowSetXImpl; 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/AddressBook" ); 18 addressesRowSet.setCommand( 19 "SELECT ALL JHTP7.ADDRESSES.FIRSTNAME," + 20 "\nJHTP7.ADDRESSES.LASTNAME," + 21 "\nJHTP7.ADDRESSES.STREET," + 22 "\nJHTP7.ADDRESSES.CITY," + 23 "\nJHTP7.ADDRESSES.STATE," + 24 "\nJHTP7.ADDRESSES.ZIP" + 25 "\nFROM JHTP7.ADDRESSES" + 26 "\nORDER BY JHTP7.ADDRESSES.LASTNAME ASC," + 27 "\nJHTP7.ADDRESSES.FIRSTNAME ASC " ); 28 addressesRowSet.setTableName( "ADDRESSES" ); 29 } // end method _init

Outline

SessionBean1 .java

(1 of 2 )

Specifies the database for the RowSet

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

29


30

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 // Lines 43-76 of the autogenerated code were removed to save space. 44 // The complete source code is provided in this example's folder. 45 } // end class SessionBean1

Outline

SessionBean1 .java

(2 of 2 )

30


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

31


1 // Fig. 27.8: AddressBook.java 2 // Page bean for adding a contact to the address book. 3 package addressbook; 4

5 import com.sun.data.provider.RowKey; 6 import com.sun.rave.web.ui.appbase.AbstractPageBean; 7 import com.sun.rave.web.ui.component.Body; 8 import com.sun.rave.web.ui.component.Form; 9 import com.sun.rave.web.ui.component.Head; 10 import com.sun.rave.web.ui.component.Html; 11 import com.sun.rave.web.ui.component.Link; 12 import com.sun.rave.web.ui.component.Page; 13 import javax.faces.FacesException; 14 import com.sun.rave.web.ui.component.StaticText; 15 import com.sun.rave.web.ui.component.TextField; 16 import com.sun.rave.web.ui.component.Label; 17 import com.sun.rave.web.ui.component.Button; 18 import com.sun.rave.web.ui.component.Table; 19 import com.sun.rave.web.ui.component.TableRowGroup; 20 import com.sun.rave.web.ui.component.TableColumn; 21 import com.sun.data.provider.impl.CachedRowSetDataProvider; 22 import com.sun.rave.web.ui.component.MessageGroup; 23

Outline

AddressBook.java

(1 of 4 )

32


24 public class AddressBook extends AbstractPageBean 25 { 26 private int __placeholder; 27

28 private void _init() throws Exception 29 { 30 addressesDataProvider.setCachedRowSet( 31 (javax.sql.rowset.CachedRowSet) 32 getValue( "#{SessionBean1.addressesRowSet}" ) ); 33 addressesTable.setInternalVirtualForm( true ); 34 } 35

36 // Lines 36-521 of the autogenerated code were removed to save space. 37 // The complete source code is provided in this example's folder. 38

522 public void prerender() 523 { 524 addressesDataProvider.refresh(); 525 } // end method prerender 526

527 public void destroy() 528 { 529 addressesDataProvider.close(); 530 } // end method destroy 531

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

33


532 // action handler that adds a contact to the AddressBook database 533 // when the user clicks submit 534 public String submitButton_action() 535 { 536 if ( addressesDataProvider.canAppendRow() ) 537 { 538 try 539 { 540 RowKey rk = addressesDataProvider.appendRow(); 541 addressesDataProvider.setCursorRow( rk ); 542

543 addressesDataProvider.setValue( "ADDRESSES.FIRSTNAME", 544 fnameTextField.getValue() ); 545 addressesDataProvider.setValue( "ADDRESSES.LASTNAME", 546 lnameTextField.getValue() ); 547 addressesDataProvider.setValue( "ADDRESSES.STREET", 548 streetTextField.getValue() ); 549 addressesDataProvider.setValue( "ADDRESSES.CITY", 550 cityTextField.getValue() ); 551 addressesDataProvider.setValue( "ADDRESSES.STATE", 552 stateTextField.getValue() ); 553 addressesDataProvider.setValue( "ADDRESSES.ZIP", 554 zipTextField.getValue()); 555 addressesDataProvider.commitChanges(); 556

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

34


557 // reset text fields 558 lnameTextField.setValue( "" ); 559 fnameTextField.setValue( "" ); 560 streetTextField.setValue( "" ); 561 cityTextField.setValue( "" ); 562 stateTextField.setValue( "" ); 563 zipTextField.setValue( "" ); 564 } // end try 565 catch ( Exception ex ) 566 { 567 error( "The address book was not updated. " + 568 ex.getMessage() ); 569 } // end catch 570 } // end if 571

572 return null; 573 } // end method submitButton_action 574 } // end class AddressBook

Outline

AddressBook.java

(4 of 4 )

35



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

36



Ajax applications – Marked up in XHTML and CSS

– Make use of client-side scripting technologies such as JavaScript to interact with page elements

XMLHttpRequestObject enables the asynchronous exchanges with the web server

– Can be used by most scripting languages to pass XML data from the client to the server and to process XML data sent from the server to the client

Ajax libraries – Reap Ajax’s benefits in web applications without the labor of

writing “raw” Ajax

37



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



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


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 | Ajax-enabled components provided by the JavaBluePrints Ajax component library.

40


27.4 AutoComplete Text Field and Virtual Forms

AutoComplete Text Field – Provides a list of suggestions from a data source as the user

types

41



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

42



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

43



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

44


Fig. 27.10 | Configure Virtual Forms dialog.

45


Fig. 27.11 | Virtual forms legend.

46


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

47


1 <?xml version="1.0" encoding="UTF-8"?> 2

3  4  5

6 <jsp:root version="1.2" xmlns:bp="http://java.sun.com/blueprints/ui/14" 7 xmlns:f="http://java.sun.com/jsf/core" xmlns:h= 8 "http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page" 9 xmlns:ui="http://www.sun.com/web/ui"> 10 <jsp:directive.page contentType="text/html;charset = UTF-8" 11 pageEncoding="UTF-8"/> 12 <f:view> 13 <ui:page binding="#{AddressBook.page1}" id="page1"> 14 <ui:html binding="#{AddressBook.html1}" id="html1"> 15 <ui:head binding="#{AddressBook.head1}" id="head1"> 16 <ui:link binding="#{AddressBook.link1}" id="link1" 17 url="/resources/stylesheet.css"/> 18 </ui:head> 19 <ui:body binding="#{AddressBook.body1}" id="body1" 20 style="-rave-layout: grid"> 21 <ui:form binding="#{AddressBook.form1}" id="form1" 22 virtualFormsConfig="addForm | lnameTextField 23 streetTextField fnameTextField cityTextField 24 stateTextField zipTextField | submitButton , searchForm 25 | nameAutoComplete | lookUpButton"> 26 <ui:staticText binding="#{AddressBook.staticText1}" id= 27 "staticText1" style="font-size: 18px; left: 24px; 28 top: 24px; position: absolute" text= 29 "Add a contact to the address book:"/>

Outline

AddressBook.jsp

(1 of 7 )

Configures the virtual forms on this page

48


30 <ui:textField binding="#{AddressBook.fnameTextField}"

31 id="fnameTextField" maxLength="20" required="true"


33 width: 192px"/>




37 width: 240px"/>




41 width: 552px"/>







48 width: 48px"/>




52 width: 96px"/>







Outline

AddressBook.jsp

(2 of 7 )

49


59 <ui:label binding="#{AddressBook.streetLabel}" for= 60 "streetTextField" id="streetLabel" style="position: 61 absolute; left: 24px; top: 96px" text="Street:"/> 62 <ui:label binding="#{AddressBook.cityLabel}" for= 63 "cityTextField" id="cityLabel" style="position: 64 absolute; left: 24px; top: 120px" text="City:"/> 65 <ui:label binding="#{AddressBook.stateLabel}" for= 66 "stateTextField" id="stateLabel" style="position: 67 absolute; left: 384px; top: 120px" text="State:"/> 68 <ui:label binding="#{AddressBook.zipLabel}" for= 69 "zipTextField" id="zipLabel" style="left: 528px; 70 top: 120px; position: absolute" text="Zip:"/> 71 <ui:button action="#{AddressBook.submitButton_action}" 72 binding="#{AddressBook.submitButton}" id= 73 "submitButton" primary="true" style="position: 74 absolute; left: 120px; top: 168px" text="Submit"/> 75 <ui:button binding="#{AddressBook.clearButton}" id= 76 "clearButton" reset="true" style="left: 215px; 77 top: 168px; position: absolute" text="Clear"/> 78 <ui:table augmentTitle="false" binding= 79 "#{AddressBook.addressesTable}" id="addressesTable" 80 paginationControls="true" style="left: 24px; 81 top: 216px; position: absolute; width: 360px" 82 title="Contacts" width="720"> 83 <script><![CDATA[ 84  146 }]]></script>

Outline

AddressBook.jsp

(3 of 7 )

50


147 148 "#{AddressBook.tableRowGroup1}" 149 id="tableRowGroup1" rows="5" sourceData= 150 "#{AddressBook.addressesDataProvider}" 151 sourceVar="currentRow"> 152 <ui:tableColumn binding= 153 "#{AddressBook.fnameColumn}" headerText= 154 "First Name" id="fnameColumn" 155 sort="ADDRESSES.FIRSTNAME"> 156 <ui:staticText binding= 157 "#{AddressBook.fnameHeader}" id= 158 "fnameHeader" text="#{currentRow.value[ 159 'ADDRESSES.FIRSTNAME']}"/> 160 </ui:tableColumn> 161 <ui:tableColumn binding= 162 "#{AddressBook.lnameColumn}" headerText= 163 "Last Name" id="lnameColumn" 164 sort="ADDRESSES.LASTNAME"> 165 <ui:staticText binding= 166 "#{AddressBook.lnameHeader}" id= 167 "lnameHeader" text="#{currentRow.value[ 168 'ADDRESSES.LASTNAME']}"/> 169 </ui:tableColumn> 170 <ui:tableColumn binding= 171 "#{AddressBook.streetColumn}" headerText= 172 "Street" id="streetColumn" 173 sort="ADDRESSES.STREET">

Outline

AddressBook.jsp

(4 of 7 )

51


174 <ui:staticText binding= 175 "#{AddressBook.streetHeader}" id= 176 "streetHeader" text="#{currentRow.value[ 177 'ADDRESSES.STREET']}"/> 178 </ui:tableColumn> 179 <ui:tableColumn binding= 180 "#{AddressBook.cityColumn}" headerText="City" 181 id="cityColumn" sort="ADDRESSES.CITY"> 182 <ui:staticText binding= 183 "#{AddressBook.cityHeader}" id="cityHeader" 184 text="#{currentRow.value[ 185 'ADDRESSES.CITY']}"/> 186 </ui:tableColumn> 187 <ui:tableColumn binding= 188 "#{AddressBook.stateColumn}" headerText="State" 189 id="stateColumn" sort="ADDRESSES.STATE"> 190 <ui:staticText binding= 191 "#{AddressBook.stateHeader}" id= 192 "stateHeader" text="#{currentRow.value[ 193 'ADDRESSES.STATE']}"/> 194 </ui:tableColumn> 195 <ui:tableColumn binding="#{AddressBook.zipColumn}" 196 headerText="Zip" id="zipColumn" 197 sort="ADDRESSES.ZIP"> 198 <ui:staticText binding= 199 "#{AddressBook.zipHeader}" id="zipHeader" 200 text="#{currentRow.value[ 201 'ADDRESSES.ZIP']}"/> 202 </ui:tableColumn>

Outline

AddressBook.jsp

(5 of 7 )

52


203 </ui:tableRowGroup> 204 </ui:table> 205 <ui:messageGroup binding="#{AddressBook.messageGroup1}" 206 id="messageGroup1" showGlobalOnly="true" style="left: 207 408px; top: 456px; position: absolute"/> 208 <ui:staticText binding="#{AddressBook.searchHeader}" 209 id="searchHeader" style="font-size: 18px; left: 24px; 210 top: 456px; position: absolute" 211 text="Search the address book by last name:"/> 212 <ui:label binding="#{AddressBook.nameSearchLabel}" 213 for="nameAutoComplete" id="nameSearchLabel" 214 requiredIndicator="true" 215 style="position: absolute; left: 24px; top: 504px" 216 text="Last Name:"/> 217 <bp:autoComplete binding= 218 "#{AddressBook.nameAutoComplete}" completionMethod= 219 "#{AddressBook.nameAutoComplete_complete}" id= 220 "nameAutoComplete" required="true" style="left: 221 120px; top: 504px; position: absolute"/> 222 <ui:button binding="#{AddressBook.lookUpButton}" 223 id="lookUpButton" style="position: absolute; left: 224 312px; top: 504px" text="Look Up"/> 225 </ui:form> 226 </ui:body> 227 </ui:html> 228 </ui:page> 229 </f:view> 230 </jsp:root>

Outline

AddressBook.jsp

(6 of 7 )

Configures the AutoComplete Text Field

53


Outline

AddressBook.jsp

(7 of 7 )

54


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

55


1 // Fig. 27.8: AddressBook.java

2 // Page bean that suggests names in the AutoComplete Text Field.

3 package addressbook;

4

5 import com.sun.data.provider.RowKey;

6 import com.sun.rave.web.ui.appbase.AbstractPageBean;

7 import com.sun.rave.web.ui.component.Body;

8 import com.sun.rave.web.ui.component.Form;

9 import com.sun.rave.web.ui.component.Head;

10 import com.sun.rave.web.ui.component.Html;

11 import com.sun.rave.web.ui.component.Link;

12 import com.sun.rave.web.ui.component.Page;

13 import javax.faces.FacesException;

14 import com.sun.rave.web.ui.component.StaticText;

15 import com.sun.rave.web.ui.component.TextField;

16 import com.sun.rave.web.ui.component.Label;

17 import com.sun.rave.web.ui.component.Button;

18 import com.sun.rave.web.ui.component.Table;

19 import com.sun.rave.web.ui.component.TableRowGroup;

20 import com.sun.rave.web.ui.component.TableColumn;

21 import com.sun.data.provider.impl.CachedRowSetDataProvider;

22 import com.sun.rave.web.ui.component.MessageGroup;

23 import com.sun.j2ee.blueprints.ui.autocomplete.AutoCompleteComponent;

24 import com.sun.j2ee.blueprints.ui.autocomplete.CompletionResult;

25 import javax.faces.context.FacesContext;

26

Outline

AddressBook.java

(1 of 6 )

56



31 private void _init() throws Exception 32 { 33 addressesDataProvider.setCachedRowSet( 34 (javax.sql.rowset.CachedRowSet) 35 getValue( "#{SessionBean1.addressesRowSet}" ) ); 36 addressesTable.setInternalVirtualForm( true ); 37 } 38



578 public void destroy() 579 { 580 addressesDataProvider.close(); 581 } // end method destroy 582

Outline

AddressBook.java

(2 of 6 )

57



594 addressesDataProvider.setValue( "ADDRESSES.FIRSTNAME", 595 fnameTextField.getValue() ); 596 addressesDataProvider.setValue( "ADDRESSES.LASTNAME", 597 lnameTextField.getValue() ); 598 addressesDataProvider.setValue( "ADDRESSES.STREET", 599 streetTextField.getValue() ); 600 addressesDataProvider.setValue( "ADDRESSES.CITY", 601 cityTextField.getValue() ); 602 addressesDataProvider.setValue( "ADDRESSES.STATE", 603 stateTextField.getValue() ); 604 addressesDataProvider.setValue( "ADDRESSES.ZIP", 605 zipTextField.getValue() ); 606 addressesDataProvider.commitChanges(); 607

Outline

AddressBook.java

(3 of 6 )

58



623 return null; 624 } // end method submitButton_action 625

626

627 // action handler for the autocomplete box that fetches names 628 // from the address book whose prefixes match the letters typed so far 629 // and displays them in a suggestion list. 630 public void nameAutoComplete_complete( FacesContext context, String 631 prefix, CompletionResult result ) 632 { 633 try 634 { 635 boolean hasNext = addressesDataProvider.cursorFirst(); 636

Outline

AddressBook.java

(4 of 6 )

Move cursor to first row in the data provider

59


637 while ( hasNext ) 638 { 639 // get a name from the database 640 String name = 641 (String) addressesDataProvider.getValue( 642 "ADDRESSES.LASTNAME" ) + ", " + 643 (String) addressesDataProvider.getValue( 644 "ADDRESSES.FIRSTNAME" ) ; 645

646 // if the name in the database starts with the prefix, add it 647 // to the list of suggestions 648 if ( name.toLowerCase().startsWith( prefix.toLowerCase() ) ) 649 { 650 result.addItem( name ); 651 } // end if 652 else 653 { 654 // terminate the loop if the rest of the names are 655 // alphabetically less than the prefix 656 if ( prefix.compareTo( name ) < 0 ) 657 { 658 break; 659 } // end if 660 } // end else

Outline

AddressBook.java

(5 of 6 )

Get last name and first name from the data provider

Determine whether the name starts with the text the user has typed so far

60


661

662 // move cursor to next row of database 663 hasNext = addressesDataProvider.cursorNext(); 664 } // end while 665 } // end try 666 catch ( Exception ex ) 667 { 668 result.addItem( "Exception getting matching names." ); 669 } // end catch 670 } // end method nameAutoComplete_complete 671 } // end class AddressBook

Outline

AddressBook.java

(6 of 6 )

Move cursor to next row of the data provider

61


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.

62


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

63


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:29080/

64


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

65


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

66


Fig. 27.14 | Dialog to create a new data provider.

67


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

68


1 <?xml version="1.0" encoding="UTF-8"?>

2

3 

4 

5

6 <jsp:root version="1.2" xmlns:bp="http://java.sun.com/blueprints/ui/14"

7 xmlns:f="http://java.sun.com/jsf/core" xmlns:h=

8 "http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page"

9 xmlns:ui="http://www.sun.com/web/ui">

10 <jsp:directive.page contentType="text/html;charset = UTF-8"

11 pageEncoding="UTF-8"/>

12 <f:view>

13 <ui:page binding="#{AddressBook.page1}" id="page1">

14 <ui:html binding="#{AddressBook.html1}" id="html1">

15 <ui:head binding="#{AddressBook.head1}" id="head1">

16 <ui:link binding="#{AddressBook.link1}" id="link1"

17 url="/resources/stylesheet.css"/>

18 </ui:head>

19 <ui:body binding="#{AddressBook.body1}" id="body1"

20 style="-rave-layout: grid">

21 <ui:form binding="#{AddressBook.form1}" id="form1"

22 virtualFormsConfig="addForm | streetTextField

23 fnameTextField cityTextField zipTextField stateTextField

24 lnameTextField | submitButton , searchForm |

25 nameAutoComplete | lookUpButton">

26 <ui:staticText binding="#{AddressBook.staticText1}" id=

27 "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 8 )

69


30 <ui:textField binding="#{AddressBook.fnameTextField}"

31 id="fnameTextField" maxLength="20" required="true"


33 width: 192px"/>




37 width: 240px"/>




41 width: 552px"/>







48 width: 48px"/>




52 width: 96px"/>







Outline

AddressBook.jsp

(2 of 8 )

70


59 <ui:label binding="#{AddressBook.streetLabel}" for= 60 "streetTextField" id="streetLabel" style="position: 61 absolute; left: 24px; top: 96px" text="Street:"/> 62 <ui:label binding="#{AddressBook.cityLabel}" for= 63 "cityTextField" id="cityLabel" style="position: 64 absolute; left: 24px; top: 120px" text="City:"/> 65 <ui:label binding="#{AddressBook.stateLabel}" for= 66 "stateTextField" id="stateLabel" style="position: 67 absolute; left: 384px; top: 120px" text="State:"/> 68 <ui:label binding="#{AddressBook.zipLabel}" for= 69 "zipTextField" id="zipLabel" style="left: 528px; 70 top: 120px; position: absolute" text="Zip:"/> 71 <ui:button action="#{AddressBook.submitButton_action}" 72 binding="#{AddressBook.submitButton}" id= 73 "submitButton" primary="true" style="position: 74 absolute; left: 120px; top: 168px" text="Submit"/> 75 <ui:button binding="#{AddressBook.clearButton}" id= 76 "clearButton" reset="true" style="left: 215px; 77 top: 168px; position: absolute" text="Clear"/> 78 <ui:table augmentTitle="false" binding= 79 "#{AddressBook.addressesTable}" id="addressesTable" 80 paginationControls="true" style="left: 24px; top: 81 216px; position: absolute; width: 360px" 82 title="Contacts" width="720"> 83 <script><![CDATA[ 84  146 }]]></script>

Outline

AddressBook.jsp

(3 of 8 )

71


147 <ui:tableRowGroup binding=

148 "#{AddressBook.tableRowGroup1}" id=

149 "tableRowGroup1" rows="5" sourceData=

150 "#{AddressBook.addressesDataProvider}"

151 sourceVar="currentRow">


153 "#{AddressBook.fnameColumn}" headerText=

154 "First Name" id="fnameColumn"

155 sort="ADDRESSES.FIRSTNAME">


157 "#{AddressBook.fnameHeader}"

158 id="fnameHeader" text="#{currentRow.value[

159 'ADDRESSES.FIRSTNAME']}"/>



162 "#{AddressBook.lnameColumn}" headerText=

163 "Last Name" id="lnameColumn"

164 sort="ADDRESSES.LASTNAME">


166 "#{AddressBook.lnameHeader}" id=

167 "lnameHeader" text="#{currentRow.value[

168 'ADDRESSES.LASTNAME']}"/>



171 "#{AddressBook.streetColumn}" headerText=

172 "Street" id="streetColumn"

173 sort="ADDRESSES.STREET">


175 "#{AddressBook.streetHeader}" id=

176 "streetHeader" text="#{currentRow.value[

Outline

AddressBook.jsp

(4 of 8 )

72


177 'ADDRESSES.STREET']}"/>



180 "#{AddressBook.cityColumn}" headerText=

181 "City" id="cityColumn" sort="ADDRESSES.CITY">


183 "#{AddressBook.cityHeader}" id="cityHeader"


185 'ADDRESSES.CITY']}"/>



188 "#{AddressBook.stateColumn}" headerText="State"

189 id="stateColumn" sort="ADDRESSES.STATE">


191 "#{AddressBook.stateHeader}" id=

192 "stateHeader" text="#{currentRow.value[

193 'ADDRESSES.STATE']}"/>


195 <ui:tableColumn binding="#{AddressBook.zipColumn}"

196 headerText="Zip" id="zipColumn"

197 sort="ADDRESSES.ZIP">


199 "#{AddressBook.zipHeader}" id="zipHeader"


201 'ADDRESSES.ZIP']}"/>


203 </ui:tableRowGroup>

204 </ui:table>

Outline

AddressBook.jsp

(5 of 8 )

73


205 <ui:messageGroup binding="#{AddressBook.messageGroup1}"

206 id="messageGroup1" showGlobalOnly="true" style="left:

207 408px; top: 456px; position: absolute"/>

208 <ui:staticText binding="#{AddressBook.searchHeader}" id=

209 "searchHeader" style="font-size: 18px; left: 24px;

210 top: 456px; position: absolute"

211 text="Search the address book by last name:"/>

212 <ui:label binding="#{AddressBook.nameSearchLabel}" for=

213 "nameAutoComplete" id="nameSearchLabel"

214 requiredIndicator="true" style="position: absolute;

215 left: 24px; top: 504px" text="Last Name:"/>

216 <bp:autoComplete binding=

217 "#{AddressBook.nameAutoComplete}" completionMethod=

218 "#{AddressBook.nameAutoComplete_complete}"

219 id="nameAutoComplete" required="true" style="left:

220 120px; top: 504px; position: absolute"/>

221 <ui:button action="#{AddressBook.lookUpButton_action}"

222 binding="#{AddressBook.lookUpButton}" id=

223 "lookUpButton" style="position: absolute; left:

224 312px; top: 504px" text="Look Up"/>

225 <bp:mapViewer binding="#{AddressBook.mapViewer}" center=

226 "#{AddressBook.mapViewer_center}" id="mapViewer"

227 info="#{AddressBook.mapMarker}" key=

228 "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

229 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" mapControls=

230 "false" style="height: 600px; left: 24px; top: 552px;

231 position: absolute; width: 718px" zoomLevel="1"/>

Outline

AddressBook.jsp

(6 of 8 )

Configures the Map Viewer component

74


232 </ui:form>

233 </ui:body>

234 </ui:html>

235 </ui:page>

236 </f:view>

237 </jsp:root>

Outline

AddressBook.jsp

(7 of 8 )

75


Outline

AddressBook.jsp

(8 of 8 )

76


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

77


1 // Fig. 27.16: AddressBook.java

2 // Page bean for adding a contact to the address books.

3 package addressbook;

4

5 import com.sun.data.provider.RowKey;

6 import com.sun.rave.web.ui.appbase.AbstractPageBean;

7 import com.sun.rave.web.ui.component.Body;

8 import com.sun.rave.web.ui.component.Form;

9 import com.sun.rave.web.ui.component.Head;

10 import com.sun.rave.web.ui.component.Html;

11 import com.sun.rave.web.ui.component.Link;

12 import com.sun.rave.web.ui.component.Page;

13 import javax.faces.FacesException;

14 import com.sun.rave.web.ui.component.StaticText;

15 import com.sun.rave.web.ui.component.TextField;

16 import com.sun.rave.web.ui.component.Label;

17 import com.sun.rave.web.ui.component.Button;

18 import com.sun.rave.web.ui.component.Table;

19 import com.sun.rave.web.ui.component.TableRowGroup;

20 import com.sun.rave.web.ui.component.TableColumn;

21 import com.sun.data.provider.impl.CachedRowSetDataProvider;

22 import com.sun.rave.web.ui.component.MessageGroup;

23 import com.sun.j2ee.blueprints.ui.autocomplete.AutoCompleteComponent;

24 import com.sun.j2ee.blueprints.ui.autocomplete.CompletionResult;

25 import javax.faces.context.FacesContext;

26 import com.sun.j2ee.blueprints.ui.mapviewer.MapComponent;

27 import com.sun.j2ee.blueprints.ui.mapviewer.MapPoint;

28 import com.sun.j2ee.blueprints.ui.geocoder.GeoCoder;

29 import com.sun.j2ee.blueprints.ui.geocoder.GeoPoint;

30 import com.sun.j2ee.blueprints.ui.mapviewer.MapMarker;

Outline

AddressBook.java

(1 of 8 )

78


31


36 private void _init() throws Exception 37 { 38 addressesDataProvider.setCachedRowSet( 39 (javax.sql.rowset.CachedRowSet) 40 getValue( "#{SessionBean1.addressesRowSet}" ) ); 41 addressesTable.setInternalVirtualForm( true ); 42 addressesSearchDataProvider.setCachedRowSet( 43 (javax.sql.rowset.CachedRowSet) 44 getValue( "#{SessionBean1.addressesSearch}" ) ); 45 mapViewer.setRendered( false ); 46 } // end method _init 47



Outline

AddressBook.java

(2 of 8 )

79


550 public void destroy() 551 { 552 addressesSearchDataProvider.close(); 553 addressesDataProvider.close(); 554 } // end method destroy 555


567 addressesDataProvider.setValue( "ADDRESSES.FIRSTNAME", 568 fnameTextField.getValue() ); 569 addressesDataProvider.setValue( "ADDRESSES.LASTNAME", 570 lnameTextField.getValue() ); 571 addressesDataProvider.setValue( "ADDRESSES.STREET", 572 streetTextField.getValue() ); 573 addressesDataProvider.setValue( "ADDRESSES.CITY", 574 cityTextField.getValue() ); 575 addressesDataProvider.setValue( "ADDRESSES.STATE", 576 stateTextField.getValue() ); 577 addressesDataProvider.setValue( "ADDRESSES.ZIP", 578 zipTextField.getValue()); 579 addressesDataProvider.commitChanges();

Outline

AddressBook.java

(3 of 8 )

80


580


596 return null; 597 } // end method submitButton_action 598

599 // action handler for the autocomplete box that fetches names 600 // from the address book whose prefixes match the letters typed so far 601 // and displays them in a suggestion list. 602 public void nameAutoComplete_complete( FacesContext context, String 603 prefix, CompletionResult result ) 604 { 605 try 606 { 607 boolean hasNext = addressesDataProvider.cursorFirst(); 608

Outline

AddressBook.java

(4 of 8 )

81


609 while ( hasNext ) 610 { 611 // get a name from the database 612 String name = 613 (String) addressesDataProvider.getValue( 614 "ADDRESSES.LASTNAME" ) + ", " + 615 (String) addressesDataProvider.getValue( 616 "ADDRESSES.FIRSTNAME" ) ; 617

618 // if the name in the database starts with the prefix, add it 619 // to the list of suggestions 620 if ( name.toLowerCase().startsWith( prefix.toLowerCase() ) ) 621 { 622 result.addItem( name ); 623 } // end if 624 else 625 { 626 // terminate the loop if the rest of the names are 627 // alphabetically less than the prefix 628 if ( prefix.compareTo( name ) < 0 ) 629 { 630 break; 631 } // end if 632 } // end else 633

634 // move cursor to next row of database 635 hasNext = addressesDataProvider.cursorNext(); 636 } // end while 637 } // end try

Outline

AddressBook.java

(5 of 8 )

82


638 catch ( Exception ex ) 639 { 640 result.addItem( "Exception getting matching names." ); 641 } // end catch 642 } // end method nameAutoComplete_complete 643

644 // action handler for the lookUpButton that searches the address book 645 // database and displays the requested address on a corresponding map. 646 public String lookUpButton_action() 647 { 648 // split text in autcomplete field into first and last name 649 String name = String.valueOf( nameAutoComplete.getValue() ); 650 int splitIndex = name.indexOf( "," ); 651 String lname = name.substring( 0, splitIndex ); 652 String fname = name.substring( splitIndex + 2 ); 653

654 try 655 { 656 // set the parameters for the addressesSelected query 657 addressesSearchDataProvider.getCachedRowSet().setObject( 658 1, fname ); 659 addressesSearchDataProvider.getCachedRowSet().setObject( 660 2, lname ); 661 addressesSearchDataProvider.refresh(); 662 String street = (String) addressesSearchDataProvider.getValue( 663 "ADDRESSES.STREET" );

Outline

AddressBook.java

(6 of 8 )

Set the query parameters to the specified first and last name

83


664 String city = (String) addressesSearchDataProvider.getValue( 665 "ADDRESSES.CITY" ); 666 String state = (String) addressesSearchDataProvider.getValue( 667 "ADDRESSES.STATE" ); 668 String zip = (String) addressesSearchDataProvider.getValue( 669 "ADDRESSES.ZIP" ); 670

671 // format the address for Google Maps 672 String googleAddress = street + ", " + city + ", " + state + 673 " " + zip; 674

675 // get the geopoints for the address 676 GeoPoint points[] = geoCoder.geoCode( googleAddress ); 677

678 // if Google Maps cannot find the address 679 if ( points == null ) 680 { 681 error( "Map for " + googleAddress + " could not be found" ); 682 mapViewer.setRendered( false ); // hide map 683 return null; 684 } // end if 685

Outline

AddressBook.java

(7 of 8 )

Get the GeoPoints that match the address

84


686 // center the map for the given address 687 mapViewer_center.setLatitude( points[ 0 ].getLatitude() ); 688 mapViewer_center.setLongitude( points[ 0 ].getLongitude() ); 689

690 // create a marker for the address and set its display text 691 mapMarker.setLatitude( points[ 0 ].getLatitude() ); 692 mapMarker.setLongitude( points[ 0 ].getLongitude() ); 693 mapMarker.setMarkup( fname + " " + lname + "<br/>" + street + 694 "<br/>" + city + ", " + state + " " + zip ); 695

696 mapViewer.setRendered( true ); // show map 697 } // end try 698 catch ( Exception e ) 699 { 700 error( "Error processing search. " + e.getMessage() ); 701 } // end catch 702

703 return null; 704 } // end method lookUpButton_action 705 } // end class AddressBook

Outline

AddressBook.java

(8 of 8 )

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

Web Applications: Part 2 Whatever is in any way beautiful ...

Documents

Transcript of Web Applications: Part 2 Whatever is in any way beautiful ...