[flexcoders] Re: New to flex, wonder why one works and the other doesn't...

[aarhac]

Excellent, thanks very much for the responses. 

As an aside, I did solve the problem by using the bitmap classes
instead as they seemed to have more consistent behavior. (And I
couldn't find a straightforward way to copy the image data with the
Image class)

Michael and Joseph, that makes perfect sense and is reproducible;
setting an explicit width and height causes the image to show as expected.

Thanks very much for the enlightenment.

-- Aaron Hachez

--- In flexcoders@yahoogroups.com, Michael Labriola [EMAIL PROTECTED]
wrote:

 
 Close, but no.
 
 In Flex, parents are responsible for sizing their children. Flex 
 Containers (which are just UIComponents with more code) do size 
 their children, but you can also create UIComponents that know how 
 to size their children. 
 
 Neither a container, nor a component that implements a container 
 interface needs to be involved in any way to handle this. That is 
 the fallacy I am addressing.
 
 Look at the example I provided and you will not see a Container or 
 implementor of that interface.
 
 In other words: 
 * UIComponents can contain other UIComponents. 
 * Containers are UIComponents which know how to automatically size 
 their children through the component lifecycle
 
 Does this make sense?
 Mike
 
 
 
 --- In flexcoders@yahoogroups.com, Joseph Balderson news@ wrote:
 
  In other words, UIComponents /can/ natively contain other 
 UIComponents, 
  only the child UIComponent will by default have a 0 width and 
 height.
  
  Which it means it won't show up on the stage. Which means, by 
 default, 
  you cannot get a native (non-extended) UIComponent to show up when 
 you 
  add it to another UIComponent. Which means you cannot 
 (successfully) add 
  a native UIComponent to another UIComponent.
  
  Thanks for catching the technicality, as a writer I love that kind 
 of 
  precision.
  
  But basically what Charlie was saying is correct: UIComponent's 
 can't 
  contain other UIComponents without being a subclass of Container 
 or 
  implementing the IContainer interface. -- only he forgot to 
 add 'and 
  have them successfully show up on stage'.
  
  So you're both correct IMO. Thanks for the clarity.
  
  
 _
 __
  
  Joseph Balderson | http://joeflash.ca
  Flex  Flash Platform Developer | Abobe Certified Developer  
 Trainer
  Author, Professional Flex 3 (coming Winter 2008)
  Staff Writer, Community MX | http://communitymx.com/author.cfm?
 cid=4674
  
  
  
  Michael Labriola wrote:
   Guys, sorry, but that's not quite right. UIComponents can 
 contain 
   other UIComponents without being a container. It is a common use 
   case. Take a look at the simple example Adobe includes with 
 their 
   docs:
   
   
 http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/js/html/wwhelp.h
   tm?href=1742.html
   
   You will notice that the mocal text component is a UIComponent 
 but 
   it contains a button and a text area... both UIComponents.
   
   The difference is that containers like Canvas have the logic to 
 size 
   and position any child they contain by default. UIComponent does 
   not. So, in a UIComponent descendant, you need to write code to 
 size 
   and position every child or they will exist as 0 width and 0 
 height 
   component.
   
   HTH,
   Labriola
   
   
   --- In flexcoders@yahoogroups.com, Charlie Hubbard 
   charlie.hubbard@ wrote:
   Right.  Image is a UIComponent, and TextArea is a UIComponent.
   UIComponent's can't contain other UIComponents without being a
   subclass of Container or implementing the IContainer 
 interface.  
   Not a
   simple task.
  
   addChild() is defined in DisplayObject which apart of the Flash 
 API
   not the Flex API.  BitmapAsset is a sublcass of DisplayObject 
 and 
   not
   UIComponent.  So you can add it to the text area directly using 
   this
   code:
  
var img : BitmapAsset = new imgCls() as BitmapAsset;
img.x = txtArea.mouseX;
img.y = txtArea.mouseY;
txtArea.addChild( img );
  
   Now, try that out, and you'll start to see some issues that 
 you'll
   have to asess if this is going to work for what you're trying 
 to 
   do.
   Since the bitmap is not apart of the document in the TextArea 
 you 
   are
   going to get clipping or scrolling.  If you want to do that 
 you'll
   have to get really dirty with the TextArea API.  Probably even
   ditching TextArea altogether and writing your own, or modifying 
   rich
   text editor.
  
   Charlie
  
  
   On Thu, May 29, 2008 at 5:37 PM, aarhac aaronh@ wrote:
   Hello,
  
   I have figured out how to work around my problem, but I do 
   wonder why
   one of the following methods works, and the other doesn't. I 
   would be
   grateful if someone could explain the error in the failing 
   method.
   The code is pasted below (Below the line of dashes) in it's 
   entirety,
   and is commented as to which works and which

[flexcoders] New to flex, wonder why one works and the other doesn't...

[aarhac]

Hello,

I have figured out how to work around my problem, but I do wonder why
one of the following methods works, and the other doesn't. I would be
grateful if someone could explain the error in the failing method.

The code is pasted below (Below the line of dashes) in it's entirety,
and is commented as to which works and which doesn't.

The image referenced in this case is a 32x32 pixel png file on my
local system. I am attempting to display the image on a text area.

Using the default example from the flex documentation to embed an
image, I cannot get the image to show up when added to the text area's
display list, but it does show just fine when added to the root
display list. I also added the image to the textArea using
addChildAt(txtIcon, txtArea.numChildren) with no change in effect.

The second method works just fine. I imagine that the problem has
something to do with applying the image as a byte array to
image.source, but I wonder why exactly? Is this a bug?

Thanks in advance,

--Aaron



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

!--Works--
mx:Image id=txtIcon source=@Embed(source='c:/icon.png')/

mx:TextArea id=txtArea width=400 height=200 click=addImage()/

mx:Script
![CDATA[
import mx.controls.Image;
import mx.core.BitmapAsset;

// Doesn't work
[Embed(source=c:/icon.png)]
[Bindable]
public var imgCls:Class;

public function addImage():void
{
// Doesn't work
var loadedImg:Image = new Image();
loadedImg.source =  new imgCls() as BitmapAsset;

loadedImg.x = 10;
loadedImg.y = 10;
txtArea.addChild(loadedImg);

// Note: While the above doesn't work, adding the 
// image to the root display list does work:
//addChild(loadedImg);

// Works
txtIcon.x = 50;
txtIcon.y = 10;
txtArea.addChild(txtIcon);
}
]]
/mx:Script

/mx:Application