Paging Buttons Builder

 

 

In this topic ...

Quick Tips

Specifying Inputs

Customizing the Paging Buttons

 

Related Topics ...

How to Use the Paging Assistant Builder

Javadoc for the PagingAssistant class

Overview: Creating Forms

Displaying Data

The Paging Buttons builder adds a set of buttons to a page in the model for navigating through a data set specified in a Paging Assistant builder call. The look and feel of the paging buttons is defined by the images used for the buttons and the Imported Page that gets inserted into the specified location.

We can customize the appearance of the paging buttons by specifying non-default images and creating your own HTML page that displays the buttons.

 

Quick Tips

  • Changing button images -- We can change the images used for the paging buttons by specifying the new image files to use for each button.

Note that If you specify a new image for one button, specify image files for all the other buttons as well. Otherwise the one image will be used for all the buttons.

 

Specifying Inputs

The Paging Buttons builder takes the inputs described in the table below. For help on inputs common to many or all builders such as those in the Properties and HTML Attributes input groups, see "Using the Builder Call Editor."

Input Name Description
Name Enter a name for this builder call. The Designer displays this name in the Builder Call List.
PageLocation Use the Page Location input to specify the page or pages on which this builder call will act.

See "Locating Control Builders on Pages" for detailed documentation about the Page Location input and page location syntax.

Assistant Name The name of the Data Paging Assistant builder to use as a data source.
Use Links Enable this box to embed a link within the button.
Maximum Links This input is displayed when the Use Links check box is enabled.

Enter an upper limit on number of links to show.

Range Text Format Use this input to control the formatting and contents of the range of displayed pages/records. For this input we can specify an indirect reference, enter a value directly, or select one of the following from the list:

  • {start}, {end}, {count} for the currently displayed records

  • {page} and {page_count} - to display things in terms of pages.

The value of this input has placeholders in it that get replaced with the current values from the paging assistant: An indirect reference is presumed to return this format, too.

Note that An empty string or null can be used to display nothing for the range.

First Button Images
(optional) Normal button image Button image for "first page" button
(optional) Hover image Hover button image for "first page" button
(optional) Pressed image Pressed button image for "first page" button
(optional) Disabled image Disabled button image for "first page" button
Image Size Settings See below
Prev Button Images
(optional) Normal button image Button image for "previous page" button
(optional) Hover image Hover button image for "previous page" button
(optional) Pressed image Pressed button image for "previous page" button
(optional) Disabled image Disabled button image for "previous page" button
Image Size Settings See below
Next Button Images
(optional) Normal button image Button image for "next page" button
(optional) Hover image Hover button image for "next page" button
(optional) Pressed image Pressed button image for "next page" button
(optional) Disabled image Disabled button image for "next page" button
Image Size Settings See below
Last Button Images
(optional) Normal button image Button image for "last page" button
(optional) Hover image Hover button image for "last page" button
(optional) Pressed image Pressed button image for "last page" button
(optional) Disabled image Disabled button image for "last page" button
Image Size Settings See below
Image Size Settings
Image Width Width (in pixels) of this image
Image Height Height (in pixels) of this image
Alt Text Text displayed if image is not available
Unbounded Behavior
The inputs in the section describe how to provide paging buttons when the size of the data set on the backend is so large that it cannot be retrieved.
Range Text Format Similar to the same input provided above, except that you use this input to control the formatting and contents of the range of displayed pages/records when the total number of records cannot be retrieved from the backend. For this input we can specify an indirect reference, enter a value directly, or select one of the following from the list:

  • {start}, {end}, for the currently displayed records
  • {page} - to display things in terms of pages.

Last Button Enablement Determines if the Last button is available in the case where the last records cannot be retrieved.

  • Always enable - Always enable the last button so the user can attempt to retrieve the record. This causes the Paging Assistant to sequentially retrieve each page of data. If the data set size is very large, this may take a very long time, appearing to hang. This option should be used only if the data set is known to be of a reasonable size.

  • Disable if data size is unknown - Disable the button if the data size cannot be determined. This is the default.

Advanced
(optional) HTML Page HTML file to use as ImportedPage base instead of default HTML
Make URLs Absolute Enable this whenever the HTML has relative URLs in it, whether or not this is a local file.

Disable if you are using a page that references other web sites so that external links will work.

 

Customizing the Paging Buttons

We can alter the appearance of the paging buttons by making a copy of the HTML page that controls the appearance of the paging links. We can find this file in <servable_content_root>/factory/pages/data_paging_buttons.html. The following HTML is the default code for the data_paging_buttons.html file:

<span name="wrapper">

<table class="bst_dp_btn" cellpadding="0">

<tr>

  <td height="19" width="17">

    <span height="19" width="17" vspace="0" hspace="0" class="bst_dp_btn" name="firstbtn" />

  </td>

  <td height="19" width="17">

    <span height="19" width="17" vspace="0" hspace="0" class="bst_dp_btn" name="prevbtn" />

  </td>

  <td height="19" valign="bottom">

  <span name="displayed_pages" class="bst_dp_btn">

    &nbsp;&nbsp;<span name="range" /> of <span name="total" />&nbsp;&nbsp;

  </span>

  </td>

  <td height="19" width="17">

    <span height="19" width="17" vspace="0" hspace="0" class="bst_dp_btn" name="nextbtn" />

  </td>

  <td height="19" width="17">

    <span height="19" width="17" vspace="0" hspace="0" class="bst_dp_btn" name="lastbtn" />

  </td>

</tr>

</table>

</span>

Be sure to leave the named <span /> tags in place; the Paging Buttons builder uses tags as the locations for the various builder calls it uses to implement the paging links control.

To customize the appearance of the paging buttons control:

  1. Create a copy of the data_paging_buttons.html file, which can be found in the <servable_content_root>/factory/pages directory.

  2. Modify the new file to implement any style or other appearance changes you want to make.

  3. Save the modified file.

  4. In the Paging Buttons builder call, set the HTML Page input in the Advanced category to the path and file name of the new HTML page.

  5. Click OK.

  6. Run the model. The appearance of the paging buttons will now be determined by your HTML file.

If you change the HTML file used by the paging buttons, generate the model so that we can see the new changes.