How should I implement this?

[zuzz]

Hello

I would like to create a page that consists of a collection of panels, each of which has an Edit button in the header and a text area below. When the Edit button is pressed, the contents of the text area would be displayed in a popup panel with an editor and two buttons for OK and Cancel.

I have been able to create a panel with the edit button and a popup panel with an editor and it is from this point on that I would like your advice.

If there are multiple panels on the page, how would I get the popup to display the correct text, I have used an action attribute on the commandButton it does cause the popup panel to appear but it does not fire the edit method

{code:xml}
 <rich:panel>
   <f:facet name="header">
     <a4j:commandButton value="Edit" rendered ="true" action="#{blogBean.edit}">
       <rich:componentControl target="mp" operation="show"/>
     </a4j:commandButton>
   </f:facet>
   <h:outputText escape="false" value="#{blogBean.entry}" />
</rich:panel
>
{code}

I was hoping to be able to use the edit method to moved the correct panel's text to the bean attribute that is bound to the editor although I am not sure how to tie it to the text of a specific panel.

The other problem is that although the editor was bound to the blogBean.entry attribute, it was not pre-populated with the value from the bean, however when the save control in the editor toolbar is pressed, the entry is updated and can be displayed.in the panel

{code:xml}
<rich:popupPanel id="mp" minHeight="600" minWidth="450" height="600" width="800"/>

  <f:facet name="header">

    <h:outputText value="Modal Panel Title"/>

  </f:facet>

  <h:form id="blogForm">

    <rich:editor id="editor" toolbar="full" value="#{blogBean.entry}" skin="office2003" viewMode="visual"

                        oninit="setTimeout( function() { tinyMCE.execCommand('mceFocus',false,'blogForm:editorTextArea'); }, 1);"/>

    <h:commandButton value="Cancel"/>

      <rich:componentControl target="mp" operation="hide"/>

    </h:commandButton>

   </h:form>

</rich:popupPanel>

{code}

This is all wrapped in h:body within h:html. The panel is wrapped in a separate h:form

The other problem is when the editor displays, it is not possible to enter any text until the source button has been pressed twice.

Am I going about this the correct way and if so what is wrong with these example.

I am using RF 4.2.2.Final