Quản lý cấu hình web - part 15 docx

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.. The first step is to upload the

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 defines 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 files 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 "/>

[ 123 ]

For more information about XSD, refer to the website http://www.w3.org/XML/Schema

In order to create the XSD file, follow these steps:

1 Navigate to <installed-alfresco>/extras Create folder wcm/forms

2 Create a file named news.xsd in the above-specified path and populate it with the downloaded code from Packt's website

3 Create a file named blogs.xsd in the above-specified path and populate it with the downloaded code from Packt's website

4 Create a file named training.xsd in the above-specified path and populate

it with the downloaded code from Packt's website

Download the complete code samples from the Packt website

The XSD file is now ready to use The next task is to create web forms For this you first 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 first 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 flexibility to associate a web form with the web project

Download from Wow! eBook <www.wowebook.com>

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 first step is to upload the XSD file, the second step is to configure template for rendition output, the third step is to define the workflow for form data, and the fourth step is to confirm the web form

4 In the Step One window, you will notice a Browse button to upload the XSD file Click on Browse to locate and upload the news.xsd file created in the folder <installed-alfresco>/extras/wcm/forms After uploading,

it will automatically fill up the values like Root element, Name, Title, and

Output path pattern You can change the output path pattern This means

the XML file will be created in the specified path Take a look at the following

screenshot and change the Output path pattern and Description as specified Then click on Next.

[ 125 ]

5 In the Step Two window, the Configure 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 Configure Workflow page is shown Select the No not now option as shown in the following screenshot (this step allows

the creation of default workflows for form data You will know more about this in the next chapter):

Download from Wow! eBook <www.wowebook.com>

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 file

8 Continue the previous steps to upload the blogs.xsd and training.xsd files

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 first 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

[ 127 ]

Rendition templates

Rendition templates simplifies 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 file) is created with a web form, each rendition template is configured 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 configuring a template for rendition output In this section, you will learn in detail about how to create and configure 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>

In the following figure, the content authors create document content in Alfresco The programmers create the presentation template file with stylesheets and HTML code, taking care of look and feel requirements The final 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 figure:

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

[ 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:

current sandbox

form_instance_data_file_name This provides the name of the file containing the

form instance data being used

rendition_file_name This provides the filename of the rendition being

produced

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 file, 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>

FreeMarker template-node model API

These objects, and any child node objects, are called template-node objects, and they provide the following API:

parseXMLDocument(String

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 >

Defining 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

[ 131 ]

To create ftl files, 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 file 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 file, we have defined the root element as "blogs" Assume we want to use the mainTitle, contentSubHeader, and publishedDate elements of the blog.xsd

in the ftl file The following table shows various uses of FreeMarker directives:

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>