Widget Examples‎ > ‎JQeury Calendar‎ > ‎

More

Droidget widget sample with JQuery 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 jQuery  

download jQuery  javascript base library and ui library from following link  http://jqueryui.com/download/jquery-ui-1.8.2.custom.zip

unzip and copy js and css folders to the src folder of the project, and  folder structure will looks likes following.



  • Edit index.html

importing  css file , jquery and  jquery ui javascript module

add the folllowin lines in <head> section of the html file   

<link type="text/css" href="css/smoothness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>



with in the <body> in  index.html, add the following code
     <div style="width:220px" id="datepicker"></div>
then add the folling javascript code to <head> section in index.html file for initiating the calender component

    <script>$(document).ready(function(){
       $("#datepicker").datepicker();
         });
    </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 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" />
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
    <script>$(document).ready(function(){
        $("#datepicker").datepicker();
         });
    </script>
    <title></title>
</head>
<body>
<div style="width:220px" id="datepicker"></div>
</body>
</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:

<widget id="ButtonExample2_1278490351906" version="1.0" width="320" height="250">    
   <content src="index.html" type="text/html"/>
   <name>ButtonExample2</name>
   <description></description>
   <author url="http://exsample.com">Default value</author>
   <icon src="icon.png"/>
   <license>Copyright</license>
</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