Download Safari Books Online apps: Apple iOS | Android

Entire Site

Safari Books Online

    Free Trial

    Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


    • Create BookmarkCreate Bookmark
    • Create Note or TagCreate Note or Tag
    • DownloadDownload
    • PrintPrint
    Share this Page URL
    Help

    A Tale of Two Views > The Story Chooser

    The Story Chooser

    UI - The Story Chooser

    Figure 4-3. UI - The Story Chooser

    Class

    StoryChooser.mxml

    Responsibilities

    • Declare a list for displaying the StoryVOs for selection

    • Declare and layout the various buttons for acting on a selection

    • Control visibility and layout inclusion for buttons based on selection

    • Declare a prominent “Add” (+) button for adding a new Story

    • Dispatch appropriate events when buttons are pressed

    Collaborations

    The StoryChooser knows and controls its direct children: Flex Button, Label, and List components. It also knows the AppEvent class, which it constructs and dispatches in response to certain button presses.

    The StoryChooser is known only by its parent, the Chooser component.

    Code

    <?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          minWidth="390" minHeight="290">
    
    <fx:Script>
        <![CDATA[
            import com.futurescale.sa.view.event.AppEvent;
            
            import mx.collections.ArrayCollection;
            
            // The list of StoryVOs
            [Bindable] public var storyList:ArrayCollection;

            // Create and dispatch an AppEvent
            private function sendEvent( type:String, data:Object=null ):void
            {
                dispatchEvent( new AppEvent(type,data ) );
            }            
        
    </fx:Script>

    <!-- CHOOSER HEADER -->
    <s:HGroup fontSize="24" verticalAlign="middle"
              width="100%" height="50">
        
        <!-- TITLE -->
        <s:Label text="Story" width="100%"/>
        
        <!-- ADD BUTTON-->
        <s:Button label="+" width="50" height="100%"
                   click="sendEvent( AppEvent.ADD_STORY )" />
        
    </s:HGroup>
    
    <!-- STORY LIST-->
    <s:List labelField="name" id="lstStories"
            dataProvider="{storyList}" fontSize="16" 
            width="100%" height="100%"/>

    <!-- CONTROLS -->
    <s:HGroup fontSize="16" verticalAlign="middle" 
              visible="{lstStories.selectedItem != null}"
              includeInLayout="{lstStories.selectedItem != null}"
              width="100%" height="100">
        
        <!-- CAST / MILIEU -->
        <s:VGroup height="100%" width="25%">
            <s:Button label="Cast"   height="50%" width="100%"/>
            <s:Button label="Milieu" height="50%" width="100%"/>
        </s:VGroup>

        <!-- NOTES / OUTLINE -->
        <s:VGroup height="100%" width="25%">
            <s:Button label="Notes"   height="50%" width="100%"/>
            <s:Button label="Outline" height="50%" width="100%"/>
        </s:VGroup>

        <!-- MANAGE / EXPORT -->
        <s:VGroup height="100%" width="25%">
            
            <!-- MANAGE -->
            <s:Button label="Manage" height="50%" width="100%"
                      click="sendEvent( AppEvent.MANAGE_STORY, 
                                          lstStories.selectedItem )" />
            <!-- EXPORT-->
            <s:Button label="Export" height="50%" width="100%"/>
        </s:VGroup>

        <!-- WRITE -->
        <s:Button label="Write" fontSize="24" 
                  click="sendEvent( AppEvent.EDIT_STORY, 
                                      lstStories.selectedItem )"
                  height="100%" width="25%"/>

    </s:HGroup>
    
</s:VGroup>