4 Replies Latest reply on Jan 31, 2007 2:31 PM by WestSide

    View States and Custom Components

    WestSide Level 1
      Hi,

      I am using a view stack for this application and once the user is logged into the application they see this "Home Page" that basically contains a couple of components like so:

      This is in my "AppMain.mxml" file

      <mx:ViewStack id="appView" height="100%" width="100%">
      <mx:Canvas id="home">
      <view:TeacherList id="teacherList" />
      <view:StudentList id="studentList"/>
      <mx:/Canvas>
      </mx:ViewState>

      So in my TeachList.mxml file I have this <mx:ButtonBar> and one of the buttons is "Add Teacher", when the user clicks this button, I want to hide the StudentList component using view states and ultimately display a form for the user on the same screen so they can add a Teacher. If all the code was in one file I think I could do this myself.

      I tried putting the <mx:states> tag in the AppMain.mxml file but since the <mx:ButtonBar> mxml code was inside a different file it could not see the <mx:states> block I added to the "AppMain.mxml" file. So I then tried to put the <mx:states> block in the same file as the actual <mx:ButtonBar> but then how do I access the id of the component (studentList) so I can hide it

      Any help greatly appreciated.

      -Westside
        • 1. Re: View States and Custom Components
          davidmedifit Level 1
          So, you want an action in one custom component to affect a state in the main MXML application. The only way I've ever done this is to have the controlling buttons/bars in the main application, and hide the components.

          From a coding point of view, you may want to do this - leave "teacherList" to display the teacher's, but have another custom component to add a new teacher.

          This may not suite what you are trying to do, so this is an alternative method:

          1) Inside the "TeacherList" component, dispatch a custom event when the user clicks on the "Add Teacher" button.
          2) Listen for that event in the main application
          3) When the event is heard, call code to change the state.

          I have mostly used the designer in FB2 to create states (I don't usually like designers, but I find I get into alot of trouble trying to hand code them!).

          Not sure if you have used custom events or not - there have been some posts on this board about them, in the past. Post back if you are lost. Hope I helped some.

          Cheers,

          David
          • 2. View States and Custom Components
            WestSide Level 1
            Hi,

            I have a ViewStack in my "Main.mxml" file, in it each child of the ViewStack I have 3 custom components in this example. When a user clicks "Add Teacher" in one of the components, I want to hide the other components which are also in the same <mx:Canvas> as shown below. So the code:

            <mx:ViewStack id="appView" height="100%" width="100%">
            <mx:Canvas id="home">
            <view:TeacherList id="teacherList" />
            <view:StudentList id="studentList"/>
            <mx:/Canvas>
            </mx:ViewState>

            So the buttons would be in TeacherList, when you click the "Add Teacher" button, I want to hide the custom component "StudentList". I believe view states is what I need here. Let me know if that makes sense.

            -Westside

            • 3. Re: View States and Custom Components
              davidmedifit Level 1
              Yeah - you need to control that using custom events.

              Let me pseudo code this for you - you may have to research a little yourself

              1) Create a state that removes the student list, and displays the component you want to display (I'll refer to it as 'state2' for the moment).

              2) In your teacherlist component, create the event, something like this:
              <mx:Metadata>
              [Event (name="customEventNameHere", type="flash.events.Event")]
              </mx:Metadata>

              3) In your teacherList component, dispatch the event:
              public function buttonClickHandler():void{
              var eventObj:Event=new Event("customEventNameHere");
              dispatchEvent(eventObj);
              }

              Call this function when the user presses the particular button in your teacherList component.

              4) Handle the result. Are you using Flex Builder? If so, when you press the space bar on your call to the teacherList component, you will see the "customEventNameHere" event available.
              <view:TeacherList id="teacherList" customEventNameHere="changeTheState()" />

              5) Change the state:
              public function changeTheState(eventObj:Event):void{
              currentState='state2';
              }

              I hope that works - please post back with your results (or mark answered if you get it)

              Cheers,

              David
              • 4. Re: View States and Custom Components
                WestSide Level 1
                Hi,

                Well, that worked first time around.

                The only thing I had to do was change this:

                <view:TeacherList id="teacherList" customEventNameHere="changeTheState()" />

                to

                <view:TeacherList id="teacherList" customEventNameHere="changeTheState( event )" />

                Thanks!!!!

                I just need to figure out how to do this in Cairngorm 2. I am using Cairngorm right now and it has its own event dispatching system from what I can tell and I have it working in quite a few areas nicely, but here using the <mx:Metadata> the way you outlined works!

                Best regards,

                Westside