How to execute a Bean method when clicking on the Save button of the rich: Editor using RichFaces4?

2

Hello,

I'm using RichFaces4 and my project includes the tag This presents a Save (Disket) button and my intention is to call a method on my Bean and run my code to save.    I do not want to add a new button because I would like to follow the pattern of the applications that my users are most familiar with.

I already asked this question in the English version:

The code for 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
   }
}
    
asked by anonymous 21.02.2014 / 21:23

1 answer

1

The component rich:editor does not trigger any JSF events by clicking the save button, however, you can do the following trick:

  • Add an invisible%% button that triggers the a4j:commandButton method of your EditorBean;
  • Capture the click event on the editor's save button and via javascript, trigger the invisible button's click event.

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

Component documentation setValue(String value) : link

Question about capturing the event on the CKEditor save button: link

    
22.02.2014 / 00:25