Flex and TurboGears at CodeMash – DisplayShelf Widget

This past week I spoke at the CodeMash conference. It was a really great event full of stimulating conversation. Even more fun than trying to surf in the wave machine was an Open Spaces style session that Kevin Dangoor (creator of TurboGears) and I hosted. We had planned to just sneak off into a corner and turn Ely Greenfield‘s DisplayShelf component into a TurboGears Widget. However, word quickly spread that we were going to do this and everyone wanted to watch as we coded. We had a bunch of fellow geeks huddled around every spare laptop and monitor we could find. I shared my screen with VNC so that everyone could watch what Kevin and I were doing. It was by far the best geek-out session I have had in a long time! Check out a screenshot of the DisplayShelf widget in a TurboGears application, showing a picture of our geek-out session:

Continue reading to learn more about what we built, how we built it, and how you can use it…

The DisplayShelf is similar to the iTunes cover art display. It’s built with the free Flex SDK, open source, and MIT licensed. Earlier in the week I made the DisplayShelf work with TurboGears, but it wasn’t yet a reusable widget. Kevin walked me through the process of converting my test application to a real widget. In about twenty minutes we had most of the widget setup. To expedite the process we used an existing project to test the new widget. This particular project had previously been used to get the DisplayShelf running, sans-widget. Very few times in my sixteen years of programming adventures have things with this many moving parts worked on the first try. I coded the 3 lines nessecary to use the new widget, went to my browser and hit reload, one hundred percent convinced I would see an error message. I saw the DisplayShelf, which I thought was actually still cached somewhere from my previous project. I reloaded again, expecting to see an error. No error. I reloaded the TurboGears server, again expecting to see an error. No error. What is wrong? Where is the error? Surely this didn’t work first try! I viewed the source of the web page and sure enough it was using the new DisplayShelf widget! Everyone (excluding Kevin) was pretty amazed. I guess Kevin is accustomed to these types of successes with TurboGears.

The next step was to upload the new widget to the Cheese Shop, a home for Python based widgets. Kevin walked me though the process. I expected this to be tedious… Packaging things up in some strange way, navigating a difficult web site, uploading, etc. Kevin again blew us away with the simplicity of doing this sort of thing. Literally it was two commands to get our widget on the Cheese Shop. Again everyone except Kevin is amazed.

Now that the widget was built and posted in the Cheese Shop it was time to test using the widget from scratch. I did this with Kevin’s help, while someone else tired on their own computer. Within a few minutes we both had applications which were using the new widget! Again everyone except Kevin is amazed. See the recurring theme? Coming from a variety of backgrounds we couldn’t believe how easy it was to build web applications and use widgets with TurboGears. Kevin just smiled as we all had epiphanies.

Using Flex for rich widgets in TurboGears applications is a great combination of technologies. You get two great programming models and seamless interaction with both the FABridge and with TurboGears’s JSON support. A few months ago Bruce Eckel and I recorded a screencast of us building an application with a Flex front-end and a TurboGears back-end. The application we built used JSON to expose the TurboGears back-end to Flex. We had really great success with this approach. At CodeMash we took another approach and used the FABridge to pass objects from TurboGears to a Flex application. Both approaches work really well and depending on what you are building, one may be more applicable than another.

Now lets walk through how you can use the DisplayShelf component in your TurboGears applications. This assumes that you already have TurboGears installed.

1) Get the DisplayShelf component from the Cheese Shop:

easy-install DisplayShelf

2) Create a new TurboGears application using the quickstart wizard:

tg-admin quickstart

3) In the created project directory, start the TurboGears server with the created start script (your start script name is based on your package name):

python start-dstest.py

4) Add the DisplayShelf widget to your controllers.py file:

from displayshelf.widgets import DisplayShelf

5) Return the DisplayShelf widget in your default template:

    def index(self):
        return dict(shelf=DisplayShelf())

6) Copy some images into the static/images directory.

7) Replace the body of the welcome.kid file with the DisplayShelf (specify an array of the images in your static/images directory):


8) Load http://localhost:8080/ in your browser.

That’s it! You are now using the DisplayShelf in your TurboGears app! If you start the TurboGears toolbox and go to http://localhost:7654/widgets/ you will also find the DisplayShelf in the Widget Browser.

It’s that easy! Thanks Kevin and Mark for all your help this past week getting me up-to-speed on TurboGears! TurboGears truly is a world class web application framework! And the widget system is by far the best I’ve ever seen! Now lets get some more Flex based widgets created! :)

  • greg h


    Can you provide an RSS feed for your blog? (I looked but am not seeing it.)



  • James Ward

    Hi Greg, I guess I removed the WordPress links somehow, but you can get the feed here:

    Thanks for reading!


  • Hi James,

    Thanks for writing this all up. I wish I had more time to spend at CodeMash, because it was a lot of fun. This session was definitely the highlight for me.

    One minor correction to your article: I was pretty amazed that it worked on the first try, too :)

    I’ll be talking about ToscaWidgets (the next iteration of TurboGears Widgets) at PyCon next month. Maybe I can sneak a little Flex into that talk, too.


  • James Ward

    Haha. Yeah, I embellished a bit. :) I’m hoping that I can make it to PyCon. Do you know what day your talk is?


  • My husband wasn’t giving us enough respect for the TurboGears/Flex widget creation at CodeMash tonight, so I had to show him what the big deal was. He started timing (reminiscient of my 6 minute chocolate cake recipe, but that’s a story for a different day). Anyhow, I easy_installed the widget from the Cheese Shop and quickstarted the project and copied over images. Had the thing running in 16 minutes.

    It’s AWESOME!

  • James Ward

    16 minutes! That’s awesome! Thanks again Dianne for hosting the Jam and being fun company at CodeMash! Hopefully see you again soon!


  • It would have been faster if I had been wearing my glasses! LOL! My husband challenged me to do the app.

    Seriously, I think it could be done in 6 minutes, rivaling the chocolate cake from Moosewood Restaurant Cooks at Home. Better yet, I could do the app and he could make the cake! LOL!

    Thank YOU for coming to CodeMash and doing your Flex talk. We’ll definitely cross paths soon. I think I have a Java app that could use some Flex ….

    — Dianne

  • James,

    Where in the world have you been all my life? No, seriously, I just barely stumbled upon your BLOG (by way of doing a search for FLEX on Digg.com) and am positively surprised at all the good stuff in which you’re involved.

    As an absolute newbie to TurboGears and all the cool stuff you guys are doing, where can I find a 101 on all of this?


    WebGyver (aka Dee)

  • James Ward

    Hi WebGyver,

    Glad you found it useful. There is tons of good info about Flex at http://www.flex.org

    As far as TurboGears, I’m not sure. I went to the TurboGears Jam and learned all that I know. :)


  • Vidya

    Hi James,

    I really liked your tutorial on how to integrate turbogears with Flex. However, rather than using the Flex form objects, I would like to use Flash graphics in Flex, but populating the flash object (i.e. a text field) with text from Turbogears.

    Is there a way to do that, and if so could you point me to some info on that?


  • That should be possible. Are you using Flash CS3? If so you will want to look into the Flex Component Kit for Flash CS3:

    I hope that helps.


  • Mike

    Hi. First off thank you for this find and the widget, its a definite plus for a project i’m working on. I was just wondering if there is an easy way to incorporate a caption for each picture as I scroll through the display shelf. any ideas or comments (either on here or by email) would be appreciated.



  • Hi Mike,

    I think the default itemRenderer is an Image. You can create a custom itemRenderer which could be a Canvas which contains an Image and a Label. Make sense?


  • Mike

    Hi James,
    Thanks for your reply. I’m not sure exactly how to make that change. Is this a flex issue or something to do with turbogears. Which file would i need to change to tag on the label for the image?

  • Pingback: James Ward - RIA Cowboy » Blog Archive » Speaking at CodeMash 2008: “RIAs - Beyond the Buzz”()

  • paul

    we love the display shelf component and looking for someone to help us out.

    we can make a donation if you can adopt this component to what we currently have (videos in our help section, so the displayshelf works as-is and users can select an image then click to watch video)

    anyone available to help us out?

    i can provide more info when contacted.

  • Hi Paul,

    You can certainly do video in the DisplayShelf. Feel free to email me:
    jaward at adobe dot com