Follow

Managing Content Layout

Panes vs. Pages

Each entry in your datasource is a page. It has a single URL. However, Pugpig displays panes of content. A pane is the exact width of the web view. If your page is wider than the available space, it may contain multiple panes. Pugpig calculates the width of your page examining its document.body.scrollWidth. If your content's width isn't an exact multiple of the web view width, its size will be “rounded up” until it is. An example may help clarify this relationship:

Page 1Page 2Page 3
Pane 1 Pane 2 Pane 3 Pane 4 Pane 5 Pane 6

 

Here, the first page is twice as wide as the web view. The second page is the same width, and the third page is three times as wide.

Pugpig supports three ways of laying out your content, configured via the PageDocControl's setPaneManager method. Set the desired pane manager when you initialise your PageDocControl. If you're using the template base application, this will be in the openDocument method of your DocumentViewController.

Content is clipped horizontally to the size of the available web view. In this model, the number of panes exactly matches the number of pages. Any content outside of the web view area is invisible.

Single pane partitioning is the default model.

Content is sliced into multiple panes, each one the width of the available web view. The last pane will be expanded so that the total width of your page is an exact multiple of the width of the web view. In this model, the number of panes is usually larger than the number of pages (because each page contains multiple panes).

iOS:

// add this line:
[pageControl setPaneManager:[document paneManagerWithClass:[KGVariablePanePartitioning class]]];
[pageControl setImageStore:[document imageStore]];
[pageControl setDataSource:[document dataSource]];

Android:

// add this line:
pageControl.setPaneManager(document.paneManagerWithClass(VariablePanePartitioning.class));
pageControl.setImageStore(document.imageStore());
pageControl.setDataSource(document.dataSource());

For vertical paning:

This behaves exactly like the variable pane model, but instead of placing a page's panes left-to-right it places them top-to-bottom, like this:

Page 1Page 2Page 3
Pane 1 Pane 3 Pane 4
Pane 2   Pane 5
    Pane 6

 

iOS:

[pageControl setPaneManager:[document  paneManagerWithClass:[KGVerticalVariablePanePartitioning class]]]
;

Android:

pageControl.setPaneManager(document.paneManagerWithClass(VerticalVariablePanePartitioning.class));
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk