Tutorial 38: How to use Paging Components

This tutorial describes how to use Formspider paging components. It shows how to add a paging control mechanism to a Formspider grid using paging components.

Formspider Paging Components

Datasource paging is a classical solution to efficiently display large data in Formspider grids. In such cases, navigating between pages and displaying additional information to the user like the number of total pages existing in the datasource or the current page number of the datasource are vital requirements which arise while displaying a paged data. Formspider introduces paging components in order to meet these requirements and allow you to implement the paging mechanism without writing a single line of PL/SQL code.

The paging components are listed below:

Component Definition
firstPage When pressed, sets the first page as the current page of the datasource assigned to this component
previousPage When pressed, sets the previous page as the current page of the datasource assigned to this component
nextPage When pressed, sets the next page as the current page of the datasource assigned to this component
lastPage When pressed, sets the last page as the current page of the datasource assigned to this component
currentPage Displays the current page number of the datasource assigned to this component
totalPage Displays the number of total pages existing in the datasource assigned to this component

You may click here to run the completed application.

Open Formspider IDE and click “New Application” under the “File” menu. The “New Application” dialog shows up. Enter “pagingComponents” as the name of the application and “HR” as its Datasource Schema name.  If you are using Formspider Online, you do not need to enter database schema name since your account is already configured to use your online database. Leave other fields empty and click “OK”. This creates the “pagingComponents” application with a default mainframe (called “mainFrame”) and a default panel (called “mainPanel”).

Creating Model

Expand the Datasource Definitions accordion, select the “Datasource Definitions” node and click the “+” button. Alternatively, you may right click the “Datasource Definitions” node and select “New” from the pop up menu. The “New Datasource Definition” Dialog shows up. Ensure that the “Table” radio button is selected and pick “EMPLOYEES” table from the combo box. Note that the combo box shows a list of all tables in your Datasource Schema “HR”. Also ensure that the “Create Datasource” checkbox is ticked. Please note that the Formspider IDE automatically assigned the name “EMPLOYEES” to your datasource definition and picked the “EMPLOYEE_ID” as its Primary Key.

Creating “EMPLOYEES” datasource definition

Click “OK” to save and close the “New Datasource Definition” dialog. This creates the “EMPLOYEES” datasource definition and the “EMPLOYEES1″ datasource. You will use the “EMPLOYEES1” datasource as the datasource of your grid.

Expand “Datasource Definitions” node, then “EMPLOYEES” node and “Datasources” node to display “EMPLOYEES1” node on the tree. Double click the “EMPLOYEES1” node to edit the “EMPLOYEES1” datasource. In order to enable paging on this datasource and display 10 rows per page, set “Rows per Page” attribute to 10. Click “OK” to save your changes.

Enter 10 as “Rows per Page” attribute

Creating User Interface

Double click the “mainPanel” under the “Panels” node of the “Containers” navigation tree to open it in the editor. Add a grid displaying “First Name”, “Last Name”, “Hire Date”, “Email”, “Phone” and “Salary” information of the employees using “EMPLOYEES1” datasource that you have created recently. Your panel XML should look like;

<panel>
  <tableLayout cellSpacing="5">
    <row height="228">
      <cell hAlign="Full" vAlign="Full">
        <grid name="grid_employees" dataSource="EMPLOYEES1">
          <column headerLabel="First Name">
            <textLabel column="FIRST_NAME"/>
          </column>
          <column headerLabel="Last Name">
            <textLabel column="LAST_NAME"/>
          </column>
          <column headerLabel="Hire Date">
            <textLabel dateFormat="DD/MM/YYYY" column="HIRE_DATE"/>
          </column>
          <column headerLabel="Email">
            <textLabel column="EMAIL"/>
          </column>
          <column headerLabel="Phone">
            <textLabel column="PHONE_NUMBER"/>
          </column>
          <column headerLabel="Salary">
            <textLabel numberMask="#,###" column="SALARY"/>
          </column>
        </grid>
      </cell>
    </row>
  </tableLayout>
</panel>

Add a new panel containing the paging components. This panel allows you to navigate between the pages of the “EMPLOYEES1” datasource and diplay the total page count and the current page number of this datasource.

Expand the “Containers” accordion, select the “Panels” node in the navigation tree and click the “+” button to create a new panel. Alternatively, you may right click the “Panels” node and select the “New” menu item from the pop-up menu. The “New Panel” dialog will show up. Enter “pagingPanel” as the name of the panel. Click “OK” to create and open the panel in the editor.

Creating “pagingPanel”

Add all paging components into the “pagingPanel” and assign “EMPLOYEES1” as the datasource of the each paging component:

<panel>
  <tableLayout cellSpacing="5">
    <row height="20">
      <cell/>
      <cell width="20">
        <firstPage tooltip="First Page" dataSource="EMPLOYEES1"/>
      </cell>
      <cell width="20">
        <previousPage tooltip="Previous Page" dataSource="EMPLOYEES1"/>
      </cell>
      <cell width="auto">
        <currentPage dataSource="EMPLOYEES1"/>
      </cell>
      <cell width="auto">
        <textLabel label="/"/>
      </cell>
      <cell width="auto">
        <totalPage dataSource="EMPLOYEES1"/>
      </cell>
      <cell width="20">
        <nextPage tooltip="Next Page" dataSource="EMPLOYEES1"/>
      </cell>
      <cell width="20">
        <lastPage tooltip="Last Page" dataSource="EMPLOYEES1"/>
      </cell>
      <cell/>
    </row>
  </tableLayout>
</panel>

Include the “pagingPanel” to the “mainPanel”. The “mainPanel” XML should look like;

<panel>
  <tableLayout cellSpacing="5">
    <row height="228">
      <cell hAlign="Full" vAlign="Full">
        <grid name="grid_employees" dataSource="EMPLOYEES1">
          <column headerLabel="First Name">
            <textLabel column="FIRST_NAME"/>
          </column>
          <column headerLabel="Last Name">
            <textLabel column="LAST_NAME"/>
          </column>
          <column headerLabel="Hire Date">
            <textLabel column="HIRE_DATE" dateFormat="DD/MM/YYYY"/>
          </column>
          <column headerLabel="Email">
            <textLabel column="EMAIL"/>
          </column>
          <column headerLabel="Phone">
            <textLabel column="PHONE_NUMBER"/>
          </column>
          <column headerLabel="Salary">
            <textLabel column="SALARY" numberMask="#,###"/>
          </column>
        </grid>
      </cell>
    </row>
    <row height="30">
      <cell hAlign="Full" vAlign="Full">
        <include panelName="pagingPanel"/>
      </cell>
    </row>
  </tableLayout>
</panel>

Press “Run on Web” to run your application. Note that the firstPage, lastPage, previousPage and nextPage components are displayed with their default icons. You can always change these icons using the “icon” attribute of these components. Also, note that while navigating between pages through the paging components, Formspider automatically manages the enable state of the firstPage, lastPage, previousPage and nextPage components and the values of the currentPage and the totalPage.

You may click here to run the application.

Paging control mechanism established without writing a single line of PL/SQL