Creating a simple image gallery with the Flex TileList control – mx:TileList
Posted on February 14, 2010 | No Comments
Flex Photo gallery in Flex using the TileList control, Image control, and the PopUpManager class.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="vertical"verticalAlign="middle" backgroundColor="white">
<mx:Style>
global {
modal-transparency: 0.9;
modal-transparency-color: white;
modal-transparency-blur: 9;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.effects.Resize;
import mx.events.ResizeEvent;
import mx.events.ListEvent;
import mx.controls.Image;
import mx.events.ItemClickEvent;
import mx.managers.PopUpManager;
private var img:Image;
private function tileList_itemClick(evt:ListEvent):void {
img = new Image();
// img.width = 300;
// img.height = 300;
img.maintainAspectRatio = true;
img.addEventListener(Event.COMPLETE, image_complete);
img.addEventListener(ResizeEvent.RESIZE, image_resize);
img.addEventListener(MouseEvent.CLICK, image_click);
img.source = evt.itemRenderer.data.@fullImage;
img.setStyle(”addedEffect”, image_addedEffect);
img.setStyle(”removedEffect”, image_removedEffect);
PopUpManager.addPopUp(img, this, true);
}
private function image_click(evt:MouseEvent):void {
PopUpManager.removePopUp(evt.currentTarget as Image);
}
private function image_resize(evt:ResizeEvent):void {
PopUpManager.centerPopUp(evt.currentTarget as Image);
}
private function image_complete(evt:Event):void {
PopUpManager.centerPopUp(evt.currentTarget as Image);
}
]]>
</mx:Script>
<mx:WipeDown id=”image_addedEffect” startDelay=”100? />
<mx:Parallel id=”image_removedEffect”>
<mx:Zoom />
<mx:Fade />
</mx:Parallel>
<mx:XML id=”xml” source=”gallery.xml” />
<mx:XMLListCollection id=”xmlListColl” source=”{xml.image}” />
<mx:TileList id=”tileList”
dataProvider=”{xmlListColl}”
itemRenderer=”CustomItemRenderer”
columnCount=”4?
columnWidth=”125?
rowCount=”2?
rowHeight=”100?
themeColor=”haloSilver”
verticalScrollPolicy=”on”
itemClick=”tileList_itemClick(event);” />
</mx:Application>
CustomItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center"
verticalAlign="middle">
<mx:Image source="{data.@thumbnailImage}" />
<mx:Label text="{data.@title}" />
</mx:VBox>
gallery.xml
<?xml <a href="http://over50losingweight.com/images/">where <a href="http://blogtorn.com/images/">buy cialis phentermine</a> to buy cialis without prescription</a> version="1.0" encoding="utf-8"?> <gallery> <image title="Flex" thumbnailImage="assets/fx_appicon-tn.gif" fullImage="assets/fx_appicon.jpg" /> <image title="Flash" thumbnailImage="assets/fl_appicon-tn.gif" fullImage="assets/fl_appicon.jpg" /> <image title="Illustrator" thumbnailImage="assets/ai_appicon-tn.gif" fullImage="assets/ai_appicon.jpg" /> <image title="Dreamweaver" thumbnailImage="assets/dw_appicon-tn.gif" fullImage="assets/dw_appicon.jpg" /> <image title="ColdFusion" thumbnailImage="assets/cf_appicon-tn.gif" fullImage="assets/cf_appicon.jpg" /> <image title="Flash Player" thumbnailImage="assets/fl_player_appicon-tn.gif" fullImage="assets/fl_player_appicon.jpg" /> <image title="Fireworks" thumbnailImage="assets/fw_appicon-tn.gif" fullImage="assets/fw_appicon.jpg" /> <image title="Lightroom" thumbnailImage="assets/lr_appicon-tn.gif" fullImage="assets/lr_appicon.jpg" /> <image title="Photoshop" thumbnailImage="assets/ps_appicon-tn.gif" fullImage="assets/ps_appicon.jpg" /> </gallery>
Tags: mx:Fade | mx:Parallel | mx:Style | mx:TileList | mx:WipeDown | mx:XML | mx:XMLListCollection | mx:Zoom | XML
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Comments
Leave a Reply
You must be logged in to post a comment.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.