Ajaxian

DHTML for the 21st century

Jobs @ Ajaxian

Find a Job, Post a job.

Topics

Archive

Wednesday, June 25th, 2008

Badging Flickr with Dojo

Category: Dojo , Examples

Dylan Schiemann has a really nice case study post on implementing a Flickr badge with Dojo.

What is particularly interesting is how he starts with a simple version:

<head>
...
<link rel="stylesheet" href="/dojo/dojox/image/resources/image.css" />
<style type="text/css">
img.thing { width:50px; height:50px; }
</style>
...
</head>
<body>
...
<div dojoType="dojox.image.FlickrBadge" rows="8" cols="3" username="dylans"
tags="dojotoolkit,italy"></div>
...
<script type="text/javascript" src="/dojo/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojox.image.FlickrBadge");
</script>
</body>

And then shows how he tweaks it for performance, explaining what he is doing along the way:

<head>
...
<link rel="stylesheet" href="/dojo/dojox/image/resources/image.css" />
<style type="text/css">
img.thing { width:50px; height:50px; }
</style>
...
</head>
<body>
...
<div id="flickrSidebox"></div>
...
<script type="text/javascript" src="/dojo/dojo/dojo.js"></script>
<script type="text/javascript">
function initBadge(){
new dojox.image.FlickrBadge({rows: 8, cols: 3,
username: "dylans", tags:"italy,dojotoolkit"},
"flickrSidebox").startup();
}
dojo.addOnLoad(function(){ dojo.require("dojo.badge");
dojo.addOnLoad(initBadge)});
</script>

It is nice to see his thought process, and how you can start with functionality, and then go back and tweak away.

Posted by Dion Almaer at 7:06 am
Comment here

3.3 rating from 40 votes

Comments Here »

Comments feed TrackBack URI

Leave a comment