One common use cases case is to pull information from the Web and display that within a gadget. Often, we want to extract some useful information from the Web URL and display on the gadget, rather than showing the Web data as they are. However, before diving into the complex case, let’s look at the simple case of pulling a page and displaying as it is.
...
The simplest way to fetch content from a URL and displaying it is to set the <Content> element's type attribute to url and provide the URL location with the href attribute. Given below is a sample where the WSO2 mailing list information is fetched from MarkMail (http://wso2.markmail.org/search/?q=) and displayed on a gadget.
| Code Block |
|---|
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="MarkMail WSO2 Lists">
</ModulePrefs>
<Content type="url" href="http://wso2.markmail.org/search/?q="/>
</Module>
|
...
The gadget renders successfully, but there is a problem. The content is clipped and there is no way to see the full content. To fix this, we can set the "height" and "scrolling" attributes on the content element as follows:
| Code Block |
|---|
<ModulePrefs title="MarkMail WSO2 Lists" height="350" scrolling="true" />
|
...
The content type html is used when we pull information from the Web, process and extract it to be displayed within the gadget with various visualization forms.
| Code Block |
|---|
<Content type="html">
|
One point to be kept in mind when using html content type gadgets is that, they must include a CDATA section. Any HTML code that we write must go within this section. For example,
| Code Block |
|---|
<Content type="html">
<![CDATA[
Hello, <span id="nameSpan"/>
<script type="text/javascript">
var prefs = new gadgets.Prefs();
document.getElementById('nameSpan').innerHTML = prefs.getString("Name");
</script>
!
]]>
</Content>
|
...
This gadget, has a HTML element defined in the content section, fetches content from a mailing list archive URL and fills in the div content with the fetched data.
| Code Block |
|---|
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="WSO2 Carbon and Stratos SVN Data from MarkMail" />
<Content type="html">
<![CDATA[
<div id="contentDiv"></div>
<script type="text/javascript">
function getHtml() {
var parameters = {};
parameters[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT;
var url = "http://markmail.org/browse/org.wso2.carbon-commits";
gadgets.io.makeRequest(url, processResponse, parameters);
};
function processResponse(response) {
document.getElementById('contentDiv').innerHTML = response.text;
};
gadgets.util.registerOnLoadHandler(getHtml);
</script>
]]>
</Content>
</Module>
|
...
There are two changes to be made to the gadget.
| Code Block |
|---|
<ModulePrefs title="WSO2 Carbon and Stratos SVN Data from MarkMail">
<Require feature="dynamic-height" />
</ModulePrefs>
|
Update the <ModulePrefs> to require dynamic-height feature.
| Code Block |
|---|
function processResponse(response) {
document.getElementById('contentDiv').innerHTML = response.text;
gadgets.window.adjustHeight();
};
|
...