15.6.如何在一个表单内通过ToolTips来返映一个错误
15.6.1 问题
如何在多个不同的控件焦点下, 创建及显示复数的验证错误呢?
15.6.2 解决办法
首先使用ToolTipManager 去创建一个新的ToolTip 类, 并把它放置在控件之上。然后创建一个Style 对象, 把它指派到刚刚创建的ToolTip 类之中, 以做出指定的字型及背景配色。
15.6.3 讨论
这种错误提示的方式其实是基于ToolTip 组件, 它会在validator 报错的情况被显示。你可以通过设定不同的风格来得出各种各样的视觉效果, 例如: ackgroundColor, fontColor, fontType 等等。而使用ToolTip 中的setStyle 方法, 则可以把预先设计好的风格套用到每个新的错误提示中。例如:
要去显示复数的tooltip 的话, 首先把相关的控件定位到舞台上。例如:
当所有窗体都通过验证以后, 这些提示都会通过ToolTipManager 的destroyToolTip 方法来进行删除。所需的代码如下:
代码如下:
如何在多个不同的控件焦点下, 创建及显示复数的验证错误呢?
15.6.2 解决办法
首先使用ToolTipManager 去创建一个新的ToolTip 类, 并把它放置在控件之上。然后创建一个Style 对象, 把它指派到刚刚创建的ToolTip 类之中, 以做出指定的字型及背景配色。
15.6.3 讨论
这种错误提示的方式其实是基于ToolTip 组件, 它会在validator 报错的情况被显示。你可以通过设定不同的风格来得出各种各样的视觉效果, 例如: ackgroundColor, fontColor, fontType 等等。而使用ToolTip 中的setStyle 方法, 则可以把预先设计好的风格套用到每个新的错误提示中。例如:
+展开
-ActionScript
errorTip.setStyle("styleName", "errorToolTip");
要去显示复数的tooltip 的话, 首先把相关的控件定位到舞台上。例如:
+展开
-ActionScript
var pt:Point = this.stage.getBounds(err.currentTarget.source);
var yPos:Number = pt.y * -1;
var xPos:Number = pt.x * -1;
//现在创建一个错误提示
var errorTip:ToolTip =ToolTipManager.createToolTip(err.message,
xPos + err.currentTarget.source.width, yPos) as ToolTip;
var yPos:Number = pt.y * -1;
var xPos:Number = pt.x * -1;
//现在创建一个错误提示
var errorTip:ToolTip =ToolTipManager.createToolTip(err.message,
xPos + err.currentTarget.source.width, yPos) as ToolTip;
当所有窗体都通过验证以后, 这些提示都会通过ToolTipManager 的destroyToolTip 方法来进行删除。所需的代码如下:
代码如下:
+展开
-XML
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="500"
height="400" xmlns:cookbook="oreilly.cookbook.*"
creationComplete="init();">
<mx:Style>
/*在这里, CSS这个类是用来给予我们的tooltip一个像错误信息的外观*/
.errorToolTip {
color: #FFFFFF;
fontSize: 9;
fontWeight: "bold";
shadowColor: #000000;
borderColor: #CE2929;
borderStyle: "errorTipRight";
paddingBottom: 4;
paddingLeft: 4;
paddingRight: 4;
paddingTop: 4;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.ToolTip;
import mx.managers.ToolTipManager;
import mx.events.ValidationResultEvent;
import mx.validators.Validator;
import mx.controls.Alert;
[Bindable]
private var validatorArr:Array;
private var allErrorTips:Array;
private function init():void {
validatorArr = new Array();
validatorArr.push(comboValidator1);
validatorArr.push(comboValidator2);
}
//以下是验证过程的代码:
private function validateForm():void {
//如果表格上已有错误提示, 我们就去把它移除
if(!allErrorTips) {
allErrorTips = new Array();
} else {
for(var i:int = 0; i<allErrorTips.length; i++)
{
//移除tooltip
ToolTipManager.destroyToolTip(allErrorTips[i]);
}
//把数组清空
allErrorTips.length = 0;
}
var validatorErrorArray:Array =
Validator.validateAll(validatorArr);
//如果validatorErrorArray 这个数组为空, 即告诉你这里没有任何错误可供抛出。否则, 你就要创建相及按置对应的错误提示。
var isValidForm:Boolean = validatorErrorArray.length == 0;
if (!isValidForm) {
var err:ValidationResultEvent;
for each (err in validatorErrorArray) {
//通过设置目标的x,y 坐标可以设定它的位置
//如果程序中已经存在一些版面管理的设定, 我们会使用getBounds 方法去取得它
//在舞台上的实际位置
//由于ErrorEvent 的目标属性就是负责抛出事件的控件或组件, 所以这个属性会用来放置错误提示。
var pt:Rectangle = this.stage.getBounds(err.currentTarget.source);
var yPos:Number = pt.y * -1;
var xPos:Number = pt.x * -1;
//现在创建错误提示
var errorTip:ToolTip =
ToolTipManager.createToolTip(err.message,
xPos + err.currentTarget.source.width, yPos)
as ToolTip;
//套用errorTip类中的selector
errorTip.setStyle("styleName", "errorToolTip");
//储存错误提示以方便在日后验证通过的时候把它移除
allErrorTips.push(errorTip);
}
}
}
]]>
</mx:Script>
<!-- our two validators -->
<cookbook:ComboValidator id="comboValidator1" error="Please
Select A State" prompt="{stateCB1.prompt}"
source="{stateCB1}" property="selectedItem"/>
<cookbook:ComboValidator id="comboValidator2" error="Please
Select A State" prompt="{stateCB2.prompt}"
source="{stateCB2}" property="selectedItem"/>
<mx:Form id="form">
<mx:FormItem>
<mx:ComboBox id="stateCB1"
dataProvider="{someDataProvider}" prompt="Select A
State"/>
</mx:FormItem>
<mx:FormItem>
<mx:ComboBox id="stateCB2"
dataProvider="{someDataProvider}" prompt="Select A
State"/>
</mx:FormItem>
</mx:Form>
<mx:Button label="validate" click="validateForm()"/>
</mx:VBox>
height="400" xmlns:cookbook="oreilly.cookbook.*"
creationComplete="init();">
<mx:Style>
/*在这里, CSS这个类是用来给予我们的tooltip一个像错误信息的外观*/
.errorToolTip {
color: #FFFFFF;
fontSize: 9;
fontWeight: "bold";
shadowColor: #000000;
borderColor: #CE2929;
borderStyle: "errorTipRight";
paddingBottom: 4;
paddingLeft: 4;
paddingRight: 4;
paddingTop: 4;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.ToolTip;
import mx.managers.ToolTipManager;
import mx.events.ValidationResultEvent;
import mx.validators.Validator;
import mx.controls.Alert;
[Bindable]
private var validatorArr:Array;
private var allErrorTips:Array;
private function init():void {
validatorArr = new Array();
validatorArr.push(comboValidator1);
validatorArr.push(comboValidator2);
}
//以下是验证过程的代码:
private function validateForm():void {
//如果表格上已有错误提示, 我们就去把它移除
if(!allErrorTips) {
allErrorTips = new Array();
} else {
for(var i:int = 0; i<allErrorTips.length; i++)
{
//移除tooltip
ToolTipManager.destroyToolTip(allErrorTips[i]);
}
//把数组清空
allErrorTips.length = 0;
}
var validatorErrorArray:Array =
Validator.validateAll(validatorArr);
//如果validatorErrorArray 这个数组为空, 即告诉你这里没有任何错误可供抛出。否则, 你就要创建相及按置对应的错误提示。
var isValidForm:Boolean = validatorErrorArray.length == 0;
if (!isValidForm) {
var err:ValidationResultEvent;
for each (err in validatorErrorArray) {
//通过设置目标的x,y 坐标可以设定它的位置
//如果程序中已经存在一些版面管理的设定, 我们会使用getBounds 方法去取得它
//在舞台上的实际位置
//由于ErrorEvent 的目标属性就是负责抛出事件的控件或组件, 所以这个属性会用来放置错误提示。
var pt:Rectangle = this.stage.getBounds(err.currentTarget.source);
var yPos:Number = pt.y * -1;
var xPos:Number = pt.x * -1;
//现在创建错误提示
var errorTip:ToolTip =
ToolTipManager.createToolTip(err.message,
xPos + err.currentTarget.source.width, yPos)
as ToolTip;
//套用errorTip类中的selector
errorTip.setStyle("styleName", "errorToolTip");
//储存错误提示以方便在日后验证通过的时候把它移除
allErrorTips.push(errorTip);
}
}
}
]]>
</mx:Script>
<!-- our two validators -->
<cookbook:ComboValidator id="comboValidator1" error="Please
Select A State" prompt="{stateCB1.prompt}"
source="{stateCB1}" property="selectedItem"/>
<cookbook:ComboValidator id="comboValidator2" error="Please
Select A State" prompt="{stateCB2.prompt}"
source="{stateCB2}" property="selectedItem"/>
<mx:Form id="form">
<mx:FormItem>
<mx:ComboBox id="stateCB1"
dataProvider="{someDataProvider}" prompt="Select A
State"/>
</mx:FormItem>
<mx:FormItem>
<mx:ComboBox id="stateCB2"
dataProvider="{someDataProvider}" prompt="Select A
State"/>
</mx:FormItem>
</mx:Form>
<mx:Button label="validate" click="validateForm()"/>
</mx:VBox>
加支付宝好友偷能量挖...
