Web Content Production with Web Forms [ 122 ] We can also easily install additional plugins by putting them in the <install-alfresco>/tomcat/webapps/ alfresco/scripts/tiny_mce/plugins folder. Dynamically populating lists (in drop-down lists) or conditional drop downs A drop-down list can be handled with the xs:enumeration element within the xs:restriction element that denes the type of enumeration. For example, all the values in the list should be string, as follows: <xs:element name="disclaimer" minOccurs="0" maxOccurs="1"> <xs:annotation> <xs:appinfo> <alf:label>Disclaimer</alf:label> <alf:appearance>minimal</alf:appearance> </xs:appinfo> </xs:annotation> <xs:simpleType> <xs:restriction base="xs:string"> <xs:enumeration value="news" /> <xs:enumeration value="blogs" /> </xs:restriction> </xs:simpleType> </xs:element> Reuse of common XSD and JSP Use of includes will enable you to reuse the common structure across multiple les. You can also call a web script in include schemaLocation. Please note: for this, the virtual server should be running. We will see example of includes in the later sections. <xs:include schemaLocation="/common/inc/contentType.xsd" /> <xs:include schemaLocation="/common/inc/contentType.jsp "/> <xs:include schemaLocation="webscript://path/to/my/ webscript?storeid={storeid}" /> <xs:import namespace="imported_namespace" schemaLocation="webscript:// path/with/the/{storeid}/embedded?ticket={ticket}" /> Download from Wow! eBook <www.wowebook.com> Chapter 4 [ 123 ] For more information about XSD, refer to the website http://www.w3.org/XML/Schema. In order to create the XSD le, follow these steps: 1. Navigate to <installed-alfresco>/extras. Create folder wcm/forms. 2. Create a le named news.xsd in the above-specied path and populate it with the downloaded code from Packt's website. 3. Create a le named blogs.xsd in the above-specied path and populate it with the downloaded code from Packt's website. 4. Create a le named training.xsd in the above-specied path and populate it with the downloaded code from Packt's website. Download the complete code samples from the Packt website. The XSD le is now ready to use. The next task is to create web forms. For this you rst have to create a web project. This section uses the web project that you have already created as a part of your Cignex sample application in Chapter 3. As a part of the sample application, you will manage content in the Cignex web project. For more information about the web project and sample application, refer to Chapter 3. Create a web form in Alfresco You can create a web form using two ways: • Directly from Company Home | Data Dictionary | Web Forms space (Create Web Form). Using this rst option we can only create web forms; it is not associated to any project. • Using Edit Web Project setting wizard in a web project (assuming you have already created a web project). It gives the exibility to associate a web form with the web project. Download from Wow! eBook <www.wowebook.com> Web Content Production with Web Forms [ 124 ] The process to create web forms is as follows: 1. Ensure that the Alfresco Server is up and running. 2. Go to Company Home | Data Dictionary | Web Forms. 3. Clicking on the Create Web Form link opens the Create Web Form Wizard window. This is the Create Web Form pane, as you can see from the list of steps at the left of the pane. You may also notice that the wizard window has four steps, as shown in the following screenshot. The rst step is to upload the XSD le, the second step is to congure template for rendition output, the third step is to dene the workow for form data, and the fourth step is to conrm the web form. 4. In the Step One window, you will notice a Browse button to upload the XSD le. Click on Browse to locate and upload the news.xsd le created in the folder <installed-alfresco>/extras/wcm/forms. After uploading, it will automatically ll up the values like Root element, Name, Title, and Output path pattern. You can change the output path pattern. This means the XML le will be created in the specied path. Take a look at the following screenshot and change the Output path pattern and Description as specied. Then click on Next. Download from Wow! eBook <www.wowebook.com> Chapter 4 [ 125 ] 5. In the Step Two window, the Congure Template page is shown. This step is optional. Leave all values blank and click on Next. (This step allows you to generate forms in various outputs. We will examine this in the next section of this chapter.) 6. In the Step Three window, the Congure Workow page is shown. Select the No not now option as shown in the following screenshot (this step allows the creation of default workows for form data. You will know more about this in the next chapter): Download from Wow! eBook <www.wowebook.com> Web Content Production with Web Forms [ 126 ] 7. Clicking on the Next button will take you to the Step Four window, which displays a summary of the web form. Click on the Finish button and this will create a web form. You will notice a new space called news inside Company Home | Data Dictionary | Web Forms. Inside this space you will see the news.xsd le. 8. Continue the previous steps to upload the blogs.xsd and training.xsd les. Please provide the Output path pattern as common/inc/${name}.xml for creating blogs and training web forms when the Web Form Details window is opened. Do not proceed to the subsequent sections without rst creating the web forms. The remaining sample solution is based on these web forms. Please specify the Output path pattern as shown in a previous screenshot for news, training, and the blogs web form. The Alfresco Wiki website (http://wiki.alfresco.com/wiki/ Forms_Developer_Guide and http://wiki.alfresco.com/wiki/ Creating_XForms_Widgets) contains information about forms and widgets. Download from Wow! eBook <www.wowebook.com> Chapter 4 [ 127 ] Rendition templates Rendition templates simplies and accelerates the web publishing process by transforming the web form-managed XML content into web content. Rendition templates can be written in the FreeMarker template language (with an extension .ftl), Extensible Stylesheet Language Transformations (with an extension .xslt), and Extensible Stylesheet Language Formatting Objects (with an extension .xsl-fo). You can leverage the built-in renditioning engine for FreeMarker, XSL, and XSL-FO template languages. After a content item (XML le) is created with a web form, each rendition template is congured for that content type to produce an output in a desirable format. It mainly includes plain text, JSP, PDF, and HTML. The second step of the Create Web Form wizard suggests conguring a template for rendition output. In this section, you will learn in detail about how to create and congure a template while creating web forms. We will use the FreeMarker template for rendition in this chapter and will see an overview about XSLT and XSL-FO. Using FreeMarker templates for renditions FreeMarker is an open source template engine. It is a generic tool for generating text output (which can be anything from HTML to auto-generated source code) based on templates. FreeMarker is designed to be practical for the generation of HTML web pages, by following the MVC (Model View Controller) pattern. The idea behind using the MVC pattern for dynamic web pages is that you separate the content authors from the programmers. This separation is useful, even for projects where the programmer and the HMTL page author are the same person, as it helps to keep the application clear and easier to maintain. If you want that page to be more dynamic, then you begin to put special parts into the HTML, which will be understood by FreeMarker. For instance, "${ }" will produce output with the actual value of the thing inside the curly brackets. Presentation templates are written in FreeMarker template language and will have a .ftl extension. Download from Wow! eBook <www.wowebook.com> Web Content Production with Web Forms [ 128 ] In the following gure, the content authors create document content in Alfresco. The programmers create the presentation template le with stylesheets and HTML code, taking care of look and feel requirements. The nal content will be generated by the FreeMarker engine (which is embedded in Alfresco) by applying the presentation template on the document content as shown in the following gure: FreeMarker template engine within Alfresco The FreeMarker template engine is embedded within Alfresco. FreeMarker takes schema as input and generates text (HTML or XML) as output. FreeMarker also supports XSLT to translate XML content. Download from Wow! eBook <www.wowebook.com> Chapter 4 [ 129 ] Alfresco objects available to FreeMarker The default model provides a set of named objects that wrap Alfresco Node objects to provide a rich, object-oriented layer, suitable for scripting usage. If you are accessing the templates through the web-client UI, then the following named objects are provided by default: Named object Description avm_sandbox_url This provides the URL to the root of the current sandbox. form_instance_data_file_name This provides the name of the le containing the form instance data being used. rendition_file_name This provides the lename of the rendition being produced. parent_path This provides the parent_path of the rendition being produced. For example, consider the following FreeMarker template. In FreeMarker, all variables and functions are in a hash called alf: <html> <head> <title>Whats New</title> </head> <body> <h1>${alf.parent_path}</h1> </body> </html> At runtime, the value of variable alf.parent_path will be the path of XML le, which is generated while creating content. The Alfresco Wiki website (http://wiki.alfresco.com) contains a complete reference to the FreeMarker template engine. Download from Wow! eBook <www.wowebook.com> Web Content Production with Web Forms [ 130 ] FreeMarker template-node model API These objects, and any child node objects, are called template-node objects, and they provide the following API: Node method Description parseXMLDocument(String virtualPath) A map of the properties of the node. For example, userhome, properties, and name. Properties may return several different types of objects; this depends entirely on the underlying property type in the repository. If the property is multi-valued, then the result will be a sequence, which can be indexed like any other sequence or array. parseXMLDocuments(String formName, String virtualPath) A sequence (list) of the child nodes. For example, a list of documents in a space. FreeMarker directives Like any programming language, the FreeMarker templating language also supports fundamental directives such as the following: ${ } #if, #else, #elseif #switch, #case #list #assign #function #include <# comment > <! comment > Dening and creating FreeMarker templates Continuing with our example of the Cignex.com website, we have already created web forms for blogs and a news section. Now we will associate these web forms with the rendition templates. We will rst learn to create FreeMarker templates. Let's learn how to create .ftl les. Download from Wow! eBook <www.wowebook.com> Chapter 4 [ 131 ] To create .ftl les, we have to start with the standard declaration of the default name space for the associated web form (consider the blog web form) using the <#ftl > tag (check the target namespace of the blogs.xsd le that has been used in creating the blog web form), as follows: <#ftl ns_prefixes={"D", "http://www.alfrescobook.com/webforms"}> Now we need to display the elements we have used for the blog web form. In the blogs.xsd le, we have dened the root element as "blogs". Assume we want to use the mainTitle, contentSubHeader, and publishedDate elements of the blog.xsd in the .ftl le. The following table shows various uses of FreeMarker directives: Description XSD syntax FTL syntax Display single element <xs:element name="mainTitle" type="xs:normalizedString" </xs:element> ${blogs.mainTitle } Display recurring elements <xs:element name="subHeader" minOccurs="1" maxOccurs="unbounded"> <xs:complexType> <xs:sequence> <xs:element name="headerLine" type="xs:normalizedString" /></xs:sequence> </xs:complexType> </xs:element> <#list blogs. subHeader as contentSubHeader > ${ contentSubHeader. headerLine } </#list> Sort the recurring elements <xs:element name=" subHeader " type="xs:string" minOccurs="1" maxOccurs="unbounded"> <#list blogs. subHeader?sort_ by("headerLine ")?reverse as contentSubHeader > ${ contentSubHeader. headerLine }</#list> Conditional checks <xs:element name="publishedDate" minOccurs="0" maxOccurs="1"> <#if blog.publishedDate != "" > ${blog.publishedDate} </#if> Download from Wow! eBook <www.wowebook.com> . already created a web project). It gives the exibility to associate a web form with the web project. Download from Wow! eBook <www.wowebook.com> Web Content Production with Web Forms [ 124. <www.wowebook.com> Chapter 4 [ 127 ] Rendition templates Rendition templates simplies and accelerates the web publishing process by transforming the web form-managed XML content into web content uses the web project that you have already created as a part of your Cignex sample application in Chapter 3. As a part of the sample application, you will manage content in the Cignex web project.