Adding an Editor Guide

[resplin]

Obsolete Pages{{Obsolete}}

The official documentation is at: http://docs.alfresco.com

Web Client Customization

Inline Editors

In line editors for different document types help make the alfresco web client more useful. Alfresco ships with a inline HTML editor.  What it means to be 'inline' is as follows.  You can edit the document directly within (or in line with) the alfresco web client.

Another example of an inline editor is and XML editor which presents the user with a UI, hiding the complexity and technical aspects of XML. 

About the Example

This guide is a tutorial for adding editors to the web client.  As an example we will add the editLiveForXml editor to the Alfresco webclient.

editLiveForXml is a commercial applet. The applet can be downloaded at http://www.ephox.com/product/editliveforxml/default.asp

This tutorial is in no way connected with Ephox or is it suggesting that you should or should not use the Ephox EditLive for XML product.  The editor is available for download, largely comprehensive, and thus is suitable as an example.

A beta of an integration of EditLive (XHTML version) that is supported by Ephox can now be found at http://liveworks.ephox.com/integrations/alfresco/

Step One: Putting the UI in place

Step one is the easiest step.  We need to build the view portion of the application.  In our case the view is an applet and so our view is just a wrapper around it.

Create a jsp under source\web\jsp\dialog\

Name the file edit-wellformed-xml-inline.jsp

paste the following in to the file:

---

<r:page titleId='title_edit_html_inline'>



<f:view>

   <f:loadBundle basename='alfresco.messages.webclient' var='msg'/>

   <h:form acceptCharset='UTF-8' id='edit-file'>

   

      
         
      

      
         

         

               <tr>
                  <td></td>
                  </td>
                  <td></td>
               </tr>

               <tr valign=top>
                  </td>
                  <td height='100%'>
                     

            

            

            
               
                  </td>
                  <td bgcolor='#EEEEEE'>

                     
                        
                           
                           
                        
                     

                              <h:graphicImage id='wizard-logo' url='/images/icons/edit_large.gif' />
                           

                              
<h:outputText value='#{NavigationBean.nodeProperties.name}' />
                              
'<h:outputText value='#{CheckinCheckoutBean.document.name}' />'
                              
<h:outputText value='#{msg.editfileinline_description}' />
                           

                  </td>
                  </td>
               
                        
                           

                           
                        

                        

                              <a:panel id='checkout-panel' rendered='#{CheckinCheckoutBean.document.properties.workingCopy == false}'>
                                 
                                    
                                       
                                       
                                       
                                    
                                 
<h:graphicImage url='/images/icons/info_icon.gif' width='16' height='16'/>

                                             <h:outputText value='#{msg.you_may_want}' />
                                             <a:actionLink value='#{msg.checkout_document}' actionListener='#{CheckinCheckoutBean.setupContentAction}' action='checkoutFile'>
                                                <f:param name='id' value='#{CheckinCheckoutBean.document.id}' />
                                             </a:actionLink>
                                             <h:outputText value='#{msg.checkout_want_to}' />
                                             

                                             <h:outputText value='#{msg.checkout_warn}' />
                                          
                                 </a:panel>
                           

                              
                                 
                                    
                                 
                                 
                                 
                                    
                                 
                              

                                       <h:commandButton value='#{msg.save}' action='#{CheckinCheckoutBean.editInlineOK}' styleClass='dialogControls' />
                                    

                                       <h:commandButton value='#{msg.cancel}' action='browse' styleClass='dialogControls' />
                                    
                              
                  </td>
                  </td>
               </tr>

               <tr valign='top'>
                  </td>
                  <td>
                     <h:messages globalOnly='true' styleClass='errorMessage' layout='table' />
                  </td>
                  </td>
               </tr>

               <tr>
                  <td></td>
                  </td>
                  <td></td>
               </tr>

            </table>
          </td>
       </tr>
    </table>

    </h:form>

</f:view>

</r:page>
</pre>