Dashcode Tips And Tricks 3

Dashboard

Share
Dashcode Tips And Tricks

Hey

I’ve been using Dashcode more and more over the last couple of days, I have really taken the ball and ran with it. I have learnt lots of little tricks and tips that I want to share with you. Developing a widget for the Dashboard can range from the very simple to the very hard. If you use the pre-built templates you can get a new widget up and running in a couple of seconds. You can then advance your skills to make it more accustomed to your site. You can then take it even further adding in more features. The more features you add, the more complex your widget becomes and the hard it is to code, but the better the result. I am by know means a good widget coder. But theses tips are designed to help a new user make their widget that bit more unique.

HTML/CSS

Widgets are built on HTML and CSS. The first tip I recommend for any one developing widgets is to use an external editor to build you widget design. The reason for this is that you can get all your elements on the page methodically and in a simple to read manner. Dashcode has a tendency to add in lots of code that you don’t need, as well as lots of white space. As a first tip build your widget in another program, such as TextMate, and then import your code.

Learn Javascript

Widgets are built on HTML and CSS but run on Javascript. Widgets are small webpages, which run in their own little space. All of the various commands are executed in javascript. As a result if you know Javascript your life will go a hell of a lot easier. I don’t know that much Javascript as a result it took me a lot longer to build a widget. If you learn how javascript works and is used before you go into building widgets your life will go a hell of a lot easier.

Alert Messages

When running your widget and debugging the code you may want to place messages in your run console. For example you could put in values, messages can be pretty much anything your want. This is done using the following code.

alert("My debug message");

You can post variables by removing the quote marks.

alert(variable);

You can put these anywhere you want. Very useful in finding out why something isn’t working as it should.

Preferences

If you want to add extra functionality to your widget you can add in preferences. These preferences mean that when a user closes a widget or restarts Dashboard the same settings can be initialized when it starts up again. There is two pieces of code you can run. To set a preference use the following code.

var preferenceKey = "key";        // replace with the key for a preference
var preferenceValue = "value";    // replace with a preference to save
// Preference code
widget.setPreferenceForKey(preferenceValue, preferenceKey);

The key is the name of the preference value you want to save. It can be any name you want. Value is the value that you want to save. This can be a variable or just a piece of text. The final line at the bottom is the code to save the prefence value.

To grab the preference value from the file you can use the following code.
var preferenceForKey = "key";    // replace with the key for a preference
// Preference code
preferenceForKey = widget.preferenceForKey(preferenceForKey);

You can then use “preferenceForKey” to replace any variable in your Javascript. Preferences can be used for anything you want.

Resizing

If you want to make your widget more dynamic and re-sizable you can use a small bit of code to re-size the widget. You can then attach this to any function you want. There are two ways. The very quick method, cheap and simple. Or the more complex method which uses more code but looks a lot better. The quick method uses the following code.

window.resizeTo(x, y);

Change the x and y values to the size you want to change. This will re-size the whole widget but it doesn’t look very good. As well as this it is not animated. For a better animation you can use the following.

function changesize (){
duration = 500; // The length of the animation
interval = 13; // How often the animation should change
start = 1.0; // The starting value
finish = 0.0; // The finishing value
handler = function(animation, current, start, finish) {
document.getElementById("firstImg").style.opacity = current;
};
new AppleAnimator(duration, interval, start, finish, handler).start();
document.getElementById("secondimage").style.setProperty('display', 'block');
duration = 500; // The length of the animation
interval = 13; // How often the animation should change
start = 0.0; // The starting value
finish = 1.0; // The finishing value
handler = function(animation, current, start, finish) {
document.getElementById("secondImage").style.opacity = current;
};
new AppleAnimator(duration, interval, start, finish, handler).start();}

This swaps the first image with the second image. You do need two images but the gradual swap between the two images looks a lot better. The first image will fade out and the second image will fade in. You may need to combine it with the next step to hide any erroneous elements.

Changing Elements

You can change elements properties easily using a couple of Javascript commands. For example if you want to changes a divs css properties you can use the following code.

document.getElementById("element").style.setProperty('display', 'none');

That piece of code will hide the element “element”. You can change the properties at the end of the string to any valid CSS property.

You can change the HTML inside an element using Javascript very easily. You can add the following code inside a function.

document.getElementById("element").innerHTML = "Text";

This piece of HTML is very useful to link with the preference value as mentioned previously. For example you can use the following.

document.getElementById("element").innerHTML = preferenceForKey;

That will update the div element “element” with the preference value. You do need to add the preference code previously for that piece of code to work.

By using the innerHTML option you can set any text inside the div element. and you can use the setProperty option to change the CSS style. The final option is to change the extra options. For example the values on a slider. This piece of code is useful if you want to dynamically change various elements properties. For example a slides value.

document.getElementById("slider").setAttribute('value',preferenceForKey);

You can use a variable or a piece of text in the last part of the string. The first section is the element you want to change, in this case I want to change the value for a slider. The second half is the value you want to use. Again I have used a preference value which is stored in the preferences file.

Automatic Updates

If you have people using your widget you may want people to get the latest version of your widget so they have the latest version. The best method I have found for doing this is using WidgetShows technique. It does take a little bit of fiddling to get right. As well as this on Firefox the text is cut off a bit so you may have to look at the source to fully see the explanations.

Look At Other Peoples Code

Although I don’t recommend stealing other peoples code and passing it off as your own. It is a good idea for a developer to take a look at how other people have achieve a certain functions. Since widget code resources is pretty limited taking a peek at how other people have done certain tasks is very useful. I’ve learned a lot of just looking at how other people have achieved tasks I wanted to achieve.

Use The Dashcode Library

One of the best resources of finding out code and certain elements is to use the library built into Dashcode. This is located in the top left of the toolbar. It contains lots of snippets of code. For example I found the preference and the animation code from this library.

Have a look through the lists and see if there is anything interesting to use. You may be surprised in what you find.

Localize Your Widget

If you have many readers that don’t speak the language your widget is displaying you could stop them from using your widget. A really good post about localization is over at Clear Wired. Its a good post. I am going to localize my widget so I can please as many people as possible.

Dashcode User Guide

One of the final tips and tricks I would like to share with you is the Apple Dashcode guide. This guide is very thin on details and could be doing with being about a hundred times longer, but for a new user like myself (and possibly experienced users) it does off a couple of tips. It is updated (I think) with the new SDK for the iPhone and it includes a couple of iPhone developer tips. I haven’t yet released used this version although the tips and tricks do seem similar.

Don’t Use Dashcode For Development

Not really a tip or a trick. But Dashcode doesn’t have the best development tools. It adds in a lot of erroneous code and really does end up being more of a hindrance. It does have good testing tools, but if you are trying to layout the elements it can get annoying. If you do get good at widget development I would recommend you not use Dashcode. But if you do get good at widget development you probably know more than me any way.

If you have any more Dashcode and widget development tips and tricks please leave a comment below. I would love the hear any tip or trick you have.


If you want to keep up with the latests post from Mac Tricks And Tips I recommend you subscribe to the RSS Feed.

Where To Next?

  • Subscribe To Mac Tricks And Tips