ChapterTile.mxml

The ChapterTile component knows and controls its direct children, the Flex HGroup, and custom SceneTile and AddTile components. It also knows the SelectionContext class, which it passes to the tile components, and the SceneVO and ChapterVO, which it uses to create the appropriate tile components. Finally, it knows the AppEvent class, which it uses to inform the AddTile of the appropriate event to dispatch.

The ChapterTile component is known only by its two possible parents, the StoryTile and PartTile components.

<?xml version="1.0" encoding="utf-8"?>
<!-- CHAPTER TILE -->
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx"
          height="100%" width="100%">

    <fx:Script>
        <![CDATA[
            import com.futurescale.sa.model.vo.ChapterVO;
            import com.futurescale.sa.model.vo.SceneVO;
            import com.futurescale.sa.view.context.SelectionContext;
            import com.futurescale.sa.view.event.AppEvent;
            
            // Selection context
            [Bindable] public var context:SelectionContext;
            
            // The Chapter
            [Bindable] public var chapter:ChapterVO;
            
            // Remove or add tiles according to the selected Chapter
            private function changeChapterSelection( selection:Boolean ):Boolean
            {
                if (!selection) {
                    removeTiles();
                } else {
                    createTiles();
                }
                return selection;
            }
            
            // Create Tiles
            private function createTiles():void
            {
                // Create SceneTiles
                removeTiles();
                var scenes:Vector.<SceneVO> = chapter.scenes;
                for (var i:int=0; i<scenes.length; i++ ) {
                    var sceneTile:SceneTile = new SceneTile();
                    sceneTile.context = context;
                    sceneTile.scene   = scenes[i];
                    sceneGroup.addElement( sceneTile );
                }
                
                // Create 'Add Scene' Tile
                var addTile:AddTile = new AddTile();
                addTile.addType     = AppEvent.ADD_SCENE;
                addTile.addTarget   = chapter;
                addTile.addArgument = (context.part)?context.part:context.story;
                sceneGroup.addElement( addTile );
                sceneGroup.percentHeight=100;
            }

            // Remove tiles
            private function removeTiles():void
            {
                sceneGroup.removeAllElements();
                sceneGroup.percentHeight=0;
            }
            
            // Toggle the Chapter selection 
            private function selectChapter():void
            {
                var event:AppEvent;
                if (chapterButton.selected) {
                    event = new AppEvent(AppEvent.SELECT_CHAPTER);
                } else {
                    event = new AppEvent(AppEvent.DESELECT_CHAPTER);
                    removeTiles();
                }
                event.data    = chapter;
                event.related = (context.part)?context.part:context.story;
                dispatchEvent(event);
            }
            
        
    </fx:Script>

    <!-- SCENE GROUP -->
    <s:HGroup id="sceneGroup" width="100%"/>
    
    <!-- CHAPTER BUTTON -->
    <s:ToggleButton id="chapterButton" click="selectChapter()"
                    selected="{changeChapterSelection(context.chapter.uid == chapter.uid)}"
                    height="100%" width="100%" minWidth="150" minHeight="25"
                    label="{chapter.name}"/>

</s:VGroup>