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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (5.9 MB, 10 trang )

Alfresco Surf and Web Editor
[ 282 ]
• Step 8: Create a new le with the name given previously in the template-
instance
tag. Create the index.ftl le. Insert the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=" /> <head>
<title>${page.title}</title>
</head>
<body>
Home Page
</body>
</html>
• Step 9: Test the application. You will nd 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
le.
2. Search for the word "updateDelay" and change the value to
0. There
are two occurrences and properties to change:
<property name="updateDelay"><value>0</value></property>
3. Restart your application server for the change to take effect.
OR
By reloading the page, the changes will not be reected. You have to

explicitly clear the cache. Browse to the cache as follows:
http://<server-name>:<port>/surf/control/cache/invalidate
Download from Wow! eBook <www.wowebook.com>
Chapter 9
[ 283 ]
Use of a component in a page
The Surf framework binds the component to the specic region of a page and also
species 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 dened. The Surf framework denes 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 dened.
• 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 dened 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 le 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'?>
<component>
<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.
Download from Wow! eBook <www.wowebook.com>
Alfresco Surf and Web Editor
[ 284 ]
• Step 2: Create the header folder inside the components/common folder.
Create a new le header.get.desc.xml in the header folder. Insert the
following code:
<webscript>
<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 le, header.get.html.ftl, in the same location
and insert the following code:
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />

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 dened in the component created earlier.
<@region id="header" scope="global" />
• Step 6: Test the component. You will nd 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.
Download from Wow! eBook <www.wowebook.com>
Alfresco Surf and Web Editor
[ 286 ]
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 le.

• Step 1: Create
news.xml in the <install-alfresco>/tomcat/webapps/
surf/WEB-INF/classes/alfresco/site-data/pages
folder. Insert the
following code:
<?xml version='1.0' encoding='UTF-8'?>
<page>
<id>news</id>
<title>What's New</title>
<description>Sample Cignex News page</description>
<template-instance>news</template-instance>
<authentication>none</authentication>
</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:
<?xml version='1.0' encoding='UTF-8'?>
<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">
<html xmlns=" /> <head>
<title>${page.title}</title>
${head}
</head>
<body>

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

<table width="100%" cellspacing="0" cellpadding="0"
border="0">
<tr>
<td valign="top">
<img src="/surf/images/cignex/learn-more-2.gif" border=0
alt="Click To View">
</td>
</tr>
<tr>
<td valign="top">
<img src="/surf/images/cignex/liferay-offer-1.gif"
border=0 alt="Click To View">
Download from Wow! eBook <www.wowebook.com>
Chapter 9
[ 287 ]
</td>
</tr>
<tr>
<td valign="top">
<img src="/surf/images/cignex/alfresco-offer-1.gif"
border=0 alt="Click To View">
</td>
</tr>
<tr>
<td valign="top">
<img src="/surf/images/cignex/alfresco-challenge_0.gif"
border=0 alt="Click To View">
</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.
Download from Wow! eBook <www.wowebook.com>
Alfresco Surf and Web Editor
[ 288 ]
• Step 4: Go to the <install-alfresco>/tomcat/webapps/surf/WEB-INF/
classes/alfresco/site-data/page-associations
folder.
• Step 5: Create a new le
index-news.xml. With this we are associating index
page to news page and vice versa. Insert the following code:
<?xml version='1.0' encoding='UTF-8'?>
<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 le
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 le. Insert the following code.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<meta name="description" content="Small Corporation" />
<meta name="keywords" content="small, corporation" />
<link rel="stylesheet" type="text/css" href="${app.context}/css/
style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="${app.context}/css/
base.css" media="screen" />
<table>
<tr>
<td>
<img src="/surf/images/cignex/cignex-logo.png" border=0
alt="Click To View">
</td>
</tr>
</table>
<#if renderer == "horizontal">
<@horizontal page=rootpage showChildren=true/>
</#if>
Download from Wow! eBook <www.wowebook.com>
Chapter 9
[ 289 ]

<#macro horizontal page showChildren>
<#assign currentPageId = "">
<#if context.pageId?exists>
<#assign currentPageId = context.pageId>
</#if>

<ul id="menu">
<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>
Download from Wow! eBook <www.wowebook.com>
Alfresco Surf and Web Editor
[ 290 ]
<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 dened in Alfresco WCM.
Download from Wow! eBook <www.wowebook.com>
Chapter 9
[ 291 ]
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 workow 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 congure 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 le. 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>
<description>
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>
Download from Wow! eBook <www.wowebook.com>

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

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về