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!
Flex Widgets from WidgetsLive!
This entry was posted in Flex, RIA, Widgets. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
13 Comments
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.
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
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
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
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.
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
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.
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
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.
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
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
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
Thanx a lot!
Tom
3 Trackbacks
[...] Finally. I’ve been really out of the loop or I would have noticed earlier. These are, imho, an exemplar of proper Flex/as3 coding practices and an excellent resource. QuietlyScheming The code has already been put to use by James Ward over at his site with some examples of using these components with Flickr loaders and with YouTube videos. Check it out [...]
[...] is flex or apollo the best way to go? [...]
Widgets Live! Everywhere…
Widgets Live! was a fabulous day of festivities (November 6, 2006) which attracted the thought leaders of the web, mobile and gadget industries to discuss one of the hottest topics, widgets. Companies like AOL, Google, Yahoo and Microsoft, Adobe all…