⁠6.4. Components for Advanced Web Application Functionality

Rich components can be used to create an interactive webpage with added options. They provide a visual interface where users can upload files, use a rich editor to create content, and undertake other editing functionalities without needing to input code.
Report a bug

⁠6.4.1. rich:fileUpload

The rich:fileUpload component enables upload of images from a user's machine to the server.
There are a number of options for customizing the fileUpload component:
  • The id parameter defines the name of the action.
  • The acceptedTypes parameter defines which file formats are able to be uploaded. (In this case, only images are allowed.)
  • The maxFilesQuantity attribute defines a maximum number of files that can be uploaded in one attempt.
  • The a4j:ajax is an Ajax component that displays a message indicating when the upload is complete.
⁠

Example 6.11.  rich:fileUpload

This example demonstrates usage of the rich:fileUpload component. 
​<rich:fileUpload fileUploadListener="#{fileUploadBean.listener}" id="upload" acceptedTypes="jpg, gif, png, bmp"
​	ontyperejected="alert('Only JPG, GIF, PNG and BMP files are accepted');" maxFilesQuantity="5">
​	<a4j:ajax event="uploadcomplete" execute="@none" render="info" />
​</rich:fileUpload>
The rich:fileUpload component can be used in conjunction with a file upload table such as that illustrated here.
Report a bug

⁠6.4.2. rich:editor

The rich:editor component creates a text editor where users can create, edit, and save documents for the web. It provides a toolbar, menu items, and a space for the body of the document to be written. It negates the need for a user to know HTML, because what is entered in the editor is what is displayed on the webpage.
There are a number of options for customizing the editor component:
  • The <a4j:attachQueue requestDelay="1000" /> value can be changed to wait a certain number of milliseconds (in this case 1000) before an Ajax update of output panel.
  • The toolbar field can be set as either basic (normal editing features) or full (advanced editing features).
⁠

Example 6.12. rich:editor

This example creates an editor capable of accepting a variety of content including images, hyperlinks, and tables. 
​<rich:editor id="editor" toolbar="full" value="#{editorBean.value}" style="margin-bottom: 1em">
​            <a4j:ajax event="change" render="panel" status="panelUpdateStatus" />
​            <a4j:ajax event="dirty" render="panel" status="panelUpdateStatus">
​                <a4j:attachQueue requestDelay="1000" />
​            </a4j:ajax>
​</rich:editor>
Using the rich:editor component as shown in the above code creates this result:
Report a bug

⁠6.4.3. rich:tabPanel

The rich:togglePanel component creates a panel with clickable tabs to switch between views. Each view can be used for separate information. It is a compact method of allowing users to access different sections of information in one place by clicking on the tab they wish to view.
Different views can be added to the panel:
  • The <rich:togglePanelItem> component is where the information for that particular view is specified.
  • Add and configure a new <rich:togglePanelItem> component for each view.
⁠

Example 6.13. rich:togglePanel

This example creates a panel with two tabs, providing users with the ability to switch between two views. 
​<rich:togglePanel id="panel1" activeItem="item1" render="tabs" itemChangeListener="#{panelMenuBean.updateCurrent}">
​	<rich:togglePanelItem name="item1">
​		<p>This toggle panel switches in Ajax mode. So only one active item loaded to the client.</p>
​ 
​			<p>For now you are at Panel 1</p>
​				</rich:togglePanelItem>
​					<rich:togglePanelItem name="item2">
​						<p>After the second link click - panel changed active item to the second one according to name specified in the togglePanelBehavior</p>
​			<p>For now you are at Panel 2</p>
​	</rich:togglePanelItem>
​</rich:togglePanel>
Using the rich:tabPanel component as shown in the above code creates this result:
Report a bug