| akuria |
03-08-2012 05:10 AM |
Need help with Image Gallery
I am trying to create a gallery that will load images off a database. this is what i have so far and its not working. i can supply files if necessary. i set up a msql database on my godaddy hosting plan.
Code:
<?xml version="1.0" encoding="utf-8"?>
<s:HGroup xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:components="components.*"
width="946" height="524">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import spark.events.IndexChangeEvent;
import spark.events.RendererExistenceEvent;
import valueObjects.ImageVO;
import valueObjects.SectionVO;
[Bindable]
public var selectedSection:SectionVO;
//public var selectedIndex:Number;
public var sectionData:Array=new Array();
public var xmlLoader:URLLoader=new URLLoader();
protected var _data : Array;
public function get dataProvider() : Array
{
return _data;
}
public function set dataProvider( data : Array ) : void
{
_data = data;
var split : Array;
var section : SectionVO;
for each( var item : String in _data )
{
split = item.split(":");
section = new SectionVO();
section.id = split[0];
section.name = split[1];
sectionData.push(section);
}
navList.dataProvider=new ArrayCollection(sectionData);
navList.selectedIndex=0;
selectedSection=sectionData[0];
loadSection();
}
public function loadSection() : void
{
if( selectedSection.items.length > 0 )
{
setSelectedIndex(0);
return;
}
var l : URLLoader = new URLLoader();
l.addEventListener(Event.COMPLETE, sectionComplete);
var rv: URLVariables = new URLVariables();
rv.a = "list";
rv.pid = selectedSection.id;
var r : URLRequest = new URLRequest("http://benedictumdesigns.com/service/service.php");
r.method = URLRequestMethod.POST;
r.data = rv;
l.load(r);
}
public function sectionComplete( event : Event ) : void
{
var image : ImageVO;
var data : String = event.target.data;
var imgList : Array = data.split(":");
imgList.splice(0,1);
for each (var item:String in imgList)
{
image= new ImageVO();
image.thumb="http://benedictumdesigns.com/service/assets/" + item;
image.image="http://benedictumdesigns.com/service/assets/" + item;
selectedSection.items.addItem(image);
}
setSelectedIndex(0);
}
public function indexChangeHandler(event:IndexChangeEvent):void
{
selectedSection=sectionData[event.newIndex];
loadSection();
}
public function handleThumbAdd(event:RendererExistenceEvent):void
{
event.renderer.addEventListener(MouseEvent.CLICK, handleThumbClick);
}
public function handleThumbClick(event:Event):void
{
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;
curImage.source = selectedImage.image;
}
]]>
</fx:Script>
<s:List id="navList" width="126" height="500" allowMultipleSelection="false"
borderVisible="false" change="indexChangeHandler(event)"
itemRenderer="components.GalleryButtonRenderer"/>
<s:VGroup>
<s:HGroup verticalAlign="middle" horizontalAlign="center" height="396" width="800">
<s:Image id="curImage" maxHeight="500" maxWidth="800"/>
</s:HGroup>
<s:DataGroup id="thumbList"
itemRenderer="components.ThumbRenderer"
dataProvider="{selectedSection.items}"
rendererAdd="handleThumbAdd(event)"
height="120"
width="800">
<s:layout>
<s:TileLayout horizontalGap="8"
verticalGap="8"/>
</s:layout>
</s:DataGroup>
</s:VGroup>
</s:HGroup>
|
