Code Example‎ > ‎

UILibrary DoJo



Droidget widget sample with Dojo javascript library

  • Create new project using Droidget wizards

choose, File --> new project --> project

From wizards ,  choose Droidget wizards --> project

and Fill the name field for the project and click finish.

Droidget project with the given name will be created and displayed in the project explorer.

  •   Download Dojo  

download Dojo  javascript base library and ui library from following link  http://www.dojotoolkit.org/download/#getdojo

Please download full Dojo files since most of the UI interface are saved in Dijit folders of Dojo.

Unzip and copy the necessary js and cs files to the src folder of the project, and  folder structure will looks likes following:


           
  • Edit index.html

Importing  css file and  Dijit,add the folllowin lines in <head> section of the html file:

            <link rel="stylesheet" type="text/css" href="dojo-release-1.4.2-src/dijit/themes/tundra/tundra.css"/>

            with in the <body> in  index.html, add the following code

            <body class=" tundra ">
      <div dojoType="dijit._Calendar">
      </div>
      </body>

          then add the folling javascript code to <head> section in index.html file for initiating the calender component:
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"
             djConfig="parseOnLoad: true">
        </script>
        <script type="text/javascript">
             dojo.require("dijit.dijit"); // loads the optimized dijit layer
             dojo.require("dijit._Calendar");
        </script>
          note that <div> id is same as the identifier in js code.

          final index.html code looks like :
           <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html dir="ltr">
      <head>
      <link rel="stylesheet" type="text/css" href="dojo-release-1.4.2-src/dijit/themes/tundra/tundra.css"/>
      </head>
      <body class=" tundra ">
      <div dojoType="dijit._Calendar">
      </div>
      </body>
           <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"
                djConfig="parseOnLoad: true">
           </script>
           <script type="text/javascript">
                dojo.require("dijit.dijit"); // loads the optimized dijit layer
                dojo.require("dijit._Calendar");
           </script>
       </html>
  • Edit config.xml

           change the width and height properties of the widget to appropriate sizes and change other properties   
           such as name , etc,,, as required.Save config.xml file. Final code is similler to:

                <?xml version="1.0" encoding="utf-8"?>
        <widget id="HelloDroidget" version="1.2" width="300" height="300">
             <content src="index.html" type="text/html"/>
             <name>HelloCalendar</name>
             <description>HelloCalendar</description>
             <author url="http://yourserver/example/widgets">gclue</author>
             <icon src="icon.png"/>
             <access network="true"/>
         </widget>
  • Deploy the project

now save and deploy the project.

1. from the eclipse meny select Droidget --> packaging

2. then Droidget-->install packaging

  • Out put

finally , calendar component will appear in the Droidget screen as follows.



         

















Comments