I have a group that holds two labels. The text in the labels change dynamically, sometimes with a long text. If I use width=50% for the labels, this may lead to unused lost space like the example below, if one label requires less than 50%. How do I layout the labels so that the maximum space available is used (i.e. the sum of label width = 100% and one or both labels truncate their text if needed) ?
<?xml version="1.0"?>
<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">
<s:HGroup width="200">
<s:Label width="50%" text="Label1" maxDisplayedLines="1"/>
<s:Label width="50%" text="Label2: some very very long text" maxDisplayedLines="1"/>
</s:HGroup>
</s:Application>
like this:
<s:HGroup width="200" gap="5" id="container">
<s:Label text="Label1: so" maxDisplayedLines="1" showTruncationTip="true" maxWidth="{container.width/2}"/>
<s:Label text="Label2: some very very long text that i want to display" maxDisplayedLines="1" maxWidth="{container.width/2}" showTruncationTip="true"/>
</s:HGroup>
Related
In the following code you can see that I have 2 identical bordercontainers (bordercontainer1 & bordercontainer2) with each a surrounding group (surroundinggroup1 & surroundinggroup2).
The bordercontainers have a maxwidth of 250 pixels and a width of 100%.
Basically, I want them to take up to 250 pixels of space but if there is less space available, take up as much as possible.
<?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">
<s:HGroup id="maingroup" width="100%">
<s:Group id="surroundinggroup1">
<s:BorderContainer id="bordercontainer1" height="50" maxWidth="250" width="100%">
<s:Label text="test"/>
</s:BorderContainer>
</s:Group>
<s:Group id="surroundinggroup2">
<s:BorderContainer id="bordercontainer2" height="50" maxWidth="250" width="100%">
<s:Label text="test"/>
</s:BorderContainer>
</s:Group>
</s:HGroup>
</s:WindowedApplication>
The problem is that the surroundinggroups seem to ignore the maxwidth and use the minimum width needed to draw the bordercontainer so that the label containing "test" fits:
I figured setting the surrounding groups width to 100% would solve the issue but this causes the surroundinggroups to take up as much space as possible causing a gap between the 2 bordercontainers:
The only solution seems to be to remove the surroundinggroups, then the layout is as I want it:
The problem here is that, in the real application, these surroundinggroups contain some other components and logic. Removing them would could cause quite some other changes.
Is there no way to achieve the desired outcome (image 3) while keeping these surroundinggroups?
This should do the trick, for some reason I thought that you didn't want size constraints on the surrounding group, but that was just in my head. I moved the maxWidth and 100% to the surroudinggroups, the Bordercontainer width="100%" is also important for what you want.
<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">
<s:HGroup id="maingroup" width="100%" >
<s:Group id="surroundinggroup1" maxWidth="250" width="100%">
<s:BorderContainer id="bordercontainer1" height="50" width="100%">
<s:Label text="test"/>
</s:BorderContainer>
</s:Group>
<s:Group id="surroundinggroup2" maxWidth="250" width="100%">
<s:BorderContainer id="bordercontainer2" height="50" width="100%">
<s:Label text="test"/>
</s:BorderContainer>
</s:Group>
</s:HGroup>
</s:WindowedApplication>
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>
I have layout with two forms. I'm using scroller but scrollbars don't align to window but appear somewhere in the middle of the application screen.
<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">
<s:Scroller width="601" height="539">
<s:Group >
<s:Form x="5" y="10" >
<s:FormItem width="265" label="Name:" textAlign="right">
<s:TextInput width="150"/>
</s:FormItem>
...
</s:Form>
<s:Form x="300" y="10">
<s:FormItem width="265" label="Color:" textAlign="right">
<s:TextInput width="150"/>
</s:FormItem>
...
</s:Form>
</s:Group>
</s:Scroller>
</s:WindowedApplication>
Below You can see screen-shot of my app. There is no scrollbars at the borders.
Here is the screen-shot with scroller set to width and height to 300 pixels.
As You can see the scrollbar is not attached to window.
If you want the scroll bar on the right, to be on the right of the window, then set the width to 100%. Same for the height.
if you want the whole WindowedApplication to scroll, enable scrolling on the WindowedApplication in the properties tab, or add a canvas that is full width and height.
try to modify the code like this :
<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="100%" height="100%">
<s:Scroller width="100%" height="100%">
<!--... the rest of the code-->
it should be worked.
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 create a simple form in flex (flash builder 4). I placed a form container and FormItems inside. The form items are for example standard "customer" fields such as First, Last, Address, City, State, Zip.
By default it lays the fields out vertically and makes the field labels right justified, which looks nice.
However, I would like some of the fields to be horizontal - for example, something like this:
First __________ Last ___________
Address _____________________
City ___________ St ___ Zip ____
I tried putting the first/last in an HGroup container, but that does not quite work - I loose the right justification of the labels, looks something like this:
First __________ Last ___________
Address _____________________
City ___________ St ___ Zip ____
This is an example of how I am trying to make first/last horizonal, but it will not be right justified with referral - however city and referral are right justified together:
<mx:Form x="0" y="307" width="100%">
<s:HGroup>
<mx:FormItem label="First"> <s:TextInput/></mx:FormItem>
<mx:FormItem label="Last"><s:TextInput/></mx:FormItem>
</s:HGroup>
<mx:FormItem label="Referral"><s:TextInput/></mx:FormItem><mx:FormItem label="City">
<s:TextInput/>
</mx:FormItem>
</mx:Form>
It's almost like I need a sort of table layout with colSpan ability, or ?
This custom component looked promising but does not appear to work in fb4 at least http://cookbooks.adobe.com/post_Multi_Column_Form_Layout-9644.html
Also, are there any good books / sites / etc that discuss user interface design / form design and similar in Flex that I can browse?
The only way I found to accomplish that is by using an mx:Grid.
Mainly because the mx:GridItems have a colSpan or rowSpan attribute. Furthermore I use empty mx:FormItems in stead of Labels, because you can use the required attribute to show a (*) for required fields.
Here's an example:
<?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="400" height="300">
<mx:Form width="100%" height="100%">
<mx:Grid width="100%" height="100%">
<mx:GridRow>
<mx:GridItem>
<mx:FormItem label="First" required="true"/>
</mx:GridItem>
<mx:GridItem>
<s:TextInput/>
</mx:GridItem>
<mx:GridItem>
<mx:FormItem label="Last"/>
</mx:GridItem>
<mx:GridItem>
<s:TextInput/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem width="100%" height="100%">
<mx:FormItem label="Last"/>
</mx:GridItem>
<mx:GridItem width="100%" height="100%" colSpan="3">
<s:TextInput width="100%"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:Form>
</s:Group>
Hope this helps,
Koen
The answer is to just use CSS. Create a label style in CSS that specifies textAlign to 'left'. Then take that label style and apply it to the labelStyleName property on the formItem.
Here is a full app that demonstrates the fix:
<?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>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
.labelStyleName {
textAlign:left;
}
</fx:Style>
<mx:Form x="0" y="307" width="100%">
<s:HGroup>
<mx:FormItem label="First" horizontalAlign="left" labelStyleName="labelStyleName">
<s:TextInput/>
</mx:FormItem>
<mx:FormItem label="Last" horizontalAlign="left" labelStyleName="labelStyleName">
<s:TextInput/>
</mx:FormItem>
</s:HGroup>
<mx:FormItem label="Referral" horizontalAlign="left" labelStyleName="labelStyleName">
<s:TextInput/>
</mx:FormItem>
<mx:FormItem label="City" horizontalAlign="left" labelStyleName="labelStyleName">
<s:TextInput/>
</mx:FormItem>
</mx:Form>
</s:Application>
If you want more specific lining up of the input items; you may have to specify a labelWidth value.
You should avoid using multiple HGroups if you want columns aligned, it can easily break when you downsize browser window so that it can't show all the content at once. The content overflowing logic will then break the alignment most likely. Use mx:Grid instead as an ultimate solution or s:Form for very simple cases.