Table of contents

1. Image Gallery Component – ImageRail
2. 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.

1. Click Event – imageClick
2. Styles – imageBackgroundAlpha
3. 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:

1. constructStyle if a previous style is defined
2. styleChanged is triggered because of StyleManager.setStyleDeclaration(“ImageRail”,style,true)
3. invalidateDisplayList() is called in styleChanges
4. 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….

Bellow you can find a list tags and their attributes that are supported by flash player (and also by flex framework). This list applies to TextArea, TextFields and other controls that are html enabled.

Anchor tag (<a>)

Creates a hypertext link.

• href
• target

Bold tag (<b>)

Renders text as bold.

Break tag (<br>)

Creates a line break in the text field.

Font tag (<font>)

Specifies a font or list of fonts to display the text.

• color
• face
• size

Image tag (<img>)

Lets you embed external JPEG files, SWF files, and movie clips.

• src
• id
• width
• height
• align
• hspace
• vspace
• alt

Italic tag (<i>)

Displays the tagged text in italics.

List item tag (<li>)

Places a bullet in front of the text that it encloses.

Paragraph tag (<p>)

Creates a new paragraph.

• align
• class

Span tag (<span>)

Available only for use with CSS text styles.

• class

Text format tag (<textformat>)

Lets you use a subset of paragraph formatting properties of the TextFormat class within HTML text fields.

• blockindent
• indent
• leading
• leftmargin
• rightmargin
• tabstops

Underline tag (<u>)

Underlines the tagged text.

Some aspects need to be known… <ol> and <ul> are not supported by flash player and any of the two tags are rendered as bullets. As you already noticed the tags do no comply with new standards, they do not necessarily close as is should and tags without closing do not have /> at the end.

More info about this is on Adobe Livedocs following this link.

Today I found a way to remove the “black line” of a tree which has drag and drop functionality enabled. I did that by skinning. Searching through the help I’ve been crossing over a property named “dropIndicatorSkin” where (as its name is suggesting) the drop line is drawn. So I just re-skinned it.

Here is the Tree class (from the application’s style sheet):

Tree {
    fontWeight: normal;
    fontSize: 11pt;
    border-style: solid;
    color: #555555;
 
    backgroundColor: #fcfcfc;
 
    dropIndicatorSkin: ClassReference("path.to.your.custom.skin.ListDropIndicator");	
}

Please notice the

dropIndicatorSkin: ClassReference("path.to.your.custom.skin.ListDropIndicator");

property and how a custom skin is set.

Bellow is our new skin class:

package path.to.your.custom.skin
{
 
    import flash.display.Graphics;
    import mx.skins.ProgrammaticSkin;
 
    /**
     *  The skin for the drop indicator of a list-based control.
     */
    public class ListDropIndicator extends ProgrammaticSkin
    {
 
        //--------------------------------------------------------------------------
        //
        //  Constructor
        //
        //--------------------------------------------------------------------------
 
        /**
	 *  Constructor.
	 */
        public function ListDropIndicator()
        {
            super();
        }
 
        //--------------------------------------------------------------------------
        //
        //  Overridden methods
        //
        //--------------------------------------------------------------------------
 
        /**
         *  @private
         */
        override protected function updateDisplayList(w:Number, h:Number):void
        {	
            super.updateDisplayList(w, h);
 
            var g:Graphics = graphics;
 
            g.clear();
            g.beginFill(0xa1bde2, 0.5);
            g.drawRect(-5, -1, w, 23);
        }
    }
}

I just copied the skin found at C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\frameworks\source\mx\skins\halo\ListDropIndicator.as to the above path specified at the package path, removed the “black line” and did draw a rectangle instead of that line.

This is it. Although at first sight it seems a difficult task it is not.

This it’s an working example of how you can customize your tab bar navigation.

disabledSkin: ClassReference("assets.skins.TabSkin");
 
downSkin: ClassReference("assets.skins.TabSkin");
 
overSkin: ClassReference("assets.skins.TabSkin");
 
selectedDisabledSkin: ClassReference("assets.skins.TabSkin");
 
selectedDownSkin: ClassReference("assets.skins.TabSkin");
 
selectedOverSkin: ClassReference("assets.skins.TabSkin");
 
selectedUpSkin: ClassReference("assets.skins.TabSkin");
 
upSkin: ClassReference("assets.skins.TabSkin");

I hope it’s a clear exemple, for more details, please, leave us a comment.

You can also download the source of this example from here.