Your SlideShare is downloading. ×
0
27 <ul><li>Ajax-Enabled JavaServer™ Faces Web Applications </li></ul>
<ul><li>Whatever is in any way beautiful hath its  source of beauty in itself, and is  complete in itself; praise forms no...
<ul><li>I never forget a face, but in your  case I’ll make an exception. </li></ul><ul><ul><li>Groucho Marx </li></ul></ul...
OBJECTIVES <ul><li>In this chapter you will learn:  </li></ul><ul><li>To use data providers to access databases from web a...
<ul><li>27.1   Introduction </li></ul><ul><li>27.2   Accessing Databases in Web Applications </li></ul><ul><li>27.2.1   Bu...
<ul><li>27.5   Google Maps  Map   Viewer  Component </li></ul><ul><li>27.5.1   Obtaining a Google Maps API Key </li></ul><...
27.1 Introduction <ul><li>AddressBook Application </li></ul><ul><ul><li>Three stages </li></ul></ul><ul><li>Introduce Ajax...
27.2 Accessing Databases in Web Applications <ul><li>Many web applications access databases to store and retrieve persiste...
27.2.1 Building a Web Application That Displays Data from a Database <ul><li>Table  component  </li></ul><ul><ul><li>Forma...
27.2.1 Building a Web Application That Displays Data from a Database <ul><li>To add a Java DB database to a project </li><...
27.2.1 Building a Web Application That Displays Data from a Database <ul><li>To add a table to a database </li></ul><ul><u...
27.2.1 Building a Web Application That Displays Data from a Database <ul><li>To configure a  Table  component to display d...
27.2.1 Building a Web Application That Displays Data from a Database <ul><li>By default, the  Table ’s column headings are...
27.2.1 Building a Web Application That Displays Data from a Database <ul><li>Checking a  Table ’s  paginationControls  pro...
27.2.1 Building a Web Application That Displays Data from a Database <ul><li>Binding a Table to a data provider adds a new...
27.2.1 Building a Web Application That Displays Data from a Database <ul><li>CachedRowSet  object is configured by default...
Fig. 27.1  |  AddressBook  application form for adding a contact.
Fig. 27.2  | Addresses table data.
Fig. 27.3  | Dialog for binding to the  Addresses  table.
Fig. 27.4  |  Table  component after binding it to a database table and editing its column names for display purposes.
Fig. 27.5  | Editing  addressesRowSet ’s SQL statement.
Outline AddressBook.jsp   (1 of 7 )
Outline AddressBook.jsp   (2 of 7 )
Outline AddressBook.jsp   (3 of 7 )
Outline AddressBook.jsp   (4 of 7 )
Outline AddressBook.jsp   (5 of 7 )
Outline AddressBook.jsp   (6 of 7 )
Outline AddressBook.jsp   (7 of 7 )
Outline SessionBean1 .java   (1 of 2 )   Specifies the database for the  RowSet Specifies the SQL used to obtain the data ...
Outline SessionBean1 .java   (2 of 2 )
27.2.2 Modifying the Page Bean File for the AddressBook Application <ul><li>Every row in a  CachedRowSetDataProvider  has ...
Outline AddressBook.java   (1 of 4 )
Outline AddressBook.java   (2 of 4 )   Refreshes the  addressesDataProvider  so that records are sorted properly after new...
Outline AddressBook.java   (3 of 4 )   Adds new row and gets its key Uses key to specify the row to which the cursor shoul...
Outline AddressBook.java   (4 of 4 )
27.3 Ajax-Enabled JSF Components <ul><li>Ajax—Asynchronous JavaScript and XML </li></ul><ul><ul><li>Term coined by Jesse J...
27.3 Ajax-Enabled JSF Components <ul><li>Java BluePrints Ajax component library provides Ajax-enabled JSF components </li>...
27.3.1 Java BluePrints Component Library <ul><li>To import the components into the Palette </li></ul><ul><ul><li>Select  T...
27.3.1 Java BluePrints Component Library <ul><li>To see the new components in the Palette, you must add the BluePrints AJA...
Fig. 27.9  | Java BluePrints component library’s Ajax-enabled components.
27.4 AutoComplete Text Field and Virtual Forms <ul><li>AutoComplete Text Field  </li></ul><ul><ul><li>Provides a list of s...
27.4.1 Configuring Virtual Forms <ul><li>Virtual forms  </li></ul><ul><ul><li>Used when you would like a button to submit ...
27.4.1 Configuring Virtual Forms <ul><li>To add virtual forms to a page </li></ul><ul><ul><li>Right click the submitter co...
27.4.1 Configuring Virtual Forms <ul><li>To see the virtual forms in the  Design  mode </li></ul><ul><ul><li>Click the  Sh...
Fig. 27.10  | Configure Virtual Forms dialog.
Fig. 27.11  | Virtual forms legend.
27.4.2  JSP File with Virtual Forms and an AutoComplete Text Field <ul><li>AutoComplete Text Field  </li></ul><ul><ul><li>...
Outline AddressBook.jsp   (1 of 7 )   Configures the virtual forms on this page
Outline AddressBook.jsp   (2 of 7 )
Outline AddressBook.jsp   (3 of 7 )
Outline AddressBook.jsp   (4 of 7 )
Outline AddressBook.jsp   (5 of 7 )   Configures the  AutoComplete Text Field
Outline AddressBook.jsp   (6 of 7 )
Outline AddressBook.jsp   (7 of 7 )
27.4.3 Providing Suggestions for an AutoComplete Text Field  <ul><li>complete  event handler is invoked after every keystr...
Outline AddressBook.java   (1 of 3 )
Outline AddressBook.java   (2 of 3 )
Outline AddressBook.java   (3 of 3 )
Performance Tip 27.1 <ul><li>When using database columns to provide suggestions in an  AutoComplete Text Field , sorting t...
27.5 Google Maps Map Viewer Component  <ul><li>Map Viewer  Ajax-enabled JSF component </li></ul><ul><ul><li>Uses the Googl...
27.5.1 Obtaining a Google Maps API Key <ul><li>To use the  Map Viewer  component </li></ul><ul><ul><li>Must have an accoun...
27.5.2 Adding a Map Viewer Component to a Page <ul><li>To use the  Map Viewer  componen </li></ul><ul><ul><li>Set its  key...
27.5.2 Adding a Map Viewer Component to a Page <ul><li>Geocoding Service Object   </li></ul><ul><ul><li>From the AJAX Supp...
27.5.3 JSP File with a Map Viewer Component <ul><li>Map Viewer   center  attribute </li></ul><ul><ul><li>Bound to the page...
Outline AddressBook.jsp   (1 of 7 )
Outline AddressBook.jsp   (2 of 7 )
Outline AddressBook.jsp   (3 of 7 )
Outline AddressBook.jsp   (4 of 7 )
Outline AddressBook.jsp   (5 of 7 )
Outline AddressBook.jsp   (6 of 7 )   Configures the Map Viewer component
Outline AddressBook.jsp   (7 of 7 )
27.5.4 Page Bean that Displays a Map in the Map Viewer Component <ul><li>Geocoding Service Object </li></ul><ul><ul><li>ge...
Outline AddressBook.java   (1 of 4 )
Outline AddressBook.java   (2 of 4 )
Outline AddressBook.java   (3 of 4 )   Set the query parameters to the specified first and last name Get the  GeoPoint s t...
Outline AddressBook.java   (4 of 4 )   Specify the map’s center location Place a marker on the map to indicate the locatio...
Upcoming SlideShare
Loading in...5
×

Ajax Enabled JavaServer Faces(DD Chapter 27)

404

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
404
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Ajax Enabled JavaServer Faces(DD Chapter 27)"

  1. 1. 27 <ul><li>Ajax-Enabled JavaServer™ Faces Web Applications </li></ul>
  2. 2. <ul><li>Whatever is in any way beautiful hath its source of beauty in itself, and is complete in itself; praise forms no part of it. </li></ul><ul><ul><li>Marcus Aurelius Antoninus </li></ul></ul><ul><li>There is something in a face, An air, and a peculiar grace, Which boldest painters cannot trace. </li></ul><ul><ul><li>William Somerville </li></ul></ul><ul><li>Cato said the best way to keep good acts in memory was to refresh them with new. </li></ul><ul><ul><li>Francis Bacon </li></ul></ul>
  3. 3. <ul><li>I never forget a face, but in your case I’ll make an exception. </li></ul><ul><ul><li>Groucho Marx </li></ul></ul><ul><li>Painting is only a bridge linking the painter’s mind with that of the viewer. </li></ul><ul><ul><li>Eugéne Delacroix </li></ul></ul>
  4. 4. OBJECTIVES <ul><li>In this chapter you will learn: </li></ul><ul><li>To use data providers to access databases from web applications built in Netbeans. </li></ul><ul><li>To include Ajax-enabled JSF components in a Netbeans web application project. </li></ul><ul><li>To configure virtual forms that enable subsets of a form’s input components to be submitted to the server. </li></ul>
  5. 5. <ul><li>27.1 Introduction </li></ul><ul><li>27.2 Accessing Databases in Web Applications </li></ul><ul><li>27.2.1 Building a Web Application That Displays Data from a Database </li></ul><ul><li>27.2.2 Modifying the Page Bean File for the AddressBook Application </li></ul><ul><li>27.3 Ajax-Enabled JSF Components </li></ul><ul><li>27.4 AutoComplete Text Field and Virtual Forms </li></ul><ul><li>27.4.1 Configuring Virtual Forms </li></ul><ul><li>27.4.2 JSP File with Virtual Forms and a AutoComplete Text Field </li></ul><ul><li>27.4.3 Providing Suggestions for a AutoComplete Text Field </li></ul>
  6. 6. <ul><li>27.5 Google Maps Map Viewer Component </li></ul><ul><li>27.5.1 Obtaining a Google Maps API Key </li></ul><ul><li>27.5.2 Adding Map Viewer Component to a Page </li></ul><ul><li>27.5.3 JSP File with Map Viewer Component </li></ul><ul><li>27.5.3 JSP File with Map Viewer Component </li></ul><ul><li>27.5.4 Page Bean that Displays a Map in the Map Viewer Component </li></ul><ul><li>27.6 Wrap-Up </li></ul><ul><li>27.7 Web Resources </li></ul>
  7. 7. 27.1 Introduction <ul><li>AddressBook Application </li></ul><ul><ul><li>Three stages </li></ul></ul><ul><li>Introduce Ajax-Enabled JSF components from the Java BluePrints Ajax componlibrary </li></ul>
  8. 8. 27.2 Accessing Databases in Web Applications <ul><li>Many web applications access databases to store and retrieve persistent data </li></ul>
  9. 9. 27.2.1 Building a Web Application That Displays Data from a Database <ul><li>Table component </li></ul><ul><ul><li>Formats and displays data from database tables </li></ul></ul><ul><ul><li>Change the Table ’s title property to specify the text displayed at the top of the Table </li></ul></ul>
  10. 10. 27.2.1 Building a Web Application That Displays Data from a Database <ul><li>To add a Java DB database to a project </li></ul><ul><ul><li>To create database, perform the following steps: </li></ul></ul><ul><ul><ul><li>Select Tools > Java DB Database > Create Java DB Database… . </li></ul></ul></ul><ul><ul><ul><li>Enter the name of the database to create ( AddressBook ), a username ( iw3htp4 ) and a password ( iw3htp4 ), then click OK to create the database. </li></ul></ul></ul><ul><ul><li>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 </li></ul></ul><ul><ul><ul><li>jdbc:derby://localhost:1527/AddressBook </li></ul></ul></ul><ul><ul><li>This URL indicates that the database resides on the local machine and accepts connections on port 1527. </li></ul></ul>
  11. 11. 27.2.1 Building a Web Application That Displays Data from a Database <ul><li>To add a table to a database </li></ul><ul><ul><li>Use the Runtime tab to create tables and to execute SQL statements that populate the database with data </li></ul></ul><ul><ul><ul><li>Click the Runtime tab and expand the Databases node </li></ul></ul></ul><ul><ul><ul><li>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…. </li></ul></ul></ul><ul><ul><li>Expand the node for the AddressBook database, right click the Tables node and select Execute Command… to open a SQL Command editor in Netbeans </li></ul></ul><ul><ul><ul><li>We provided the file AddressBook.sql in this chapter’s examples folder </li></ul></ul></ul><ul><ul><ul><li>Copy the SQL statements and paste them into the SQL Command editor in Netbeans </li></ul></ul></ul><ul><ul><ul><li>Highlight all the SQL commands, right click inside the SQL Command editor and select Run Selection </li></ul></ul></ul><ul><ul><ul><li>You may need to refresh the Tables node of the Runtime tab to see the new table </li></ul></ul></ul>
  12. 12. 27.2.1 Building a Web Application That Displays Data from a Database <ul><li>To configure a Table component to display database data </li></ul><ul><ul><li>Right click the Table component </li></ul></ul><ul><ul><li>Select Bind to Data </li></ul></ul><ul><ul><li>Items under Selected will appear in the table </li></ul></ul><ul><ul><li>You can remove a column by selecting it and clicking < </li></ul></ul>
  13. 13. 27.2.1 Building a Web Application That Displays Data from a Database <ul><li>By default, the Table ’s column headings are the column names in the database table displayed in all capital letters </li></ul><ul><ul><li>Can change these headings by selecting a column and editing its headerText property in the Properties window </li></ul></ul><ul><ul><li>To select a column, click the column’s name in Design mode </li></ul></ul>
  14. 14. 27.2.1 Building a Web Application That Displays Data from a Database <ul><li>Checking a Table ’s paginationControls property configures a Table for automatic pagination </li></ul><ul><ul><li>Five rows displayed at a time </li></ul></ul><ul><ul><li>Buttons for moving forward and backward between groups of five contacts added to the bottom of the Table </li></ul></ul><ul><li>Set internalVirtualForm property </li></ul><ul><ul><li>Allows subsets of Form components to be submitted to server </li></ul></ul><ul><ul><li>Prevents table’s pagination controls from submitting entire form every time the user moves to the next set of contacts </li></ul></ul>
  15. 15. 27.2.1 Building a Web Application That Displays Data from a Database <ul><li>Binding a Table to a data provider adds a new CachedRowSetDataProvider to the application’s node in the Outline window </li></ul><ul><li>CachedRowSetDataProvider </li></ul><ul><ul><li>Provides a scrollable RowSet that can be bound to a Table component to display the RowSet ’s data </li></ul></ul>
  16. 16. 27.2.1 Building a Web Application That Displays Data from a Database <ul><li>CachedRowSet object is configured by default to execute a SQL query that selects all the data in the database table </li></ul><ul><ul><li>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 </li></ul></ul>
  17. 17. Fig. 27.1 | AddressBook application form for adding a contact.
  18. 18. Fig. 27.2 | Addresses table data.
  19. 19. Fig. 27.3 | Dialog for binding to the Addresses table.
  20. 20. Fig. 27.4 | Table component after binding it to a database table and editing its column names for display purposes.
  21. 21. Fig. 27.5 | Editing addressesRowSet ’s SQL statement.
  22. 22. Outline AddressBook.jsp (1 of 7 )
  23. 23. Outline AddressBook.jsp (2 of 7 )
  24. 24. Outline AddressBook.jsp (3 of 7 )
  25. 25. Outline AddressBook.jsp (4 of 7 )
  26. 26. Outline AddressBook.jsp (5 of 7 )
  27. 27. Outline AddressBook.jsp (6 of 7 )
  28. 28. Outline AddressBook.jsp (7 of 7 )
  29. 29. 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
  30. 30. Outline SessionBean1 .java (2 of 2 )
  31. 31. 27.2.2 Modifying the Page Bean File for the AddressBook Application <ul><li>Every row in a CachedRowSetDataProvider has its own key </li></ul><ul><ul><li>Method appendRow adds a new row and returns its key </li></ul></ul><ul><li>Method commitChanges of class CachedRowSetDataProvider </li></ul><ul><ul><li>Applies any changes to the CachedRowSet to the database </li></ul></ul><ul><li>CachedRowSetDataProvider method refresh </li></ul><ul><ul><li>Re-executes the wrapped CachedRowSet ’s SQL statement </li></ul></ul>
  32. 32. Outline AddressBook.java (1 of 4 )
  33. 33. 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
  34. 34. Outline AddressBook.java (3 of 4 ) Adds new row and gets its key Uses 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
  35. 35. Outline AddressBook.java (4 of 4 )
  36. 36. 27.3 Ajax-Enabled JSF Components <ul><li>Ajax—Asynchronous JavaScript and XML </li></ul><ul><ul><li>Term coined by Jesse James Garrett of Adaptive Path, Inc. </li></ul></ul><ul><ul><li>Describes a range of technologies for developing highly responsive, dynamic web applications </li></ul></ul><ul><li>Separates the user interaction portion of an application from its server interaction </li></ul><ul><ul><li>Enables both to proceed asynchronously in parallel </li></ul></ul><ul><ul><li>Enables Ajax web-based applications to perform at speeds approaching those of desktop applications </li></ul></ul><ul><li>Makes asynchronous calls to the server to exchange small amounts of data </li></ul><ul><li>Allows only the necessary portions of the page to reload, saving time and resources </li></ul>
  37. 37. 27.3 Ajax-Enabled JSF Components <ul><li>Java BluePrints Ajax component library provides Ajax-enabled JSF components </li></ul><ul><li>To use the Java BluePrints Ajax-enabled components </li></ul><ul><ul><li>Must download and import them </li></ul></ul><ul><ul><li>Choose Tools > Update Center </li></ul></ul><ul><ul><li>Click Next > to search for available updates </li></ul></ul><ul><ul><li>In the Available Updates and New Modules area of the dialog, select BluePrints AJAX Components and click the right arrow ( > ) button </li></ul></ul><ul><ul><li>Click Next > and follow the prompts to accept the terms of use and download the components </li></ul></ul><ul><ul><li>When the download completes, click Next > then click Finish . </li></ul></ul><ul><ul><li>Click OK to restart the IDE. </li></ul></ul>
  38. 38. 27.3.1 Java BluePrints Component Library <ul><li>To import the components into the Palette </li></ul><ul><ul><li>Select Tools > Component Library Manager </li></ul></ul><ul><ul><li>Click Import… </li></ul></ul><ul><ul><li>Click Browse… </li></ul></ul><ul><ul><li>Select the ui.complib file and click Open </li></ul></ul><ul><ul><li>Click OK to import both the BluePrints AJAX Components and the BluePrints AJAX SupportBeans </li></ul></ul>
  39. 39. 27.3.1 Java BluePrints Component Library <ul><li>To see the new components in the Palette, you must add the BluePrints AJAX Components </li></ul><ul><ul><li>Make sure your application’s node is expanded in the Projects tab </li></ul></ul><ul><ul><li>Right click the Component Libraries node and select Add Component Library </li></ul></ul><ul><ul><li>Select the BluePrints AJAX Components library and click Add Component Library </li></ul></ul>
  40. 40. Fig. 27.9 | Java BluePrints component library’s Ajax-enabled components.
  41. 41. 27.4 AutoComplete Text Field and Virtual Forms <ul><li>AutoComplete Text Field </li></ul><ul><ul><li>Provides a list of suggestions from a data source as the user types </li></ul></ul>
  42. 42. 27.4.1 Configuring Virtual Forms <ul><li>Virtual forms </li></ul><ul><ul><li>Used when you would like a button to submit a subset of the page’s input fields to the server </li></ul></ul><ul><ul><li>Can display multiple forms on the same page </li></ul></ul><ul><ul><li>Can specify a submitter and one or more participants for each form </li></ul></ul><ul><ul><li>When the virtual form’s submitter component is clicked, only the values of its participant components will be submitted to the server </li></ul></ul>
  43. 43. 27.4.1 Configuring Virtual Forms <ul><li>To add virtual forms to a page </li></ul><ul><ul><li>Right click the submitter component </li></ul></ul><ul><ul><li>Choose Configure Virtual Forms… from the pop-up menu </li></ul></ul><ul><ul><li>Click New to add a virtual form </li></ul></ul><ul><ul><li>Click in the Name column and specify the new form’s name </li></ul></ul><ul><ul><li>Double click the Submit column and change the option to Yes </li></ul></ul><ul><ul><ul><li>this button submits the virtual form </li></ul></ul></ul><ul><ul><li>Click OK to exit the dialog </li></ul></ul><ul><ul><li>Select all the input components that will participate in the virtual form </li></ul></ul><ul><ul><li>Right click one of the selected components and choose Configure Virtual Forms… </li></ul></ul><ul><ul><li>In the Participate column of the appropriate virtual form, change the option to Yes </li></ul></ul><ul><ul><ul><li>Values in these components are submitted to the server when the form is submitted </li></ul></ul></ul>
  44. 44. 27.4.1 Configuring Virtual Forms <ul><li>To see the virtual forms in the Design mode </li></ul><ul><ul><li>Click the Show Virtual Forms button </li></ul></ul><ul><ul><li>This displays a legend of the virtual forms on the page </li></ul></ul>
  45. 45. Fig. 27.10 | Configure Virtual Forms dialog.
  46. 46. Fig. 27.11 | Virtual forms legend.
  47. 47. 27.4.2 JSP File with Virtual Forms and an AutoComplete Text Field <ul><li>AutoComplete Text Field </li></ul><ul><ul><li>completionMethod attribute is bound to a page bean’s complete event handler </li></ul></ul><ul><ul><li>To create this handler </li></ul></ul><ul><ul><ul><li>Right click the AutoComplete Text Field component in Design view </li></ul></ul></ul><ul><ul><ul><li>Select Edit Event Handler > complete </li></ul></ul></ul>
  48. 48. Outline AddressBook.jsp (1 of 7 ) Configures the virtual forms on this page
  49. 49. Outline AddressBook.jsp (2 of 7 )
  50. 50. Outline AddressBook.jsp (3 of 7 )
  51. 51. Outline AddressBook.jsp (4 of 7 )
  52. 52. Outline AddressBook.jsp (5 of 7 ) Configures the AutoComplete Text Field
  53. 53. Outline AddressBook.jsp (6 of 7 )
  54. 54. Outline AddressBook.jsp (7 of 7 )
  55. 55. 27.4.3 Providing Suggestions for an AutoComplete Text Field <ul><li>complete event handler is invoked after every keystroke in an AutoComplete Text Field </li></ul><ul><ul><li>Updates the list of suggestions based on the text the user has typed so far </li></ul></ul><ul><ul><li>Receives a string containing the text the user has entered and a CompletionResult object that is used to display suggestions to the user </li></ul></ul>
  56. 56. Outline AddressBook.java (1 of 3 )
  57. 57. Outline AddressBook.java (2 of 3 )
  58. 58. Outline AddressBook.java (3 of 3 )
  59. 59. Performance Tip 27.1 <ul><li>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. </li></ul>
  60. 60. 27.5 Google Maps Map Viewer Component <ul><li>Map Viewer Ajax-enabled JSF component </li></ul><ul><ul><li>Uses the Google Maps API web service to find and display maps </li></ul></ul><ul><li>Map Marker points to a location on a map </li></ul>
  61. 61. 27.5.1 Obtaining a Google Maps API Key <ul><li>To use the Map Viewer component </li></ul><ul><ul><li>Must have an account with Google </li></ul></ul><ul><ul><li>Register for a free account at https://www.google.com/accounts/ManageAccount </li></ul></ul><ul><ul><li>Must obtain a key to use the Google Maps API from www.google.com/apis/maps </li></ul></ul><ul><ul><li>Key is specific to your web application; limits the number of maps the application can display per day </li></ul></ul><ul><ul><li>Must provide a URL for the application </li></ul></ul><ul><ul><ul><li>If you are deploying the application only on Java Studio Creator 2’s built-in test server, use http://localhost:8080/ </li></ul></ul></ul>
  62. 62. 27.5.2 Adding a Map Viewer Component to a Page <ul><li>To use the Map Viewer componen </li></ul><ul><ul><li>Set its key property to the your Google Maps API key </li></ul></ul><ul><li>Map Marker </li></ul><ul><ul><li>From the AJAX Support Beans section of the Palette </li></ul></ul><ul><ul><li>Marks a location on a map </li></ul></ul><ul><ul><li>Must bind the marker to the map so that the marker will display on the map </li></ul></ul><ul><ul><ul><li>Right click the Map Viewer in Design mode </li></ul></ul></ul><ul><ul><ul><li>Choose Property Bindings… </li></ul></ul></ul><ul><ul><ul><li>Select info from the Select bindable property column, then select the Map Marker from the Select binding target column. </li></ul></ul></ul><ul><ul><ul><li>Click Apply , then Close </li></ul></ul></ul>
  63. 63. 27.5.2 Adding a Map Viewer Component to a Page <ul><li>Geocoding Service Object </li></ul><ul><ul><li>From the AJAX Support Beans section of the Palette </li></ul></ul><ul><ul><li>Converts street addresses into latitudes and longitudes </li></ul></ul><ul><ul><li>These are used to display appropriate map </li></ul></ul>
  64. 64. 27.5.3 JSP File with a Map Viewer Component <ul><li>Map Viewer center attribute </li></ul><ul><ul><li>Bound to the page bean property mapViewer_center </li></ul></ul><ul><ul><li>Manipulated in the page bean file to center the map on the desired address </li></ul></ul>
  65. 65. Outline AddressBook.jsp (1 of 7 )
  66. 66. Outline AddressBook.jsp (2 of 7 )
  67. 67. Outline AddressBook.jsp (3 of 7 )
  68. 68. Outline AddressBook.jsp (4 of 7 )
  69. 69. Outline AddressBook.jsp (5 of 7 )
  70. 70. Outline AddressBook.jsp (6 of 7 ) Configures the Map Viewer component
  71. 71. Outline AddressBook.jsp (7 of 7 )
  72. 72. 27.5.4 Page Bean that Displays a Map in the Map Viewer Component <ul><li>Geocoding Service Object </li></ul><ul><ul><li>geoCode method receives an address as an argument </li></ul></ul><ul><ul><li>Returns an array of GeoPoint objects representing locations that match the address parameter </li></ul></ul><ul><ul><li>GeoPoint s provide a location’s latitude and longitude </li></ul></ul>
  73. 73. Outline AddressBook.java (1 of 4 )
  74. 74. Outline AddressBook.java (2 of 4 )
  75. 75. Outline AddressBook.java (3 of 4 ) Set the query parameters to the specified first and last name Get the GeoPoint s that match the address
  76. 76. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×