|
Navigator is a control element to navigate over the MoreMotion data sources.
<table cellspacing="0" cellpadding="0" width="400" height="20" class="navigator default"
mo:type="Navigator" mo:name="NavLite1"
mo:props="
dataSource : 'products'
,pagingInfo : '{/root/products/paging-info}'
,submitType : '1. Http Get'
,beforeSubmitFunc : BeforeSubmit
/* Ajax Navigation Parameters */
,commandName : 'NavigateOnProductList'
,busyImage : 'BI1'
,callbackFunc : 'CallMe'
,errorHandler : 'MyErrorHandler'
">
<tr>
<td width="20" height="20" class="firstPage"/></td>
<td width="20" class="previousPage"></td>
<td width="42"><input type="text" class="currentPage" style="width:42px"></td>
<td width="20" class="nextPage"></td>
<td width="20" class="lastPage"></td>
<!-- optional -->
<td width="42"><input type="text" class="itemsPerPage" style="width:42px"/></td>
</tr>
</table>
|
See Navigator Function Class In the MoreMotion Face API.
This element requires that the following files are linked to the page in the HEAD section of the HTML document.
<head>
...
<link rel="stylesheet" type="text/css" href="moremotion/face/c/default/0.css"></link>
<script type="text/javascript" src="moremotion/face/Navigator/Navigator.js"></script>
</head>
|
If you prefer to use your own CSS styles then link another css file instead of Navigator/default/0.css.
dataSource
The name of the data source. This name links to a dataSource configuration element through a dataRequest configuration element. The data source must have itemsPerPage parameter.
pagingInfo
This property must be bind to the "paging-info" node of the data source to obtain the current paging information. The definition
{/root/products/paging-info} means that the paging information is taken from the products data source.
submitType
The submit type of the navigation requests. The valid values are "1. Http Get", "2. Http Post" and "3. Ajax".
commandName
The name of the navigation command. If the submitType is "3. Ajax" then this name links to a ajaxCommand configuration element.
busyImage
The HTML Id or the object handle of and HTML element that will be visible until the navigation operation is completed.
callbackFunc
The name of a Javascript function to be called after the Ajax navigation is completed. The function receives a MultiPartAjaxResponse object as the parameter.
errorHandler
The name of a Javascript function to be called when an error occurs during the Ajax navigation. The function receives Exception and AjaxResponse objects as the parameters.
In order Navigator to work there has to be a data source and optionally an Ajax command definitions in the MoreMotion configuration as follows.
<!-- Data source configuration. Note that itemsPerPage property is defined -->
<dataSource name="products" basedon="mor.RelDB.RelDBQueryDataService">
<conn>SuperStore</conn>
<scope>Request</scope>
<query>SELECT * FROM products</query>
<itemsPerPage>10</itemsPerPage>
</dataSource>
<dataRequest name="products" selectAll="true" />
<!-- Ajax command configuration; required if submitType is 3 -->
<ajaxProcessCommand name="NavigateOnProductList">
<processTemplate name="NavigateOnProductList"/>
</ajaxProcessCommand>
<processTemplate name="NavigateOnProductList">
<callProcess name="RefreshProductList" />
</processTemplate>
<process name="RefreshProductList" basedon="mor.Ajax.RefreshAreasProcess">
<sourceAreas>/ProductsPage.ProductListArea</sourceAreas>
<targetAreas>ProductListArea</targetAreas>
<responseHandler>AjaxMgr.refreshAreasResponseHandler</responseHandler>
</process>
|
| 
