The file web-preview.get.head.ftl defines the additional files to be included to support the display of the page on the client:

<#include "../component.head.inc">
<@link rel="stylesheet" type="text/css" href="${page.url.context}/components/preview/web-preview.css" />
<@script type="text/javascript" src="${page.url.context}/components/preview/web- preview.js"></@script>
<@script type="text/javascript" src="${page.url.context}/js/flash/extMouseWheel.js"></@script>

The file web-preview.js is run when both the page and the web preview component are initialized. The code in this file checks to make sure that a valid node reference was passed in:

// Check mandatory parameters
var nodeRef = args.nodeRef;
if (nodeRef == null || nodeRef.length == 0)
{
status.code = 400;
status.message = "Parameter 'nodeRef' is missing.";
status.redirect = true;
}

Next, it attempts to find the metadata associated with this record from the node reference:

var json = remote.call("/api/metadata?nodeRef=" + nodeRef);
if (json != null && json.toString().trim().length() != 0)
{
var node = {},
n = eval('(' + json + ')'),

This will make a remote call into the Alfresco repository to retrieve metadata for the current node. The URL for the service request will be of the form:

http://localhost:8080/alfresco/service/api/metadata?nodeRef=workspace://SpacesStore/3d3a5066-59bf-45cd-b025-4e5484c9b9af.

http://localhost:8080/alfresco/service/api/metadata?nodeRef=workspace://SpacesStore/3d3a5066-59bf-45cd-b025-4e5484c9b9af.

Next, the code tries to extract the cm:content property from all object metadata for the record:

mcns = "{http://www.alfresco.org/model/content/1.0}",
content = n.properties[mcns + "content"];

The value for the content variable contains a string of concatenated properties for the stored file. For example, the information will look as follows:

contentUrl=store://2010/9/1/12/3/08ac3a0d-0ccf-44f8-a65d- 1ef4666076d5.bin| mimetype=application/pdf| size=108932| encoding=utf-8| locale=en_US_

Embedded in this string, the contentUrl refers to the directory where the Alfresco content store is located. Also encoded in the string are values for the mimetype, size, encoding, and locale.

The JavaScript code then continues to check to see if an image or Flash preview of the document is available for viewing:

// Call repo for available previews
json = remote.call("/api/node/" + nodeRef.replace(":/", "") + "/content/thumbnaildefinitions");
var previews = eval('(' + json + ')'),

A call to the Alfresco repository is made here to see what types of renditions are available for this record. It does this by using the following web service URL:

http://localhost:8080/alfresco/service/api/node/workspace/SpacesStore/3d3a5066-59bf-45cd-b025-4e5484c9b9af/content/thumbnaildefinitions

In this example, the response to the web service JSON looks like the following:

[ "doclib",
"webpreview",
"avatar",
"medium",
"imgpreview"
]

We see that a web preview rendition for this document is already available. This isn't the first time that this document has been viewed on the Details page. The first time that someone accesses the Details page for the record, the Flash web preview file is created.

The rest of the web-preview.js controller file constructs a node object to be returned as part of the model.

The file web-preview.get.html.ftl contains the markup that describes the display of the web preview component. The top of this file contains JavaScript run on the client when the web preview component is loaded that creates an Alfresco.WebPreview object:

<#if (node?exists)>
<script type="text/javascript">//<![CDATA[
new Alfresco.WebPreview("${args.htmlid}").setOptions(
{
nodeRef: "${node.nodeRef}",
name: "${node.name?js_string}",
icon: "${node.icon}",
mimeType: "${node.mimeType}",
previews: [<#list node.previews as p>"${p}"<#if (p_has_next)>, </#if></#list>],
size: "${node.size}"
}).setMessages(
${messages}
);
//]]></script>
</#if>

The remainder of the file is the FreeMarker markup for the layout of the component:

<div class="web-preview shadow">
<div class="hd">
<div class="title">
<h4>
<img id="${args.htmlid}-title-img" src="${url.context}/components/images/generic-file-32.png" alt="File" />
<span id="${args.htmlid}-title-span"></span>
</h4>
</div>
</div>
<div class="bd">
<div id="${args.htmlid}-shadow-swf-div" class="preview-swf">
<div id="${args.htmlid}-swfPlayerMessage- div">${msg("label.preparingPreviewer")}</div>
</div>
</div>
</div>

On the client, the JavaScript file that provides the dynamics for the web preview component is the file componentspreviewweb-preview.js. This JavaScript file contains the definition of the object Alfresco.WebPreview.

The JavaScript will check to see if the content is already an image or Flash SWF format that can be viewed as-is or whether a Flash rendition is needed to be viewed. The previewer is capable of viewing both images, Flash or FLEX, so documents with content of this file format type need not have their content converted to Flash in order to preview them.

Alfresco converts office documents, in either Microsoft Office or OpenOffice formats, to PDF using the OpenOffice SDK. Those intermediate PDF files are then converted to Flash SWF objects using the PDF2SWF utility that is part of SWFTools. In the same way, if there is a file format that needs to be previewable, it can be added if there is a tool that exists to convert the file into either PDF or SWF formats.

A service call is then made back to the Alfresco repository to retrieve the Flash preview content. If the preview doesn't already exist, it will be generated. An example of what that service call looks like is the following:

http://localhost:8080/share/proxy/alfresco/api/node/workspace/SpacesStore/3d3a5066-59bf-45cd-b025-4e5484c9b9af/content/thumbnails/webpreview?c=force&noCacheToken=12833886

The actual web preview is enabled by a Flash SWF file that is embedded in the page.

The software that detects and checks for a valid version of the Flash player in the browser and embeds the Alfresco Flash previewer object on the web page is called SWFObject.

The code in the file web-preview.js that embeds the previewer looks like this:

var so = new YAHOO.deconcept.SWFObject(Alfresco.constants.URL_CONTEXT + "components/preview/WebPreviewer.swf", swfId, "100%", "100%", "9.0.45");
so.addVariable("fileName", this.options.name);
so.addVariable("paging", previewCtx.paging);
so.addVariable("url", previewCtx.url);
so.addVariable("jsCallback", "Alfresco.util.ComponentManager.get('" + this.id + "').onWebPreviewerEvent");
so.addVariable("jsLogger", "Alfresco.util.ComponentManager.get('" + this.id + "').onWebPreviewerLogging");
so.addVariable("i18n_actualSize", this.msg("preview.actualSize"));
so.addVariable("i18n_fitPage", this.msg("preview.fitPage"));
so.addVariable("i18n_fitWidth", this.msg("preview.fitWidth"));
so.addVariable("i18n_fitHeight", this.msg("preview.fitHeight"));
so.addVariable("i18n_fullscreen", this.msg("preview.fullscreen"));
so.addVariable("i18n_fullwindow", this.msg("preview.fullwindow"));
so.addVariable("i18n_fullwindow_escape", this.msg("preview.fullwindowEscape"));
so.addVariable("i18n_page", this.msg("preview.page"));
so.addVariable("i18n_pageOf", this.msg("preview.pageOf"));
so.addVariable("show_fullscreen_button", true);
so.addVariable("show_fullwindow_button", true);
so.addParam("allowScriptAccess", "sameDomain");
so.addParam("allowFullScreen", "true");
so.addParam("wmode", "transparent");

The code embeds the Flash control into the web page and passes into it the filename, that is, the record name in the repository. It also sets a flag to indicate whether the file is multi-page and requires paging. The url is a path to the Flash or image rendition of the record to view. Text labels are set as well as some parameters to specify how the component will be viewed, such as with or without the Full Window mode.