How to create multiple pages using flex application.

Question

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

Answer 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