Transcript Rich Text Area Component

®
IBM Software Group
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.
© 2006 IBM Corporation
 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:
 Create a new web page, named: richText.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 Area
Respond “Yes” to the question on copying resources to your project
 Add a Submit Button below the Rich Text Area
 Add an Output component in the 2nd row
Last update: 12/04/2007
2
 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 to save
 From Page Data, bind the following EGL variables to the JSF components:
 Drag and drop TextIn on top of the Rich Text Area
 Drag and drop TextOut on top of the Output component
 Set  Render the HTML in the value – property for the output component
 Drag and drop moveStrings() on top of the Submit Button
Last update: 12/04/2007
3
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
Last update: 12/04/2007
4