Pagination

Divide content into several discrete pages.

Show screenshots (3)

Pagination

Pagination in general is the process of dividing content (data) into discrete pages. In mobile or in the Web technologies, pagination helps to reduce the amount of data received. It speeds up visualization of content at the user screen.
Pagination also includes the logic of preparing and displaying navigation links between discrete pages. Pagination navigation shows current content, previous or next content in the sequence.

Paginator Manager

PaginatorManager class helps user to manage Paginator objects in Moscrif enterprise applications. There can be many of screens showing several contents in the application that needs to be divided into discrete pages. PaginatorManager.getPaginator method creates new instance of Paginator or it returns already existing instance. Parameter of the PaginatorManager.getPaginator method must be defined and must be unique across the application. Usually, it defined as name of the displaying screen (view).
PaginatorManager also supports add or remove paginator objects from defined paginators.

Let’s define PaginatorManager object in the Moscrif application. We need to create an instance of application and paginator Manager object in OnStart method. This is the best place where to create it. Paginator Manager object is accessible from anywhere in the application.

Example PaginatorManager definition :

var app = new Application("Pagination-in-Moscrif");

app.onStart = function(sender)
{
this.pagination = new PaginatorManager();
}

Paginator

Paginator class defines how current content should look like at the screen. It defines current page, current offset, current dataSize and way how Paginator receives data partialData.
It supports getNextPage or getPrevPage methods to set next content or previous content.
isPage method with page parameter finds out whether the page is valid page for the current Paginator.

If you have received full content, and would like to divide it into several discrete pages you need to set content size to Paginator.dataSize, set Paginator.partialData to false and set Paginator.offset to number of displayings per page.
If you do not know how big your content is, you need to set Paginator.partialData to true.

Methods Paginator.begin and Paginator.end defines where application content should begin and end on the current page.

Let’s define an application content and list content view. There are several ways how to get content. Load content from a file, database or from server. This example shows how to load content from an application file, how to manage pagination in navigation bar and how to load content limited by current Paginator settings

Moscrif supports JSON file format with extension .mso. It is pretty easy to define an array of items in JSON file.

Example sample-data.mso file

[
    {text : "Moscrif paging - row 1 ", value : 1 },
    {text : "Moscrif paging - row 2 ", value : 2 },
    {text : "Moscrif paging - row 3 ", value : 3 },
    {text : "Moscrif paging - row 4 ", value : 4 },     …
]

To load content from sample-data.mso file we define new application method in main.ms.

Example app.loadData:

app.loadData = function()
{
    var mso = "app://data/sample-data.mso";
    if (!System.isFile(mso)) {
         var msg = String.printf("Cannot find %s!", mso);
         System.messageBox(msg);
         throw msg;
    }

    var f = Stream.openFile(mso, "r8");
    if (!f)
    throw String.printf("Cannot load %s!", mso);
    this.data = parseData(f);
    f.close();
}

Let’s define an application view which displays content at the screen, and paginator object which manages current content at the screen. Peviously Paginator Manager object was defomed;therefore, we get an instance of paginator via Paginator Manager object.

Example shows list of data view method:

app.showListDataView = function()
{     //new or existing instance of Paginator with name listData
    //set partial data to off, we have all content loded
    //set paginator data size application data size
    //set offset items per page
    var paginator = this.pagination.getPaginator("listData");
    paginator.partialData = false;
    paginator.dataSize = this.data.lenght;
    paginator.offset = 10;     //new instance of List data View
    //set current content paginator
    //display content
    this.content = new ListDataView();
    this.content.paginator = paginator;
    this.push(this.content); }

Full coding of main.ms should looks like :

include "code://ui/application.ms";
include "code://ui/form.ms";
include "code://ui/listView.ms";
include "code://ui/titleBar.ms";
include "code://ui/titleBarButton.ms"; include "code://skin/skin.moscrif.ms"; include "app://ui/paging/paginatorManager.ms";
include "app://view/listDataView.ms"; var app = new Application(); app.onStart = function(sender)
{
    this.loadData();     this.pagination = new PaginatorManager();     this.showListDataView(); } app.loadData = function()
{
    var mso = "app://data/sample-data.mso";
    if (!System.isFile(mso)) {
         var msg = String.printf("Cannot find %s!", mso);
         System.messageBox(msg);
         throw msg;
    }     var f = Stream.openFile(mso, "r8");
    if (!f)
    throw String.printf("Cannot load %s!", mso);
    this.data = parseData(f);
    f.close();
} app.showListDataView = function()
{     //new or existing instance of Paginator with name listData
    //set partial data to off, we have all content loded
    //set offset items per page
    var paginator = this.pagination.getPaginator("listData");
    paginator.partialData = false;
    paginator.offset = 10;     //new instance of List data View
    //set current content paginator
    //display content
    this.content = new ListDataView();
    this.content.paginator = paginator;
    this.push(this.content); } app.init().run();

Now, we need to define a Navigation bar. Navigation bar helps user to get next or previous application content. It can be defined in application skin or in view with pagination included.
Example below shows navigation bar included in listDataView.ms application view.

Example NavigationBar method :

Example how to Load data for current Paginator settings:

var begin = this.paginator.begin(this.paginator.page) - 1;
var end = this.paginator.end(this.paginator.page) for (var i = begin; i < end; i++)
{
var row = data[i];
….
} //refresh navigation bar
this.getNavigationBar();

Example of the pagination in Moscrif page 2: