Digging into PastryKit

If you haven’t already, go read the DaringFireball piece on PastryKit. Are you back? Good. If you’re the least bit like me, you’re probably a least a little bit intrigued. If you’re sorta like me you probably cut and pasted http://help.apple.com/iphone/3/mobile/dist/PastryKit-ug-compact.js into jsbeautifier.org. If you’re kinda like me you also dug into http://help.apple.com/iphone/3/mobile/javascript.js to see how PastryKit is used. And finally, if you’re exactly like me, you’ve probably already dissected the framework and won’t need to read this post :)

PastryKit, at least the one on the iPhone User Guide, contains (it’s possible their compiler strips out classes/functions their site doesn’t use)

  • PKUtils – collection of util functions (eg. degreesToRadians, objectHasMethod, etc)
  • PKClass, PKObject – classes that make inheritance easier. PKObjects to have observer methods for properties and PKClasses are able to synthetize properties ala ObjC.
  • PKPoint, PKSize, PKImage – self explanatory OOO objects for points, sizes, and <img>
  • PKAnimator – simple animator class taskrunner/setTimeout style. Even PastryKit doesn’t use WebKitAnimations since the API is fubar’d! As far as I can tell nothing in the framework or iPhone User Guide uses this
  • PKTransition – This is where all the real animation is done, including the scroll effect, has the ability to commit animation transactions.
  • PKView, PKContentView, PKRootView – View hierarchy, akin to one you would set up in Interface Builder. Very Xcode. I echo Gruber’s sentiments that PastryKit could show up in the next DashCode. Or at the very least the remnants of Apple’s web apps as an app strategy circa 2008.
  • PKScrollIndicator – The magical class that creates the DHTML scrollbar when a view is scrolled.
  • PKSearchBar, PKTableView, PKNavigationView, PKToolbar – the main view classes used to construct an actual app. (Along with PKScrollView, PKTableViewCell, PKNavigationItem, PKControl)

If you’ve built anything in Xcode all this seems very familiar. Applications are built by setting up a hierarchy of views such as:

// create a new navigation view
navigation = new PKNavigationView(); 
// set a size for the view
navigation.size = new PKSize(height, width);
// init some basic parameters about the view
 // add the view to the root view
PKRootView.sharedRoot.addSubview(navigation);
// build the rest of your views

I gave myself a couple hours to build a basic view app from scratch using PastryKit. It was painful and time consuming. There are plenty of methods that are required by the framework that you must declare unknowingly (eg. tableViewCellForRowAtPath vs tableViewCustomCellForRowAtPath dependent on what your table view is styled). Without proper documentation the framework is difficult to do any real work with. I’ll tinker with it some more but if you’re interested in a semi-prepackaged PastryKit and my work so far you can grab it here.

PKScrollIndicator is the best part of the framework, jQTouch should definitely look into “borrowing” this code. Meanwhile, I’ll be waiting for a documented official release of PastryKit.

Bonus: You can use the following to disable scrolling in Mobile Safari.

document.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, true);

This coupled with window.scrollTo(0,0) is how PastryKit hides the navigation bar.

Update: Sorry, should be document.addEventListener() instead of window.addEventListener(). I’ve added a demo no scroll page here. Just view the source.

  • SteveB

    Hmm. Can’t get that disabled scrolling working. I guess you have to build the thing from scratch with pastrKit to get it working. Does it even require pastryKit or jquery? I’ve tried it with and without them. My code:

    —index.html—

    Test

    blah blah etc

    —scrollblock.js—
    window.addEventListener(‘touchmove’, function(e) {e.preventDefault();}, true);

  • SteveB

    Ah, it didn’t show my code properly. Anyway, a from-scratch solution to disabling scrolling would be appreciated.

  • http://code.msgilligan.com Sean Gilligan

    I’m trying to be like you, but I’m not quite as smart and trying to focus on some client projects — thanks for your work!

  • J L

    Awesome! How long did this take you to figure out? I was hacking on it the other week for better part of the day and it was indeed painful.

  • AwayBL

    SteveB, try “false” instead of “true”

  • Wayne

    @SteveB Sorry, try document.addEventListener(). View the source on this page here: http://waynepan.com/s/noscroll

  • SteveB

    thanks blud, that works well.
    i found that if the page has some heavy content (images, other scripts etc) then it’s possible to swipe quickly to move the page up or left, before it has loaded. then the page gets ‘stuck’ in a scrolled position.
    this can be resolved by strictly fixing the width/height of body and a container div. in my case I used 320px and 480px. you might wanna use less height if you’re targeting iphone safari.
    also, style the container with overflow:hidden;

    if you’re using the iPhone SDK and , you can put UIWebView within a UIScrollView and the webView won’t scroll.

  • Pingback: PastryKit at Under The Bridge

  • Pingback: transmission line noise » iPhone web frameworks & Pastrykit

  • austingaijin

    Wayne,

    I just sent an “exclusive” over to John Gruber. I uncovered Apple’s fully commented ADLib javascript library (12,000+) lines, literally “in the wild” on the internet. I would expect John to do something with it story wise. Keep your eye on his site, I’d love your take on the ADLib stuff once you take a look at it. I’d truly dig it if you build a sample webapp using it. I’ll be keeping an eye on your site too.

  • Pingback: pastrykit stuff | designoMatt