I want the TextArea under my second tab to update when the tab is clicked. However, it's only updating when I click on the TextArea or the container for that text area.
Flex:
<mx:Box paddingLeft="0" paddingRight="0" paddingBottom="0" paddingTop="0" width="100%" height="100%"
<mx:VBox id="vbxHTMLBody" width="100%" height="100%" horizontalScrollPolicy="off" horizontalAlign="center">
<mx:TabNavigator id = "tabNav" borderStyle="solid" width="100%" height="100%" creationPolicy="all">
<mx:VBox label="Tab1" width="100%" height="100%">
<mx:TextArea id="textArea1" paddingTop="25" paddingLeft="25" paddingRight="25" verticalScrollPolicy="on" focusThickness="0" borderThickness="0" borderStyle="none" editable="true" fontFamily="Arial" fontSize="14" width="100%" height="100%"/>
</mx:VBox>
<mx:VBox label="Tab2" width="100%" height="100%" click="updateTextArea2()">
<mx:TextArea id="textArea2" paddingTop="25" paddingLeft="25" paddingRight="25" verticalScrollPolicy="on" focusThickness="0" borderThickness="0" borderStyle="none" editable="true" fontFamily="Arial" fontSize="14" width="100%" height="100%"/>
</mx:VBox>
</mx:TabNavigator>
</mx:VBox>
</mx:Box>
ActionScript:
private function updateTextArea2(): void {
textArea2.htmlText = textArea1.text;
tabNav.validateNow();
textArea2.validateNow();
}
*I've also tried setting the click listener to the outer containers and that hasn't worked either.
I used change="updateTextArea2()" to listen for any changes made to the text area.
Call updateTextArea2()on change of the TabNavigator:
<mx:TabNavigator id="tabNav" change=updateTextArea2()">
instead from VBox change.
Related
In following code, I have one large component, and I'd like only the level4 panel to be scrollable, but instead, the whole application become scrollable.
Any suggestion ? Thanks
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel width="100%" height="100%" title="level1">
<mx:Panel width="100%" height="100%" title="level2">
<mx:HDividedBox width="100%" height="100%">
<mx:TextArea width="200" height="100%"/>
<mx:Panel width="100%" height="100%" title="level3">
<mx:ApplicationControlBar width="100%" dock="true">
<mx:Spacer width="30"/>
<mx:LegendItem width="80" height="20" fill="#CC9900" label="test1"/>
</mx:ApplicationControlBar>
<mx:Panel width="100%" height="100%" title="level4">
<mx:UIComponent width="2000" height="2000"/>
</mx:Panel>
</mx:Panel>
</mx:HDividedBox>
</mx:Panel>
</mx:Panel>
</mx:Application>
If I set ScrollPolicy, then no scrollbar will be shown up. Please check the following, thanks.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Panel width="100%" height="100%" title="level1" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Panel width="100%" height="100%" title="level2" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:HDividedBox width="100%" height="100%">
<mx:TextArea width="200" height="100%"/>
<mx:Panel width="100%" height="100%" title="level3" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:ApplicationControlBar width="100%" dock="true">
<mx:Spacer width="30"/>
<mx:LegendItem width="80" height="20" fill="#CC9900" label="test1"/>
</mx:ApplicationControlBar>
<mx:Panel width="100%" height="100%" title="level4" horizontalScrollPolicy="auto" verticalScrollPolicy="auto">
<mx:UIComponent width="2000" height="2000"/>
</mx:Panel>
</mx:Panel>
</mx:HDividedBox>
</mx:Panel>
</mx:Panel>
</mx:Application>
Set layout="absolute" for the level4 panel.
You can change the value of .verticalScrollBarPolicy for each Panel, setting it to "off" for the Panels that should not scroll, and to "on" or "auto" for the Panels that should scroll. There is also a .horizontalScrollBarPolicy parameter if you need that as well.
I'm having the hardest time finding a way to simply add rounded tabs to a TabNavigator control.
I have seen examples which seem to be really simple but they don't seem to work in Flex 4.5. Here is some sample code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style source="style.css"/>
<mx:TabNavigator x="93" y="90" width="571" height="293" tabStyleName="tabstyle">
<s:NavigatorContent width="100%" height="100%" label="Tab 1">
</s:NavigatorContent>
</mx:TabNavigator>
</s:Application>
and the css:
/* CSS file */
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
.tabstyle
{
corner-radius: 10;
}
I have also tried cornerRadius: 10;
Any ideas why this does not work? Any easy to follow solution (I'm a beginner).
Thanks.
You could create a skin for your app/tab navigator, use the 'create copy of' option in Flash Builder, and in the Rect section, set the radiusX, radiusY values. Then use that skin for the component
This is the best and easiest workaround I know for this problem. It seems Adobe never solved this bug.
<s:VGroup width="100%" height="100%" gap="0" >
<s:Group width="100%">
<s:TabBar left="4" dataProvider="{tabNav}" cornerRadius="4" />
</s:Group>
<s:BorderContainer width="100%" height="100%" cornerRadius="4">
<mx:ViewStack id="tabNav" paddingBottom="10" width="100%" height="100%" >
<s:NavigatorContent label="Form" width="100%" height="100%">
...
</s:NavigatorContent>
<mx:Canvas id="treeNode" label="TreeNodeComponent" width="100%" height="100%">
...
</mx:Canvas>
<mx:Canvas id="melding" label="Melding" width="100%" height="100%" visible="{authorisation.moduleHasUserAutorization('melding')}" includeInLayout="{melding.visible}">
...
</mx:Canvas>
</mx:ViewStack>
</s:BorderContainer>
</s:VGroup>
It's the equivalent of this but with rounded corners in the tabs (and body):
<mx:TabNavigator id="tabNav" paddingBottom="10" width="100%" height="100%" >
<s:NavigatorContent label="Form" width="100%" height="100%">
...
</s:NavigatorContent>
<mx:Canvas id="treeNode" label="TreeNodeComponent" width="100%" height="100%">
...
</mx:Canvas>
<mx:Canvas id="melding" label="Melding" width="100%" height="100%" visible="{authorisation.moduleHasUserAutorization('melding')}" includeInLayout="{melding.visible}">
...
</mx:Canvas>
</mx:TabNavigator>
Try this!
<mx:TabNavigator id="tabNavigator" tabOffset="20" cornerRadius="10" height="100%" width="100%">
This is the sample code you can copy and run
<s:NavigatorContent id="search" label="Search" width="100%" height="100%" fontWeight="bold"
>
<s:layout>
<s:VerticalLayout horizontalAlign="center"
paddingTop="5" paddingLeft="5"
paddingRight="5" paddingBottom="5" />
</s:layout>
<s:Label text="Search Panel" />
<s:HGroup >
<s:TextInput id="Searchtxt" width="200" />
<mx:Button label="search" click="Searchtxt.text=''" />
</s:HGroup>
</s:NavigatorContent>
<s:NavigatorContent id="custInfo" label="Customer Info" backgroundColor="0xDCDCDC"
width="100%" height="100%" fontWeight="bold" >
<s:layout>
<s:VerticalLayout horizontalAlign="center"
paddingTop="5" paddingLeft="5"
paddingRight="5" paddingBottom="5" />
</s:layout>
<s:Label text="Customer Info" />
<s:HGroup>
<s:Label text="Email Address"/>
<s:TextInput id="email" width="200"/>
<s:Button label="Submit" click="email.text='';" />
</s:HGroup>
</s:NavigatorContent>
<s:NavigatorContent id="accountInfo" label="Account Info" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >
<s:layout>
<s:VerticalLayout horizontalAlign="center"
paddingTop="5" paddingLeft="5"
paddingRight="5" paddingBottom="5" />
</s:layout>
<s:Label text="Account Info" />
<s:HGroup>
<s:Button label="Purchases" />
<s:Button label="Sales" />
<s:Button label="Reports" />
</s:HGroup>
</s:NavigatorContent>
</mx:ViewStack>
How do I add a border to a Flex VBox? My VBox is the renderer of a List. I've tried the following without success (in particular VBox's borderVisible="true" borderStyle="solid" borderColor="0x888888"):
<mx:List id="myList" dataProvider="{myData}"
width="100%" height="100%"
variableRowHeight="true"
verticalScrollPolicy="auto" horizontalScrollPolicy="auto">
<mx:itemRenderer>
<mx:Component>
<mx:VBox
width="100%" height="100%"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
borderVisible="true" borderStyle="solid" borderColor="0x888888">
<mx:HBox width="100%">
<mx:Label id="firstNameLabel" text="{data.firstName}"/>
<mx:Label id="lastNameLabel" text="{data.lastName}"/>
</mx:HBox>
<mx:Text id="descriptionLabel" text="{data.description}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
There is no borderVisible style or property on the Flex Container classes.
To see a border you need to set the borderStyle, borderColor and borderThickness styles.
Try the following styles for your VBox:
<mx:VBox
borderThickness="1" borderStyle="solid" borderColor="0x888888" ...>
...
</mx:VBox>
And in actionscript 3:
private var _vbox:VBox;
...
this._vbox.setStyle("borderThickness", "1");
this._vbox.setStyle("borderStyle", "solid");
this._vbox.setStyle("borderColor", "0x888888");
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var myData:ArrayCollection = new ArrayCollection([
{label:'a11',url: '../dol/assets/images/lalign.png', side:'left'},
{label:'a323',url: '../dol/assets/images/calign.png', side:'center'},
{label:'asdf45',url: '../dol/assets/images/ralign.png', side:'right'}]);
]]>
</mx:Script>
<mx:List id="myList" dataProvider="{myData}"
width="100%" height="100%"
variableRowHeight="true"
verticalScrollPolicy="auto" horizontalScrollPolicy="auto">
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="100%" height="100%"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
borderStyle="solid" borderColor="0x888888" borderThickness="3">
<mx:HBox width="100%">
<mx:Label id="firstNameLabel" text="{data.label}"/>
<mx:Label id="lastNameLabel" text="{data.url}"/>
</mx:HBox>
<mx:Text id="descriptionLabel" text="{data.side}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
</mx:Application>
borderVisible is nothing in flex, use borderStyle=solid, borderThickness, and borderColor attributes to show border
I want to display three different pieces of text in a line underneath a VBox so I've created a HBox and place the Text components in here:
<mx:HBox width="100%">
<mx:Text text="left" id="textLeft"/>
<mx:Text text="center" id="textCenter"/>
<mx:Text text="right" id="textRight"/>
</mx:HBox>
I want the text with id "textLeft" to be positioned on the very left on the HBox and textCenter to be in the center and textRight to be on the right...
Any solutions/pointers appreciated.
try
<mx:HBox width="100%">
<mx:Text text="left" id="textLeft"/>
<mx:Spacer width="100%" />
<mx:Text text="center" id="textCenter"/>
<mx:Spacer width="100%" />
<mx:Text text="right" id="textRight"/>
</mx:HBox>
or
<mx:HBox width="100%">
<mx:Text text="left" id="textLeft" textAlign="left" width="100%"/>
<mx:Text text="center" id="textCenter" textAlign="center" width="100%"/>
<mx:Text text="right" id="textRight" textAlign="right" width="100%"/>
</mx:HBox>
Personally I'd go with the top one
Thanks for your response. In the meantime I came up with this solution with help from a friend.
Using a grid:
<mx:Grid width="100%">
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="33%" height="100%" horizontalAlign="left">
<mx:Text text="left" id="textLeft"/>
</mx:GridItem>
<mx:GridItem width="33%" height="100%" horizontalAlign="center">
<mx:Text text="center" id="textCenter"/>
</mx:GridItem>
<mx:GridItem width="33%" height="100%" horizontalAlign="right">
<mx:Text text="right" id="textRight"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
However I do see that your solution is better for more things being added.
I have multiple HBoxes inside a VBox inside a canvas like so:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Canvas width="600" height="500">
<mx:VBox height="100%" left="10" right="10">
<mx:HBox width="100%" >
<mx:VBox width="48%" height="100%" horizontalAlign="left">
<mx:Label text="Label" />
</mx:VBox>
<mx:VBox width="48%" height="100%" horizontalAlign="left">
<mx:Label text="Label" />
<mx:HBox width="100%">
<mx:VBox width="48%">
<mx:Label text="Label" />
<mx:ComboBox />
</mx:VBox>
</mx:HBox>
</mx:VBox>
</mx:HBox>
<mx:VBox>
<mx:HBox>
<mx:Label text="Label" />
<mx:Label text="Label" />
</mx:HBox>
</mx:VBox>
<mx:HBox>
<mx:Label text="Label" />
<mx:ComboBox/>
</mx:HBox>
<mx:HBox>
<mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
includeInLayout="false" >
<mx:Label text="Label" />
</mx:VBox>
<mx:VBox>
<mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
includeInLayout="false"
>
<mx:VBox >
<mx:Label text="Text" />
<mx:ComboBox />
</mx:VBox>
<mx:VBox>
<mx:Label text="Label" />
<mx:ComboBox />
</mx:VBox>
</mx:HBox>
<mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
includeInLayout="false"
>
<mx:VBox>
<mx:Label text="Label:"/>
<mx:ComboBox />
</mx:VBox>
<mx:VBox>
<mx:Label text="Label: "/>
<mx:ComboBox />
</mx:VBox>
</mx:HBox>
</mx:VBox>
</mx:HBox>
<mx:HBox >
<mx:Label text="Label:" />
<mx:CheckBox />
</mx:HBox>
</mx:VBox>
</mx:Canvas>
</mx:Application>
The last child in the VBox is overlapping with other components. How do you prevent children of a VBox in a Canvas from overlapping? How do you debug this situation?
I have tried the following:
Removing percent based sizing
IncludeInLayout = true
Sceenshot - Label and Checkbox Overlapping:
It's hard to say with the information provided, but the two questions that come to mind first are:
Is your VBox height greater than the sum of the heights of its children?
Have you set the verticalGap property on the VBox? verticalGap determines vertical spacing between children.
I just tried this (AIR app) and it looks alright to me.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Canvas height="100%" width="100%"
borderStyle="solid"
backgroundColor="0x0000ff">
<mx:VBox height="100%" width="100%">
<mx:VBox backgroundColor="0xff0000" height="50%" width="100%">
<mx:HBox backgroundColor="0x000000" height="50%" width="50%"/>
<mx:HBox backgroundColor="0xffffff" height="50%" width="50%"/>
<mx:HBox backgroundColor="0x00ffff" height="50%" width="50%"/>
</mx:VBox>
<mx:HBox height="50%" width="100%"
backgroundColor="0xff0000" backgroundAlpha="0.5"
borderColor="0x000000" borderStyle="solid" borderThickness="1"/>
</mx:VBox>
</mx:Canvas>
</mx:WindowedApplication>
I resolved this by making the includeInLayout property of some of these components the same conditional used by their visible property.
Not sure what caused the issue though.