1. ® IBM Software Group © 2006 IBM Corporation JSF Rich Text Area Component This Learning Module describes the use of the JSF Rich Text Area component – for allowing users to edit and save “rich text” inside of web pages and forms.

2. 2 Last update: 12/04/2007  Rich Text Area Component  There are quite a few other Enhanced Faces Components to learn about. One of the more interesting is the Rich Text Area, which allows you to put a control on a web page that allows users to create and edit “rich text” text files – that include attributes such as: Color, background color, horizontal rulers, HTML tables, bold, formatting, etc. Let’s create a page that allows us to work with this: richText.jsp  Create a new web page, named: richText.jsp – use a template.  Drag an HTML table into the page. 2 Rows/1 column. Width: 100% Input – Rich Text Area  In the top column drag an Enhanced Faces Component: Input – Rich Text Area Respond “Yes” to the question on copying resources to your project Submit Button  Add a Submit Button below the Rich Text Area  Add an Output component in the 2 nd row

3. 3 Last update: 12/04/2007  Rich Text Area Component – JSFHandler Variables  The concept with Rich Text Area work is that you bind an EGL string variable to the Rich Text Area component.  The contents of this string will be modified by the users work at run-time, and the string can be saved as a CLOB or just a string (if the content is less than 16,000 bytes).  You can save this string in the database, pass it to another page, or just assign it to another variable.  Let’s experiment, using the simple JSFHandler in the Notes section of the slide:  From Notes copy/paste the JSFHandler – and replace all of your JSFHandler boilerplate code  Press Ctrl/S  Press Ctrl/S to save  From Page Data, bind the following EGL variables to the JSF components: TextInRich Text Area  Drag and drop TextIn on top of the Rich Text Area TextOutOutput  Drag and drop TextOut on top of the Output component  Render the HTML in the value  Set  Render the HTML in the value – property for the output component moveStrings()  Drag and drop moveStrings() on top of the Submit Button

4. 4 Last update: 12/04/2007  Rich Text Editor – Run on Server  Run the page on the server.  Try the following:  Add:  Bullets  Tables  Lines  Hyper-links  Color the text or its background  Click Submit, and note what the output control looks like, when assigned the value of the string created by the Rich Text Area