添加mouseOver / mouseDown / mouseUp /等。自定义MXML组件 [英] Adding mouseOver/mouseDown/mouseUp/etc. to custom MXML component

问题描述

我刚刚接触Flex，并将一个纯Flash / AS3应用移植到Flex 4.5中。我已经创建了一个基于 BorderContainer

 <？xml version =1.0encoding =utf-8？> 
  xmlns：fx =http://ns.adobe.com/mxml/2009
 xmlns：s =library：//ns.adobe.com / flex / spark
 xmlns：mx =library：//ns.adobe.com/flex/mx
 width =160height =140> 
 
  x =0y =0width =160height =120/> 
 
  fontSize =12fontWeight =bold/> 
 
< / s：BorderContainer> 
  

我试图在mouseOver上添加突出显示/增长效果
$

 < fx：Script> b $ b 
和down down 
<！[CDATA [
 import flash.filters。*; 
 
 public static const SHADOW：Array = [new DropShadowFilter（8，
 80，0x000000，0.2，32，32，1，1，false，false，false）]; 
 public static const GLOW：Array = [new GlowFilter（0xFFFF00，
 0.5，36，36，1，1，false，false）]; 
 
 private var _oldScale：Number; 
 
 private function mouseOver（event：MouseEvent）：void {
 _oldScale = scaleX; 
 filters = GLOW; 
 
 
 private function mouseDown（event：MouseEvent）：void {
 _oldScale = scaleX; 
 scaleX * = 0.95; 
 scaleY * = 0.95; 
 filters = null; 
 
 
 private function mouseUp（event：MouseEvent）：void {
 scaleX = scaleY = _oldScale; 
 filters = GLOW; 
 
 
 private function mouseOut（event：MouseEvent）：void {
 scaleX = scaleY = _oldScale; 
 filters = SHADOW; 
} 
  

不幸的是，这些方法根本不会被调用。
$ b

在纯Flash / AS3应用程序中，我会调用

$ p $ add $ event $ ）;
addEventListener（MouseEvent.MOUSE_DOWN，handleMouseDown）;
addEventListener（MouseEvent.MOUSE_UP，handleMouseUp）;
addEventListener（MouseEvent.MOUSE_OUT，handleMouseOut）;
addEventListener（MouseEvent.CLICK，handleMouseClick）;

并且它可以正常工作，但是在Flex 4.5中，我不知道该怎么做。

另外我注意到，有一个 dropShadowVisible =true属性，但不确定是否/如何将它用于我我不知道是否允许在flex中放大/缩小自定义组件，或者我可能应该使用Flex效果（但如何？）和还设置了 disableLayout =true？

解决方案

4.5：

 <？xml version =1.0encoding =utf-8？> 
  xmlns：s =library：//ns.adobe.com/flex/spark 
 xmlns：mx =library：//ns.adobe.com/flex/mx
 width =160height =140
 mouseOut =handleMouseOut（event） 
 mouseDown =handleMouseDown（event）
 creationComplete =init（event）> 
 mouseUp =handleMouseUp（event）
 mouseOver = 
 
< fx：Script> 
<！[CDATA [
 import mx.events.FlexEvent; 
 $ b $ public function init（event：FlexEvent）：void {
 / * 
 addEventListener（MouseEvent.MOUSE_OVER，handleMouseOver）; 
 addEventListener（MouseEvent.MOUSE_DOWN，handleMouseDown）; 
 addEventListener（MouseEvent.MOUSE_UP，handleMouseUp）; 
 addEventListener（MouseEvent.MOUSE_OUT，handleMouseOut）; 
 addEventListener（MouseEvent.CLICK，handleMouseClick）; 
 
 
 $ / code $ / pre 
 
谢谢，Mansuro，我不能给你的答案，但我已经upvoted yoyur评论。
I'm new to Flex and am porting a pure Flash/AS3 app to Flex 4.5

I've created a custom MXML component based on BorderContainer 
<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    width="160" height="140" >

    <s:Image id="_avatar" enableLoadingState="true" 
        x="0" y="0" width="160" height="120" />

    <s:Label id="_username" x="0" y="125" 
        fontSize="12" fontWeight="bold" /> 

</s:BorderContainer>
I'm trying to add highlighting/growing effect on mouseOver

and "pressed down" effect on mouseDown to that component:
<fx:Script>
    <![CDATA[
        import flash.filters.*;

        public static const SHADOW:Array = [ new DropShadowFilter(8, 
            80, 0x000000, 0.2, 32, 32, 1, 1, false, false, false) ];
        public static const GLOW:Array = [ new GlowFilter(0xFFFF00, 
            0.5, 36, 36, 1, 1, false, false) ];

        private var _oldScale:Number;

        private function mouseOver(event:MouseEvent):void {
            _oldScale = scaleX;
            filters = GLOW;
        }

        private function mouseDown(event:MouseEvent):void {
            _oldScale = scaleX;
            scaleX *= 0.95;
            scaleY *= 0.95;
            filters = null;
        }

        private function mouseUp(event:MouseEvent):void {
            scaleX = scaleY = _oldScale;
    filters = GLOW;
        }

        private function mouseOut(event:MouseEvent):void {
            scaleX = scaleY = _oldScale;
            filters = SHADOW;
        }
Unfortunately those methods aren't called at all.

In pure Flash/AS3 app I'd call
        addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
        addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
        addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
        addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
        addEventListener(MouseEvent.CLICK, handleMouseClick);
and it would work well, but here in Flex 4.5 I don't know how to do this.

Also I've noticed that there is a dropShadowVisible="true" attribute, but not sure if/how it can be used for my purposes.

And I'm not sure if scaling up/down a custom component is allowed in flex or I probably should use "Flex Effects" (but how?) and also set disableLayout="true"?
解决方案
Either of 2 methods below work for me in Flex 4.5:
<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" 
width="160" height="140" 
mouseOut="handleMouseOut(event)"
mouseDown="handleMouseDown(event)"
mouseUp="handleMouseUp(event)"
mouseOver="handleMouseOver(event)"
creationComplete="init(event)">

<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        public function init(event:FlexEvent):void {
                /*
                addEventListener(MouseEvent.MOUSE_OVER, handleMouseOver);
                addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
                addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
                addEventListener(MouseEvent.MOUSE_OUT, handleMouseOut);
                addEventListener(MouseEvent.CLICK, handleMouseClick);
                */
         }
Thank you, Mansuro, I couldn't give you the answer, but I've upvoted yoyur comment.

                        
这篇关于添加mouseOver / mouseDown / mouseUp /等。自定义MXML组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！