Table of contents
- Image Gallery Component - ImageRail
- ImageRail - Adding Click Event, Styles And HandCursor
Some time ago, in a previous article I presented you ImageRail component that displays some thumbnails with possibility to scroll to left or right. Now we will add some new features that were missing.
- Click Event - imageClick
- Styles - imageBackgroundAlpha
- HandCursor
Click event will be triggered when there is a click on an image, more precisely, on the canvas that holds an image, and will be used by an MXML attribute called imageClick.
Same with styles: we want to be able to set the background alpha of the each canvas that hold images by setting an MXML attribute named imageBackgroundAlpha.
To accomplish both we will use metadata tags like this:
51 52 53 54 55 | <mx:Metadata> [Style(name="imageBackgroundAlpha",type="Number",format="Number",inherit="no")] [Event(name="imageClick", type="com.flexer.ImageRailEvent")] </mx:Metadata> |
1. Click Event - imageClick
For Style metadata tag see Style metadata Adobe’s documentation and for Event metadata tag see How To Add an Event To a Custom MXML Component using Event Meta Tag article I wrote before.
The whole source of the ImageRail component won’t fit in this article and because of that I’ll put only new and important lines in the text - all source code will be available for download at the end.
First we added metadata tags like above. Now methods…
570 571 572 573 574 575 576 577 | // handle one image click private function handleImageClick(e:MouseEvent):void { // dispatch image shelf custom event dispatchEvent(new ImageRailEvent( ImageRailEvent.CLICK, _images[uint(e.currentTarget.id)])); } |
For this method to dispatch the event as we want we need the ImageRailEvent class and some minor modifications in ImageRail component.
Minor modifications
326 | cnv.addEventListener(MouseEvent.CLICK, handleImageClick); |
315 | cnv.id = i.toString(); |
This is important to be able to send further the occurred click event with the image object on which it was clicked. We get it with: _images[uint(e.currentTarget.id)]
ImageRailEvent
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | package com.flexer { import flash.events.Event; import mx.controls.Image; public class ImageRailEvent extends Event { // constant public static const CLICK:String = "imageClick"; // params // we will save the image it was clicked on private var _image:Image; // constructor public function ImageRailEvent(type:String, image:Image = null) { super(type); // Store Image params _image = image; } // clone override public function clone():Event { return new ImageRailEvent(this.type, _image); } // image getter public function get image():Image { return _image; } } } |
This event class contains also the image which was clicked on.
2. Styles - imageBackgroundAlpha
For styles we need more methods to be implemented:
- constructStyle - used to check for any previous defined style and if not we set the default values for some properties
- styleChanged - triggered when style is changed
- updateDisplayList - updating all canvases
and some variables are needed:
107 108 109 110 111 | // static variable for styling private static var _classConstructed:Boolean = constructStyle(); private var _imageBackgroundChanged:Boolean = true; private var _imageBackgroundAlpha:Number; |
The process is like this:
- constructStyle if a previous style is defined
- styleChanged is triggered because of StyleManager.setStyleDeclaration(”ImageRail”,style,true)
- invalidateDisplayList() is called in styleChanges
- updateDisplayList is triggered because of invalidateDisplayList() and will set alpha to all canvases
The code for these three methods…
113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 | // styling private static function constructStyle():Boolean { // get style defined for ImageRail var style:CSSStyleDeclaration = StyleManager.getStyleDeclaration("ImageRail"); // check to see if there's already an existing // style declaration for this class if (style) { // its possible for a style to exist without // defining all of the possible styles // in which case we need to check each style // explicitly and set a default if needed if (style.getStyle("imageBackgroundAlpha") == undefined) { style.setStyle("imageBackgroundAlpha",0); } } else // create a default style declaration { style = new CSSStyleDeclaration(); style.defaultFactory = function():void { this.imageBackgroundAlpha = 0; } // set default style // this will trigger styleChanged StyleManager.setStyleDeclaration("ImageRail",style,true); } return true; } // override for styling // triggered when style is changed override public function styleChanged(styleProp:String):void { super.styleChanged(styleProp); // Check to see if style changed. if (styleProp == "imageBackgroundAlpha") { _imageBackgroundChanged = true; // invalidating to trigger updateDisplayList invalidateDisplayList(); return; } } // updating canvases with the new style override protected function updateDisplayList( unscaledWidth:Number,unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth,unscaledHeight); // Check to see if style changed. if (_imageBackgroundChanged == true) { // get image background alpha _imageBackgroundAlpha = getStyle("imageBackgroundAlpha"); // set the alpha to all canvases for (var i:uint = 0; i < _canvases.length; i++) { (_canvases[i] as Canvas).setStyle( "backgroundAlpha",_imageBackgroundAlpha); } _imageBackgroundChanged = false; } } |
3. HandCursor
Just three lines for this, placed in updateCanvases, and you can also check this article about hand cursor on a label.
323 324 325 | cnv.useHandCursor = true; cnv.mouseChildren = false; cnv.buttonMode = true; |
Now an improved example bellow - and now you can dynamically change the background alpha and can click on an image which will display an alert with image’s path.
In the same way we can add other event (mouseover, mouseout, etc) and style properties (roundCorner, backgroundColor, etc) but for now this is it….
Popularity: 85%
| ||
|
Tags: ActionScript, component, Events, imagerail, styles
This post was written by Andrei Ionescu
Views: 3336
ImageRail Update: Adding Click Event, Styles And Handcursor…
In a previous post, I introduced a new MXML component called ImageRail created by Andrei Ionescu of FLEX{er}. Andrei has added updated it to add some new features that were considered missing.
The list of new features include:
imageClick: triggered …