My Flex MX list has this itemRenderer
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" autoLayout="true" horizontalScrollPolicy="off">
<mx:Label y="0" right="0" text="{data.hour}" textAlign="right"/>
<mx:HBox left="0" right="0">
<mx:Label text="{data.username}" />
<mx:Text id="text1" text="{data.text}"/>
<mx:Image />
<mx:Button />
</mx:HBox>
</mx:Canvas>
My problem is : I want the MX Text id="text1" to be multi line if {data.text} grows.
Set width and height properties to mx:Text component
Related
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.
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
Hy,
Is it possible to resize the application at the same moment when the Accordion size change, to make effect resize og the last one synchronised with resize of Application ?
In my code,, the Application is resized after the resize of Accordion is completed:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" minWidth="400" minHeight="300" backgroundColor="white" horizontalScrollPolicy="off" verticalScrollPolicy="off" mouseDown="stage.nativeWindow.startMove()">
<mx:Resize id="expand" target="{application}" heightTo="{acc01.height}"/>
<mx:Accordion id="acc01" x="0" y="0" resizeToContent="true" resize="expand.play();" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:VBox label="Accordion Pane 1" width="100%" height="100%">
<mx:Label text="hello"/>
<mx:Label text="hello"/>
<mx:Label text="hello"/>
<mx:Label text="hello"/>
</mx:VBox>
<mx:VBox label="Panel 2" width="100%" height="100%">
<mx:Label text="hello"/>
<mx:Label text="hello"/>
</mx:VBox>
<mx:VBox label="Panel 3" width="100%" height="100%">
<mx:Label text="hello"/>
<mx:Label text="hello"/>
</mx:VBox>
<mx:VBox label="Panel 4" width="100%" height="100%">
<mx:Label text="hello"/>
<mx:Label text="hello"/>
</mx:VBox>
</mx:Accordion>
</mx:Application>
Have a look at http://livedocs.adobe.com/flex/3/langref/mx/effects/Parallel.html, it might do what you need.
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.