First of all, you might want to have a look at this video tutorial explaining how to develop a really simple widget:
http://people.kmi.open.ac.uk/ullmann/tutorials/wookie/widget.htmStep 1: Create an empty folder.
Step 2: Within this folder create four files called:
- config.xml – the configuration file to describe the widget.
- calendar.htm – the page the user will see.
- calendar.css – Cascading Style Sheet (CSS) for the HTLM page.
- calendar.js – the core of the widget behaviour containing the code.
Step 3: Configuration file
The configuration file is required by the Wookie server to configure the widget. Open the file
config.xml with a text editor and paste the following inside, then save and close:
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns="http://http://www.w3.org/ns/widgets"
id="http://arc.tees.ac.uk/calendarWidget"
version="1.0"
height="0"
width="0"
>
<name>Calendar</name>
<description>A sample calendar widget for demonstration purpose</description>
<content src="calendar.htm"/>
<author>Your name</author>
</widget>
Step 4: HTML file
The HTML file is the one displayed to the user: For this example the content is really small as we are linking the JavaScript and CSS files to it. Open the file “calendar.htm” with a text editor and paste the following inside, then save and close:
<html>
<head>
<link rel="stylesheet" href="calendar.css" type="text/css"/>
<script type='text/javascript' src='calendar.js'> </script>
</head>
<body>
<script type="text/javascript">writeCalendar()</script>
</body>
</html>Step 5: CSS file
The Cascading Style Sheets (CSS) is used to define the style of the HTML page it is linked to. Open the file “calendar.css” with a text editor and paste the following inside, then save and close:
span.label {
color:black;
width:30;
height:16;
text-align:center;
margin-top:0;
background:#ffF;
font:bold 13px Arial
}
span.c1 {
cursor:hand;
color:black;
width:30;
height:16;
text-align:center;
margin-top:0;
background:#ffF;
font:bold 13px Arial
}
span.c2 {
cursor:hand;
color:red;
width:30;
height:16;
text-align:center;
margin-top:0;
background:#ffF;
font:bold 13px Arial
}
span.c3 {
cursor:hand;
color:#b0b0b0;
width:30;
height:16;
text-align:center;
margin-top:0;
background:#ffF;
font:bold 12px Arial
}Step 6: JavaScript File
The Javascript file is the core of the widget itself, containing the code for the behaviour. Open the file “calendar.js” with a text editor and paste the following inside, then save and close:
function maxDays(mm, yyyy){
var mDay;
if((mm == 3) || (mm == 5) || (mm == 8) || (mm == 10)){
mDay = 30;
}
else{
mDay = 31
if(mm == 1){
if (yyyy/4 - parseInt(yyyy/4) != 0){
mDay = 28
}
else{
mDay = 29
}
}
}
return mDay;
}
function changeBg(id){
if (eval(id).style.backgroundColor != "yellow"){
eval(id).style.backgroundColor = "yellow"
}
else{
eval(id).style.backgroundColor = "#ffffff"
}
}
function writeCalendar(){
var now = new Date
var dd = now.getDate()
var mm = now.getMonth()
var dow = now.getDay()
var yyyy = now.getFullYear()
var arrM = new Array("January","February","March","April","May","June","July","August","September","October","November","December")
var arrY = new Array()
for (ii=0;ii<=4;ii++){
arrY[ii] = yyyy - 2 + ii
}
var arrD = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")
var text = ""
text = "<form name=calForm>"
text += "<table border=1>"
text += "<tr><td>"
text += "<table width=100%><tr>"
text += "<td align=left>"
text += "<select name=selMonth onChange='changeCal()'>"
for (ii=0;ii<=11;ii++){
if (ii==mm){
text += "<option value= " + ii + " Selected>" + arrM[ii] + "</option>"
}
else{
text += "<option value= " + ii + ">" + arrM[ii] + "</option>"
}
}
text += "</select>"
text += "</td>"
text += "<td align=right>"
text += "<select name=selYear onChange='changeCal()'>"
for (ii=0;ii<=4;ii++){
if (ii==2){
text += "<option value= " + arrY[ii] + " Selected>" + arrY[ii] + "</option>"
}
else{
text += "<option value= " + arrY[ii] + ">" + arrY[ii] + "</option>"
}
}
text += "</select>"
text += "</td>"
text += "</tr></table>"
text += "</td></tr>"
text += "<tr><td>"
text += "<table border=1>"
text += "<tr>"
for (ii=0;ii<=6;ii++){
text += "<td align=center><span class=label>" + arrD[ii] + "</span></td>"
}
text += "</tr>"
aa = 0
for (kk=0;kk<=5;kk++){
text += "<tr>"
for (ii=0;ii<=6;ii++){
text += "<td align=center><span id=sp" + aa + " onClick='changeBg(this.id)'>1</span></td>"
aa += 1
}
text += "</tr>"
}
text += "</table>"
text += "</td></tr>"
text += "</table>"
text += "</form>"
document.write(text)
changeCal()
}
function changeCal(){
var now = new Date
var dd = now.getDate()
var mm = now.getMonth()
var dow = now.getDay()
var yyyy = now.getFullYear()
var currM = parseInt(document.calForm.selMonth.value)
var prevM
if (currM!=0){
prevM = currM - 1
}
else{
prevM = 11
}
var currY = parseInt(document.calForm.selYear.value)
var mmyyyy = new Date()
mmyyyy.setFullYear(currY)
mmyyyy.setMonth(currM)
mmyyyy.setDate(1)
var day1 = mmyyyy.getDay()
if (day1 == 0){
day1 = 7
}
var arrN = new Array(41)
var aa
for (ii=0;ii<day1;ii++){
arrN[ii] = maxDays((prevM),currY) - day1 + ii + 1
}
aa = 1
for (ii=day1;ii<=day1+maxDays(currM,currY)-1;ii++){
arrN[ii] = aa
aa += 1
}
aa = 1
for (ii=day1+maxDays(currM,currY);ii<=41;ii++){
arrN[ii] = aa
aa += 1
}
for (ii=0;ii<=41;ii++){
eval("sp"+ii).style.backgroundColor = "#FFFFFF"
}
var dCount = 0
for (ii=0;ii<=41;ii++){
if ( ( (ii<7)&&(arrN[ii]>20))||((ii>27)&&(arrN[ii]<20) ) ){
eval("sp"+ii).innerHTML = arrN[ii]
eval("sp"+ii).className = "c3"
}
else{
eval("sp"+ii).innerHTML = arrN[ii]
if ((dCount==0)||(dCount==6)){
eval("sp"+ii).className = "c2"
}
else{
eval("sp"+ii).className = "c1"
}
if ((arrN[ii]==dd)&&(mm==currM)&&(yyyy==currY)){
eval("sp"+ii).style.backgroundColor="#90EE90"
}
}
dCount += 1
if (dCount>6){
dCount=0
}
}
}Step 6: Deploying the widget
Now that you have the four different files ready, you need to create a valid archive of them. To do so, select the four files in your Windows Explorer then right click on one of them and select "Send To > Compressed (zipped) folder"
You will end up with a zip. file. Rename this file to
calendar.wgt.
Make sure the extension is
wgt!
Your widget is ready to be deployed on a Wookie server or any other widget server for that matter. If you don’t have access to a Wookie server, you can simply open
calendar.htm to have a look at the result.
You can download the sources as an archive here:
calendar.zip