A code monkey randomly typing on a keyboard for an infinite amount of time will almost surely produce brilliance (almost).

As Per Your Request: TLF Pagination

Posted: October 4th, 2010 | Author: Huyen Tue Dao | Filed under: Development | Tags: , , , | 7 Comments »

Update [15 March 2011]: Changed link to github repo for this example to a new repo.

Update: The link to my pagination example was broken for a while but I have fixed all the links so the example should be accessible again. Apologies.

So a commenter named Roberto asked for an example of TLF pagination.  I actually had planned to create a pagination example for my 360|Flex presentation but ran out of time.  So I have implemented one and added it to the github repo for my presentation-related code a new github repo I am using for all of my TLF-related code and projects.

Screenshot of TLF pagination example.

You can view the example live here.

Pagination involves adding containers to a TextFlow rendering of a particular size as needed until all text renders.  Now, assuming that you want text lines to fully render and not clip, you will set ContainerController.verticalScrollPolicy to ScrollPolicy.OFF.  When scroll policy is set to ON or AUTO, the ContainerController basically assumes that scrolling will occur within its container and so text lines may be clipped at the bottom or top of the container.  If there is more text than can be rendered in that container and there are no proceeding containers linked to the TextFlow, all remaining text lines are assigned to that container.  Therefore, the end of the container content will be the end of the TextFlow.  When scroll policy is set to OFF, text lines render only where they are not clipped or hidden.

The logic for paginating a TextFlow rendering goes like this:

  1. Add a container and link to the TextFlow via a new ContainerController.
  2. Check if ContainerController.absoluteStart + ContainerController.textLength == TextFlow.textLength.
  3. If false, then go back to step 1 and repeat and if true, then you have rendered all pages.

If you want to keep scroll policy as ON or AUTO, then you will want check instead if ContainerController.getContentBounds().height > container.height and add an extra page if true.

I also made a late-night edition of pagination with editable text.  My basic idea in dealing with pagination was to listed for the UpdateCompleteEvent dispatched by the TextFlow and to check the containers and container controllers and make sure that there are no empty pages save for the first page.  I have not yet implemented any auto-scrolling on addition or removal of pages, although if anyone wants, I can give it a go.

I hope this helps someone out.

7 Comments on “As Per Your Request: TLF Pagination”

  1. 1 Tweets that mention Queen Code Monkey » Blog Archive » As Per Your Request: TLF Pagination -- Topsy.com said at 17:46 on October 6th, 2010:

    [...] This post was mentioned on Twitter by Adobe TLF Team, Huyen Tue Dao. Huyen Tue Dao said: Put up a small post and example for doing pagination with @AdobeTLF as per a commenter's request: http://bit.ly/9l2k7F [...]

  2. 2 Joren van Suylekom said at 04:26 on December 8th, 2010:

    Hi,

    I am afraid my previous comment hasn’t been submitted good, therefore I am trying it one more time. Apologies if this comment is added twice.

    Currently I am working on a project which allows users to design their own book. Unfortunately I discovered that the text-edit application becomes really slow when editing large texts. A solution would be to break the whole text apart, and work with some kind of pagination. Maybe your project could help me out. Is it possible that I can have insight in the code of your project?

    Regards,
    Joren

  3. 3 Jack said at 16:21 on March 10th, 2011:

    super helpful, thanks.
    ..god save the queen..

  4. 4 Jack said at 16:01 on March 14th, 2011:

    Hi again.
    Looking through the source.. is it possible you forgot to post the Page class in the github repo? I can’t seem to find it in the provided package structure (neither the 360flex folders, nor the pagination package). I’m curious to see what is going on inside your Page.linkToTextflow() method. Care to share?
    Thanks again.

  5. 5 Huyen Tue Dao said at 16:11 on March 14th, 2011:

    Hey Jack,

    I’ll check on the github repo today and figure out what the issue is and get anything missing in there, no problem.

    Oh, and feel free to email me if you have any further questions/issues.

    H

  6. 6 Huyen Tue Dao said at 01:34 on March 15th, 2011:

    Hey Jack,

    I’ve started a new github repo as a general TLF-related repo. I have added my Pagination example to it. The Page class is now PageComponent and located in the QCMTLFLib project.

    Let me know if there are other problems.

    H

  7. 7 Jack said at 10:22 on March 16th, 2011:

    Awesome..
    Thanks for the update and the timely response. Great code. I like your recycling of the pages in the ‘pool’ and your pages composed with proprietary container controllers. Very smart. I’ll share my little project with you when I get closer. Again, thanks for the help with TLF.
    Jack

Leave a Reply