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.

Similar Messages

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

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

  • 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

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

  • 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

  • Refer to mxml component within the same package

    Hello
    How can I refer to the same mxml component both of which live in the same package?  For example, I have myHbox and myTabNav in the same package named ui.  I am already referring to the myHBox mxml class in the Application class through the line: xmlns:ui="ui.*" and that works fine.  However, I want to use myTabNav within the myHBox mxml component?
    Thanks in advance,
    K4Flex

    You can use the same namespace xmlns:ui="ui.*" in the myHbox.mxml too.

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

  • Passing a variable from an mxml component to the main mxml file

    Hey guys,
    I have a popup titlewindowt which is defined as a component in a separate mxml component file.
    In the popup window i have an inputbox and a button
    When i press the button in that popup window i want the text in the input box to be transfered across to a variable in my main mxml file
    How can i do this?
    Thanks
    Chris

    Since you are already tied in to the top level application then I would add a listener at the application level and in the component do a:
      FlexGlobals.topLevelApplication.dispatchEvent(....)
    However, I can't help but encourage you to decouple this functionality and pass events around rather than what you are currently doing.
    There are a few ways you can do this.  One is to use an MVC framework to model your application after.
    A simpler approach even would be to have the component simploy dispatch events to itself and have whatever is creating the component listen for the events and do higher level functionality.
    Good Luck!

  • 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

  • Mxml Component Help

    I am createing an app that has a mxml component with a
    menubar in it. For itemClick in the menubar i want to call a
    function that is in my main mxml file but cant get it to work. Is
    this possible and if so what is the solution.

    The proper way is to use events. You will need to read up on
    them as they are a little too complex to detail for you.
    However there are two quick wasy to call a function outside
    your current component. Basically you can "dot" your way up the
    application till y ou get to the main.xm by using the
    parentDocument.
    So, in your component use parentDocument.FunctionName();
    You can also directly access your application.mxml by using
    mx.core.Application.application.FunctionName();

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

  • 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

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

  • How to call method in another mxml component

    HI to all friends out there. I am stuck at some point . I need to call public method which is in other mxml component file in another mxml component.
    So please tell me how i achieve this . I need to call inside event method which activate when user click on mu advancedatagrid item.
    So please tell me how to acheive this.
    Thank you in advance.

    If the functionality you need is self-contained within the component, you can dispatch generic event to the main application, and over there define the handler function.
    If you need more specific interaction triggered by the component, you have to create custom event Class and then dispatch custom event.
    I believe there are some clear tutorials in Flex in a week: http://www.adobe.com/devnet/flex/videotraining/?devcon=f2
    HTH,
    FTQuest

Maybe you are looking for