3 Replies Latest reply on Sep 4, 2008 1:51 PM by perflexed

    advice on app design

      I am quite (very) new to flex. I am building a rather large and complex application. As I am inexperienced I thought I would describe (briefly) how I am planning on approaching building the application and hopefully people can let me know if I am heading in the right direction.

      The application has three main 'areas'. At the top there are a few fixed buttons, eg print, about etc.
      Then below that we have another row of buttons. These are going to behave in a similar way to office 2007's 'ribbon' interface. So if one clicks on the 'events' button for example, one is shown a context sensitive row of buttons for working with events. Most of these buttons will be using icons, but that's a different question.

      Then below this row is the main data area where we will have (typically) a tree view of the data on the left and then whatever controls are appropriate for working with that data on the right.

      Now where I am hesitant is how to build up these different 'areas'. Specifically the context sensitive buttons.
      I think the way to go about this is to use states, so when a button is clicked the state is changed to one where the appropriate context sensitive buttons are shown, and presumably the appropriate data view as well.
      It strikes me that by going down this road I will end up with quite a lot of different states, but perhaps that is unavoidable.

      So, hopefully I have given you enough info to get an idea of what I am doing and where I'm headed. Does it seem reasonable?

      Any tips or advice greatly appreciated!

        • 1. Re: advice on app design
          greg h_ Level 1
          Hi perflexed,

          You mention "I think the way to go about this is to use states".

          Are you acquainted with Flex's <mx:ViewStack>?

          Flex 2 added the <mx:States> tag. Early Flex developers relied heavily on <mx:ViewStack> and still do.

          If you are not familiar with <mx:ViewStack>, go to the Flex Component Explorer at the following link and navigate the tree along the left to: Visual Components > Containers > ViewStack.

          <mx:ViewStack> actually is non-visual navigation container. Non-visual meaning you have to add some other UI components to enable user navigation through the stack.

          Please note that it is not an either/or decision whether to use <mx:States> or <mx:ViewStack>. In my apps I almost always use both. fwiw, by default I use <mx:ViewStack>. I generally switch to <mx:States> for views where there are incremental changes. Generally I work in code view, but for working with <mx:States> I switch to design view. The names of the tags that get nested in <mx:States> pretty well highlight what "incremental changes" tend to be: SetProperty, SetStyle, RemoveChild, AddChild, etc.

          Regardless whether you use <mx:States> or <mx:ViewStack> or some other navigation container please, please, please create your application as a series of custom components (vs as "monolithic" file that contains 100% of the code ;-)

          btw, If you adopt an MVC microarchitecture, your application will naturally be created as a series of custom components. Popular MVC microarchitectures used with Flex include Cairngorm and PureMVC.org (among others).

          Rather than my rambling on any further, I will wait for you to reply as to whether you have any questions or thoughts on the applicability to your application of <mx:States> vs <mx:ViewStack>.

          If you are curious on further reading, following are a few sources:

          Creating Flex Components by Bruce Eckel

          For Flex 2.0 Beginners - Use the mx:States and mx:ViewStack Tags To Change The Application's View
          http://www.brucephillips.name/blog/index.cfm/2007/3/10/For-Flex-20-Beginners--Use-the-mxSt ates-and-mxViewStack-Tags-To-Change-The-Applications-View

          Please post back regarding whether the above answers your question, and if you find it helpful :-)

          Best regards,

          • 2. Re: advice on app design
            g-s-b Level 1
            I use 'states' mostly myself. But my primary states are "pop-in modules." Flex Modules allow the separation of content into externally loaded .swf files. This can be useful in large applications to reduce the initial load time.

            • 3. Re: advice on app design
              perflexed Level 1
              Thanks for the responses and all the info. I've actually got Flex 3.0 for beginners which is turning out to be a really useful book. Your responses have reassured me that I'm on the right track.