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 
 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>

下一页