mx|ToolTip
{
borderStyle:ClassReference("myBorder");
}
查看ToolTipBorder这个类的updateDisplayList(),可以得知通过设置borderStyle为自定义的Border类,可以继承
ToolTipBorder, 或模仿重写一下.
ToolTipBorder的源码
override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h);
var borderStyle:String = getStyle("borderStyle");
var backgroundColor:uint = getStyle("backgroundColor");
var backgroundAlpha:Number= getStyle("backgroundAlpha");
var borderColor:uint = getStyle("borderColor");
var cornerRadius:Number = getStyle("cornerRadius");
var g:Graphics = graphics;
g.clear();
filters = [];
//主要是这里的代码
switch (borderStyle)
{
case "none":
{
// Don't draw anything
break;
}
case "errorTipRight":
{
// border
drawRoundRect(
11, 0, w - 11, h - 2, 3,
borderColor, backgroundAlpha);
// left pointer
g.beginFill(borderColor, backgroundAlpha);
g.moveTo(11, 7);
g.lineTo(0, 13);
g.lineTo(11, 19);
g.moveTo(11, 7);
g.endFill();
filters = [ new DropShadowFilter(2, 90, 0, 0.4) ];
break;
}
case "errorTipAbove":
{
// border
drawRoundRect(
0, 0, w, h - 13, 3,
borderColor, backgroundAlpha);
// bottom pointer
g.beginFill(borderColor, backgroundAlpha);
g.moveTo(9, h - 13);
g.lineTo(15, h - 2);
g.lineTo(21, h - 13);
g.moveTo(9, h - 13);
g.endFill();
filters = [ new DropShadowFilter(2, 90, 0, 0.4) ];
break;
}
case "errorTipBelow":
{
// border
drawRoundRect(
0, 11, w, h - 13, 3,
borderColor, backgroundAlpha);
// top pointer
g.beginFill(borderColor, backgroundAlpha);
g.moveTo(9, 11);
g.lineTo(15, 0);
g.lineTo(21, 11);
g.moveTo(10, 11);
g.endFill();
filters = [ new DropShadowFilter(2, 90, 0, 0.4) ];
break;
}
default: //Tooltip
{
// face
drawRoundRect(
3, 1, w - 6, h - 4, cornerRadius,
backgroundColor, backgroundAlpha)
if (!dropShadow)
dropShadow = new RectangularDropShadow();
dropShadow.distance = 3;
dropShadow.angle = 90;
dropShadow.color = 0;
dropShadow.alpha = 0.4;
dropShadow.tlRadius = cornerRadius + 2;
dropShadow.trRadius = cornerRadius + 2;
dropShadow.blRadius = cornerRadius + 2;
dropShadow.brRadius = cornerRadius + 2;
dropShadow.drawShadow(graphics, 3, 0, w - 6, h - 4);
break;
}
}
}
重写可参考
http://flexonblog.wordpress.com/2008/08/19/design-your-own-tooltipborder-in-flexcustom-tooltipborder-in-flexwith-example/
这里还有个Demo 演示
分享到:
相关推荐
### Flex自定义ToolTip详解 在Flex开发中,`ToolTip`是一种非常实用的界面元素,用于在用户悬停或聚焦某个控件时显示额外的信息。默认情况下,Flex提供了基本的`ToolTip`功能,但有时为了满足特定的设计需求或者...
通常,Flex Tooltip可以通过MXML或ActionScript进行设置和配置,包括设置显示的内容、延迟时间、样式等。 `.project` 文件是Eclipse IDE的一个项目配置文件,包含了项目的构建路径、JRE系统库、源文件夹等信息,...
3. CSS文件:用于定义自定义ToolTip样式的样式表。 4. 文档:可能包含组件的使用说明和API参考。 通过理解和掌握这个自定义ToolTip组件,开发者可以更自由地设计数据展示,提高数据可读性,同时也能为用户提供更...
此外,`ToolTip`还可以自定义样式,包括字体、颜色、背景等,通过设置`styleName`属性引用CSS样式表,或者直接在MXML中设置样式属性。 4. **高级特性** - `showDelay`:控制`ToolTip`在鼠标停留后多久显示。 - `...
本教程将深入探讨如何在Flex中创建自定义的Tooltip。 首先,我们需要了解Flex的基本架构。Flex是基于ActionScript 3.0和MXML的开源框架,用于构建富互联网应用程序(RIA)。在Flex中,我们可以利用各种组件,如...
以下是一些关于自定义Flex4 Tooltip的知识点: 1. **创建自定义Tooltip组件**:首先,我们需要创建一个新的Flex组件,继承自`mx.controls.ToolTip`类,然后重写或扩展其属性和方法以实现自定义功能。 2. **样式...
在提供的`AS3Tooltip`文件中,可能包含了示例代码或自定义扩展,例如自定义的ToolTip类,它可能增加了额外的功能,如动画效果、自定义布局或者更灵活的配置选项。分析这些代码可以帮助你理解如何根据项目需求进一步...
在Flex应用中,将`MyToolTip`组件设置为需要显示工具提示的组件的`toolTip`属性。例如,对于一个数据网格(DataGrid),可以在`UsingDataTipInDataGrid.mxml`文件中,遍历每个单元格,根据数据项设置自定义工具提示...
这可能需要自定义一个Tooltip类,覆盖其默认的行为,以便在鼠标出界时能够正确调整位置。 5. **示例与源码**:提供的`mouse_titleinfo.mxml`和`mouse_titleinfo.swf`文件很可能是包含上述功能的一个示例应用。通过...
- **自定义 Spark Item Renderer**:介绍了如何创建自定义的 Item Renderer 来个性化列表项的显示方式。 - **Spark 基于列表的控件**:涵盖了 Flex 中基于列表的各种控件的特性和使用方法。 - **Spark DataGrid 和 ...
工具提示可以通过设置控件的`toolTip`属性来实现,该属性可以接受字符串或自定义的控件作为值。 #### 基于菜单的控件 基于菜单的控件,如`PopupMenu`和`MenuBar`,用于创建上下文菜单或主菜单。这些控件提供了一种...
接下来,**CSS嵌入外部字体**是指在Flex项目中使用CSS样式表引用外部字体资源。这样可以使应用程序的视觉效果更加丰富多样,用户界面更加个性化。通过@font-face规则,我们可以定义新的字体家族,并引用本地或网络上...
- **样式定义**:首先定义了一个名为`ToolTip`的样式,用于设置工具提示的字体、大小、样式、颜色以及背景色。 - **面板设置**:创建了一个面板,并为其设置了一个默认的工具提示:“Child components without ...
3. **设置TabNavigator的标签文本样式**:通过指定`tabStyleName`属性,可以自定义TabNavigator的标签样式,如字体粗细和内边距。 4. **获取屏幕分辨率**:使用`flash.system.Capabilities`类的`screenResolutionX`...
6. 字体和文本:可以自定义字体,如@font-face,以及文本阴影、文本溢出等样式。 【Flex】 Flex布局,全称为Flexible Box,是CSS3的一种布局模型,专为解决复杂多样的网页布局问题而设计。主要特性包括: 1. 主轴和...
6. **事件处理**:`ToolTipDataGrid`提供了相关的事件,如`showTooltip`和`hideTooltip`,开发者可以通过监听这些事件来实现自定义逻辑,比如追踪用户行为或执行其他操作。 在实际开发中,`ToolTipDataGrid`的实现...
6. 修改Flex组件的样式,你可以创建自定义样式类并将其应用于组件。例如,对于Alert组件,你可以定义`AlertTitle`和`AlertMessage`样式,然后分别赋值给`titleStyleDeclaration`和`messageStyleDeclaration`属性。...
Flex允许我们自定义柱状图的外观和行为。可以通过CSS样式表或直接在MXML代码中设置颜色、边框、渐变等属性。此外,还可以添加提示信息(tooltip)和工具栏来增强用户体验。 6. **响应式设计**: 考虑到不同设备的...