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.
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
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
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