Simple Picasa Gallery with Flex and PicasaFlex API

Tagged:  

I decided to make simple Flex application which explains how to use PicasaFlex API. The application shows content of single album on user's Picasa Gallery. User can navigate through the pages. Click on any thumbnail and view the image. Click on image and return to his album view.

How to use Simple Picasa Gallery:

Fisrt: Download project from the link provided below. Put it into your Eclipse or FlexBuilde.
Then dowload PicasaFlex API library from http://code.google.com/p/picasa-flex-api/ , unzip and drop it into your project lib folder.

Second: Configure your gallery and album in init() function
gService.userName = username;
gService.proxied = true;
gService.projection = GDataService.GDATA_PROJECTION_API;
gService.getPhotosByAlbum("Your Album name",0,16);
gService.addEventListener(GDataEvent.GET_ALBUM,handleAlbum);
gService.addEventListener(GDataEvent.GET_PHOTO,handlePhoto);

where gService.userName is your gallery user name, and where "Your Album name" is the string name of your album.

Third: Build and deploy! That is it! Very simple :)

If you have any questions - feel free to ask!

I would suggest to use http://riahut.com/forums/flex-developing/picasa-flex-api - forum or  http://groups.google.com/group/picasa-flex-api?pli=1 that woul hepl to address issues faster.

Demo Of The Gallery
Sources
PicasaFlexAPI

 

Simpe Picasa Gallery Screenshot

Note. This is edited version of SimplePicasaGallery which modified accordingly to recent changes in PicasaFlexAPI.
Please refet to sourcecode to see what was changed.

Comments

Hai,
this application is quite nice, i want to access private album i ill use the authentication method. but i get this exception how can i over come this

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at org.ectar.papi:GDataService/authenticateClientApp/org.ectar.papi:authOk()[D:\..Projects\Flex\PicasaFlexApi\org\ectar\papi\GDataService.as:717]
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at HTTPService.as$32::HTTPOperation/http://www.adobe.com/2006/flex/mx/internal::dispatchRpcEvent()[C:\autobuild\3.4.0\frameworks\projects\rpc\src\mx\rpc\http\HTTPService.as:763]
at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::resultHandler()[C:\autobuild\3.4.0\frameworks\projects\rpc\src\mx\rpc\AbstractInvoker.as:263]
at mx.rpc::Responder/result()[C:\autobuild\3.4.0\frameworks\projects\rpc\src\mx\rpc\Responder.as:46]
at mx.rpc::AsyncRequest/acknowledge()[C:\autobuild\3.4.0\frameworks\projects\rpc\src\mx\rpc\AsyncRequest.as:74]
at DirectHTTPChannel.as$149::DirectHTTPMessageResponder/completeHandler()[C:\autobuild\3.4.0\frameworks\projects\rpc\src\mx\messaging\channels\DirectHTTPChannel.as:409]
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/flash.net:URLLoader::onComplete()

Interesting, let me check what is going on.Sorry for the late reply.

Ankur your problem will be solved by using flex sdk 3.4. update your flex version

i tried this but it wont work it ill show the error on the GdataService.as on the line no of 717. it had the line service.method=HTTPReqestMessage.DELETE_METHOD

So you saying HTTPReqestMessage cannot be foubd in your libraries?

You are right! Thank you

hi, The papi folder i was talkin abt, i got it, thats in the swc,

k, i put the swc in the lib folder, but now the errors are coming

Severity and Description Path Resource Location Creation Time Id
1044: Interface method addChildBridge in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1275566157218 41356
1044: Interface method addChildToSandboxRoot in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1275566157203 41351
1044: Interface method deployMouseShields in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1275566157203 41346
1044: Interface method dispatchEventFromSWFBridges in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1275566157203 41347
1044: Interface method get swfBridgeGroup in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1275566157203 41349
1044: Interface method getSandboxRoot in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1275566157203 41348
1044: Interface method getTopLevelRoot in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1275566157218 41353
1044: Interface method getVisibleApplicationRect in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1275566157218 41358
1044: Interface method isDisplayObjectInABridgedApplication in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1275566157203 41350
1044: Interface method isTopLevelRoot in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1275566157218 41357
1044: Interface method removeChildBridge in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1275566157218 41354
1044: Interface method removeChildFromSandboxRoot in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1275566157218 41355
1044: Interface method useSWFBridge in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1275566157203 41352

i don't understand, how to remove these errors, can u help.

plzz look in to this

Hi, it's been a fantastic work you have done, i appreciate,

K, the problem i m getting is that, the src/org/ectar/papi, here the papi folder is not there when i am downloading from the link you are provinding for download.

i somewhere manged to get the papi folder, but thats not giving the soluiton, one error is coming,

TypeError: Error #1010: A term is undefined and has no properties.
at ()[C:\Documents and Settings\Administrator\My Documents\Flex Builder 3\SimplePicasaGallery\src\org\ectar\papi\GDataService.as:391]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::dispatchRpcEvent()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\rpc\AbstractInvoker.as:168]
at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::resultHandler()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\rpc\AbstractInvoker.as:191]
at mx.rpc::Responder/result()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\rpc\Responder.as:41]
at mx.rpc::AsyncRequest/acknowledge()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\rpc\AsyncRequest.as:74]
at DirectHTTPMessageResponder/completeHandler()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\messaging\channels\DirectHTTPChannel.as:381]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()

thanx, waiting for help

tc hav a gr8 time,

Thank you very much for your articles! I always anticipate something new from you! If you had a journal, I would beñome your devoted reader! Many people today make use of http://www.ebook-search-queen.com periodical search engine and if you had a journal, you might increase the number of readers. Think it over! ;)

That is the most documentation on the API I've found other than the class descriptions. There is no info on how to use the class other than this. Frankly it is not enough. What arguments come into the event listeners? How do you actually get hold of the photos or albums? How do you construct a gService? is it from a GDataService? does that need parameters? How do you bind it to component members? We are only getting half a tutorial. Basically I got as far as constructing the service in and init function, creating two event listeners which i think never get called and if they did I have no idea how to get the album or photo because I don't know how they are passed to the event listener, or if I have to query the gService object to get them or what. Ok I'm new to flex, but I've been programming 20 years and I should not be finding this difficult. Would really appreciate something a little more in depth. Reading class API classes and methods isn't really very descriptive of how to use the package. It is a shame that someone can put so much time into building the API and then not bother to give a single use case for it.

HI! Thank you for you comment, sorry didnt reply any sooner. Actually have you seen sample application? I think it explains alot. But yes, I'm going to make documentation better

Hi,
I am trying to embed picasa api with flex web application.i am using flex builder 3.0 and i downloaded source from :
http://riahut.com/files/SimplePicasaGallery/srcview/SimplePicasaGallery.... and imported in flex builder and i downloaded google api from http://picasa-flex-api.googlecode.com/files/PicasaFlexAPI.dev.r002.54.zi... and placed in libs folder in flex builder ..i change gService.userName=myusername and albumName=my album name i dint find any error till this process but when i try to run the sample it shows error like :

Severity and Description Path Resource Location Creation Time Id
1044: Interface method addChildBridge in namespace mx.managers:ISystemManager not implemented by class _Picasagallory_mx_managers_SystemManager. Picasagallory line 13 1267770334046 3091
1044: Interface method addChildToSandboxRoot in namespace mx.managers:ISystemManager not implemented by class _Picasagallory_mx_managers_SystemManager. Picasagallory line 13 1267770334046 3086
1044: Interface method deployMouseShields in namespace mx.managers:ISystemManager not implemented by class _Picasagallory_mx_managers_SystemManager. Picasagallory line 13 1267770334046 3081
1044: Interface method dispatchEventFromSWFBridges in namespace mx.managers:ISystemManager not implemented by class _Picasagallory_mx_managers_SystemManager. Picasagallory line 13 1267770334046 3082
1044: Interface method get swfBridgeGroup in namespace mx.managers:ISystemManager not implemented by class _Picasagallory_mx_managers_SystemManager. Picasagallory line 13 1267770334046 3084
1044: Interface method getSandboxRoot in namespace mx.managers:ISystemManager not implemented by class _Picasagallory_mx_managers_SystemManager. Picasagallory line 13 1267770334046 3083
1044: Interface method getTopLevelRoot in namespace mx.managers:ISystemManager not implemented by class _Picasagallory_mx_managers_SystemManager. Picasagallory line 13 1267770334046 3088
1044: Interface method getVisibleApplicationRect in namespace mx.managers:ISystemManager not implemented by class _Picasagallory_mx_managers_SystemManager. Picasagallory line 13 1267770334046 3093
1044: Interface method isDisplayObjectInABridgedApplication in namespace mx.managers:ISystemManager not implemented by class _Picasagallory_mx_managers_SystemManager. Picasagallory line 13 1267770334046 3085
1044: Interface method isTopLevelRoot in namespace mx.managers:ISystemManager not implemented by class _Picasagallory_mx_managers_SystemManager. Picasagallory line 13 1267770334046 3092
1044: Interface method removeChildBridge in namespace mx.managers:ISystemManager not implemented by class _Picasagallory_mx_managers_SystemManager. Picasagallory line 13 1267770334046 3089
1044: Interface method removeChildFromSandboxRoot in namespace mx.managers:ISystemManager not implemented by class _Picasagallory_mx_managers_SystemManager. Picasagallory line 13 1267770334046 3090
1044: Interface method useSWFBridge in namespace mx.managers:ISystemManager not implemented by class _Picasagallory_mx_managers_SystemManager. Picasagallory line 13 1267770334046 3087

I don know actually how to send request picasa web regarding the album of the user.Any kind of help in this subject would be appriecieted.
Thanks

Really I cannot help you in this, very  strange errors. Can you give me more details?

I'ld like to try to contribute to the API, I'ld love to be able to add photo to a Picasa album directly from Flex...
Well you got my email address, maybe you can add me to the svn users.
Thank you

Cheers

-F-

Hi,

I downloaded the API and added to the libs folder of the project. These are the errors I get-

Severity and Description Path Resource Location Creation Time Id
1044: Interface method addChildBridge in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1264226654279 2467
1044: Interface method addChildToSandboxRoot in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1264226654273 2462
1044: Interface method deployMouseShields in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1264226654267 2457
1044: Interface method dispatchEventFromSWFBridges in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1264226654269 2458
1044: Interface method get swfBridgeGroup in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1264226654271 2460
1044: Interface method getSandboxRoot in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1264226654270 2459
1044: Interface method getTopLevelRoot in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1264226654275 2464
1044: Interface method getVisibleApplicationRect in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1264226654281 2469
1044: Interface method isDisplayObjectInABridgedApplication in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1264226654272 2461
1044: Interface method isTopLevelRoot in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1264226654280 2468
1044: Interface method removeChildBridge in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1264226654276 2465
1044: Interface method removeChildFromSandboxRoot in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1264226654278 2466
1044: Interface method useSWFBridge in namespace mx.managers:ISystemManager not implemented by class _SimplePicasaGallery_mx_managers_SystemManager. SimplePicasaGallery line 13 1264226654274 2463

Looks very strange to me. What are you using for your development environment and what exactly you downloaded?

Hi,
I have been trying embedding picasa api with flex web application. My issues is that i need to load and look at all the albums of the particular user. Uptil now i have authenticated user through the use of google Authsub. Also got the token. But now m not able to use the service to call the users list of album. I don know actually how to send request picasa web regarding the album of the user. Any kind of help in this subject would be appriecieted.
Thanks

Have you used Picasa Flex Api before? In PFA u cen use authenticateClientApp() method of GDataService class to authenticate then extract all albus of given user including private. 

Hello,

Try to use this method to retrieve my private albums and I have this console message.

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at org.ectar.papi:GDataService/authenticateClientApp/org.ectar.papi:authOk()[D:\..Projects\Flex\PicasaFlexApi\org\ectar\papi\GDataService.as:717]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at HTTPOperation/http://www.adobe.com/2006/flex/mx/internal::dispatchRpcEvent()[C:\autobuild\3.4.0\frameworks\projects\rpc\src\mx\rpc\http\HTTPService.as:763]
at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::resultHandler()[C:\autobuild\3.4.0\frameworks\projects\rpc\src\mx\rpc\AbstractInvoker.as:263]
at mx.rpc::Responder/result()[C:\autobuild\3.4.0\frameworks\projects\rpc\src\mx\rpc\Responder.as:46]
at mx.rpc::AsyncRequest/acknowledge()[C:\autobuild\3.4.0\frameworks\projects\rpc\src\mx\rpc\AsyncRequest.as:74]

maybe i doesn't use this method correctly.
Can you give a basic example to use it correctly.

Thanks

Can you send me piece of your code? It seems to be problem during authentication

Hi lytvynyuk,
do you have some news about the opportunity to show private album or album with "not in the list" photos ?

Andrea

Easy. You just need to authenticate and you will be able to display yours private albums.

I get five errors when I try to compile the sample project. Doesn't matter if I pick it up from the Google Code repo or the zip link provided in this blog.

1061: Call to a possibly undefined method getAlbum through a reference with static type org.ectar.papi:GDataService. SimplePicasaGallery.mxml SimplePicasaGallery/src line 41 Flex Problem
1061: Call to a possibly undefined method getAlbum through a reference with static type org.ectar.papi:GDataService. SimplePicasaGallery.mxml SimplePicasaGallery/src line 87 Flex Problem
1119: Access of possibly undefined property GET_ALBUM through a reference with static type Class. SimplePicasaGallery.mxml SimplePicasaGallery/src line 38 Flex Problem
1119: Access of possibly undefined property GET_PHOTO through a reference with static type Class. SimplePicasaGallery.mxml SimplePicasaGallery/src line 39 Flex Problem
1136: Incorrect number of arguments. Expected 4. SimplePicasaGallery.mxml SimplePicasaGallery/src line 67 Flex Problem

Please download the archive again and grab lates SWC from the http://code.google.com/p/picasa-flex-api/

Sorry, I just realized I should be looking in the 002. directory instead. Now compiles and runs.

Thanks!

Sorry, but I've the same problem......

What means "I should be looking in the 002" ?
What I have to do ?

Best Regards

I' ve downloaded the last API version 002.53 but the problem still happen .....

Could you help me ?
Thanks

Please download the archive again and grab lates SWC from the http://code.google.com/p/picasa-flex-api/

There was a sub folder named 002. When I used that one it worked for me.

I don't see a folder "002"..........

Where's in your project ? What's the path ?
Inside the "002" folder you copied the library ?

Thanks a lot !

When I checked out the trunk there was a sub folder named "002" where the working code resided.

Unfortunately in the files that i download from these page there isn't a folder "002" ............... :(

Please download the archive again and grab lates SWC from the http://code.google.com/p/picasa-flex-api/

Great ! !
Now it's work ! ! ! Very good ! ! !

One question, I' seen that it work only with public photos...........and not with private (I read your note) and not with "not in the list" photos.
Do you think it should be possible add this news function ? Authentication or show photo not in the list ?

Yep, it will be possible. And actually it is already there - i just need to add nice tutoial or at least article how to do that :)

I've seen that the software works in partial mode with "not listen" album.

I've set the "albumName" with the album name + puls the key that "picasa" show in the link.
The thumbanil of the pictures work very well, but it's impossible open the image.

Sorry for late reply... enjoy it :)

Hello..I have followed the instruction and try this API with the source code provided above, but there are few Errors come up like this one"1061: Call to a possibly undefined method getAlbum through a reference with static type org.ectar.papi:GDataService." Can you please help me fix it. thank you..;-) Izzit because of the API that i used is the different version one?

Yes, please get latest SWC or source code. getAlbum was added recently :)

Got the latest lib from googlecode (PicasaFlexAPI.dev.r002.53) and since it's my first download, I don't have any older version, so that's the version that is being used, but I get the following error message :
1061: Call to a possibly undefined method getAlbum through a reference with static type org.ectar.papi:GDataService.

I don't get it...

Let me chek, may be I messed up. But another user commented same problem had it fixed himself simply using right version - http://riahut.com/tutorial/simple-picasa-gallery-flex-and-picasaflex-api...

Nice example!! Its working for me!

Thank you. Please try picasafx.com :)

hi ...
this is a gr8 work ...but i hv error in compiling ur source code ..pls help me in this ....I'm learning Flex ..
error:unable to open '\PicasaFlexApi\bin\PicasaFlexApi.swc'

My Bad..... wrong library link properties specified in project file. Please download new project then you need to downloand - http://picasa-flex-api.googlecode.com/files/PicasaFlexAPI.dev.r002.53.zi..., unzip and put is under your project /libs folder PicasaFlexApi.swc file.

Nice example!! Its working for me!! Thanxx!!
But will be great if you'll share any example+source about how to handle swithing between albums
this sample can use only one album right?

I can help you with that :)

First of all, great work on this... very useful!!!

I was wondering though if you had posted how to switch between albums of a particular username... using only the PFA.

The only way I could figure it out was to initially load a TileList (not using PFA) that pulls e4x data from the photos.googleapis.com feed (without using the PFA). Then, upon user selection of an Album, pass the derived albumName to gService.getPhotosByAlbum while switching states to view the paginated list of pictures in that particular album... Specifically: The selected Item from the user's Albums TileList triggers an event that passes the e4x derived albumName to gService.getPhotosByAlbum PFA code... (kind of hack-ishly, if I might say):

private function doClick(event:ListEvent):void {
/* Next 3 lines are VERY Hacky: don't like this but could not figure out how to use PFA to get this from an array of Album Names.*/
var selectedRssResults:XML = AlbumsTileList.selectedItem as XML;
var albumLink:String = selectedRssResults.link; // pulling info full link from http://picasaweb.google.com/username/albumName of the feed.

albumDerivedName = albumLink.split("http://picasaweb.google.com/"+alUsername+"/").join(""); //extracting only the albumName.
var clickTileObject:Event = new Event("clickTile");
dispatchEvent(clickTileObject);
}

1. So is there a way to get the public album list (with album top thumb, title, description, and albumName) using PFA (without needing HTTPService to access photos.googleapis.com feed)? If so, do you have any code for this? I'd love to see it, as I would like to bypass the need to use e4x outside of the PFA.
2. Do you have code that can switch between public albums of a particular user using only PFA. I was able to do this, but had to switch between a hybrid of e4x parsing of the albumName(s) and the PFA example you provided.
3. Forgive me if I am not asking the right questions... I am a Flex newbie.

Thank you for using my library! I'm not really following - why not to load list of all album using PFA then knowing album names just load them? There is method  getAlbumsForCurrentUser(...) 

cool idea..

but i cannot get it to work due to an issue with ECLIPSE ... it says it cannot open "libs". ..
screenshot here:
http://jiboo.com/uploadedFiles/picasaFlexNotWorking.jpg
any ideas?

this is frustrating!

thanks a ton!
also . your demo does not work . . is that because the code needs to
load the crossdomain.xml from the correct spot?
(System.security.loadPolicyFile("http://photos.googleapis.com/data/crossdomain.xml");
) .. taken from http://code.google.com/apis/picasaweb/reference.html#Flash
thanks a bunch

jonezy

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Copy the characters (respecting upper/lower case) from the image.
all information is copyright of riahut.com