Managing Multiple Websites Using WCM [ 262 ] In order to make the USA website contents of the /Images and /Products directories on the UK website, you would have two options: • Option 1 is to make a separate copy for the UK website. It means a specic le has two different copies. The issue with this approach is that if the USA website updates an image (say product1.jpg), then those updates are not applied on the UK website. You need to make sure you update those changes on the UK website as well. If the size of the website is large with hundreds and thousands of les and pages, then it will be very expensive to maintain two copies of the les. • Option 2 is to make a symbolic link of the USA website for UK. Now any updates done on the USA website are seen on the UK website as well. It is like an alias or a Unix-style symbolic link. The advantage of this approach is that there is only one copy of les to manage, which is easier. This issue with this approach is that if the UK website needs to make a few changes to a page (say product2.html), then it is not possible. Alfresco WCM provides a strong feature called Transparent Folder where it is possible to have both option 1 and 2. You can have only one copy of the les to maintain globally and also have the exibility to update a few of them locally. For example, consider that the UK website uses Images and Products as two transparent folders from the USA website. It means that the USA website has the master copy (only one copy) and the UK website has symbolic links to those folders. Now any updates done in the USA website will automatically be seen on the UK website. Say you updated product1.jpg on the USA website, then the changes are seen on the UK website. If you make any modications to the les on the UK website, then a separate copy of that le alone will be created on the UK website. For example, if you update product2.html on the UK website, then a separate copy is made for that le for the UK website. From this point onwards, there will be two separate copies of the product2.html le with different versions and content in these two websites. Creating a transparent folder Let's create a web project with a few folders and les. 1. Create a web project called USA Web Site. 2. Go to User Sandbox and create folders called Images and Products. 3. In the Images folder, add two images (say product1.jpg and product2.jpg). Download from Wow! eBook <www.wowebook.com> Chapter 8 [ 263 ] 4. In the Products folder, add two HTML pages (say product1.html and product2.html). 5. Submit all of these les and folders to the Staging Sandbox. 6. Browse the Staging Sandbox to view these folders and les. Now create another web project called UK Web Site. Do not create any folders or les in UK Web Site. Go to the Staging Sandbox of the UK Web Site and click on the Create Layered Folder link as shown in the following screenshot: You can create a layered folder using a target folder from a target web project. Create the Images folder in the UK Web Site, using the Images target folder from the USA Web Site target web project as shown in the following screenshot: Download from Wow! eBook <www.wowebook.com> Managing Multiple Websites Using WCM [ 264 ] It is not mandatory to use the same name for the layered folder as the target folder name. You can use any name for the folder in the UK Web Site. It is not mandatory to use "Images" as folder name in the UK Web Site. However, to maintain simplicity and to avoid naming conicts, it is advised to use the same folder names. Similarly, you can link to any number of web projects and folders. For example, you can use the "Images" folder from the USA Web Site and "Videos" folder from the Germany website and so on. You will notice that a new folder called Images is created in the UK Web Site with the Type specied as Layered Folder as shown in the following screenshot. Click on the Images folder and notice two images. These were the images that were created in the USA Web Site and are automatically available to the UK Web Site due to layered folder. Similarly, create a transparent folder for the "Products" folder. Now you will notice two transparent folders in UK Web Site. Updating a source le Updating the le in USA Web Site will automatically update the le in UK Web Site. Browse to USA Web Site | User Sandbox | Images and update the product1.jpg le. Submit the changes to the Staging Sandbox. Notice the timestamp of the le and also the versions as shown in the following screenshot. Download from Wow! eBook <www.wowebook.com> Chapter 8 [ 265 ] Now browse to the UK Web Site and notice that the image is updated automatically including the versions as shown in the next screenshot. Basically, the image is not updated; we are seeing the same image information through the link. If a le is deleted in the source web project, the le will automatically be removed from the web projects where the parent folder is used as a layered folder. Download from Wow! eBook <www.wowebook.com> Managing Multiple Websites Using WCM [ 266 ] Updating the destination le If you make any modications to the les in layered folder, then a separate copy of that le alone will be created. From that point onwards, they are considered as two different les. Refer to the following screenshot. For example, if you update product1.jpg on the USA Web Site, then a separate copy is made in the UK Web Site. From this point onwards, there will be two separate copies of the product1.jpg le with different versions and content on these two websites. Deleting les If you delete a le from the source, then the le will automatically be deleted on all of the destinations. For example, if you delete a le product1.html in USA Web Site, then the le will automatically be removed from UK Web Site as well. Download from Wow! eBook <www.wowebook.com> Chapter 8 [ 267 ] On the other hand, if you remove product2.html from UK Web Site, then it is considered as a separate copy and the original le in source location (USA Web Site) will not be deleted. Adding new les If you add a le in a source, then the le will automatically be added in all the destinations. For example, if you add a le product3.html in USA Web Site, then the le will automatically be added to UK Web Site. On the other hand, if you add product4.html in UK Web Site, then it is considered as a new addition only in the UK Web Site. Summary In Alfresco WCM, you can use a single web project to manage multiple websites. You can have many web projects in a single instance of Alfresco. These web projects can share common web forms, templates, and workow. The layered folder concept is very powerful, where you get both efciency and exibility in managing content across multiple websites. Download from Wow! eBook <www.wowebook.com> Download from Wow! eBook <www.wowebook.com> Alfresco Surf and Web Editor Alfresco Surf is an application framework for developing and delivering dynamic websites. Surf enables the rapid creation of next-generation, productivity-focused web applications designed to deliver your content to websites and web users. Alfresco Web Editor is an application developed using the Spring Surf platform. It provides in-context editing capabilities for Alfresco repository content. In this chapter you will learn: • Surf architecture and single-tier/two-tier applications • Surf APIs used by presentation tier and model objects • Designing a web application on the Surf platform • Communication of Surf Applications with Alfresco WCM using web scripts • Creating a rich User Interface application using YUI libraries • About Alfresco Web Editor • Alfresco Web Editor Tag Library • Sample Web Application using Alfresco Web Editor Alfresco Surf platform Alfresco Surf is a lightweight, scriptable web framework built on top of the Alfresco web scripts technology and Templating runtime. It provides a highly extensible and customizable web framework for page layout and a component framework for building web applications. It works well with web scripts, can remotely call web services (that is, REST), and also has multiple programming options. Applications built using Surf can be deployed on a standalone server. It has zero dependencies on the Alfresco repository but use it as a backend "model". A web application built using the Surf framework has many objects in places like pages, templates, themes, and components. Any application built using Surf can be deployed from the Alfresco Web Project, taking full advantage of Alfresco WCM's enterprise features. Download from Wow! eBook <www.wowebook.com> Alfresco Surf and Web Editor [ 270 ] Surf has been designed to leverage web-enabled tools that expose powerful capabilities such as inline editing, drag-and-drop positioning of content, point- and-click template selection, and so on. These tools make it possible for users with little technical training to manage dynamic websites. Alfresco Surf is a lightweight, scriptable Java-based web framework that provides the ability to quickly create dynamic websites using concepts such as pages, templates, themes, and components. The Surf platform was designed to specically make it: • Lightweight (around 8 to 9 MB) and scriptable. No server restart or content reloading is required. You only need to refresh. • Easy to customize by using XML conguration les and it also has a Developer API. • Work well with Alfresco WCM—it reads and writes from the Alfresco repository. • Equipped with an out-of-the-box and extensible Site Dispatcher, Component model, or Site construction model. Applications built with Alfresco Surf can be considered as standalone and deployed on any application server. The application can also be used in Alfresco WCM and deployed from Alfresco Web Project spaces to production servers while making use of Alfresco WCM features. This gives the advantage to use many features of Alfresco WCM that are required for developing any website. Some of the features are listed as follows: • Approval of Surf components using workows • Allows to make and preview changes without any additional server requirement • All of the changes that are on the Staging box can roll back to any version • Alfresco Surf-powered applications can retrieve all of their runtime data from the local disk, the classpath, or from the Alfresco repository via REST The Surf platform consists of several integrated parts. To help facilitate this, the Surf platform uses a lightweight XML-driven model to store all model objects that make up the website. Model objects are things such as pages, templates, components, themes, and chrome. Download from Wow! eBook <www.wowebook.com> Chapter 9 [ 271 ] Alfresco Surf RESTful platform uses Yahoo's YUI AJAX library and Adobe Flash for a more interactive user experience. Surf allows you to take a page and split it up into template and components. This allows for a total separation of the look and feel and the components. Both the template and the components have renderers to generate outputs. You can even use PHP renderers, that is, you can use the model of Alfresco but the actual page is rendered in PHP. Most of the Surf components are envisioned to be written using web scripts. With web scripts and their rich underlying API for extension, no Java coding or server restarts are the most common, and the most powerful, rendering facility. You can also build your own renderers or make use of the out-of-the-box renderers such as JSP, Java Bean FreeMarker Templates, and HTML available. Templates make it possible to dene a page layout once and then reuse it across a large set of pages. In each of these template languages, the essential goal is to layout the placement of regions (or slots) into which components can be bound. You can create single- and two-tier applications. Applications using the Alfresco Surf platform The Surf platform is used by the Alfresco 3.0 release of products to provide a uniform suite of interchangeable functionality. These applications include: • Alfresco Share: Enhanced collaboration and document management services. It provides out-of-the-box web client templates for creating social networking sites. These sites in turn use a rich library of downloadable and shareable themes, components, templates, and application logic. • Alfresco Dynamic Website: This is aimed especially at business users, which allows the rapid self-assembly of web applications and web experiences with minimal IT intervention. Comes with an in-context, drag-and-drop toolkit and allows teams to construct their own web applications that feature user interactions and collaborations. • Alfresco Network: Provides access to Alfresco news, ticket details and resolution, and new services, such as the Knowledge Base and the Web Component library. This is available to the Alfresco Enterprise users. • Alfresco Web Editor: A visual, drag-and-drop designer for building websites with the Alfresco Surf platform. It features graphical overlays that facilitate the building of your website's pages, navigation structure, templates, and presentation layout. We will learn in detail about Web Editor in a later section of the chapter. Download from Wow! eBook <www.wowebook.com> . delivering dynamic websites. Surf enables the rapid creation of next-generation, productivity-focused web applications designed to deliver your content to websites and web users. Alfresco Web Editor. ] Surf has been designed to leverage web- enabled tools that expose powerful capabilities such as inline editing, drag-and-drop positioning of content, point- and-click template selection, and so. About Alfresco Web Editor • Alfresco Web Editor Tag Library • Sample Web Application using Alfresco Web Editor Alfresco Surf platform Alfresco Surf is a lightweight, scriptable web framework