Every space can be viewed in four different ways. These are as follows:

For Windows users, this is similar to having various view options for folders in Windows Explorer. The Details view, Icon view, and Browse view are provided out of the box. The Custom View is a customized view of that space, which is selected by the user.

The default view for a space is the Icon View. You can choose a specific view (say, Details View) by selecting it from the drop-down list, as highlighted in the screenshot below. However, the selection is going to be saved only for that session, and the next time you log in to the Alfresco web client, you will see the default view of the space. You can configure the default view for spaces. You can also specify the number of items to be displayed on a page.

You can find the details about the default configuration in the file named,web-client-config.xml, which is located in your configuration folder. To customize the default view, you need to update the web-client-config.xml file in the extensions folder. Go to extensions folder (for Tomcat installation it is in the following folder: <alfresco_install_folder> omcatsharedclassesalfrescoextension). Here, you will have to edit the web-client-config-custom.xml file, and add the following block of XML code. If you want to display the details of all of the documents in your space (as shown in the screenshot on the previous page), then you can set View Details to default. If you want to see more documents on a page, then you can increase the number of documents displayed per page from 10 to 25.

<config evaluator="string-compare" condition="Views">
       <!-- the views available in the client -->
  <views>
       <!-- default values for the views available in the client -->
    <view-defaults>
      <browse>
       <!-- allowable values: list|details|icons -->
        <view>details</view>
        <page-size>
        <list>10</list>
        <details>25</details>
        <icons>9</icons>
        </page-size>
       </browse>
    </view-defaults>
  </views>
</config>

 reload

A Custom View is a portal window that shows up on the top of each space when a Custom View option is selected. This is useful for representing the content in a space in a specific manner, such as showing recent documents and a summary of the documents. For example, you can apply a custom view on the Finance Department | Checks space to display a list of checks received in the past week.

This enables you to have an alternate view of spaces through templates. Other such examples include:

Let us say you would like to see all of the documents in your home space that have been either created or modified in the past one week. Carry out the following steps to apply a custom view to do this your home space.

By default, the topic view in the forums functionality lists the posts in descending order, that is, the most recent post is at the top of the list. If you wish to change this, then add the following XML text to the web-client-config-custom.xml file. You can also define the number of posts listed per page.

<topic>
       <!-- allowable values: details|bubble -->
  <view>bubble</view>
  <sort-column>created</sort-column>
       <!-- allowable values: ascending|descending -->
  <sort-direction>ascending</sort-direction>
  <page-size>
    <bubble>5</bubble>
    <details>20</details>
  </page-size>
</topic>

In order to add another space icon to the list from which we choose from when creating a space, add the following code to the web-client-config-custom.xml file.

  <!-- Example of adding a custom icon to the Create Space dialog -->
<config evaluator="string-compare" condition="cm:folder icons">
  <icons>
    <icon name="space-icon-custom" path="/images/icons/
                                           space-icon-custom1.gif" />
  </icons>
</config>

A similar approach can be used to add icons to the forums space types (fm:forums, fm:forum and fm:topic).

Once you add the custom icon names to the web-client-config-custom.xml file, you need to make sure that the icons with the same filename are copied to the file system icons folder. For an installation of Tomcat, the icons folder is at <install_folder> omcatwebappsalfrescoimagesicons. Also, for uniformity, ensure that all of the icons are sized to 32 x 32 pixels.

As per the example, create a .gif file icon named space-icon-custom1.gif (32 x 32 pixels in size) and copy it to icons folder. Once you reload the web-client-config-custom.xml file, you will notice the new icon when creating a space, as shown in the following screenshot:

You can control certain HTML links that appear in the web client. For example, there is a small help icon in the menu at the top. By clicking on this icon, you can navigate to Alfresco's web site. You can update the lines that follow in the web client configuration file to point the help index to your internal online help guide (if you have any). The URL to the client Help file is <help-url>http://www.alfresco.org/help/webclient</help-url>.

There are certain dashlets provided to you out of the box. Because the dashboard is a place where you can see dynamic information, you might consider having custom dashlets to provide you with important information. For example, you might want to see the list of contracts approved in the last seven days. You might also want to see the latest press releases.

Usually, custom dashlets are written in a scripting language such as FreeMarker, and are called from a JSP (Java Server Page). The JSP can be configured in the web client so that the custom dashlet is visible for you to select in the dashboard.

The following steps need to be followed in order to write and configure a custom dashlet:

<#------------------------------------------------------------------>
<#-- Name: chapter11_press_releases.ftl                           -->
<#--Displays a table of all the documents from a "Press Releases"-->
<#-- folder under Company Home/Intranet/Press and Media space     -->
<#-- NOTE: Obviously this folder needs to exist and               -->
<#--      the docs in it should have the title and content       -->
<#------------------------------------------------------------------>
<table>
  <#assign l_space = companyhome.childByNamePath["Intranet/Press and 
                                            Media/Press Releases"]>  
    <#list l_space.children as doc>
      <#if doc.isDocument>
      <tr>
        <td>
          <a class="title"href="/alfresco/${doc.url}">$
                                      {doc.properties.title}</a></td>
        </tr>
      <tr>
        <td style="padding-left:8px">
          <#if (doc.content?length > 500)>
            <small>${doc.content[0..500]}...</small>
          <#else>
            <small>${doc.content}</small>
           </#if>
         </td>
      </tr>
      <tr><td> <HR> </td></tr>
      </#if>
    </#list>
</table>

<%--
Name   : chapter11_press_releases.jsp
Purpose: Dashlet to display the latest press releases
--%>
<%@ taglib uri="/WEB-INF/repo.tld" prefix="r" %>
<%-- Note that this template is loaded from the classpath --%>
<r:template template="/alfresco/templates/chapter11_press_releases.ftl" />

<config evaluator="string-compare" condition="Dashboards">
<!-- Dashboard layouts and available dashlets for the My Alfresco 
                                                         Pages -->
  <dashboards>
    <dashlets>
<!-- Add additional dashlet for press releases -->
      <dashlet id="press-releases" label="Press Releases"
                          description="Lists Press Releases with URL"
         jsp="/jsp/dashboards/dashlets/chapter11_press_releases.jsp" 
                                               allow-narrow="true" />
    </dashlets>
  </dashboards>
</config>

Use the Custom Dashlet in the My Alfresco Dashboard

Click on the My Alfresco link provided in the tool bar menu to view the Dashboard. Click on the Configure icon shown in the My Alfresco Dashboard, and the Configure Dashboard Wizard will display the custom dashlet in Step Two. Then, select the Components screen, as shown in the following screenshot:

Select the Press Releases dashlet for Column 2, as shown in the preceding screenshot. Once you finish the configuration, the custom dashlet in your dashboard will look similar to the one shown in following screenshot:

Alfresco provides a webscript feature as an easy way to interface other applications with the repository. In the previous section we saw how to customise a dashlet by using FreeMarker templates. Using the example that is given below, we will use webscript as a dashlet.

The following steps are required to configure a dashlet as webscripts:

<%--
Purpose   : Dashlet to display the summary information of Home Space
Created by: Amita Bhandari
Created on: November 27, 2008
--%>
<%@ taglib uri="/WEB-INF/repo.tld" prefix="r" %>
http://localhost:8080/alfresco/service/ui/myspaces?f=0
<r:webScript scriptUrl="/wcs/ui/myspaces?f=0" />

<config evaluator="string-compare" condition="Dashboards">
    <!-- Dashboard layouts and available dashlets for the My Alfresco Pages -->
	  <dashboards>
		<dashlets>
	      <!-- Add additional dashlet for press releases -->
		  <dashlet id="MySpaces" label="MySpaces"
							  description="Webscript Dashlet for My Spaces"
			 jsp="/jsp/dashboards/dashlets/Chpater11-myspaces-webscript.jsp" 
   allow-narrow="true" />
		</dashlets>
	  </dashboards>
</config>

Configure the My Spaces dashlet

Configure the newly-created My Spaces custom webscript dashlet in the dashboard the same way, as we configured the JSP custom dashlet in the My Alfresco dashboard, as shown in the following screenshot:

Custom dashlet

Once you configure the dashlet, you can see your webscript dashlet, as shown in the following screenshot.

The space Company Home > Data Dictionary > Presentation Templates contains both, built-in and custom presentation templates. A presentation template can be used to preview the content and to provide the look and feel of the content. An example of a presentation template is provided in Chapter 7, where a custom template is used to preview the Press Release content. Presentation templates are written in the FreeMarker template language and will have an .ftl extension.

FreeMarker is an open-source template engine. It is a generic tool for generating text output (which can be anything from HTML to auto-generated source code) based on templates. FreeMarker is designed to be practical for the generation of HTML web pages, by following the MVC (Model View Controller) pattern. The idea behind using the MVC pattern for dynamic web pages is that you separate the content authors from the programmers. This separation is useful, even for projects where the programmer and the HMTL page author are the same person, as it helps to keep the application clear and easier to maintain.

In the diagram below, the content authors create document content in Alfresco. The programmers create the presentation template file with stylesheets, HTML code, and take care of the look and feel. The final content will be generated by the FreeMarker engine (which is embedded in Alfresco), by applying the presentation template to the document content, as shown in the diagram.

The FreeMarker template engine is embedded within Alfresco. FreeMarker takes the Alfresco data model as input and generates text (HTML or XML) as output. FreeMarker also supports XSLT to translate XML content.

The default model provides a set of named objects that wrap Alfresco node objects, to provide a rich, object-oriented layer that is suitable for scripting usage. If you are accessing the templates through the web-client UI, then the following named objects are provided by default.

For example, consider the following FreeMarker template.

<html>
  <head>
    <title>Welcome!</title>
  </head>
  <body>
    <h1>Welcome ${person.properties.userName}!</h1>
  </body>
</html>

At run-time, the value of the variable person.properties.userName will be the name of the current user who is accessing the system. Therefore, the template generates a dynamic greeting message.

These objects, and any child node objects of them, are called template node objects. These template node objects provide the following API:

As with any other programming language, FreeMarker template language also supports fundamental directives, such as the following ones:

#if, #else, #elseif
#switch, #case
#list
#assign
#function
#include
<#-- comment -->

Let us develop a custom template to preview HTML documents.

Log in as the admin, go to the Company Home | Data Dictionary | Presentation Templates space, and create a new template and name it appropriately (say, chapter11_web_template.ftl). The template should display the web-page layout, as shown in the screenshot below. The template can be applied to any text or HTML document in the Alfresco repository, in order to generate a web page with layout, as shown in the following screenshot:

You can consider using the following code to create a custom template. The code uses the images in the Alfresco repository to display the horizontal bar at the top and the vertical bar on the righthand side. Note that the image URLs may change in the code, based on the location of the actual images in your repository. You can use your own images or you can even create the HTML header and table structure in your application.

The template extracts the document titles and displays them as page headings. Refer to the FreeMarker template code ${document.properties.title}. Similarly, the template extracts the document content and displays it in center portion of the page, as shown in the screenshot below the code. Refer to the FreeMarker template code ${document.content}.

<#------------------------------------------------------------------>
<#-- Extracts Title and Description from Content and              -->
<#--                    shows in web template                     -->
<#------------------------------------------------------------------>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2" valign="top">
      <img src=
"http://localhost:8080/alfresco/download/direct/workspace/SpacesStore
                                /bfcc8130-4537-11db-972a953696db55bc/
                                 chapter11_template_top_image.png" />
    </td>
  </tr>
  <tr>
    <td valign="top">
      <BR>
      <H4> ${document.properties.title} </H4>
      <HR>
      ${document.content}
    </td>
    <td valign="top">
      <img src=
           "http://localhost:8080/alfresco/download/direct/workspace/
                    SpacesStore/c87378c9-4537-11db-972a-953696db55bc/
                               chapter11_template_right_image.png" />
    </td>
  </tr>
</table>

Create a new HTML document in one of the spaces in your Alfresco Explorer. Use the Preview in Template action button to preview the document. Choose the custom template (in this example it is chapter11_web_template.ftl) to display the document content. The sample preview screen is shown in the following screenshot:

The FreeMarker template engine can be used for XSLT (XML transformations) to transform XML content to HTML, with an appropriate look and feel.

This is a classic solution for storing the data in the Alfresco's repository in native XML format and using FreeMarker custom templates to display the XML data in HTML format.

To test the XML transformation features, you will first need to create an XML document in Alfresco. You can either create this as an XML file (say, book.xml) on your desktop and upload it to the Alfresco web client, or you can directly create this XML document in Alfresco. Create a document called mybook.xml in one of your Company Home | Intranet spaces, with the following content:

<?xml version="1.0" standalone="yes"?>
<book title="Book Title">
  <chapter>
    <title>Chapter 1</title>
    <para>p1.1</para>
    <para>p1.2</para>
    <para>p1.3</para>
  </chapter>
  <chapter>
    <title>Chapter 2</title>
    <para>p2.1</para>
    <para>p2.2</para>
  </chapter>
</book>

Create a template in the Company Home | Data Dictionary | Presentation Templates space called xmlbook.ftl, containing the following code:

<#if document.mimetype = "text/xml"> 
    <#assign dom=document.xmlNodeModel> 
        <h1>${dom.book.@title}</h1> 
    <#list dom.book.chapter as c> 
        <h2>${c.title}</2> 
        <#list c.para as p> 
            <p> ${p} </p> 
        </#list> 
    </#list>     </#assign>
</#if>

The template displays the title of the book and chapters using HTML tags. When you apply the xmlbook.ftl template to the book.xml document, you will see output is similar to that shown in the screenshot below:

Custom space view is a portal window, which shows up on the top of each space when a Custom View is selected. If you are implementing Alfresco for various departments and groups, then you might consider having custom home pages for each department or group space.

As an example, let us build a Custom View for all of the department spaces. Let us say each department space contains two files: home_image.png and home_page.html. Let us apply a presentation template, as a Custom View for the department space, which displays these two local files in that department as the department home page.

Create a template in the Company Home > Data Dictionary > Presentation Templates space called chapter11_dept_home_template.ftl, and containing the following code:

<#------------------------------------------------------------------>
<#--      Displays Home Page for each department using    -->
<#-- (1) Home Page Image file home_image.png and                 -->
<#-- (2) Home Page HTML file home_page.html                      -->
<#-- By Munwar Shariff, Nov 16, 2006                              -->
<#------------------------------------------------------------------>
<H4> Welcome to ${space.properties.title} </H4>
<#list space.children as child>
  <#if child.properties.name = 'home_image.png'>
    <img src="/alfresco${child.url}">
  </#if>
</#list>
  <#list space.children as child>
    <#if child.properties.name = 'home_page.html'>
      ${child.content}
  </#if>
</#list>

Next, create a sample space (say Department A). Within that space, create two content files, with names home_image.png (the department image) and home_page.html (the department description). Next select chapter11_dept_home_template.ftl template as a Custom View for your space (the Department A space).

The steps to apply a presentation template as a Custom View are explained in the Applying Custom View on a space section of this chapter. You will notice that the Custom View of your space is as shown in the screenshot on the next page.

This can be applied to each and every department and group within your organization. Consider having the department space as the space template, so that you can reuse the department space template to create spaces for many departments. More information about space templates is provided in Chapter 5.

Department members can update the image file and the HTML file, as required, to alter the home page information dynamically. Similarly, you can use the various presentation templates to display the information in a specific space.

Let us customize a Getting Started Dashlet . As an example, you want to display the information about the Alfresco book in the Getting Started Dashlet for the site that you have configured. For this, you have to customize the Getting Started Dashlet.

Carry the following steps in order to customize the dashlet:

The following are the two features of Alfresco Share 3.0:

The Alfresco Book Project Site will look similar to the following screenshot:

The Alfresco Book Project Site has a Search option, which helps us to search for the file that we are looking for. We just need to enter the name of file that we are looking for, in the Search Query box, and then click on the Advanced button, as shown in the following screenshot:

The following are the Alfresco foundation APIs:

Suppose there is an existing portal for a travel agency named Fun Travels Ltd. This portal is developed on another platform. The agency has various Galleries, Articles, Guidelines, Forms, etc. They want to store, this content on, and fetch this content from, the Alfresco repository.

In order to implement this, you have to customize the user interface of this portal in such a way that when you click on any of their existing links, such as Galleries, Articles, Guidelines, and so on, the screen should appear so that we can enter some useful data. On the basis of this information, you have to fetch content from, or add content into, the Alfresco repository.

The JSP's will have their own UI to deal with Alfresco, and these JSPs will be called on each link, asking for the data to be entered. On submission, Alfresco beans will be called, which will fetch the content and send it to the portal.

The following are the code snippets provided: