Similar to a previous example, “Creating a simple image gallery with the Flex HorizontalList control”, the following example shows how you can create a simple photo gallery in Flex using the TileList control, Image control, and the PopUpManager class.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
global {
modal-transparency: 0.9;
modal-transparency-color: white;
modal-transparency-blur: 9;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.effects.Resize;
import mx.events.ResizeEvent;
import mx.events.ListEvent;
import mx.controls.Image;
import mx.events.ItemClickEvent;
import mx.managers.PopUpManager;
private var img:Image;
private function tileList_itemClick(evt:ListEvent):void {
img = new Image();
// img.width = 300;
// img.height = 300;
img.maintainAspectRatio = true;
img.addEventListener(Event.COMPLETE, image_complete);
img.addEventListener(ResizeEvent.RESIZE, image_resize);
img.addEventListener(MouseEvent.CLICK, image_click);
img.source = evt.itemRenderer.data.@fullImage;
img.setStyle("addedEffect", image_addedEffect);
img.setStyle("removedEffect", image_removedEffect);
PopUpManager.addPopUp(img, this, true);
}
private function image_click(evt:MouseEvent):void {
PopUpManager.removePopUp(evt.currentTarget as Image);
}
private function image_resize(evt:ResizeEvent):void {
PopUpManager.centerPopUp(evt.currentTarget as Image);
}
private function image_complete(evt:Event):void {
PopUpManager.centerPopUp(evt.currentTarget as Image);
}
]]>
</mx:Script>
<mx:WipeDown id="image_addedEffect" startDelay="100" />
<mx:Parallel id="image_removedEffect">
<mx:Zoom />
<mx:Fade />
</mx:Parallel>
<mx:XML id="xml" source="gallery.xml" />
<mx:XMLListCollection id="xmlListColl" source="{xml.image}" />
<mx:TileList id="tileList"
dataProvider="{xmlListColl}"
itemRenderer="CustomItemRenderer"
columnCount="4"
columnWidth="125"
rowCount="2"
rowHeight="100"
themeColor="haloSilver"
verticalScrollPolicy="on"
itemClick="tileList_itemClick(event);" />
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center"
verticalAlign="middle">
<mx:Image source="{data.@thumbnailImage}" />
<mx:Label text="{data.@title}" />
</mx:VBox>
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<gallery>
<image title="Flex"
thumbnailImage="assets/fx_appicon-tn.gif"
fullImage="assets/fx_appicon.jpg" />
<image title="Flash"
thumbnailImage="assets/fl_appicon-tn.gif"
fullImage="assets/fl_appicon.jpg" />
<image title="Illustrator"
thumbnailImage="assets/ai_appicon-tn.gif"
fullImage="assets/ai_appicon.jpg" />
<image title="Dreamweaver"
thumbnailImage="assets/dw_appicon-tn.gif"
fullImage="assets/dw_appicon.jpg" />
<image title="ColdFusion"
thumbnailImage="assets/cf_appicon-tn.gif"
fullImage="assets/cf_appicon.jpg" />
<image title="Flash Player"
thumbnailImage="assets/fl_player_appicon-tn.gif"
fullImage="assets/fl_player_appicon.jpg" />
<image title="Fireworks"
thumbnailImage="assets/fw_appicon-tn.gif"
fullImage="assets/fw_appicon.jpg" />
<image title="Lightroom"
thumbnailImage="assets/lr_appicon-tn.gif"
fullImage="assets/lr_appicon.jpg" />
<image title="Photoshop"
thumbnailImage="assets/ps_appicon-tn.gif"
fullImage="assets/ps_appicon.jpg" />
</gallery>
View source is enabled in the following example.
Great example. Thanks!
How would you dynamically change the xml source?
For example if you had a pop up window when the application first runs with a list of different albums how would you load that .xml file into the xml source tag?
thanks.
@Graham: You could try HTTPService to get the XML :)
As to peters solution;
I’d use the TitleWindow class for the popup part, so that you could display a lot more info, like titles, next&prev-button, skin the borders of the image etc etc :) and it’s not much overhead, nor extra code to your original either :D
This is a quick implementation to your tut, but shows how to add info to the modal window using TitleWindow-class
[Bindable] public var kuvaTitleWindow:TitleWindow = new TitleWindow(); [Bindable] public var labeli:Label; private function tileList_itemClick(evt:ListEvent):void { //- Set the TitleWindow -// kuvaTitleWindow = new TitleWindow(); kuvaTitleWindow.title = "Header"; //You could use the evt.itemRenderer.data.@title on the window title //- Set the image -// img = new Image(); img.maintainAspectRatio = true; img.buttonMode = true; img.useHandCursor = true; img.source = evt.itemRenderer.data.@fullImage; img.setStyle(”addedEffect”, image_addedEffect); img.setStyle(”removedEffect”, image_removedEffect); img.addEventListener(Event.COMPLETE, image_complete); img.addEventListener(ResizeEvent.RESIZE, image_resize); img.addEventListener(MouseEvent.CLICK, image_click); //- Set a new label -// labeli = new Label(); labeli.text = evt.itemRenderer.data.@title; labeli.setStyle(”fontWeight”, “bold”); //But I decided to continue with the sample of adding things, so I created a label using it. //- Add the children to the TitleWindow -// kuvaTitleWindow.addChild(img); kuvaTitleWindow.addChild(labeli); PopUpManager.addPopUp(kuvaTitleWindow, this, true); PopUpManager.centerPopUp(kuvaTitleWindow); }and as for the event listeners for the closing and resizing:
private function image_click(evt:MouseEvent):void { PopUpManager.removePopUp(evt.currentTarget.parent); } private function image_resize(evt:ResizeEvent):void { PopUpManager.centerPopUp(evt.currentTarget.parent); } private function image_complete(evt:Event):void { PopUpManager.centerPopUp(evt.currentTarget.parent); }can any one answer why the last (complete)row is clickable when the code is used as itemclick?
Has something changed between Flex 2 and 3 in regards to the itemRenderer? I keep getting a “1172:Definition CustomItemRenderer could not be found”
I have double checked spelling and I have my application essentially set up the same way as the tutorial, but I just can’t seem to find the problem.
Thanks Kyle
Thanks for this great tutorial.
If I take the source to flexbuilder, I get many of those errors in the debug window:
How can the source be modified to omit those?
Best,
Damian
Damian,
You could try using an ObjectProxy in the custom item renderer:
Peter
Outstanding blog. Thanks for all the effort; I can’t wait to dig in and start learning.
Hey Peter,
Tried the above suggestion for using the ObjectProxy, still getting the same errors as mention above about binding.
Any ideas on the cause/fix?
TIA,
M.
Scratch that, I corrected that error, but now I get and actual runtime error:
ReferenceError: Error #1081: Property @title not found on Object and there is no default value.
Any other suggestions?
TheLetterM,
What does it say if you try doing something like the following:
private function init():void { dataProxy = new ObjectProxy(data); trace(ObjectUtil.toString(dataProxy)); }Peter
Peter,
Heres the full trace, as you can see, I’m not using your exact code, but same concept. I traced the XMLList @ the beginning for your reference.
Im guessing the problem has something to do with that “(Object)#0″ - of course it wouldnt have any of the properties im reference because its not a part of the XMLList, but where does it come from?
FYI, the two properties my itemRenderer is referencing are @type and @description.
Doh, ate the XML! Here you go:
TheLetterM,
Well, the runtime error you mentioned said “
ReferenceError: Error #1081: Property @title not found on Object and there is no default value.“.Which, according to your XML/Object, makes sense. The XML doesn’t include any “@title” attributes. What happens if you change the reference from “@title” to “@description”?
Peter
Sorry, I wasnt clear about which example I was referencing. The trace shows what happens if I use the actual example code. The error string was from when I tried to use the ObjectProxy as you suggested in the comments. However, when I use the ObjectProxy method and reference either @title or @description, it throws the same error. If you look at the trace from the objectUtil.toString, youll see the first thing listed there is an Object, not an XMLList. That’s the problem there, but I dont know how to correct it so that the dataProxy does not include that “Object”.
Hello,
Great gallery example!
But… I would like to make the loading of the xml-file more dynamic.
When I try to replace the line
with
<mx:XML id="xml" source="{galleryURL}" />I get an error that databinding is not allowed there. Have you got any idea how to solve this issue? Or do you have a coding example of it somewhere?
Kindly regards,
Herman
Herman Desmet,
I imagine it doesn’t work since the <mx:XML /> tag embeds the source XML file at compile time. For an example of dynamically loading XML files at runtime using the HTTPService class, see “Dynamically loading XML files using the HTTPService tag”.
Peter
thanks a lot! that is what i needed!
Got the example working, but now i want to fine-tune it a little more. I want to add a next (and prev) button to the popup-window, but i’m stuck in figuring out how i could move the Itemrenderer to the next or previous item.
Here’s a snippet out of my code, I already used the extra Titlewindow-code that Jabbis mentioned in one of the posts above… :
[Bindable] public var kuvaTitleWindow:TitleWindow = new TitleWindow(); [Bindable] public var labeli:Label; private var img:Image; private function tileList_itemClick(evt:ListEvent):void { kuvaTitleWindow = new TitleWindow(); kuvaTitleWindow.title = "Herman Desmet Photography"; kuvaTitleWindow.useHandCursor=true; img = new Image(); img.maintainAspectRatio = true; img.buttonMode = true; img.useHandCursor = true; img.source = evt.itemRenderer.data.@fullImage; img.setStyle("addedEffect", image_addedEffect); img.setStyle("removedEffect", image_removedEffect); img.addEventListener(Event.COMPLETE, image_complete); img.addEventListener(ResizeEvent.RESIZE, image_resize); img.addEventListener(MouseEvent.CLICK, image_click); labeli = new Label(); labeli.text = evt.itemRenderer.data.@title; labeli.setStyle("fontWeight", "bold"); kuvaTitleWindow.addChild(img); kuvaTitleWindow.addChild(labeli); PopUpManager.addPopUp(kuvaTitleWindow, this, true); PopUpManager.centerPopUp(kuvaTitleWindow); } private function image_click(evt:MouseEvent):void { PopUpManager.removePopUp(evt.currentTarget.parent); } private function image_resize(evt:ResizeEvent):void { PopUpManager.centerPopUp(evt.currentTarget.parent); } private function image_complete(evt:Event):void { PopUpManager.centerPopUp(evt.currentTarget.parent); }Does somebody has a clue?
Thankx,
Herman
Thanks Buddy..
I really enjoy these tutorials of yours – simple and elegant solutions. And once I’ve started to actually like writing MXML I appriciate how your using it whereever possible. Very inspiring :-)
beautiful but i get an error
unable to open libs
thanks
I am getting an XML pars error, any ideas
thanks
On the other example there was a comment about having a larger image be up already on load, would that be possible on this one? thanks. great gallery, thanks alot for posting it
Lisa just create the libs folder on the project folder and it’s fixed.
I edit the XML but the same images appear. any thoughts ? thanks
Psiico,
That sounds very odd indeed. Does it help if you clean your project in Flex Builder?
Peter
Thanks for this great tutorial.
Hi peterd,
Your code for creating image gallery is realy very useful.
I just want one more thing to add in this, On mouseOver of each image in tilelist, i want some effects to put, like zoom in. I am able to do it for tile list but not for the images in the tile list. Can u pls help me.
thnx,
Richa
Hi peterd,
I am a fresh … I need your help ,thinks
when I run you program
I have a problem , i don’t know why
the problem is:
code line:
error：The processing instruction target matching “[xX][mM][lL]” is not allowed.
code line: < mx:XML id=”xml” source=”gallery.xml” />
“Creating a simple image gallery with the Flex HorizontalList control”,
Hi, i have gone through the example, its nice to work with, i have a task in that example. How can i zoom out the full image without clicking on it. I mean when we click the thumbnail image it get enlarged after that we have to click on the enlarged image to comeback normal image.
But what i need is, without clicking on the enlarged image, the image should comeback to its position within 3 to 5 seconds, if its possible then anyone please help me out…. Thanks in advance….
deenalex,
If you want to close the popup image after X seconds you could use the Timer class which gets called once:
var t:Timer = new Timer(4000, 1); // 4 seconds, execute 1 time t.addEventListener(TimerEvent.TIMER_COMPLETE, t_timerComplete); t.start(); ... function t_timerComplete(evt:TimerEvent):void { PopUpManager.removePopUp(img); }Or, you could probably use the
setTimeout()method:Disclaimer: I haven’t tested this code, so it may be full of errors/typos/stupidity.
If I had to choose, I’d probably go with the Timer option. It is a bit more code, but it is more “ActionScript 3.0 like”. I’d probably also do a combination of the auto-close the popup after X seconds and allow the user to click the image to close the popup, just in case they don’t want to wait for the image to close automatically. Also, you could try getting fancy and pausing the Timer instance if the user’s mouse is over the image. Then, when they roll their mouse off the image, try restarting the timer and closing the image (or let them click to close). That way you wouldn’t have a user try to look at the image and have it keep closing automatically. Just some random ideas.
Happy Flexing!
Peter
Hi peterd,
Thanks for your work, i got result in my way, feel relax after 2 weeks of work out and i am glad to share with you……. here is the code….
private function tileList_itemClick(evt:ListEvent):void { // same as your code.. timer.start(); } // init() must be called in Application as creationComplete="init()" private function init():void { timer = new Timer(1000); /* 1000ms == 1second */ timer.addEventListener(TimerEvent.TIMER, onTimer); } private function onTimer(evt:TimerEvent):void { PopUpManager.removePopUp(img); } // same as your code.. private function startTimer():void { if (!timer.running) { timer.start(); } } private function stopTimer():void { if (timer.running) { timer.stop(); } }thats it…….
See you again, with a new task, i hope this will be helpfull for someone in the world,
Happy Flexing…
deenalex
I am glad to add this also, my Team Leader helped me a lot to finish this task…
I just forget to add one more thing, add this too
private function tileList_itemClick(evt:ListEvent):void { // same as your code... img.addEventListener(ResizeEvent.RESIZE, image_resize); timer.addEventListener(TimerEvent.TIMER, onTimer);//this is important img.addEventListener(MouseEvent.CLICK, image_click); // same as your code... timer.start(); }another one updation, kindly add stopTimer(); in -onTimer- function
Hello Peterd!!
I’m added this gallery to my component and its showing via ViewStack and when image pop ups
its not centered vertically only horizontally.. hmm its centered only for component but not for all Application.. How can I change it?
Has something changed between Flex 2 and 3 in regards to the itemRenderer? I keep getting a “1172:Definition CustomItemRenderer could not be found”
I have double checked spelling and I have my application essentially set up the same way as the tutorial, but I just can’t seem to find the problem.
Thank
NARESH,
I cannot remember any differences off the top of my head. If you have Flex Builder 3, you can try setting the Flex project to compile against Flex 2.0.1 Hotfix 3 and see if the example works/worked in Flex 2.
Otherwise, try downloading the source code from the link above (view source, etc) and see if my project files work for you. If my files work and you still get the error on your files, see if we have a file in a different location or something.
Hope that helps,
Peter
Hi peterd,
“Creating a simple image gallery with the Flex HorizontalList control”,
I have finished some modifications with that above example, such as applying timing to view image to certain period.
I have another doubt, is that possible to place a image in a panel and popup that panel with image inside. I want to add some information about that image and want to popup along with that image. is there any other way to do that. Kindly help me and thanks in advance……..
deenalex,
Sure. You can create the Panel container in the
tileList_itemClick()above, add the Image control to the Panel instance, and then use the PopUpManager to pop up the Panel container instead of the Image control.PopUpManager.addPopUp(panel, this, true);Peter
Hi peterd,
Thanks for your tip, i am working on it, another query is, is that possible to place URL in that popup panel.
deenalex
deenalex,
Just set
panel.title = image.source;, or something like that.Peter
Hi peterd,
I am asking about adding URL, i mean when i click on www.google.com then i havet to get into site in window and that URL must be displayed in Popupwindow.
My friend told me that its not possible to simply give in the popupwindow, i have to use scripting language to avail the task… is that true?
deenalex.
deenalex,
If you’re talking about loading an HTML page within a Flex application, it isn’t currently supported by Flex, although I have heard of a couple people having workarounds using iframes and other tricks. You’d have to search Google for it, I don’t remember the names/URLs of the projects off the top of my head.
If you were using Adobe AIR and building a desktop application, you could use the AIR-only HTML control to display HTML content in your application. For more information no the AIR HTML control, see the documentation at http://livedocs.adobe.com/flex/3/langref/mx/controls/HTML.html.
Peter
Hi peter,
On oct 9, i have posted question regarding adding image in panel which is popupwindow. I cant solve that task. You gave some tips but i cant resolve it, kindly help me out.
Regards
Deenalex