Code Example‎ > ‎

JSON



Create a new project

Choose File >>New>>Project under eclipse menu.
Then from the New Project Dialog, Select Droidget Wizard>>Project
Fill necessary fields including project name..etc.. and Click Finish
Project with the given name will appear in the Eclipse project explorer.

Edit config.xml

<?xml version="1.0" encoding="UTF-8"?>
<widget id="JSONSample_1279501117368" version="1.0" width="600" height="300">
    <content src="index.html" type="text/html"/>
    <name>JSONSample</name>
    <description>The sample of JSON</description>
    <author url="http://www.gclue.jp">GClue</author>
    <icon src="icon.png"/>
    <license></license>
    <access uri="http://flickr.com" subdomains="true" />
</widget>

Create a Javascript file

Under src folder, create another folder called ‘js’ and create a file called scripts.js under ‘js’ folder

  • Right click (Command click on Mac) on the Project name
  • Choose File >> New >> Folder and name it as js
  • Right click (Command click on Mac) on js foder , then File >> New >> File  and name it as scripts.js
// call JSON
function init(){ 
    var keyword = "android2.2";
    var url = "http://api.flickr.com/services/feeds/photos_public.gne?tags=" + keyword + "&format=json&jsoncallback=%3f";
    json(resultJson, url);

}
 
// callback of JSON
function resultJson(json){

    var resultHtml = "";
    for(var i = 0; i < json.items.length; i++){
        resultHtml += "<img src="+json.items[i].media.m+" height=50>";
    }
    document.getElementById("divMsg").innerHTML = resultHtml;

}
 
// JSON
function json(callback, url){
  
    var http_connect = new XMLHttpRequest();
    http_connect.open("GET", url, true);

    http_connect.onreadystatechange = function() {
        if (http_connect.readyState == 4) {
            if(http_connect.status == 200){
                callback(eval("("+http_connect.responseText+")"));
            }else{
                alert("Can't connect");
            }
        }
    }
    http_connect.send();
} 

Edit index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title>JSON Sample</title>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body onload="init()">
    <div id="divMsg"></div>
</body>
</html>

Deploy the Widget

Now save and deploy the project
  • From the eclipse menu select Droidget --> packaging
  • Then Droidget-->install packaging
or 
upload the Widget to web server and update the download.html file as follows. Then access the download.html from the smart phone and 
install the widget from URI. 

Download.html
<html>
<head>
    <title>Download</title>
</head>
<body>
    <a href="droidget://www.example.com/JSONSample.wgt">JSONSample</a><br>
</body>
</html>

Preview


Comments