How do you implement NSPageController to navigate through a webView's history

Question

I have a webView-based app, but I want the user to be able to navigate it with swiping on the trackpad and magic mouse. Therefore, I am going to implement NSPageController.

I have looked at the documentation and the PictureSwiper app, however those aren't really meant for a webView. So, I would like to know how I can use an NSPageController on a webView. I have a webView defined as webView and two actions, goBack: and goForward: that load the previous and next page respectively.

However, I am unaware of how I get NSPageController to work with a simple webView. There has a to be a way to do it, but I see no way. If someone could please explain what I am suppose to do, that would be great. Or if you are feeling especially generous, you can download my free browser source example. https://sites.google.com/site/infiniteopensyntax/basic-web-browser

That source shows how my own app is pretty much set up. If you would like to implement the NSPageController on that app and send me the source, I would really appreciate it. It's not much, but if you do that I'll add the swiping example to Infinite Open Syntax and put your name on it. You can choose the license.

This is Cocoa, not Cocoa Touch

EDIT

Okay, now I just need to make sure the app still works on Snow Leopard. Supposedly, I can test this by disconnecting the outlets. It works fine, minus the back and forward button. To do this, I believe I check for the class NSPageController. If it doesn't exist, then I just skip using the pageController.

- (IBAction)goBack:(id)sender {
    if (NSClassFromString(@"NSPageController") != Nil)
    {
        [self.pageController navigateBack:sender];
    }
    {

         //Not 10.8
        [webView goBack];
    }
}

Answer 1

The download link on the page you linked to doesn't work, so I'll keep my answer more general.

You don't need to keep multiple WebViews or manually generate snapshots if you're using NSPageController; it takes care of that for you. In your case, you want to use NSPageController in History Mode. To do that, wire your WebView to pageController.view. You will need to implement three NSPageControllerDelegate methods:

- (void)pageControllerWillStartLiveTransition:(NSPageController *)pageController;
- (void)pageController:(NSPageController *)pageController didTransitionToObject:(id)object;
- (void)pageControllerDidEndLiveTransition:(NSPageController *)pageController;

Every time the WebView goes to a new page (not through a back/forward action), call navigateForwardToObject:(id)object on the pageController. I would make object a custom object that stores user state for a navigated page (scroll positions, highlighted text, form contents, etc.) as well as the page's WebHistoryItem. The user state can be undefined initially, but should get set in pageControllerWillStartLiveTransition:. Here's an example:

- (void)pageControllerWillStartLiveTransition:(NSPageController *)pageController
{
  // Remember user state
  MyCustomObject *object = [self.pageController.arrangedObjects objectAtIndex:self.pageController.selectedIndex];
  object.userState = someUserState;
}

When that method returns, the pageController will hide its view (the WebView) and display snapshots of previous states of its view instead.

Once the swiping animation is complete, pageController:didTransitionToObject: will get called. Cool. What you should do in that method is grab the WebHistoryItem out of object and have the WebView go back to that item using the goToBackForwardItem: method. You should also hold onto the user state you stored in object (say, in an instance variable), because you'll need to restore it once WebView finishes loading.

Lastly, in pageControllerDidEndLiveTransition: you do anything you want done before redisplaying the WebView. I expect that would be nothing, since the user state isn't restored until the WebView finishes loading, so all you would need in its implementation would be [pageController completeTransition].

One last detail is the back/forward buttons. You should implement them as you would normally, but also have them call navigateBack: or navigateForward: on the pageController.

That pretty much covers it. I haven't actually tried this specific example, so let me know if you run into any problems.

Edit

Here's how I'd modify your source to get basic NSPageController functionality. Add an NSPageController IBOutlet property in your AppDelegate header file. In your MainMenu.xib file add the page controller, wire its view to your WebView, make your AppDelegate its delegate, and give it a referencing outlet to the property we just created in the AppDelegate. Also, make your AppDelegate your WebView's frameLoadDelegate. Inside basicWebAppDelegate.m add a private property:

@interface basicWebAppDelegate ()
@property (assign) id currentItem;
@end

Then add the following inside implementation:

#pragma mark - WebFrameLoadDelegate

- (void)webView:(WebView *)sender didCommitLoadForFrame:(WebFrame *)frame {
  if (frame == [sender mainFrame]) {
    id object = [sender.backForwardList currentItem];
    BOOL isCurrentItem = self.currentItem && (object == self.currentItem) ? YES : NO;
    if (!isCurrentItem) {
      [self.pageController navigateForwardToObject:[sender.backForwardList currentItem]];
    }
  }
}


#pragma mark - NSPageControllerDelegate

- (void)pageControllerWillStartLiveTransition:(NSPageController *)pageController {
  self.currentItem = [self.webView.backForwardList currentItem];
  // Here is where you'll save any state for your pageController.arrangedObjects[pageController.selectedIndex] object
}

- (void)pageController:(NSPageController *)pageController didTransitionToObject:(id)object {
  BOOL isCurrentItem = self.currentItem && (object == self.currentItem) ? YES : NO;
  if (!isCurrentItem) {
    self.currentItem = object;
    [self.webView goToBackForwardItem:object];
  }
}

- (void)pageControllerDidEndLiveTransition:(NSPageController *)pageController {
  self.currentItem = nil;
  [pageController completeTransition];
}

Finally, change your goBack: and goForward: actions to just call [self.pageController navigateBack:sender] and [self.pageController navigateForward:sender], respectively.

Note that I didn't bother saving any user state here and instead used WebHistoryItems directly as the objects. You might need to do differently.

Let me know if you need more help.

Answer 2

From: https://stackoverflow.com/a/13716988/466698

An obvious solution might be to use multiple web views, but as they can be pretty heavy-weight, you probably don’t want to.

The best idea is probably to save an image of each page before navigating away from it. When the use swipes back, show a view with just the saved image. Once the swipe is complete, swap the views around so the web view itself is on top.

This appears to be how Safari does it (you can see the image compression sometimes, and it often reloads the page and it jumps around away from the previous screenshot)