<isomorphicXML>

<TreeGrid
    ID="categoryTree"
    dataSource="supplyCategory"
    showHeader="false"
    leaveScrollbarGap="false"
    canAcceptDroppedRecords="true"
    canReparentNodes="false"
    selectionType="single"
    animateFolders="true"
    animateRowsMaxTime="750"
>
    
</TreeGrid>

<HTMLPane
    ID="helpCanvas"
    overflow="auto"
    styleName="defaultBorder"
    padding="10"
    contentsURL="data/completeApplication_helpText.html"
/>

<IButton
    ID="findButton"
    title="Find"
    left="25"
    top="16"
    width="80"
    icon="icons/16/icon_find.png"
    iconWidth="24"
/>

<SearchForm
    ID="findForm"
    dataSource="supplyItem"
    left="130"
    top="10"
    cellPadding="4"
    numCols="6"
>
    <fields>
        <field name="SKU"/>
        <field name="itemName" editorType="ComboBoxItem" optionDataSource="supplyItem" pickListWidth="250"/>
        <field name="findInCategory" editorType="CheckboxItem"
            title="Use category" defaultValue="true"/>
    </fields>
</SearchForm>

<ListGrid
    ID="itemList"
    dataSource="supplyItem"
    useAllDataSourceFields="true"
    canEdit="true"
    modalEditing="true"
    alternateRecordStyles="true"
    canDragRecordsOut="true"
    hoverWidth="200"
    hoverHeight="20"
    selectionType="single"
>
    <fields>
        <field name="itemName" title="Name" showHover="true"/>
        <field name="unitCost" autoFitWidthApproach="both" autoFitWidth="true"
               format="¤,0.00" editorType="SpinnerItem">
            <editorProperties step="0.01"/>
        </field>
        <field name="SKU" canEdit="false" autoFitWidthApproach="value" autoFitWidth="true"/>
        <field name="description" showHover="true"/>
        <field name="category" canEdit="false" autoFitWidthApproach="value" autoFitWidth="true"/>
        <field name="units" canEdit="false" autoFitWidthApproach="both" autoFitWidth="true"/>
        <field name="inStock" width="55" align="center"/>
        <field name="nextShipment" showIf="false"/>
    </fields>

</ListGrid>

<Menu 
    ID="itemListMenu"
>
    <data>
        <item name="newItem" title="Add New Item" icon="icons/16/icon_add.png"/>
        <item name="separator" isSeparator="true"/>
        <item name="showDetails" title="Show Details" icon="icons/16/icon_view.png"/>
        <item name="editItem" title="Edit Item" icon="icons/16/icon_edit.png"/>
        <item name="deleteItem" title="Delete Item" icon="icons/16/icon_delete.png"/>
    </data>
</Menu>

<DetailViewer
    ID="itemViewer"
    dataSource="supplyItem"
    width="100%"
    margin="5"
    emptyMessage="Select an item to view its details"
/>

<DynamicForm
    ID="editForm"
    dataSource="supplyItem"
    useAllDataSourceFields="true"
    width="650"
    numCols="4"
    margin="5"
    cellPadding="5"
    autoFocus="false"
>
    <colWidths>
        <colWidth>80</colWidth>
        <colWidth>200</colWidth>
        <colWidth>100</colWidth>
        <colWidth>200</colWidth>
    </colWidths>
    <fields>
        <field name="SKU"/>
        <field name="description" rowSpan="3" width="200"/>
        <field name="category" editorType="PickTreeItem" dataSource="supplyCategory"
         emptyMenuMessage="No Sub Categories" canSelectParentItems="true"/>
        <field name="unitCost" editorType="SpinnerItem" step="0.01"/>
        <field name="inStock"/>
        <field name="nextShipment" useTextField="true" wrapTitle="false"/>
        <field name="savebtn" editorType="ButtonItem" align="center" 
            width="100" colSpan="4" title="Save Item">
            <click>
                <Action target="editForm" name="saveData"/>
	        </click>
        </field>
    </fields>
</DynamicForm>

<Label
    ID="editorMessage"
    autoDraw="false"
    width="100%"
    height="100%"
    align="center"
    contents="Select a record to edit, or a category to insert a new record into"
/>

<TabSet
    ID="itemDetailTabs"
>    
    <tabs>
        <tab title="View" pane="itemViewer" ID="viewTab" width="70" icon="icons/16/icon_view.png"/>
        <tab title="Edit" pane="editForm" ID="editTab" width="70" icon="icons/16/icon_edit.png"/>
    </tabs>
</TabSet>

<HLayout
    ID="pageLayout"
    width="100%"
    height="100%"
>

<members>
        <SectionStack ID="leftSideLayout" width="280" 
                      showResizeBar="true" visibilityMode="multiple"
                      animateSections="true"
        >
            <sections>
                <SectionStackSection title="Office Supply Categories" autoShow="true">
                    <items><Canvas ref="categoryTree"/></items>
                </SectionStackSection>
                <SectionStackSection title="Instructions" autoShow="true">
                    <items><Canvas ref="helpCanvas"/></items>
                </SectionStackSection>
            </sections>
        </SectionStack>
        <SectionStack ID="rightSideLayout" visibilityMode="multiple"
                      animateSections="true"
        >
            <sections>
                <SectionStackSection title="Find Items" autoShow="true">
                    <items>
                        <Canvas ID="findPane" height="60" overflow="auto"
                                styleName="defaultBorder">
                            <children>
                                <Canvas ref="findForm"/>
                                <Canvas ref="findButton"/>
                            </children>
                        </Canvas>
                    </items>
                </SectionStackSection>
                <SectionStackSection title="Office Supply Items" autoShow="true">
                    <items><Canvas ref="itemList"/></items>
                </SectionStackSection>
                <SectionStackSection title="Item Details" autoShow="true">
                    <items><Canvas ref="itemDetailTabs"/></items>
                </SectionStackSection>
            </sections>
        </SectionStack>
    </members>
</HLayout>

</isomorphicXML>