Quản lý cấu hình web - part 14 ppsx

On implementation of this code snippet, a Select button shown in the following screenshot will be displayed for each of the images: We also have a few other preconfigured appearance opti

On implementation of this code snippet, a Select button (shown in the following

screenshot) will be displayed for each of the images:

We also have a few other preconfigured appearance options defined in the web-client-config-wcm.xml file, which is placed under <install-alfresco>/tomcat/ webapps/alfresco/WEB-INF/classes/alfresco/

Here are some examples of preconfigured appearances from the

web-client-config-wcm.xml file:

folder_restricted_file_picker Picks files from a specific folder

search_restricted_file_picker Searches files from a specific folder

If you want to upload HTML files, you have to put html_file_picker inside the <alf:appearance> tag For files and folders you can have file_picker and folder_picker respectively

Suppose you want to provide restrictions to file pickers and be relative to the

root of the web project folder Thus, the contents of the specified folder will be available for selecting in the file picker This can be achieved by uncommenting the section in the code below (which is highlighted in bold) in the same

web-client-config-wcm.xml file:

<widget xforms-type="xf:upload"

appearance="folder_restricted_file_picker"

javascript-class-name="alfresco.xforms.FilePicker">

<param name="selectable_types">wcm:avmcontent,wcm:avmfolder</param>

<param name="folder_restriction">/common/pages</param>

</widget>

Define this widget in the XSD file, as follows:

<xs:element name="contentGraphic" type="xs:anyURI" minOccurs="0" maxOccurs="1"

<xs:annotation>

<xs:appinfo>

<alf:label>News Article Graphic</alf:label>

<alf:appearance>folder_restricted_file_picker</alf:appearance>

</xs:appinfo>

</xs:annotation>

</xs:element>

This customized file picker will search for only folders inside common/pages folder

as shown in the following screenshot:

Another important feature, which will make search faster and time saving, is the reusability of search You don't have to browse every time for the files.

The config_search_name parameter must be set to the name of a configured search The file picker contents will be restricted to the results of this named configured search The configured search must be stored in the Public Saved Searches folder The search is Lucene based and it will only query content of the Staging Sandbox The public saved search is actually stored as an XML document in the Alfresco repository Therefore, we can modify it with any Lucene query that is supported by Alfresco WCM search The following code snippet will search for "training" as a text

in all of the files of the web project submitted to the staging server:

<widget xforms-type="xf:upload"

appearance="search_restricted_file_picker"

javascript-class-name="alfresco.xforms.FilePicker">

<param name="config_search_name">training</param>

</widget>

Define this widget in the XSD file, as follows:

<xs:element name="contentGraphic" type="xs:anyURI" minOccurs="0" maxOccurs="1"

<xs:annotation>

<xs:appinfo>

<alf:label>News Article Graphic</alf:label>

<alf:appearance>search_restricted_file_picker</alf:appearance>

</xs:appinfo>

</xs:annotation>

</xs:element>

The following screenshot shows how to save 'config_search_name' text in a public search folder so that this can used while searching in the web project:

The file picker will search all files having the word "training" within its name The following screenshot shows the search result:

You can also customize file pickers You have to define all customizations in web-client-config-wcm.xml Using the following code snippet you will have the option of selecting only JPEG files from the web project The selectable_types

The filter_mimetypes parameter can be used to filter selectable files by

MIME types:

<widget xforms-type="xf:upload"

appearance="custom_image_file_picker"

javascript-class-name="alfresco.xforms.FilePicker">

<param name="selectable_types">wcm:avmcontent</param>

<param name="filter_mimetypes">image/jpeg</param>

</widget>

Define this widget in the XSD file, as follows:

<xs:element name="image" type="xs:anyURI" minOccurs="0" maxOccurs="1"

<xs:annotation>

<xs:appinfo>

<alf:appearance>custom_image_file_picker</alf:appearance>

</xs:appinfo>

</xs:annotation>

</xs:element>

Since we have customized file picker, in the following screenshot you will find only JPEG files:

With the previous code snippet, we have customized image_file_picker In this manner, you can customize other file pickers also.

Please note all of the customization related to file pickers has to be provided in the specified file—<install-alfresco>/tomcat/

webapps/alfresco/WEB-INF /classes/alfresco/web-client-config-wcm.xml

Tool tips and labels

You can also provide a label for an element specified in your XSD file By default, the label created by the form processor for each element is simply the element's name You could also get a tool tip for the label you have provided Hence, the label becomes News Page Sub-Headline instead of contentSubHeader Whenever you drag a mouse over the label you will get help for the label:

<xs:element name="contentSubHeader" type="xs:string" minOccurs="0" maxOccurs="1">

<xs:annotation>

<xs:appinfo>

<alf:label>News Page Sub-Headline</alf:label>

<alf:hint>Please enter the news page sub-headline if the news has a sub-headline.</alf:hint>

</xs:appinfo>

</xs:annotation>

</xs:element>

Localization

You can also localize the label or alert by specifying a message bundle key in

the annotation:

<xs:element name="emailId" type="xs:string">

<xs:annotation>

<xs:appinfo>

<alf:label>${email}</alf:label>

</xs:appinfo>

</xs:annotation>

</xs:element>

This can be achieved by creating the following message bundle file Create a

property file with name strings.properties in the Company Home | Data

Dictionary | Web Forms | <form space name>| strings.properties with the

following code:

The property files can also be internationalized by having different versions for language or locale combination The default configured property file locations from highest to lowest precedence are:

1 Company Home | Data Dictionary | Web Forms | <form space name> | strings.properties.

2 Company Home | Data Dictionary | Web Forms | strings.properties.

3 webclient.properties placed in <install-alfresco>/tomcat/webapps/ alfresco/WEB-INF /classes/alfresco/messages/

Validation

You can provide validations to any of the fields For instance, if you provide the correct order ID, the element will be highlighted in red This indicates that the value

of the element must be a string, it must be exactly six characters in a row, and those characters must be a number from 0 to 9:

<xs:element name="orderId">

<xs:simpleType>

<xs:restriction base="xs:string">

<xs:pattern value="[0-9]{6}"/>

</xs:restriction>

</xs:simpleType>

</xs:element>

Customizing the WYSIWYG editor

You can customize the WYSIWYG editor easily The WYSIWYG editor is the

TinyMCE editor When we define a simple element of type string, we can see Rich Text Editor with limited functionalities We can also have many other features available with Rich Text Editor See the following code for the advanced editor With this we can have features such as alignment, font family, and font size:

<xs:element name="contentSubHeader" type="xs:string" minOccurs="1" maxOccurs="1">

<xs:annotation>

<xs:appinfo>

<alf:label>News Page Sub-Headline</alf:label>

<alf:hint>Please enter the news article sub-headline if the article has a sub-headline.</alf:hint>

<alf:appearance>full</alf:appearance>

</xs:appinfo>

If you want more advanced features for the editor, such as table, you can use the following code in the XSD file:

<xs:element name="contentSubHeader" type="xs:string" minOccurs="1" maxOccurs="1">

<xs:annotation>

<xs:appinfo>

<alf:label>News Page Sub-Headline</alf:label>

<alf:hint>Please enter the news article sub-headline if the

article has a sub-headline.</alf:hint>

<alf:appearance>custom</alf:appearance>

</xs:appinfo>

</xs:annotation>

</xs:element>

Suppose you want to customize these editors You want to hide bold, italic feature and reduce the height of the editor The customization code has to be placed in the

<install-alfresco>/tomcat/webapps/alfresco/WEB-INF /classes/alfresco/ web-client-config-wcm.xml file

Place the following code:

<widget xforms-type="xf:textarea"

appearance="customnews"

javascript-class-name="alfresco.xforms.RichTextEditor">

<param name="theme_advanced_buttons1">underline,separator, forecolor,backcolor, separator,link,unlink,image</param> <param name="height">100</param>

</widget>

Place this code in the XSD file:

<xs:element name="contentSubHeader" type="xs:string" minOccurs="1" maxOccurs="1">

<xs:annotation>

<xs:appinfo>

<alf:label>News Page Sub-Headline</alf:label>

<alf:hint>Please enter the news page sub-headline if the news has a sub-headline.</alf:hint>

<alf:appearance>customnews</alf:appearance>

</xs:appinfo>

</xs:annotation>

</xs:element>

Another customization that will allow you to see the source code of the HTML and insert media files in the Rich Text Editor if required is as follows Open the web-client-config-wcm.xml file Replace the code with the following

highlighted code:

<widget xforms-type="xf:textarea" appearance="custom"

javascript-class-name="alfresco.xforms.RichTextEditor">

<param name="theme_advanced_buttons1">bold,italic,underline, strikethrough,separator,fontselect,

fontsizeselect,code</param>

<param name="theme_advanced_buttons2">link,unlink,image,

separator,justifyleft,justifycenter,justifyright,

<param name="force_p_newlines">true</param>

<param name="apply_source_formatting">true</param>

<param name="plugins">table,paste,media</param>

<param name="theme_advanced_buttons3">tablecontrols,media</

param>

</widget>

Place the following code in the XSD file:

<xs:element name="contentSubHeader" type="xs:string" minOccurs="1" maxOccurs="1">

<xs:annotation>

<xs:appinfo>

<alf:label>News Page Sub-Headline</alf:label>

<alf:hint>Please enter the news pagesub-headline if the page has a sub-headline.</alf:hint>

<alf:appearance>custom</alf:appearance>

</xs:appinfo>

</xs:annotation>

</xs:element>