CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   Adobe Flex (http://www.codingforums.com/forumdisplay.php?f=63)
-   -   Image pop up window (http://www.codingforums.com/showthread.php?t=255552)

akuria 03-29-2012 05:53 AM
Image pop up window
 
I am trying to get a pop up window to come up when you click on a image in my gallery. i go the window to come up but the image does not show up. can someone help with my coding.

here is my gallery.mxml

Code:
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:ATE="http://ns.adobe.com/ate/2009"
                xmlns:ai="http://ns.adobe.com/ai/2009"
                xmlns:d="http://ns.adobe.com/fxg/2008/dt"
                xmlns:flm="http://ns.adobe.com/flame/2008"
                xmlns:lib="assets.graphics.slider.*"
                xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                xmlns:components="components.*"
                width="970" height="511"
                initialize="onInit()">
       
        <fx:Script>
                <![CDATA[
                        import mx.collections.ArrayCollection;
                       
                        import spark.effects.Fade;
                        import spark.events.IndexChangeEvent;
                        import spark.events.RendererExistenceEvent;
                       
                        import valueObjects.ImageVO;
                        import valueObjects.SectionVO;
                       
                        import mx.managers.PopUpManager;
                       
                        [Bindable]
                        public var selectedSection:SectionVO;
                        public var selectedIndex:Number;
                        public var autoTimer:Timer;
                        public var idleTimer:Timer;
                       
                        public var sectionData:Array=new Array();
                        public var xmlLoader:URLLoader=new URLLoader();
                       
                        public function onInit():void
                        {
                                xmlLoader.addEventListener(Event.COMPLETE, handleLoadComplete);
                                xmlLoader.load(new URLRequest("assets/designImageData.xml"));
                               
                                autoTimer=new Timer(4000);
                                autoTimer.addEventListener(TimerEvent.TIMER, handleAutoTimerEvent);
                               
                                idleTimer=new Timer(60000);
                                idleTimer.addEventListener(TimerEvent.TIMER, handleIdleTimerEvent);
                        }
                       
                        public function handleAutoTimerEvent(event:TimerEvent):void
                        {
                                setSelectedIndex(selectedIndex + 1);
                        }
                       
                        public function handleIdleTimerEvent(event:TimerEvent):void
                        {
                                idleTimer.stop();
                                idleTimer.reset();
                                autoTimer.start();
                        }
                       
                        public function stopTimer():void
                        {
                                autoTimer.stop();
                                autoTimer.reset();
                        }
                       
                        public function handleLoadComplete(e:Event):void
                        {
                                var image:ImageVO;
                                var section:SectionVO;
                                var xmlData:XML=new XML(e.target.data);
                               
                                for each (var sectionList:XML in xmlData..section)
                                {
                                        section=new SectionVO();
                                        section.name=sectionList.@name;
                                       
                                        for each (var item:Object in sectionList.item)
                                        {
                                                image=new ImageVO();
                                                image.thumb=item.thumb;
                                                image.image=item.image;
                                                section.items.addItem(image);
                                        }
                                       
                                        sectionData.push(section);
                                }
                               
                                navList.dataProvider=new ArrayCollection(sectionData);
                                navList.selectedIndex=0;
                                selectedSection=sectionData[0];
                                setSelectedIndex(0);
                                autoTimer.start();
                        }
                       
                        public function indexChangeHandler(event:IndexChangeEvent):void
                        {
                                idleTimer.reset();
                                idleTimer.start();
                                selectedSection=sectionData[event.newIndex];
                                setSelectedIndex(0);
                        }
                       
                        public function handleThumbAdd(event:RendererExistenceEvent):void
                        {
                                event.renderer.addEventListener(MouseEvent.CLICK, handleThumbClick);
                        }
                       
                        public function handleThumbClick(event:Event):void
                        {
                                stopTimer();
                                idleTimer.reset();
                                idleTimer.start();
                                var image:ImageVO=event.currentTarget.data as ImageVO;
                                setSelectedIndex(selectedSection.items.getItemIndex(image));
                        }
                       
                        public function setSelectedIndex(value:Number):void
                        {
                                if (value >= selectedSection.items.length)
                                {
                                        value=0;
                                }
                               
                                var selectedImage:ImageVO=selectedSection.items.getItemAt(value) as ImageVO;
                               
                                if (selectedIndex != value)
                                {
                                        var pic1:Image=images.removeElementAt(0) as Image;
                                        var pic2:Image=images.getElementAt(0) as Image;
                                       
                                        pic1.source=selectedImage.image;
                                        pic1.alpha=0;
                                        images.addElement(pic1);
                                       
                                        var fade:Fade=new Fade(pic1);
                                        fade.alphaTo=1;
                                        fade.duration=1500;
                                        fade.play();
                                        selectedIndex=value;
                                       
                                        var fade1:Fade=new Fade(pic2);
                                        fade1.alphaTo=0;
                                        fade1.duration=1000;
                                        fade1.play();
                                }
                        }
                       
                        private function launchPopUp(e:MouseEvent):void {
                                if(images.selectedImage){
                                        var win : Window = new Window();
                                        PopUpManager.addPopUp(win,this,true);
                                        PopUpManager.centerPopUp(win);
                        }
                }
                       
                ]]>
        </fx:Script>
       
        <s:List id="navList" y="0"
                        width="160" height="511"
                        allowMultipleSelection="false"
                        change="indexChangeHandler(event)" horizontalCenter="-404"
                        itemRenderer="components.GalleryButtonRenderer"/>
       
       
        <s:Group id="images" x="273" y="2"
                        width="694" height="507"
                        maxWidth="694" maxHeight="507">
                <mx:Image verticalAlign="middle" horizontalAlign="center" width="694" height="507" maxWidth="694" maxHeight="507" buttonMode="true" click="launchPopUp(event);"/>
                <mx:Image verticalAlign="middle" horizontalAlign="center" width="694" height="507" maxWidth="694" maxHeight="507" buttonMode="true" click="launchPopUp(event);"/>
        </s:Group>
       
       
        <s:DataGroup id="thumbList" y="2"
                                width="100" height="507" buttonMode="true"
                                clipAndEnableScrolling="true"
                                dataProvider="{selectedSection.items}"
                                horizontalCenter="-274"
                                itemRenderer="components.ThumbRenderer"
                                rendererAdd="handleThumbAdd(event)">
                <s:layout>
                        <s:VerticalLayout horizontalAlign="center"/>
                </s:layout>
        </s:DataGroup>
        <s:VScrollBar y="0" fixedThumbSize="true" horizontalCenter="-219"
                                  skinClass="components.VerticalScrollbarSkin2" viewport="{thumbList}"/>
</s:Group>
and here is the window.mxml

Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
                                layout="vertical" width="100%" height="100%"
                                horizontalAlign="center"
                                showCloseButton="true"
                                close="closeWindow(event);"
                                click="dispatchEvent(new CloseEvent(CloseEvent.CLOSE));">
       
        <mx:Script>
                <![CDATA[
                       
                        import mx.events.CloseEvent;
                        import mx.managers.PopUpManager;
                       
                        [Bindable]
                        public var selectedImage:String;
                       
                        private function closeWindow(e:CloseEvent):void {
                                PopUpManager.removePopUp(this);
                        }
                       
                ]]>
        </mx:Script>
       
        <mx:Image source="{selectedImage}"/>
       
</mx:TitleWindow>

adaminaudio 03-29-2012 07:54 PM
you have this bit in your window.mxml code:

<mx:Image source="{selectedImage}"/>



but you probably need to set that property when you pop the window open:
Code:
private function launchPopUp(e:MouseEvent):void {
                                if(images.selectedImage){
                                        var win : Window = new Window();
win.selectedImage = images.selectedImage;  //set it here...
                                        PopUpManager.addPopUp(win,this,true);
                                        PopUpManager.centerPopUp(win);
                        }

akuria 03-30-2012 05:31 AM
Quote:
Originally Posted by adaminaudio (Post 1210150)
you have this bit in your window.mxml code:

<mx:Image source="{selectedImage}"/>



but you probably need to set that property when you pop the window open:
Code:
private function launchPopUp(e:MouseEvent):void {
                                if(images.selectedImage){
                                        var win : Window = new Window();
win.selectedImage = images.selectedImage;  //set it here...
                                        PopUpManager.addPopUp(win,this,true);
                                        PopUpManager.centerPopUp(win);
                        }
I tried that and I am getting error messages saying undefined property selectedImage at

Code:
                        private function launchPopUp(e:MouseEvent):void {
                                if(images.selectedImage){  //error
                                        var win : Window = new Window();
                                        win.selectedImage = images.selectedImage;  //error//set it here...
                                        PopUpManager.addPopUp(win,this,true);
                                        PopUpManager.centerPopUp(win);
                                }
                        }

adaminaudio 03-30-2012 02:33 PM
Hi again,

what happens when you trace
Code:
images.selectedImage
?

I just noticed that your selectedImage variable in the main app code is of type ImageVO. Do you have a source string in this class? IE: can you do something like --->
Code:
win.selectedImage = images.selectedImage.source
?

paste you ImageVO code here if you're still having problems fresh.

akuria 03-31-2012 06:48 PM
when i put in

Code:
win.selectedImage = images.selectedImage.source
i get this error

1119: Access of possibly undefined property selectedImage through a reference with static type spark.components:Group.

akuria 03-31-2012 06:50 PM
have also tried this and get only one error

Code:
                        private function launchPopUp(e:MouseEvent):void {
                                if(selectedSection.items){
                                        var win : Window = new Window();
                                        win.sourceImage = selectedSection.items;
                                        PopUpManager.addPopUp(win,this,true);
                                        PopUpManager.centerPopUp(win);
                                }
                        }
1119: Access of possibly undefined property sourceImage through a reference with static type components:Window.

akuria 03-31-2012 06:53 PM
tried this and still get sourceImage error

Code:
private function launchPopUp(e:MouseEvent):void {
                                if(ImageVO){
                                        var win : Window = new Window();
                                        win.sourceImage = ImageVO;
                                        PopUpManager.addPopUp(win,this,true);
                                        PopUpManager.centerPopUp(win);
                                }
                        }

adaminaudio 04-05-2012 03:46 PM
where is the code for ImageVO? can you post that?

akuria 04-05-2012 08:33 PM
Quote:
Originally Posted by adaminaudio (Post 1212596)
where is the code for ImageVO? can you post that?
I posted my entire code in the first post. here it is again

Code:
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:ATE="http://ns.adobe.com/ate/2009"
                xmlns:ai="http://ns.adobe.com/ai/2009"
                xmlns:d="http://ns.adobe.com/fxg/2008/dt"
                xmlns:flm="http://ns.adobe.com/flame/2008"
                xmlns:lib="assets.graphics.slider.*"
                xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                xmlns:components="components.*"
                width="970" height="511"
                initialize="onInit()">
       
        <fx:Script>
                <![CDATA[
                        import mx.collections.ArrayCollection;
                       
                        import spark.effects.Fade;
                        import spark.events.IndexChangeEvent;
                        import spark.events.RendererExistenceEvent;
                       
                        import valueObjects.ImageVO;
                        import valueObjects.SectionVO;
                       
                        import mx.managers.PopUpManager;
                       
                        [Bindable]
                        public var selectedSection:SectionVO;
                        public var selectedIndex:Number;
                        public var autoTimer:Timer;
                        public var idleTimer:Timer;
                       
                        public var sectionData:Array=new Array();
                        public var xmlLoader:URLLoader=new URLLoader();
                       
                        public function onInit():void
                        {
                                xmlLoader.addEventListener(Event.COMPLETE, handleLoadComplete);
                                xmlLoader.load(new URLRequest("assets/designImageData.xml"));
                               
                                autoTimer=new Timer(4000);
                                autoTimer.addEventListener(TimerEvent.TIMER, handleAutoTimerEvent);
                               
                                idleTimer=new Timer(60000);
                                idleTimer.addEventListener(TimerEvent.TIMER, handleIdleTimerEvent);
                        }
                       
                        public function handleAutoTimerEvent(event:TimerEvent):void
                        {
                                setSelectedIndex(selectedIndex + 1);
                        }
                       
                        public function handleIdleTimerEvent(event:TimerEvent):void
                        {
                                idleTimer.stop();
                                idleTimer.reset();
                                autoTimer.start();
                        }
                       
                        public function stopTimer():void
                        {
                                autoTimer.stop();
                                autoTimer.reset();
                        }
                       
                        public function handleLoadComplete(e:Event):void
                        {
                                var image:ImageVO;
                                var section:SectionVO;
                                var xmlData:XML=new XML(e.target.data);
                               
                                for each (var sectionList:XML in xmlData..section)
                                {
                                        section=new SectionVO();
                                        section.name=sectionList.@name;
                                       
                                        for each (var item:Object in sectionList.item)
                                        {
                                                image=new ImageVO();
                                                image.thumb=item.thumb;
                                                image.image=item.image;
                                                section.items.addItem(image);
                                        }
                                       
                                        sectionData.push(section);
                                }
                               
                                navList.dataProvider=new ArrayCollection(sectionData);
                                navList.selectedIndex=0;
                                selectedSection=sectionData[0];
                                setSelectedIndex(0);
                                autoTimer.start();
                        }
                       
                        public function indexChangeHandler(event:IndexChangeEvent):void
                        {
                                idleTimer.reset();
                                idleTimer.start();
                                selectedSection=sectionData[event.newIndex];
                                setSelectedIndex(0);
                        }
                       
                        public function handleThumbAdd(event:RendererExistenceEvent):void
                        {
                                event.renderer.addEventListener(MouseEvent.CLICK, handleThumbClick);
                        }
                       
                        public function handleThumbClick(event:Event):void
                        {
                                stopTimer();
                                idleTimer.reset();
                                idleTimer.start();
                                var image:ImageVO=event.currentTarget.data as ImageVO;
                                setSelectedIndex(selectedSection.items.getItemIndex(image));
                        }
                       
                        public function setSelectedIndex(value:Number):void
                        {
                                if (value >= selectedSection.items.length)
                                {
                                        value=0;
                                }
                               
                                var selectedImage:ImageVO=selectedSection.items.getItemAt(value) as ImageVO;
                               
                                if (selectedIndex != value)
                                {
                                        var pic1:Image=images.removeElementAt(0) as Image;
                                        var pic2:Image=images.getElementAt(0) as Image;
                                       
                                        pic1.source=selectedImage.image;
                                        pic1.alpha=0;
                                        images.addElement(pic1);
                                       
                                        var fade:Fade=new Fade(pic1);
                                        fade.alphaTo=1;
                                        fade.duration=1500;
                                        fade.play();
                                        selectedIndex=value;
                                       
                                        var fade1:Fade=new Fade(pic2);
                                        fade1.alphaTo=0;
                                        fade1.duration=1000;
                                        fade1.play();
                                }
                        }
                       
                        private function launchPopUp(e:MouseEvent):void {
                                if(images.selectedImage){
                                        var win : Window = new Window();
                                        PopUpManager.addPopUp(win,this,true);
                                        PopUpManager.centerPopUp(win);
                        }
                }
                       
                ]]>
        </fx:Script>
       
        <s:List id="navList" y="0"
                        width="160" height="511"
                        allowMultipleSelection="false"
                        change="indexChangeHandler(event)" horizontalCenter="-404"
                        itemRenderer="components.GalleryButtonRenderer"/>
       
       
        <s:Group id="images" x="273" y="2"
                        width="694" height="507"
                        maxWidth="694" maxHeight="507">
                <mx:Image verticalAlign="middle" horizontalAlign="center" width="694" height="507" maxWidth="694" maxHeight="507" buttonMode="true" click="launchPopUp(event);"/>
                <mx:Image verticalAlign="middle" horizontalAlign="center" width="694" height="507" maxWidth="694" maxHeight="507" buttonMode="true" click="launchPopUp(event);"/>
        </s:Group>
       
       
        <s:DataGroup id="thumbList" y="2"
                                width="100" height="507" buttonMode="true"
                                clipAndEnableScrolling="true"
                                dataProvider="{selectedSection.items}"
                                horizontalCenter="-274"
                                itemRenderer="components.ThumbRenderer"
                                rendererAdd="handleThumbAdd(event)">
                <s:layout>
                        <s:VerticalLayout horizontalAlign="center"/>
                </s:layout>
        </s:DataGroup>
        <s:VScrollBar y="0" fixedThumbSize="true" horizontalCenter="-219"
                                  skinClass="components.VerticalScrollbarSkin2" viewport="{thumbList}"/>
</s:Group>

adaminaudio 04-06-2012 02:42 PM
that's not your entire code, where are these classes:

Code:
import valueObjects.ImageVO;
import valueObjects.SectionVO;

those errors are telling you exactly what's wrong with your code. Go through the errors one by one and debug them. While you're at it: start learning about the Flash API and the Flex Framework as that will surely help you.
I haven't the patience (nor the brilliance) to help people like you that start acting like scumbags.


All times are GMT +1. The time now is 06:26 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.