Quản lý cấu hình web - part 32 pot

Insert the following code: News Calls the remote Alfresco web script /component/common/news/news • Step 2: Create a template file, news.get.html.ftl, in the same location and insert

Trang 1

• Step 3: Modify the file webscript-framework-config.xml Uncomment the following code that is placed in the file This configures the remote Alfresco repository as an endpoint

<id>alfresco-system</id>

<name>Alfresco - System access</name>

<description>System account access to Alfresco</description> <connector-id>alfresco</connector-id>

<endpoint-url>http://localhost:8080/alfresco/s

</endpoint-url>

<identity>declared</identity>

<username>admin</username>

<password>admin</password>

</endpoint>

The rest of the case study is covered in Chapter 10, in the Alfresco WCM –Surf-based Web application integration section.

Now we shall create one more web script that will call other web scripts that are stored in Alfresco WCM to fetch data

• Step 1: Create a news folder inside the site-webscripts/components/ common folder Create a new file news.get.desc.xml in the news folder Insert the following code:

<description>Calls the remote Alfresco web script</description> <url>/component/common/news/news</url>

</webscript>

• Step 2: Create a template file, news.get.html.ftl, in the same location and insert the following code:

Trang 2

<#list news as n>

${n.Headline}

<br>

</#list>

</td>

</tr>

</table>

• Step 3: Create a JavaScript file, news.get.js, in the same location and insert the following code:

{

// get a connector to the Alfresco repository

var connector = remote.connect("alfresco-system");

var jsonFeed = connector.get("http://localhost:8080/alfresco/ service/org/cignex/news/getNewsHeadlines.json?storeId=cignex"); var obj = eval('(' + jsonFeed + ')');

if (obj)

{

model.news = obj["newsItems"];

}

Using YUI (Yahoo User Interface) library

YUI is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications It is an open source JavaScript library using techniques such as DOM scripting, DHTML, and AJAX YUI consists of several CSS components and nearly three dozen JavaScript components, all of which are designed to empower the rapid creation of web applications that run in all of the major web browsers It provides a rich set of widgets and utilities, such as animation, drag-and-drop, image loader, menu, paginator, uploader, and many others Mainly,

it has six components:

• YUI Core: It is a light set of tools for event management It consists of

Yahoo Global objects within which all of the YUI library code resides It also contains an Event utility that provides developers with easy and safe access

to browser events such as mouse clicks, key press, and so on

• YUI Utilities: It provides various utilities like animation, data source,

Trang 3

• CSS Resources: It consists of CSS Reset (removes inconsistent styling of

HTML elements provided by browsers), CSS fonts (standardized cross-browser font families and size rendering), and CSS base (an optional CSS file that complements YUI's core CSS foundation)

• Development tools: It contains Logger Control (provides a quick and easy

way to write log messages to an onscreen console), Profiler (allows you to specify exactly the parts of your application to the profile), ProfilerViewer control (used in combination with Profiler to provide rich visualizations of your profiling data), and YUI test utility (testing framework for browser-based JavaScript solutions)

• Build Tool: YUI Compressor is a build-process component written in Java

that minifies your JavaScript and CSS It is a JavaScript and CSS minifier designed to be 100 percent safe and yield a higher compression ratio than most other tools

As we discussed earlier, we have a set of predefined controls that we can use by instantiating an object and calling a set of methods on them

For instance, use the horizontal menu plugin provided by the YUI library and observe how easy it is to make a rich menu

Modify the file header.get.html.ftl located at site-webscripts/components/ common/header Insert the downloaded code from the Packt website You will notice

a change in the menu style

Download the code samples from the Packt website

Trang 4

Alfresco Web Editor

Alfresco Web Editor is an application developed using the Spring Surf platform

It provides in-context editing capabilities for Alfresco repository content Because

of the in-context editing capability of the Web Editor, it's very easy for any non-technical person to edit Alfresco content directly from the web page It supports Presentation editing for Surf-based websites

Alfresco Web Editor is a Surf application incorporating the Alfresco Form Engine It uses the Form Service default template

Alfresco Web Editor is packaged as a standalone WAR file (awe.war) Hence you can deploy it as a standalone application on the same server where Alfresco is running or also can deploy it as a part of any Surf Application remote to the Alfresco server

Deploying and using Alfresco Web Editor

First you need to download the Alfresco Web Editor A file alfresco-enterprise-webeditor-3.3.zip will consist of the awe.war file and other required files To deploy AWE, follow the steps mentioned below:

1 Browse to https://network.alfresco.com and download the

Trang 5

alfresco-2 Stop your Alfresco server if it's already running.

3 Deploy the awe.war file (which is there in the downloaded ZIP file) into the same application server where Alfresco is running

4 Restart your Alfresco server

Once you start the Alfresco server, you can navigate to http://localhost:8080/ awe You will see the login page; provide the same username and password you are using for Alfresco (admin/admin)

The first page you will see will be the metadata page; here you can pass any Alfresco content noderef as itemId parameter and can update the metadata of that content as shown in the following screenshot:

Trang 6

Deploying Web Editor to a Spring Surf

Application

As mentioned in the introduction of the Alfresco Web Editor, we can also deploy the Web Editor to any Surf Application, which is remote to the Alfresco server

In this section, we will discuss how we can deploy and what are the extra

configurations we need to do for using it in a Surf-based application The Alfresco Web Editor distribution contains all of the required files for configuring it for the Surf-based application

1 Copy the following files to the WEB-INF/lib directory:

° yui-2.7.0.jar

° spring-webeditor-1.0.0.CI-SNAPSHOT.jar

° alfresco-forms-client-3.3.jar

° alfresco-webeditor-plugin-3.3.jar

2 Configuring the Tag Library:

Alfresco Web Editor provides tag library If you intend to use the tags

provided in this library, you need to copy the

alfresco-webeditor-taglib-3.3.jar file in the WEB-INF/lib folder

This tag library mainly includes three tags: startTemplate, markContent, and endTemplate We will discuss about these tags later in this chapter

3 Configuring the Servlet Filter:

If you are using the previously mentioned tags, startTemplate,

markContent, and endTemplate will only render the output if you have configured the Web Editor filter in web.xml as follows:

<filter-name>Alfresco Web Editor Filter</filter-name>

<description>Enables support for the Alfresco Web Editor</

description>

<filter-class>org.alfresco.web.awe.filter.WebEditorFilter</

filterclass>

</filter>

<filter-mapping>

<filter-name>Alfresco Web Editor Filter</filter-name>

<url-pattern>/*</url-pattern>

Trang 7

You can also set the following two optional parameters to control the

contextPath when the URLs to the Web Editor are generated and for the debug mode:

<init-param>

<param-name>contextPath</param-name>

<param-value>/quickstart</param-value>

</init-param>

<init-param>

<param-name>debug</param-name>

<param-value>true</param-value>

</init-param>

4 Configuring Web Editor Forms:

The Alfresco Web Editor uses Forms to edit the content and the metadata

By default, it displays the title, description, and content fields An alternative form can be used by providing a markContent tag with the formId attribute The node type is presumed to be cm:content If you have custom

types or wish to specify other properties, you can use the form's

configuration techniques

Alfresco Web Editor tag library

The Alfresco Web Editor tag library consists of three tags: StartTemplate,

markContent, and endTemplate

• startTemplate tag

Purpose:

This tag bootstraps the Web Editor Framework using a script element that executes a Web Script Place this tag in the head section of the page

Attributes:

toolbarLocation

This attribute specifies the location of the toolbar

<awe:startTemplate toolbarLocation="top" /> specifies the location as top in the window for the toolbar

The possible values are: top, left, and right This is an optional attribute; the default is top

Trang 8

• markContent tag

Purpose:

This tag indicates the editable area on the page This renders an Edit icon; when clicked, it displays a form to edit the content or metadata or both

Attributes:

id: This attribute specifies the noderef of the Alfresco node This is a

mandatory attribute

title: This attribute specifies a title for the marked editable area The same title will be used in quick edit drop–down, form edit pop-up dialog, and

so on

This is a mandatory attribute

formId: This attribute specifies which form will be used when the marked area is edited This is an optional attribute

nestedMarker: This attribute defines whether the editable area is nested within another HTML tag that represents the content being edited If set

to "true" the whole parent element is highlighted when the area is selected

in the quick edit drop-down menu If set to "false", only the edit icon is highlighted

• endTemplate tag

Purpose:

This tag initializes the Web Editor with details of all of the marked content areas on the page It also renders a script element that executes the WEF resources web script, which starts the process of downloading all of the assets required to render and display the toolbar and all configured plugins Place this tag just before the closing body element

Attributes:

This tag doesn't have any attribute

Sample Web Application using Alfresco Web Editor

When you download the Web Editor distribution, you will find one sample

Trang 9

For example, you can create content in Alfresco Go to Company Home and

a specific space where you want to create the content Use the Add content

functionality to upload any file Here in this example, I have uploaded one HTML file called Cignex_Merge_News.html to the Alfresco repository

In the noderefs.jsp file located at customer/includes, provide the noderef of the previously created content from the Alfresco Repository as shown next (it is the modified content of noderefs.jsp):

<%

String mainTextNodeRef = "workspace://SpacesStore/3b12b9a8-8f9f-414d-8a9d-40047822d1cf";

%>

Note that

workspace://SpacesStore/3b12b9a8-8f9f-414d-8a9d-40047822d1cf is the noderef of Alfresco content Cignex_

Merge_News.html To find the nodeRef of your content, go to the

View Details page of the content and click on Alfresco Node Reference.

Also update the body.jsp located at customer/includes accordingly

Once you specify the noderefs as earlier and click on http://localhost:8080/ customer, you can see the screen shown in the following screenshot:

Trang 10

This application has custom tags to display the property and content of the

specified noderef

To display any property of the noderef, use a property tag like:

<customer:property nodeRef="<%=mainTextNodeRef%>"

property="cm:description" />

To display the content of the noderef, use a content tag like:

<customer:content nodeRef="<%=mainTextNodeRef%>" />

As discussed earlier, the startTemplate tag will have a toolbarLocation

attribute that specifies the location of the toolbar (the default is "top") The following screenshot shows the toolbar on the page:

You can directly click on the link available in the drop-down here in the toolbar

Another option is the Edit icon that is also available with the content The following

screenshot shows how you can use the in-context editing feature to edit the content

Định dạng
Số trang	10
Dung lượng	5,97 MB