why does the button show up when I add it to the Flex application root, but now when

[ejansson]

I'm returning to Flex after about 3 years away from ActionScript, and can't seem to make a few basic things happen. Love Flex's design, but I'm frustrated by basic things right now, and reading the chapter on interface building in Flex did not help.

This application illustrates one problem I can't figure out: why does the button show up when I add it to the Flex application root, but now when I add it to the UIComponent.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >

<mx:Script>
<![CDATA[
import mx.controls.Button;
import mx.containers.Canvas;
import Game;

protected var game:Game;

protected function init():void
{
var b1:Button = new Button();
b1.label = "Button One";
b1.x = 50;
addChild(b1);

var b2:Button = new Button();
b2.label = "Button One";
holder.addChild(b2); // button does NOT show up
//addChild(b2); // button shows up
}

]]>
</mx:Script>

<mx:UIComponent id="holder" width="300" height="300" creationComplete="init()"/>


</mx:Application>


Thanks for any help!

EJ

[rawmantick]

Welcome to the forum

Try to use not UIComponent class (which is actualy some kinda basic class for other classes to be inhertied from).

Use <mx:Canvas> for example. Or <mx:HBox>.

I don't exactly know what's wrong with that, but UIComponent is like functionaly incomplete. It has something wrong with measuring. Once I was trying to do similar thing. The button did appeared. Bit it was 1x1 pixel sized... UIComponent for is extending it, and giving it full functionality. Not for direct use...

Correct if I'm wrong...

[Peter Cowling]

The problem is that UIComponent (UIC) is not a container - like Canvas etc.

UIC does include the layout algorithm, and things like scrolling and clipping. IOW, it contains the things all components commonly require.

It does not, however, have things which are deemed as a choice. So no historymanager or a dataprovider etc. Your problem almost certainly lies with one of those choices not being present, namely the ability to aggregate MXML-specified children. (You can add children to a UIC, but not directly.)

UIComponent is usually Extended to act as a base on which to build a custom component.

__________
Exemplars Gallery (http://www.exemplars-gallery.com)

[dr_zeus]

As has been mentioned by others, a container like Canvas, HBox, or VBox is better because they automatically set the size of your component. When you use UIComponent directly, it's up to you to set the size of its subcomponents because its meant as a base class for building custom components.

This may be too much information for your particular question, but it might be helpful for someone else who's having trouble in the future and finds this thread. I've seen many questions about sizing with UIComponent in my time, and this part isn't immediately obvious.

To set a child component's size without making it stop normal measurement, you use setActualSize() in your override of updateDisplayList() is where a custom component receives its final width and height values before drawing. If you set width and height directly, the child component will always use those values rather than determining its optimal size through measurement.

Here's an example:

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
var actualChildWidth:Number = Math.min(unscaledWidth, this.myChild.measuredWidth);
var actualChildHeight:Number = Math.min(unscaledHeight, this.myChild.measuredHeight);
this.myChild.setActualSize(actualChildWidth, actualChildHeight);
}

In the code above, the custom component has a child named "myChild". We want it to be displayed at its natural measured size, so we use measuredWidth and measuredHeight. These are values that get set in a component's measure() function. In our example, if the parent component is too small, then the child should not be larger than the parent, so we use Math.min() to determine of the parent component's unscaled size is better or the child components measured size is better.