WSF

[resplin]

Obsolete Pages{{Obsolete}}

The official documentation is at: http://docs.alfresco.com

{{AVMWarning}}
AVM

Table of Contents

• 1 Alfresco WCM Website Framework (WSF)


• 2 WSF Features


• 3 Manual Installation
  
  
  
  • 3.1 Uploading Site and Forms:
  
  


• 4 Quick Installation


• 5 Roadmap

Alfresco WCM Website Framework (WSF)

The Alfresco Website Framework is (currently) an Alfresco Forge Project whose goal is to produce a basic website framework/skeleton that provides web developers a starting point for building new websites using Alfresco WCM. The WSF is Copyright of Alfresco and licensed under GPL.

Important Note: The WSF should currently be considered and viewed as an experimental playground as we explore ways of developing a series of best practices and design patterns for Alfresco WCM site development. Please keep this in mind as you begin to explore the WSF. Your feedback and suggestions are critical to the project's success. The eventual goal is to turn these into a robust and scalable platform for all Alfresco-based WCM activities.

WSF Features

• Dynamic Navigation Channels
  
  • Three-level site navigation tree: Modeled and managed as web content.
    
  • Horizontal, Vertical Navigation: DHTML drop down menus and breadcrumbs.
    

• Content Lists
  
  • Latest Content: Content list based on timestamp 
    
  • Channel Content List: List of content under centain channels/ 
    
  • Multimedia File List: Embedded Flash Player lists videos and audio files.
    
  • Alfresco Documents: Traditional alfresco document list (via Open Search) 
    
  • Featured Content List: Highlight a specific article to be featured on the front page.
    

• Single Content View
  
  • Content Details 
    
  • Picture of The Day: Supports slide show of multiple pictures.
    
  • Message of The Day: Single text block.
    

• Sitemap
  
  • Implements Google Sitemap 
    

• Site Treeview
  
  • Treeview of all site assets and their properties. 
    

• Site Statistics
  
  • Display metrics related to site dynamic content.
    

• Map Mashup
  
  • Display dynamic content (user profile) on Yahoo map.
    

• Content Syndication
  
  • Alfresco document feed via Open Search REST API.
    
  • Alfresco WCM web content feed (Articles) in RSS format.  
    

• Site Preview
  
  • Site Preview toolbar 
    

• Site Configuration
  
  • Many site parameters are configurable e.g. style, header, footer, navigation, tool bar, locale   etc.
    

• Content Search (2.1)
  
  • Both Articles and News-Flashes are searchable via web scripts. Search includes both simple keyword search and advanced search.
    

• PDF Generation (2.1)
  
  • Generate PDF files for both Articles and News-Flashes.
    

Manual Installation

1. The code from the SVN server includes a pre-generated demo-website.war file under the 'extra' folder. You can freely use this and skip the following three steps. If you wish to build from scratch, please read on.
   
2. Setup three environment variables
   
   1. ALFRESCO_REPOSITORY -- points to the root folder of your local alfresco svn repository.
      
   2. TOMCAT_HOME -- points to your alfresco tomcat home folder.
      
   3. VIRTUAL_TOMCAT_HOME -- points to your virtual alfresco tomcat home folder.
      
3. Run ant script to build your alfresco instance.
   
4. Run ant script  under alfresco/core.
   
   1. If you point ALFRESCO_REPOSITORY to Enterprise HEAD, run ant -f build-head.xml build-demo-website
      
   2. For others, run ant build-demo-website
      

Uploading Site and Forms:

Create and configure new web forms with XSD files under folder contentmodels and associate them with the corresponding XSLs under folder templates. When setting up web forms, take all default values except for the Output path pattern. For 2.1, all web forms must be associated with a default workflow.

1. 1. Web form: article.
      
      1. Content output path pattern: /${webapp}/content/article/${name}.xml
         
      2. Template: article.xsl Output path pattern: /${webapp}/content/article/${name}.${extension}
         
      3. Template: article-list.xsl Output path pattern: /${webapp}/content/article/${name}-list.jsp
         
      4. Template: article-feature.xsl Output path pattern: /${webapp}/content/article/${name}-feature.jsp
         
      5. (2.1) Template: article-pdf.xsl (Type: XSL-FO, Rendition mimetype:  application/pdf) Output path pattern: /${webapp}/content/article/${name}.${extension}
         
      6. Template: article-rss.xsl Output path pattern: /${webapp}/content/article/${name}-rss.xml
         
   2. Web form: news-flash.
      
      1. Content output path pattern: /${webapp}/content/news-flash/${name}.xml
         
      2. Template: news-flash.xsl Output path pattern: /${webapp}/content/news-flash/${name}.${extension}
         
      3. Template: news-flash-list.xsl Output path pattern: /${webapp}/content/news-flash/${name}-list.jsp
         
      4. Template: news-flash-feature.xsl Output path pattern: /${webapp}/content/news-flash/${name}-feature.jsp
         
      5. (2.1) Template: news-flash-pdf.xsl (Type: XSL-FO, Rendition mimetype:  application/pdf) Output path pattern: /${webapp}/content/news-flash/${name}.${extension}
         
   3. Web form: multi-media.
      
      1. Content output path pattern: /${webapp}/content/multi-media/${name}.xml
         
      2. Template: multi-media-list.xsl Output path pattern: /${webapp}/content/multi-media/${name}-list.${extension}
         
   4. Web form: navigation.
      
      1. Content output path pattern: /${webapp}/content/navigation/${name}.xml
         
      2. Template: navigation-sitemap.xsl Output path pattern: /${webapp}/content/navigation/${name}-sitemap.xml
         
      3. Template: navigation-menu.xsl Output path pattern: /${webapp}/content/navigation/${name}-menu.${extension}
         
   5. Web form: motd.
      
      1. Content output path pattern: /${webapp}/content/motd/${name}.xml 
         
      2. Template: motd.xsl Output path pattern: /${webapp}/content/motd/${name}.${extension}
         
   6. Web form: potd.
      
      1. Content output path pattern: /${webapp}/content/potd/${name}.xml 
         
      2. Template: potd.xsl Output path pattern: /${webapp}/content/potd/${name}.${extension}
         
   7. Web form: profile.
      
      1. Content output path pattern: /${webapp}/content/profile/${name}.xml 
         
      2. Template: profile.xsl Output path pattern: /${webapp}/content/profile/${name}.${extension}
         
   8. Web form: site-configuration.
      
      1. Content output path pattern: /${webapp}/content/site-configuration/${name}.xml 
         
2. Create a new web project and associate it with all eight web forms we just created.
   
3. Bulk import the 'demo-website.war' file.
   
4. Create a site-configuration content item using web form, site-configuration, and name it as SC and put it under '/content/site-configuration'. You can just create a dummy one with the name SC and then update it with the SC.xml under extra folder.
   
5. Create a  navigation content item using web form, navigation, and name it as NavigationTree and put it under '/content/navigation'. Again, you can just create a dummy one and update it with NavigationTree.xml under extra folder. If you want to use different name, you then need to adjust the navigation setting in SC.xml.
   
6. Create web content, MOTD, POTD, News flash, Article  etc. and put them under corresponding folders under '/content'. To make news-flashes and articles available for channel pages, you need to edit your navigation content item and link them as content links (Check Feature option if you want them to be displayed as feature items). For MOTDs and POTDs, you can do the channel association when you edit them.
   
7. (2.1) Copy three jars (cglib-nodep-2.2_beta1.jar,hibernate-3.2.1.jar,log4j-1.2.8.jar) from tomcat\webapps\alfresco\WEB-INF\lib to virtual-tomcat\common\lib
   
8. (2.1) Upload web scripts (under webscripts\source ) to Data Dictionary\Web Scripts Extensions
   
9. For map mashup, if it asks for a new site key, go to Google Map API site and sign up key for your site url. For example
   

http://demo.www--sandbox.127-0-0-1.ip.alfrescodemo.net:8180/views/pages/
And then edit views/pages/my-tools.jsp and replace the old key with your own key.

Quick Installation

The Community has released an AMP plugin called Web Project Tools that provides the WCM administrator with some additional nifty features.  Among them is the automatic import of Web Projects.

A Web Project Library has been established into which WCM sample web projects will be placed.  Among the first of these is WSF 1.5!  You may wish to visit the Web Project Library page to learn more about this. 

Roadmap

As we look towards evolving WSF, we hope to introduce a full-featured web development framework, AJAX support, widgets, skinnable UI templates and more.

Here are some ideas:

• Web Development Framework: It would be beneficial to integrate WSF with one (or more) web frameworks such as Tapestry, Cocoon, Struts, etc. One key design goal, however, is that while support for an MVC architecture is desirable, we don't want to 'slow down' the development process by requiring that the controllers be compiled. As such we're looking for a Java-compatible MVC web development framework that perhaps leverages dynamic languages. We're leaning towards using Groovy and Grails.
  
• Dynamic Website: Dynamic content selection using [Web Scripts] as the back-end components and a front-end tag library.
  
• Skinnable UI: We wish to establish CSS and UI conventions that facilitate the process of 'skinning' or branding the website.
  
• AJAX Support: As we look to add more interactivity to WSF, it would be ideal to use AJAX and DHTML techniques and integrate them into the content model and upcoming WCM search features. Possible toolkits include GWT, MooTools, YUI, Prototype, Dojo, etc.
  
• Content Syndication and Mashable APIs: No web framework in this day and age would be complete without support for syndication formats (RSS and ATOM) and APIs (using REST, XML, JSON). As such, a skeleton package of syndicators and APIs would be beneficial to developers.
  
• User Generated Content: Support for comments, tagging, perhaps blogs, etc.
  
• User Management: This is more of a nice-to-have, but it's possible to have Alfresco WCM offer the ability to create 'community sites' as such user management becomes critical. We could use something like OSUser as the foundation for this.