Pagination for FlowPanel?

What I’m trying to do: I want to create something like an ebook app, with pagination instead of an infinitely-scrolling FlowPanel.

What I’ve tried and what’s not working: FlowPanel, and RichText additions to it, do not appear to have any ability to determine if there’s too much on the screen and that it’d need pagination.

Welcome to the forum!

The only component that has built in pagination is a data grid, anything else you’ll need to build yourself.

Although, if you’re thinking in terms of flow panel, then you have probably already broken your ebook text into separate components, one for each page, right? If that’s the case then you could use a data grid with one item per page and it’d take care of the pagination for you.

1 Like

I’d need to know what the content of the page is though, based on how much can fit on the screen, won’t I? (I’m the above account, no idea what account that was or how to get back in)

You’d need to know that for any page based approach. Processing your text and separating it into pages would be the first step.

1 Like

Let me try asking another way, because I think I did a bad job before.

A page is rendered at the old-school resolution of 800x600. There is a space available to put words. How do I know, presumably iteratively building out the list, when the next word would force the page to have to scroll?

How tall is your font at its current font size? How much space is there between lines? Is the font monospaced (easier to calculate characters per line) or proportional (more difficult)? Are you breaking sensibly on words, so that not every line will have the same number of characters, or are words being broken with hyphens?

Browsers do a most of this for you (except for pagination) and handle line breaks and the like automatically, but as soon as you want to manage some aspect of the process yourself, things get tricky. There are probably Javascript libraries out there for calculating those sorts of things.

None of this is meant to dissuade you from your project, just noting that it isn’t a “drop text into a component and have it done for me” sort of thing.

Finding and integrating Javascript libraries that do part of the work for you is probably your best bet. Integrating Javascript libraries can be challenging, but can allow you to extend Anvil’s capabilities way beyond the standard set of built-in components.

As a first pass at a proof of concept, especially if you’re just getting started with Anvil, keep it simple and don’t worry about the complexities. Assume one page is X words and parse that out of the text and display it. When they move to another page display the next X words, and so on. Worry about the further complexities when you’re happy with the proof of concept and ready to dive into Javascript libraries (or ready to do the font math yourself).

3 Likes

While an unfulfilling answer, it’s probably the right one. I’ll try to build my proof of concept then worry about dynamic page sizing or whatever. Thanks!

2 Likes