<![CDATA[
<!-- Load the different controls we are using -->
<s:include b:url="{concat($bpc_controlpath, 'b-menubar/b-menubar.xml')}" />
<!-- The behavior for the tree, when a user is clicking on a tree-leaf this command is runned.
1. First it sets the new b:url on the b:list.
2. It sets the b:list that it's dirty
3. It triggers the 'select-page' on the b:list which cause the list to refresh the data
4. It sets the Header next to the search to the b:label value
More information on how the data is loaded inside the b:list can be found inside that custom control.
-->
<s:behavior b:name="myTreeLeaf">
<s:event b:on="command">
<s:task b:action="set" b:target="id('LIST')/b:listgrid/@b:url" b:value="{concat('data/',@b:url)}" />
<s:task b:action="set" b:target="id('LIST')/b:listgrid/@b:dirty" b:value="true"/>
<s:task b:action="settext" b:target="id('HEADER')" b:value="{@b:label}"/>
<s:task b:action="trigger" b:event="select-page" b:target="id('LIST')/b:listgrid" />
<s:script><!--
var aResult = bpc.xpath('id(\'LIST\')/b:listgrid/html()//tbody/tr');
for(var i = 0; i < aResult.length; i++){
aResult[i].onmouseout = function(){bpc.removeClass('b-listrow-hov',this);};
aResult[i].onmouseover = function(){bpc.addClass('b-listrow-hov',this);};
}
--></s:script>
</s:event>
</s:behavior>
<!-- MAIN INTERFACE
These 4 div's are used to create the rounded curves -->
<div id="wrapper4" class="container">
<div id="wrapper3" class="container">
<div id="wrapper2" class="container">
<div id="wrapper1" class="container">
<!-- This panelset creates the panels for the
1. Menubar, the menubar is inside an s:include, The root level element of
the menubar.xml file is a b:panel so it will match the panelset
2. Toolbar, the b:toolbar contains standard b:toolbaritem with a Image and some text in a span
some of them have also an b:action defined
3. Viewing area, containing the tree pane and reading / viewing pane
-->
<b:panelset b:rows="25px 27px *" style="position: relative;">
<!-- b:menubar -->
<s:include b:url="menubar.xml"/>
<!-- b:toolbar -->
<b:panel>
<b:toolbar>
<b:toolbaritem style="width:120px;">
<img style="height:14px; width:26px;" src="gfx/send.gif" />
<span>Send/Receive</span>
</b:toolbaritem>
<b:toolbaritem style="width:70px;" b:action="select" b:target="id('MODAL')">
<img style="height:16px; width:20px;" src="gfx/compose.gif" />
<span>Write</span>
</b:toolbaritem>
<b:toolbaritem style="width:70px;">
<img style="height:16px; width:20px;" src="gfx/reply.gif" />
<span>Reply</span>
</b:toolbaritem>
<b:toolbaritem style="width:75px;" b:action="focus" b:target="id('SEARCH')//input">
<img style="height:16px; width:16px;" src="gfx/preview.gif" />
<span>Search</span>
</b:toolbaritem>
<b:toolbaritem style="width:75px;">
<img style="height:18px; width:18px;" src="gfx/print.gif" />
<span>Print</span>
</b:toolbaritem>
<b:toolbaritem style="width:75px;">
<img style="height:18px; width:18px;" src="gfx/help.gif" />
<span>Help</span>
</b:toolbaritem>
</b:toolbar>
</b:panel>
<!-- Viewing area panelset. This panelset contains 2 panels, the first panel has the attribute b:resize="e" which mean you
can resize the east side of this panel if desired. -->
<b:panelset b:cols="280px *">
<b:panel b:resize="e">
<!-- b:navpanel their are 4 navpanel sections defined, They can be filled in later at own leisure.
The first navpanelsection contains a b:tree, notice that the tree leaves have a b:url and b:behavior defined.
The b:url values are used inside the custom behavior 'myTreeLeaf' which we defined in the beginning of this file. -->
<b:navpanel>
<b:navpanelhead>Mail</b:navpanelhead>
<b:navpanelbody>
<b:tree b:label="contact@backbase.com" b:root="true" b:open="true">
<b:tree b:label="Inbox" b:open="true" b:state="selected">
<b:tree b:behavior="myTreeLeaf" b:label="Work" b:url="list-work.xml"/>
<b:tree b:behavior="myTreeLeaf" b:label="Private" b:url="list-private.xml"/>
</b:tree>
<b:tree b:behavior="myTreeLeaf" b:label="Sent Items" b:url="list-sent.xml"/>
<b:tree b:behavior="myTreeLeaf" b:label="Drafts" b:url="list-drafts.xml"/>
<b:tree b:behavior="myTreeLeaf" b:label="Deleted Items" b:url="list-deleted.xml"/>
</b:tree>
</b:navpanelbody>
<b:navpanelhead>Calendar</b:navpanelhead>
<b:navpanelbody>
<p>...text here...</p>
<p>...text here...</p>
</b:navpanelbody>
<b:navpanelhead>Contacts</b:navpanelhead>
<b:navpanelbody>
<p>...text here...</p>
<p>...text here...</p>
</b:navpanelbody>
<b:navpanelhead>Tasks</b:navpanelhead>
<b:navpanelbody>
<p>...text here...</p>
<p>...text here...</p>
</b:navpanelbody>
<b:navpanelhead>Notes</b:navpanelhead>
<b:navpanelbody>
<p>...text here...</p>
<p>...text here...</p>
</b:navpanelbody>
</b:navpanel>
</b:panel>
<b:panelset b:rows="26px 220px *">
<!-- header / search panel
This panelset it's fairly simple it contains the header panel which display's the header
and the search panel which displays an input which executes a javascript function defined
at the beginning of this file -->
<b:panelset b:cols="* 250px">
<b:panel id="HEADER">Inbox</b:panel>
<b:panel id="SEARCH">
<label>Look for</label>
<input type="text" onkeyup="filter_rows( this.value )"/>
</b:panel>
</b:panelset>
<!-- the b:listgrid has also a custom defined action on command. This is to load the message when a user clicks
on a row. Because we do not use paging with the b:listgrid the b:page-cache is set to 1 so that it will always refresh when using the 'select-page' event
1. It check if it's a TD we are clicking on.
2. It sets the H1 text of the viewing pane to the value of the first row
3. It loads the content by using b:action="load" using a composed( by xpath) b:url.
4. It will deselect the previous selected row if their was one
5. Call the s:super to execute the commmand event on the default behavior. -->
<b:panel id="LIST" b:resize="s" style="overflow:hidden;">
<b:listgrid b:page-cache="1" style="height:100%;width:100%;">
<s:event b:on="sort-column" b:action="sort" b:target="b:listgridbody/html()/table/thead/tr/th[$currentPosition]" b:reverse="true" b:type="{$sorttype}" />
<b:listgridhead>
<b:listgridrow>
<b:listgridheadcell>Movie</b:listgridheadcell>
<b:listgridheadcell>Genre</b:listgridheadcell>
<b:listgridheadcell>Director</b:listgridheadcell>
<b:listgridheadcell>Language</b:listgridheadcell>
</b:listgridrow>
</b:listgridhead>
<b:listgridbody />
<s:event b:on="command">
<s:if b:test="$bpc_focusCurrentElement">
<s:if b:test="$bpc_focusCurrentElement/object::nodeName = 'TD'">
<s:task b:action="set" b:target="id('VIEW')/h1/text()" b:value="{$bpc_focusCurrentElement/../td[1]/div/text()}"/>
<s:task b:action="load" b:url="{concat('data/view-' , $bpc_focusCurrentElement/../@uid , '.xml')}" b:destination="id('VIEW')/div" b:mode="replace"/>
</s:if>
</s:if>
<s:super />
</s:event>
</b:listgrid>
</b:panel>
<!-- viewing panel The values are filled in by the actions defined in the command event in the b:list -->
<b:panel id="VIEW">
<h1>Header</h1>
<div/>
</b:panel>
</b:panelset>
</b:panelset>
</b:panelset>
</div>
</div>
</div>
</div>
<!-- b:modal, This modal is used as example to compose a new mail and it's made visible when you press the 'Write' b:toolbaritem,
because of b:action="select" b:target="id('MODAL')". In this starterkit the form doesnt execute anything when you press Send or Cancel.
It's just closing the b:modal.
-->
<b:modal id="MODAL">
<b:modalhead>Compose e-mail</b:modalhead>
<b:modalbody><form action="">
<br />
<p><label>To:</label><input type="text"/></p>
<p><label>Subject:</label><input type="text"/></p>
<textarea></textarea>
<div>
<b:button b:action="trigger" b:event="close" b:target="id('MODAL')">Send</b:button>
<b:button b:action="trigger" b:event="close" b:target="id('MODAL')">Cancel</b:button>
</div>
</form></b:modalbody>
</b:modal>
]]>