最近用到TabNavigator,想在那个tabBar上点选的时候触发一个自己的回调方法,可是想象中触发的事件和实际真正应该用到的那个是不一样的!最有意思的是,并不是我一个人遇到这样的困惑,一个老外也和我一个感觉,不知道是是该高兴,还是该怎么的。
其实很容易的,就是说点击TabNavigator上的选项卡时触发的是IndexChangedEvent.CHANGE,而不是那个tabIndexChange。
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="InitApp()">
<mx:Script>
<![CDATA[
import mx.events.IndexChangedEvent;
private function InitApp():void
{
tabnavigator1.addEventListener(IndexChangedEvent.CHANGE,indexChangeHandler);
}
function indexChangeHandler(event:IndexChangedEvent):void
{
this.currentState='HideReminderEntry';
mybutton.label=tabnavigator1.getTabAt(tabnavigator1.selectedIndex ).label
// if (event.triggerEvent is MouseEvent)
// recordAutomatableEvent(event, false);
// else
// recordAutomatableEvent(event.triggerEvent, false);
}
]]>
</mx:Script>
老外原文:
--------------------------------------------------------
I
ran into this because I wanted to do something funky. I wanted my Flex
app window to change PageStates (and size) whenever the TabIndex
changed. Whether doing this kind of thing is wise in a user interface
is yet to be seen -- I did it and it even strikes ME as a bit off the
wall -- but it did solve the immediate issue. The immediate issue was
that some of my tabs required a lot of space and some did not. This
left a lot of ugly whitespace.
So, I figured, Flex (Actually
Flash under the covers) must have an event handler for changing tabs.
And I was rewarded very quickly: There is a "TabIndexChange" inline
event handler. For the uninitiated, such a thing looks something like
this:
<mx:TabNavigator id="tabnavigator1" tabIndexChange="myHandlerFunction()">
With
most other events, this works just fine: When the event fires, the
handler is called. But it simply doesn't work in this case. The
handler function is never called.
There's a couple of ways to
handle this. One way is to use a TabBar control rather than a
TabControl. The TabBar basically gives you the look and feel of a
tabset but more control over what is tabbed. And the tabIndexChange
even calls the handler as one might expect.
I didn't want to do
it that way, however. For one thing, I'm stubborn. For another, I
already had all my controls arranged on the TabNavigator and I didn't
want to rip it half to pieces to get functionality that I should
already be getting.
Fortunately, there's a solution: Explicitly declare an event listener. That looks something like this:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="InitApp()">
<mx:Script>
<![CDATA[
import mx.events.IndexChangedEvent;
private function InitApp():void
{
tabnavigator1.addEventListener(IndexChangedEvent.CHANGE,indexChangeHandler);
}
function indexChangeHandler(event:IndexChangedEvent):void
{
this.currentState='HideReminderEntry';
mybutton.label=tabnavigator1.getTabAt(tabnavigator1.selectedIndex ).label
// if (event.triggerEvent is MouseEvent)
// recordAutomatableEvent(event, false);
// else
// recordAutomatableEvent(event.triggerEvent, false);
}
]]>
</mx:Script>
Important things to note:
- The
handler must be declared in code, and it should run when the page load
is complete. So, in the mx:Application tag, there is the inline event,
creationComplete="InitApp()".
- Any function name can be used here, but InitApp() is by convention.
- You'll need the "import mx.events.IndexChangedEvent," or you'll get a class-not-defined error.
- Wire up the event listener with:
- tabnavigator1.addEventListener(IndexChangedEvent.CHANGE,indexChangeHandler);
- Finally,
as a very small bonus (I'm learning all this too), there's the
commented code talking about "if (event.triggerEvent is MouseEvent)".
So it turns out you can distinguish between whether the event occurred
as the result of a keyboard event (likely Tab), or as a mouseevent. I
don't see a use for it here, but it's applicable to ALL events,
including, say, Focus() events, where it might have some use. Flex --
actually, ActionScript, its programming language -- is really nifty.
FYI,
as a parting note, as far as I can tell SilverLight is intended to be a
direct competitor to Flex. Flex has somewhere around a seven-year head
start. Don't count Microsoft out, of course -- how many people really
use Netscape anymore? -- but on the other hand, you never hear about
J++ anymore either. Bottom line: Those who are considering
SilverLight should also consider Flex. It's incredibly robust, easy to
use, has a full-featured IDE that includes powerful debugging
capabilities, and there's lots of great resources on it to help people
learn. I've been using the videos at Lynda.com. In fact, watching one
of them got me over the hump on this issue. So, I recommend Lynda.com
wholeheartedly.
来自:http://theruntime.com/blogs/be-sharp/archive/2008/03/11/Getting-Around-Bug-in-Adobe-Flex-TabControl-Inline-Event-Handling-for-TabIndexChange-Doesnt-Work.aspx
分享到:
相关推荐
flex TabNavigator tab倒置
NULL 博文链接:https://zhangyinyou.iteye.com/blog/671128
flex3 tabnavigator一个很好的例子
Flex3 TabNavigator 可关闭tab简单实现
Flex3 排版为竖着的TabNavigator实例。
Flex4.6 带图标的TabNavigator的使用,这是个简单的列子供初学者学习一下。
NULL 博文链接:https://toeo.iteye.com/blog/644341
主要介绍了Flex中TabNavigator如何设置Tabs样式有哪些思路,感兴趣的朋友可以看看下面的源码
这是一个封装好的flex项目,可以直接运行,TestTabNavigator.mxml是运行主页。里面定义了TabNavigator控件选中与被选中的皮肤类,皮肤类可以自己进行更改,也可以设置颜色渐变等等。希望对大家有帮助。
NULL 博文链接:https://kisscjy.iteye.com/blog/574873
设置TabNavigator组件的标签头的自定义皮肤,可以设置样式等等,内容较少,只是提供一种自定义皮肤设置的思路
Flex中做得一个垂直button和一个含有垂直标签的TabNavigator
包含flex4panel 不修改皮肤的圆角标题栏,According 控件缓慢展开,NavigaotrContent加icon,TabNavigator Tab头圆角和垂直空隙为0的调节. 外部字体导入和使用,app存放cookie的路径和本地线程调用的示例代码.
3.17节在TabNavigator内创建、启用和禁用TAB组件(TabControls) 3.18 节使用可关闭Tabs 创建一个TabNavigator 3.19 节创建和控制Alert 3.20 节根据呼出组件设置对话框的尺寸和位置 3.21 节管理多个弹出对话框 3.22 节...
在FLEX中使用样式方法 2 一 .使用本地样式定义 2 二、使用外部样式表 3 三、使用内联样式 4 四、使用setStyle()方法 4 五、脚本方法 4 Application组件样式属性 5 panel组件样式属性 5 color文本颜色 6 TabNavigator...
TabNavigator一个react-native 底部菜单
在FLEX中使用样式方法 2 一 .使用本地样式定义 2 二、使用外部样式表 3 三、使用内联样式 4 四、使用setStyle()方法 4 五、脚本方法 4 Application组件样式属性 5 panel组件样式属性 5 color文本颜色 6 TabNavigator...
LinkButton | Menu | MenuBar | PopUpButton | PopUpMenuButton | ProgressBar | TabNavigator ToggleButtonBar | Tree | VScrollBar 为了方便使用,将Spark组件单独剥离出来,使用方案如下:(只限于spark组件) ...
感觉比flexlib.swc的SuperTabNavigator更好用
前言 大家应该都有所体会,我们在一般应用都有跨tab跳转的需求, 这就需要特别...首先选择路由结构, 选择使用最外层是StackNavigator, 然后包含3个TabNavigator和其他组件. const Components = { HomeTwo: { scree