Design site navigation

We will first learn how to create a standalone application using the Surf framework without the use of Alfresco. For this you need to download surf.war and keep it in your web or application server. For this chapter, you can place the WAR file in the<install-alfresco>/tomcat/webapps folder. This doesn't mean that we are using Alfresco for our development. You can also place the WAR file in any standalone server. Start your server. You will find that the surf.war file has exploded and the surf folder is created. You can see the following structure created by default:

Design site navigation

Design a page

Follow the steps below to create a sample page:

  • Step 1: Go to the<install-alfresco>/tomcat/webapps/surf/WEB-INF/classes/alfresco/site-data/configurations folder.
  • Step 2: Open the default.site.configuration.xml file. Insert the highlighted code as mentioned below to create our home page:
    <?xml version="1.0" encoding="UTF-8"?>
<configuration>
<title>Sample Site Configuration</title>
<description>Sample Site Configuration</description>
<source-id>site</source-id>
<properties><root-page>index</root-page></properties>
</configuration>
  • Step 3: Go to the<install-alfresco>/tomcat/webapps/surf/WEB-INF/classes/alfresco/site-data/pages folder.
  • Step 4: Create a new file with the name given previously in the root-page tag. Create the index.xml file. Insert the following code:
    <?xml version='1.0' encoding='UTF-8'?>
<page>
<id>index</id>
<title>CIGNEX | Open Source ECM, BPM , E Commerce , Portals </title>
<description>Sample Cignex home page</description>
<template-instance>index</template-instance>
<authentication>none</authentication>
</page>
  • Step 5: Go to the<install-alfresco>/tomcat/webapps/surf/WEB-INF/classes/alfresco/site-data/template-instances folder.
  • Step 6: Create a new file with the name given previously in the template-instance tag. Create the index.xml file. Insert the following code:
    <?xml version='1.0' encoding='UTF-8'?>
<template-instance>
<template-type>index</template-type>
</template-instance>
  • Step 7: Go to the<install-alfresco>/tomcat/webapps/surf/WEB-INF/classes/alfresco/templates folder.
  • 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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.
    Design a page

    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:
      <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 reflected. You have to explicitly clear the cache. Browse to the cache as follows: 

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

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'?>
<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.

  • 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:
    <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 file, header.get.html.ftl, in the same location and 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" />
<div id="site-header">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" > <img src="/surf/images/logo/cignex-logo.png" alt="Cignex logo" width="159" height="85" border="0" /> </td>
</tr>
</table>
</div>
<ul id="menu">
<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="#">WHAT's New </a></li>
<li><a href="#">RESOURCES</a></li>
</ul>

    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.

    Note

    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/surfWEB-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/.
    Use of a component in a page

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.

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:
    <?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="http://www.w3.org/1999/xhtml">
<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">
</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.

    Design page navigation
  • 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:
    <?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 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.
    <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>
<#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='http://${href}' id='${classId}'>SOLUTIONS</a>
</li>
<li>
<#assign href = linkbuilder.page(page.id, context.formatId)>
<a href='http://${href}' id='current'>SERVICES</a>
</li>
<li>
<#assign href = linkbuilder.page(page.id, context.formatId)>
<a href='http://${href}' id='current'>TECHNOLOGY</a>
</li>
<li>
<#assign href = linkbuilder.page(page.id, context.formatId)>
<a href='http://${href}' id='current'>CUSTOMERS</a>
</li>
<li>
<#assign href = linkbuilder.page(page.id, context.formatId)>
<a href='http://${href}' id='current'>PARTNERS</a>
</li>
standalone application, Surf framework usedpage navigation, designing<li>
<#assign href = linkbuilder.page(page.id, context.formatId)>
<a href='http://${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='http://${href}' id='${classId}'>${parentPage.title}</a>
</li>
</#list>
<li>
<#assign href = linkbuilder.page(page.id, context.formatId)>
<a href='http://${href}' id='current'>COMPANY</a>
</li>
</ul>
</#macro>
  • Step 9: Refresh the Web Script by entering the URL http://<server-name>:<port>/surf/service.
    Design page navigation

    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.

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>
<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>
  • 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.
    <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>
<unsecure>true</unsecure>
</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:
    <webscript>
<shortname>News</shortname>
<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:
    <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 width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top">
<#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, storage, SWF, JSON, image loader, drag-and-drop, and many more.
  • YUI Widgets: It provides a variety of easy-to-use controls, such as Data Table, menu, paginator, progress bar, uploader, image cropper, and many more.
  • 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.

Using YUI (Yahoo User Interface) library

Note

Download the code samples from the Packt website.

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.

Alfresco Web Editor

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 alfresco-enterprise-webeditor-3.3.zip file. Refer to the Alfresco wiki to download the community version: http://wiki.alfresco.com/wiki/Alfresco_Community_Edition_3.3.
  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:

Deploying and using Alfresco Web Editor

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>
<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>
</filter-mapping>

    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.

  • 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 application, customer.war. This is a simple JSP-based application, which uses the tag library provided by AWE.

In this application, we will use the already created content on our custom JSP and will allow users to have an in-context editing facility for that content.

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

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 onhttp://localhost:8080/customer, you can see the screen shown in the following screenshot:

Sample Web Application using Alfresco Web Editor

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:

Sample Web Application using Alfresco Web Editor

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.

Sample Web Application using Alfresco Web Editor

When you click on the Edit icon, it will open the window in which you can edit the title, description, or content. This window is using Alfresco's form service. You can specify which form ID you want to use for in-context editing. As described in the earlier section, with the markContent tag, you can specify the formId attribute, which specifies the form to use for in-context editing. For example:

<awe:markContent id="<%=<<NODEREF>>%>" formId="description" title="Edit News Description" nestedMarker="true" />
Sample Web Application using Alfresco Web Editor

Note

Download the customer.war with modified files from the Packt website.

Web Editor Framework

Web Editor Framework consists of core components and UI widgets. The framework allows you to easily develop and add the plugin. This is achievable because of the nature of the framework, which is supplied by the support of hooks around core methods. The web editor is an event-driven framework. Every core method of a plugin fires a before and an after event for that method.

Core WEF Components

The Core WEF Components are as follows:

  • WEF: The WEF object is responsible for bootstrapping the Web Editor framework onto the page.
  • Loader: The loader is responsible for setting up resources for modules (and any of their dependencies) to be loaded by the browser.
  • ConfigRegistry: The ConfigRegistry object is responsible for maintaining a registry of configuration objects for a specified plugin.
  • PluginRegistry: The PluginRegistry maintains a registry of plugins.
  • Base: The WEF.Base is the core class that all WEF components are based on.
  • Plugin: The Plugin component builds on Base and every plugin is expected to be the one that extends Plugin or one of its subclasses.
  • Widget: A widget is a UI element that can be interacted with. A dialog is a good example of a widget.
  • App: An App is just a plugin and adds no additional methods of its own.
Core WEF Widgets

The Core WEF Widgets are as follows:

  • Ribbon: The Ribbon component is responsible for displaying the ribbon at the top of the page and also for managing and/or registered toolbars and plugins.
  • Toolbar: The Toolbar component is a simple component that manages a collection of buttons.
  • Tabbed Toolbar: The Tabbed Toolbar manages a collection of toolbars that are rendered in different tabs.

Note

For more details on WEF, refer to the link: http://wiki.alfresco.com/wiki/Web_Editor_Framework.

Summary

The Alfresco Surf platform and tools are designed to help users create the next-generation WCM platform that covers both core management aspects and delivery capabilities. The Alfresco Web Editor is a Surf-based application incorporating the Alfresco Form Engine, which facilitates in-context editing of Alfresco repository content.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset