We have almost finished our application! In this chapter, we are going to develop a side feature that would be very useful for us to learn how to use other RichFaces components in a real world application.
We are going to see many cool features that we can reuse in our application with few changes.
For every contact we have in our Address Book, we want to be able to add a short note about them. This can be very useful in a lot of scenarios and it's really easy to implement!
We are going to use the rich:editor
component of the RichFaces framework. It creates a WYSIWYG editor based on the TinyMCE JavaScript (http://tinymce.moxiecode.com). This component is very easy to use, but at the same time can be completely customized and extended using the TinyMCE plugins.
In order to connect the editor to the note
property of the Contact
entity, let's just open the /view/main/contactEdit.xhtml
file and insert the following code, just between the closing</a:region>
and</rich:graphValidator>
tags, before the bottom rich:toolBar:
<rich:spacer height="10"/> <rich:separator width="320px"/> <rich:spacer height="15"/> <h:outputText value="#{messages['note']}"/> <rich:editor value="#{homeSelectedContactHelper.selectedContact.note}" width="320" height="150"/>
The first part is just to create a separator and the label, the most important part is the highlighted one we've just bound the rich:editor
to the note
property, and defined two attributes (width
and height)
to control the dimension of the edit area.
By default, the editor theme used is the simple
one, so we have a limited set of control into the button bar, let's try to set the advanced
theme, this way:
<rich:editor value="#{homeSelectedContactHelper.selectedContact.note}"
theme="advanced" width="320" height="150"/>
The result is:
Customization capabilities are not limited to just setting the theme, we can also decide to add more buttons (from external plug-ins for example) or to change the disposition.
In the next sample code, we are going to show the basis of customization, adding the paste plugin and relative buttons, and setting the toolbar's position to the top side:
<rich:editor value="#{homeSelectedContactHelper.selectedContact.note} width="320" height="150" theme="advanced" plugins="paste">
<f:param name="theme_advanced_buttons1" value="cut,copy,paste, pasteword,|,bold,italic,underline"/>
<f:param name="theme_advanced_toolbar_location" value="top"/>
<f:param name="theme_advanced_toolbar_align" value="left"/>
</rich:editor>
This is the result:
Notice that the toolbars are now on the top and the first one has a different button as we decided (paste
and pasteword
buttons come from the paste
plugin we add).
Using the f:param
tag, you can configure every TinyMCE option (read the TinyMCE documentation for more information) as we've seen the option goes inside the name
attribute and the option value goes into the value
attribute.
18.223.206.225