14 Replies Latest reply on Sep 10, 2007 11:47 AM by *gsb*

    Referencing problem between mxml pages.

    *gsb* Level 1

      I am trying to structure an example ViewStack where each view is a separate .mxml document.

      quote:

      <?xml version="1.0"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">

      <mx:Panel title="Problem ViewStack" height="95%" width="95%"
      paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

      <mx:HBox borderStyle="solid" width="100%"
      paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">

      <mx:Button id="section1" label="Section1"
      click="myViewStack.selectedChild=Page1;"/>

      <mx:Button id="section2" label="Section2"
      click="myViewStack.selectedChild=Page2;"/>

      </mx:HBox>

      <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">

      <local:page1 id="Page1" xmlns:local="*"/>

      <local:page2 id="Page2" xmlns:local="*"/>

      </mx:ViewStack>

      </mx:Panel>

      </mx:Application>


      ...and page1.mxml:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"
      label="Page1" width="100%" height="100%" backgroundColor="#FFFFCC">

      <mx:Label text="Section1 (page1.mxml)" color="#000000"/>

      </mx:Canvas>

      and page2 is similar:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"
      label="Page2" width="100%" height="100%" backgroundColor="#CCFFFF">

      <mx:Label text="Section2 (page2.mxml)" color="#000000"/>

      </mx:Canvas>

      This of course works fine.

      My problem comes when I try to add "next/previous" type buttons on pages.
      I do not know the correct syntax and throw an error.

      So what would a simple button added to page1 look like to do:
      myViewStack.selectedChild = Page2;


      Thank you.


      gsb
        • 1. Re: Referencing problem between mxml pages.
          JKohn99 Level 1
          - Declare the button
          - add a click event handler
          - set the selected child.
          It best to add a mx:script tag to your application
          then add add methods there.
          in your button mxml add click="showPage2()"

          private method showPage2():void
          {
          myStack.selectedChild = page2;
          }
          • 2. Referencing problem between mxml pages.
            levancho Level 3
            if you want << prev nex >> buttons you would be better if you code it using dinamic methods vs harcoded page names, plus you only need one click handler for both buttons,.

            private method yourBPrevAndNextButtonClickHandler():void

            var direction:int ;
            //PSEUDO : determine which button was clicked previouse or next.

            // if previouse was clicked
            direction = -1
            //else
            direction = 1;
            // real code should work :
            if((myStack.selectedIndex+_direction)>0 && (myStack.selectedIndex+_direction)< myStack.numChildren){
            myStack.selectedIndex =myStack.selectedIndex+_direction;
            }
            • 3. Re: Referencing problem between mxml pages.
              *gsb* Level 1
              Thank you for your responses.
              These techniques I am familiar with and have tried.

              My problem is that in page1.mxml I get an error (when saved) when I use a reference to 'myViewStack' and 'Page1' which are in the main mxml file, viewStack.mxml.

              For example:
              <mx:Button label="Next" click="myViewStack.selectedChild=Page2" />

              That reference will not work nor will this method:
              <mx:Script>
              <![CDATA[
              public function gotoPage1():void
              {
              myViewStack.selectedChild=Page1;
              }
              ]]>
              </mx:Script>

              So I am not telling the Flex builder 'where' to fine these elements, both of which reside in the main mxml and not the 'page' files.

              ...and I do not know the proper way to provide the reference/linkage.


              Thanks again for the responses and perhaps you can help just a little more.


              gsb
              • 4. Referencing problem between mxml pages.
                levancho Level 3
                if viewStack has id, and you know where it is you can do :
                Application.application.myViewStack (if its as you say) under main.mxml) .

                or yu can (little expensive) iterate all children of Application.application

                for(var aChild:Object in Application.application.getChildren()) {
                if(aChild is ViewStack) {
                // you got ypurself a refference aChild as your viewStack,
                then cast it (aChild as ViewStack).selectedChild and thats it.
                • 5. Re: Referencing problem between mxml pages.
                  *gsb* Level 1
                  TY but...

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"
                  label="Page1" width="100%" height="100%" backgroundColor="#FFFFCC">

                  <mx:Label text="Section1 (page1.mxml)" color="#000000"/>

                  <mx:Button label="Next"
                  click="Application.application.myViewStack.selectedChild=Application.application.Page2" />

                  </mx:Canvas>

                  This too does not work for me.


                  BTW: Is there a "code" BB tag in this forum?
                  Code seems to loose it's formatting.


                  gsb
                  • 6. Re: Referencing problem between mxml pages.
                    levancho Level 3
                    most likely problem is that you are trying to set selectedchild to null because
                    at this moment :
                    <mx:Button label="Next"
                    click="Application.application.myViewStack.selectedChild=Application.application.Page2" />

                    Page2 is(most liekly) null (not created yet) based on default creationPolicy rule set to auto.
                    • 7. Re: Referencing problem between mxml pages.
                      *gsb* Level 1
                      There must be a way, no?

                      Seems intuitive to me.


                      Thanks.


                      gsb
                      • 8. Re: Referencing problem between mxml pages.
                        levancho Level 3
                        1) way : you can set selectedIndex instead of selectedChild .
                        <mx:Button label="Next"
                        click="Application.application.myViewStack.selectedIndex=indexOfPage2" />
                        2) way: set CreationPolicy to "all" for viewStack so all objects get created when viewStack is created.

                        there is probably other ways too.
                        • 9. Re: Referencing problem between mxml pages.
                          *gsb* Level 1
                          TY

                          I will try these as well.

                          I appreciate your time and effort.


                          gsb
                          • 10. Re: Referencing problem between mxml pages.
                            *gsb* Level 1
                            Well TY again for the suggestions, but I can find no joy in my implementation of them.
                            I am still missing something.
                            Now both pages 1&2 throw this error upon saving the files:

                            1120: Access of undefined property Application.

                            Here are those files as they are now:

                            Help is still needed. :(



                            <?xml version="1.0"?>
                            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">

                            <mx:Script>
                            <![CDATA[

                            public function gotoPage2():void
                            {
                            myViewStack.selectedChild=Page2;
                            }

                            ]]>
                            </mx:Script>

                            <mx:Panel title="Problem ViewStack" height="95%" width="95%"
                            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

                            <mx:HBox borderStyle="solid" width="100%"
                            paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">

                            <mx:Button id="section1" label="Section1"
                            click="myViewStack.selectedChild=Page1;"/>
                            <mx:Button id="section2" label="Section2"
                            click="myViewStack.selectedChild=Page2;"/>
                            </mx:HBox>

                            <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%" creationPolicy="all">

                            <local:page1 id="Page1" xmlns:local="*"/>

                            <local:page2 id="Page2" xmlns:local="*"/>

                            </mx:ViewStack>

                            </mx:Panel>

                            </mx:Application>


                            <?xml version="1.0" encoding="utf-8"?>
                            <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"
                            label="Page1" width="100%" height="100%" backgroundColor="#FFFFCC">

                            <mx:Label text="Section1 (page1.mxml)" color="#000000"/>

                            <mx:Button label="Next"
                            click="{Application.application.gotoPage2()}"/>

                            </mx:Canvas>


                            <?xml version="1.0" encoding="utf-8"?>
                            <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"
                            label="Page2" width="100%" height="100%" backgroundColor="#CCFFFF">
                            <mx:Label text="Section2 (page2.mxml)" color="#000000"/>

                            <mx:Button label="Next"
                            click="Application.application.myViewStack.selectedIndex=0"/>

                            </mx:Canvas>

                            • 11. Re: Referencing problem between mxml pages.
                              levancho Level 3
                              This is one way of doing it :

                              ------------------


                              <?xml version="1.0"?>
                              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">

                              <mx:Script>
                              <![CDATA[

                              public function gotoPage(aPage:int):void
                              {
                              myViewStack.selectedIndex=aPage;
                              }

                              ]]>
                              </mx:Script>

                              <mx:Panel title="Problem ViewStack" height="95%" width="95%"
                              paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

                              <mx:HBox borderStyle="solid" width="100%"
                              paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">

                              <mx:Button id="section1" label="Section1"
                              click="myViewStack.selectedChild=Page1;"/>
                              <mx:Button id="section2" label="Section2"
                              click="myViewStack.selectedChild=Page2;"/>
                              </mx:HBox>

                              <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%" creationPolicy="all">

                              <local:page1 id="Page1" xmlns:local="*"/>

                              <local:page2 id="Page2" xmlns:local="*"/>

                              </mx:ViewStack>

                              </mx:Panel>

                              </mx:Application>

                              <?xml version="1.0" encoding="utf-8"?>
                              <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"
                              label="Page1" width="100%" height="100%" backgroundColor="#FFFFCC">
                              <mx:Script>
                              <![CDATA[
                              import mx.core.Application;



                              ]]>
                              </mx:Script>
                              <mx:Label text="Section1 (page1.mxml)" color="#000000"/>

                              <mx:Button label="Next"
                              click="{Application.application.gotoPage(1)}"/>

                              </mx:Canvas>





                              <?xml version="1.0" encoding="utf-8"?>
                              <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"
                              label="Page1" width="100%" height="100%" backgroundColor="#FFFFCC">
                              <mx:Script>
                              <![CDATA[
                              import mx.core.Application;



                              ]]>
                              </mx:Script>
                              <mx:Label text="Section2 (page2.mxml)" color="#000000"/>

                              <mx:Button label="Next"
                              click="{Application.application.gotoPage(0)}"/>

                              </mx:Canvas>
                              • 12. Re: Referencing problem between mxml pages.
                                *gsb* Level 1
                                Thank you Levancho.
                                That is exactly what I needed.

                                Seems I was missing: import mx.core.Application;

                                See I am learning (not formal, just teaching myself) Flex and AS3 at the same time.


                                Thanks for your time.

                                • 13. Re: Referencing problem between mxml pages.
                                  Ansury Level 3
                                  You may want to look into the Cairngorm framework, especially if this project may get large.

                                  But at the very least, even if a framework isn't needed, the examples use a ViewStack and you could probably use a similar method if you can't get it working otherwise.

                                  [Bindable]
                                  private var model : AppModelLocator = AppModelLocator.getInstance();

                                  <mx:ViewStack width="100%" paddingBottom="10" paddingTop="10" resizeToContent="true" selectedIndex="{model.viewing}">
                                  <view:EmployeeLogin />
                                  <view:EmployeeList />
                                  <view:EmployeeDetail />
                                  </mx:ViewStack>

                                  If you are familiar with the Singleton pattern, AppModelLocator (above) is a Singleton with a "viewing" property. Inside that class there is:

                                  // available values for the main viewstack
                                  // defined as contants to help uncover errors at compile time instead of run time
                                  public static const EMPLOYEE_LOGIN : Number = 0;
                                  public static const EMPLOYEE_LIST : Number = 1;
                                  public static const EMPLOYEE_DETAIL : Number = 2;
                                  // viewstack starts out on the login screen
                                  public var viewing : Number = EMPLOYEE_LOGIN;

                                  To change the current view you do this:

                                  model.viewing = AppModelLocator.EMPLOYEE_LIST;

                                  Since there's a binding to the ViewStack's selectedIndex, it updates automagically.

                                  This would seem to work for you if you your back/forward buttons always go to the same views (depending on the current view). Sort of like a "wizard". (Even though it's a stupid term!)

                                  If you're trying to implement web-browser like forward-back functionality (a view history-backtracking feature), it will require more work, however I would have to ask why you're implementing primitive browser "request/response" style functionality when you have RIA capabilities. =)

                                  Here's the example I pulled from:
                                  http://cairngormdocs.org/blog/?p=19

                                  Here's the framework:
                                  http://labs.adobe.com/wiki/index.php/Cairngorm
                                  • 14. Re: Referencing problem between mxml pages.
                                    *gsb* Level 1
                                    quote:

                                    If you're trying to implement web-browser like forward-back functionality (a view history-backtracking feature), it will require more work, however I would have to ask why you're implementing primitive browser "request/response" style functionality when you have RIA capabilities. =)

                                    No I was using next/previous as an analogy to walking through a simple stack, and not browser pages.

                                    I will look at this "Cairngorm framework" more closely and I thank you for the link as well as your response.