Chapter 4 - widget.onshow
If you've tried your widget, or perhaps have another widget suffering from the same problem "It does not update by it self!" This is the chapter for you, I will go through how to make the widget to update when you activate dashboard with the widget.onshow function.
Making the widget update on it's own is necessarily if you don't want to restart it each day. You might think "Well.. that's easy, just make the widget refresh every 5 minutes or so. Though, it doesn't work that way.
1. These refresh scripts don't work in dashboard, have tried several html and javascripts.
2. A timer to control the update isn't optimal for this widget, because apple has provided an extra "javascript" function for dashboard.
it's called "widget.onshow", it basically tells your widget that when you activate dashboard (push F12), something is going to happen in the function you have connected to the "widget.onshow".
Let me show you.
function UpdateWidget() { // The function: UpdateWidget
// You will put the update function here
}
if (window.widget) {
widget.onshow = UpdateWidget; // When dashboard is activated, execute the function "UpdateWidget"
}
Ok, so not we've cleared that up, how do we update the widget since these refresh scripts doesn't work?
We use something called "innerHTML" it basically updates content in a specified location in real time, like this:
function UpdateWidget { document.getElementByID("DaysLeft").innerHTML = CountDown(); }
Let's go over the code pice by pice.
document.getElementByID("DaysLeft")
// Get the element with id "DaysLeft" in the document
.innerHTML
// Apply this function to the element (It changes the content of the element)
= CountDown();
// Change the content of the element to CountDown(), that is the same as it was, in other words, it updates the function making a new value appear if a day has changed.
To clarify, this script makes the widget update it's CountDown() function each time you activate dashboard.
And you can find the code here:
function UpdateWidget() { The function: UpdateWidget
document.getElementById("DaysLeft").innerHTML = CountDown();Get the element "DaysLeft" in the document to change it's inner HTML to "CountDown()"
}
if (window.widget) {
widget.onshow = UpdateWidget;When the widget is shown, that is, dashboard is activated, execute the function "UpdateWidget"
}
The The Apple Javascript function is now finished, we now need to specify a section in the XHTML that will be updated each time Dashboard activates. To do this, we make a "div" with the id "DaysLeft".
Your XHTML code should look like this:
<html>
<head>
<script type='text/javascript' src='javascript.js' />
<style type="text/css">
@import "stylesheet.css";
</style>
</head>
<body>
<div id='DaysLeft'> // Defines a layer (A section) and the CountDown function is placed inside the layer
<script type='text/javascript'>
document.write(CountDown());
</script>
</div>
</body>
</html>
The widget will now replace everything inside the tag with CountDown; that is, the same function, so it will work as an update.
To test your function, you can change the date of your computer and activate dashboard, if the value change, you have succeeded :).
And now, you have made your first widget, if you have a good countdown idea, don't be afraid to publish it, I have received many comments and mails telling me how great my StarGate Counter widget is, it's really rewarding :).
Here are the three biggest sites to publish your widget:
www.apple.com/downloads/macosx/dashboard
I get most of my visitors to my website "djupet.se/warpwidgets" from apple.
www.dashboardwidgets.com
Great site! Apart from publishing your widget, there is a great forum for you to interact with other developers and artist, If you're stuck on something widget related, this is the forum you'll ask for help or search.
www.versiontracker.com
Well, you probably know this site :), I also get many visitors from this site.