Java - Web applications: Part 2

27Web Applications:Part 21Whatever 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 AntoninusThere is something in a face, An air, and a peculiar grace, Which boldest painters cannot trace.William SomervilleCato said the best way to keep good acts in memory was to refresh them with new.Francis Bacon2I never forget a face, but in your case I’ll make an exception.Groucho MarxPainting is only a bridge linking the painter’s mind with that of the viewer.Eugéne Delacroix3OBJECTIVESIn 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.427.1 Introduction27.2 Accessing Databases in Web Applications 27.2.1 Building a Web Application That Displays Data from a Database 27.2.2 Modifying the Page Bean File for the AddressBook Application27.3 Ajax-Enabled JSF Components 27.3.1 Java BluePrints Component Library27.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 Field527.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 Component27.6 Wrap-Up27.7 Web Resources627.1 IntroductionAddressBook ApplicationThree stagesIntroduce Ajax-Enabled JSF components from the Java BluePrints library727.2 Accessing Databases in Web ApplicationsMany web applications access databases to store and retrieve persistent data827.2.1 Building a Web Application That Displays Data from a DatabaseTable component Formats and displays data from database tables Change the Table’s title property to specify the text displayed at the top of the TableTo use a database in a Java Studio Creator 2 web applicationFirst start the IDE’s bundled database serverHas drivers for many types of databases, including Java DB To start the serverClick the Servers tab below the File menuRight click Bundled Database Server at the bottom of the Servers window Select Start Bundled Database Server927.2.1 Building a Web Application That Displays Data from a DatabaseTo add a Java DB database to a projectRight 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 typeSpecify the user ID and password for the databaseDatabase URLjdbc:derby://localhost:21527/YourDatabaseNameHereClick the Select button to choose a table that will be used to validate the databaseClick Select button Click Add to add the database as a data source for the project and close the dialog1027.2.1 Building a Web Application That Displays Data from a DatabaseTo configure a Table component to display database dataRight click the Table Select Bind to DataClick Add Data Provider Expand the database’s nodeExpand the Tables nodeSelect a table and click AddThe Table Layout dialog displays a list of the columns in the database tableAll of the items under the Selected heading will be displayed in the TableTo remove a column from the Table, you can select it and click the Update Center Click Next > to search for available updatesIn 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 componentsWhen the download completes, click Next > then click Finish. Click OK to restart the IDE.3727.3.1 Java BluePrints Component LibraryTo import the components into the PaletteSelect Tools > Component Library ManagerClick ImportClick BrowseSelect the ui.complib file and click OpenClick OK to import both the BluePrints AJAX Components and the BluePrints AJAX SupportBeans38Fig. 27.9 | Ajax-enabled components provided by the JavaBluePrints Ajax component library. 3927.4 AutoComplete Text Field and Virtual FormsAutoComplete Text Field Provides a list of suggestions from a data source as the user types4027.4.1 Configuring Virtual FormsVirtual forms Used when you would like a button to submit a subset of the page’s input fields to the serverCan display multiple forms on the same pageCan specify a submitter and one or more participants for each formWhen the virtual form’s submitter component is clicked, only the values of its participant components will be submitted to the server4127.4.1 Configuring Virtual FormsTo add virtual forms to a pageRight click the submitter component Choose Configure Virtual Forms from the pop-up menuClick New to add a virtual formClick 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 formClick OK to exit the dialogSelect all the input components that will participate in the virtual formRight 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 submitted4227.4.1 Configuring Virtual FormsTo see the virtual forms in the Design modeClick the Show Virtual Forms button This displays a legend of the virtual forms on the page 43Fig. 27.10 | Configure Virtual Forms dialog. 44Fig. 27.11 | Virtual forms legend. 4527.4.2 JSP File with Virtual Forms and an AutoComplete Text FieldAutoComplete Text Field completionMethod attribute is bound to a page bean’s complete event handlerTo create this handlerRight click the AutoComplete Text Field component in Design viewSelect Edit Event Handler > complete46OutlineAddressBook.jsp (1 of 7 ) Configures the virtual forms on this page47OutlineAddressBook.jsp (2 of 7 ) 48OutlineAddressBook.jsp (3 of 7 ) 49OutlineAddressBook.jsp (4 of 7 ) 50OutlineAddressBook.jsp (5 of 7 ) 51OutlineAddressBook.jsp (6 of 7 ) Configures the AutoComplete Text Field52OutlineAddressBook.jsp (7 of 7 ) 5327.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 farReceives a string containing the text the user has entered and a CompletionResult object that is used to display suggestions to the user54OutlineAddressBook.java (1 of 6 ) 55OutlineAddressBook.java (2 of 6 ) 56OutlineAddressBook.java (3 of 6 ) 57OutlineAddressBook.java (4 of 6 ) Move cursor to first row in the data provider58OutlineAddressBook.java (5 of 6 ) Get last name and first name from the data providerDetermine whether the name starts with the text the user has typed so far59OutlineAddressBook.java (6 of 6 ) Move cursor to next row of the data provider60Performance Tip 27.1When 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.6127.5 Google Maps Map Viewer Component Map Viewer Ajax-enabled JSF componentUses the Google Maps API web service to find and display mapsMap Marker points to a location on a map6227.5.1 Obtaining a Google Maps API KeyTo use the Map Viewer componentMust have an account with GoogleRegister for a free account at https://www.google.com/accounts/ManageAccountMust obtain a key to use the Google Maps API from www.google.com/apis/mapsKey is specific to your web application; limits the number of maps the application can display per dayMust provide a URL for the application If you are deploying the application only on Java Studio Creator 2’s built-in test server, use Adding a Map Viewer Component to a PageTo use the Map Viewer componenSet its key property to the your Google Maps API keyMap Marker From the AJAX Support Beans section of the PaletteMarks a location on a mapMust bind the marker to the map so that the marker will display on the mapRight 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 Close6427.5.2 Adding a Map Viewer Component to a PageGeocoding Service Object From the AJAX Support Beans section of the PaletteConverts street addresses into latitudes and longitudesThese are used to display appropriate map65Fig. 27.14 | Dialog to create a new data provider. 6627.5.3 JSP File with a Map Viewer ComponentMap Viewer center attributeBound to the page bean property mapViewer_centerManipulated in the page bean file to center the map on the desired address67OutlineAddressBook.jsp (1 of 8 ) 68OutlineAddressBook.jsp (2 of 8 ) 69OutlineAddressBook.jsp (3 of 8 ) 70OutlineAddressBook.jsp (4 of 8 ) 71OutlineAddressBook.jsp (5 of 8 ) 72OutlineAddressBook.jsp (6 of 8 ) Configures the Map Viewer component73OutlineAddressBook.jsp (7 of 8 ) 74OutlineAddressBook.jsp (8 of 8 ) 7527.5.4 Page Bean that Displays a Map in the Map Viewer ComponentGeocoding Service ObjectgeoCode method receives an address as an argument Returns an array of GeoPoint objects representing locations that match the address parameterGeoPoints provide a location’s latitude and longitude76OutlineAddressBook.java (1 of 8 ) 77OutlineAddressBook.java (2 of 8 ) 78OutlineAddressBook.java (3 of 8 ) 79OutlineAddressBook.java (4 of 8 ) 80OutlineAddressBook.java (5 of 8 ) 81OutlineAddressBook.java (6 of 8 ) Set the query parameters to the specified first and last name82OutlineAddressBook.java (7 of 8 ) Get the GeoPoints that match the address83OutlineAddressBook.java (8 of 8 ) Specify the map’s center locationPlace a marker on the map to indicate the location with the person’s name and address displayed on the marker84