Forms Development Kit
From AlfrescoWiki
NOTE: This document details the Forms Development Kit for the forthcoming 3.4 Release.
You may also be interested in:
- Forms Development Kit Guide for the 3.3 Release
- The Forms Developer Guide
- Configuration of the Forms Engine
Contents |
[edit] Introduction
Welcome to the Alfresco Forms Development Kit (FDK).
The Alfresco FDK was introduced in the 3.3 release, it provides support for administrators and developers who wish to configure, extend or customize forms in Spring Surf based applications, for example, Share.
[edit] Getting Started
[edit] Installing the AMP
The AMP (alfresco-fdk.amp) can be installed into the alfresco.war file using the normal techniques, either with the Module Management Tool or using the apply_amps script provided with the installer.
[edit] Installing the JAR
Presuming the Tomcat instance you are using has been configured to use the shared folder you can simply drop the JAR file (alfresco-fdk.jar) into <tomcat>/shared/lib.
You can of course drop the JAR file into the application's WEB-INF/lib folder too i.e. <tomcat>/webapps/<appname>/WEB-INF/lib but this will be removed when you update or upgrade your application so the technique above is recommended.
If you are installing the FDK into an older Spring Surf application that does not contain the required import statement the fdk-context.xml file can be manually added to your application using the following import:
<import resource="classpath:alfresco/fdk-context.xml"/>
[edit] Building the FDK
If you are building Alfresco from source using a development environment you may wish to also build and deploy the FDK.
The main Ant build.xml file provides several targets to allow for this.
- incremental-fdk
- Builds the repository and client FDK files
- install-fdk-amp
- Builds the FDK AMP and installs it in the repository WAR file, the "deploy-webclient-tomcat" needs to be called subsequently to deploy the WAR file to Tomcat
- deploy-repo-fdk-exploded
- Deploys the FDK repository files to Tomcat in exploded mode
- deploy-share-fdk
- Builds the FDK client JAR and deploys it to Share
- deploy-share-fdk-exploded
- Deploys the FDK client files to Share in exploded mode
[edit] Using the FDK
The AMP installs an example model and the JAR provides a "Form Console" page, form configuration for the example model and some Share specific configuration overrides.
The "Change Type" action in Share will now have three options (for cm:content nodes), "Gadget", "Company Details" and "Everything". The "Apply Aspect" action in Share will now have an "Exif" aspect available.
The FDK also provides an extension point (alfresco/web-extension/fdk-config-custom.xml) so that further form configuration can be provided and tested via the form console page.
[edit] Form Console
If you've worked with forms in the 3.2 release you may recognize the Form Console as the old form-test page available in Share. It has now been renamed and moved to the FDK so it can be used in any Spring Surf based application.
The "Form Console" page can be accessed via the following URL:http://<host>:<port>/<app>/page/form-consolefor example: http://localhost:8080/share/page/form-console if you are using a default installed Alfresco instance.
All the unit tests added to the FDK in this release make use of the Form Console, the screenshot below shows the Form Console displaying the "nested-sets" form configuration.
All the unit test form configurations are supplied in a file named "fdk-unit-tests-config.xml", this can be a useful source of examples. The "fdk-config-custom.xml" file mentioned above can be used to define more forms for further testing.
[edit] Examples
In it's current state the FDK provides a demonstration of what can be done with some of the features of the forms engine, all the samples previously distributed with Share have been moved into the FDK and made available in an easy to install package, this includes most the examples from Episode 35 of Tech Talk Live where the forms engine was discussed and demonstrated.
The following sections show a few screenshots and configuration of the example forms.
[edit] Gadget Type
When an instance of the "Gadget" (fdk:gagdet) type is created and it's metadata edited the following form is displayed.
The configuration required to achieve this is shown below.
<config evaluator="node-type" condition="fdk:gadget">
<forms>
<form>
<edit-form template="/fdk/templates/tab-edit-form.ftl" />
<field-visibility>
<show id="cm:name" />
<show id="cm:description" />
<show id="fdk:make" />
<show id="fdk:model" />
<show id="fdk:summary" />
<show id="fdk:type" />
<show id="fdk:subType" />
<show id="fdk:rrp" />
<show id="fdk:releaseDate" />
<show id="fdk:endOfLifeDate" />
<show id="fdk:retailers" />
<show id="fdk:rating" />
<show id="fdk:contact" />
<show id="fdk:reviews" />
<show id="fdk:company" />
<show id="fdk:pressRelease" />
<show id="fdk:images" />
<!-- exif aspect data, if applied -->
<show id="fdk:manufacturer" />
<show id="fdk:software" />
<show id="fdk:originalDateTime" />
<show id="fdk:compression" />
<show id="fdk:xResolution" />
<show id="fdk:yResolution" />
<show id="fdk:resolutionUnit" />
<show id="fdk:flash" />
</field-visibility>
<appearance>
<set id="" label-id="fdk.tab.label.details" />
<set id="press" label-id="fdk.tab.label.press" />
<set id="exif" label-id="fdk.tab.label.exif" />
<field id="cm:description">
<control template="/org/alfresco/components/form/controls/richtext.ftl" />
</field>
<field id="fdk:model">
<control template="/fdk/controls/autocomplete.ftl">
<control-param name="ds">/service/ds/autocomplete/google</control-param>
</control>
</field>
<field id="fdk:releaseDate" set="press" />
<field id="fdk:endOfLifeDate" set="press" />
<field id="fdk:retailers" set="press" help-id="fdk.help.gadget.retailers" />
<field id="fdk:rating" set="press" />
<field id="fdk:contact" set="press" />
<field id="fdk:reviews" set="press" />
<field id="fdk:company" set="press" />
<field id="fdk:pressRelease" set="press" />
<field id="fdk:images" set="press" />
<field id="fdk:manufacturer" set="exif" />
<field id="fdk:software" set="exif" />
<field id="fdk:originalDateTime" set="exif" />
<field id="fdk:compression" set="exif" />
<field id="fdk:xResolution" set="exif" />
<field id="fdk:yResolution" set="exif" />
<field id="fdk:resolutionUnit" set="exif" />
<field id="fdk:flash" set="exif" />
</appearance>
</form>
</forms>
</config>
[edit] Exif Aspect
The FDK installs an aspect named "Exif" (fdk:exif) which represents a subset of the standard EXIF metadata. When this aspect or the built-in dublin core aspect are applied to a cm:content node and it's metadata is edited the following form is displayed, the expanded accordion component is also shown.
 | 
|
The configuration required to achieve this is shown below.
<config evaluator="node-type" condition="cm:content">
<forms>
<form>
<field-visibility>
<!-- exif aspect data, if applied -->
<show id="fdk:manufacturer" />
<show id="fdk:software" />
<show id="fdk:originalDateTime" />
<show id="fdk:compression" />
<show id="fdk:xResolution" />
<show id="fdk:yResolution" />
<show id="fdk:resolutionUnit" />
<show id="fdk:flash" />
</field-visibility>
<appearance>
<set id="dublin-core" appearance="" template="/fdk/templates/custom-set-dublincore.ftl" />
<set id="exif" appearance="" label-id="fdk.tab.label.exif" template="/fdk/templates/custom-set-exif.ftl" />
<field id="cm:publisher" set="dublin-core" />
<field id="cm:contributor" set="dublin-core" />
<field id="cm:type" set="dublin-core" />
<field id="cm:identifier" set="dublin-core" />
<field id="cm:dcsource" set="dublin-core" />
<field id="cm:coverage" set="dublin-core" />
<field id="cm:rights" set="dublin-core" />
<field id="cm:subject" set="dublin-core" />
<field id="fdk:manufacturer" set="exif" />
<field id="fdk:software" set="exif" />
<field id="fdk:originalDateTime" set="exif" />
<field id="fdk:compression" set="exif" />
<field id="fdk:xResolution" set="exif" />
<field id="fdk:yResolution" set="exif" />
<field id="fdk:resolutionUnit" set="exif" />
<field id="fdk:flash" set="exif" />
</appearance>
</form>
</forms>
</config>
[edit] Company Type
When an instance of the "Company" (fdk:company) type is created and it's metadata edited the following form is displayed.
The configuration required to achieve this is shown below.
<config evaluator="node-type" condition="fdk:company">
<forms>
<form>
<edit-form template="/fdk/templates/2-column-edit-form.ftl" />
<field-visibility>
<show id="cm:name" />
<show id="fdk:email" />
<show id="fdk:url" />
<show id="fdk:tel" />
<show id="fdk:street1" />
<show id="fdk:street2" />
<show id="fdk:city" />
<show id="fdk:county" />
<show id="fdk:state" />
<show id="fdk:postCode" />
<show id="fdk:zip" />
<show id="fdk:country" />
</field-visibility>
</form>
</forms>
</config>
[edit] Left Aligned Labels
By default field labels are rendered above the field they represent. Although there is a lot of evidence from user studies to support this approach as being the most favorable in terms of user experience it's not to everyone's taste. The FDK provides a small CSS file as an example that moves the labels to the left of the field as shown in the screenshot below.
The configuration required to achieve this is shown below.
<config>
<forms>
<dependencies>
<css src="/fdk/left-aligned-label.css" />
</dependencies>
</forms>
</config>
[edit] Unit Tests
TODO: Add details and screenshot of the unit tests in the FDK
[edit] Roadmap
- Improve Form Console
- Forms Runtime examples
- Form building utilities
- Simple Form Builder
Categories: 3.4 | Forms
