What You May Need to Know About Using a Client Listener for Selection Events

Using Input Components and Defining Forms 9-31 ■ Undoredo ■ Bolditalicsunderline ■ Subscriptsuperscript ■ Justify left, middle, right, full ■ Orderedunordered lists ■ Indentation ■ Text colorbackground color ■ Rich text editing modesource code editing mode The value entered text of the rich text editor is a well-formed XHTML fragment. Parts of the value may be altered for browser-specific requirements to allow the value to be formatted. Also, for security reasons, some features such as script-related tags and attributes will be removed. There are no guarantees that this component records only the minimal changes made by the user. Because the editor is editing an XHTML document, the following elements may be changed: ■ Nonmeaningful whitespace ■ Element minimization ■ Element types ■ Order of attributes ■ Use of character entities The editor supports only HTML 4 tags, with the exception of: ■ Script, noscript ■ Frame, frameset, noframes ■ Form-related elements input, select, optgroup, option, textarea, form, button, label, isindex ■ Document-related elements html, head, body, meta, title, base, link The richTextEditor component also supports tags that pull in content such as applet, iframe, object, img, and a. For the iframe tag, the content should not be able to interact with the rest of the page because browsers allow interactions only with content from the same domain. However, this portion of the page is not under the control of the application. While the richTextEditor component does not support font units such as px and em, it does support font size from 1 to 7 as described in the HTML specification. It does not support embed or unknown tags such as foo. On the client, the richTextEditor component does not support getValue and setValue methods. There is no guarantee the component’s value on the client is the same as the value on the server. Therefore, the richTextEditor does not support client-side converters and validators. Server-side converters and validators will still work. The rich text editor delivers ValueChangeEvent and AttributeChangeEvent events. Create valueChangeListener and attributeChangeListener handlers for these events as required. You can also configure the richTextEditorInsertBehavior tag, which works with command components to insert given text into the richTextEditor 9-32 Web User Interface Developers Guide for Oracle Application Development Framework component. The text to be entered can be a simple string, or it can be preformatted text held, for example, in a managed bean. By default, the toolbar in the richTextEditor component allows the user to change many aspects of the text, such as the font, font size and weight, text alignment, and view mode, as shown in Figure 9–32 . Figure 9–32 Toolbar in richTextEditor Component Figure 9–33 shows a toolbar that has been customized. Many of the toolbar buttons have been removed and a toolbar with a custom toolbar button and a menu have been added. Figure 9–33 Customized Toolbar for richTextEditor

9.8.1 How to Add a richTextEditor Component

Once you add a richTextEditor component, you can configure it so that text can be inserted at a specific place, and you can also customize the toolbar. For more information, see Section 9.8.2, How to Add the Ability to Insert Text into a richTextEditor Component, and Section 9.8.3, How to Customize the Toolbar. To add a richTextEditor component: 1. In the Component Palette, from the Common Components panel, drag and drop a Rich Text Editor onto the page. 2. Expand the Common section of the Property Inspector and set the value attribute. 3. Expand the Appearance section and set the following: ■ Rows : Specify the height of the edit window as an approximate number of characters shown. ■ Columns : Specify the width of the edit window as an approximate number of characters shown. ■ Label : Specify a label for the component. 4. Expand the Behavior section and set the following: ■ EditMode : Select whether you want the editor to be displayed using the WYSIWYG or source mode. ■ ContentDelivery : Specify whether or not the data within the editor should be fetched when the component is rendered initially. When the contentDelivery attribute value is immediate, data is fetched and displayed in the component when it is rendered. If the value is set to lazy, data will be fetched and delivered to the client during a subsequent request. For more information, see Section 10.1.1, Content Delivery. Using Input Components and Defining Forms 9-33

9.8.2 How to Add the Ability to Insert Text into a richTextEditor Component

To allow text to be inserted into a richTextEditor component, add the richTextEditorInsertBehavior tag as a child to a command component that will be used to insert the text. Before you begin You need to create a richTextEditor component as described in Section 9.3.1, How to Add an inputText Component. Set the clientComponent attribute to true. To add text insert behavior: 1. Add a command component that the user will click to insert the text. For procedures, see Section 18.2.1, How to Use Command Buttons and Command Links.

2. In the Component Palette, from the Operations panel, drag and drop a Rich Text

Editor Insert Behavior as a child to the command component.

3. In the Rich Text Editor Insert Behavior dialog, enter the following:

■ For : Use the dropdown arrow to select Edit and then navigate to select the richTextEditor component into which the text will be inserted. ■ Value : Enter the value for the text to be inserted. If you want to insert static text, then enter that text. If you want the user to be able to insert the value of another component for example, the value of a selectOneChoice component, then enter an EL expression that resolves to that value. If you want the user to enter preformatted text, enter an EL expression that resolves to that text. For example Example 9–8 shows preformatted text as the value for an attribute in the demoInput managed bean. Example 9–8 Preformatted Text in a Managed Bean private static final String _RICH_INSERT_VALUE = p align=\center\ style=\border: 1px solid gray; margin: 5px; padding: 5px;\ + font size=\4\span style=\font-family: Comic Sans MS, Comic Sans,cursive;\Store Hoursspanfontbr\n + font size=\1\Monday through Friday til 8:00 pmfontbr\n + font size=\1\Saturday amp; Sunday til 5:00 pmfont + p; Example 9–9 shows how the text is referenced from the richTextEditorInsertBehavior tag. Example 9–9 Using the richTextEditorInsertBehavior Tag af:richTextEditor id=idRichTextEditor label=Rich text value value={demoInput.richValue2} . . . Tip: You can set the width of a richTextEditor component to full width or 100. However, this works reliably only if the editor is contained in a geometry-managing parent components. It may not work reliably if it is placed in flowing layout containers such as panelFormLayout or panelGroupLayout. For more information, see Section 8.2.1, Geometry Management and Component Stretching.