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="http://www.w3.org/1999/xhtml"> <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 reected. 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 specic region of a page and also species 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 dened. The Surf framework denes 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 dened. • 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 dened 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" /> <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> Download from Wow! eBook <www.wowebook.com> Chapter 9 [ 285 ] 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 dened 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="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"> 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 dened 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 workow 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 congure 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> . 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> 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> •. 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. •