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:

  1. <head>
  2. ...
  3. <link rel="stylesheet" href="/dojo/dojox/image/resources/image.css" />
  4. <style type="text/css">
  5.     img.thing { width:50px; height:50px; }
  6. </style>
  7. ...
  8. </head>
  9. <body>
  10. ...
  11. <div dojoType="dojox.image.FlickrBadge" rows="8" cols="3" username="dylans"
  12.     tags="dojotoolkit,italy"></div>
  13. ...
  14. <script type="text/javascript" src="/dojo/dojo/dojo.js"
  15.     djConfig="parseOnLoad: true"></script>
  16. <script type="text/javascript">
  17.     dojo.require("dojox.image.FlickrBadge");
  18. </script>
  19. </body>

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

  1. <head>
  2. ...
  3. <link rel="stylesheet" href="/dojo/dojox/image/resources/image.css" />
  4. <style type="text/css">
  5.     img.thing { width:50px; height:50px; }
  6. </style>
  7. ...
  8. </head>
  9. <body>
  10. ...
  11. <div id="flickrSidebox"></div>
  12. ...
  13. <script type="text/javascript" src="/dojo/dojo/dojo.js"></script>
  14. <script type="text/javascript">
  15.     function initBadge(){
  16.         new dojox.image.FlickrBadge({rows: 8, cols: 3,
  17.             username: "dylans", tags:"italy,dojotoolkit"},
  18.             "flickrSidebox").startup();
  19.     }
  20.     dojo.addOnLoad(function(){ dojo.require("dojo.badge");
  21.         dojo.addOnLoad(initBadge)});
  22. </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

You must be logged in to post a comment.