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>
下一页