Here's a problem I keep running into:
I have a lot of situations where I need to display some text with a styled container like so:
<mx:Canvas>
<mx:Text text="{text}" left="5" verticalCenter="0" right="5" />
</mx:Canvas>
As you can see - the text in constrained by the left and right margins of the canvas and I have not specified a height for the text control because I want it to grow vertically when I add text to it. Reason being - if there is one line of text I want it to display in the center of the canvas but if there are two or three lines of text I want the text control to show those two or three lines of text.
What keeps happening however, is that it will only display one line of text - no matter how many times I call invalidateSize() on it or the container. What do I do?
CAVEAT: The canvas height and width is set by the component that instantiates it (this is all wrapped up in a custom component) so I can't explicitly set the width or height of the text control...
NOTE: Ok, maybe it's an easy fix because as I was typing this question I figured it out - but, here's a chance to answer an easy question!?
The Text component needs a width if you want it to automatically wrap for you. If you used a string with newlines in it it will work grow as you expected without a width. For you, use:
Edit: Ok, you want it centered in a canvas of varying size. Then you can:
<mx:HBox
width="500"
paddingLeft="5"
paddingRight="5">
<mx:Spacer width="100%" />
<mx:Text
width="100%"
text="{text}" />
<mx:Spacer width="100%" />
</mx:HBox>
Take a look at the TextArea component.
Related
I'm trying to make a button in Flash Builder 4.5 that is multi-lined (specific line break, both are left justified), with the second line being italicized. I can do this by making a button, and throwing a label on top of it, but it wrecks the button functionality where that label sits.
Is there an easy functionality to do this, or is it starting to step into custom skins? (I've looked at it, but I'm pretty new to FB, and it looks like a steep learning curve)
Yeah, you definitely want skinning. It's fairly easy since it generates all the code for you. You just need to find the label for the button and modify it to your will.
Sorry to say, but this is the only way to do it properly. If what you're trying to do is just hack it together, I don't think you should be touching code...
Minor clarification/addition:
While having multiple lines in the button label is as easy as setting the 'maxDisplayedLines' attribute of the 'labelDisplay' in the skin to anything larger than '1', s:Label does NOT support multiple styles; i.e. you can't have one line regular and the second line italic.
FTQuest
To create a multi-lined Label of a Button:
Skin your Button (Simplest way: Create Skin from the Design view)
In the Skin, scroll to where you see the Label with the id="labelDisplay"
Set a Fixed Width to that Label in the Skin & you're Done!
Once you populate the label property of the Button, it'll auto multi-line for you
There was nothing I've found to do what I wanted to do (I did find Flexlib and canvasButton, but it didn't seem to work for me)
What I ended up doing is making my own "simulated" buttons. A container with 2 lines of labels (one normal, one italic, like I wanted) with another container over it. mouseOver and mouseOut and click were all bound to the top container to make it seem like one large button. (I also used some alpha transparency to simulate highlighting.
For the curious (or other beginners with similar issue) -this is what I've done
<s:BorderContainer id="bottomContainer" x="129" y="99" width="200" height="44" backgroundColor="#EEEEEE"
borderVisible="false" cornerRadius="6">
<s:Label id="encLabel1" x="48" y="8" color="#000000" fontFamily="Arial"
text="Create a new encounter"/>
<s:Label id="encLabel2" x="48" y="24" color="#000000" fontStyle="italic"
text="Single encounter"/>
<s:Image x="10" y="10" source="assets/001_01.png"/>
</s:BorderContainer>
<s:BorderContainer id="coverContainer" x="129" y="99" width="200" height="44" backgroundColor="#000000"
borderVisible="false" cornerRadius="6" alpha=".1" mouseOver="alphaOver(event)" mouseOut="alphaOver(event)" click="trace('working')">
</s:BorderContainer>
I'm working with flex, but actionscript ideas are just as good.
The flex <s:Application> tag has height="100%" width="100%" so the swf fits the browser as the browser gets resized.
My problem is that I have a <s:Label> that I need to position based on the real/current size of the browser.
<s:Application height="100%" width="100%">
.....
<s:Label text="hello" x="?" y=">" />
</s:Application>
I heard it's possible to use Application.application.width; but I get a compile error, that it doesn't know what that is.
Any ideas how to do this. I'm trying to get the current size of the swf in the browser, as the browser resizes.
As far as I can tell the following should work. Application.application simply is the same as this provided you are in the base application. The binding should allow the size to change after initialization.
<s:Application height="100%" width="100%">
.....
<s:Label text="hello" x="{width}" y="" />
</s:Application>
Edit : I just checked and it does work. To put your Label in the middle of the stage you simply have to put it like that
<s:Application height="100%" width="100%">
.....
<s:Label text="hello" x="{width/2}" y="{height/2}" />
</s:Application>
you could only know stage size when element is added inside stage, you could try a eventdelegate like this
app.addEventListener(Event.ADDED_TO_STAGE,init);
private function init(evt:Event):void{
trace(stage.stageWidth);
trace(stage.stageHeight);
}
Call a javascript function on browser resize. From there get the reference to the swf, and call the AS function to resize the label. Pass the browser width/height.
See example here
UPDATE: Correction: ExternalInterface goes AS to JS.
It's not completely clear what you are trying to do. x and y are positional elements, width and height are size elements. If you are positioning the label you should probably use top, left, right and bottom rather than x and y if you want it to size as the parent control sizes.
If you want the label centered you can use horizontalCenter and verticalCenter.
If you put it inside a layout control like a panel or a canvas you can just set its left and right to 0 and have the parent canvas size.
If your label is always in a different place depending on the size, you can override updateDisplayList to set the position. That holds whether you put it inside a layout control or not.
I'm having some issues aligning the header text of a datagrid.
I'm using an embed font for the header text, and when applying the css, the header text behaves as if I'd set the text vertical align to top.
I'm trying to vertically center the text, but haven't found a way to make it work.
An image to give you a better idea:
alt text http://www.freeimagehosting.net/uploads/d9657df077.jpg
Any tip?
Regards,
BS_C3
Are you using a headerRenderer? A simple headerRenderer might look like:
<mx:HBox width="100%" height="100%" verticalAlign="middle">
<mx:Label text="{data.name}"/>
</mx:HBox>
This will center the label vertically inside the box. You can position horizontally as well.
Almost a year old but nevertheless..
Add a style like
// can be top/middle/bottom
.headerStyleClass {
vertical-align:bottom;
}
and then make use of this style in your column as follows
<mx:AdvancedDataGridColumn dataField="xyz" headerText="Deriv/FX" ***headerStyleName="headerStyleClass">***
You should get the desired output
I'm using a custom itemrenderer to display a list of photos and need to know how to control the width. At the moment it does this:
(source: tdwright.co.uk)
Which, as I'm sure you'll agree, is eye-bleedingly ugly.
The list is created like this:
<mx:Panel width="100%" height="100%" layout="absolute" title="Photos">
<mx:List x="0" y="0" width="100%" height="100%" id="photoList" dataProvider="{photos}" itemRenderer="thumbnails" rowHeight="100"/>
</mx:Panel>
And the itemrenderer component looks like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image source="{data.src}" id="image" scaleContent="true" toolTip="{data.caption}" height="100%" horizontalAlign="center"/>
</mx:VBox>
I've tried placing width="100%" in a whole bunch of places, but without success. If anyone knows how I can control this I'd be very grateful.
If you set these properties inside the itemrenderer verticalScrollPolicy="off" horizontalScrollPolicy="off" the bars are disappeared
I don't know why they choose for the terrible "off" instead of False
A couple of observations here, based on a miasma of similar painful experiences. (Caveat: I have not built a test app to confirm everything here for this specific case)
Assuming that what you want is for the list to size its width based on the size of the itemRenderer elements it contains, those itemRenderer elements need to provide width information. Using a VBox in this fashion with scroll bars permitted means the VBox will attempt to "arbitrate" between the size of the content (Image) and the size of the parent. So yes, first thing to do is turn off the scrollbars on the VBox, assuming you can't just get rid of the VBox altogether. (I'm guessing you want the VBox so that you can put a title or something under the image as a next step)
The List as you have it specified is sized to 100% of its parent, the Panel, which is itself sized to 100% of its parent. Rather than size these elements "top down", consider letting their width be unspecified so that Flex will compute their required width bottom-up. Use maxWidth on the List or the Panel constrain their size if you need to for laying them out relative to their peers.
Another important thing to know about is the "minHeight=0" trick. Turns out, the sizing algorithm used by Flex behaves quite differently when minHeight or minWidth is set to something other than the default NaN. Setting it to 0 is extremely useful in many of these cases. Try minWidth=0 on the VBox and/or the List.
In addition to turning off the scrolling policy, set left and right to 0. That should anchor the width to the width of the parent.
I have the following code in my flex project.
<mx:Canvas id="scroller" styleName="myCanvas" width="635" horizontalScrollPolicy="off" y="60" height="370" >
<mx:Canvas id="thumbContent" width="635" verticalScrollPolicy="off"
horizontalScrollPolicy="off" y="0" backgroundColor="#00ff00"
backgroundAlpha="0" height="370"/>
</mx:Canvas>
</mx:Canvas>
I want to dynamically add different items to thumbContent canvas and use scroller canvas to scroll. I see than the height of thumbContent bigger than 7977 it truncate from scrolling.
So - I see the scroller canvas with empty space on top. Then I scroll to bottom - I see the content of thumbContent and at bottom scrolling I see empty space too.
It looks like thumbContent is under hidden mask, is this correct?
Looks like you want thumbContent to expand dynamically as you add content. In this case, you need to remove the height attribute from thumbContent, otherwise it will want to cram more content into it than it can hold, especially if the H and V scroll bars are off.
Keep the height attribute for scroller, though, because that's what you want to use to scroll (fixed dimensions).
Also, use percentages in your application. make thumbContent width="100%" if you want it to fill up the entire width of scroller.