Flex Widgets from WidgetsLive!

By James Ward | Published: November 6, 2006

This morning I had the opportunity to present at the WidgetsLive! Conference about Flex and widgets. I showed a few examples using Ely Greenfield’s DisplayShelf component. One example pulled in images from Flickr. Check out the demo and the code. I also was thinking it would be cool to throw some YouTube videos into the DisplayShelf component. After a few minutes I was able to make it work with the exception that I couldn’t get the reflection to not flicker during video playback. I’ll need to get help from Ely to fix that, so for now I’ve disabled the real-time reflector. You can see the demo of the YouTube DisplayShelf widget and get the code. I also quickly turned one of the Display Shelf apps into an desktop widget using Apollo. I hope all the attendees enjoyed the session and for those who weren’t there, enjoy the demos!

This entry was posted in Flex, RIA, Widgets. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
  • David

    I tried the demo for both of these “widgets” and I noticed that they have a few problems. The one using Flickr images isn’t able to determine if an image is horizontal or vertically oriented, so you end up seeing a lot of them turned the wrong way—makes for a sore neck.

    The YouTube widget doesn’t have any way that I can find to stop a video and move on the a different one; in fact, you can end up running several at a time even though you probably didn’t want to do that. There should be controls added to stop one before you move to and play another.

  • Matt

    James,
    Thanks for the demo and code. I changed the queryObj.method to flickr.photos.search, added queryObj.user_id and a slider bar (.length -1) to make it scrollable personal photos. It is a nice little picture gallery.

    I had problems setting up a proxy servers. Any tips? I tired two different ways. Maybe my hosting company doesn’t allow it.

    Anyway, thanks for the info.

    -Matt

  • James Ward

    David,

    The code is provided, so feel free to improve the application however you want. :) My goal was just to get the basics up there. Let me know if you need any help.

    Matt,

    Glad you got it working! The proxy thing got a bit tricky. I used Apache’s mod_proxy, a crossdomain file, and a hack to Ely’s DisplayShelf. I’ll try to write up more details tonight.

    -James

  • Pingback: thefactoryfactory

  • Pingback: The Boulder Cup « 16 Eight

  • Pingback: Somewhat Frank

  • Edwin Veltman

    James,
    Great work. Did you ever write up your solution to setting up the proxy servers? I’d like to play around with the app, and I can’t get it to work on my test website.
    Thanks,
    -edwin

  • jakdracula

    hi:

    I’m new, trying to learn ‘Flex’, bought a copy… here’s the deal:

    No matter what I do, I can’t seem to open files or projects like the one that you provide here.

    I’ve tried ‘open’, ‘new flex project’, etc. Zero.

    Can you tell me (and us, because I’m not alone with this problem) step by step, in easy small words for the dumb, how in the heck do you open this?

    Thanks.

  • http://www.jamesward.org James Ward

    You might need to create a New Flex Project, then copy in the files. Are you getting an error message? Is the application not compiling?

    -James

  • http://barringtonfamily.net Matt B.

    This is pretty awesome, but I’m having trouble getting the a proxy setup and working too. Did you ever get a chance to write it up? Any help would be much appreciated.

  • http://www.jamesward.org James Ward

    Hi Matt,

    Sorry I haven’t posted that yet. Here is my Apache config:
    <VirtualHost flickr.proxy.foo.com:80>
    ServerName flickr.proxy.foo.com
    DocumentRoot /var/www/flickr.proxy.foo.com/htdocs
    ProxyRemote /static.flickr.com/* http://static.flickr.com/
    ProxyPass /static.flickr.com http://static.flickr.com
    ProxyPassReverse /static.flickr.com http://static.flickr.com
    </VirtualHost>

    Put a global crossdomain.xml policy file in the /var/www/flickr.proxy.foo.com/htdocs dir.

    Then you might need to load the policy file:
    http://livedocs.adobe.com/flex/201/langref/flash/system/Security.html#loadPolicyFile()

    And then tell your object to check the policy file:
    http://livedocs.adobe.com/flex/201/langref/flash/system/LoaderContext.html#checkPolicyFile

    Hope that helps.

    -James

  • http://barringtonfamily.net Matt B.

    Thanks for the Apache config. Unfortunately, my site is on a shared host (bluehost) and we cannot setup virtual hosts. I’ve tried a couple of other things that I found in the documentation but really haven’t had much luck so far. Am bummed, because I really have enjoyed working with Flex this past week, but the proxy/security piece is becoming a downside. Like the other Matt who posted above, I took your flickrWidget and tweaked it to become a picture gallery for my WordPress blog site. It looks amazing in eclipse…would really like to get it deployed on my site if at all possible.

  • http://www.jamesward.org James Ward

    Matt, I believe there are php scripts you can use to proxy. In which case you wouldn’t need a special virtualhost. Let me know if you find anything.

    -James

  • http://tom.kulturlounge.de Tom

    Hi James!

    How can I add more Video Controls to the youtube example. I did not succeed in doing this until now.
    Can you please explain it?

    Regards,
    Tom

  • http://www.jamesward.org James Ward

    Hi Tom,

    I’ve posted a new blog that provides the code for a VideoCoverFlow component:
    http://www.jamesward.org/wordpress/2008/03/11/new-flex-screencast-and-videocoverflow-component/

    -James

  • http://tom.kulturlounge.de Tom

    Thanx a lot!

    Tom

  • Mohammad Shehab

    Hey James
    Im new to Flex and I would like to learn how to create a widgets in flex.
    can u give me a useful like where I can start

    Thanks a lot