In my .mxml file, I am populating two side by side Labels with text data from a database.
Like this:
<s:Label x="10" y="37.5" width="100%" text="{data.city}"/>
<s:Label x="86" y="36.75" width="100%" text="{data.state}"/>
Sometimes, I will get a particularly long piece of text data and this will cause the 2 labels to overlap each other and become totally unreadable.
I think this is happening because I have the x and y set. Is there a way to make this more dynamic?
Thanks!
I would recommend exploring different Flex layout containers.
HGroup
<s:HGroup>
<s:Label text="{data.city}"/>
<s:Label text="{data.state}"/>
</s:HGroup>
This provides the kind of layout it sounds like you're looking for from your example. However, you may also want to look at a few other containers Flex offers.
Form
Flex forms align data in ways that are often useful for creating, well, forms. You may want to consider this for your UI, especially if you're allowing a user to give input that persists back to your DB.
<s:Form>
<s:FormItem label="City:">
<s:Label text="{data.city}"/>
</s:FormItem>
<s:FormItem label="State:">
<s:Label text="{data.state}"/>
</s:FormItem>
</s:Form>
You could do a couple of things:
If you have a function that gets called to set the values of each label, reposition the labels based on the contents in that function.
If the values for the labels are bound to data so that you don't necessarily get notified when the data is refreshed, then it's time to override the updateDisplayList() method of UIComponent, and have it reposition your labels there.
There is a lot of efficiency that can be gained (which will improve your performance) by understanding and using the life-cycle of a UIComponent. There's lots of good info on the subject out there if you just google "Flex component lifecycle"
Good luck!
if you have to display your labels in a limited width, then you can use maxWidth property of labels, this will display your text in label, and if text is long then it will show some text and remaining in ... format.
<s:Label text="{data.city}" maxWidth="150"/>
Try set X of second label with the width of the first label + space + x first label.
So: first label width + space + x of first label
Related
I have the following code (textinput).
<s:TextInput id="label"
text="just testing"
width="100%"
height="200"
contentBackgroundColor="#aaaaaa"
styleName="normalText">
</s:TextInput>
I am having a hard time finding how to align the text ("just testing") to the top.
I checked the Adobe documentation but it seems like there is no vertical alignment property available for this property.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/TextInput.html
I realize that there is a textarea component available but due to performance reasons, I need to use textinput.
topPadding seems to work for mx
<mx:TextInput
id="txt"
paddingTop="5"
text="I am Vertically aligned text"
textAlign="center"
width="250"
height="250">
</mx:TextInput>
Any tips would be greatly appreciated.
Thanks!
Quick version
If the font size never varies, it may suffice to just work with paddingBottom. Because by default the vertical alignment is set to middle, decreasing paddingTop alone will not suffice to move the text up sufficiently; it's set to 1px by default anyway. You'll have to increase paddingBottom too. I cannot give you exact numbers: it depends on the size of the font, so you'll have to play around with the values a bit.
<s:TextInput paddingBottom="6"/>
Reusable version
If you want your solution to be reusable with any kind of font, you'll have to create a custom skin for TextInput. Fortunately, that's not too hard:
Find the spark.skins.spark.TextInputSkin
Copy it and give it a new name, say my.skins.TopTextInputSkin
Find the RichEditableText tag with id textDisplay (it's at the bottom)
Set its verticalAlign property to top
Apply the new skin: <s:TextInput skinClass="my.skins.TopTextInputSkin"/>
I need to use checkbox as radiobutton.
In my case I'd like to define a checkbox group but I don't know why.
If I select one checkbox, I'd like that other checkbox are deselecting
Could you help me ?
Thanks
If there is a static amount of radio buttons you need, you could use Spark States.
<s:states>
<s:State name="check1"/>
<s:Stage name="check2"/>
</s:States>
<s:CheckBox selected="false" selected.check1="true" click="currentState='check1'"/>
<s:CheckBox selected="false" selected.check2="true" click="currentState='check2'"/>
When you click the first one, it triggers the "check1" state in which the first check box is selected and the other is unselected. Clicking the second one does the opposite. Obviously, this is not as flexible as some would hope. But if it's for an interface element (such as an options menu), it's perfect.
States are incredibly useful if you understand how and when to use them. This past weekend, I created an all-Flex slideshow using them and it is a great example of how powerful that simple little array can be.
EDIT: I just threw together a simple app to test this, and it doesn't look like it will work using click. I'm sure you could tinker with another event to get it to work, though. Sorry this didn't work.
I'd use RadioButtons, but if you really wanted to do it, I'd take LondonDrugs_MediaServices approach.
CheckBox and RadioButton both extend from ToggleButtonBase.
Create your own CheckBoxRadioButtonSkin. Copy the CheckBoxSkin to it and rename the hostComponent.
Then use this skin on your radioButton to make it appear to be checkbox.
I have had a requirement like this before and I used a Datagrid with Checkbox inside as itemRenderer.
I subclassed the Checkbox, overrode data getter so that each time it is clicked all the items of Datagrid are unselected, unchecked except for him. This method acquired some advantages:
Flexible to add number of options programmaticcally.
Display title of option group or not.
Enable to use scrollbar if there is a limit of space.
Hope the solution is what you are looking for.
The answer to my question is possibly easy, yet I haven't found an example of solving it in the web, nor have I found a solution reading ActionScript reference.
My problem is the following: I have a big UIComponent derivate element inside a Scroller (spark.components.Scroller) window. The Scroller class is great because when my canvas element, that changes size dynamically, exceeds its boundaries, scrollbars appear automatically and handle scrolling of my UIComponent inside it.
However, I'd like not just to be able to Scroll using these automatically appeared scroll bars, but also by using a pan tool that I will myself implement (similar to the hand tool in Adobe software, for example). The thing is that I am not able to modify correctly the element's position inside the Scroller window.
I tried, as a first approach, accessing to my elements' 'x' and 'y' properties, however, when changing them, I dont get the resulkts wanted. The code for it is the following (in which, for symplifying reasons, I used a text label as my 'inside' element, and two buttons as an external scroll controller, instead of a hand tool)
Tests.mxml
<fx:Script>
<![CDATA[
protected function der_clickHandler(event:MouseEvent):void
{
text.x += 5;
}
protected function izq_clickHandler(event:MouseEvent):void
{
text.x -= 5;
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:Scroller id="sc" x="50" y="50" width="200" height="100">
<s:Group width="100%" height="100%">
<s:Label id="text" width="400" height="10" x="50" y="50" text="blebleblebleblebleblebleblebleblebleblebleble"/>
</s:Group>
</s:Scroller>
<s:Button id="der" x="154" y="182" label="->" click="der_clickHandler(event)"/>
<s:Button id="izq" x="76" y="182" label="<-" click="izq_clickHandler(event)"/>
</s:Application>
And a link to a compiled version, to see what I'm speaking about:
http://megaswf.com/file/1135821
(press 'view fullscreen' if you can't see it)
Help would be really appreciated, as I've been stuck all afternoon with this, and really need it for my project :S
Anyway, many thanks in advance, and regards!
I managed to solve it! (This is the second time this week that I solve something just after posting it here :D).
The property that I had to change is sc.viewport.horizontalScrollPosition+=5; instead of the internal elements 'x' position. And the same for vertical pos.
I am doing this simple project using Flex 4 SDK and I got stuck with this simple problem: I have turned sortable property for AdvancedDataGridColumn to false, but the column header is still rendered as:
As You can see, my label for this header is "06", but the column header is divided and it keeps the place for sort arrow.
How can I change this? I would like my column header to contain only my label.
I know that most probably I need to do some magic with AdvancedDataGridHeaderRenderer but I just started learning Flex and would like to receive some help.
You can add the following property to the AdvancedDataGrid itself:
<mx:AdvancedDataGrid sortExpertMode="true"/>
That will get rid of the annoying extra space for the arrows. An arrow will still show up when you click a column header for sorting, but it will be smaller and less obtrusive. It won't reserve space for itself in the header.
<mx:AdvancedDataGrid sortExpertMode="true">
<mx:columns>
<mx:AdvancedDataGridColumn sortable="false" />
Flex Builder defaults some components to "fit to content" if you don't specify a set width or height. I'm trying to fill a mx:Tile component with Actionscript, but the layout has some strange spacing when I don't specify the width of a component I add to it. Is there a way to set the components to "fit to content" using Actionscript?
Do you still need the tiles to align in columns/rows, or do you want them all to be fit-to-content? If you want the former, good luck, and I hope someone else can answer for my benefit. If you want the latter, you could use FlowContainer (which I got from Appdivision).
// AS3 way
var c:UIComponent = <your component that should fit into parent's content>;
c.percentWidth = 100;
c.percentHeight = 100;
// MXML way
<mx:Canvas>
<mx:Button id="c" width="100%" height="100%"/>
</mx:Canvas>