Flex学习笔记_06 常用属性

 

 horizontalAlign：水平对齐，有效值范围：left center right

 verticalAlign：竖直对齐，有效值范围：top center bottom

 --backgroundAlpha：透明度，有效值范围：0 --> 256（完全透明-->完全不透明）。

 Alpha： 指定对象的透明度值。有效值为 0（完全透明）到 1（完全不透明）。

 backgroundColor：背景颜色（#RRGGBB）。

 

全屏显示（隐藏工具栏、菜单栏、地址栏），代码：

//图标路径更改为自定义目录
[Bindable]
[Embed(source="../flex/image/maxScreen.png")]			
private var imgMaxScreen:Class;

[Bindable]
[Embed(source="../flex/image/normalScreen.png")]
private var imgNormalScreen:Class;

public function appFullScreen():void{
	if (this.stage.displayState == StageDisplayState.NORMAL){ 
		this.stage.displayState = StageDisplayState.FULL_SCREEN; //切换至全屏界面
		btnFullScreen.toolTip = "切换至普通界面";
		btnFullScreen.setStyle("icon",imgMaxScreen);
	}else{
		this.stage.displayState = StageDisplayState.NORMAL;     //切换至普通界面
		btnFullScreen.toolTip = "切换至全屏界面";
		btnFullScreen.setStyle("icon",imgNormalScreen);
	}
}

<mx:Button x="950" y="13" toolTip = "切换全屏" id="btnFullScreen" icon="@Embed('../flex/image/maxScreen.png')" click="appFullScreen()" width="20" height="18" />

 

注意：当使用ESC退出全屏状态时，无法触发按钮样式的变更,即使如下设置了ESC按键的监听事件。

Flex不做全屏的监听是出于安全考虑----全屏状态下ESC事件再设置全屏，则永远无法切换出全屏。

<mx:Application  keyDown="OnkeyDown(event); >

  <![CDATA[ 
       addEventListener(ResizeEvent.RESIZE ,OnkeyDown);

       private function titleWindow_keyDown(evt:KeyboardEvent):void { 
           if (evt.charCode == Keyboard.ESCAPE) { 
              //this.stage.displayState = StageDisplayState.FULL_SCREEN; //切换至全屏界面
              btnFullScreen.toolTip = "切换至全屏界面";
	            btnFullScreen.setStyle("icon",imgNormalScreen);   
           } 
       } 
  ]]> 
</mx:Application>

 

按钮图标应用

<button icon="@Embed('../your.png')" >

borderStyle被设置为“solid”的情况下，才支持borderSides样式。
borderSides 设置作用域：上下左右边框。
borderThickness 设置边框宽度。
下例为通过borderStyle和borderSides样式设置NumericStepper控件特定边框(上下左右边)。

 

    <mx:NumericStepper id="numericStepper"
            borderStyle="solid"
            borderThickness="1"
            borderSides="left right top bottom" />

.as 文件引用 

 <mx:Script source="refrence.as">
  <!-- 此处如果refrence.as中是一个包com.my.flex和一个类refclass，则应改成import com.my.flex.refclass -->
  <![CDATA[   
   include "refrence.as" 
  ]]>
 </mx:Script>

 

tooltip 使用技巧

如果想要在toolTip中换行显示文本，则：

   在ActionScript 中, 您使用 /n 转义的新行字符。

   在 MXML 标签中, 您使用 
   如：

<mx:ButtontoolTip=" The first text line &#13; The Second text line." >

重定义toolTip--字体大小、颜色等，加上动画效果，代码如下：

<SPAN style="FONT-SIZE: medium"><?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="init()" minWidth="955" minHeight="600">  
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->  
        <mx:Rotate id="rotate" />    
        <mx:Zoom id="zoom" />   
        <mx:Fade id="fade" /> 
     <mx:Style>          @namespace s "library://ns.adobe.com/flex/spark";   
        @namespace mx "library://ns.adobe.com/flex/mx";   
        mx|ToolTip{   
         fontSize:20;   
        }   
    </mx:Style>  
    <mx:Script>  
        <![CDATA[  
            import mx.managers.ToolTipManager;   
              

            private function init():void {   
              ToolTipManager.hideDelay = 2000;    //限时隐藏（毫秒）   
              ToolTipManager.showEffect = rotate; //旋转效果   
              ToolTipManager.hideEffect = zoom;   //渐小直至消失 
              ToolTipManager.hideEffect = fade;   //褪色直至消失 
            }   
         ]]>
    </mx:Script>  
       
    <mx:Button label="鼠标移到我身上"   toolTip="旋转的tooltip" />    
</s:Application></SPAN> 



 
关于字体样式设计还可以这样写，在初始化方法中调用，记住如果是在fx:style中设置，那么要加上命名空间，如果是写代码形式的则要加上对应类名的全限定名
<SPAN style="FONT-SIZE: medium">StyleManager.getStyleDeclaration("mx.controls.ToolTip").setStyle("fontStyle","italic");     
StyleManager.getStyleDeclaration("mx.controls.ToolTip").setStyle("fontSize","20");     
StyleManager.getStyleDeclaration("mx.controls.ToolTip").setStyle("fontFamily","Arial");     
StyleManager.getStyleDeclaration("mx.controls.ToolTip").setStyle("color","blue");     
StyleManager.getStyleDeclaration("mx.controls.ToolTip").setStyle("backgroundColor","#33CC99");     
</SPAN>  




 
下一页