maandag 9 mei 2011

PrimeFaces inplace wrapped around editor

In Primefaces, there is a <p:inplace> component, which is a nice component to use for inline editing,
and a <p:editor>, which is an input component with rich text formatting capabilities.


But the two didn't really match. If one uses a <p:inplace> wrapped around a <p:editor>, the editor does not work as it is supposed to. The problem is that the editor is not designed to work in a container which is initially hidden. And that's just the behavior you depend on when you want to use an inplace component.


However, with this little trick, you can use an inplace component wrapped around an editor. The editor has a 'lazy' property. If you set this to true, you can initialize the editor at the moment it is shown:

  <h:form id="formWithInplace">
    <p:inplace id="inplaceid">
      <p:editor value="#{editorBean.value}" saveListener="#{editorBean.save}"
                                lazy="true" widgetVar="editorWidget"/>
    </p:inplace>

  </h:form>

So now we have an inplace wrapped around a lazy editor. The only thing we have to do now, is initialize the editor when the inplace is clicked (and the editor is shown). As the inplace does not have an 'onclick' parameter, we will use jQuery and the id of the inplace component:


  <script type="text/javascript">
    jQuery(PrimeFaces.escapeClientId('formWithInplace:inplaceid')).click(
      function(){
        editorWidget.init();
      }
    );
  </script>


1 opmerking:

  1. When cash appeared from his occasional wins, he claimed that he had been doing some on-line trading. Advanced technologies in mobile phones have resulted in extraordinary gaming visuals in smartphones that have resulted in increased access to on-line playing by way of mobile phones. Additionally, playing may be accomplished by way of mobile phones, making 룰렛 it handy for gamblers. The simple availability of mobile phones at inexpensive costs and superior features corresponding to improved graphics and extended storage capacity contribute to the segment development.

    BeantwoordenVerwijderen