Home > Flex, RIA, Widgets > Flex Widgets from WidgetsLive!

Flex Widgets from WidgetsLive!

November 6th, 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!

Flex, RIA, Widgets

David
November 6th, 2006 at 22:54 | #1

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
November 7th, 2006 at 11:48 | #2

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

November 7th, 2006 at 12:49 | #3

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

Edwin Veltman
December 4th, 2006 at 20:46 | #4

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
April 14th, 2007 at 09:15 | #5

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.

April 14th, 2007 at 09:33 | #6

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

April 20th, 2007 at 18:44 | #7

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.

April 20th, 2007 at 19:50 | #8

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

April 21st, 2007 at 05:45 | #9

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.

April 21st, 2007 at 18:55 | #10

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

March 3rd, 2008 at 07:22 | #11

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

March 11th, 2008 at 12:04 | #12

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

March 12th, 2008 at 00:31 | #13

Thanx a lot!

Tom

November 8th, 2006 at 09:02 | #1
November 10th, 2006 at 15:37 | #2
November 12th, 2006 at 12:42 | #3


You are viewing a mobilized version of this site...
View original page here

How do you rate mobile version of this page?

Mobilized by Mowser Mowser