How to create iPad Document Preview interface like those found in iWorks for iPad

Question

Willing to award a +500 bounty for a working example.

There are only 2 source code examples that I know of to accomplish the Document Preview interface on the iPad, like those found in Number, Pages, etc.

infoNgen and OmniGroup Framework

Are there any other example? infoNgen is a good simple example, however, the code is extremely sloppy, and horribly written, very unorganized.

OmniGroup is an awesome library, but way too complicated for simple projects.

Update

I was able to break down infoNgen's project and make a barebones document viewer with an HTML preview, which seems to work fairly well with updating info in the document and keeping it sync'd with the preview. Only issue now to tackle is making the documents save for when the app exits and relaunches. The +500 bounty is still available to a working example, however, i am not going to open the bounty unless there are working examples posted.

Answer 1

The "wrapper view" is the main view controller that will be showing your whole preview carousel.

The "carousel" itself is a UIScrollView. Simply create the scroll view and set the pagingEnabled property to YES. Lay it out to the appropriate dimensions by settings the frame and then add it to your wrapper view controller. You will also want to set the contentSize property of the carousel view to be large enough. Calculate this by multiplying the number of documents, plus the width of two more documents, by the width of the carousel. If you want the documents on either side to show a little, then multiply the number of documents by the width of the scroll view minus a few pixels.

EDIT

Actually, googling this problem a bit led me to this post which describes an alternate method of implementing this. Essentially, you wrap the scroll view inside of a custom UIView subclass, which forwards touches to the UIScrollView. This is necessary, because a UIScrollView can only "page" for pages that are as wide as it. Using my "adjust the side views by a few pixels" method, you end up with a nice preview, but the offsets will cause the previews to jump when scrolling. (I tried my method while throwing together sample code. As I just explained, it didn't work.) I'm going to try one more method before using the custom wrapper. (I wonder if content insets would work.)

End Edit

Note that, as Matthew correctly pointed out in the comments, you only actually create the 3 views that you need, as described later on.

Your document previews can be whatever object you like, as you mentioned, a UIWebView can be used to render HTML. Regardless of what you want to use to represent your thumbnails, the trick is going to be laying them out.

I am assuming that you have an array of objects, although you may be using Core Data to store your information. To show your document previews, add them to the scroll view, but at the proper location along the "X" coordinate. To calculate that value, multiply the index of the current document by the width of the scroll view. Apply this value using the setFrame method of the document preview. You will also want to render the preview before the current one and the one after, so you have smooth animation.

To handle rendering and scrolling, you will want to make your wrapper into a UIScrollViewDelegate. The delegate should tell the UIScrollView to remove and re-render the scrollviews each time the scrolling animation finishes.

To handle the "carousel effect" (the loop that occurs between the first and last documents), your UIScrollViewDelegate should check the contentOffset property and determine if we are at the last object. If the last object is being shown, render the the first object to the right, like you would any other. If the right object is then scrolled to, you use the [scrollView scrollToRect: CGRectMake(0,0,scrollView.rect.size.width,scrollView.rect.sizeheight) animated:NO]; code to seamlessly jump to the beginning. (Do the same for the first preview. Render the first and the last one on the left, handling it the same way if necessary).

I hope this answer helps somewhat. I will post code when I can.

Good luck!

Edit 2:

Now that I think about it, this whole paging control can be packaged into a UIScrollView subclass or category. I'm going to try to work on this one.