myavr.info Laws Practical Richfaces 4 Pdf

PRACTICAL RICHFACES 4 PDF

Monday, August 12, 2019


Listings 8 - 20 wrote this second edition of Practical RichFaces—to raise the level of Even if you have been using RichFaces 4 (or RichFaces 3), this book will. Adding RichFaces libraries into the project. .. Page 4 Read also the quick overview [myavr.info?p=] to "Practical RichFaces " book PDF File" action="#{ddmenu. In this definitive RichFaces 4 book, instead of using JBoss. Digitally watermarked, DRM-free; Included format: PDF; ebooks can be used on all reading devices.


Author:ERASMO MARTHALER
Language:English, Spanish, Portuguese
Country:Malta
Genre:Technology
Pages:522
Published (Last):19.05.2015
ISBN:582-2-60108-940-1
ePub File Size:30.44 MB
PDF File Size:14.33 MB
Distribution:Free* [*Regsitration Required]
Downloads:43609
Uploaded by: DELOISE

ISBN (pbk): ISBN (electronic): Trademarked names, logos, and images may appear in this book. Rather than. For Project Name, enter richfaces-echo. 3. For JSF Environment, select JSF , Facelets, RichFaces. 4. For Template, select one based on the Tomcat version. ISBN ISBN (eBook). Trademarked names, logos, and images may appear in this book. Rather than use a trademark.

On any page where this tag is present, the bean pointed to by the name attribute will be saved when the page is rendered. On the next request from this page , the bean is restored and put into request scope, so all its previous values are available. When you enter the e-mail address and click Continue, the bean will be restored and put back into the request scope, thus preserving the firstName and lastName values.

To enable this component to work only for Ajax-based requests, set the ajaxOnly attribute to true: Other than that, it works just like any other control that sends an Ajax request, meaning it has a reRender attribute, it has action and actionListener attributes, and so on. The function is defined as follows where the name attribute defines the actual function name, in this case, updateStyle. As you can see, you can use reRender attribute as you always do.

Basically, when this function is called, it will send an Ajax request to the server and on return will rerender components pointed by reRender. Now the question is how the parameters are passed. Here is a snippet of a code to invoke the function you defined: The following graphic and code show the complete example. Two parameters are passed: It is invoked within the Render Response phase.

What makes it different from other listeners? Because it is invoked during Render Response, you are always guaranteed it will be invoked. Executing the value change listener or action listener can be affected by validation or other events during the execution of the phases and can also be skipped.

The Ajax listener is always invoked. Another important point is that the Ajax listener is invoked only for an Ajax request.

One place where it can be useful is examining or setting the components to be rerendered. Notice that reRender is bound to an EL expression here: In our example, you need to update components with the IDs id1 and id2: When using these tags, you decide what to process and update.

You are basically in full control. This approach, called a page-wide Ajax approach, gives you a lot of power and flexibility. These components offer the component-wide Ajax approach. These components provide all the necessary func- tionality out of the box for sending, and all the updates are done automatically.

You need both approaches to build sophisticated JSF Ajax-based applications. Another way to look at it is that it provides framework-level or foundation-type controls. In other words, in most cases you decide how to send the Ajax request to the server, and you decide what to update. This kind of approach gives you a lot of power and flexibility. The RichFaces components that are available via the rich: Each component handles sending and updating automatically.

You need both approaches. Having both approaches will give you all the power and flexibility to develop an Ajax-based application using JSF. So far, I have covered the most important a4j: This chapter covers some of the input components available in RichFaces. The input components range from an in-place editor to a spinner to a suggestion box. All components in the rich: Skinnability, covered in more detail in Chapter 11, lets you change the look and feel of the application easily and on the fly.

The chapter uses the ruby skin. Jump forward to Chapter 11 to see what skins are available. Pick anyone you want, and set it in the web. It looks like this: Once the input is entered, the component switches back to label state.

One extra attribute that you are using here is defaultLabel, which sets the label that you can click to start editing the value. If the value to which the component is bound has an initial value, then that value will be displayed instead of the label.

Once the value has been changed, the change in value is indicated by a small red triangle in the top-left corner, as shown here: When done editing, you click anywhere outside the component to save the input.

Keep in mind that nothing is sent to the server. The value has changed only in the browser. You would still click a button or a link to submit the page. There is also an option to add controls to save or cancel the changes. The controls by default appear in the top-right corner.

You can use the controlsHorizontalPosition attribute the possible values are left, right, and center to change the horizontal positioning and the controlsVerticalPosition attribute the possible values are bottom, center, and top to change the vertical positioning.

You have also repositioned the controls by using the controlsVerticalPosition and controlsHorizonalPosition attributes. You can use these events to send an Ajax request to the server when the component state changes. Fired after the component is changed to view state For example: Keep in mind that all the same conver- sion and validation rules apply here as well.

Creating the list of options is rather simple. As input is entered, you want to see states that start with that letter, but not only the name; you also want the capital and state flag.

The user starts entering a value into the input field, and a request is sent to the server where a listener is invoked.

Practical RichFaces – final PDF version uploaded

The listener is being passed the value entered into the input field. The listener then returns suggested values based on the input entered. Paul" ; statesList. You will do that shortly. To start, your page will look like this: The next step is to attach the suggestion box component to this input field.

Basically, as you start typing, you would like to see state information based on the input entered. Next, you need to create the suggestion action that will return values based on input provided. Here is how it looks; it is placed inside the managed bean: Because this is inside a managed bean, you are free to implement any other method of retrieving the suggested values. This action will return suggested states.

Practical RichFaces

The suggestion box component pop-up menu works just like a data table. You have also specified a var attribute to display each record from the collection. Running what you have so far will result in the following: Adding More Columns Because the component works similarly to a data table, you can add columns and display more information in the pop-up menu.

As you can see, the component is very flexible. You can display any type of information in any number of columns. Adding More Features Notice that when a selection is made, the state name is inserted or set into the input field. The state name is inserted by default because it is the first column defined. Suppose instead of the state name, you want to select the capital name.

Rearranging the columns is not a good solution. All you have to do is set the fetchValue attribute to the value to be inserted into the input field: Using fetchValue, you can always select the property to insert. You can use the fetchValue attribute to define any inser- tion value. If the suggestion list is rather large, it might not be efficient to start filtering when only a few characters have been entered. So, to delay the activation, you can set minChars, for example: All standard Ajax optimization attributes are available as well.

If no data is returned from the server, you can display a default message notifying the user that no information was returned by setting the nothingLabel attribute: In other words, it prerenders the list of values. When you start typing, it shows values starting with the entered input: Another option for loading values is to use the suggestedValues attribute, which binds to a collection: You can add a default message by setting the defaultLabel attribute: Another useful attribute is directInputSuggestions; when set to true, the suggestion will appear directly in the input field and be highlighted, as shown here: This is the code: Integer with getter and setter methods.

Of course, the component provides a number of rich features. When set to false, the showInput attribute will hide the input field. When set to false, showToolTip will not display a tooltip when the handle is dragged. One other attribute is cycled. Date with getter and setter methods. Summary This chapter covered some of the most widely used input components. Most input compo- nents from the rich: The components do that automatically.

However, because I covered all the important concepts, using any new RichFaces component should be easy for you. To see all the input components in action, view the online demo: This chapter will cover output components such as panels, tabbed panels, toggle panels, and modal panels.

Be prepared for numerous examples as well as common usages such as how to use a modal panel to display a status message. You can place anything you want inside it, such as text or any other JSF components. The following code: It has been the largest city in the United States since , and was the country's first capital city and the site of George Washington's inauguration as the first president of the United States.

For more than a century, it has been one of the world's major centers of commerce and finance. New York City is rated as an alpha world city for its global influences in media, politics, education, entertainment, arts and fashion. The city is also a major center for foreign affairs, hosting the headquarters of the United Nations.

New York City comprises five boroughs, each of which is coextensive with a county: With over 8. It has been the largest city in the United States since ,. Keep in mind that you can place any other JSF components inside and the component is fully skinnable.

There are three switch types that you can use: This is the default and will produce a full-page refresh. An Ajax request will be sent. All tab content will be prerendered to the client, and no interaction with the server will happen during switching.

Keep in mind that if you place input components inside the panel and use the client switch mode, no form submit will happen. To control whether the component is closed or opened when rendered for the first time, simply set the opened attribute to either true or false: You can use a facet named label to define tab headers out of any number of components.

For example, if you want to include images in the header for each tab, like the following: An Ajax request will be sent during when a new tab is selected. Note that each tab needs to have an ID. A frequent question is, how do you control the selected tab inside the model? Just point selectedTab to an EL expression, and set the desired tab inside the bean, like so: For example, the following code: The changes needed are shown in bold: This means that only components inside the tab will be processed on the server.

When you switch tabs, the form will not be submitted in this case. When a particular panel is selected to be opened, the currently opened panel is closed or collapsed.

Content for each panel is prerendered to the client. Creating a component is rather simple. A panel bar consists of one more panel bar items. To define a header for each panel bar item, a facet with the name of label is used. A facet is useful when you need to customize the label such as to include more than just simple text or images. For example, this includes the city flag: Of course, you can also control which panel bar is opened by binding the attribute to a bean property: Each group in turn can have any menu items or additional groups, and so on.

There is no limit to the depth of the menu that you can create. Here is one example: Each group or menu item has an action or actionListener attribute that allows you to bind to listeners and invoke methods when a particular item or group is selected.

When a mode is specified for a group, all items inside the group inherit the same mode unless you explicitly overwrite a particular menu.

Table describes the mode and expandMode attributes. Specifies the mode for submitting the form when this node is clicked. Specifies the mode for expanding the group. Suppose you want to have a client-expanded menu but submit it via Ajax, like so: If one particular item has to do a full- form submit on the server , you can overwrite the particular item like this: Whenever another group is selected, the currently opened group will be closed.

To disable a particular menu item or group, set the disabled attribute to true, like so: The panel looks like this: Death is peaceful. It's the transition that's troublesome.

In this example, there are four facets with names of quote The panel content will be prerendered to the client. Now, what is the order in which they will be shown? I will show you in a second how you can control the order in which panels are shown, but for now, the order will be as specified in stateOrder.

Once all panels are shown, it will simply continue to cycle based on the stateOrder. In the previous example, the panel with the ID of quote1 will be shown first.

Suppose you want the following panel to be shown first: Notice that you no longer need to use the stateOrder attribute. Even if stateOrder is specified, the state specified in switchToState will take precedence. San Francisco is a popular international tourist destination renowned for its steep rolling hills, an eclectic mix of Victorian and modern architecture, and famous landmarks, including the Golden Gate Bridge, Alcatraz Island, the cable cars, Coit Tower, and Chinatown.

Los Angeles is one of the world's centers of culture, technology, media, business, and international trade. In this example, toolbar contains three command links, but keep in mind that any JSF component can be placed inside the toolbar. Four built-in separators are available: To use a custom separator image, you can use the following: Just remember that a facet can hold only one child. It is also possible to group items on the toolbar when needed.

Suppose you want to group together cities on the West Coast: In the previous example, the group is placed to the right, which produces the following: You can as easily place any JSF component inside the toolbar. For example, the following code places images inside: You can configure the separator to be displayed in five ways: Usually it is used to separate elements of page design. All operations in the main parent application window are locked out while this panel is active.

Opening and Closing the Modal Panel Here is the simplest way to open and close the modal panel: To open it, you use the show function. The basic syntax is shown here, where id is any component ID in other words, server-side ID on the page: With the header, you can now drag the component across the screen.

Adding Header Controls You can also add a control to the header to close the modal panel. It is achieved by adding control facets to the modal panel, like so: The onclick event points to the same function to close the panel. To manage the placement of inserted windows, use the zindex attribute, which is similar to the standard HTML attribute and can specify window placement relative to the content.

To manage window placement relative to the component, the left and top attributes define a window shifting relative to the top-left corner of the window. Modal panels can also support resize and move operations on the client side. To allow or disallow these operations, set the resizeable and moveable attributes to true or false. Window resizing is also limited by the minWidth and minHeight attributes specifying the minimal window sizes. I will cover this component in a later chapter.

More Examples What I have shown you so far is how to open and close modal panels using various methods. Obviously, you want to use a panel for more interesting things such entering input and saving and maybe even building wizardlike behavior. This works fine, but you probably want to display some server-side data, such as data from a managed bean. For the data to be updated every time you open the modal panel, the content has to be rerendered. When the page is rendered for the first time, the time from the server will be rendered on the page.

When the modal panel is opened, the value previously rendered will simply be shown. This way, each time the modal panel is opened, you will get the latest time from the server: Other than that, all the rules for rerendering apply as before.

However, you should have a separate form inside the modal panel if you want to perform submits from this panel. So, the modal panel should not be placed inside any other form if it has its own form. The following code shows an example using a modal panel as a wizard: From the modal panel, you can either close or save the value. If you save the value, the value entered is then rerendered in the main page. One thing to point out is that you need to rerender panelGrid in order to see the updated values in the parent page.

Also notice the separate form inside the modal panel. Once you are done, the oncomplete event will be processed and will close the modal panel.

Provided Dependencies (3)

All the steps are shown here: Here is the starting page: This is what the parent page looks like: You also have to define the navigation rules: Say you have this page: The selected object is then rerendered inside the modal panel. This is no different from selecting the same object and, instead of showing it in a modal panel, displaying the object below the table, for example. Using the Modal Panel to Show Status Another common usage for the modal panel is to show some operation status.

The basic idea is that you click some function and a modal panel is shown. On completion of the operation, the modal panel is hidden. On the request start, you call show on the modal panel. When the request has been completed onstop , you call hide on the modal panel. The most common case would be when you move the mouse over some text or double-click.

The tool tip can contain any other JSF components and content. By default, the tool tip will be displayed when the mouseover event occurs. I will show you later in this chapter how you can specify the event implicitly. I will show an example later in this chapter.

Finally, the loading mode used is ajax. In other words, when the mouse cursor moves over the text, an Ajax request is sent to the server to get the content of the tool tip.

Another option is to use client mode. When using ajax mode, you can display a default message while the tool tip content is being retrieved from the server. This is useful if the operation to get the tool tip content might take a little while. To show the default content, you can use a facet named defaultContent.

Another useful attribute is followMouse. When set to true, the tool tip will follow the mouse as long as it is staying on the text: The other events supported are as follows: A mouse cursor is moved over a particular row, and more information is displayed in the tool tip about that record.

One way is to prerender the content of the tool tip for each row. You are probably wondering how to show the tool tip but not prerender it to the client. As of this writing, such functionality is not yet available. You can think of it as a bug or a feature not yet implemented. As with any RichFaces component, you can customize the look and feel of these components with skins.

Chapter 11 in this book is dedicated to skins and skin customization. To see these and other components in action, go to the RichFaces demo application at http: Of course, RichFaces offers a number of features above what the standard data table component provides, such as skin- nability and partial-table updates.

Basically, the component is bound to a collection and iterates over the collection with the help of the var attribute value. However, when displaying a collection, a table format is not always appropriate. You might want to display a definition list, an ordered list, or an unordered list. Chapter 11 shows how to change skins. To specify the data term, a facet named term is used in this example: While the component still iterates over a collection, just like all other components in this chapter, an additional feature this component provides is the ability to specify the number of columns.

For example, every two records objects will take up one row in the following code: Before you can start using pagination, you need a bigger collection than the previous examples.

Keep in mind that all RichFaces data components are basically extending the standard data table with various advanced features. You can add a data scroller in many ways, but the easiest is to create a table footer and place the scroller there: Make sure you have set the rows attribute in the table. This example also has a selectedStyle so you can easily see which page is currently selected.

In this example, page 2 is selected: The component offers various facets to control how the first, last, next, previous, fastforward, and fastrewind controls and their disabled counterparts look. The following facets are available. You can create a facet for active clickable and inactive not clickable controls. An inactive control is, for example, when you are looking at the last page and the next control is disabled.

Two additional useful attributes exist: All examples I have shown so far placed the scroller inside the table component by using a facet. In such a case, you need to use the for attribute to point to the data table: Performing Partial-Component Data Updates One of the key features that all data iteration components have is the ability to update only specific rows instead of the whole component if data changes.

Here is how the page looks in a web browser. You can click an edit link in each cell, change that particular record, and update only that data cell in the browser. Updating the whole compo- nent is simple, but say you want to be able to update only the particular record you modified.

Its value is set inside the user. With this kind of partial update, you need to specify the columns to be updated as well as the row or rows to update. If you needed to update more than one column, you would add IDs of columns to be rerendered. Next, you have to specify what row to update. You then determine what the index of that object in the list is and add it to rowsToUpdate. There is one more thing to mention.

Descripción del producto

The property bound to ajaxKeys rowsToUpdate in this example has to be in a request-scoped bean or needs to be cleared in code; otherwise, the property will continue to grow and contain previous rows. In this example, you use a request- scoped bean. The User class is rather simple. Luckily, RichFaces provides this functionality.

Basically, you took one record and put it into two rows. Both are the same thing but just with different markup. This means the next column will start in a new row.

When used, the next column will start at a new row. It really comes down to preference in how the markup of the page looks. One unique feature that all data iteration components have is partial-table update, where you can specify which specific row s to update.

The look and feel of all components can be greatly customized via skins, which are covered in Chapter I cover skins in Chapter All the standard rules apply here as well.

For example, if you want to display a custom object, you will need to write a converter. Custom objects require a converter because they are represented as text in the browser. When the page is submitted, the text-based representation has to be converted to a custom object type.

This is exactly what the converter does. It also converts the object to a text-based representation to be shown in a browser when the page is rendered.

The value can be bound to a list, an array of strings, or an array of primitives which is the same as the standard components. On the right side are the values that are currently selected. To customize the labels on the buttons, you can use the following attributes: One thing to keep in mind is that for each control, you need to define two facets: To turn off the labels on the buttons, set the following: Setting the following: Double-clicking works by default otherwise. Besides supporting some of the standard events such as onclick and onchange, the compo- nent also supports onlistchange.

In the following code, every time a fruit is either added to or removed from the list, the fruit salad list is updated: Of course, you can use any other data iter- ation component as well. Keep in mind that when using custom objects, you need to specify a converter to convert the text representation of the object to an actual custom object.

Please see the Developer Guide http: The reorder is happening on the client; however, when the page is submitted, the order on the client will be set into the list property in the managed bean. When using custom objects, the list items values will need to be converted to objects via a custom converter. Keep in mind that values on the page appear as simple strings.

To start using the component, all you need is some sort of collection of objects. Notice the controls on the right. Suppose you want to move the currently selected wonder to the top of the list.

With just a simple click of the First button, you will end up with this: The new order will be sent to the server only if the form is submitted. The page looks like this: The managed bean looks like this: Once the items are selected, use the button to reorder the list.

When the page is displayed for the first time, you can set which items are selected by default via the selection attribute: Set and hold the items to be selected: You can see that two items are now selected when the page is displayed for the first time. The deepMarine skin is now used. You also need to override the equals and hashCode methods on the Wonder bean in order for this to work. To add a caption or label at the top of the list, use the caption facet: To change the labels on buttons, use the following attributes: The control buttons can be positioned on the left side and also aligned vertically: When using a facet, any complex content can be used to create the control.

The most interesting part might be how to use this component when submitting a form. In other words, you can reorder the items in the list and submit the form, and the order you set will be set into the managed bean property. Additionally, the equals and hashCode methods need to be overridden in the Wonder class.

Because the reorder happens only on the client, once you click Submit and rerender the second list, you should see the updated order. And this is how it looks after clicking Submit: The following code defines a converter and the second list: The converter for the Wonder class might look like this: Please refer to the Converter API documentation for more information.

The toString method in Wonder looks like this: You can use Eclipse, for example, to generate these methods: This way, every time the order is changed, an Ajax request will be fired, and the list will be updated accordingly. You can move items from one list to another and also reorder the target right list. You can display as many columns as you need and move the items between the two lists. The moving and reordering are still done on the client.

You will see later that you can as easily submit the selected items. Because you are working with a custom object the Airline object in this example, you need to write a converter to convert from text-based representation to object and override equals and hashCode methods on the custom object.

As you can see, both lists can have a caption above them. The controls to move items from one list to another and reorder the list can be rearranged via component attributes. If you want to completely override the buttons, you can use facets.

Both are bound to a collection list. Although you can use facets to define labels above the lists, you can also use the attributes sourceCaptionLabel and targetCaptionLabel. Select United Airlines and Delta, move them to the right list, and click Update: Select Continental, and move it to the top of the list; then click Update: The first one fires when you move items from one list to another, while the second event fires when reordering the items.

The Developer Guide lists all the other available events such as onclick, oncopyclick, oncopyallclick, and more. To have some airlines selected when the page is displayed for the first time, set the sourceSelection attribute to hold the objects to be selected. One thing to keep in mind is that sourceSelection has to be bound to a Set object. For the target side, the targetSource attribute provides the same functionality.

The selection attribute is also used to hold the selected values when the page is submitted: This results in airlines in the set being selected in the page: When either the source or target lists cannot be empty, these two attributes exist to enforce that requirement.

The targetRequred attribute works the same way but for the right side. Summary In this chapter, I have shown you how to use various selection components in RichFaces. In this chapter as well as in others, you are still using basic RichFaces concepts to send and rerender various parts of the page. As with all other RichFaces components, these components can be greatly customized via component-defined facets and of course skinnability.

Skinnability is covered in Chapter Finally, keep in mind that most components also offer client-side JavaScript. The context menu component will enable you to right-click an element on the page to display a menu. Using skins is covered in Chapter Of course, with every menu item you can associate a particular action or action listener to be invoked via Ajax.

All the standard Ajax concepts apply here as well, such as reRender. The code to create this menu looks rather simple: You use the label facet to define the menu name.

Notice that the submitMode attribute is set to ajax. It has three possible values: Requesting the page will produce the following: Just to demonstrate that a listener is actually called, you can display the menu name selected each time. The changes are rather minor.

First, you need to create the modal panel and place it in another form: For example, adding the following: However, the difference is that you can attach it to any other component as a context menu. For example, you can right-click and show the menu, as shown here: The actual menu is basically identical to the one you built in the previous section. As you can see, you can right-click the text and get a menu to change the text size or color.

Here is how the JSF page looks: Every menu item invokes an action listener that changes either the size or the color. The label is then rerendered. Then you specify which component to attach the menu to; in this case, it is the panel grid.

You can use the event attribute to specify any other events supported by the parent component. For example, using the ondblclick event: UIComponent; import javax. The two other options are to set it to server or none.

In the case of none, no submission will occur. In this example, you submit a request to the server and then rerender the text with the new font size and color. Another alternative is to do the same using JavaScript on the client instead of on the server.

To accomplish this, you first need to set submitMode to none. Then create a JavaScript function to increase and decrease the font size and to change the colors: For example, you click a particular row, and a menu based on what was clicked is shown.

The JSF code for previous table is as follows: The easiest method is to place a context menu in a particular column: You can then use it to create the context menu. You are not setting the attachedTo attribute to point to the ID of the panel grid.

To minimize the amount of markup rendered, the basic idea was to render the menu once outside the data iteration component and then reference it from each row, with the ability to pass parameters if needed. You can basically invoke a JavaScript function on a particular component. Here is the table so far: What this means is that when a row is clicked a regular click in this case , you can invoke some function on a component referenced via the for attribute.

In this case, it is the component with an ID of menu. In this case, it is show, which really corresponds to show on the referenced component. The component with the ID menu is shown next: However, you still want to pass parameters to the menu. If you look closely, you will notice that you have two variables that look almost like EL expressions but are missing the sign.

This is the correct way to do it. You are basically passing a parameter to the context menu because the menu is no longer inside the table. Although before you had to click in a particular column, now you are using the onRowClicked event and so can click in any column.

Sometimes you might need a completely dynamic menu. In other words, the menu is built on the server based on a particular row that was clicked. Here is one example with using a tree component. A tree node is clicked, and based on the node, a menu is built and shown: Then the menu is rerendered.

The listener is shown next: So again, this approach enables you to build on the server a completely dynamic menu based on the node clicked and then show it in the browser. This time, you will use the component to open a modal panel. This is how it works. In this example, it is attached to the component with the ID close, which is an output link with an onclick event. When the output link component is clicked, you want to invoke the operation close on the component with the ID modal.

Keep in mind that the appropriate JavaScript operations need to be defined on the component on which the opera- tion is being invoked. To tie this all together, you probably remember that you used the following: Summary This chapter covered various RichFaces menu components including the popular context menu component. The biggest benefit of this component is that it allows you to represent large tables—possibly with thousands of records, for example—in one table without having to worry about the pagi- nation or the lazy loading of your data.

You need only to limit the table sizes, and it will load only a portion of data that could be shown in the table when rendered. Horizontal and vertical scrolls elements will appear if needed. After any vertical scrolling, data that corresponds to the newly shown scroll position will appear. The size should be restricted because the table will be large. Taking into consideration rows attribute value of 30, anywhere from 1 to 30 rows might be loaded when the vertical scrollbar is used, as shown here: Multiple Rows Selection Another major feature that the table supports out of the box is the ability to select multiple rows via mouse clicks and additional standard keyboard keys Ctrl and Shift keys.

The selection also could be stored using a corresponding value binding and managed in the actions or listeners after a form submit. This is just a client-side selection, but you need to allow the user to select some rows and process this selection on the server. For example, this could be needed for getting the car details. In this simple example, you will use the built-in implementation SimpleSelection, which contains rowKeys of selected rows. You can now add the following code to the bean: Add them to the page right after the table definition: Resizing saves the state of the component between requests.

Additionally, there is a componentState value binding present for this compo- nent. So, after few drag and drops with the resize elements in the header, you get the next repre- sentation of the example: Fixed Columns Imagine that you have numerous columns. But what if you need to see the few first columns at the same time? The developer could define the number of the first columns to be visible even after the table scrolls horizontally.

Look at the previous image again. It will be very useful to have Make and Model columns shown all the time also, so in order to achieve this, just add the frozenColCount attribute to the table definition, and set its value to 2, as shown here: Even though the table was scrolled to the last two columns, the first two columns are still visible.

All the developer needs to define is sortMode which sorts by single column or by multiple columns in order to turn sorting on. So, the table was sorted by model names and price. You did almost nothing to get all this working. One important thing to be aware of, for the sorting to work out of the box, column id must match object property inside the column. But what if you were using, for example, a column consisting of more than one object and wanted to sort this column only by one of these objects?

This is also pretty simple. As with any JSF component, it has to be bound to a model that provides the data for the tree. You can easily create your own data model simply by implementing the TreeNode org.

TreeNode interface, but you can also use a default TreeNodeImpl class out of the box. TreeNode inter- face implementations. You will build your data from a simple properties file, simple-tree-data. And finally, you need to define the tree on the page: Running this page, the following will be displayed: Here I need to mention that the tree works in three modes both for expansion and selection: In the next examples, you will use ajax mode.

Next you will see you how to customize the component. It could be any property with any values. Then you need to define treeNode components in the tree with the type attributes defined according to possible model types. And then just define the markups inside every treeNode. The tree component provides the nodeFaces attribute. You should use it to define the property on the node that stores its type. Now you just use a simple String placed in the treeNodeImpl data.

For the first level nodes it will be "parent" data. As a result, you will get simple text parent nodes and links as child nodes: This attribute allows you to define different icons, styles, connecting lines, and so on. These attributes are also duplicated at the tree node level. The current collection element is accessible via a request-scoped variable called var. First you create the recursiveAdaptorBean that will contain an Array of root nodes: ExternalContext; import javax.

CSS is not going anywhere; you are still going to use it. The basic idea is to provide more abstraction when working with the look and feel. Instead of repeating the same color in the CSS file, you will be able to say that all panel headers or all tab labels will be of this style or all separators will have this color, and so on.

In situations where you need more control and flexibility, you can still use CSS. However, when using skins, by changing just a few parameters, it is possible to alter the appearance of RichFaces components in a synchro- nized fashion without messing up the user interface consistency.

Using Built-in Skins RichFaces comes with a number of built-in skins. You have to do very little in order to use them. These are the out-of-the-box skin that you will find in the richfaces-impl The new skins are packaged into their own JAR files, which means you need to add the JAR files to the application if you want to use them. The three skins are as follows: You should be able to see the difference even on the black-and-white pages of the book.

An even better option is to create a new project and follow the steps throughout this chapter. To start using skins in your application, you need to add the org. SKIN context parameter to the web.

Just take any application you have built and add the following: Restart the server, and you should see the new look and feel. The following shows an example of using the ruby skin. If you want to try another skin, just update the parameter, restart the server, and see how it looks. Here is an example using the laguna skin: Besides the difference in color schema, you should also notice a difference in height of the header and tabs.

This is how the source looks some text was omitted to save space: As you can see, the skin defines fonts, colors for various sections, and parts of the user interface. You will see later in the chapter how you can easily build your own skin. SKIN context parameter in your web.

Yes, it is still plain CSS behind the scenes. Creating Your Own Skins As you can see, several skins are available that you can try, but of course you might want to create your own skins. In fact, you can basically take an existing skin and start making changes until you like how the page is rendered.

We also have the final project release notes for the project available for review. It has extended multiple areas of JSF, including usability, performance tuning, dynamic resources, skinning, and component development. This allows users to take full advantage of all the productivity enhancements of JSF 2.

Advanced queueing to match the high performance requirements of real world applications. Comprehensive documentation covering development best practices, and component details.

Detailed and automated testing facilities for components, actions, listeners, and pages. Our Community In previous blogs I've talk about about how open source communities really thrive on their community.

I've talk about how CR releases can stand for "Community Required" because of how important it is to get that feedback. All I can say is that our community stepped up, and continue to impress! We've seen a huge increase in the feedback, and both veterans and new users giving RichFaces 4 a try and helping us to make it to this point.

There are too many to list out here, but you are all appreciated!! Please check out the candidates from our community and give them a vote!Text is not the only type of value that you can display. The basic idea is that you click some function and a modal panel is shown. After three seconds, a request will be sent. The toString method in Wonder looks like this: Suppose instead of the state name, you want to select the capital name. In other words, the update has to happen only in that row.

DENICE from Maine
I enjoy reading books hourly . Review my other posts. One of my extra-curricular activities is tchoukball.