In this session I will show how to extend a web page of a SNS (Social Network Site) to display a gadget.

Setup:
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.

Use case:
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.

Description

Web 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.
  • Include the Shindig JavaScript files and css file. These files are hosted on the gadget server. The url depends on where you installed Shindig. Using an iframe you don't need JavaScript to display the gadget.
    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.

Another technique to show the gadget is to use the JavaScript methods in gadgets. Here the samplecontainer.html is a good source to look at.

Excerpt of the Web page:

<iframe id="remote_iframe_0" src="#{userApplicationBean.iframeUrl}" 
  scrolling="auto" class="gadgets-gadget" style="display: block;" 
  frameborder="no" height="400" width="100%" name="remote_iframe_0">
</iframe>

Server side

  • 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:

  private void generateIframeUrl()  throws UnsupportedEncodingException {
    Application application = applicationService.getApplication(appid);
    title = application.getTitle();
    url = application.getUrl();

    // generate SecurityToken
    String viewerId = viewer;
    String ownerId = owner;
    String domain = "default";
    long moduleId = 0;
    String separator = URLEncoder.encode(":", "UTF-8");
    String urlEncoded = url.replaceAll(":", "%253A");
    urlEncoded = urlEncoded.replaceAll("/", "%252F");
    StringBuilder out = new StringBuilder();
    out.append(URLEncoder.encode(ownerId, "UTF-8")).append(separator).append(URLEncoder.encode(viewerId, "UTF-8"))
        .append(separator).append(Long.toString(appid)).append(separator).append(URLEncoder.encode(domain, "UTF-8"))
        .append(separator).append(urlEncoded).append(separator).append(Long.toString(moduleId));

    securityToken = out.toString();

    // generate iframeUrl
    String serverBase = "http://localhost:8080/gadgets/";
    String container = "default";
    String parent = URLEncoder.encode("http://localhost:8080", "UTF-8");

    iframeUrl = serverBase + "ifr?" + "container=" + container + "&mid=" + "0" + "&nocache=" + "1" + "&country="
        + "ALL" + "&lang=" + "ALL" + "&view=" + "canvas" + "&parent=" + parent + "&debug=" + "1" + "&st="
        + securityToken + "&url=" + URLEncoder.encode(url, "UTF-8");
    iframeUrl += "#rpctoken=" + getRpcTokenRandom();
  }

Further work

  • Provide own Javascript file to implement methods like requestNavigateTo
  • 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.
  • No labels