...

View Full Version : Image pop up window



akuria
03-29-2012, 05:53 AM
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


<?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


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


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


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


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


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


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


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
where is the code for ImageVO? can you post that?

I posted my entire code in the first post. here it is again


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


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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum