UI/Functionality: Developing Gadgets

This blog is about rendering Gadgets: Static content, Dynamic content and CS-based content.

Before jumping into creating Gadgets, it is better to go through architecture of Gadget server and the topic: About Developing Gadgets.

Applies to only 11.1.1.8.0 and above. All the following examples were tested using JSK 11.1.1.8.0 (installed all sites + community-gadget) on Windows 7 64-bit machine.

Gadget created with Static Content (JSON):

1. Create one following text file which contains json (json.txt) as shown and save it as location where it can be fetched by ContentServer (I saved it under <webapps>/cs/custom/ folder) :

{"Name" : "Rowan", "Breed" : "Labrador Retriever", "Hobbies" : ["fetching", "swimming", "tugging", "eating"]}

2. Create one simple XML (gadget descriptor) file which parses JSON and save it as FetchJson.xml in the same above folder location

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

  <ModulePrefs title="Fetch JSON Example"/>

  <Content type="html">

  <![CDATA[

    <div id="content_div"></div>

    <script type="text/javascript">

    function makeJSONRequest() {    

      var params = {};

      params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;

      // This URL returns a JSON-encoded string that represents a JavaScript object

      var url = "http://localhost:9080/cs/custom/gadgets/json.txt";

      gadgets.io.makeRequest(url, response, params);

    };

    function response(obj) { 

      var jsondata = obj.data;

      var html = "";

      // Process returned JS object as an associative array

      for (var key in jsondata) {

        var value = jsondata[key];

        html += key + ": ";

        // If 'value' is an array, render its contents as a bulleted list

        if (value instanceof Array)

        {

          html += "<br /><ul>";

          for (var i = 0; i < value.length ; i++)

          {

            html += "<li>"+ jsondata.Hobbies[i] + "</li>";

          }

          html+= "</ul>";

        }  

        // If 'value' isn't an array, just write it out as a string

        else {        

          html += value + "<br />";

        }      

      }               

      document.getElementById('content_div').innerHTML = html;

     };

     gadgets.util.registerOnLoadHandler(makeJSONRequest);

     </script>

  ]]>

  </Content>

</Module>

3. Login to WebCenter Sites -  Go to "Gadgets" UI - Select Catalog - Register Gadget

4. Paste the following URL: http://localhost:9080/cs/custom/gadgets/FetchJson.xml (Your location hostname, portname and location may vary according to your installation). Provide all the other fields and SAVE. Deploy your gadget or dashboard. Your gadget on Dashboard should look like this:

Gadget created dynamically: If you have a gadget descriptor XML url, then you can directly "Register Gadget" and  preview. You can try with this "Hello World" example (just copy the URL and paste) which ends up like this:

Usage: If you have certain dynamic URLs, like feeds, dictionary, weather, news, map, calendar, clock. etc. , then they can be deployed directly into Gadgets Server and can be viewed on site as required.

CS-Based Gadget created with content from WebCenter Sites:
Although detailed explanation is provided in Developer's Guide and User's Guide , it seems difficult to understand and test the examples provided. So after understanding the main concept, I created one of the example - List Gadget. (All other examples can be downloaded from oracle edelivery)Before we jump into example, one should understand the template flow. For List Gadget, template flow is as shown:


Procedure (download all files from here):
1. Create one basic asset type using AssetMaker Utility - FW_CSGadget (field: assetdescriptor) and add an association to it: DataAsset (type: recommendation) and create one asset: ListGadget from Contributor UI. Associate Recommendation (Content_C) to the DataAsset association.
2. Create Main template - GenerateGadgetXML (Type:FW_CSGadget; Template can be called externally or in browser) which is responsible for generating the Gadget Descriptor XML file.
3. This main template calls - ListGadget template (G_List: Type-FW_CSGadget and Template can be called externally or in browser) which basically loads the ListGadget asset and the associated recommendation (this recommendation contains list of Content_C assets) which calls recommendation template (AdvCols/G_JSON) and which in turn calls Content_C(Content_C/G_JSON)
4. Few files are deployed to <webapps>/cs/FirstSiteII/gadget location for <locale> attribute of XML.
5. If you have followed the above procedure by copying all the code from the shared folder and deploying gadget folder to the above mentioned location, then there should be no issue in creating ListGagdet. Go to "Gadget UI" - Catalog - "Register Gadget" and enter the URL, fill other fields and save. All done!! (Note: cid in the URL should be your ListGadget basic asset id)
6. Now you either deploy it as a single Gadget or update your Dashboard and then deploy full Dashboard itself. This is how ListGadget looks in Dashboard:

----------------------------------------------------

SUGGESTIONS/COMMENTS ARE INVITED

----------------------------------------------------

ALL TOPICS