Pagination

How to 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 Web technologies, pagination helps to reduce the amount of data received. It speeds up visualisation of content on 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

Paginator class defines how current content should look like on the screen. It defines current page, current offset, current data size and a way of how Paginator receives data.
It supports getNextPage or getPrevPage methods to set next content or previous content.
isPage method with page parameter finds out whether the page is the 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 define 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 of how to get the content. You can load content from a file, database or server. This example shows how to load the content from an application file, how to manage pagination in navigation bar and how to load the content limited by current Paginator settings.

Moscrif supports JSON file format with extension .mso. It is very 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 the 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);
        new InfoDialog({text: msg}).showModal();
        return;
    }     var f = Stream.openFile(mso, "r8");
    if (!f) {
        new InfoDialog({text: String.printf("Cannot load %s!", mso)}).showModal();
        return;
    }
    this.data = parseData(f);
    f.close();
}

Full coding of main.ms should look like :

include "lib://uix/application.ms";
include "lib://uix/form.ms";
include "lib://uix/control/list/list.ms";
include "lib://uix/control/list/listItem.ms";
include "lib://uix/control/navigation/titleBar.ms";
include "lib://uix/control/navigation/toolBarButton.ms";
include "lib://uix/paging/paginator.ms";
var app = new Application(); app.onStart = function(sender)
{
    this.forms = [];
    this.loadData();     this.paginator = new Paginator("myPaginator");
    this.paginator.partialData = true;
    this.paginator.length = this.data.length;
    this.paginator.pageSize = 5;     do {
        var form = new Form({name: this.paginator.getLabel(this.paginator.page)});
        var title = new TitleBar({title: this.paginator.getLabel(this.paginator.page)});
        var list = new List({left: 0, top: title.height});         var end = this.paginator.end();
        for (var i = this.paginator.begin(); i <= end; i++) {
            list.add(new ListItem({text: this.data[i-1].text, value: this.data[i-1].value, onClick: function() {console << this.value << "\n";}}));
        }         if (this.paginator.page == 1) {
            title.add(new ToolBarButton({icon: #next, width:System.width/6, onClick: function(){app.nextPage();}}),#right);
        }
        else if (!this.paginator.isPage(this.paginator.page+1)) {
            title.add(new ToolBarButton({icon: #back, width:System.width/6, onClick: function(){app.previousPage()}}),#left);
        }
        else {
            title.add(new ToolBarButton({icon: #back, width:System.width/6, onClick: function(){app.previousPage();}}),#left);
            title.add(new ToolBarButton({icon: #next, width:System.width/6, onClick: function(){app.nextPage();}}),#right);
        }
        form.add(title);
        form.add(list);
        this.add(form);
    }
    while (this.paginator.getNextPage() !== false);     this.paginator.page = 1;     this.push(this.paginator.getLabel(this.paginator.page));
}
//Load data app.loadData = function()
{
    var mso = "app://data/sample-data.mso";
    if (!System.isFile(mso)) {
        var msg = String.printf("Cannot find %s!", mso);
        new InfoDialog({text: msg}).showModal();
        return;
    }     var f = Stream.openFile(mso, "r8");
    if (!f) {
        new InfoDialog({text: String.printf("Cannot load %s!", mso)}).showModal();
        return;
    }
    this.data = parseData(f);
    f.close();
} app.nextPage = function()
{
    this.push(this.paginator.getLabel(this.paginator.getNextPage()));
} app.previousPage = function()
{
    this.push(this.paginator.getLabel(this.paginator.getPrevPage()));
} app.run();

Example of 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];
….
}

Example of the pagination in Moscrif page 2: