1.  2007 Pearson Education, Inc. All rights reserved. 1 27 Web Applications: Part 2

2.  2007 Pearson Education, Inc. All rights reserved. 2 Whatever is in any way beautiful hath its source of beauty in itself, and is complete in itself; praise forms no part of it. — Marcus Aurelius Antoninus There is something in a face, An air, and a peculiar grace, Which boldest painters cannot trace. — William Somerville Cato said the best way to keep good acts in memory was to refresh them with new. — Francis Bacon

3.  2007 Pearson Education, Inc. All rights reserved. 3 I never forget a face, but in your case I’ll make an exception. — Groucho Marx Painting is only a bridge linking the painter’s mind with that of the viewer. — Eugéne Delacroix

4.  2007 Pearson Education, Inc. All rights reserved. 4 OBJECTIVES In this chapter you will learn:  To use data providers to access databases from web applications built in 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.  2007 Pearson Education, Inc. All rights reserved. 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.  2007 Pearson Education, Inc. All rights reserved. 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.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. 7 27.1 Introduction  AddressBook Application – Three stages  Introduce Ajax-Enabled JSF components from the Java BluePrints library

8.  1992-2007 Pearson Education, Inc. All rights reserved. 8 27.2 Accessing Databases in Web Applications  Many web applications access databases to store and retrieve persistent data

9.  1992-2007 Pearson Education, Inc. All rights reserved. 9 27.2.1 Building a Web Application That Displays Data from a Database  Table component – Formats and displays data from database tables – Change the Table ’s title property to specify the text displayed at the top of the Table  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.  1992-2007 Pearson Education, Inc. All rights reserved. 10 27.2.1 Building a Web Application That Displays Data from a Database  To add a Java DB database to a project – 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.  1992-2007 Pearson Education, Inc. All rights reserved. 11 27.2.1 Building a Web Application That Displays Data from a Database  To configure a Table component to display database data – Right click the Table – 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.  1992-2007 Pearson Education, Inc. All rights reserved. 12 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, expand the table’s node in the Outline window (while in Design mode), then select the appropriate column object

13.  1992-2007 Pearson Education, Inc. All rights reserved. 13 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

14.  1992-2007 Pearson Education, Inc. All rights reserved. 14 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

15.  1992-2007 Pearson Education, Inc. All rights reserved. 15 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

16.  2007 Pearson Education, Inc. All rights reserved. 16 Fig. 27.1 | AddressBook application form for adding a contact.

17.  2007 Pearson Education, Inc. All rights reserved. 17 Fig. 27.2 | Dialog to add a data source.

18.  2007 Pearson Education, Inc. All rights reserved. 18 Fig. 27.3 | Dialog for binding to the Addresses table.

19.  2007 Pearson Education, Inc. All rights reserved. 19 Fig. 27.4 | Table component after binding it to a database table and editing its column names for display purposes.

20.  2007 Pearson Education, Inc. All rights reserved. 20 Fig. 27.5 | Editing addressesRowSet ’s SQL statement.

21.  2007 Pearson Education, Inc. All rights reserved. 21 Outline AddressBook.jsp (1 of 7 )

22.  2007 Pearson Education, Inc. All rights reserved. 22 Outline AddressBook.jsp (2 of 7 )

23.  2007 Pearson Education, Inc. All rights reserved. 23 Outline AddressBook.jsp (3 of 7 ) Autogenerated code that configures a Table element

24.  2007 Pearson Education, Inc. All rights reserved. 24 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.  2007 Pearson Education, Inc. All rights reserved. 25 Outline AddressBook.jsp (5 of 7 )

26.  2007 Pearson Education, Inc. All rights reserved. 26 Outline AddressBook.jsp (6 of 7 )

27.  2007 Pearson Education, Inc. All rights reserved. 27 Outline AddressBook.jsp (7 of 7 )

28.  2007 Pearson Education, Inc. All rights reserved. 28 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.  2007 Pearson Education, Inc. All rights reserved. 29 Outline SessionBean1.java (2 of 2 )

30.  1992-2007 Pearson Education, Inc. All rights reserved. 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.  2007 Pearson Education, Inc. All rights reserved. 31 Outline AddressBook.java (1 of 4 )

32.  2007 Pearson Education, Inc. All rights reserved. 32 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.  2007 Pearson Education, Inc. All rights reserved. 33 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

34.  2007 Pearson Education, Inc. All rights reserved. 34 Outline AddressBook.java (4 of 4 )

35.  1992-2007 Pearson Education, Inc. All rights reserved. 35 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

36.  1992-2007 Pearson Education, Inc. All rights reserved. 36 27.3 Ajax-Enabled JSF Components  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.  1992-2007 Pearson Education, Inc. All rights reserved. 37 27.3.1 Java BluePrints Component Library  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.  1992-2007 Pearson Education, Inc. All rights reserved. 38 27.3.1 Java BluePrints Component Library  To import the components into the Palette – Select Tools > Component Library Manager – Click Import… – Click Browse… – Select the ui.complib file and click Open – Click OK to import both the BluePrints AJAX Components and the BluePrints AJAX SupportBeans

39.  2007 Pearson Education, Inc. All rights reserved. 39 Fig. 27.9 | Ajax-enabled components provided by the Java BluePrints Ajax component library.

40.  1992-2007 Pearson Education, Inc. All rights reserved. 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.  1992-2007 Pearson Education, Inc. All rights reserved. 41 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

42.  1992-2007 Pearson Education, Inc. All rights reserved. 42 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

43.  1992-2007 Pearson Education, Inc. All rights reserved. 43 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

44.  2007 Pearson Education, Inc. All rights reserved. 44 Fig. 27.10 | Configure Virtual Forms dialog.

45.  2007 Pearson Education, Inc. All rights reserved. 45 Fig. 27.11 | Virtual forms legend.

46.  1992-2007 Pearson Education, Inc. All rights reserved. 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.  2007 Pearson Education, Inc. All rights reserved. 47 Outline AddressBook.jsp (1 of 7 ) Configures the virtual forms on this page

48.  2007 Pearson Education, Inc. All rights reserved. 48 Outline AddressBook.jsp (2 of 7 )

49.  2007 Pearson Education, Inc. All rights reserved. 49 Outline AddressBook.jsp (3 of 7 )

50.  2007 Pearson Education, Inc. All rights reserved. 50 Outline AddressBook.jsp (4 of 7 )

51.  2007 Pearson Education, Inc. All rights reserved. 51 Outline AddressBook.jsp (5 of 7 )

52.  2007 Pearson Education, Inc. All rights reserved. 52 Outline AddressBook.jsp (6 of 7 ) Configures the AutoComplete Text Field

53.  2007 Pearson Education, Inc. All rights reserved. 53 Outline AddressBook.jsp (7 of 7 )

54.  1992-2007 Pearson Education, Inc. All rights reserved. 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.  2007 Pearson Education, Inc. All rights reserved. 55 Outline AddressBook.java (1 of 6 )

56.  2007 Pearson Education, Inc. All rights reserved. 56 Outline AddressBook.java (2 of 6 )

57.  2007 Pearson Education, Inc. All rights reserved. 57 Outline AddressBook.java (3 of 6 )

58.  2007 Pearson Education, Inc. All rights reserved. 58 Outline AddressBook.java (4 of 6 ) Move cursor to first row in the data provider

59.  2007 Pearson Education, Inc. All rights reserved. 59 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.  2007 Pearson Education, Inc. All rights reserved. 60 Outline AddressBook.java (6 of 6 ) Move cursor to next row of the data provider

61.  2007 Pearson Education, Inc. All rights reserved. 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.  1992-2007 Pearson Education, Inc. All rights reserved. 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.  1992-2007 Pearson Education, Inc. All rights reserved. 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 https://www.google.com/accounts/ManageAccount – Must obtain a key to use the Google Maps API from www.google.com/apis/maps 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/http://localhost:29080/

64.  1992-2007 Pearson Education, Inc. All rights reserved. 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.  1992-2007 Pearson Education, Inc. All rights reserved. 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.  2007 Pearson Education, Inc. All rights reserved. 66 Fig. 27.14 | Dialog to create a new data provider.

67.  1992-2007 Pearson Education, Inc. All rights reserved. 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.  2007 Pearson Education, Inc. All rights reserved. 68 Outline AddressBook.jsp (1 of 8 )

69.  2007 Pearson Education, Inc. All rights reserved. 69 Outline AddressBook.jsp (2 of 8 )

70.  2007 Pearson Education, Inc. All rights reserved. 70 Outline AddressBook.jsp (3 of 8 )

71.  2007 Pearson Education, Inc. All rights reserved. 71 Outline AddressBook.jsp (4 of 8 )

72.  2007 Pearson Education, Inc. All rights reserved. 72 Outline AddressBook.jsp (5 of 8 )

73.  2007 Pearson Education, Inc. All rights reserved. 73 Outline AddressBook.jsp (6 of 8 ) Configures the Map Viewer component

74.  2007 Pearson Education, Inc. All rights reserved. 74 Outline AddressBook.jsp (7 of 8 )

75.  2007 Pearson Education, Inc. All rights reserved. 75 Outline AddressBook.jsp (8 of 8 )

76.  1992-2007 Pearson Education, Inc. All rights reserved. 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 – GeoPoint s provide a location’s latitude and longitude

77.  2007 Pearson Education, Inc. All rights reserved. 77 Outline AddressBook.java (1 of 8 )

78.  2007 Pearson Education, Inc. All rights reserved. 78 Outline AddressBook.java (2 of 8 )

79.  2007 Pearson Education, Inc. All rights reserved. 79 Outline AddressBook.java (3 of 8 )

80.  2007 Pearson Education, Inc. All rights reserved. 80 Outline AddressBook.java (4 of 8 )

81.  2007 Pearson Education, Inc. All rights reserved. 81 Outline AddressBook.java (5 of 8 )

82.  2007 Pearson Education, Inc. All rights reserved. 82 Outline AddressBook.java (6 of 8 ) Set the query parameters to the specified first and last name

83.  2007 Pearson Education, Inc. All rights reserved. 83 Outline AddressBook.java (7 of 8 ) Get the GeoPoint s that match the address

84.  2007 Pearson Education, Inc. All rights reserved. 84 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