How to run a Bean method by clicking the rich:Editor’s Save button using Richfaces4?

Asked

Viewed 1,090 times

2

Hello,

I am using Richfaces4 and in my project includes the tag This one features a Save button (Disket) and my intention is to call a method in my Bean and run my code to save. I don’t want to add a new button as I would like to follow the pattern of applications in which my users are most familiar.

I already asked this question in the English version: https://stackoverflow.com/questions/21923187/how-to-custom-the-save-button-on-editor-using-richfaces-4

The code of my Bean and xhtml follow below:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
<http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core" 
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</h:head>
<h:body>


   <h:form>


<rich:editor id="editor" toolbar="full" value="#{editorBean.value}"
    style="margin-bottom: 1em" height="400" >


    <a4j:ajax event="change" render="panel"  status="panelUpdateStatus" />

    <a4j:ajax event="dirty" render="panel" status="panelUpdateStatus">
        <a4j:attachQueue requestDelay="1000" />
    </a4j:ajax>



</rich:editor>

<rich:panel id="panel">
    <f:facet name="header">
        Output from Editor
        <a4j:status name="panelUpdateStatus">
            <f:facet name="start">
                (Updating)
            </f:facet>
        </a4j:status>
    </f:facet>
        <h:outputText escape="false" value="#{editorBean.value}" />

</rich:panel>

Bean

 import javax.enterprise.context.SessionScoped;
 import javax.inject.Named;

  @Named
  @SessionScoped
  public class EditorBean implements Serializable{

/**
 * 
 */
  private static final long serialVersionUID = 5383915229820571701L;


  private String value;

  /** 
  * @return the value
  */
   public String getValue() {
       return value;
   }

  /**
  * @param value the value to set
  */
   public void setValue(String value) {
      this.value = value;
   } 

   public void save(){
       System.out.println(" Saving ");
      //Code to save
   }
}
java jsf

1 answer

1

The Component rich:editor does not trigger any JSF event by clicking the save button (the floppy disk), however it is possible to do the following gambiarra:

  • Add a button a4j:commandButton invisible that fires the method save() of your Editorbean;
  • Capture the event by clicking the editor’s save button and via javascript, trigger the event click() from the invisible button.

Another easier and more elegant alternative is to implement an auto-save, for this solution, just bear in mind a <a4j:ajax event="change" /> inside your editor it will automatically call the method setValue(String value) from your Editorbean, so just modify the logic of this method so that it persists the received value.

Component documentation rich:editor: http://docs.jboss.org/richfaces/nightly_4_2_X/Component_Reference/en-US/html/chap-Component_Reference-Rich_inputs.html#sect-Component_Reference-Rich_inputs-richeditor

Question about how to capture the event on the Ckeditor save button: https://stackoverflow.com/questions/18330796/how-to-capture-click-event-on-save-button-of-ckeditor

Browser other questions tagged java jsf

You are not signed in. Login or sign up in order to post.