The creation of a gadget is very simple. This recipe will walk you through the process of creating and deploying a gadget.
You need to create a sample bundle where you will add and deploy your gadget. For example, we will create a Skype Talk client where a user can log into the portal and chat with friends through a customized window. The steps will therefore be:
- Creating a
pom.xmlfile for a new Maven project - Creating a
web.xmlfile , which is mandatory for deploying a gadget project - Creating a
gadget.xmlfile where the gadgets are declared - Creating the source directories and the code
Go through the following steps to create the new Skype gadget:
- Add a very basic
pom.xmlfile in your new Maven project as follows:<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>my</groupId> <artifactId>skypeGadget</artifactId> <version>1.1.0-GA</version> <packaging>war</packaging> <name>GateIn Portal Skype Gadget Application</name> <build> <finalName>skypeGadget</finalName> </build> </project> - Add a very basic
web.xmlfile in thesrc/main/webapp/WEB-INFdirectory of your project:<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"> <web-app> <display-name>skypeGadget</display-name> </web-app>
- Finally, add the following content in the
gadget.xmlfile of yoursrc/main/webapp/WEB-INFdirectory:<gadgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.gatein.org/xml/ns/gatein_objects_1_2 http://www.gatein.org/xml/ns/gadgets_1_0" xmlns="http://www.gatein.org/xml/ns/gadgets_1_0"> <gadget name="SkypeTalk"> <path>/gadgets/SkypeTalk/SkypeTalk.xml</path> </gadget> </gadgets> - Create the folder for the source.
If you created a Maven project through Eclipse, we will, by the end of the project, have the following directory/folder structure (see Chapter 1, Getting Started for more details on Maven and Eclipse):
- Now look at the details of the gadgets. Create
SkypeTalk.xmlin theSkypeTalkfolder as declared in thegadget.xmlfile:<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs author="Cookbook Developer" title="Skype Talk" directory_title="Skype Talk" title_url="http://www.vige.it" description="Speak with your friends on Skype." thumbnail="images/SkypeTalk.gif" height="227"> <Locale lang="ar" language_direction="rtl"/> </ModulePrefs> <Content type="html"> <![CDATA[ ... ]]> </Content> </Module>The XML file declares an image to put be in the
SkypeTalk/imagesfolder. It will be used in the administration portlets as metadata for the presentation.Now you need the JavaScript code. Of course, the more complex the application is, the bigger the JavaScript code will be . Luckily, Skype provides JavaScript to use on their website, so you can t
- Connect to: http://www.skype.com/intl/en-us/tell-a-friend/get-askype-button, and the following form will open:
- Put your Skype username and choose a button in the window. You will end up with this code:
<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script> <a href="skype:yourusername?call"><img src="http://download.skype.com/share/skypebuttons/buttons/call_green_white_153x63.png" style="border: none;" width="153" height="63" alt="Skype Me™!" /></a>
- Put all the preceding code in the
CDATAtag ofSkypeTalk.xml. - Now the project is ready. Create the target war with the Maven command:
mvn install
- Deploy it in the application server.
- Go to the Application Registry and click on the Import Applications button. The new gadget will be added:
- Go to the dashboard to insert the gadget in the page. Open the Gadget box by clicking on the Add Gadgets link and choose the Skype Talk gadget. This will be the result:
You have seen the creation of the gadget through a project. There is, however, an alternative method for creating gadgets. The steps required are as follows:
- Go to the Application Registry and click on the Gadget button at the top right:
- Click on Create a new gadget in the second toolbar of the Application Registry. You will see a smart form as shown in the following screenshot:
- Type the title of the gadget in the Name field, for example Skype Talk, and in the Source field, the content of
SkypeTalk.xml. - Click on the Save button; the gadget is ready. The gadget, as for the previous example, will be deployed automatically in the JCR repository.
When you deploy an application gadget, the
Gadget Deployer is called. It is an event listener that catches all applications containing the WEB-INF/gadget.xml file. The deploy process is divided into three phases:
- Validation of
gadget.xml. - Creation of the importers according to the type of gadget. They can be remote or local.
- The gadget is passed to the Gadget Registry Service, which registers the gadget in the registry and executes the importers to register the metadata in the JCR Repository.
The configuration of the deployer can be found in the portal/WEB-INF/conf/portal/application-registry-configuration.xml file:
<component>
<key>org.exoplatform.application.gadget.GadgetDeployer</key>
<type>
org.exoplatform.application.gadget.GadgetDeployer
</type>
</component>You have seen in this recipe how to create local gadgets. You can also import remote gadgets. The only difference is that the resources will not be registered in the internal repository, but will be called remotely. Here is an example of a remote YouTube gadget declaration through the gadget.xml file:
<gadget name="RemoteYouTubeGadget">
<url>http://hosting.gmodules.com/ig/gadgets/file/100080069921643878012/youtube.xml</url>
</gadget>The same thing can be done through the web console, by simply clicking on the Add a remote gadget button shown in the preceding screenshot and choosing the gadget XML URL.