Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM

Enterprise Google Gadgets

Luis SalaSenior Director of Solutions Engineering

www.alfresco.com

Introductions

Luis Sala, Senior Director of Solutions Engineering

Former Chief Solutions Architect at Epicentric

and Principal SE at Vignette

Agenda

● About Google Gadgets

● Developing Gadgets

● Web Script Overview

● Alfresco Gadgets for the Enterprise

● Bonus: Google OneBox Integration

● Quick Demonstration

● Q & A

What are Google Gadgets?

● Embeddable UI components that offer varying functionality.

● Lightweight.

● Until recently, focused on the mass market.

● Google promoting gadgets for the enterprise.

What are the Benefits?

● Easy to build.

● Many Sites● Including Google Apps for the

Enterprise

● Wide Reach● Millions of users!

Google for the Enterprise

● Google Search Appliance● Includes Google OneBox

● Google Apps● iGoogle Start Page● Mail● Sites (Wiki)● Docs, Spreadsheets and Presentations● Calendar● IM

Google Apps

Developing Gadgets

● Gadgets require a Module Descriptor

● Certain Google JavaScript libraries● Retrieve preferences.● Customize the gadget UI.

● Inline HTML

● Externally hosted web application● Invoked via an IFRAME.● Still has access to preferences via the JavaScript libraries.

Hello World Gadget

<?xml version="1.0" encoding="UTF-8"?><Module><ModulePrefs title="hello world example" />

<Content type="html"><![CDATA[Hello, world!

]]></Content>

</Module>

Inline Gadget…

IFRAME Gadget

<?xml version="1.0" encoding="UTF-8"?><Module><ModulePrefs title="hello world example" />

<Content type="url" href="http://www.example.com/hello.php"/>

</Module>

Storing User Preferences

<?xml version="1.0" encoding="UTF-8"?><Module><ModulePrefs title="hello world example" />

<UserPref name="mychoice" display_name="List Params?" datatype="bool"/>

<UserPref name="myname" display_name="Name" required="true"/> <UserPref name="mycolor" display_name="Color" default_value="Blue" datatype="enum”> <EnumValue value="Red"/> <EnumValue value="Blue"/> <EnumValue value="Green"/> </UserPref>

</Module>

Developer Tools

Developer Gadget: Google Gadget Editor:

Open for Business

What are Web Scripts?

Web Scripting●Agile Script-Driven MVC●Multiple uses

● Roll your own API

● Create new UI components

● Create portlets/widgets

● Expose WCM/AVM features●Script-based implementation

● Server-side JavaScript

● Freemarker●Limited only by your imagination

● Integration: Create a mashup

● Search: Exposed to other systems.

● Rich Internet Applications

● Cross-language

● Cross-platformJavaScript (Controller)JavaScript (Controller)

Freemarker (View)Freemarker (View)

Alfresco Repository (Model)Alfresco Repository (Model)

Consumer / ClientConsumer / Client

Components of a Web Script

● XML Descriptor● URI Templates● Authentication Requirements● Transactional Requirements

● One or more server-side JavaScript files (Controller)● One for each HTTP method (GET, PUT, POST, etc.)

● One or more Freemarker templates (View)● One for each HTTP method and desired output type (HTML, XML, JSON, etc.)

Two types of Web Scripts…

● Data Web Script● RESTstyle / RESTful URL● Returns structured data:

XML

JSON

CSV

● UI Web Script● Renders self-contained UI.● Can leverage Data Web Scripts.

Web Scripts as Gadgets● Virtually any Web Script can be a gadget by

using its URL.

● http://HOST:PORT/alfresco/wcs/SCRIPT

● Developers have many choices:● HTML● AJAX● JavaScript● JSON● Any combination of the above.

JavaScript (Controller)JavaScript (Controller)

Freemarker (View)Freemarker (View)

Alfresco Repository (Model)Alfresco Repository (Model)

iGoogleiGoogle

HTMLAJAXJSON

Alfresco Gadgets

● Search

● Space Browser

● Tasks

Alfresco Gadgets

Space Browser Gadget

● User Preferences

● Upload

● Download

● Space Creation

● Delete

Folder Gadget Definition<?xml version="1.0" encoding="UTF-8"?><Module><ModulePrefs title="Alfresco Browser" description="Alfresco Document and Folder Browser" author="Alfresco Software" scrolling="true" height="350"></ModulePrefs>

<UserPref name="path" display_name="Starting Folder" required="false" />

<UserPref name="sortby" display_name="Sort By" default_value="Name" datatype="enum" > <EnumValue value="Name" /> <EnumValue value="Date" /> <EnumValue value="Size" /></UserPref>

<Content type="url” href="http://HOST:PORT/alfresco/wcservice/aggadget/folder/?dummy=1"/></Module>

Hello World Gadget - Descriptor

hello.get.desc.xml

<webscript><shortname>Hello World Google Gadget</shortname>

<description>Sample demonstrating a simple Google Gadget</description>

<url>/goog/hello/</url><url>/goog/hello</url>

<format default="html">argument</format>

<authentication>guest</authentication>

<transaction>required</transaction>

</webscript>

Hello World Gadget - JavaScript

hello.get.js

// Get "name" parameter as supplied by iGoogle

var name = args["up_name"];

if (name == undefined) {

name = "Name Not Set"

}

// Pass "name" to Freemarker template via the model

model.name = name;

Hello World Gadget - Freemarker

hello.get.html.ftl

<html>

<head>

<title>Alfresco Google Gadget</title>

</head>

<body>

<h1>Hello ${name}</h1>

</body>

</html>

Hello World Gadget – Module

hello.get.xml.ftl

<?xml version="1.0" encoding="UTF-8"?>

<Module>

<ModulePrefs title="hello world example" />

<UserPref name="name" display_name="Your Name" default_value="Not Set"/>

<Content type="url" href="http://HOST:PORT/alfresco/wcs/goog/hello?guest=true"/>

</Module>

Google Search Appliance Integration

● Simple and fast integration with Google OneBox● http://www.google.com/enterprise/gsa/onebox.html

Google OneBox Integration

● Customizable Formatting.

Google OneBox Web Script

<?xml version="1.0" encoding="UTF-8"?><OneBoxResults>

<resultCode>${resultCode}</resultCode><Diagnostics>${diagnostics}</Diagnostics><provider>${provider}</provider>

<title> <urlText>${numResults} results found in Alfresco</urlText> <urlLink>${alfBaseUrl}${url.serviceContext}/api/search/keyword.html?q=${query}&amp;ticket=${ticket}</urlLink> </title> <IMAGE_SOURCE>${alfBaseUrl}${url.context}/images/logo/AlfrescoLogo32.png</IMAGE_SOURCE><#if results?exists>

<#list results as result> <MODULE_RESULT> <U>${alfBaseUrl}${url.context}/navigate/showDocDetails/workspace/SpacesStore/$

{result.id}?ticket=${ticket}</U><title><#if result.title?exists>${result.title}<#else>$

{result.properties.name}</#if></title><Field name="description"><#if result.description?exists> - $

{result.description?substring(0, 25)}...</#if></Field><Field name="path">${result.displayPath}</Field>

<Field name="owner">${result.properties.creator}</Field> <Field name="modified">${result.properties.modified?datetime}</Field> <Field name="size">${result.size} bytes</Field> </MODULE_RESULT></#list>

</#if></OneBoxResults>

DEMO

03.04.08

Q&A and Resources● Any Questions?

● Resources:● wiki.alfresco.com/wiki/Google_Gadgets● code.google.com/apis/gadgets/● code.google.com/enterprise/

● Join the Content Community● alfresco.com

● Participate in the Developer Challenge● alfresco.com/partners/programme/webscripts/

●

Join the Alfresco Facebook Group● facebook.com/group.php?gid=6063383762

03.04.08

Upcoming Presentations

● Upcoming “Built in 60” Presentations:● Building a Simple Wiki● Mac Dashboard Widgets● Digital Asset Management● Facebook Integration● Video Transcoders

● Other Upcoming Webinars:● April 24: Open Source Barometer● April 29: Benchmarking with Unisys● May 7: Unisys ECM Best Practices

End

Shapes & Colors

Normal Text

● Bullet● Sub-Bullet

Normal TextNormal Text