[flexcoders] Re: Possible to add a textinput to a TabNavigator (next to the tabs)
http://livedocs.adobe.com/flex/3/langref/mx/controls/Spacer.html --- In flexcoders@yahoogroups.com, gmoniey22 gmonie...@... wrote: Hi, I am rather new to flex, so I apologize in advance if the answer is obvious. I have a TabNavigator and I want to place a textinput box all the way to the right. This will be a small search box that will help filter the contents of the currently selected tab. Is this possible? Thanks.
[flexcoders] Re: Possible to add a textinput to a TabNavigator (next to the tabs)
If your component is static and will never change , children will never get
removed and no new children will be added you could try an absolute
positioning. I do not recommend spacer tho.
On the other hand you could try to make your own component , you say that you
are new to flex so I guess that may be scary and you would not know where to
start .
Help yourself to this, I'm not saying it's finished but I do think it's the
best approach :
package
{
import mx.containers.TabNavigator;
import mx.controls.TabBar;
import mx.controls.TextInput;
import mx.core.FlexVersion;
import mx.styles.StyleProxy;
public class ExtendedTabNavigator extends TabNavigator
{
public function ExtendedTabNavigator()
{
}
//we don t realy need this, tabBarHeight could be tabBar.height
but eh
private function get tabBarHeight():Number
{
var tabHeight:Number = getStyle(tabHeight);
if (isNaN(tabHeight))
tabHeight = tabBar.getExplicitOrMeasuredHeight();
return tabHeight - borderMetrics.top;
}
protected var textS:TextInput;
override protected function createChildren():void
{
//doesn't matter when we call super, we are not messing
with the actual tabbar
super.createChildren()
//creating out textInput
if(!textS)
{
textS = new TextInput
//you can make a style for this so that it's
not hard.coaded, easiest way. no need for internals
textS.width = 100;
//adding our textInput
rawChildren.addChild(textS);
}
}
override protected function
updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
//move the textInput so that it appears right of the
tabbar
var leftOffset:Number = getStyle(tabOffset);
//watch out for borderThickness
//in case your tabnav has a border soldi with a set
borderthickness
//we will also remove it from the move of tabbar and
texti - coming next
var borderThick:Number = getStyle(borderThickness);
switch (getStyle(horizontalAlign))
{
case left:
//addede calcs for -borderthick
tabBar.move(0 + borderThick + leftOffset, tabBar.y);
textS.move(0 + borderThick + leftOffset + tabBar.width,
tabBar.y)
break;
case right:
//because txeti is right of tabbar we have to also move the
tabbar ,
//we could move texti left of the tabbar
//and leave the tabbar alone, your choice
//also addede calculation for -borderthick
tabBar.move(unscaledWidth - tabBar.width - textS.width
-borderThick + leftOffset, tabBar.y);
textS.move(unscaledWidth - textS.width -borderThick +
leftOffset, tabBar.y)
break;
case center:
//no need for borderthick
tabBar.move((unscaledWidth - tabBar.width -
textS.width) / 2 + leftOffset, tabBar.y);
textS.move((unscaledWidth + tabBar.width - textS.width ) /
2 + leftOffset, tabBar.y)
}
//set textI height
textS.height = tabBar.height//tabBarHeight;
}
}
}
Feel free to ask if there is something unclear
[flexcoders] Re: Possible to add a textinput to a TabNavigator (next to the tabs)
Thanks for the reply...I come from a Java background, so creating a custom component is not scary so to speak...I was just hoping there may be an easier way to do it directly to the TabNavigator instance. Also, out of curiosity, why do you not recommend the spacer?
[flexcoders] Re: Possible to add a textinput to a TabNavigator (next to the tabs)
Another way: mx:Canvas mx:TabNavigator width=100% height=100%/ mx:TextInput right=0/ /mx:Canvas -TH --- In flexcoders@yahoogroups.com, gmoniey22 gmonie...@... wrote: Thanks for the reply...I come from a Java background, so creating a custom component is not scary so to speak...I was just hoping there may be an easier way to do it directly to the TabNavigator instance. Also, out of curiosity, why do you not recommend the spacer?
[flexcoders] Re: Possible to add a textinput to a TabNavigator (next to the tabs)
--- In flexcoders@yahoogroups.com, gmoniey22 gmonie...@... wrote:
Thanks for the reply...I come from a Java background, so creating a custom
component is not scary so to speak...I was just hoping there may be an
easier way to do it directly to the TabNavigator instance.
Also, out of curiosity, why do you not recommend the spacer?
When I said it would be scary all I was saying was that sometimes it can take
a long time to set up exactly as needed. I did not mean to offend you in any
way.
I don't like the spacer idea mainly because it's a 3'rd party, with it's own
width or height, I don't see the need for it, not here anyway. If that
(extending component) is not the wanted approach you can always try the
absolute positioning. I would recommend something like this
?xml version=1.0?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
mx:Canvas width=100% height=100%
mx:TabNavigator id=tabN width=100% height=100%
updateComplete=textI.setStyle('left',tabN.getTabAt(tabN.numChildren-1).x+tabN.getTabAt(tabN.numChildren-1).width)
mx:VBox
/mx:VBox
mx:VBox
/mx:VBox
mx:VBox
/mx:VBox
/mx:TabNavigator
mx:TextInput id=textI /
/mx:Canvas
/mx:Application
So that is
textI.setStyle('left',tabN.getTabAt(tabN.numChildren-1).x+tabN.getTabAt(tabN.numChildren-1).width)
Setting it on the update complete of the tabnavigator and not on the
creationcomplete of the textinput. This way you take into account any resize
that might happen
the id on the tabNavigator can be removed and tabN inside the setStyle() can be
substituted with event.target or event.currentTarget
[flexcoders] Re: Possible to add a textinput to a TabNavigator (next to the tabs)
In case anyone needs a more detailed explanation the need for getTabAt(tabN.numChildren-1). We cannot access tabN.tabBar because of it's protected attribute so we cannot directly get the tabBar's width. That is why we are getting the last-tab's button instance x + witdh , It's the exact width of the tabBar. The x of the (last-tab's button instance) is the sum of all preceding tab button instances + any style the tabnavigator might set. Again, :) not trying to offend anyone, just that not everyone will understand exactly what getTabAt(tabN.numChildren-1) means.
[flexcoders] Re: Possible to add a textinput to a TabNavigator (next to the tabs)
Thanks for your reply...I tried do something similar. As a test case, I just tried to add a label after the tabs have been created. I tried the following: var l:Label = new Label(); l.text = TEST; myTabs.addChild(l); This compiled fine...but when I ran it, nothing showed up. Where would I add the spacer? Thanks. --- In flexcoders@yahoogroups.com, valdhor valdhorli...@... wrote: http://livedocs.adobe.com/flex/3/langref/mx/controls/Spacer.html --- In flexcoders@yahoogroups.com, gmoniey22 gmoniey22@ wrote: Hi, I am rather new to flex, so I apologize in advance if the answer is obvious. I have a TabNavigator and I want to place a textinput box all the way to the right. This will be a small search box that will help filter the contents of the currently selected tab. Is this possible? Thanks.
[flexcoders] Re: Possible to add a textinput to a TabNavigator (next to the tabs)
No offense taken...in fact, I appreciate your help.
I will start playing around with it.
Thanks again.
--- In flexcoders@yahoogroups.com, alinmircea_s alinmirce...@... wrote:
--- In flexcoders@yahoogroups.com, gmoniey22 gmoniey22@ wrote:
Thanks for the reply...I come from a Java background, so creating a custom
component is not scary so to speak...I was just hoping there may be an
easier way to do it directly to the TabNavigator instance.
Also, out of curiosity, why do you not recommend the spacer?
When I said it would be scary all I was saying was that sometimes it can
take a long time to set up exactly as needed. I did not mean to offend you in
any way.
I don't like the spacer idea mainly because it's a 3'rd party, with it's own
width or height, I don't see the need for it, not here anyway. If that
(extending component) is not the wanted approach you can always try the
absolute positioning. I would recommend something like this
?xml version=1.0?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
mx:Canvas width=100% height=100%
mx:TabNavigator id=tabN width=100% height=100%
updateComplete=textI.setStyle('left',tabN.getTabAt(tabN.numChildren-1).x+tabN.getTabAt(tabN.numChildren-1).width)
mx:VBox
/mx:VBox
mx:VBox
/mx:VBox
mx:VBox
/mx:VBox
/mx:TabNavigator
mx:TextInput id=textI /
/mx:Canvas
/mx:Application
So that is
textI.setStyle('left',tabN.getTabAt(tabN.numChildren-1).x+tabN.getTabAt(tabN.numChildren-1).width)
Setting it on the update complete of the tabnavigator and not on the
creationcomplete of the textinput. This way you take into account any resize
that might happen
the id on the tabNavigator can be removed and tabN inside the setStyle() can
be substituted with event.target or event.currentTarget
[flexcoders] Re: Possible to add a textinput to a TabNavigator (next to the tabs)
After reading your second post with the .addChild I guess this would be
helpful. Here it is
?xml version=1.0?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
creationComplete=addTI()
mx:Script
![CDATA[
import mx.controls.TabBar;
import mx.containers.VBox;
import mx.controls.TextInput;
private var ti:TextInput = new TextInput
private function addTI():void
{
tabN.rawChildren.addChild(ti);
}
private function Upda():void
{
var tabBar:TabBar = tabN.getTabAt(0).parent as
TabBar;
var leftOffset:Number =
tabN.getStyle(tabOffset);
var borderThick:Number =
tabN.getStyle(borderThickness);
ti.width = 100
ti.height = tabN.getTabAt(0).height
switch (tabN.getStyle(horizontalAlign))
{
case left:
tabBar.move(0 + borderThick +
leftOffset, tabBar.y);
ti.move(0 + borderThick + leftOffset +
tabBar.width, tabBar.y)
break;
case right:
tabBar.move(tabN.width - tabBar.width -
ti.width -borderThick + leftOffset, tabBar.y);
ti.move(tabN.width - ti.width -borderThick
+ leftOffset, tabBar.y)
break;
case center:
tabBar.move((tabN.width - tabBar.width
- ti.width) / 2 + leftOffset, tabBar.y);
ti.move((tabN.width+ tabBar.width -
ti.width ) / 2 + leftOffset, tabBar.y)
}
}
]]
/mx:Script
mx:TabNavigator id=tabN width=100% height=100%
updateComplete=Upda()
mx:VBox
/mx:VBox
mx:VBox
/mx:VBox
mx:VBox
/mx:VBox
/mx:TabNavigator
mx:HBox
mx:Button click=tabN.addChild(new VBox) label=add child/
mx:Button click=tabN.removeChildAt(0) label=remove child/
mx:Button click=tabN.setStyle('horizontalAlign','left') label=left
align/
mx:Button click=tabN.setStyle('horizontalAlign','center')
label=center align/
mx:Button click=tabN.setStyle('horizontalAlign','right')
label=right align/
/mx:HBox
/mx:Application
quote:
Although at the level of a Flash DisplayObjectContainer, all children
are equal, in a Flex Container some children are more equal than others.
(George Orwell, Animal Farm)
In particular, Flex distinguishes between content children and
non-content (or chrome) children. Content children are the kind that can be
specified in MXML. If you put several controls into a VBox, those are its
content children. Non-content children
are the other ones that you get automatically, such as a
background/border, scrollbars, the titlebar of a Panel, AccordionHeaders, etc.
Most application developers are uninterested in non-content children,
so Container overrides APIs such as numChildren and getChildAt() to deal only
with content children. For example, Container, keeps its own _numChildren
counter.
Container assumes that content children are contiguous, and that
non-content children come before or after the content children.
In order words, Container partitions DisplayObjectContainer's
index range into three parts:
A B C D E F G H I
0 1 2 3 4 5 6 7 8- index for all children
0 1 2 3- index for content children
The content partition contains the content children D E F G.
The pre-content partition contains the non-content children A B C that
always stay before the content children.
The post-content partition contains the non-content children H I that
always stay after the content children.
Container maintains two state variables, _firstChildIndex and
_numChildren, which keep track of the partitioning. In this example,
_firstChildIndex would be 3 and _numChildren would be 4.
quote:
A container typically contains child components, which can be enumerated
using the
