Does the depth property apply only to Spark components? When I apply it to a non-spark container it doesn't change anything.
<mx:VBox height="100%" width="30" id="minimizeContainerLeft" clipContent="false">
</mx:VBox>
I used depth on a non Container and it worked. I used it with images. I set the depth of the element I wanted to 1 and the depth of the others to 0.
container.getElementAt(oldValue).depth = 0;
oldValue = val;
container.getElementAt(val).depth = 1;
This way I bring the one image to the front and the other to the back.
Related
As stated, I'm trying to obtain column headers consisting of an icon and wrappable text in a flex AdvancedDataGrid.
(EDIT: I forgot to mention an important part of the context: the columns are added dynamically, in actionscript. This apparently changes the behavior.)
I've tried using a custom mxml headerRenderer, like so:
<mx:headerRenderer>
<fx:Component>
<mx:HBox width="100%"
height="100%"
verticalAlign="middle">
<mx:Image source="<image_url>"
width="10%"
height="100%"/>
<mx:Text text="{data.headerText}"
width="90%"
height="100%"/>
</mx:HBox>
</fx:Component>
</mx:headerRenderer>
but for some reason, the text here is truncated instead of wrapped (it works outside of a renderer).
I've also tried creating a subclass of AdvancedDataGridHeaderRenderer and overriding createChildren to add the icon:
override protected function createChildren():void
{
var icon:Image = new Image();
icon.source = <image_url>;
icon.width = 16;
icon.height = 16;
addChild(icon);
super.createChildren();
}
but then, the icon and the text get superimposed.
I'm out of ideas on this. Anyone else?
It worked for me when I removed the height="100%" attribute from mx:Text in your headerRenderer.
UPDATE: it only works like this when I manually stretch the AdvancedDataGrid component. I'll look into how to make it work unconditionally.
When the height of the Text component was set to 100%, it was constrained to its parent HBox's height. Therefore when a word was wrapped and moved to the next line, it wasn't visible because the height of the Text component didn't allow for it to be visible.
If you remove this constraint, Text component's height will be determined dynamically based on its contents, as will headerRenderer's. Also add minHeight to your Text so that it is visible when it's loaded.
Here's the code (I also removed scrollbars because they were showing during resize):
<mx:headerRenderer>
<fx:Component>
<mx:HBox width="100%"
height="100%"
verticalAlign="middle"
horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:Image source="<image_url>"
width="10%"
height="100%"/>
<mx:Text text="{data.headerText}"
width="90%"
minHeight="20"/>
</mx:HBox>
</fx:Component>
</mx:headerRenderer>
In case anyone is interested in how to do this with dynamically created columns, a combination of Hunternif's code for the renderer and some added code on column creation worked for me:
The columns need to have fixed widths and need to be invalidated to inform the AdvancedDataGrid that it needs to rerender:
var cols:Array = [];
for each (...) {
var column:AdvancedDataGridColumn = new AdvancedDataGridColumn();
...
// Fix the width of created columns
column.width = 150;
cols.push(column);
}
grid.columns = cols;
// Invalidate columns so that sizes are recalculated
grid.mx_internal::columnsInvalid = true;
// Take changes into account
grid.validateNow();
I have a Vgroup with some components aligned par with its layout properties(vertical). I need to add one more component at an absolute X,Y position, overriding the alignment. I tried includeinlayout=false, but the component turns invisible then. Is it possible in flex?
No, this is not possible. A VGroup will ignore properties such as X, and Y. IF the component is visible, then includeInLayout is also ignored.
You'll have to layout your extra component outside of the VGroup, or switch to a Group and layout everything absolutely.
It is not possible! But you always can get global coordinates of the needed DisplayObject and show some PopUps or other components near to this target.
MXML:
<s:VGroup x="50" y="50">
<s:Button width="250" height="250" id="b1"/>
<s:Button width="250" height="250" id="b2"/>
</s:VGroup>
<s:Button id="addon"/>
AS:
var rect:Rectangle = b2.getBounds(this);
addon.x = rect.x + rect.width - addon.width;
addon.y = rect.y;
I am currently modifying a flex GUI to give it a new look. I am new to flex but I manage to get most of the work done. However I have a problem with comboboxes: I use a rather big font size and the bottom of some characters is truncated ("g" for example, or any character going under the baseline):
I first thought it was a problem with the component height, but even with a very large height the characters got truncated, with big empty spaces above and under the text.
I looked for a solution on the net but did not find one. Worst: I was not able to find references to my problem though it seems to be an important one. Is there a CSS property to prevent this behavior or do I have to look elsewhere?
edit: I use Flex 3 and Halo/MX components
The combobox component contains an inner TextInput. You have to extend the ComboBox class and modify the height of the textinput to what you need.
For example, lets say you put a font size of 20 and this extended class:
public class MyCb extends ComboBox
{
public function MyCb()
{
addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
}
private function onCreationComplete(e:Event):void {
this.textInput.height = 40;
}
}
Main application:
<mx:VBox width="100%" height="100%">
<mx:ComboBox fontSize="20" >
<mx:dataProvider>
<mx:Object label="goubigoulba"/>
<mx:Object label="goubigoulba"/>
</mx:dataProvider>
</mx:ComboBox>
<local:MyCb fontSize="20" >
<local:dataProvider>
<mx:Object label="goubigoulba"/>
<mx:Object label="goubigoulba"/>
</local:dataProvider>
</local:MyCb>
</mx:VBox>
You will get the following result:
I believe that this is not the Comobox itself, but its internal label. You can try setting paddingBottom, to see if the label will inherit that, but you might have better luck creating your own subClass of label and using it as the textFieldClass.
I'm not sure if this is possible, is there a way to get the <mx:Form> to set its own height based on the position of an element within it?
For example something like this:
<mx:Form height="{submitBtn.y + submitBtn.height}">
<mx:FormItem>... </mx:FormItem>
<mx:FormItem>... </mx:FormItem>
<mx:FormItem>... </mx:FormItem>
<mx:FormItem>
<s:Button id="submitBtn" label="Submit" />
</mx:FormItem>
</mx:Form>
where the form height is dynamically set based on submitBtn's y position and its height.
I tried using Alert.show to show these values and turned out submitBtn.y = 0 and submitBtn.height = 21. height sounds reasonable, but I know the submitBtn.y can't be 0 since it's below several other
Is it possible to set the form height dynamically?
Yes. Do it in the measure method:
private var n:Number = 0;
override protected function measure() : void {
super.measure();
if (submitBtn) {
var fi:FormItem = FormItem(submitBtn.parent);
n = fi.y + fi.height;
}
}
Then just set the height to n.
Edit: I changed this to specify the containing FormItem, not the button, which is what I tested in my own sample code first. You can either get the button's parent or give that FormItem an ID. But this way does work.
your submitBtn.y will always return 0, since it's the y position inside the mx:FormItem element (like the relative y position)
So as I guess you want to set the y position of a form based of the y position of a button inside the form. why do you want that ?
check out the localToGlobal() method available to all children of DisplayObject. It will convert your x,y coordinates to the global x,y. You should be able to use this in your calculations.
I hope that thread is not closed cause I just have had the same problem like you and found the correct solution, so I will try to explain.
Whenever my application starts it reads a file and parse it, containing some information that will fit some forms, and I create them dynamically without specificating any height or width.
I add them to a viewStack like this:
<mx:ViewStack id="viewStack" resizeToContent="true">
</mx:ViewStack>
that is inside a component to show Information for some items, depending the class of the item one of the form is shown fitting the necessary information in.
As you can notice, the viewstack has inside a property resizeToContent that when I select an item from a datagrid, the viewstack changes the selectedIndex (indicating another form) and automatically changing its size resizing to the new content.
If for some reason you need the height of the form, you can use, instead of measure(), the measuredHeight property.
I will add some of the code used for you to understand:
onCreationComplete(){
...
for each (var form:Form in DataModel.getForms())
{
viewStack.addChild(form);
}
...
}
I need to programmatically add a set of controls with some amount of pixels between them. I can't seem to find how to do this in the Flex docs. How can I do it?
Most Containers have some logic to place the items for you, e.g. vertically or horizontally. I.e. if you want to place them horizontally with 5 pixels of space you would use a HBox (VBox for vertical layout):
<mx:HBox horizontalGap="5">
<Component1/>
<Component2/>
<etc.../>
</mx:HBox>
Or script:
...
var box: HBox = new HBox();
box.horizontalGap = 5;
box.addChild(new Component1());
box.addChild(new Component2());
addChild(box);
But if you want to place them yourself using x,y coordinates (i.e. absolute positioning) you can use Canvas:
<mx:Canvas>
<Component1 x="100" y="100"/>
<Component2 x="100" y="200"/>
<etc.../>
</mx:Canvas>
script version:
var canvas: Canvas = new Canvas();
var component1: Component1 = new Component1();
component1.x = 100;
component1.y = 100;
canvas.addChild(component1);
var component2: Component2 = new Component2();
component2.x = 100;
component2.y = 100;
canvas.addChild(component2);
Inside a container with absolute positioning, e.g. Canvas, you can position elements with x and y (or right, left, top, bottom)
elem.x = 100;
elem.y = 200;
canvas.addChild(elem);
You can also use Spacer to add some space in between components.
<mx:HBox>
<Component1 />
<mx:Spacer width="10" />
<Component2 />
</mx:HBox>
If your window can be re-sized, absolute layout is not recommended - It may be a good idea to use width="100%" and height=100% and then use the minHeight/minWidth/maxWidth etc.
In your case, you could set the minimum width/height of the spacer (between 2 components) so that the page scales proportionately.