DanDev.com » Click http://www.dandev.com Daniel's Dev Blog..ish Sat, 28 Jan 2012 18:06:25 +0000 en hourly 1 Add a click event to a BitmapImage in Adobe Flex/AIRhttp://www.dandev.com/software/add-a-click-event-to-a-bitmapimage-in-adobe-flexair/ http://www.dandev.com/software/add-a-click-event-to-a-bitmapimage-in-adobe-flexair/#comments Wed, 05 Oct 2011 04:00:29 +0000 Daniel http://www.dandev.com/?p=215 You may have noticed MouseEvent.Click is not an event available to be set on the BitmapImage Spark primitive(in the current Flex SDK). But, there is a simple workaround for this. All you have to do is place it inside of a Graphic primitive wrapper. In MXML it would look like this:

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

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
 
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
 
			protected function graphic1_clickHandler(event:MouseEvent):void
			{
				Alert.show('Nope!', 'Click Event');
			}
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:HGroup id="container">
		<s:Graphic click="graphic1_clickHandler(event)">
			<s:BitmapImage source="path/to/image.jpg"
						   smooth="true"
						   smoothingQuality="high" />
		</s:Graphic>
	</s:HGroup>
 
</s:Application>

Flex Builder Project

In AS3 it looks like this:

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
35
36
37
38
39
40
41
42
43
44

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   creationComplete="application1_creationCompleteHandler(event)">
 
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.FlexEvent;
 
			import spark.primitives.BitmapImage;
			import spark.primitives.Graphic;
 
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				var myBI:BitmapImage = new BitmapImage();
				myBI.source = 'path/to/image.jpg';
				myBI.smooth = true;
				myBI.smoothingQuality = 'high';
 
				var myG:Graphic = new Graphic();
				myG.addElement(myBI);
				myG.addEventListener(MouseEvent.CLICK, graphic1_clickHandler);
 
				container.addElement(myG);
			}
 
 
			protected function graphic1_clickHandler(event:MouseEvent):void
			{
				Alert.show('Nope!', 'Click Event');
			}
		]]>
	</fx:Script>
 
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:HGroup id="container">
	</s:HGroup>
 
</s:Application>

Flex Builder Project

]]> http://www.dandev.com/software/add-a-click-event-to-a-bitmapimage-in-adobe-flexair/feed/ 0 Flex HDividedBox/VDividedBox divider double-click event oddityhttp://www.dandev.com/software/hdividedbox/ http://www.dandev.com/software/hdividedbox/#comments Wed, 02 Dec 2009 02:30:05 +0000 Daniel http://www.dandev.com/?p=171 I ran across an interesting case today while looking into an issue for someone else related to capturing the double-click event on the divider for a HDividedBox. It’s a little tricky to get the event to be captured by Flex. A quick search of the interwebs turned up nothing but people with the same issue. There is even an open bug in the Adobe Flex bug tracker(you have to login) that seems to be the exact issue, but there is no resolution named. Through some quick experimentation I figured out you can get it to work like so:

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    width="600" height="588"
    applicationComplete="start()">
    <mx:HDividedBox id="divBox"
    	height="100%" width="99%"
    	liveDragging="true"
    	doubleClickEnabled="true">
          <mx:Canvas width="50%">
          		<mx:Text text="Some example text" />
          </mx:Canvas>
          <mx:Canvas width="50%">
          		<mx:Text text="Some example text" />
	      </mx:Canvas>
     </mx:HDividedBox>
     <mx:Script>
          <![CDATA[
               private function start():void {
                    divBox.getDividerAt(0).addEventListener(MouseEvent.DOUBLE_CLICK, handleDoubleClick);
               }
 
               private function handleDoubleClick(e:MouseEvent):void {
                    Alert.show('Event captured!');
               }
          ]]>
     </mx:Script>
</mx:Application>

The specific resolution was to enable liveDragging and add the event to the divider itself(most people try to set it on the doubleClick property of the DividerBox).

Hopefully this post will be helpful to some people out there with the same issue!

]]> http://www.dandev.com/software/hdividedbox/feed/ 7