Sunday, September 20, 2009

Creating a custom WCM form widget in Alfresco using Dojo -- part 1

I'm going to start detailing my steps towards the creation of a new dojo form widget. I have found a number of forum questions around this process, but no answers or hints.

Please feel free to add any comments and suggestions.

***************************************************
Alfresco-based resources:
http://wiki.alfresco.com/wiki/Forms_Authoring_Guide - Details on incorporating widgets into an xsd
http://wiki.alfresco.com/wiki/Creating_XForms_Widgets - Details on creating XForms Widgets

***************************************************
Environment:

Testing on Alfresco Labs 3.2
using the embedded dojo version 0.4.1
Application server: tomcat 6.0.18
OS: Ubuntu 9.04 x64
Linux kernel: 2.6.28-11-server
Using the WCM form created from Dr. Q's Web Form tutorial (http://drquyong.com/myblog/?p=116), the "advanced-press-release" form
***************************************************

Trace example:

I'm starting the process by tracking down exactly what's going on in the ootb code. Tracing the current code will allow us to see what and where things happen.

***************************************************
File: /WEB-INF/classes/alfresco/web-client-config-wcm.xml






.
.
.

The elements contain the references for each of the dojo widgets. Let's pick the Drop-Down List (aka ComboBox or Select List) widget for this example. The widget entry is:



Let's look at the attributes:

"xforms-type" defines a specific Chiba XForm Control **
"javascript-class-name" defines a specific javascript class which is declared and instanciated in

** The xs namespace elements which are used in schema definations are mapped to xf namespace xform elements

references:
http://www.packtpub.com/article/obtaining-alfresco-web-content-management-wcm



***************************************************
File: /scripts/ajax/xforms.js

Using the value from the javascript-class-name element which we found in the previous step, "alfresco.xforms.ComboboxSelect1", we can find the following entry in xforms.js:

alfresco.xforms.ComboboxSelect1 = alfresco.xforms.AbstractSelectWidget.extend({
......
});


***************************************************
Existing JIRA issues regarding this process:

https://issues.alfresco.com/jira/browse/ALFCOM-332 -- states that the ootb xforms.js must be touched instead of having an external overriding copy as would be the usual method of overridding and extending.

No comments:

Post a Comment