9 Replies Latest reply on Dec 15, 2009 4:53 AM by Wiouou

    Separating States from view

    Shivik Level 1

      Hello All

       

      I am following this example on Flex LiveDocs to create states in ActionScript. Now I want to separate the actionscript logic into a presentation model.

      Presentation model pattern has been in a series of blogs by Paul WIlliams.

       

      I am confused about its implementation in these points:

      • When I set the relativeTo property in AS, how will I access a component defined in a view in presentation model class?
      • How will I bind the currentState to some variable in my presentation model?

       

      Can somebody please give me a summary of how to implement this?

       

      Thanks and Regards

      ShiVik

        • 1. Re: Separating States from view
          PhilipKeiter

          Hello Shivik,

           

          When I set the relativeTo property in AS, how will I access a component defined in a view in presentation model class?

          You could pass a reference of your view to the presentation model.

           

          How will I bind the currentState to some variable in my presentation model?

          In ActionScript, you create bindings with the mx.binding.utils.BindingUtils class.

           

          Does this help? If not, I'll need more details.

           

          Thanks,

          Philip

          1 person found this helpful
          • 2. Re: Separating States from view
            Shivik Level 1

            Hello there Peter

            When I set the relativeTo property in AS, how will I access a component defined in a view in presentation model class?

            You could pass a reference of your view to the presentation model.

            How can I pass a reference of my view to the presentation model? Can you please give me a small example. I am pretty new at this.

             

             

            Does this help? If not, I'll need more details.

            What I need to do is I want to create a login screen. When I press login and the usernames and passwords do not match, I want to display a box showing the error message on the login screen. Its like I want to add a VBox to the login screen when the error occurs. I want to do this using states.

             

            Here are my confusions about this...

            • When the presentation model says that the state logic should reside in it, what does that mean? Should I create the state in presentation model or should I just change the state in presentation model?
            • Since I want the login error to appear when I receive the result from service, so I want the responder in cairngorm to act. How can I pass the reference to view from responder to the presentation model?

             

            Can you throw some light on this?

             

            Thanks and Regards

            ShiVik

            • 3. Re: Separating States from view
              PhilipKeiter Level 2

              ShiVik,

               

              How can I pass a reference of my view to the presentation model?

              It really depends on how you are instantiating everything--which class is in control or at the root. If your view is in mxml and the view creates an instance of the model, you could pass the view as a parameter in the constructor of the model:

                  <mx:Script>

              <![CDATA[

               

                  protected var model:PresentationModel = new PresentationModel(View(this));

               

              ]]>

                  </mx:Script>

              If your model is a Singleton, you'd assign the property on creationComplete to the single instance:
                  <mx:Script>
              <![CDATA[
                 
                  private function handleCreationComplete():void
                  {
                      PresentationModel.instance.view = View(this);
                  }
                 
              ]]>
                  </mx:Script>
              These are not necessarily the best way according to the Design Pattern. You have a lot of freedom. If you tell me what your code structure looks like I could answer better. Are you using an mxml view or an AS view? Are you trying to strictly follow the Design Pattern, or merge it with how the Flex framework naturally flows? There is always a bit of confusion when applying Design Patterns in Flex because usually everything can be accomplished without using one, in a way that is less confusing to people, which makes people tend to cheat, and suffer in the long run...sorry for the ramble.
              Thanks,
              Philip

              1 person found this helpful
              • 4. Re: Separating States from view
                Shivik Level 1

                Hello there Peter

                 

                Thanks a lot for your help.

                Are you trying to strictly follow the Design Pattern, or merge it with how the Flex framework naturally flows? There is always a bit of confusion when applying Design Patterns in Flex because usually everything can be accomplished without using one, in a way that is less confusing to people, which makes people tend to cheat, and suffer in the long run.

                I am trying to strictly follow it. No cheating - since I have suffered already too much in past. I have essentially understood the flow of cairngorm and presentation model. The only thing is how to implement it, since I keep getting stuck at scenarios which I haven't seen in examples.

                 

                If you tell me what your code structure looks like I could answer better. Are you using an mxml view or an AS view?

                I am using the Cairngorm model and trying to use the presentation model with that. My view is essentially in MXML only. Till now I haven't had the need to separate out too much ActionScript from my view.

                 

                Here is what my current workflow looks like...

                 

                • Create a Login screen in Login.mxml
                • I am triggering the login event in presentation model LoginModel.as
                • Created a VO class  UserVO.as for storing user information.
                • Then created a currentUser:UserVO var in modelLocator.
                • When the service on server responds, the responder stores the information received in currentUser in modelLocator
                • If the login fails, then I want to display the error. I am stuck here.
                  • Ideally I will create a state in mxml and when error occurs, responder should ask the presentation model to set the currentState to "LoginError". How? I don't know yet.
                  • As a workaround, I created a separate screen for displaying error, and I display it when the error occurs - hiding the login screen in process.

                 

                Looking forward to your thoughts on this..

                 

                Thanks and Regards

                ShiVik

                • 5. Re: Separating States from view
                  PhilipKeiter Level 2

                  ShiVik,

                   

                  Now I completely understand what you are after. Unfortunately, in my opinion, using the Flex states is really messy and it is much better to have the view be updated directly from a presenter model, rather than have the view update from states which are updated from the presenter model. I also like to keep the view's model and controller separate. But since they are together in the blog about the presenter, I'll keep them together.

                   

                  So what you want to do is have your mxml view declare an instance of a presenter:

                  protected var model:PresenterModel = new PresenterModel();

                   

                  PresenterModel has a property for each gui element property in the mxml view that needs to update:

                  public var user:UserVO = null;

                   

                  PresenterModel has a method for each gui event in the mxml view that needs to be handled:

                  public function showUser(index):void

                  {

                  user = userList.getItemAt(index) as UserVO;

                  }

                   

                  Your view binds components to items in the model:

                  <Label text="{model.user.lastName}" />

                   

                  Your view handles events by calling methods on the model:

                  <List change="model.showUser(event.rowIndex);" />

                   

                  The efficient way to show and hide things based on state is like this:

                  In the model:

                  public static const INIT:String = "init";

                  public static const NORMAL:String = "normal";

                  public static const ERROR:String = "error";

                  public var viewMode:String = INIT;

                  In the view:

                  <VBox includeInLayout="{model.viewMode == PresenterModel.INIT}" visible="{model.viewMode == PresenterModel.INIT}" />

                  <VBox includeInLayout="{model.viewMode == PresenterModel.NORMAL}" visible="{model.viewMode == PresenterModel.NORMAL}" />

                  <VBox includeInLayout="{model.viewMode == PresenterModel.ERROR}" visible="{model.viewMode == PresenterModel.ERROR}" />

                   

                  For retrieving and sending data, the PresenterModel can use Cairngorm events since you are using Cairngrom.

                   

                  So, whenever there is user interaction, the event calls a method on the PresenterModel, and that method updates a property of the PresenterModel, and then the view updates itself through the bindings.
                  This system (although I use a different class for model and controller) worked very well for me on large projects from start to end. It never gets messy.
                  Thanks,
                  Philip
                  • 6. Re: Separating States from view
                    Shivik Level 1

                    Hello there Peter.

                     

                    Very illuminating and very exhaustive reply by you. I will definitely make use of this coding practice in my architecture.

                     

                    Thanks a ton.

                     

                    With kind regards

                    ShiVik

                    • 7. Re: Separating States from view
                      PhilipKeiter Level 2

                      Thanks! And my name is Philip, by the way. If you click my name on the left to go to my profile and get a link for my website, where you can get in contact with me to discuss further.

                      • 8. Re: Separating States from view
                        Shivik Level 1

                        Thanks Philip

                         

                        You seem to have read my mind. I was just googling your blog or profile. Will surely contact you sometime.

                         

                        Thanks a lot.

                         

                        ShiVik

                        • 9. Re: Separating States from view
                          Wiouou

                          My solution for a wizard with directions depending on property values of the VO was to create an mvp for each state and an mvp for the surrounding component.  The main component's controller listened to events on the model of the states' mvp to gather its data and the wizardbar had a reference to the model of the main component to decide which state to set.  The final state was a dummy state but it triggered the controller's final action.  This way my responders only needed access to a controller.