In this recipe, you will start with an example where you import a Google Gadget in GateIn; by the end you'll have learnt more on the implementation and best practices for the importing procedure.
In this example, you will import, test, and resolve migration problems with the YouTube gadget present in the gadgets list.
Follow these steps to import the YouTube gadget in your portal:
- Connect to: http://www.google.it/ig/directory?synd=open. The page will show a list of the available gadgets:
- As you can see in the preceding screenshot, at the right there is a very wide range of applications to choose from. Click on the button below the YouTube gadget. You will see a window where you can configure the size and the color of the window:
- Click now on the link View source and copy the address of the gadget code as shown in the following screenshot:
- Now log onto GateIn, go to the dashboard, and click on the Add Gadgets link inside the page. The Gadget box will appear:
- Enter the URL you copied in step 3 and click on the + button. You will see this new window:
It is now ready to use. You can maximize or minimize it depending on the window size or select a movie that will be shown in the window.
The Gadget box is an instrument provided by the dashboard application. The dashboard application is represented by a WEBUI portlet, the org.exoplatform.dashboard.webui.component.UIDashboardPortlet. This portlet has a child, the org.exoplatform.dashboard.webui.component.UIAddGadgetForm component, which executes the operations for the creation of the gadget.
Each time you click on the + button of the Gadget box, this component creates a further two components:
org.exoplatform.portal.webui.application.UIGadget: this is added to theorg.exoplatform.dashboard.webui.component.UIDashboardContainer. TheUIDashboardContaineris the internal part of theUIDashboardPortletthat contains all the gadgets that the user chooses in their own dashboard.The goal of the
UIGadgetis to provide the action and rendering operations to show the gadget in the dashboard. When theUIGadgetis instanced, a storage name is created so it can be registered in the JCR repository.org.exoplatform.application.gadget.Gadget: this contains all the metadata, such as name and URL. It is registered in the gadget Registry Service. TheUIGadgetcomponent queries the Gadget Registry Service to get all the information about the gadget.
All information about gadgets is registered in the JCR repository. You can see them by connecting through WEBDAV using this URL:
http://localhost:8080/rest/private/jcr/repository/portal-system/production/app:gadgets
Here is an example of a list of gadgets through the browser:
app:Calculatorapp:Calendarapp:Currencyapp:gadget-1270571586app:OAUTHapp:rssAggregatorapp:ServicesManagementapp:SiteExportImportapp:Todo
Now you can see some more details of the services available for the management of gadgets.
The Gadget Registry Service used for the management of gadgets. Here is a list of the main operations:
deploy(Iterable<GadgetImporter> gadgets): Deploys a list of gadgetsgetGadget(String name): Returns the chosen gadgetgetAllGadgets: Returns all gadgets present in the registrysaveGadget(Gadget gadget): Registers the new gadget or updates a chosen gadgetremoveGadget(String name): Removes the chosen gadget from the registrygetGadgetUrl(String name): Returns the URL of the XML file for the chosen gadget name
The Gadget Registry Service can be called through an API. Here is an example:
import org.exoplatform.container.ExoContainer;
import org.exoplatform.webui.application.WebuiRequestContext;
import org.exoplatform.application.gadget.GadgetRegistryService
...
PortalRequestContext context = (PortalRequestContext) WebuiRequestContext.getCurrentInstance();
ExoContainer pcontainer = context.getApplication()
.getApplicationServiceContainer();
GadgetRegistryService registryService = (GadgetRegistryService) pcontainer
.getComponentInstanceOfType(GadgetRegistryService.class);
It is configured in the portal/WEB-INF/conf/portal/application-registry-configuration.xml. Here is the configuration:
<component>
<key>org.exoplatform.application.gadget.GadgetRegistryService</key>
<type>org.exoplatform.application.gadget.impl.GadgetRegistryServiceImpl</type>
<init-params>
<value-param>
<name>gadgets.country</name>
<description>US</description>
<value>US</value>
</value-param>
<value-param>
<name>gadgets.language</name>
<description>en</description>
<value>en</value>
</value-param>
<value-param>
<name>gadgets.moduleId</name>
<description>0</description>
<value>0</value>
</value-param>
<value-param>
<name>gadgets.hostName</name>
<description>Gadget server url</description>
<value>eXoGadgetServer/gadgets</value>
</value-param>
<properties-param>
<name>developerInfo</name>
<description>The group that is allowed to develop gadgets</description>
<property name="developer.group" value="/platform/administrators"/>
</properties-param>
</init-params>
</component>There are default values used to query the gadgets. Gadgets.country and gadgets.language are used to query the metadata of the gadget. The main field is the gadgets.hostname. It connects the application to a Gadget Server to execute the queries. Here is a brief look at the Gadget Server.
Through the Gadget Server you can query all metadata of the gadget. The value of the gadgets.hostname field allows for the creation of the Gadget Server URL. Usually, it is something like:
http://localhost:8080/eXoGadgetServer/gadgets/api/rpc
In the previous example, when you click on the + button, the UIAddGadgetForm, to obtain a gadget, the form makes a JSON call to this URL by passing the following parameters:
[{method:"gadgets.metadata", id:"test", params: {ids:["http://hosting.gmodules.com/ig/gadgets/file/100080069921643878012/youtube.xml"], container:"default", language:"en", country:"US", view:"home"}}]The Gadget Server queries the XML file registered in JCR and it returns all the metadata of the gadget. It returns a JSON string that will be elaborated as a map of fields.