Converting your WSO2 Mashup Server to a Personalized Dashboard

In this article, you will learn how to convert your WSO2 Mashup Server to a personalized dashboard. Once implemented, each user of your Mashup Server will get his own Dashboard page similar to iGoogle, that is capable of displaying gadgets for mashups in your WSO2 Mashup Server. As an added bonus, users will also have the ability to import iGoogle compatible gadgets from other sources to this dashboard. All this could be done, either by upgrading to version 1.5 distribution of the Mashup Server or taking a simple Subversion checkout and doing a Maven2 build on your part. Date: Thu, 10th Jul, 2008 Level: Introductory Reads: 9827 Comments: 18 | Login or register to post comments

Tyrell Perera Technical Lead and Product Manager WSO2 Inc.

Table of Contents

Introduction

You have deployed a WSO2 Mashup Server instance. Over time you have accumulated some really cool mashups, which you frequently use to increase productivity. Your users have their own favorite collections of mashups and they keep creating new ones on a daily basis. With the increased popularity of iGoogle and its intuitive collection of Gadgets, your users  and even yourself, yearn for a similar experience in your Mashup Server. You would also like to develop Gadgets for iGoogle, that communicates with services already developed and hosted in your Mashup Server, rather than duplicating the work.

Applies To

Background

The Dashboard component of the WSO2 Mashup Server is built using Apache Shindig an Apache incubator project for OpenSocial and Gadgets.

If you build your distribution manually using Maven2, the required dependencies for the Dashboard component will be downloaded only when explicitly called using a Maven build profile. The default build command will not add these components, giving you an option to add the Personalized Dashboard, only if required.

Note: This tutorial assumes a scenario where an administrator is building the WSO2 Mashup Server from an SVN checkout using Maven2. You can skip this build process entirely by downloading the version 1.5 release from the WSO2 Mashup Seerver home page, which includes all the Dashboard components. You can proceed straight to the  Testing your dashboard-enabled Mashup Server section, if you downloaded and installed the 1.5 release.

Pre-requisites for Building the Project

• Java installed and JAVA_HOME set (1.5 or higher)
• A Subversion client installed
• Maven 2 version 2.0.7 or higher installed and configured
• NSIS for Windows and Linux, if you are planning to build a setup.exe for your Windows deployment

Building Your Dashboard-enabled Mashup Server Distribution

The developers of the WSO2 Mashup Server have put in a lot of work to ensure the process of building a dashboard-enabled WSO2 Mashup Server is a quick and pain free process. This involves the following steps.

1. Obtaining the WSO2 Mashup Server 1.5 (or higher) source code
2. Building the WSO2 Mashup Server with an additional Maven profile, which generates the Dashboard components
3. Test and use

Obtaining the Source Code

You have two options. You can download the source distribution of the WSO2 Mashup Server 1.5 release or checkout the latest code from the project's subversion repository using the command svn co https://wso2.org/repos/wso2/trunk/mashup/java. Alternatively, use a graphical client such as Tortoise SVN for Windows.

Building the WSO2 Mashup Server with Dashboard components

Once you have extracted the source distribution (or checked out the latest code from the SVN), navigate to that directory and type the following Maven command:

mvn clean install -Dbuild-dashboard

The -Dbuild-dashboard option activates the Maven profile, which creates the Dashboard components, downloading dependencies as necessary. Once the build is completed, you will find the newly built WSO2 Mashup Server in the your-mashup-server-source/modules/distribution/target directory. The file named wso2-mashup-server-1.5.zip (or wso2-mashup-server-SNAPSHOT.zip if you built from the SVN) will contain the necessary Dashboard components and the associated Web Interface.

If you wish to build the setup.exe to be run on a Windows machine, you can use the following Maven command:

mvn clean install -Dbuild-setup-dashboard

This will give you an additional wso2-mashup-server-1.5-setup.exe (or wso2-mashup-server-SNAPSHOT-setup.exe if built from SVN) file, which is the windows installation of your dashboard-enabled WSO2 Mashup Server.
Note: Please make sure that you have NSIS installed in your build machine before executing the following command. Type makensis in the Linux or Windows command line to ensure that it is accessible.

Testing Your Dashboard-enabled Mashup Server

Once the build is successfully completed, you can start your new WSO2 Mashup Server instance and test the new Dashboard. In a vanilla installation, the dashboard can be accessed using the URL https://localhost:7443/dashboard/. You will be greeted with the page illustrated below and that includes a pre-defined set of very interesting gadgets too!

Each user of your Mashup Server gets his/her own personal Dashboard. He/she can add or remove gadgets for Mashups within this server, a remote WSO2 Mashup Server or any other public location containing an iGoogle compatible gadget. All they have to do is to sign-in into their account.

Gadgets for Your Mashups

The Try-it Gadget

The WSO2 Mashup Server 1.5 release introduces a few additions to the Try-it feature and the Mashup Editor. If you click a Mashup, which takes you to the mashup details page you, will see the usual Try-it link followed by another link titled, "Try-it Google Gadget for this service". This link generates a result similar to Try-it, which is compatible with a Google gadget container such as iGoogle or your new WSO2 Mashup Server.

This is the default gadget added to your WSO2 Mashup Server Dashboard when you add a Mashup from the list available in the Add Gadgets page.

Writing Your Own Gadget

As you require more functionality and creativity in your Gadgets, use the Mashup Editor to build and customize them. Version 1.5 adds a new tab to the Mashup Editor, that is capable of generating a skeleton for your Gadget. Try following steps:

1. Create a new mashup using the link in the task bar under Management Tasks.
2. Save the mashup code and wait for the Mashup to be deployed.
3. Once your new mashup gets listed on the home page, click the link to visit the details page for the selected mashup.
4. Click Edit this mashup link, which will launch the Mashup Editor page.
5. Inside the editor, you will notice a third tab titled Gadget UI Code. Go into this tab.
6. Click the Generate Template button on the button panel at the bottom of the editor.
7. You will set a Gadget skeleton as illustrated below (refer fig 4).
8. Edit the gadget according to the gadget specification.
9. Click Save Changes button.

Now you can use this as a template to create your own Gadget. If you go back to the mashup details page, you will notice a new link added after the Try-it links titled "View the custom Google Gadget for this service".

This link is the public URL for your Mashups Gadget. If your WSO2 Mashup Server is accessible through the Internet, you can use this link to add your new Gadget to any Google compatible gadget container such as iGoogle. If it's not accessible, consider sharing the mashup, which includes the custom gadget, to Mooshup.com, a free online version of the WSO2 Mashup Server.

Importing External Gadgets to Your Mashup Server Dashboard

Since the Dashboard of the WSO2 Mashup Server is powered by Apache Shindig, which is an open source implementation of the Google gadgets specification, you can add any Gadget compatible with this specification to your Mashup Server Dashboard by following the steps given below:

1. Sign in to the Mashup Server Dashboard
2. Click the Add Gadgets link
3. In the Add Gadgets page, type the URL of the gadget you want to add to your Dashboard (ex: http://www.thefreedictionary.com/_/WoD/history-module.xml)
4. Go back to the Dashboard page. The new gadget will appear there.

Summary

In this article we looked at the optional Maven build profiles available for the inclusion of an iGoogle compatible Dashboard component to your Mashup Server. We also took this new component to a test drive while looking at features available through the Mashup Server infrastructure to create Gadgets for your Mashups as well as importing external Gadgets to your Dashboard. Using what you learned in this tutorial, you will be able to transform your local WSO2 Mashup Server instance to an iGoogle-like experience for your end users.

References

• iGoogle
• Apache Shindig
• WSO2 Mashup Server home
• Google Gadget Specification

Author

[Tyrell Perera, Senior Software Engineer, WSO2 Inc. tyrell@wso2.com]