Lost In China on New York Times by Matt Gross

With school finally finishing another term, I began to have a few time to spare to catch upon my readings.  I would like to share this interesting article that I stumbled across on New York Times. 
http://travel.nytimes.com/2010/12/26/travel/26chongqing.html?pagewanted=1

Chengdu is a place on my travel list.  Even though I have roots in China, when I was young, my familiarities with China's geography was limited to big cities like Beijing and Shanghai.  Yunan being a province next to my country and being crossed the border town of Shwe Li into Kung Ming, that was the farthest I have been in China.  I learned about Chengdu through my college friends who boasted Chengdu as having the best cuisines ever.  And I would like to be there to test their statements.

Using Richfaces Editor

This time, I want to write about Richfaces's <rich:edtor>. The good thing about it is that it's based on TinyMCE's WYSIWYG editor like the ones on blogspot.com, which allows formatted text. Now, I needed to use it because I want to have this functionality where users can enter formatted text and the exact formatting will get displayed, just like with this blogging. Richfaces has a good example here

The main thing here is :

<rich:editor configuration="#{editorBean.currentConfiguration}"
id="editor" width="400" height="300" validator="#{editorBean.validate}"
viewMode="#{editorBean.viewMode}" value="#{editorBean.value}" useSeamText="#{editorBean.useSeamText}">
<a4j:support event="onchange" reRender="result" ajaxSingle="true"
requestDelay="1000"
onsubmit="if (!#{rich:element('form:editorvalue')} && !#{editorBean.useSeamText}) return false;" />
rich:editor>

In my project, I don't need to use a lot of those attributes. What I used was configuration, value and viewMode. I also definitely don't want to use ajax support because doing so will reRender the editor everytime. I need to use advanced setting since I want to allow users to do formatting but I need to limit the format options. It turns out that if you use the default advanced setting, it'll give you 3 format bars. I need to change that as well. The following code describes how I achieved those settings. As you see, it's not complicated at all.

<rich:editor theme="advanced" configuration="rich.editor" value="#{note.instruction}" width="1000" height="200">
      <f:param name="theme_advanced_buttons1"
              value="bold,italic,underline, cut,copy,paste,pasteword,link,unlink,bullist, numlist" />
        <f:param name="theme_advanced_buttons2" value="" />
        <f:param name="theme_advanced_buttons3" value="" />
        <f:param name="theme_advanced_toolbar_location" value="top" />
         <f:param name="theme_advanced_toolbar_align" value="center" >
</rich:editor>

My current format options are limited to a few formatting. If you want to add more, you can add it.  The list of button controls are documented here 





The data are saved in the database with all the formatted tags.  If you display using regular <h:outputText>, it will display all the formatted tags since that's how it's being stored.  In order to display formatted text, you will need to set "noEscpate" attribute of <h:outputText> to "true"