Instantiate MXML component in actionscript - percent sizing issues

Hey guys,
I'm busting my head trying to sort out this issue.
I have a MXML custom component which is being instantiated in
actionscript, e.g.:
component:CustomComponent = new CustomComponent();
The custom component extends Canvas (i.e. the root XML tag is
a Canvas). Inside the component is another Canvas that wraps the
children so they can be laid out using constraint-based
measurements (e.g. top, left, right, bottom).
The component is then added to a VBox through
addChild(component).
Here's the problem - the component doesn't appear on the
screen. It's because it's not getting a width and height set
correctly. If I bind the Canvas inside it to
height="{parent.height}" and width="{parent.width}", then it
appears correctly. The problem with this is that the compiler warns
me that the binding won't be able to detect changes to the parent
sizes. This sux when I launch full screen mode because it doesn't
expand to fill the VBox (which sizes correctly).
Is there something I'm missing here? How does the percentage
based widths and heights get applied? Perhaps there's a breakdown
in the flow or something.
Thanks!!

Thanks Peter, but I've given that a go already.
I'm looking into trying to get the component instantiated
through MXML, and then returning it using it's ID. If another
container addChilds it, then the component will be removed from the
(temporary) display list it was previously added to (simply for
instantiating), correct?
I think these layout issues are only when I instantiate it in
actionscript, but further poking should reveal the truth....

Similar Messages

How to import MXML Component in ActionScript

Hello,
I'm having a structure similar to this:
root
   - components
       - subcomponents (MyCustomMXMLComponent)
   - views
In views package I have a piece of AS where I want to instantiate an MXML Component from subcomponents.
In Views:
var data:DisplayObjectContainer=new components.subcomponents['MyCustomMXMLComponent'];
But that throws an error.
I need a syntax similar to the one above because I'm running a for loop and changing data variable to be a new MXML component on each iteration.
Any idea how I can solve this?
Thank you.

OK, so:
var length:int=arrSubcomponents.length;
for(var i:uint=0;i<length;i++)
          //Decide parent
          var parent:IVisualElementContainer;
          if(arrSubcomponents[i].group && arrsUbcomponents[i].group==1){parent=firstGroup;}
    else{parent=secondGroup;}
          //Add to parent
          var childClassName:String='components.subcomponents.'+arrsUbcomponents[i].className;
          trace(childClassName);//So far so good the path is correct, I checked.
          var childClass:Class=Class(getDefinitionByName(childClassName));
          trace(childClass);//It breaks here with the error below
          var child:IVisualElement=new childClass() as IVisualElement;
          trace(child);
          parent.addElement(child);
The error:
ReferenceError: Error #1065: Variable FirstCustomMXMLComponent is not defined.
          at global/flash.utils::getDefinitionByName()

Event in ActionScript Class not accessible by MXML Component

I am implementing an ActionScript Class in my MXML Component,
but it can't see the Event I'm specifying. I'm getting the
following Error when I compile my application:
Cannot resolve attribute 'myEvent' for component type
myClass.
How do I make the Event available to the MXML component?
Thanks.

Guess the compiler has a problem with semi-colons after the
Event declarations. I removed the semi-colons, and was able to
compile.

Loading an "MXML Component" at run-time creates a null object.

Hello!
I have a simple Flex 3 project with an MXML application file (the parent) and an MXML component file (the child).
At run-time I create childs of this component, and I add it to the stage using a simple "this.addChild()" call.
Now, besides that, in the creation loop, after every
newChild = new mcComp();
I want to setup a few more custom parameters which belongs to this class. For example, now I want to set a label's text, this label is at the child.
The issue is that the label isn't created until I exit the creation function, and actually, until my code returns control to the Flash Player.
See my problem here?
With custom classes which resides at .AS files, when I instantiate them with the "new" operator, they run their constructure's code and eveything is fine.
But, when I do the same with those MXML components (which by the way are based over the Canvas class), their constructure do not execute and actually no other child of them is created.
Can anyone please advise? I must be missing some keyword here.. hopefully.

Hi Natasha thanks,
The issue is that the creationComplete event doesn't dispatch even when I addChild() the object.
var child:mcChild = null;
for(var i:int; i < 3; i++)
     child = new mcChild();
     // setting some properties, labels' text etc'
     this.addChild(child);
Try this and you'll see - the event doesn't dispatch until you got out of the code flow.
Anyway after looking at Flex's documentation I solved it differently;
After the addChild() call the child receives an "initialize" event. After that I could modify my label.
Thank you though!

Interface not found in implements-attribute for MXML component

Hi,
I am trying to use the "implements" attribute for an
MXML-component in order to implement an interface from a library
like below (Flex 3). I get the error "Interface IClonable not
found". The compiler does not complain about " import
com.yworks.support.IClonable;", so the library is installed
correctly. I use the library in many places in my project, it just
does not find it in the "implements" tag. How can I fix this
without reimplementing the component in ActionScript?
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
implements="com.yworks.support.IClonable">
<mx:Script>
<![CDATA[
import com.yworks.support.IClonable;
]]>
</mx:Script>
</mx:VBox>

"mavdzee" <[email protected]> wrote in
message
news:gldjg8$js8$[email protected]..
> Hi,
>
> I am trying to use the "implements" attribute for an
MXML-component in
> order
> to implement an interface from a library like below
(Flex 3). I get the
> error
> "Interface IClonable not found". The compiler does not
complain about "
> import
> com.yworks.support.IClonable;", so the library is
installed correctly. I
> use
> the library in many places in my project, it just does
not find it in the
> "implements" tag. How can I fix this without
reimplementing the component
> in
> ActionScript?
>
>
> <?xml version="1.0" encoding="utf-8"?>
> <mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
> implements="com.yworks.support.IClonable">
>
> <mx:Script>
> <![CDATA[
>
> import com.yworks.support.IClonable;
>
> ]]>
> </mx:Script>
>
> </mx:VBox>
I don't see anything where you're actually _implementing_ the
interface, but
I'd expect to see a different error if that's the problem.
Still, I'd go
ahead and implement the properties and methods in the
interface, just to
make sure.
HTH;
Amy

Mxml component application

Hi all,
I am converting a asp.net website to Flex, I have five web pages which I designed as Five mxml components have buttons, grid, combos, text boxes etc.
my question is how do I move between these pages they are distinct in there looks and functionality. I read a lot about view states and I am confused whether view states will solve my issue.
Please tell me how do we handle this usually in flex applications.

Hi,
Flex 4 or Flex 3 the answer remains the same, I have a state for each form then I place a container, be it a group a canvas or a panel, in each state to show how states work, the following is in flex 3
The Application
============
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" currentState="form1" xmlns:ns1="*">
<mx:states>
<mx:State name="form1">
<mx:AddChild position="lastChild">
<ns1:form1 horizontalCenter="0" verticalCenter="0">
</ns1:form1>
</mx:AddChild>
</mx:State>
<mx:State name="form2">
<mx:AddChild position="lastChild">
<ns1:form2 horizontalCenter="0" verticalCenter="0">
</ns1:form2>
</mx:AddChild>
</mx:State>
<mx:State name="form3">
<mx:AddChild position="lastChild">
<ns1:form3 horizontalCenter="0" verticalCenter="0">
</ns1:form3>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Button label="Form 1" click="currentState='form1'" top="10" horizontalCenter="-150"/>
<mx:Button label="Form 2" click="currentState='form2'" top="10" horizontalCenter="0"/>
<mx:Button label="Form 3" click="currentState='form3'" top="10" horizontalCenter="150"/>
</mx:Application>
The Mxml Component Container (which is exactly what you said you had)
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" title="First Form">
</mx:Panel>
You can navigate through your 'pages' however you want to, the first example I offered is pure flex the above code is pure flex only using the antiquated sdk which I would advise against for 'new' projects, flex 3 sdk maybe used in flashbuilder but I would only go to this for legacy purposes using the flex 4 sdk is by far the better option.
I try to help where I can, there is no reward for doing this, but I did answer your initial question about states, I hope you get to understand flex a little better with time.
David.

Changing mxml UIComponents with Actionscript

Hello,
i´m searching about a way to change the text of labels createtd with Designer by Actionscript. But i try to browse the entire collection to find all used UI-Components.
If i use the debugger, i can see an mxmlContent Array with all Components but i can´t use theses in Actionscript.
Regards
Thomas

Hi David,
thanks for the reply, but that is not, what i want.
I´m searching about a solution to browse the complete mxml component list in Actionscript.
We will change the labels of all items by runtime with data from a cfc (Coldfusion component) without hard coding the labels in Actionscript. I need a readable collection of all UI-Components to read the id´s, comparinge these with the cfc datasource and change these with other data from this source.
As i say, the Applipcation.mxmlContent (or any Group.mxmlContent) has all these properties. Baut i can´t use mxmlContent in Flashbuilder because i got an error, that this property is not defined instead i can read that in the debugger.
Thomas

Dynamically add custom MXML components in Actionscript

As there's no constructor for custom MXML components, how to
dynamically add it as a child using ActionScript?
I'm looking for some alternative to avoid the need to rewrite
the entire existent component in ActionScript just to add it this
feature (a constructor). PopManager is not an alternative...
Is there any way?
The case/situation:
I have a custom MXML component that needs to be dinamically
added to a NativeWindow created using ActionScript.
Thanks a lot!
Vicente Junior
Independent Web Developer
http://teclandoalto.blogspot.com

mxml classes get generated into AS classes with a default
constructor.
In fact, there is essentially no difference between an AS
component and an mxml component, they can be used exactly the same
way.
Tracy

How to add interface to customlize MXML Component when use Flex Builder 3?

How to add interface to customlize MXML Component when use
Flex Builder 3?

David,
I don't believe you can add the interface via the creation
dialog in FlexBuilder 3. You can always manually add the
"implements" property to your MXML Component root tag. Something
like this: <mx:VBox implements="com.mycorp.IMyInterface">
If you want autogeneration of the interface, then create an
ActionScript class with that interface and then copy the generated
functions and setter/getters into the script block of your MXML
component.

Dynamic addition of MXML Component

Is it possible to add an MXML component through an ActionScript.
I have a situation where I display multiple checkboxes and on click of each I show a subform. I am planning to make that subform as MXML component and add/remove it based on the user's checking/unchecking the checkbox..Is this possible?
Thanks
Dharmesh

Hi Ben ..
     Appreciate your quick response. This is my first Flex app. In a nut sheel here is a sample similar to what I am trying to achieve.
Consider my Mxml component as follows
<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
    <mx:Button label="Hey there from component"/>
</mx:Canvas>
Now here he my app mxml file
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    xmlns:temp="mycomponents.*">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            public function addRemove():void{
                //How do i add that component to the Panel?
        ]]>
    </mx:Script>
     <mx:Checkbox id="cb" change="addRemove()" label="Check or Uncheck"/>
     <mx:Panel id="testPanel" x="0" y="0" width="100%" height="200" layout="absolute" borderThickness="0" borderThicknessBottom="0"/>
Can you guide me what should go in the listener to add the component to the panel?

Error when using instantiated mxml component in popupmanager

Hi,
Im getting the following error when trying to create a popup:
Error #1007: Instantiation attempted on a non-constructor
The code looks as follows
var browserPop:CustomBrowser = new CustomBrowser();
browserPop.targetType = "file";
browserPop.fileType = "jpg";
var pop:TitleWindow =
PopUpManager.createPopUp(this,browserPop as Class, true) as
TitleWindow;
Where CustomBrowser is an MXML component extending
TitleWindow.
If i use:
var pop:TitleWindow =
PopUpManager.createPopUp(this,CustomBrowser, true) as TitleWindow;
it works fine but i need to be able to set some public
properties and therefore instantiate it first. Any help would be
appreaciated.
Thanks in advance
Eric

Create you component using the popupmanager, then cast it to
the
specific type to access it's public methods and/or variables.
Like so for mxml component ExceptionPopup:
var popup:IFlexDisplayObject;
popup =
PopUpManager.createPopUp(_parentPanel,ExceptionPopUp,true,null);
(popup as ExceptionPopUp).addRecords(ev.errorMessage);
(popup as ExceptionPopUp).title = "title";
(popup as ExceptionPopUp).userText.text = "some user text"
PopUpManager.centerPopUp(popup);

How to create package access MXML component?

Hi
In ActionScript we can create an internal class which can be referenced by the classes in the same package.
How can we create the MXML component which can be referenced by the others in the same package?

Packager Links https://forums.adobe.com/thread/1586021

Capture event from mxml component

I have an accordian control in my main mxml application. Each
item in the control is a custom mxml component that I created that
consists of a label and some text. When the label is clicked, I
need to fire off a message to the containing application with a
string value. I'm not sure how to do this. Here's what I have right
now. I'm not sure if I'm going down the right track but if I am,
how do I pass the string argument with the event and then capture
this event and the argument in the main application?
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="
http://www.adobe.com/2006/mxml"
width="200">
<mx:Script>
<![CDATA[
private var _title:String = "";
private var _desc:String = "";
[Inspectable(defaultValue=true)]
public function set Title(title:String):void{
_title = title;
public function set Description(desc:String):void{
_desc = desc;
private function SetMovie(url:String):void{
dispatchEvent(new Event("MovieTitle"));
[Bindable(event="MovieTitle")]
]]>
</mx:Script>
<mx:VBox>
<mx:Label id="lblTitle" text="{_title}" width="190"
click="SetMovie('testmovie.flv');/>
<mx:Text id="txtDescription" text="{_desc}"
width="190"/>
</mx:VBox>
</mx:Canvas>

You have several issues, and several options here. First, a
custom event can pass any data you want, and is not very hard to
create.
However, there is a still easier way. All of the Event
objects have a "target" and "currentTarget" property which give you
a reference to the object that dispatched the event.
So, in your component, implement a public property, say like
this:
public function get Title():String{
return _title;
then in a handler function you can do:
private function onMovieTitle(event:Event):void {
var sMovieTitle:String = event.currentTarget.Title; //watch
out for reserved words, though
There are two ways to listen for an event. One easy way is to
use a bubbling event. Some folks advise against bubbling event
because of potential event name collisions, but this may not be a
concern for you. It has not yet concerned me enough to make me
avoid using bubbling.
The other way is to declare handler on the component itself.
Also, if you use a metadata tag, you can assign the handler on the
mxml tag, instead of using addEventListener():
<mx:Canvas xmlns:mx="
http://www.adobe.com/2006/mxml"
width="200">
<mx:Metadata>
[Event(name="MovieTitle", type="flash.events.Event")]
</mx:Metadata>
<mx:Script>
Then, in you main app:
<myComp id="mc1" ... MovieTitle="onMovieTitle" ...
Without the metadata, you would do
mc1.addEventListener("MovieTitle",onMovieTitle)
Using a bubbling event:
change the dispatchEvent to this:
dispatchEvent(new Event("MovieTitle",true)); //the 'true'
makes it bubble
Then, in the main app, listen ON the main app(this):
this.addEventListener("MovieTitle",onMovieTitle);
Tracy

Accessing dataprovider from mxml component.

Hi,
I have a dataprovider and would like to access the data from mxml component.
Basically I have
Actionscript:
Bindable]
private var dp:ArrayCollection;
private
function dp_handler(e:ResultEvent):void
dp = e.result as ArrayCollection;
I wanted to access dp from mxml component using
<mx:script>
<![CDATA[
mx.core.Application;
lbl.text = Application.application.dp.getItemAt(0).fieldname;
]]>
<mx:Label
id="lbl" x="51" y="136" />
It keeps telling me dp is unknow property. Any idea what am I doing wrong?

Thanks Greg. That fixed it!

Convert mxml component to an AS class?

I just made a custom MXML component ("ProjectImage.mxml") and
expected to be able to instantiate instances of it from AS scripts
like so:
var newImage:ProjectImage = new ProjectImage();
(this is within an <mx:Script> block in Flex, and I've
explicitly imported the component.)
but apparently this doesn't work (got "Access of possibly
undefined property source through a reference with static type
customComp.views:ProjectImage.") Is there any easy way to convert
my mxml component to an AS class without writing it from scratch?
Flex does this anyway at runtime, yes? So it seems like it should
be able to do it on command....
Any help would be appreciated. Thanks!

Ok, I realized I was making another mistake and that the mxml
component works just fine being instantiated from AS. It'd still be
nice to know how to get a look at AS classes generated from custom
components though...

Instantiate MXML component in actionscript - percent sizing issues

Similar Messages

Maybe you are looking for