I'm trying to word wrap a richeditable text but I'm having some problems:
I want it to wrap vertically so I can avoid the horizontal scrollbar.
The Air app only has a spark list and the itemrenderer used is this:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:RichEditableText width="100%" height="100%" multiline="true" text="{data.text}"/>
</s:ItemRenderer>
Any ideas ho to fix this? Thank you.
Add minWidth to your text component like so:
<s:RichEditableText width="100%" height="100%" minWidth="0" multiline="true" text="{data.text}"/>
This is an old trick to force a component to calculate its size properly.
lineBreak property seems to work for flex 4.5 in actionscript and mxml, but only in mxml in previous versions.
<s:RichEditableText lineBreak="toFit" width="100%" height="100%" multiline="true" text="{data.text}" />
Set the ItemRenderer width to 100%:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true"
width="100%">
<s:Label width="100%" text="{data.text}"/>
</s:ItemRenderer>
Related
I am playing around with flex 4 GUI with a simple alignment but couldnt figure out why.
I have button1, button2, and a text field. I want to align them horizontally, and center vertically for the text.
For the following code, i see the following output.
_______ ______
|bt1 | |bt2 | text1
|______| |______|
my question is;
1) why with the properties i sent on btn 1 verticalCenter="10" and btn2 verticalCenter="-10" they are still aligned? shouldnt i see one is up and the one is donw?
2 ) why my text1 is aligned top, even though i set it to verticalCenter=0, i tried it with or without in a group.
Thanks guys
<?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>
<s:Group minWidth="100">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Button label="myButton" click="" horizontalCenter="0"
verticalCenter="10"/>
<s:Button label="myButton" click="" verticalCenter="-10"/>
<s:Group verticalCenter="0" horizontalCenter="0">
<s:Label text="hello" color="#FFFF" verticalCenter="0"
textAlign="center" />
</s:Group>
</s:Group>
</s:Application>
It might be helpful for others to understand why this occurs, as it is a common problem.
When you use a HorizontalLayout or VerticalLayout some properties you set on the "layout objects" are not used. This occurs because these properties do not really work or make sense in a vertical/horizontal layout.
Layout properties that are ignored by vertical/horizontal layouts:
x and y coordinates
horizontalCenter and verticalCenter
top, bottom, left, right contstraints
The above properties will work for the default BasicLayout class.
As indicated in the answer by #Mahesh Parate, the vertical/horizontal layouts do allow for content to be centered by using the horizontalAlign and verticalAlign properties.
Below code may help you: - add verticalAlign="middle" in HorizontalLayout this will solve your problem.
<?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:Script>
<![CDATA[
protected function onClickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
}
]]>
</fx:Script>
<s:Group minWidth="100" >
<s:layout>
<s:HorizontalLayout verticalAlign="middle"/>
</s:layout>
<s:Button label="myButton" click="onClickHandler(event)" horizontalCenter="0"
verticalCenter="10"/>
<s:Button label="myButton" click="onClickHandler(event)" verticalCenter="-10"/>
<s:Group verticalCenter="0" horizontalCenter="0">
<s:Label text="hello" color="#FFFF" verticalCenter="0"
textAlign="center" />
</s:Group>
</s:Group>
</s:Application>
Trying to understand why when creating a component in flex (flash builder 4) I am unable to create a component from file->new component and reference "data.", but a slightly different sample works. This component is going to be used as an advanced data grid renderer.
This one compiles fine:
<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" height="100%" width="100%" >
<s:RichText text="{data.presentingProblemNotes}"/>
</mx:VBox>
This one does not compile, does not like the data.presentingProblemNotes
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
<s:RichText text="{data.presentingProblemNotes}"/>
</s:Group>
The error is on the "data" variable - that it does not exist.
In mx components, all UIComponent had a 'data' property which was used for item renderers, but that has been removed in Spark components because not all of them needed it. They now need to extend DataRenderer for it to work. In your particular case, you could do this instead:
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
<s:RichText text="{data.presentingProblemNotes}"/>
</s:ItemRenderer>
I know this question has been asked before but the other solutions didn't work for me quite well.
here's my sample application.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="200" height="300">
<fx:Script>
<![CDATA[
import flashx.textLayout.conversion.TextConverter;
]]>
</fx:Script>
<s:Group top="0" bottom="0" left="0" right="0">
<s:VGroup width="100%" gap="10">
<s:RichEditableText id="text1" editable="false" width="100%" height="60" minWidth="0"
textFlow="{TextConverter.importToFlow('some loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text', TextConverter.TEXT_FIELD_HTML_FORMAT)}" />
</s:VGroup>
</s:Group>
</s:WindowedApplication>
I tried to mimic my application structure as much as possible.
basically I want the text in 'text1' to wrap around. This won't work if i set the height to 60 pixel which is what I want. But if i change height of text1 to 100% (or remove height all together) then all of sudden I get word wrap. It seems like it doesn't like fixed height. I'm not sure what's going on here.. adding minWidth="0" didn't help nor setting lineBreak="toFit".
any ideas?
Try to set width as explicit value
I am trying to make a simple change on look of Flex 4.5 Spark DropDownLis trough extending it's item renderer, anyway even a just shiny new item renderer bring me as result a items which labels is blanks.
If i remove the renderer everything is fine, but with it - the items is blank white.
<s:DropDownList id="cbX" x="140" y="281" width="276" itemRenderer="comboItemRenderer" labelField="#text">
<mx:XMLListCollection>
<fx:XMLList>
<node text="1" />
<node text="2" />
<node text="3" />
</fx:XMLList>
</mx:XMLListCollection>
</s:DropDownList>
item renderer :
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:Label text="{data}"/>
</s:ItemRenderer>
Is it a bug, or i am doing it wrong ?
Try to use:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:Label text="{label}"/>
</s:ItemRenderer>
The data for the renderer is still the data. But if you use labelField you rely on List's label calculation routine. So just display it.
I wanted to know if there's a way to put the label of the FormItem tag right . I mean , by default the FormItem label and the TextInput look like this : "Name: [textinput] "
but I want my form to look like this : "[textinput] :Name" . I tried many properties and attributes but seems there's no property for doing that . can anyone help me with this?
thanks
Use Flex 4.5 SDK
<?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">
<s:Form layoutDirection="rtl">
<s:FormItem label="First item">
<s:TextInput>
</s:TextInput>
</s:FormItem>
</s:Form>
</s:Application>
Instead of using FormItem, we can use HBox but we need to mention Label explicitly
<mx:HBox>
<mx:TextInput id="text"/>
<mx:Label text="Text Input"/>
</mx:HBox>