Ajax Enabling the Date Field Component

5807ch07.qxd 1/19/06 7:24 PM CHAPTER Page 267 sss Ajax Enabling the Date Field Component When you innovate, you’ve got to be prepared for everyone telling you you’re nuts —Larry Ellison, founder and CEO, Oracle C hapter introduced the concept of using Ajax and XMLHttpRequest to asynchronously communicate with the Web server without the Web server knowing the difference between a regular postback and an Ajax postback The direct benefit is that it leaves the JSF lifecycle untouched, which allows the application developer to use Ajax-enabled components with regular JSF Events and Listeners This chapter will address the need to fetch data using Ajax The most common use cases for fetching data using Ajax are to populate drop-down lists and add type-ahead functionality in text fields In contrast to using Ajax postback for events, fetching data should not affect the surrounding components on the page And if fetching data is not affecting other parts of the DOM tree, then you not need to go through the full lifecycle of JSF just to get the data, right? Plenty of examples are available on the Web today where fetching data is improving the usability of a Web application The most prominent examples of asynchronous data transfer are Google Suggest’s autosuggest feature and Google Gmail’s file upload feature Requirements for the Date Component’s Ajax Implementation The requirement for the ProInputDate component is to provide a visual calendar that can be used to select a date To support this visual calendar, you need to provide a pop-up window for the actual calendar and asynchronously fetch data representing dates that can be displayed The visual calendar will allow the user to select only the available dates (for example, working days) All other days (for example, holidays and weekends) should be displayed but not be selectable When a date is selected, it should be copied to the input field using the correct date format When a value is submitted back to the server, it should successfully pass validation only if it is an available date (for example, a working day) 267 5807ch07.qxd 268 1/19/06 7:24 PM Page 268 CHAPTER s AJAX ENABLING THE DATE FIELD COMPONENT The Ajax-Enabled Date Component In this chapter, you will enhance the ProInputDate component created in Chapter Based on the new requirements, you have three goals to achieve in this chapter First, you need to provide the ProInputDate component with a visual calendar Second, you need to create a Validator that can be used by the application developer to provide a list of available dates These dates can then be validated against user entries in the ProInputDate text field Third, you want to be able to reuse the same managed bean defined for the Validator to fetch the list of available dates in the visual calendar, if the validator is attached to the ProInputDate component To this, you will use Ajax, two open source frameworks (the Dojo toolkit and Mabon), and the JSON data-interchange format You’ve worked with Ajax and the Dojo toolkit before, but the following are new: JSON: JSON is a lightweight data-interchange format It is based on a subset of the JavaScript programming language (Standard ECMA-262, Third Edition) JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others Mabon: Mabon is an open source project hosted on the Java.net Web site (http://mabon dev.java.net), and it stands for Managed Bean Object Notation Mabon allows the component author of Ajax-enabled components to access JSF managed beans outside the scope of the standard JSF lifecycle by using a JSON-syntax communication channel In this chapter, you will look at how you can leverage Ajax, Mabon, JSON, and the Dojo toolkit to provide a visual calendar and asynchronously fetch data for the ProInputDate component After reading this chapter, you should have an understanding of the difference between Ajax event and data fetch, as well as what issues you may run into while creating rich user interface components with this technology You should also gain knowledge of an open source project called Mabon and how you can use it to build your own rich Internet components Figure 7-1 shows the three classes you will create in this chapter Figure 7-1 Class diagram showing classes created in this chapter 5807ch07.qxd 1/19/06 7:24 PM Page 269 CHAPTER s AJAX ENABLING THE DATE FIELD COMPONENT The classes are as follows: • The HtmlAjaxInputDateRenderer is the new custom Renderer, which extends the HtmlInputDateRenderer from Chapter and adds resources to include Ajax support • The DateValidator checks to see whether a Date value is available, according to some rules • The ValidateDateTag class represents the custom action that will be used by the application developer to register a DateValidator instance to a ProInputDate component Designing JSF Components Using a Blueprint The blueprint for creating a custom JSF component, from Chapter 3, contained seven steps Those seven steps cover most of the common use cases for designing components However, as you can see in Table 7-1, this chapter adds one more step to the evolving blueprint from the previous chapter—creating converters and validators—making a total of twelve steps Table 7-1 Steps in the Blueprint for Creating a New JSF Component # Steps Description Creating a UI prototype Create the prototype of the UI and intended behavior for your component using appropriate markup Creating events and listeners (Optional) Create custom events and listeners in case your specific needs are not covered by the JSF specification Creating a behavioral superclass (Optional) If the component behavior is not to be found, create a new behavioral superclass (for example, UIShowOne) Creating converters and validators (Optional) Create custom converters and validators in case your specific needs are not covered by the JSF specification Creating a client-specific renderer Create the Renderer you need that will write out the client-side markup for your JSF component Creating a renderer-specific subclass (Optional) Create a renderer-specific subclass Although this is an optional step, it is good practice to implement it Registering a UIComponent and Renderer Register your new UIComponent and Renderer in the faces-config.xml file Creating a JSP tag handler and TLD This step is needed in the case you are using JSP as your default view handler An alternative solution is to use Facelets (http://facelets.dev.java.net/) Creating a RenderKit and ResponseWriter (Optional) If you plan to support alternative markup such as Mozilla XUL, then you need to create a new RenderKit with an associating ResponseWriter The default RenderKit is HTML_BASIC with the contentType set to text/html Continued 269 5807ch07.qxd 270 1/19/06 7:24 PM Page 270 CHAPTER s AJAX ENABLING THE DATE FIELD COMPONENT Table 7-1 Continued # Steps Description 10 Extending the JSF implementation (Optional) This step is needed in the case you have to provide extensions to the JSF implementation (for example, extending JSF factory classes or providing a custom JSF lifecycle implementation) 11 Registering the RenderKit and JSF extension (Optional) Register your custom RenderKit and/or extensions to the JSF implementation 12 Registering resources with weblets (Optional) Register your resources such as images, JavaScript libraries, and CSS files with weblets so that they can be packaged and loaded directly out of the component library JAR file You have done most of the work in Chapter 2, so you only need to extend the ProInputDate component with DHTML/Ajax functionality, and since you don’t need any new behavior, you can start with step 1, skip steps and in the blueprint, and then move on to steps 4, 5, 7, 8, and 12 Step 1: Creating a UI Prototype Back to the blueprint! Let’s create the prototype that will help you find out what elements, renderer-specific attributes, and other resources (for example, images) are needed to create a UI for the date component Figure 7-2 shows the result of the prototype and displays a page with an input field, a button with a calendar icon, and a table representing the pop-up calendar Figure 7-2 ProInputDate implemented in DHTML/Ajax 5807ch07.qxd 1/19/06 7:24 PM Page 271 CHAPTER s AJAX ENABLING THE DATE FIELD COMPONENT Figure 7-2 shows the end result of your prototype implementation As you can see, we have done some work on the ProInputDate component (from Chapter 2) and added a pop-up calendar, which will appear when the button is clicked Dates that are not selectable are marked red, and dates outside the scope of the current month are gray Code Sample 7-1 shows the markup needed to create the prototype DHTML/Ajax date component shown in Figure 7-2 Code Sample 7-1 Input and Button Markup for Calendar Pro JSF: Building Rich Internet Components @import url(projsf-ch7/inputDate.css);