Flex 4组件：限定搜索范围的Navbar，Vimeo样式

本文来自：http://anirudhs.chaosnet.org/blog/2009.12.09.html

我偶然读到了Theresa Neil的这个好帖：RIA设计的 30个必备控件 。我特别喜欢控件23限定范围的搜索。于是，我构建了一个 Flex  4 导航条（vimeo样式）。该导航条有限定范围搜索的功能，通过CSS完全受数据驱动，自定义型。它不使用任何现成图片，所有的内容都是绘制的。然后，我建了一些可以重复使用的内容，如点线图形元素和立式分离器设计。

灵感

Vimeo.com设计很棒。我是在读Theresa的文章时，才注意到它漂亮的顶部导航标题。桥接线非常之美。就是这个“限定范围搜索“让我决定构建这个组件的。

什么是限定范围的搜索？

根据Theresa:

限定范围的搜索，如ITunes, 在进入自由形式的搜索文本前，允许类别的选择。

DEMO

点击下面的图，运行DEMO（启动查看源代码，源在MPL1.1下）：

你可以 下载FXP .

使用这个DEMO,你可以在运行时间改变成任何颜色。通过CSS传递这些颜色。在实例中，你还可以在运行时间更改显示的数据。

在顶部条目上的鼠标悬停上，显示一个弹出菜单。当进行限定范围搜索时，该菜单保持开放，这样可以更改列表中选定的条目，并且如果用户没有输入任何内容，可显示变化的提示文本。

派遣的事件显示在底部。

使用Navbar:

首先，声明设定的数据：

Bindable] private var navData:ArrayList = new ArrayList( [{label: "Log In"}, {label: "Explore", menu: explorePopup}, {label: "Help", menu: popupData2}]); private var explorePopup:ArrayList = new ArrayList( ["Categories", "Groups", "Channels", "Toys"]); [Bindable] private var searchCategories:ArrayList = new ArrayList( ["Search Videos", "Search People", "Search Channels", "Search Forums"]);

通过dataProvider和searchDataProvider属性赋值：

当进行限定范围的搜索时，触发搜索事件（点击放大镜或按输入）。当点击菜单条目时，触发navselect。

与Navbar配备的组件

1)  有一个新的GraphicElement, DottedLine。你可以和Line, Rect等一样在 Flex 4里使用。DottedLine使用位图填充标出点（因为是 暖带林 ）。

2)  立式分离器设计：如果你注意到弹出菜单里的列表，可看到最后一个元素没有绘制分离器（点线）。这是通过自定义版图 1 （使得最后一个条目里的分离器不可视）执行的。

3)  限定范围的下拉：用来弹出菜单（列表）。它是一个自定义的下拉式清单，可保持开放直到被通知已经可以关闭。

4)  放大镜：它其实并不是一个组件，是一个椭圆和一条线，看上去比较像一个搜索放大镜 2 。

Flex 4 观察

在开发组件时，我所注意到的一些问题 3 ：

Rect

Rect原语支持通过bottomLeftRadiusX, bottomRightRadiusX, topLeftRadiusX, topLeftRadiusY,等在一个单独的角上设置一个角半径X, Y属性。

也就是，弹出列表上的混合版面。我不得不耍了个小把戏，画了两个长方形：一个是正常的，另外一个填充了背景色彩，用角半径设置。获许，还有一个混合模式？可以清除它下面任何有特定颜色的内容。

CSS

在CSS里，你使用namespace|component.。它被扩展到组件的完全限定名。这非常重要，如果你想在运行时间修改样式声明（如在DEMO里一样）。例如，如果你想改变CSS声明容器|NavContainer里定义的navFill。

StyleManager.getStyleDeclaration('net.anirudh.container.NavContainer'). setStyle('navFill', navfill.selectedColor);

Flex  4 里用于CSS的语法非常之强大。例如，下面显示了怎样通过CSS改变一个品牌标签：

/* In NavContainer change Label with id brandLabel */ container|NavContainer s|Label#brandLabel { fontSize: 18; }

皮肤

任何为组件定义的样式都可在皮肤里找到。图元不支持CSS，因为你可以通过getStyle() call绑定属性。

如果你想检查CSS属性，并进行一些操作（如让Rect在皮肤里不可视），覆盖updateDisplayList()。

图元

当你构建自己的 GraphicElement ,你可以通过:___读取G raphics 对象

//The base GraphicElement class has cleared the graphics for us. (drawnDisplayObject as Sprite).graphics

总结

使用 Flex 4进行开发是非常精彩的体验。在我看来，这是构架最棒的GUI框架。

[1]我认为，从没有人用这来解释为什么人们会自定义设计一个版面。然而，它确实很棒，使用的代码也是尽可能的少了。

[2] 是的，我知道应该使用一个图标。但是我想改变它的颜色。

[3] 请不要把这些当作硬性规则。这不过是我自己的观察心得而已。

【国内下载】Flex 3 Builder :http://g.csdn.net/5120749
【国内下载】Adobe Flash Builder 4 :http://g.csdn.net/5105812
【官方下载】Flex 3 Builder :http://g.csdn.net/5121278
【官方下载】Adobe Flash Builder 4 :http://g.csdn.net/5120750