In this session I will show how to extend a web page of a SNS (Social Network Site) to display a gadget.
The web application for this sample is implemented with Java Server Faces technology.
The SNS is hosted on a Tomcat on port 8080. Shindig is running for test purposes on the same port.
In the right sidebar all installed gadgets of the user are listed. He can choose to display one. The choosen app (here a gadget to display the friends of the viewer) is then being called in the center part of the page.
- Insert the html tag for an iFrame in your web page at the position you want to display the gadget. The appropriate iFrameUrl is generated server side.
There are a few methods in gadgets.js that are called from the gadget itself (setHeight, requestNavigateTo, ...). The default implementation in gadgets.js is a simple test implementation and could be overwritten. Partuza has implemented the file Container.js where this methods are overwritten.
That's all for doing in the web page. You can also put some div tags around the iFrame to display a title for the gadget. Here Partuza can serve as a sample.
Using the iFrame directly, integrating a gadget in the SNS is very smooth.
Excerpt of the Web page:
- Generate the url displayed in the iFrame. The url must contain all information, needed to display the gadget. See page iframe url format for a detail explanation on the url.
In this sample, the security token is generated in a not secure way. You have to use BlobCrypterSecurityToken to generate a secure token.
Excerpt of the Controller class of the Web page. This part generates the iframe url:
- Special for use in JSF: Providing a JSF Component, to display the gadget. This component could render the iframe html tags on it's own.