Adding an Editor Guide
From AlfrescoWiki
[edit] 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.
[edit] 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/
[edit] 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:
<%--
Copyright (C) 2005 Alfresco, Inc.
Licensed under the Mozilla Public License version 1.1
with a permitted attribution clause. You may obtain a
copy of the License at
http://www.alfresco.org/legal/license.txt
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
either express or implied. See the License for the specific
language governing permissions and limitations under the
License.
--%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/WEB-INF/alfresco.tld" prefix="a" %>
<%@ taglib uri="/WEB-INF/repo.tld" prefix="r" %>
<%@ page buffer="32kb" contentType="text/html;charset=UTF-8" %>
<%@ page isELIgnored="false" %>
<%@ page import="org.alfresco.web.ui.common.PanelGenerator" %>
<r:page titleId="title_edit_html_inline">
<f:view>
<%-- load a bundle of properties with I18N strings --%>
<f:loadBundle basename="alfresco.messages.webclient" var="msg"/>
<h:form acceptCharset="UTF-8" id="edit-file">
<%-- Main outer table --%>
<table cellspacing="0" cellpadding="2">
<%-- Title bar --%>
<tr>
<td colspan="2">
<%@ include file="../parts/titlebar.jsp" %>
</td>
</tr>
<%-- Main area --%>
<tr valign="top">
<%-- Shelf --%>
<td>
<%@ include file="../parts/shelf.jsp" %>
</td>
<%-- Work Area --%>
<td width="100%">
<table cellspacing="0" cellpadding="0" width="100%">
<%-- Breadcrumb --%>
<%@ include file="../parts/breadcrumb.jsp" %>
<%-- Status and Actions --%>
<tr>
<td style="background-image: url(<%=request.getContextPath()%>/images/parts/statuspanel_4.gif)" width="4"></td>
<td bgcolor="#EEEEEE">
<%-- Status and Actions inner contents table --%>
<%-- Generally this consists of an icon, textual summary and actions for the current object --%>
<table cellspacing="4" cellpadding="0" width="100%">
<tr valign="top">
<td width="32">
<h:graphicImage id="wizard-logo" url="/images/icons/edit_large.gif" />
</td>
<td>
<div class="mainSubTitle"><h:outputText value="#{NavigationBean.nodeProperties.name}" /></div>
<div class="mainTitle">'<h:outputText value="#{CheckinCheckoutBean.document.name}" />'</div>
<div class="mainSubText"><h:outputText value="#{msg.editfileinline_description}" /></div>
</td>
</tr>
</table>
</td>
<td style="background-image: url(<%=request.getContextPath()%>/images/parts/statuspanel_6.gif)" width="4"></td>
</tr>
<%-- separator row with gradient shadow --%>
<tr>
<td><img src="<%=request.getContextPath()%>/images/parts/statuspanel_7.gif" width="4" height="9"></td>
<td style="background-image: url(<%=request.getContextPath()%>/images/parts/statuspanel_8.gif)"></td>
<td><img src="<%=request.getContextPath()%>/images/parts/statuspanel_9.gif" width="4" height="9"></td>
</tr>
<%-- Details --%>
<tr valign=top>
<td style="background-image: url(<%=request.getContextPath()%>/images/parts/whitepanel_4.gif)" width="4"></td>
<td height="100%">
<table cellspacing="0" cellpadding="3" border="0" width="100%">
<tr>
<td width="100%" valign="top">
<%-- Hide the checkout info if this document is already checked out --%>
<a:panel id="checkout-panel" rendered="#{CheckinCheckoutBean.document.properties.workingCopy == false}">
<% PanelGenerator.generatePanelStart(out, request.getContextPath(), "yellowInner", "#ffffcc"); %>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td valign=top style="padding-top:2px" width=20><h:graphicImage url="/images/icons/info_icon.gif" width="16" height="16"/></td>
<td><td class="mainSubText">
<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}" />
<br>
<h:outputText value="#{msg.checkout_warn}" />
</td>
</td>
</tr>
</table>
<% PanelGenerator.generatePanelEnd(out, request.getContextPath(), "yellowInner"); %>
</a:panel>
</td>
<td valign="top" rowspan=2>
<% PanelGenerator.generatePanelStart(out, request.getContextPath(), "blue", "#D3E6FE"); %>
<table cellpadding="1" cellspacing="1" border="0">
<tr>
<td align="center">
<h:commandButton value="#{msg.save}" action="#{CheckinCheckoutBean.editInlineOK}" styleClass="dialogControls" />
</td>
</tr>
<tr><td class="dialogButtonSpacing"></td></tr>
<tr>
<td align="center">
<h:commandButton value="#{msg.cancel}" action="browse" styleClass="dialogControls" />
</td>
</tr>
</table>
<% PanelGenerator.generatePanelEnd(out, request.getContextPath(), "blue"); %>
</td>
</tr>
<%-- ///////////////////////////////////////////// --%>
<%-- --%>
<%-- inline editor BEGINS here --%>
<%-- --%>
<%-- ///////////////////////////////////////////// --%>
<%-- ///////////////////////////////////////////// --%>
<%-- --%>
<%-- inline editor ENDS here --%>
<%-- --%>
<%-- ///////////////////////////////////////////// --%>
</table>
</td>
<td style="background-image: url(<%=request.getContextPath()%>/images/parts/whitepanel_6.gif)" width="4"></td>
</tr>
<%-- Error Messages --%>
<tr valign="top">
<td style="background-image: url(<%=request.getContextPath()%>/images/parts/whitepanel_4.gif)" width="4"></td>
<td>
<%-- messages tag to show messages not handled by other specific message tags --%>
<h:messages globalOnly="true" styleClass="errorMessage" layout="table" />
</td>
<td style="background-image: url(<%=request.getContextPath()%>/images/parts/whitepanel_6.gif)" width="4"></td>
</tr>
<%-- separator row with bottom panel graphics --%>
<tr>
<td><img src="<%=request.getContextPath()%>/images/parts/whitepanel_7.gif" width="4" height="4"></td>
<td width="100%" align="center" style="background-image: url(<%=request.getContextPath()%>/images/parts/whitepanel_8.gif)"></td>
<td><img src="<%=request.getContextPath()%>/images/parts/whitepanel_9.gif" width="4" height="4"></td>
</tr>
</table>
</td>
</tr>
</table>
</h:form>
</f:view>
</r:page>
