Quản lý cấu hình web - part 31 pps

Use of a component in a pageThe Surf framework binds the component to the specific region of a page and also specifies scope.. For example, the header and the footer template can have g

Trang 1

• Step 8: Create a new file with the name given previously in the template-instance tag Create the index.ftl file Insert the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>${page.title}</title>

</head>

<body>

Home Page

</body>

</html>

• Step 9: Test the application You will find your home page is ready now You

should be able to test by hitting the URL of your web or app server Navigate

to the home page URL: http://<server-name>:<port>/surf.

You will face a caching issue while using the Surf framework In order to save server restart during development of an application, you can disable cache for the time period.

1 Edit the

/WEB-INF/classes/alfresco/web-framework-application-context.xml file.

2 Search for the word "updateDelay" and change the value to 0 There are two occurrences and properties to change:

3 Restart your application server for the change to take effect.

OR

By reloading the page, the changes will not be reflected You have to

explicitly clear the cache Browse to the cache as follows:

http://<server-name>:<port>/surf/control/cache/invalidate

Trang 2

Use of a component in a page

The Surf framework binds the component to the specific region of a page and also specifies scope Using this one can decide the position of the component to be placed

in the page.

For instance, the footer should always be at the bottom of the page and the header should always be at the top of the page As discussed earlier, each component has scopes to be defined The Surf framework defines three categories of scopes:

• Global: Available across all pages For example, the header and the footer

template can have global access, which will be available on any page of the application These are sections of the page that will not change from one page

to the next.

• Page: Limited access to a page The component will be available for the same

page where it is defined.

• Template: Accessible to a few pages The component is to be used for some

pages but not for all.

Let's try to create a header component, the scope of which will be global The naming convention for the component is very important The name is defined as follows: Scope.regionId.sourceId.xml

According to this, we are going to create global.header.xml Here global is the scope, header is the region, and global is the sourceId However, we have not used the third parameter, as it is a global scope component and therefore is used on all pages.

• Step 1: Let's create the global.header.xml file in the

<install- application>/tomcat/webapps/surf/WEB-INF/classes/alfresco/site-data/components folder and insert the following code:

<?xml version='1.0' encoding='UTF-8'?>

<scope>global</scope>

<region-id>header</region-id>

<source-id>global</source-id>

<url>/component/common/header/header</url>

</component>

The <url> tag is used to call web scripts You will learn about web scripts in

Chapter 10 Refer to the chapter to know more details about the web scripts

Web scripts are placed in the <install-application>/tomcat/webapps/ surf/WEB-INF/classes/alfresco/site-webscripts folder.

Trang 3

• Step 2: Create the header folder inside the components/common folder Create a new file header.get.desc.xml in the header folder Insert the following code:

<shortname>Global Header Component</shortname>

<description>Header component used across the whole

application</description>

<url>/component/common/header/header</url>

</webscript>

• Step 3: Create another new file, header.get.html.ftl, in the same location and insert the following code:

charset=UTF-8" />

<tr>

<img src="/surf/images/logo/cignex-logo.png"

alt="Cignex logo" width="159" height="85" border="0" /> </td>

</tr>

</table>

</div>

<li><a class="current" href="#">SOLUTIONS</a></li>

<li><a href="#">SERVICES</a></li>

<li><a href="#">TECHNOLOGY</a></li>

<li><a href="#">CUSTOMERS</a></li>

<li><a href="#">PARTNERS</a></li>

<li><a href="#">RESOURCES</a></li>

<li><a href="#">RESOURCES</a></li>

</ul>

Trang 4

Our component is now ready to be placed in the page In this template

we are using stylesheets and images You can create stylesheets in the

<install-application>/tomcat/webapps/surf/css folder For images you have to navigate to the <install-application>/tomcat/webapps/ surf/images folder.

Download the code from the Packt website

• Step 4: Refresh the Web Script by entering the following URL:

http://<server-name>:<port>/surf/service.

• Step 5: Insert the highlighted code in index.ftl (that you have created earlier within the <install-application>/tomcat/webapps/surf\WEB-INF/classes/alfresco/templates folder within the <body> tag Here we are using the region and scope defined in the component created earlier.

<@region id="header" scope="global" />

• Step 6: Test the component You will find the header component is added in

the home page You should be able to test by entering the URL of your web

or app server http://<server-name>:<port>/surf/.

Design page navigation

In the previous section, we learned about page creation and putting a component into a page In this section, we shall learn about navigation from one page to

another page.

For this, create one more page Now we are going to link this page to the page we created earlier.

Trang 5

Create the new page Create the new "template instance" so that the new template can be referenced from a page component Create the new FTL template file.

• Step 1: Create news.xml in the <install-alfresco>/tomcat/webapps/ surf/WEB-INF/classes/alfresco/site-data/pages folder Insert the following code:

<page>

<description>Sample Cignex News page</description>

<template-instance>news</template-instance>

</page>

• Step 2: Create news.xml in the <install-alfresco>/tomcat/webapps/ surf/WEB-INF/classes/alfresco/site-data/template-instances folder Insert the following code:

<template-instance>

<template-type>news</template-type>

</template-instance>

• Step 3: Create news.ftl in the <install-alfresco>/tomcat/webapps/surf/ WEB-INF/classes/alfresco/templates folder Insert the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>${page.title}</title>

${head}

</head>

<body>

<@region id="header" scope="global" />

<table width="100%" cellspacing="0" cellpadding="0"

border="0">

<tr>

</td>

</tr>

<tr>

Trang 6

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</body>

</html>

By this time one more page is ready Now we have two pages and one header component in place We will see how one page can be linked to another page.

Trang 7

• Step 4: Go to the <install-alfresco>/tomcat/webapps/surf/WEB-INF/ classes/alfresco/site-data/page-associations folder.

• Step 5: Create a new file index-news.xml With this we are associating index page to news page and vice versa Insert the following code:

<page-association>

<source-id>index</source-id>

<dest-id>news</dest-id>

<assoc-type>child</assoc-type>

<order-id>1</order-id>

</page-association>

• Step 6: Go to the <install-alfresco>/tomcat/webapps/surf/WEB-INF/ classes/alfresco/site-webscripts/components/common/header folder.

• Step 7: Create a new file header.get.js Insert the following code:

// renderer attribute

var renderer = instance.properties["renderer"];

if(renderer == null)

{

renderer = "horizontal";

}

model.renderer = renderer;

// set up rendering attributes

model.rootpage = sitedata.getRootPage();

model.linkbuilder = context.getLinkBuilder();

• Step 8: Modify the header.get.html.ftl file Insert the following code.

<table>

<tr>

<td>

</td>

</tr>

</table>

<#if renderer == "horizontal">

<@horizontal page=rootpage showChildren=true/>

</#if>

Trang 8

<#macro horizontal page showChildren>

<#assign currentPageId = "">

<#if context.pageId?exists>

<#assign currentPageId = context.pageId>

</#if>

<li>

<#assign href = linkbuilder.page(page.id, context.formatId)> <#assign classId = ''>

<#if page.id == currentPageId>

<#assign classId = 'current'>

</#if>

<a href='${href}' id='${classId}'>SOLUTIONS</a>

</li>

<li>

<#assign href = linkbuilder.page(page.id, context.formatId)> <a href='${href}' id='current'>SERVICES</a>

</li>

<li>

<#assign href = linkbuilder.page(page.id, context.formatId)> <a href='${href}' id='current'>TECHNOLOGY</a>

</li>

<li>

<#assign href = linkbuilder.page(page.id, context.formatId)> <a href='${href}' id='current'>CUSTOMERS</a>

</li>

<li>

<#assign href = linkbuilder.page(page.id, context.formatId)> <a href='${href}' id='current'>PARTNERS</a>

</li>

<li>

<#assign href = linkbuilder.page(page.id, context.formatId)> <a href='${href}' id='current'>RESOURCES</a>

</li>

<# Children of Home Page >

<#list sitedata.findChildPages(page.id) as parentPage>

<li>

<#assign href = linkbuilder.page(parentPage.id,

context.formatId)>

<#assign classId = ''>

<#if parentPage.id == currentPageId>

<#assign classId = 'current'>

</#if>

<a href='${href}' id='${classId}'>${parentPage.title}</a> </li>

</#list>

Trang 9

<li>

<#assign href = linkbuilder.page(page.id, context.formatId)> <a href='${href}' id='current'>COMPANY</a>

</li>

</ul>

</#macro>

• Step 9: Refresh the Web Script by entering the URL

http://<server-name>:<port>/surf/service.

So far we have learned about the creation of a single-tier application Now if we want to create a two-tier application, we shall create one more web script, which will

be calling web scripts that are defined in Alfresco WCM.

Trang 10

Communicating with Web Content

Management

Alfresco Surf works hand-in-hand with Alfresco Web Content Management and provides virtualized content retrieval, preview, and test support for User Sandboxes and web projects Applications built with Alfresco Surf can be deployed from

Alfresco Web Project spaces to production servers while taking full advantage of Alfresco WCM's Enterprise class features These include:

• Safe editing of all aspects of Surf-powered sites: Snapshots allow your Surf

site to roll backward and forward in time Audit trails provide a rich log of changes made to the site.

• Integrated workflow for approval of all Surf components: These include

pages, templates, components, chrome, and much more.

User Sandboxes provide freedom for experimentation and iteration in design

Change anything about your Surf site with the assurance that you can always

discard changes or promote the bits you are happy with.

The following example is for integrating WCM web scripts with the Surf application This Web Script is actually located on the remote Alfresco server and therefore we have to configure Surf to search the location for web scripts.

• Step 1: Go to the <install-alfresco>/tomcat/webapps/surf/WEB-INF/ classes/alfresco folder.

• Step 2: Modify the web-framework-config.xml file Insert the following code before </web-framework> The highlighted text cignex is the DNS name

of the web project This lets Surf bind to web application resources of the

"cignex" web project.

<resource-resolver>

<id>webapp</id>

<name>Alfresco Web Application Resource Resolver</name>

Resolves data access for web application assets

</description>

<class>

org.alfresco.web.framework.resource

AlfrescoWebProjectResourceResolver

</class>

<alias-uri>/files</alias-uri>

<store-id>cignex</store-id>

</resource-resolver>

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