Tutorial 14: Paging a grid in Formspider (Deprecated)

Note: The paging techniques explained in this tutorial are deprecated. Please click here to discover paging components which are introduced in Formspider Release 1.0

In this tutorial, you will see how to add a paging control to a Formspider Grid Component. Please first read Tutorial 5 : How to show data from a table, to learn the basics of the Formspider Grid Component.

Although Formspider doesn’t have a Paging Component yet, we can add this feature to our data grid in a few basic steps. Below is the image of a basic data grid and it’s navigation (paging) controls.

Open Formspider IDE and create a new Formspider Application named PagingTest. If you are using Formspider Local Installation, use the HR schema as the Datasource Schema. If you are using Formspider Online, then you already have a schema assigned to your account. You can connect to this schema by using the connection information under Tools>User Settings in the IDE Menu.

1 – Creating the Datasource Definition

Expand the Datasource Definiton accordion, select the Datasource Definitions and click the ”+” button. The new Datasource Definition Dialog will show up.
Ensure that Table radio button is selected and pick COUNTRIES table from the combobox. Also ensure that Create Datasource checkbox is checked. Click OK to save and close the New Datasource Definition Dialog. This will create the “COUNTRIES” Datasource Definition and it’s default “COUNTRIES1” Datasource.

2 – Editing the Datasource

Double click the datasource “COUNTRIES1″ and set Rows per Page attribute to 10. Click OK to save your changes and create a grid component and bind your datasource to it as shown below in the mainPanel XML.
<panel>
  <tableLayout cellSpacing="10">
    <row heightPolicy="Dynamic">
      <cell hAlign="Full" vAlign="Full">
        <grid name="countriesGrid" dataSource="COUNTRIES1">
          <column headerLabel="Country Code" width="100">
            <textLabel column="COUNTRY_ID"/>
          </column>
          <column headerLabel="Country Name">
            <textLabel column="COUNTRY_NAME"/>
          </column>
        </grid>
      </cell>
    </row>
  </tableLayout>
</panel>
If you run your application at this stage, by hitting F7 key, you will see that the grid displays on the the 10 rows in the first page of the datasource. There is no way to navigate to other pages yet. Next, you will create buttons to navigate to the other pages in the datasource.
Start by creating database procedures that will perform the paging in the datasource.

3 – Creating database procedures

Here is the source code of paging_pkg package.

Package Spec;

PACKAGE PAGING_PKG
  IS
  g_rowsperpage_nr number:=10;
  procedure adjustPaging;
  procedure lastPage;
  function getTotalPage return number;
  procedure firstPage;
  procedure nextPage;
  procedure previousPage;
END;

Package Body;

PACKAGE BODY paging_pkg IS
function getTotalPage return number is
begin
  return ceil(api_datasource.getrowcount('COUNTRIES1')/g_rowsperpage_nr);
end getTotalPage;
--------------------------------------------------------------------------------
procedure adjustPaging is
  v_totalPage_nr    NUMBER;
  v_currentPage_nr  NUMBER;
begin
  v_totalPage_nr := getTotalPage;
  v_currentPage_nr := api_datasource.getCurrentPage('COUNTRIES1');

  if v_currentPage_nr > v_totalPage_nr then
    if v_currentPage_nr <> 0 then
      api_datasource.setPage('COUNTRIES1',1,g_rowsPerPage_nr);
    end if;
  end if;

  api_component.setlabel('pageNavigator.pagingLabel',v_currentPage_nr||
                                  ' / '||v_totalPage_nr);

  if v_currentPage_nr <= 1 then
    api_component.setEnable('pageNavigator.firstButton','N');
    api_component.setEnable('pageNavigator.previousButton','N');
    api_component.setEnable('pageNavigator.nextButton','Y');
    api_component.setEnable('pageNavigator.lastButton','Y');
  elsif v_currentPage_nr = 1 then
    api_component.setEnable('pageNavigator.firstButton','N');
    api_component.setEnable('pageNavigator.previousButton','N');
    api_component.setEnable('pageNavigator.nextButton','Y');
    api_component.setEnable('pageNavigator.lastButton','Y');
  elsif v_currentPage_nr = v_totalPage_nr then
    api_component.setEnable('pageNavigator.firstButton','Y');
    api_component.setEnable('pageNavigator.previousButton','Y');
    api_component.setEnable('pageNavigator.nextButton','N');
    api_component.setEnable('pageNavigator.lastButton','N');
  else

    api_component.setEnable('pageNavigator.firstButton','Y');
    api_component.setEnable('pageNavigator.previousButton','Y');
    api_component.setEnable('pageNavigator.nextButton','Y');
    api_component.setEnable('pageNavigator.lastButton','Y');
  end if;

end adjustPaging ;
--------------------------------------------------------------------------------
procedure nextPage is
begin
  api_datasource.nextpage('COUNTRIES1');
  adjustPaging;
end nextPage;
--------------------------------------------------------------------------------
procedure previousPage is
begin
  api_datasource.previouspage('COUNTRIES1');
  adjustPaging;
end previousPage;
--------------------------------------------------------------------------------
procedure firstPage is
begin
  api_datasource.setpage('COUNTRIES1',1,g_rowsperpage_nr);
  adjustPaging;
end firstPage;
--------------------------------------------------------------------------------
procedure lastPage is
begin
  api_datasource.setpage('COUNTRIES1',gettotalpage,g_rowsperpage_nr);
  adjustPaging;
end lastPage;
--------------------------------------------------------------------------------
END;
You will easily realize that most of the procedures above are rather straightforward. There is only one procedure worth explanation; adjustPaging. AdjustPaging is used in every procedure. It has two purposes: updating the “currentPage vs. #ofPages” label, and enabling/disabling paging control buttons.

4 – Creating actions in Formspider IDE

At this step, you will register the PL/SQL procedures you created to your application as Formspider actions. Each procedure will turn into a Formspider action. The steps below explain how to create the firstPage action. The rest of the actions are created in the same way.

Open Actions accordion in Formspider IDE and right click actions root node in the tree. Then click New menuitem, which will bring a new action dialog. Fill the fields according to the screenshot below.

Then click OK.
This completes the creation of the firstPage action. Create the “previousPage”, “nextPage” and “lastPage” actions accordingly.

5 – Creating paging control panel and navigation buttons

Create a panel named “pageNavigator” using the XML below.
<panel>
  <tableLayout cellSpacing="5">
    <row height="20">
      <cell width="20">
        <button name="firstButton" icon="/resources/demoIcons/first.png">
          <events>
            <buttonPress action="firstPage"/>
          </events>
        </button>
      </cell>
      <cell width="20">
        <button name="previousButton" icon="/resources/demoIcons/previous.png">
          <events>
            <buttonPress action="previousPage"/>
          </events>
        </button>
      </cell>
      <cell width="auto">
        <textLabel name="pagingLabel" label="1/10" text-align="Center"/>
      </cell>
      <cell width="20">
        <button name="nextButton" icon="/resources/demoIcons/next.png">
          <events>
            <buttonPress action="nextPage"/>
          </events>
        </button>
      </cell>
      <cell width="20">
        <button name="lastButton" icon="/resources/demoIcons/last.png">
          <events>
            <buttonPress action="lastPage"/>
          </events>
        </button>
      </cell>
    </row>
  </tableLayout>
</panel>
If you are using Formspider Online IDE, you dont need to worry about icon files. We put them in correct places for you. If you are using a local Formspider installation, you need to add icon files to your resources folder under $tomcat_directory\web_apps\formspider. You can download icon files from here.

6 – Including pageNavigator into mainPanel

Include pageNavigator panel into mainPanel as a row below the grid.
<row>
  <cell>
    <include panelName="pageNavigator"/>
  </cell>
</row>
If you run the application, this time you will see a grid with 10 rows, and four buttons below the grid for navigation. If you click the “>” button, you will see that next 10 rows will be shown in the grid.