®

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.

2Last update: 12/04/2007

Rich Text Area Component

There are quite a few other Enhanced Faces Components to learn about. One of the moreinteresting is the Rich Text Area, which allows you to put a control on a web page that allowsusers to create and edit “rich text” text files – that include attributes such as: Color, backgroundcolor, horizontal rulers, HTML tables, bold, formatting, etc. Let’s create a page that allows us towork with this:

Create a new web page, named: richText.jsprichText.jsp – use a template.

Drag an HTML table into the page. 2 Rows/1 column. Width: 100%

In the top column drag an Enhanced Faces Component: Input – Rich Text AreaInput – Rich Text AreaRespond “Yes” to the question on copying resources to your project

Add a Submit ButtonSubmit Button below the Rich Text Area

Add an Output component in the 2nd row

3Last 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/SPress Ctrl/S to save

From Page Data, bind the following EGL variables to the JSF components: Drag and drop TextInTextIn on top of the Rich Text AreaRich Text Area Drag and drop TextOutTextOut on top of the OutputOutput component Set Render the HTML in the value Render the HTML in the value – property for the output component

Drag and drop moveStrings()moveStrings() on top of the Submit Button

4Last 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