4 Replies Latest reply on Apr 9, 2008 5:49 AM by Benji2008

    site in Flex

    Benji2008 Level 1
      Hey there :)

      I'd like to make a website, using flex! Now I've been wondering.. how shall I start? And I don't know what the "right" & "correct" way is..

      Should I use different states for each page? If so, what is supposed to be the "base state"? the "login page?" And how do I change the current state to the base state, as I can't give it a real name ??

      Should I make the different "pages" as different swf-files & then load them with the swfloader?

      thanks for your time :)

      Benji
        • 1. Re: site in Flex
          peterent Level 2
          When you draw out your site on paper, what elements change and what remain? For example, do you have a banner that remains in place throughout a user's session? The things that change you can look into Flex components like ViewStack, Accordion, etc. These are the Flex "navigation" components.

          If you site becomes large with lots of content, consider breaking into Flex Modules. You'd break your site into parts (the Modules) which make logical sense. For example, if your site has an "About Us" part and a "Portfolio" part, these could be Modules. A visitor who never picks "About Us" would never load the Module and avoid the download.
          • 2. Re: site in Flex
            Benji2008 Level 1
            I've not totally decided yet how the site will look like yet, but thanks for the great answer! It's the one I've been looking for :)

            thanks very much for the reply, it's much appreciated!
            • 3. Re: site in Flex
              Gregory Lafrance Level 6
              ------------------------- ViewStack1.mxml ---------------------
              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:comp="components.*"
              layout="vertical" width="100%" height="100%" >
              <comp:TopBar />
              <mx:HBox width="100%" height="100%">
              <comp:LeftBar />
              <mx:VBox width="100%" height="100%">
              <mx:ViewStack id="myViewStack" borderStyle="none" width="100%" height="100%">
              <mx:VBox id="home" width="100%">
              <comp:MainIntroText />
              <mx:HRule width="50%" height="3" strokeColor="0xCC3333"/>
              <comp:MainSecondaryText />
              <mx:HRule width="50%" height="3" strokeColor="0xCC3333"/>
              <comp:MainFinalText />
              </mx:VBox>
              <mx:VBox id="about" width="100%">
              <comp:About />
              </mx:VBox>
              <mx:VBox id="contact" width="100%">
              <comp:Contact />
              </mx:VBox>
              </mx:ViewStack>
              </mx:VBox>
              </mx:HBox>
              </mx:Application>
              ------------------------------- About.mxml -----------------------
              <?xml version="1.0" encoding="utf-8"?>
              <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
              <mx:VBox width="65%">
              <mx:Text fontSize="14" width="100%" text="This page tells you about us." />
              </mx:VBox>
              </mx:HBox>

              ----------------------------------- Contact.mxml ---------------------------
              <?xml version="1.0" encoding="utf-8"?>
              <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
              <mx:VBox width="65%">
              <mx:Text fontSize="14" width="100%" text="This page tells you how to contact us." />
              </mx:VBox>
              </mx:HBox>

              ------------------- LeftBar.mxml -------------------------
              <?xml version="1.0" encoding="utf-8"?>
              <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="200" height="100%">
              <mx:LinkButton label="Adobe Labs - Flex"
              click="navigateToURL(new URLRequest(' http://labs.adobe.com/technologies/flex'), '_blank');"/>
              <mx:Spacer height="20"/>
              <mx:Label fontSize="16" text="Flex Blogs"/>
              <mx:LinkBar direction="vertical" width="90%" itemClick="navigateToURL(new URLRequest(event.item.data), '_blank');">
              <mx:Object label="Adobe Flex Team Blog" data=" http://weblogs.macromedia.com/flexteam/"/>
              <mx:Object label="Flex Blog Aggregator" data=" http://www.allyourflexarebelongtous.com/"/>
              <mx:Object label="Adobe Flex Blog Aggregator" data=" http://weblogs.macromedia.com/mxna/index.cfm?query=byCategory&#38;categoryId=5&#38;categor yName=Flex"/>
              </mx:LinkBar>
              <mx:Spacer height="20"/>
              <mx:Label fontSize="16" text="Example Flex Apps"/>
              <mx:LinkBar direction="vertical" id="addlRscList" width="90%" itemClick="navigateToURL(new URLRequest(event.item.data), '_blank');">
              <mx:Object label="Adobe Flex Store" data=" http://www.adobe.com/devnet/flex/samples/flex_store_v2/"/>
              <mx:Object label="Adobe Dashboard Example" data=" http://examples.adobe.com/flex2/inproduct/sdk/dashboard/dashboard.html"/>
              <mx:Object label="Buzzword Word Processor" data=" http://preview.getbuzzword.com/?s=true"/>
              <mx:Object label="Adobe Style Explorer" data=" http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html"/>
              <mx:Object label="Adobe Component Explorer" data=" http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html"/>
              </mx:LinkBar>
              </mx:VBox>

              ----------------------- MainFinalText.mxml ----------------------------
              <?xml version="1.0" encoding="utf-8"?>
              <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
              <mx:Text width="100%" fontSize="12"
              text="Here is the final text I want to show you." />
              </mx:VBox>

              --------------------------- MainIntroText.mxml -------------------------------
              <?xml version="1.0" encoding="utf-8"?>
              <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
              <mx:Text width="100%" fontSize="12"
              text="Here is the main text I want to show you." />
              </mx:VBox>

              ----------------------- MainSecondaryText.mxml --------------------------------
              <?xml version="1.0" encoding="utf-8"?>
              <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
              <mx:Text width="100%" fontSize="12"
              text="Here is the secondary text I want to show you." />
              </mx:VBox>

              --------------- TopBar.mxml --------------------------------
              <?xml version="1.0" encoding="utf-8"?>
              <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
              <mx:Script>
              <![CDATA[
              private function goToViews(view:String):void {
              if(view == "home"){
              this.parentApplication.myViewStack.selectedChild=this.parentApplication.home;
              }
              if(view == "about"){
              this.parentApplication.myViewStack.selectedChild=this.parentApplication.about;
              }
              if(view == "contact"){
              this.parentApplication.myViewStack.selectedChild=this.parentApplication.contact;
              }
              }
              ]]>
              </mx:Script>
              <mx:LinkButton label="MySnazzyLogo" fontSize="20" click="goToViews('home');" />
              <mx:VBox width="100%">
              <mx:HBox width="100%">
              <mx:Spacer width="100%" />
              <mx:LinkBar fontSize="14" itemClick="goToViews(String(event.item.data));">
              <mx:Array>
              <mx:Object label="About Us" data="about"/>
              <mx:Object label="Contact Us" data="contact"/>
              </mx:Array>
              </mx:LinkBar>
              </mx:HBox>
              <mx:HBox width="100%">
              <mx:Spacer width="150" />
              <mx:Label fontSize="25" text="Here is Some Additional Text" />
              </mx:HBox>
              </mx:VBox>
              </mx:HBox>
              • 4. Re: site in Flex
                Benji2008 Level 1
                thanks very much for the code example Greg!