7

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.

alt text

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.

WrightsCS
  • 50,551
  • 22
  • 134
  • 186
  • Exactly what are you looking for? The scrolling "carousel" view? Or the ability to render the large thumbnails of your documents? What kind of documents are you handling? (The latter will depend on what your documents are.) And are you looking for existing code, or implementation/design discussion? – Ben Zotto Dec 31 '10 at 21:08
  • The carousel as well as the document preview rendering. The documents can be rendered or saved as HTML. – WrightsCS Dec 31 '10 at 21:18
  • As far as saving, have you looked into Core Data? (Working on a preview carousel, by the way.) – Moshe Jun 28 '11 at 01:15
  • By the way, it seems that the latest update (1.4) doesn't scroll like that anymore. – Moshe Jun 28 '11 at 01:23

1 Answers1

13

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.

Community
  • 1
  • 1
Moshe
  • 57,511
  • 78
  • 272
  • 425
  • 4
    I agree with most of what you're suggesting (hence the +1), but there's no need to include space for all of the documents; in fact, it's super memory-inefficient to do so. Rather you only need 3 views in the scrollview, since only 3 are ever visible. As one slides off either side it's repurposed as the new one sliding in. Session 104 from this Summer's WWDC, **Designing Apps with Scroll Views**, shows exactly how to do it: http://developer.apple.com/videos/wwdc/2010/ (you must register as an Apple dev to download the video, but an unpaid account is fine). – Matthew Frederick Jan 03 '11 at 01:33
  • I know that you don't actually create all of the views, and I know how inefficient it is, but you should still create the space in the contentSize so the scrolling math can be done more easily. **EDIT:** Thanks for pointing out the video. I shall go watch it. – Moshe Jan 03 '11 at 01:34
  • 1
    Could any of you post some working code for this, I can not figure it out from the description only I am afraid, and the WWDC2010 link hangs my iTunes when I try to open the movie in iTunes. I would really like to get this example working. – Neigaard Jun 10 '11 at 07:46