demetrio.it blog

Some times it can happen you need to re-render a block that includes the RichFaces editor: if the user is using to edit a piece of text, after the re-rendering the caret goes back to the first place so if the user were writing he’d have to manually move it every time it happens.

The solution to this problem (that you can use also for other purposes) is a javascript piece of code found on the TinyMCE forum, adapted for the RichFaces specific case:

<script type="text/javascript">
    function moveCaretToTheEnd(editor_jsf_id) {
        var editor_id = editor_jsf_id + 'TextArea';
        var ed = tinyMCE.getInstanceById(editor_id);
        var root = ed.dom.getRoot();  // This gets the root node of the editor window
        var lastnode = root.childNodes[root.childNodes.length - 1]; 
        if (tinymce.isGecko) {
            // But firefox places the selection outside of that tag, so we need to go one level deeper:
            lastnode = lastnode.childNodes[lastnode.childNodes.length - 1];
        }
        // Now, we select the node
        ed.selection.select(lastnode);
        // And collapse the selection to the end to put the caret there:
        ed.selection.collapse(false);
    }
</script>

The only change I had to do is on the first line of the script as the id of the component we have to pass to get the editor instance is +”TextArea” so I had to compose the id passed to the js function with the “TextArea” string.

To discover the id of the component we can use the built-in RichFaces function rich:clientId in this way (example in a poll component):

<a :poll reRender="currentChatMsgs,recipientList,threadFoldedSection"
        oncomplete="moveCaretToTheEnd('#{rich:clientId('myEditorJsfId')}')"
        enabled="true"/>

Demetrio Filocamo

——

JBoss RichFaces 3.3 (book) – http://www.packtpub.com/jboss-richfaces-3-3

Learn RichFaces step by step developing a sample application.

Hello,
I’ll try to write more on my blog and keep you update about every technique I use and that can be very useful to you as well.

Today I needed to submit a form with an editor element when the user pressed the “return” key (instead of creating a new line).

The code is not so complicate but as the rich:editor uses the TinyMCE component you have to search all around to find the right way. Better to have a complete solution.

It consists on creating an handler onKeyPress and call a javascript function (created by a:jsFunction) to submit our form. Simpler doing then saying it.

Let’s start by including the editor in the standard way (form, editor, submit button):

<h :form>
    <rich :editor value="#{editorBean.myValue}" />
    <a :commandButton value="Send" reRender="something"/>
</h>

I’ve kept it simple (stripped out all the params and attribute I use) to target only our problem.

Let’s define a javascript function handler for our use case:

<script type="text/javascript">
    function returnSubmit(ed) {
        ed.onKeyPress.add(function(ed, e)
        {
            var keyCode = e.keyCode || e.which || e.charCode;
            if (keyCode == 13)
            {
                // My return key handler code here 
            }
        });
    }
</script>

The ed variable will be passed by the editor; let’s configure our new function to the onsetup editor event:

<h :form>
    <rich :editor 
                value="#{editorBean.myValue}" 
                onsetup="returnSubmit(ed)" />
    <a :commandButton value="Send" reRender="something"/>
</h>

Now we have a function that is called for each keyPress event, and inside it we can execute something on “return” key press.

What we have to do is to submit the form, the best way is to create an Ajax javascript function using a:jsFunction: in this way we can do standard Ajax updates also reRendering elements, submitting params and all the thing we are used to

Let’s create the function:

<h :form>
    <rich :editor 
                value="#{editorBean.myValue}" 
                onsetup="returnSubmit(ed)" />
    <a :commandButton value="Send" reRender="something"/>
    <a :jsFunction name="submitForm" reRender="something"/>
</h>

Now we have to insert it into the handler and it’s done!

Here it is the whole code:

<script type="text/javascript">
    function returnSubmit(ed) {
        ed.onKeyPress.add(function(ed, e)
        {
            var keyCode = e.keyCode || e.which || e.charCode;
            if (keyCode == 13)
            {
                // My return key handler code here 
                submitForm();
            }
        });
    }
</script>

<h :form>
    <rich :editor 
                value="#{editorBean.myValue}" 
                onsetup="returnSubmit(ed)" />
    <a :commandButton value="Send" reRender="something"/>
    <a :jsFunction name="submitForm" reRender="something"/>
</h>

Another tip
If with the js function you reRender components, do some action, set some property etc., to avoid duplication of code in the commandButton you can use the same js function into the button using the onclick attribute:

<h :form>
    <rich :editor 
                value="#{editorBean.myValue}" 
                onsetup="returnSubmit(ed)" />
    <a :commandButton value="Send" onclick="submitForm();"/>
    <a :jsFunction name="submitForm"
                  action="#{myBean.myAction}"
                  oncomplete="doSomething();"
                  reRender="first,second">
        <f :setPropertyActionListener value="valueToSet" target="#{myBean.firstValue}"/>
    </a>
</h>

Demetrio Filocamo

——

JBoss RichFaces 3.3 (book) – http://www.packtpub.com/jboss-richfaces-3-3

Learn RichFaces step by step developing a sample application.

An introduction to JBoss RichFaces framework and to the book JBoss RichFaces (Packt) by Demetrio Filocamo.

RichFaces is a very useful open source framework that allows you to add Ajax capability to your JSF application (using the standard JSF components) without the need to write JavaScript code and manage JavaScript compatibility between browsers.

You can read more about the book here: http://www.packtpub.com/jboss-richfaces-3-3

Hi all,
the book I’ve worked on the last months has finally been published!!

JBoss RichFaces is a rich component library for JavaServer Faces and an AJAX framework that allows easy integration of Ajax capabilities into complex business applications. Do you wish to eliminate the time involved in writing JavaScript code and managing JavaScript-compatibility between browsers to build an Ajax web application quickly?

This book goes beyond the documentation to teach you how to do that. It will show you how to get the most out of JBoss RichFaces by explaining the key components and how you can use them to enhance your applications. Most importantly, you will learn how to integrate Ajax into your applications without using JavaScript, but only standard JSF components. You will learn how to create and customize your own components and add them to your new or existing applications.

First, the book introduces you to JBoss RichFaces and its components. It uses many examples of Ajax components which, among others, include: Calendar, Data Table, ToolTip, ToolBar, Menu, RichEditor, and Drag ‘n’ Drop. All these components will help you create the web site you always imagined. Key aspects of the RichFaces framework such as the Ajax framework, skinnability, and Component Development Kit (CDK) will help you customize the look of your web application. As you progress through the book, you will see a sample application that shows you how to build an advanced contact manager. You’re also going to be amazed to know about the advanced topics you will learn such as developing new components, new skins, optimizing a web application, inserting components dynamically using Java instead of XHTML, and using JavaScript to manage components. This book is more than a reference with component example code: it’s a manual that will guide you, step by step, through the development of a real Ajax JSF web application.

What This Book Covers

• Chapter 1: What is RichFaces covers the aims of the RichFaces framework, its components, and what you can do by using it in a web application.
• Chapter 2: Getting Ready explains how to configure your environment by creating a simple project using the seam-gen tool, adding support to Seam and Facelets, and the manual configuration for the RichFaces libraries. We will understand the IDE that we can use while developing with the framework.
• In Chapter 3: First Steps, you will learn to build Ajax applications by developing a simple example, the basics of RichFaces step by step, from creating the project to editing the code, using very important components and their Ajax properties.
• Chapter 4: The Application covers how to create the basics of our project by having a look at the side technologies we might know, in order to build good applications. It will cover templating with Facelets, JBoss Seam authentication, and customization of the entities.
• Chapter 5: Making the Application Structure explains us how to create the login and registration system of the website. We’ll look at all the features that a real application might have.
• In Chapter 6: Making the Contacts List and Detail, we will develop the core feature of our application—contact management. We’ll learn about Ajax interaction and containers, and about new Ajax components that RichFaces offers.
• Chapter 7: Finishing the Application explains how to finish building the application using the RichFaces components, and about customizing them.
• In Chapter 8: Skin Customization, we’ll see all the powerful customization capabilities that the RichFaces framework offers.
• Chapter 9: Creating a New plug ‘n’ skin covers how to create, customize, and package and deploy a new pluggable skin.
• Chapter 10: Advanced Techniques explains you how to use and implement pushing, partial updates, and session expiration handling in order to develop advanced applications.
• In Chapter 11: Component Development Kit, we’ll see how to start a project in order to develop a simple JSF Ajax component in a simple and effective way using the features the CDK offers.
• Appendix: RichFaces Components Overview covers a list of all the components of RichFaces with their functionalities.

Example chapter
You can download a sample chapter, Chapter 8: Skin Customization, by clicking here.

Where to buy it
You can buy JBoss RichFaces 3.3 from the Packt Publishing website.

Free shipping to the US, UK, Europe and selected Asian countries. For more information, please read the Packt Publishing shipping policy.
Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet book retailers.

Thank you!

Demetrio