Obsolete Pages{{Obsolete}}
The official documentation is at: http://docs.alfresco.com
Web Client Customization
Introduction
This example builds upon the adding a custom menu item example to give the menu item something to call. A dialog will be defined which will allow the user to select an aspect to add to the space. The extension will then be packaged and deployed. This example is also included as the CustomDialog sample in the SDK.
Creating the action
As mentioned in the introduction we will use the adding a custom menu item example as a starting point.
To prepare the selected space to have the aspect added, we need to add an action listener to the action definition. Our web-client-config-custom.xml will now look as follows:
<config>
<actions>
<action id='add_aspect'>
<label>Add Aspect</label>
<image>/images/icons/add.gif</image>
<action>dialog:addAspect</action>
<action-listener>#{BrowseBean.setupSpaceAction}</action-listener>
<params>
<param name='id'>#{actionContext.id}</param>
</params>
</action>
<action-group id='space_browse_menu'>
<action idref='add_aspect' />
</action-group>
</actions>
</config>
Creating the JSP
The new dialog framework allows us to simply define the part of the JSP page that 'does the work'. In this example we'll create a simple label and a drop down list of aspects for the the user to choose from.
The JSP code to do this (1.4 onwards) is as follows:
<h:outputText value='#{msg.aspect}: ' />
<h:selectOneMenu value='#{DialogManager.bean.aspect}'>
<f:selectItems value='#{RunActionWizard.testableAspects}' />
</h:selectOneMenu>
NOTE: If 1.3 is being used with the sample use the following instead:
<h:selectOneMenu value='#{DialogManager.bean.aspect}'>
<f:selectItems value='#{RunActionWizard.aspects}' />
</h:selectOneMenu>
The first 4 lines simply include the JSF and Alfresco tag libraries. The next line outputs some text, in this example the string to display is coming from webclient.properties (to add custom strings see Adding Custom I18N Strings). The remaining rows produce the list of aspects to display. The list is taken from the configuration for the Action Wizards, thus we reference the RunActionWizard bean. The last thing to mention is 'DialogManager.bean'. This expression refers to bean being used by the current dialog. As an explicit bean is not referenced this page could be re-used in multiple dialogs.
Copy the code above into your favorite editor and save the file as 'add-aspect.jsp'.
Defining the dialog
The next step is to define the dialog that will be launched when the menu item is selected. Add the following XML within the config element in your web-client-config-custom.xml:
<dialogs>
<dialog name='addAspect' page='/jsp/extension/add-aspect.jsp' managed-bean='AddAspectDialog'
icon='/images/icons/add_content_large.gif' title='Add Aspect'
description='Adds an aspect to the selected node' />
</dialogs>
The name attribute defines the id of the dialog used to launch it via the action defined above.
The managed-bean attribute is the name of the backing bean used by the dialog, we will define this in the next step.
The page attribute points to the custom JSP we created in the previous section.
The other attributes are self-explanatory.
Creating and registering the backing bean implementation
The final task is to create and implement the backing bean and registering it with MyFaces.
Create a class called 'AddAspectDialog' in the 'org.alfresco.sample' package and extend it from org.alfresco.web.bean.dialog.BaseDialogBean. For full details on creating dialog beans refer to the Dialog And Wizard Framework Guide.
For our example all we need to do is add the chosen aspect to the current space, this is accomplished in the finishImpl() method. The code we'll need is shown below.
package org.alfresco.sample;
import javax.faces.context.FacesContext;
import org.alfresco.service.cmr.repository.NodeRef;
import org.alfresco.service.namespace.QName;
import org.alfresco.web.bean.dialog.BaseDialogBean;
import org.alfresco.web.bean.repository.Repository;
public class AddAspectDialog extends BaseDialogBean
{
protected String aspect;
protected String finishImpl(FacesContext context, String outcome) throws Exception
{
// get the space the action will apply to
NodeRef nodeRef = this.browseBean.getActionSpace().getNodeRef();
// resolve the fully qualified aspect name
QName aspectToAdd = Repository.resolveToQName(this.aspect);
// add the aspect to the space
getNodeService().addAspect(nodeRef, aspectToAdd, null);
// return the default outcome
return outcome;
}
public boolean getFinishButtonDisabled()
{
return false;
}
public String getAspect()
{
return aspect;
}
public void setAspect(String aspect)
{
this.aspect = aspect;
}
}
Copy the code above into your favorite editor and save the file.
Finally, we need to register the dialog class with MyFaces as a managed bean.
<faces-config>
<managed-bean>
<managed-bean-name>AddAspectDialog</managed-bean-name>
<managed-bean-class>org.alfresco.sample.AddAspectDialog</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
<managed-property>
<property-name>nodeService</property-name>
<value>#{NodeService}</value>
</managed-property>
<managed-property>
<property-name>browseBean</property-name>
<value>#{BrowseBean}</value>
</managed-property>
</managed-bean>
</faces-config>
Copy the XML above into your favorite editor and save the file as 'faces-config.xml'.
Packing and deploying
We now have all the individual pieces, we just need to package and deploy the sample, see the Packaging And Deploying Extensions guide to see how.
Alternatively, you can download the SDK from sourceforge or get the latest code from SVN where you'll find a prepared CustomDialog sample.
Note The recommended approach is to package up extensions as AMP files. Here is the SDK sample repackaged as an AMP file (BROKEN LINK).
