13 Replies Latest reply on Oct 9, 2006 1:34 AM by avanthika

    How to create multiple pages using flex application.

    avanthika
      Hi all,

      i am doing flex application which contains 5 different pages,

      to do this i have used viewstack component to navigate between the pages.

      this is working fine if all my pages are of same size. each page as different background image.
      but i have to create pages with different sizes.
      my first and second page are small and remaining pages are big.

      when i navigate to 3rd or 4th page, it is showing scrollbar inside swf.
      but i want scrollbar for browser window not inside my swf

      anyone please guide me how to create pages in flex application.

      i have one more doubt, if my page contains some html links , how to open those links,
      is it posible to open the link in new window.

      please help me , i have no idea how to create web applications using flex


      Thanks in advance

      regards
      avanthika


        • 1. Re: How to create multiple pages using flex application.
          inlineblue Level 1
          Set resizeToContent="true" on the ViewStack.
          • 2. Re: How to create multiple pages using flex application.
            avanthika Level 1
            Hi ,
            Thanks for your reply,
            i tried resizeToContent="true" in ViewStack,
            still i am getting vertical scrollbar.

            my Application width and height is same as first page,
            Is it because of this, i am getting scrollbar.
            if so what should i do,


            regards
            avanthika
            • 3. Re: How to create multiple pages using flex application.
              inlineblue Level 1
              Post some example code so I can see what your'e doing.
              • 4. Re: How to create multiple pages using flex application.
                avanthika Level 1
                Hi inlineblue,

                Thanks for your reply,
                you asked about sample code,

                following is my sample code.
                In my Application mxml file, i am loading all custom components for each page.


                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns="*"
                horizontalAlign="center" verticalAlign="top" styleName="plain"
                backgroundColor="#FFFFFF"
                creationComplete="init()" width="780" height="594" >

                <mx:Script>

                <![CDATA[
                //navigating to next page
                public function showNextStep(newIndx:int):void{
                vs.selectedIndex=newIndx;
                }
                //navigating to previous page

                public function showPreviousStep(newIndx):void{
                vs.selectedIndex=newIndx
                }
                ]]>

                </mx:Script>


                <mx:ViewStack id="vs" paddingLeft="0" height="100%" width="100%" >

                <mx:Canvas id="s1" label="step1" backgroundImage="assets/Step1.jpg" >
                <!-- Step1.jpg image size is width=778, height=560 -->


                <mx:HBox paddingLeft="8" width="780" height="548">
                </mx:HBox>

                <mx:Button alpha="0" buttonMode="true" x="697" y="18" click="showNextStep(1)" width="72" height="24" />
                <mx:Button alpha="0" buttonMode="true" x="697" y="508" width="72" click="showNextStep(1)" height="24"/>

                </mx:Canvas>
                <step2 id="s2" label="Step2" hideEffect="{blurImage}" showEffect="{unblurImage}" />

                <step3 id="s3" label="Step3" hideEffect="{blurImage}" showEffect="{unblurImage}" />
                <step4 id="s4" label="Step4" hideEffect="{blurImage}" showEffect="{unblurImage}" />
                <step5 id="s5" label="Step5" hideEffect="{blurImage}" showEffect="{unblurImage}" />
                </mx:ViewStack>
                </mx:Application>

                //************************************************************////************************ ************************************//

                // following is the page2 (step2) component code

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="init()"
                backgroundImage="assets/Step2.jpg" width="778" height="600" >
                <!-- Step2.jpg image size is width=778, height=600 -->

                <mx:HBox horizontalAlign="left" paddingLeft="5" height="511" width="768">

                </mx:HBox>

                <mx:Button alpha="0" buttonMode="true" x="648" y="6" click="this.parentApplication.showPreviousStep(0)" width="61" height="24"/>

                <mx:Button alpha="0" buttonMode="true" x="711" y="6" click="this.parentApplication.showNextStep(2)" width="53" height="24"/>

                <mx:Button alpha="0" buttonMode="true" x="651" y="529" width="58" click="this.parentApplication.showPreviousStep(0)" height="24"/>

                <mx:Button alpha="0" buttonMode="true" x="712" y="528" width="54" click="this.parentApplication.showNextStep(2)" height="24"/>


                </mx:Canvas>

                //************************************************************////************************ ************************************//

                // following is the code for page3 (step3) component

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="init()"
                backgroundImage="assets/Step3.jpg" >

                <!-- Step3.jpg image size is width=778, height=660 -->

                <mx:VBox width="763" height="668">
                </mx:VBox>

                <mx:Button alpha="0" buttonMode="true" x="644" y="10" click="this.parentApplication.showPreviousStep(1)" width="61" height="24"/>

                <mx:Button alpha="0" buttonMode="true" x="708" y="10" click="this.parentApplication.showNextStep(3)" width="53" height="24"/>

                <mx:Button alpha="0" buttonMode="true" label="Back" x="625" y="590" width="58" click="this.parentApplication.showPreviousStep(1)" height="24"/>

                <mx:Button alpha="0" buttonMode="true" x="694" y="590" width="68" click="this.parentApplication.showNextStep(3)" height="24"/>

                </mx:Canvas>

                //************************************************************////************************ ************************************//

                // following is code for page4 (step 4),

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="init()"
                backgroundImage="assets/Step4.jpg" >

                <!-- Step4.jpg image size is width=778, height=773 -->

                <mx:VBox width="762" height="792">
                <!-- User interface -->

                </mx:VBox>

                <mx:Button alpha="0" buttonMode="true" x="644" y="15" click="this.parentApplication.showPreviousStep(2)" width="61" height="24"/>

                <mx:Button alpha="0" buttonMode="true" x="708" y="16" click="this.parentApplication.showNextStep(4)" width="53" height="24"/>


                <mx:Button alpha="0" buttonMode="true" x="644" y="710" width="58" click="this.parentApplication.showPreviousStep(2)" height="24"/>

                <mx:Button alpha="0" buttonMode="true" x="703" y="710" width="54" click="this.parentApplication.showNextStep(4)" height="24"/>


                </mx:Canvas>

                //************************************************************////************************ ************************************//
                // Following is code for Page 5 (step 5 ) component.

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="init()"
                backgroundImage="assets/Step5.jpg" width="778" height="600">

                <!-- Step5.jpg image size is width=778, height=539-->

                <mx:VBox paddingLeft="170" paddingTop="170" width="778" height="522">

                </mx:VBox>

                <mx:Button alpha="0" buttonMode="true" x="654" y="41" click="this.parentApplication.showPreviousStep(3)" width="72" height="24"/>

                <mx:Button alpha="0" buttonMode="true" x="654" y="486" width="72" click="this.parentApplication.showPreviousStep(3)" height="24"/>

                </mx:Canvas>
                //************************************************************////************************ ************************************//

                I am getting vertical scrollbar for page3 and page4,
                please tell me how to avoid this, Is their any other method to do this.

                Following is the link for my above code

                http://www.emantras.com/flexdemo/sample.html

                in this application one more problem is also their, background image loads very slow, before it loads all the flex components will load. So when you open this please wait till background image loaded, to move to next and back pages.

                Thanks for your time and consideration.

                Regards
                Avanthika
                • 5. Re: How to create multiple pages using flex application.
                  avanthika Level 1
                  Hi all,
                  My problem still not solved,
                  any one please help me how to avoid vertical scrollbar when we navigate between pages.
                  i also placed code , what actually i am doing in my previous reply

                  thanks in advance

                  regards
                  avanthika
                  • 6. Re: How to create multiple pages using flex application.
                    inlineblue Level 1
                    Your problem is that you've set a height for your whole application of 594 pixels. The page 3 image is 660 pixels high, so the application is scrolling your page. Get rid of the height property in your Application tag so that the application can grow freely. The browser will then scroll your app.
                    • 7. Re: How to create multiple pages using flex application.
                      avanthika Level 1
                      Hi,
                      thanks for your reply,
                      even i removed height from my application tag , still it i am getting vertical scrollbar for page3 and page4.
                      is thier any other solution for this.

                      thanks in advance

                      Regards
                      Avanthika
                      • 8. Re: How to create multiple pages using flex application.
                        inlineblue Level 1
                        The only thing I can suggest is to remove the height attributes from all your VBox's (I'm not even sure why they're there). And make sure you have resizeToContent="true" on the ViewStack.
                        • 9. Re: How to create multiple pages using flex application.
                          mac_martine Level 1
                          find the canvas (or whatever component) that is scrolling, and add verticalScrollPolicy=false
                          • 10. Re: How to create multiple pages using flex application.
                            avanthika Level 1
                            Hi inlineblue,
                            quote:

                            Originally posted by: inlineblue
                            The only thing I can suggest is to remove the height attributes from all your VBox's (I'm not even sure why they're there). And make sure you have resizeToContent="true" on the ViewStack.


                            i even removed all height attributes from all VBox's, even from canvas,
                            i have also set resizeToContent="true" for viewstack .
                            still i am getting.

                            will you please give some sample, with different background size, .(atleast with 2pages , if you can).
                            i have tried all possible ways to avoid that, but still i am getting.

                            Thanks in advance

                            regards
                            avanthika
                            • 11. Re: How to create multiple pages using flex application.
                              rkoppineni
                              Hi avanthi,
                              I am actuate report tool developer. I need help for about Flex software.
                              how it works and desgin flow. please send me rambabu_koppineni@syntelinc.com

                              Thanks& Regards,
                              Rambabu
                              • 12. Re: How to create multiple pages using flex application.
                                avanthika Level 1
                                Hi all,
                                still my problem is not solved,
                                I am not able to remove vertical scrollbar . i have removed all height attributes still i am getting scrollbar,

                                any one give some example for this.
                                at least with 2 pages, first page background image height should be 600 and second page background image height 780 pixels.
                                if i use viewstack to display these two pages i am getting vertical scrollbar, i want my page should grow dynamically, scrollbar should come to browser, not inside swf.

                                in my previous replies i even placed my sample code and url .

                                anyone please help to solve this.

                                Thank you for your time and consideration.

                                regards
                                avanthika.
                                • 13. Re: How to create multiple pages using flex application.
                                  avanthika Level 1
                                  Hi all,
                                  still my problem is not solved,
                                  I am not able to remove vertical scrollbar . i have removed all height attributes still i am getting scrollbar,

                                  any one give some example for this.
                                  at least with 2 pages, first page background image height should be 600 and second page background image height 780 pixels.
                                  if i use viewstack to display these two pages i am getting vertical scrollbar, i want my page should grow dynamically, scrollbar should come to browser, not inside swf.

                                  in my previous replies i even placed my sample code and url .

                                  anyone please help to solve this.

                                  Thank you for your time and consideration.

                                  regards
                                  avanthika.