Navigator

Top  Previous  Next

Navigator is a control element to navigate over the MoreMotion data sources.

  <table cellspacing="0" cellpadding="0" width="400" height="20" 
         mo:type="Navigator" mo:name="NavLite1" mo:needsInit="true"
         mo:props="
            dataSource     : 'products', 
            pagingInfo     : '{/root/products/paging-info}',
            classPrefix    : 'navdefault', 
            submitType     : '1. Http Get', 
 
         /* Ajax Navigation Parameters */
            commandName    : 'NavigateOnProductList',
            busyImage      : 'BI1', 
            callbackFunc   : 'CallMe', 
            errorHandler   : 'MyErrorHandler' 
         ">
    <tr><td width="1" height="20"></td>
     
    <td width="20" valign="top"><a href="#" onclick="NavMgr.navigateTo(this,'firstPage')">
      <img name="imgMoveFirst" src="moremotion/face/Navigators/images/1.gif" border="0"></img></a></td>

    <!-- Optional: Can be deleted when pagesPerBlock is 0 -->
    <td width="2"/><td width="20" valign="top"><a href="#" onclick="NavMgr.navigateTo(this,'previousBlock')">
      <img name="imgJumpPrevious" src="moremotion/face/Navigators/images/2.gif" border="0"></img></a></td>

    <td width="2"/><td width="20" valign="top"><a href="#" onclick="NavMgr.navigateTo(this,'previousPage')">
      <img name="imgMovePrevious" src="moremotion/face/Navigators/images/3.gif" border="0"></img></a></td>

    <td width="2"/><td width="42" valign="top">
      <input name="currentPage" type="text" onchange="NavMgr.navigateTo(this,this.value)" 
             onclick="this.select()" onkeyup="NavMgr.keyUp(this,event)" mo:type="NavigatorCurrentPage" 
             style="width:42px;text-align:center"/></td>
      
    <td width="2"/><td width="20" valign="top"><a href="#" onclick="NavMgr.navigateTo(this,'nextPage')">
      <img name="imgMoveNext" src="moremotion/face/Navigators/images/4.gif" border="0"></img></a></td>

    <!-- Optional: Can be deleted when pagesPerBlock is 0 -->
    <td width="2"/><td width="20" valign="top"><a href="#" onclick="NavMgr.navigateTo(this,'nextBlock')">
      <img name="imgJumpNext" src="moremotion/face/Navigators/images/5.gif" border="0"></img></a></td>
 
    <td width="2"/><td width="20" valign="top"><a href="#" onclick="NavMgr.navigateTo(this,'lastPage')">
      <img name="imgMoveLast" src="moremotion/face/Navigators/images/6.gif" border="0"></img></a></td>
 
    <!-- Optional: Can be deleted when pagesPerBlock is 0 -->
    <td width="7"/><td width="100%" mo:type="NavigatorPageIndex">1 2 3 4 5 ..</td>

    <!-- Optional: It is used top allow the user to change the itemsPerPage setting on the page -->
    <input type="text" onclick="this.select()" 
           onkeyup="NavMgr.keyUp(this,event)" mo:type="NavigatorItemsPerPage" />
 
    <!-- Optional: It is used top allow the user to change the pagesPerBlock setting on the page -->
    <input type="text" onclick="this.select()" 
           onkeyup="NavMgr.keyUp(this,event)" mo:type="NavigatorPagesPerBlock" />

    <td width="25"/></tr>
 
 
  </table>

 
See Navigator Function Class In the MoreMotion Face API.

 
Required Files

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/Navigators/Navigator.css"></link>
    <script type="text/javascript" src="moremotion/face/Navigator/Filer.js"></script>
  </head>

 

Properties

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 and may have pagesPerBlock parameters. When pagesPerBlock parameter is specified then the data service returns the total number of records to let the navigator know know how may pages are available.

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.

classPrefix

The default prefix for the CSS classes used by the Navigator elements is 'navdefault'. See moremotion/face/Navigators/Navigator.css file. If you intend to use more than one navigator with different styles you can include more CSS files and define the class prefix in this property.

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.

 

AjaxCommand Configuration

If submitType property is "3" then the navigation requests to the server are sent with Ajax. If that is the case then the definitions similar to the following should be made in the MoreMotion configuration.

  <ajaxProcessCommand name="NavigateOnProductList">
    <processTemplate name="NavigateOnProductList"/>
  </ajaxProcessCommand>
 
  <processTemplate name="NavigateOnProductList">
    <callProcess name="RefreshProductList" />
  </processTemplate>
  
  <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" />
 
  <process name="RefreshProductList" basedon="mor.Ajax.RefreshAreasProcess">
    <sourceAreas>/ProductsPage.ProductListArea</sourceAreas>
    <targetAreas>ProductListArea</targetAreas>
    <responseHandler>AjaxMgr.refreshAreasResponseHandler</responseHandler>
  </process>