Tips and Tricks in Developing Gadgets

Here are some tips and tricks to keep in mind, when developing gadgets.

Error Handling

In our sample gadget developed so far errors are not handled. For example, what would happen if the content from URL is not fetched due to a network outage? As of now, we display an empty gadget. It is recommended to display a meaningful error to the userusing a simple try/catch block as follows:

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    <ModulePrefs title="WSO2 Open Source Development Data from MarkMail">
        <Require feature="dynamic-height" />
    </ModulePrefs>
    <Content type="html">
  <![CDATA[
  <a href="http://markmail.org/"><img src="http://markmail.org/images/logo_white.gif" alt="MarkMail"/></a>
  <div id="contentDiv"></div>
  <span id="hiddenSpan" style="display:none;"/>
  <script type="text/javascript">
      var url = "http://markmail.org/browse/org.wso2.carbon-commits";
      function getHtml() {   
        try {
          var parameters = {};
          parameters[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT;
          gadgets.io.makeRequest(url, processResponse, parameters);
        } catch (err) {
             document.getElementById('contentDiv').innerHTML = "<stong> error connecting to URL <a href='" + url +"'>" + url + "</a> </strong>";
        }
      };
     
      function processResponse(response) {
        try {
           document.getElementById('hiddenSpan').innerHTML = response.text;
           document.getElementById('contentDiv').innerHTML = "<table>" + document.getElementById('browse').getElementsByTagName('table')[0].innerHTML + "</table>";
        } catch (err) {
           document.getElementById('contentDiv').innerHTML = "<stong> error processing data from URL <a href='" + url +"'>" + url + "</a> </strong>";
        }
           gadgets.window.adjustHeight();
      };
 
      gadgets.util.registerOnLoadHandler(getHtml);
 
 </script>
  ]]>
    </Content>
</Module>

Incremental Development

Like we did in this tutorial, it is a good practice to start small and incrementally keep on building the gadget, step by step, testing along the way. Incremental testing is key to success. It allows you space to back track and recollect on what went wrong and fix those. If we are to take big steps, it would be harder to pinpoint problem cases.

When Things Go Wrong: F12

When things are not working, the best way to debug is to use developer tools offered by the browsers. The function key F12 brings up the developer tools in both Chrome and Internet Explorer. The console of the developer tools leads you to the errors and error locations easily.

In addition to developer tools, the "Inspect element" option you get on the right click pop-up on Chrome Web browser is quite handy. It is paarticularly helpful when you know where in the gadget content is supposed to appear yet does not.

Always Test with IE

Quite often, if it works in IE, chances are high it works in other browsers. Since you are developing for a large audience, it is important to consider cross-browser compatibility. If you plan to open up the gadgets for a wider audience, it is important to use IE as part of the incremental test efforts. In other words, test with IE while you are developing, rather than trying to test the finished gadget with IE.

Use an IDE

Even simple things like indentation help a great deal when you are developing a fairly complex gadget. Using an IDE is a best practice. You can see how WSO2 Carbon Studio can help you develop gadgets from scratch in tutorial How to Creat Gadgets Using Carbon Studio.