MXML Component Layout

Is there a way for MXML Components to inherit their layout
based on where you place them in the Main Application?
For instance, I have the following sample MXML Components:
===============
MXML Component 1 - Name
<Base class of Component>
<FormItem label="First Name"><TextInput
id="firstName"></FormItem>
<FormItem label="Middle Name"><TextInput
id="middleName"></FormItem>
<FormItem label="Last Name"><TextInput
id="lastName"></FormItem>
</Base Class of Component>
===============
===============
MXML Component 2 - Address
<Base class of Component>
<FormItem label="Address"><TextInput
id="address"></FormItem>
<FormItem label="City"><TextInput
id="city"></FormItem>
<FormItem label="State"><ComboBox
id="state"></FormItem>
</Base Class of Component>
===============
===============
MXML Component 3 - Donation
<Base class of Component>
<FormItem label="Donation Amount $"><TextInput
id="donation"></FormItem>
<FormItem label="Payment Type"><ComboBox
id="PaymentType"></FormItem>
</Base Class of Component>
===============
Is there a way to get all the FormItems in the MXML
Components to line up when place in a Form container in the main
application like below? I have the problem of the MXML Components
needing a base class, usually a container or other DisplayObject,
but this screws up the layout in the main application.
<mx:Form>
<common:Name/>
<common:Address/>
<common:Donation/>
</mx:Form>
Thanks,
Bryan

No. layout is handled by the container. There is no built-in
way to inherit layout values.
Now, each container has its defualts. you cn set those
properties to "0" or whatever, to prevent nested containers from
messing with the layout.
Tracy

Similar Messages

  • Design mode troubles - "Error during component layout."

    Hi all.
    Since this is getting pretty annoying, I thought someone might know the right solution to this. Whenever I try to open Design mode on my AIR app (Spark + MX), I get:
    Design mode: Error during component layout. Choose Design > Refresh to refresh design mode.    MyTestApp.mxml    /MyTestApp/src    Unknown    Problem
    The MXML code for it is as simple as it can get:
    <?xml version="1.0" encoding="utf-8"?>
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                                xmlns:s="library://ns.adobe.com/flex/spark"
                                xmlns:mx="library://ns.adobe.com/flex/mx"
                                skinClass="spark.skins.spark.SparkChromeWindowedApplicationSkin"
                                >
    </s:WindowedApplication>
    And app descriptor XML only contains transparent set to true and systemChrome to none, even tho it shouldn't make any difference in the Design view anyway. Refresh doesn't solve the error, and sometimes the Design view itself goes into infinite loop of refreshing.
    However, if I remove the skinClass, it all works fine and Design view loads (but then I don't get the window chrome on run-time). Same goes if I declare the skin within <fx:Style /> tag, it only breaks when using skinClass attribute in the WindowedApplication declaration. And the same thing happens if I try to edit some of the Spark skins in the Design view.
    I've tried creating a new project, switching workspaces, building a blank workspace, switching from Flex SDK 4.1 to 4.0 - all to no avail, the same error always occurs and it never goes away.
    Any ideas?

    Instead of declaring the skin within the WindowedApplication tag, you have to call the Skin class from a Style tag right after you close your window tag:
    <?xml version="1.0" encoding="utf-8"?>
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    Xmlns:mx="library://ns.adobe.com/flex/mx"
    title="YOUR APP">
    <fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    s|WindowedApplication
    skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin");
    background-color:#999999;
    background-alpha:"0.7";
    </fx:Style>
    source: http://help.adobe.com/en_US/air/build/air_buildingapps.pdf

  • Loading MXML Component Dynamically

    Hi all,
    I am new to Flex and was trying out small things . I created
    a MXML Application and also MXML components.
    I tried loading MXML component to application using xmlns and
    it worked fine.(
    <mx:Application xmlns:mx="
    http://www.adobe.com/2006/mxml"
    layout="absolute" backgroundColor="#ffffff" xmlns:mi="com.*">
    <mi:base1 id="base1" />
    <mi:base2 id="base2" />
    This method is ok if we are loading 3-4 components .
    but , if i have to load a mxml component dynamically how do I
    do it?
    for example ,if base1 and base2 are two components and i want
    to load them based on some event performed.
    I have tried the method which uses ViewStack and code
    myViewStack.selectedChild=Container(myViewStack.getChildByName(selectedNode))
    ,where each child will have one component declared or initialized.
    Following this method is not a feasible when we have hundred
    of components to be loaded.
    Can anyone help me on this??

    "srirama.83" <[email protected]> wrote in
    message
    news:gpkoui$g3u$[email protected]..
    > Hi all,
    > I am new to Flex and was trying out small things . I
    created a MXML
    > Application and also MXML components.
    > I tried loading MXML component to application using
    xmlns and it worked
    > fine.(
    > <mx:Application xmlns:mx="
    http://www.adobe.com/2006/mxml"
    > layout="absolute"
    > backgroundColor="#ffffff" xmlns:mi="com.*">
    > <mi:base1 id="base1" />
    > <mi:base2 id="base2" />
    > )
    > This method is ok if we are loading 3-4 components .
    > but , if i have to load a mxml component dynamically how
    do I do it?
    > for example ,if base1 and base2 are two components and i
    want to load them
    > based on some event performed.
    >
    > I have tried the method which uses ViewStack and code
    >
    myViewStack.selectedChild=Container(myViewStack.getChildByName(selectedNode))
    > ,where each child will have one component declared or
    initialized.
    >
    > Following this method is not a feasible when we have
    hundred of components
    > to
    > be loaded.
    > Can anyone help me on this??
    >
    >
    http://www.magnoliamultimedia.com/flex_examples/Amys_Flex_FAQ.pdf
    Q4

  • 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.

  • 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"?>
    <!-- myComponents/TempComponent.mxml -->
    <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?

  • How to extend an AS3 class in an MXML Component

    Hello,
    I have a few MXML Components based on the Spark Group.
    They all use MXML for layouta and AS3 for logic.
    They all have the same logic and I would like all to extend an AS3 class to have the same methods and properties isteand of declaring the same exact ones for each MXML Component.
    How can this be done please?

    Hm, no, I'm not explaing this properly.
    I have an MXML component based on the Spark Group.
    It has a few form elements.
    There are many such components.
    I want all to have two public methods: getData() and setData() which get and set data from and to the input elements.
    I don't want to write the exact same method for all of them.
    I would like to at least interface the MXML components with an AS3 class forcing them to have those 2 methods.

  • Add change event to a custom MXML component

    I am building an MXML project in Flash Builder 4.5
    I have a custom MXML component that contains a TextInput field. I want the custom component to have a change event that triggers a function in the main application.
    I created a test project to try and solve this.  At the moment, it appears to trigger an event once and then stops.  Please take a look and let me know where I am going wrong. Many thanks.
    customComponent.mxml
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
               width="40" height="20">
        <mx:Script>
        <![CDATA[
            [Bindable]
            public var value:Number;
            protected function inputBox_clickHandler(event:KeyboardEvent):void
                if (event.keyCode == 38 ) {
                    keyUp();
                if (event.keyCode == 40 ) {
                    keyDown();
            protected function keyUp():void
                value = value++;
                dispatchEvent(new Event('change'))
            protected function keyDown():void
                value = value--;
                dispatchEvent(new Event('change'))
        ]]>
    </mx:Script>
    <mx:Metadata>
        [Event(name="change", type="flash.events.Event")]
    </mx:Metadata>
    <mx:TextInput id="inputBox" x="0" y="0" width="40" height="20"
                  text="{value}"
                  keyDown="inputBox_clickHandler(event)"
                  change="dispatchEvent(new Event('change'))"
                  />
    </mx:Canvas>
    main.mxml
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:CustomComponents="CustomComponents.*"
                minWidth="955" minHeight="600" layout="absolute">
    <mx:Script>
        <![CDATA[
            private function changeTestLabel():void
                testLabel.text = String(myComponent.value);
        ]]>
    </mx:Script>
    <CustomComponents:customComponent x="180" y="183"
        id="myComponent" value="0"
        change="changeTestLabel()">
    </CustomComponents:customComponent>
    <mx:Label id="testLabel" x="165" y="206" text="Test label"/>
    </mx:Application>

    I have found the solution to this...
    The clue was that it worked the first time a change was made, changing the value to the default '0'.
    The problem was that the var value is type Number and the inputBox.text is type String.
    I therefore added the following function:
      protected function textChange():void
       value = Number(inputBox.text);
       dispatchEvent(new Event('change'))
    I also changed the  change="dispatchEvent(new Event('change'))"  property to
       valueCommit="textChange()"
    ... and that fixed it..
    Thanks to all those who took the trouble to look at this

  • Design mode: Error during component layout. Choose Design Refresh to refresh design mode.

    Description Resource Path Location Type
    Design mode: Error during component layout. Choose Design > Refresh to refresh design mode. etPlayer.mxml /etPlayer/src Unknown Problem
    Refreshing wont work..
    any ideas?

    Some elements can cause the design view to break, it recently happened to me and this was my solution.
    I began by commenting out most of the visual elements from code and going back and forth to design view to try and get it working.
    Finally I narrowed it down to the "ToggleButtonBar" component. After I commented this line out the design view was up and running.
    This might not be the solution but it will get you back up and running.

  • Flex link to internal mxml component

    I have text.mxml component. that is showing me the following:
    <mx:DataGrid id="dgShowHistory" width="100%">
       <mx:columns>
        <mx:DataGridColumn headerText="ID"/>
        <mx:DataGridColumn headerText="Case Number"/>
        <mx:DataGridColumn headerText="Group Number"/>
        <mx:DataGridColumn headerText="Case Name"/>
        <mx:DataGridColumn headerText="Status"/>
       </mx:columns>
      </mx:DataGrid>
    Now the in the Case Number column I want to add a link to SearchCaseNumber.mxml...
    So lets say the Case Number has the following:
    Case Number
    1234
    1235
    1236
    I want these to be highlighted as link and when I click on these It takes me to the SearchCaseNumber.mxml put the 1234 automatically in search and if possible populate all the fields based on this.
    In SearchCaseNumber.mxml
    <mx:TextInput id="CaseSearch" width="81"/>

    I was trying to implement what you mentioned but I’m not an expert in the coding yet. Can you help me with the code and how it looks like?
    Here is my code… text.mxml
    <?xml version="1.0" encoding="utf-8"?>
    <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
                            layout="vertical"
                            width="1000"
                            height="800"
                            titleStyleName="popWindowTitle"
                            horizontalScrollPolicy="off">
    <mx:Script>
       <![CDATA[
          import mx.formatters.DateFormatter;
          import mx.managers.PopUpManager;
          import mx.containers.TitleWindow;
          import mx.controls.Text;
          import mx.controls.ComboBox;
          import mx.core.Application;
          import mx.utils.ArrayUtil;
         import mx.controls.Alert;
          import mx.collections.ArrayCollection;
          import mx.rpc.events.ResultEvent;
          import mx.rpc.events.FaultEvent;
          import mx.controls.dataGridClasses.DataGridColumn;
          import com.component.coverage;
          [Bindable]
          private var CaseNumber:ArrayCollection = new ArrayCollection();
          private function handle_recordCaseNumber(event:ResultEvent):void
                CaseNumber = event.result as ArrayCollection;
        ]]>
    </mx:Script>
                <mx:RemoteObject id="CaseNumberCreate"
                             destination="ColdFusion"
                             source="Text.cfc.CaseNumber"
                             showBusyCursor="true">
                <mx:method name="getCaseNumber"
                              result="handle_recordCaseNumber(event)"
                               fault="Alert.show(event.fault.message)"/>                     
                </mx:RemoteObject>
    <mx:DataGrid x="800" y="650" id="CaseNumberGrid" dataProvider="{CaseNumber}"  creationComplete="{CaseNumberCreate.getCaseNumber()}"
    height="639"
    width="823">     
       <mx:columns>
          <mx:DataGridColumn headerText="ID" dataField="ID"/>
          <mx:DataGridColumn headerText="Case Number" dataField="Case_Number"/>
          <mx:DataGridColumn headerText="Group Number" dataField="Group_Number"/>  
          <mx:DataGridColumn headerText="Case Name" dataField="Case_Name"/>
          <mx:DataGridColumn headerText="Status" dataField="Status"/>
       </mx:columns>
    </mx:DataGrid>   
    </mx:TitleWindow>
    My SearchCaseNumber.mxml looks like the following:
    <mx:Label text="Enter Case Number Here:" fontWeight="normal" textAlign="center"/>
    <mx:TextInput id="CaseSearch" width="81" fontFamily="Arial"/>
    <mx:Button label="Search" click="findCase()"/>
    private function findCase():void
                      if (CaseSearch.text == "")
                      Alert.show("Enter the Case Number", "Error");
                      else
                      roCreate.returnCaseInfo(CaseSearchSearch.text);
                      roCreate.returnGroupInfo(CaseSearch.text);
    Please let me know if you can help me… Thanks…

  • MXML Component State Question

    Hey guys,
    I am trying to simplify my code and break out different parts of the app into different MXML Component files.  I have taken my login info and created the LoginScreen.mxml file which calls the doLogin function in its (parent) mxml file FlexCMS.  It properly sets the state to 'LoggedIn' but then the LoginScreen.mxml file doesnt hide...
    Any ideas?
    <!-- FlexCMS.mxml file -->
    <s:states>
              <s:State name="Login" />
              <s:State name="LoggedIn" />
         </s:states>
    <fx:Script>
              <![CDATA[
    public function doLogin($username:String, $password:String):void {
                        loginResult.token = customUserClass.login($username, $password);
                   protected function loginResultEvent(event:ResultEvent):void {
                        //Alert.show(event.result.toString(), 'loginResult');
                        trace(event.result.toString());
                        if (event.result == true) {
                             currentState = 'LoggedIn';
                        trace('currentState: ' + currentState);
         ]]>
         </fx:Script>
    <components:LoginScreen includeIn="Login" />
    ... More code for rest of app that hasnt been broken out to other mxml files yet
    <!-- LoginScreen.mxml -->
    <?xml version="1.0" encoding="utf-8"?>
    <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*">
         <s:layout>
              <s:BasicLayout/>
         </s:layout>
         <s:states>
              <s:State name="Login" />
              <s:State name="LoggedIn" />
         </s:states>
         <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
         </fx:Declarations>
         <fx:Script>
              <![CDATA[
                   private var flexCMS:FlexCMS = new FlexCMS(); //get reference to main class
                   protected function loginClick(event:MouseEvent):void {
                        flexCMS.doLogin(username_txt.text, password_txt.text);
              ]]>
         </fx:Script>
         <s:Panel height="140"
                    horizontalCenter="0"
                    title="Login"
                    includeIn="Login"
                    verticalCenter="0"
                    width="250">
              <s:TextInput id="username_txt" text="testuser" width="151" x="87" y="10" />
              <s:TextInput id="password_txt" text="test" width="151" x="87" y="40" />
              <s:Label fontSize="14" text="Username:" x="10" y="10" />
              <s:Label fontSize="14" text="Password:" x="10" y="44" />
              <s:CheckBox label="Remember Me" x="10" y="68" />
              <s:Button click="loginClick(event)" id="login" label="Login" x="168" y="69" />
              <!-- <local:FlexCMS -->
         </s:Panel>
    </s:Group>

    I did something similar in the past for a few of my apps.
    The login screen was a custom TitleWindow component that contained the normal username field, password field and login button and could communicate with the server for authentication purposes. If the authentication was successful then I'd call the PopUpManager's removePopUp method on the login window and change the current state to the authenticated state.

  • DataGrid SelectedIndices from a different MXML component

    Hello
    I am refreshing a data grid that resides in my main component, from a sub-component. This works if I invoke the web service method to rebind the dataprovider, and I do not reference the datagrid directly from the sub component.
    My trouble is that I use checkboxes in my datagrid. I need to reset the selectIndices of the datagrid, but anytime I try to reference the datagrid directly it is NULL. The datagrid loses its checkbox selections every time I call the refresh, so I must explicitly reset the selectedIndices.
    How can I reset the datagrid's selectedIndices from a different MXML component? Why is my datagrid always NULL in my web service's result event handler?
    How can I directly reference my main component's datagrid, from my sub-component?

    Hi Devtron,
    You can figure this out by using events..
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete();" xmlns:comp="comp.*">
    <mx:Script>
      <![CDATA[
       private function onCreationComplete():void
        comp2.addEventListener("refreshGridEvent",refreshGrid);
       private function refreshGrid(event:Event):void
        comp1.dataGrid.dataProvider = null;
      ]]>
    </mx:Script>
    <comp:Component1 id="comp1" />
    <comp:Component2 id="comp2" />
    </mx:Application>
    Now in your Component2 dispatch the refreshGridEvent event either on a button click or when your UI elements changes based on your requirement...this.dispatchEvent(new Event('refreshGridEvent')); and listen for the evet in manin mxml file and change the dataProvider of the dataGrid in Component1.
    Note: This solution is if your both components are placed in the main mxml file. Is your structure is same as I mentioned in the code above..I mean
    whether your two components are placed in the main mxml file.
    Thanks,
    Bhasker

  • Initializing Custom MXML component

    Hello,
    I am new to flex and the one thing I can't seem to get a handle on is using custom mxml components. The whole not being able to use a constructor to pass data through was a tough thing to adjust to so for the most part I've been writing my own AS classes for display purposes that extend layout containers like VBox and such. This is getting cumbersome and I would really like to use MXML to save some time when writing display classes. For the most part I'm trying to use custom mxml components this way: I put the labels and other controls and then want data to display as text from the calling class. However, when I try to set the text it says that the control I am trying to set hasn't been initialized yet. My workaround is something like this.
    var data1:String = "Something";
    var customComp:CustomMXMLComponent = new CustomMXMLComponent();
    customComp.initialize();
    customComp.someControl = data1;
    Now why wouldn't someControl on the custom component be initialized when the actual component is initialized? Is there something I can change in the mxml component so that I don't always have to call .initialize() after creating an instance of the custom component?
    Thanks!

    .  The "initialize" stuff you had was more concerned with the lifecycle of the component.  We don't want to do that , but it is something you should learn about. I think the answer to your problem is to create Bindable variables in your mxml class,  then set those parameters.
    Observe
    <Panel>
      <Button label="{buttonLabel1}" >
      <Button label="{buttonLabel2}">
      <Label label = {labelLabel}>
      <Script>
         [Bindable]  public var buttonLabel1:String;
         [Bindable]  public var buttonLabel2:String;
         [Bindable]  public var labelLabel:String;
       </Script>
    </Panel>
    Meanwhile , in another class ...
    var customComp:CustomMXMLComponent = new CustomMXMLComponent();
    customComp.buttonLabel1 = "Ubuntu";
    customComp.buttonLabel2 = "Rocks";
    customComp.labelLabel = "My Socks";

  • AddChild(Sprite) to an mxml component

    Hi list! i'm porting an UML app from Aswing to Flex2, and i
    have a problem adding an sprite to a mx:Canvas (or other) mx
    component. for example, somethig like this:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="
    http://www.adobe.com/2006/mxml"
    layout="absolute">
    <mx:Canvas borderStyle="solid" height="200" width="80%"
    creationComplete="funcion()">
    <mx:Script>
    <![CDATA[
    private var size:uint = 80;
    private var bgColor:uint = 0xFFCC00;
    private var borderColor:uint = 0x666666;
    private var borderSize:uint = 0;
    private function funcion():void{
    var child:Sprite = new Sprite();
    var halfSize:uint = Math.round(size/2);
    child.graphics.beginFill(bgColor);
    child.graphics.lineStyle(borderSize, borderColor);
    child.graphics.drawCircle(halfSize, halfSize, halfSize);
    child.graphics.endFill();
    addChild(child);
    ]]>
    </mx:Script></mx:Canvas></mx:Application>
    TypeError: Error #1034: Error de conversión forzada: no
    se puede convertir flash.display::Sprite@3237871 en
    mx.core.IUIComponent. (It can't cast from flash.display::Sprite to
    mx.core::IUIComponent)
    At flex2 reference it is marked as addChild(DisplayObject )
    in every mxml component, not IUIComponent at any point.
    I can't use swfloader because i need to control this sprite
    with many mxml forms. Any idea?
    thank you!

    Well, if I had read the complete documentation on addChild, I
    would have seen this:
    Note: While the child argument to the method is specified as
    of type DisplayObject, the argument must implement the IUIComponent
    interface to be added as a child of a container. All Flex
    components implement this interface.
    Since Sprite is not a Flex component, it does not implement
    IUIComponent, hence the error.
    Do this instead:
    import mx.core.UIComponent;
    var child:UIComponent = new UIComponent();
    // carry on from here
    To use this with Flex you need to have something that
    implements IUIComponent so that it can be controlled by the Flex
    framework.

  • Reuse a MXML component

    Hi All
    I have setup (not complete yet) a mxml component (see code below), which I want to implementhe multiple times in s:Application.
    Within the s:Script tag (currently empty) I want to reference the VideoDisplay, Buttons, etc. To do this I use the ID, but the problem is that I need to implement this component multiple times ? An other problem is that each instance should have a different video url. Any suggestions ?
    Cheers
    <?xml version="1.0" encoding="utf-8"?>
    <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
    <s:BasicLayout/>
    </s:layout>
    <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
    <![CDATA[
    ]]>
    </fx:Script>
    <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />
    <mx:Panel title="{videoDisplay.source.split('/').pop()} ({videoDisplay.state})">
    <mx:VideoDisplay id="videoDisplay" visible="false" width="400" height="100"
    playheadUpdate="videoDisplay_playheadUpdate('')"
    ready="videoDisplay_ready('')"
    rewind="videoDisplay.play()"
    source="./Android_Demo.flv" />
    <mx:ControlBar id="controlBar" visible="false">
    <mx:Button id="play" name="play" label="Play" click="videoDisplay.play()"></mx:Button>
    <mx:Button id="pause" name="pause" label="Pause" click="videoDisplay.pause()"></mx:Button>
    <mx:HSlider id="slider" width="100%"
    allowTrackClick="false"
    invertThumbDirection="true"
    liveDragging="false"
    maximum="{videoDisplay.totalTime}"
    minimum="0"
    thumbPress="slider_thumbPress('')"
    thumbRelease="slider_thumbRelease('')"
    tickInterval="1"
    value="{videoDisplay.playheadTime}" />
    <mx:Label id="timeLabel" textAlign="right" />
    </mx:ControlBar>
    </mx:Panel>
    </s:Group>

    Hi,
    You just create bindable vars(public) in the component, then you can reference them as a component property, this property can be any type string,int, array etc....
    David
    simple app using the same component twice
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/mx"
       xmlns:components="components.*"
       minWidth="955" minHeight="600">
    <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <components:MyComponent x="45" y="161" caption="Hello World" icon="img1.jpg" description="picture 1">
    </components:MyComponent>
    <components:MyComponent x="479" y="161" caption="Another Component" icon="img2.jpg" description="picture 2">
    </components:MyComponent>
    </s:Application>
    the simple component -
    <?xml version="1.0" encoding="utf-8"?>
    <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
    <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
    <![CDATA[
    [Bindable] public var caption:String;
    [Bindable] public var icon:String;
    [Bindable] public var description:String;
    ]]>
    </fx:Script>
    <s:Panel left="0" right="0" top="0" bottom="0" title="{caption}">
    <s:VGroup verticalCenter="0" horizontalCenter="0">
    <s:Image width="140" height="140" horizontalCenter="0" source="{icon}"/>
    <s:Label text="{description}" width="100%" textAlign="center"/>
    </s:VGroup>
    </s:Panel>
    </s:Group>

  • 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!

Maybe you are looking for

  • HT6154 Issues downloading photos with version 7.1

    since i updated to 7.1 on my iphone 5 I can't download photos anymore.  when i hit trust after connecting it appears to disconnect the phone instead of making photos available for download.

  • I need help report

    hi bw gurus,             our team implementing bw for client,client requirement is to see the report weekly wise llike 1 to 7(1st week),8to14(2 week),15to21(3 wk),22 to 28(4 wk) and remaining days r 2 r 3 days take 5 th wk like this report display by

  • Significance of "Change"- "unchanged" and "New" - "Old" statuses during maintain authorization?

    Hi all, I am new in SAP Security/GRC and I need help: What does it mean to see the statuses "changed" and "New" on the 'maintain Authorization' page ? I learnt there are actions one must perform to change the 'Change' status into "unchanged' and also

  • Could Someone Explain Interfaces in English Please?

    Hi Everyone- I'm new to Java. I've been reading "Learning Java" from O'Reilly. From what I understand, Interfaces are sort of a structural framework that lists certain methods. Any class that implements an interface must contain this "structure" and

  • Q How can I tell when my Red nano is charging

    The screen on my nano doesn't show any change to the battery symbol so how do I know it's charging?