EDIT: another xml photo gallery can be found here
This is a method of creating a photo gallery in Flex with a main photo, and scrolling thumbnails, populated by an external XML file. This is a continuation of the concept in this article: http://blog.flexcommunity.net/?p=24
This shows how easy it is to create things of this nature using the repeater component, and one simple function. I’ll leave out the detailed explanation, as it’s almost identical to the above cited article.
here’s the application code:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:custom=”custom.*” layout=”absolute” backgroundColor=”#030303″ creationComplete=”imageData.send();”>
<mx:Script>
<![CDATA[
var mySource:String="http://path/to/the/first/image/to/display/1.jpg"
function setPath(myPath:String):void{
mainImage.source=myPath;}
]]>
</mx:Script>
<mx:HTTPService id=”imageData” url=”images.xml” resultFormat=”e4x”/>
<mx:Image id=”mainImage” source=”{mySource}” width=”500″ height=”400″ verticalCenter=”0″ horizontalCenter=”0″ >
</mx:Image>
<mx:VBox height=”400″ horizontalScrollPolicy=”off” verticalCenter=”0″ horizontalCenter=”325″>
<mx:Repeater id=”imageRepeater” dataProvider=”{imageData.lastResult.img}”>
<mx:Canvas width=”120″ height=”80″ backgroundColor=”#000000″ horizontalScrollPolicy=”off” verticalScrollPolicy=”off” borderStyle=”none”>
<custom:CustomImage path=”{imageRepeater.currentItem.src}” width=”100″ height=”100%” useHandCursor=”true” source=”{imageRepeater.currentItem.thumbnail}” verticalCenter=”0″ left=”0″ click=”setPath(String(event.currentTarget.path));”/>
</mx:Canvas>
</mx:Repeater>
</mx:VBox>
</mx:Application>
here’s the XML structure:
<?xml version=”1.0″ encoding=”utf-8″?>
<gallery>
<img>
<src>http://path/to/your/large/image/1.jpg
</src>
<thumbnail>http://path/to/your/thumbnail/t1.jpg
</thumbnail>
</img></gallery>
here’s the custom image code (file is called CustomImage.as and is kept in a folder called custom)
package custom
{
import mx.controls.Image;
public class CustomImage extends Image
{
public function CustomImage()
{
super();
}
public var path:String = “”;
[Inspectable(category="General", defaultValue="")]
}
}
hi
i am new to flex.
as per your tutorial :-
i am not able to achieve above xml image gallery.
please any one tell me where i am wrong.
i am using flex2
thanks for your time
You can now right click on the example to view the source or download a zip of the source files. The key to getting this to work is just having all your files (and paths) right. Let me know if you are still having issues. This was done in Flex 3, so the folder names will be slightly different, but everything should be there.
Update: in the source code given, the thumbnail image has useHandCursor set to true. This does not actually make the hand cursor work (annoyingly) unless you set buttonMode to true. This also seems to be the case with the button component…
thanks great help. I have achieved it. sorry for late reply. i was a bit busy to work on other projects.
thanks a lot.
hi
i have searched your complete blog.. but i didn’t found any topic related to tabIndex in flex. Making tab setting in flex, even i have searched google also and didn’t found good one.
Will you please add some tutorials related to the “making tabIndex” contact form or kind of…
that will be so great of you
regards
montyt
Can you be more specific? I will help you if I can.
thanks for your reply.
i need to make tabIndex setting.
here is the example:-
i have made list of inputtext field or comboBox field. both inside the Hbox and VBox, now at my base state there lots of text and comboBox fields.
Now what i need is, i wanna set tabIndex according to my style. Like jump from one text field to another and from there to another by just pressing key “tab”.
Like i use to do same in flash with this code
[code]
txt1.tabIndex = 0;
txt3.tabIndex = 1;
[/code]
but i not getting to do same in flex how do i achieve this
plz help out here.
regards
montyt
try this: (edit the commas out of the tags)
< ,?xml version="1.0" encoding="utf-8"?>
< ,mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
< ,mx:VBox>
< ,mx:TextInput width="100" tabEnabled="true" tabIndex="0"/>
< ,mx:TextInput width="100" tabEnabled="true" tabIndex="1"/>
< ,mx:TextInput width="100" tabEnabled="true" tabIndex="2"/>
< ,/mx:VBox>
< ,/mx:Application>
waiting for your reply.
thanks for your time.
^ oops sorry.. i didn’t refreshed page…
thanks for that, i’ll try and let you know.
not working i got this error
“The markup in the document preceding the root element must be well-formed.”
hi gr8
its working, i solved it. no need to add commas…
thanks a lot it was gr8 help.
Pingback: Read files from a folder and create xml file with php | Flex Community Blog
Hi
I have completed your tutorial and it works within the flex builder. however when i export it the thumbnails do not display. any help would be much appreciated.