Optimizing mxml component having so many group

Hi,
I am stuck in critical issue which I have to fix within today. I have a view component or mxml component having 50 group.
After slashscreen Its taking too much time and memory to load first view and GUI stuck for few minutes.
There is any solution of this issue.I want to queued all group creation according to requirement I want to load it.
If there is any alternate way then it will be helpful to me,
Any help will be appreciated,

I was going to look at the code for your Groups to see if I could suggest a quick way of refactoring the app to not all get instantiated at once.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.<http://www.adobe.com/>
Blog: http://blogs.adobe.com/aharui

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()

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.

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

Event Fired when a mxml component is shown on screen

hello,
I have following application structure nested up to 2/3 level.
Application
     linkbar connected to viewstack
     viewstack
          NavigatorContent
               mxml Component
          NavigatorContent
               mxml Component
mxml componet in turn has similar structure
componet
     linkbar connected to viewstack
     viewstack
          NavigatorContent
               mxml Component
          NavigatorContent
               mxml Component
and end component is form which is shown and actions performed
I want to execute specific code when the form is first time shown
which will collect data from server and will show for further actions.
User will edit/delete/update data with various button clicks.
I tried activate event on end component but it seems that it wont get
fired at all. End components are enclosed in BorderContainer or Group.
To test activate event I have used Alert.show only but popup is not shown
when I select link button on penutimate linkbar.
If I am doing something wrong please let me know as well please
guide me which event shall I use so that whenever linkbutton is
pressed on linkbar it will fire that event. In that event I can check
whether it has been called earlier by checking some variable which
will be null in creation complete and set in event fired when linkbutton is pressed.
Thanks and regards
Raja

I think 'creationComplete' is the closest event to what you are looking for.

How to create custom MXML component accepting other MXML componenents as children

How can I create an MXML component that when I use it in the "main" MXML, accepts other MXML components...
For example:
<s:WindowedApplication>
     <myComponent>
          <otherMXMLcomponent></otherMXMLcomponent>
          <otherMXMLcomponent></otherMXMLcomponent>
          <otherMXMLcomponent></otherMXMLcomponent>
          <otherMXMLcomponent></otherMXMLcomponent>
     </myComponent>
<s:WindowedApplication>
How do you declare such a component?
Thanks in advance

Bhè non so se ho capito .. ti spiego la prova che ho fatto io.. Dunque, io ho provato a creare un mio componente Custom e a metterci dentro degli oggetti miei di esempio.. Il componente di esempio si chiama mioComponenteCustom e all'interno è strutturato in questo modo:
<?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:Group>
Al posto dei puntini ci metto quello che voglio.. nel tuo caso i tuoi 2 famosi pulsanti..
All'esterno chiamerò :
<mioComponenteCustom>
     <s:DataGrid>
     </s:DataGrid
</mioComponenteCustom>
Dove DataGrid è un componente a caso qualsiasi.. Ora, con questa struttura non ricevo errori e sembra andare bene..
Dimmi se ho capito bene o volevi fare altro..
Max

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.

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

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?

<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

<?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>
          
     </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" />
          
     </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.

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.

Very simple library with one MXML component ERROR

<?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"
                     mouseDown="FlexGlobals.topLevelApplication.nativeWindow.startMove()"
                     width="350" height="42" top="0" left="0" right="0">
          <s:states>
                    <mx:State name="maxed"/>
                    <mx:State name="restored"/>
          </s:states>
          <fx:Script>
                    <![CDATA[
                              import flash.events.MouseEvent;
                              import mx.core.FlexGlobals;
                              private var maxed:Boolean = false;
                              private function restore(e:MouseEvent):void{
                                        if (maxed){
                                                  FlexGlobals.topLevelApplication.restore();
                                                  this.currentState = "restored";
                                                  maxed = false;
                                        }else{
                                                  FlexGlobals.topLevelApplication.maximize();
                                                  this.currentState = "maxed";
                                                  maxed = true;
                              public function Maximize() : void
                                        if (this.maxed)
                                                  FlexGlobals.topLevelApplication.restore();
                                                  this.currentState = "restored";
                                                  this.maxed = false;
                                        else
                                                  FlexGlobals.topLevelApplication.maximize();
                                                  this.currentState = "maxed";
                                                  this.maxed = true;
                                        return;
                              }// end function
                              public function get Maximized():Boolean{
                                        return this.maxed;
                    ]]>
          </fx:Script>
          <s:Rect left="0" top="0" bottom="0" right="0">
                    <s:fill>
                              <s:SolidColor color="#FFFFFF"/>
                    </s:fill>
          </s:Rect>
          <s:Image x="5" y="-4" source="assets/colibright_title.png" left="5"/>
          <s:Button y="10" width="32" height="32" click="FlexGlobals.topLevelApplication.minimize();" icon="assets/icons/minimize.png" y.restored="5" y.maxed="5" right.restored="74" right.maxed="74"/>
          <s:Button width="32" height="32" click="restore(event)" y="5" icon="assets/icons/restore.png" includeIn="maxed" right="39"/>
          <s:Button y="5" click="restore(event)" includeIn="restored" width="32" height="32" icon="assets/icons/maximize.png" right="39"/>
          <s:Button y="10" width="32" height="32" click="FlexGlobals.topLevelApplication.close();" icon="assets/icons/close.png" y.restored="5" y.maxed="5" right.restored="5" right.maxed="5"/>
</s:Group>
In my main application when i try to load the SWF and use the Custom MXML Component i get this error
[SWF] C:\Users\dude\Adobe Flash Builder 4.7\Colibr8\bin-debug\extensions\00 - WindowControlUIPlugin.swf - 8,287 bytes after decompression
VerifyError: Error #1014: Class spark.components::Group could not be found.
private function launchPluginsInspection():void{
                              plLoader = new Loader();
                              plLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onPluginLoaded);
                              var context:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
                              context.allowLoadBytesCodeExecution = true;
                              context.allowCodeImport = true;
                              var appFolder:File = File.applicationDirectory;
                              var extensionsFolder:File = new File(appFolder.nativePath + "/extensions/");
                              if (extensionsFolder.isDirectory){
                                        var files:Array = extensionsFolder.getDirectoryListing();
                                        for each(var file:File in files){
                                                  if (file.extension == "swf")
                                                            plLoader.load(new URLRequest(file.nativePath), context);
Why is this happening?

Can you try giving permissions for the player to access your swf file by adding this
Security.allowDomain( '<Location of the swf file>' );
or
System.security.allowDomain( '<location of the swf file>' );
Thanks,
Sudhir

Custom mxml component extending another mxml component

I want to create a custom mxml component that extends another mxml component. Bacially I want structure like Group -> BaseMXMLComponent -> MyMXMLComponent. I understand that it used to be the case that trying to add child component to MyMXMLComponent would throw "Error: Multiple sets of visual children have been specified for this component (base component definition and derived component definition)." error. But i've been reading few articles that says this has been fixed in Flex 4.
My question is.. is it an actually fixed, documented, and supported behavior of Flex 4? or just an undefined behavior that appears to be "fixed" but can change on future update?

I dont know what is happening inside datagrid.But If
you want to maintain a single instance you could use singleton design pattern
read about it
http://en.wikipedia.org/wiki/Singleton_pattern
    public class Singleton
        private static var instance:Singleton= new Singleton();
        public var userdata:*; // keep user object
        public function Singleton()
            if (instance != null) { throw new Error('Cannot create a new instance. Must use Singleton.getInstance().') }
        public static function getInstance():Singleton
            return instance;

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>

</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>

</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>

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

Optimizing mxml component having so many group

Similar Messages

Maybe you are looking for