Wednesday, June 25th, 2008
Badging Flickr with Dojo
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:
HTML:
-
-
...
-
<link rel="stylesheet" href="/dojo/dojox/image/resources/image.css" />
-
<style type="text/css">
-
img.thing { width:50px; height:50px; }
-
</style>
-
...
-
</head>
-
...
-
<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:
HTML:
-
-
...
-
<link rel="stylesheet" href="/dojo/dojox/image/resources/image.css" />
-
<style type="text/css">
-
img.thing { width:50px; height:50px; }
-
</style>
-
...
-
</head>
-
...
-
<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.
Leave a comment