As part of this article, I’ve included a generic Ajax widget that simply grabs a URL and parses out a small section of the DOM that I’m interested in.
It’s a good jumping off point to get going with an Ajaxified widget.
Getting Dashcode
/Developer/Applications
directory).Apple did have Dashcode available for download, but since it expired in July (when Leopard was to come out) it’s no longer there.
You can hunt around the Internet for a old mirror if you don’t have the CDs.
Once installed, it’ll say it’s expired: just get Dashcode working again.
Stability
Dashcode is particularly ropy with Safari 3.
With Safari 2 it’s much more stable. Since there is the occasional crash from Dashcode,
I would recommend constantly saving your project as you’re coding.
I found more than 10% of the time, Dashcode would crash and result in a total loss of my code from the last save point.
Also, I’ve noticed that dumping a lot to the run log, when viewing the log, can cause Dashcode to slow right down to almost hanging.
Best to avoid dumping large amounts of HTML to the log.
Designing Widgets
Controls
Dashcode offers the easy integration of bespoke elements such as the scrollarea, gauges and other such sexy components.
They’re pretty easy to drop on to the widget from Dashcode, but until you’re coding, they’re not immediately obvious how they work.
The help is limited, so I would recommend to develop by tutorial, in particular, look for the ‘refresh()’ methods – as this seems to be a fairly standard way to redraw objects.
Effects
window.resizeTo(x, y);
Running system commands
widget.system('ps -auxww | grep ' + myCommand, null);
What you should keep in mind, is that you can run any command through the system method. This includes Perl, Ruby, AppleScript and anything else that suits your needs.
Using these commands I’ve recently been able to create a widget that queries Mail’s SQLite’s database via Perl.
It was a case of running the system method and capturing the output (and in my case, eval’ing it from a JSON output).
Ajax in the widget
responseXML
will be null because the page being returned isn’t text/xml
– it’s text/html
. You can do it using the following (in jQuery syntax):
$.ajax({
url: 'http://remysharp.com/example_page', // doesn't really exist!
dataType: 'html', // important
success: function (xml) {
// convert the HTML to an XML DOM object
var dom = getDOMfromXML(xml);
alert(dom.getElementsByTagName('h1').length);
}
});
function getDOMfromXML(xml) {
var d = document.createElement('div');
xml = xml.substring(xml.indexOf('<body') + xml.substring(xml.indexOf('')+1);
xml = xml.substring(0, xml.indexOf(''));
d.innerHTML = xml;
return d;
}
getDOM
function is pretty horrible – but it works. I tried using DOMParser
and tried using Ajax local data trick and I tried using an iframe to inject the XLM – but neither would load the XML properly (in fact it would be blank).
Widget Attributes
- Allow Network Access is required for Ajax requests
- Allow Command Line Access is required for running external programs, i.e. if you have a Perl script executing some arbitrary task
The Inspector
- Hide items from the default image to present a better widget when it’s installing. It can to keep the preview of your app looking clean.
Debugging
- Breakpoints
- Live stack traces
- Evaluate window – to test commands
alert("My debug message");
.