Creating a simple image gallery with the Flex TileList control

Great example. Thanks!

Reply

@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);
}

Reply

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

Reply

Damian,

You could try using an ObjectProxy in the custom item renderer:

<?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"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.utils.ObjectProxy;

            [Bindable]
            private var dataProxy:ObjectProxy;

            private function init():void {
                dataProxy = new ObjectProxy(data);
            }
        ]]>
    </mx:Script>

    <mx:Image source="{dataProxy.@thumbnailImage}" />

    <mx:Label text="{dataProxy.@title}" />

</mx:VBox>

Peter

Reply

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.

Reply

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

Reply

Doh, ate the XML! Here you go:

<themeObject type="image" description="'Combatting Anti-Choice Violence: An Analysis of Clinic Protection Laws' July 1995" url="W078-0032-a.jpg" priority="3"/>
<themeObject type="image" description="Montana Human Rights Network letter regarding the Phineas Priesthood, September 1996" url="W078-0062-a.jpg" priority="3"/>
<themeObject type="video" description="Film of Neil Horsley and response from Georgia's Right to Life" url="BR_0001.flv" priority="3"/>

Reply

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”.

Reply

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

Reply

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

Reply

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 :-)

Reply

I am getting an XML pars error, any ideas

thanks

Reply

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

Reply

Thanks for this great tutorial.

Reply

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.

Reply

“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….

Reply

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

Reply

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();
}

Reply

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?

Reply

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

Reply

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

Reply

deenalex,

Just set panel.title = image.source;, or something like that.

Peter

Reply

Hi peterd,

I am asking about adding URL, i mean when i click on http://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.

Reply

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

Reply

Hi Peter,

Thanks for your work, i appreciate and hope you will help me a lot in future.

Thanks & Regards
Deenalex

Reply