Notes.mxml

The Notes component knows and controls its direct children, the various Flex Button, TextInput, List, and TextArea components. It also knows the SelectionContext class, which it references in methods and binding expressions. And it knows the NoteVO, ValueObject, and AppEvent classes. It also dispatches AppEvents for adding and selecting a Note.

The Notes component is known only by its parent, the Details component.

<?xml version="1.0" encoding="utf-8"?>
<!-- NOTES -->
<s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:details="com.futurescale.sa.view.component.details.*"
          width="100%" height="100%">
    <fx:Script>
        <![CDATA[
            import com.futurescale.sa.model.vo.NoteVO;
            import com.futurescale.sa.model.vo.ValueObject;
            import com.futurescale.sa.view.context.SelectionContext;
            import com.futurescale.sa.view.event.AppEvent;
            
            import mx.collections.ArrayCollection;
            
             // Selection context
            [Bindable] public var context:SelectionContext;
            
            // Wrap the vector in a collection for the list.
            public function wrapNotes( vo:ValueObject ):ArrayCollection
            {
                var notes:Array = new Array();
                for each (var note:NoteVO in vo.notes) {
                    notes.push(note);
                }
                return new ArrayCollection( notes );
            }
            
            // Add a note to the selected item
            private function addNote():void
            {
                var event:AppEvent = new AppEvent( AppEvent.ADD_NOTE );
                event.data = context.selectedItem;
                dispatchEvent( event );
            }
            
            // Select a note from the selected item's note list
            private function selectNote():void
            {
                var event:AppEvent = new AppEvent( AppEvent.SELECT_NOTE );
                event.data = noteList.selectedItem;
                dispatchEvent( event );
            }
            
            // Provide a label for notes in the list
            private function noteLabelFunction(item:Object):String
            {
                var label:String = "Note ";
                var notes:Vector.<NoteVO> = context.selectedItem.notes;
                for ( var i:int = 0; i<notes.length; i++ ) {
                    if ( notes[i].xml === NoteVO(item).xml ) {
                        label += String(i+1); 
                        break;
                    }
                }
                return label;
            }
                        
            // Update selected note text when edited
            private function textEdit():void
            {
                if (context.note) context.note.text = noteText.text;
            }
            
            // Update selected note URL when edited
            private function urlEdit():void
            {
                if (context.note) context.note.url = noteURL.text;
            }
            
            // Open a browser to view the selected note URL
            private function openURL():void
            {
                var urlRequest:URLRequest = new URLRequest(context.note.url);
                navigateToURL(urlRequest);
            }
        
    </fx:Script>

    <!-- NOTES LIST MANAGEMENT -->
    <s:VGroup height="100%"
              paddingRight="0" paddingLeft="0"
              paddingBottom="5" paddingTop="5">

        <!-- LABEL -->
        <s:HGroup height="30" width="100%" verticalAlign="bottom" >
            <s:Label text="Notes" fontSize="16"/>
        </s:HGroup>
    
        <!-- NOTE LIST -->
        <s:List id="noteList" width="100%" height="100%"
                dataProvider="{ wrapNotes( context.selectedItem ) }" 
                change="selectNote()"
                labelFunction="noteLabelFunction"/>
        
        <!-- NOTE BUTTONS -->
        <s:HGroup width="100%">
            <s:Button label="-"  width="50%"
                      enabled="{noteList.selectedItem != null}"/>
            <s:Button label="+" width="50%" click="addNote()"/>
        </s:HGroup>

    </s:VGroup>

    <!-- NOTE FORM -->
    <s:VGroup height="100%" width="100%" enabled="{context.note != null}"
              paddingRight="5" paddingLeft="5"
              paddingBottom="5" paddingTop="5">

        <!-- NOTE TEXT -->
        <s:TextArea id="noteText" text="{context.note.text}"  
                    prompt="Note Text..." change="textEdit()" 
                    width="100%" height="100%"/>
        
        <!-- NOTE URL -->
        <s:HGroup width="100%" 
                  paddingRight="0" paddingLeft="0"
                  paddingBottom="0" paddingTop="0">

            <!-- URL INPUT -->
            <s:TextInput id="noteURL" width="100%" prompt="Note URL..."
                         text="{context.note.url}" change="urlEdit()"  />
            
            <!-- GO BUTTON -->
            <s:Button label="Go" click="openURL()"
                      enabled="{context.note.url.length != 0}" />    
    
        </s:HGroup>        
        
    </s:VGroup>