5 Replies Latest reply on Jul 18, 2011 2:33 AM by John@Lamma

    Transitions Exercise 4:10  how to implement following MVC pattern

    John@Lamma

      On day 2 of the Flex for a week series we were introduced to the MVC pattern which makes great sense, however in later exercises

      this pattern is not followed and I wonder if anybody could give a helping hand to show how this would apply to Exercise 4:10 if the MVC

      patterns was applied.  In the code sample from the exercise you can see that Fade is applied to the login panel.

      I was trying to move the login panel to a view componend but then wonder how to structure the code to follow the MVC pattern.

       

      <s:Fade target="{login}"/>  is no longer working becaue the panel is not in the same file

       

      ==========================================================

       

      <!--These are the transitions between the portalState and the loginState.->

      <s:transitions>

      <!--Transition when a user logs in to the application.-->

      <s:Transition fromState="loginState" toState="portalState">

      <s:Sequence>

      <s:Parallel>

           <s:Fade target="{login}"/>

           <s:Resize target="{employeeOfTheMonth}"

                          widthFrom="

                          390" widthTo="250"/>

            <s:Move target="{login}"

                          xTo="-266"/>

           <s:Move target="{employeeOfTheMonth}"

                          xFrom="298" xTo="24"/>

      </s:Parallel>

      <!--Controls when the view state change defined by a RemoveChild property occurs.-->

                <s:RemoveAction target="{login}"/>

      <s:Parallel targets="{[search, cafeteriaSpecial, monthlyEvents]}">

      <!--Controls when the view state change defined by an AddChild property occurs.-->

                <s:AddAction/>

                <s:Fade/>

                     <s:Move target="{search}"

                                    xFrom="-166"/>

                     <s:Move target="{cafeteriaSpecial}"

                                    yFrom="-329"/>

                     <s:Move target="{monthlyEvents}"

                                    xFrom="833"/>

      </s:Parallel>

      </s:Sequence>

      </s:Transition>

      ..

      ..

      ==================================================================

        • 1. Re: Transitions Exercise 4:10  how to implement following MVC pattern
          e2dev Level 2

          John - If I understand properly, you've make the login panel into a custom component and called the custom component from the main application file? So, the main application file now has something like:

           

          <components:MyLoginPanel..../>

           

          If that's the case, then just  give that custom component the id property of "login":

           

          <components:MyLoginPanel id="login".../>

           

          HTHs.

          • 2. Re: Transitions Exercise 4:10  how to implement following MVC pattern
            John@Lamma Level 1

            e2dev,

             

            I did create a component MyLoginPanel and dispatch the login information back to the main application for evaluation.

             

            However after vaidation when I try to do something like   

             

            <s:Fade target="{MyLoginPanel.login}"/>  it does not work - I can not access that login panel to fade or apply any transition.

             

            I know I'm missing something and I'm desperate for some explanation how to structure and access the code.

             

            HJ

            • 3. Re: Transitions Exercise 4:10  how to implement following MVC pattern
              e2dev Level 2

              You don't need to access the login panel *within* your custom component. The custom component itself *is* now the login panel (assuming that you created your MyLoginPanel to extend the Panel container).

               

              So, in your code you have a MyLoginPanel.mxml file which is your new custom component, right? It extends the login panel that you moved from the main application, if I understand correctly. Take out the id="login" on that panel container that you moved from the main application.

               

              From the main application, you should refer to the custom component like this:

               

               

              <components:MyLoginPanel id="login".../>

               

              Then in your code, you need to remove any reference to the MyLoginPanel in the transition:

               

              <s:Fade target="{MyLoginPanel.login}"/>

               

              If you remember that the custom component *is the same as the panel it is replacing* then it should make more sense to you. In other words:

               

              <s:Panel id="login".../>

               

              and

               

              <components:MyLoginPanel id="login".../>

               

              Are exactly equivalent. It just happens that the latter is a custom component. The main application doesn't care about anything inside the custom component for the purposes of this transition code you're trying to implement. As long as it has the id set to "login", the transition should work.

               

              If this still doesn't make sense, please post your code for your custom component.


              • 4. Re: Transitions Exercise 4:10  how to implement following MVC pattern
                e2dev Level 2

                Aghr, the forums page, removed the formatting in my last post. Note that:

                 

                <s:Fade target="{MyLoginPanel.login}"/>

                 

                should be

                 

                <s:Fade target="{login}"/>

                 

                The MyLoginPanel in the first line of code above should have had a strikethrough. You don't need to reference your custom component name. You just reference the id that you have assigned to it.

                • 5. Re: Transitions Exercise 4:10  how to implement following MVC pattern
                  John@Lamma Level 1

                  thank you - I got it. I missed the little

                  detail that I can assign the ID to the component.  I have now managed to refactor the Exercise 4:10  with moving all the UI elements into

                  individual components - apply the transitions and implemented a proper login function with HTTP  to PHP and MySQL.

                  Cool stuff thank you

                  HJ