Apple’s Pastry Kit | iPhone Javascript Toolkit - by Benjamin Spiegel

Posted: December 21st, 2009 by Benjamin Spiegel

ANOTHER UPDATE: Thanks to a anonymous Sponsor, we got now the full Assets as well DOWNLOAD THE ENTIRE ASSETS COLLECTION

iphoneguideJohn Gruber has found a javascript library for iPhone webApps, from nobody  other than Apple itself. This interesting library, called PastryKit, seems to have been pretty much undiscovered since google does not have much on it. In likes of others, Apple’s javascript library provides support for that app native-feel. (That is the main objective anyway; some look & feel emulators are pretty “good”, while others get stuck in the past).

Ok, so how do we use it, or get our hands on it?

Visit http://help.apple.com/iphone/3/mobile/ from your iPhone or iPod Touch. This is the official Apple guide using PastryKit.
Now with this page in regular Safari (on your Mac/PC), open the Develop Menu (if it’s not there, enable it in Preference|Advanced). Choose User Agent > Mobile Safari 3.x . And now you can see it in your Browser like an iPhone would. From Develop Menu, Web Inspector will let you view the script.

The HTML includes PastryKit as follows:

<!-- PastryKit -->
<link rel="stylesheet" href="http://help.apple.com/iphone/3/mobile/dist/PastryKit-ug-compact.css">
<script type="text/javascript" src="http://help.apple.com/iphone/3/mobile/dist/PastryKit-ug-compact.js" charset="utf-8"></script>

PastryKit Javascript and PastryKit CSS are available via a quick Download.

They are kind of hard to read because of their Compression.

Gruber looked at the source anyway:

PastryKit accomplishes all three of the aforementioned things — hiding the MobileSafari address bar, providing fixed-position toolbars, and providing scrolling with momentum — by disabling regular scrolling and setting up its own view hierarchy and implementing its own scrolling.

The  question of native iPhone apps on the web was a very hot discussion topic last month after PPK whipped up a storm on the never ending question of web-apps replacing iPhone apps. The  interesting point here is Apple’s stance. They launched the iPhone with web plattform intended to be the platform for 3rd party apps, then switched over to native apps and have not done very much to facilitate native-style web apps since then. Is a change coming? As Gruber puts it:

The $64,000 question, though, is whether PastryKit is something Apple intends (or that a team within Apple hopes) to ship publicly. It seems like a lot of effort to build a framework this rich just for this iPhone User Guide, so I’m hopeful the answer is yes. Perhaps something integrated with the next major release of Dashcode? And, perhaps with integrated UI layout tools, along the lines of Interface Builder?

UPDATE: Added full uncompressed Source to the Downloads

ANOTHER UPDATE: Thanks to a anonymous Sponsor, we got now the full Assets as well DOWNLOAD THE ENTIRE ASSETS COLLECTION

29 Comments »

29 Comments on “Apple’s Pastry Kit | iPhone Javascript Toolkit”

  1. 1 Roger Willis said at 6:02 pm on December 21st, 2009:

    I noticed that the links were not linking properly. Links in title position and titles in link position. Since the links in the title I got it and downloaded… So thank you much!

    -roger

  2. 2 admin said at 6:25 pm on December 21st, 2009:

    Thank you Roger, i fixed it! Will add some tests and samples soon!

  3. 3 Roger said at 2:04 pm on December 22nd, 2009:

    Great, I am looking forward to that! :)

  4. 4 Julian said at 2:24 pm on December 24th, 2009:

    Do you have the assets as well? And can we see some samples?

  5. 5 Jonathan said at 3:44 pm on December 28th, 2009:

    I will take some time tonight, and get the assets together!

  6. 6 Tom Arnfeld said at 1:18 pm on January 1st, 2010:

    I am looking forward to these assets and getting going with this :)

  7. 7 ojec said at 12:38 pm on January 7th, 2010:

    I want to quote your post in my blog. It can?
    And you et an account on Twitter?

  8. 8 reklis said at 6:54 pm on January 8th, 2010:

    you can snake the whole site including art assets from a term if you have httrack

    httrack http://help.apple.com/iphone/3/mobile/ -Y -F “Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A109a Safari/419.3″ –robots=0

    You will still need to go get the classes folder manually if you want the database as it is document.writed in, so the snake doesn’t catch it, just manually fetch

    /iphone/3/mobile/classes/datacontroller-database.js

    and

    /iphone/3/mobile/classes/datacontroller-json

  9. 9 PastryKit at Under The Bridge said at 3:14 am on January 19th, 2010:

    [...] that set off a minor feeding frenzy of digging deeper into it all over teh intertubes, like here, and here, and [...]

  10. 10 Samuel J. said at 11:05 am on February 5th, 2010:

    Great Stuff, this will help my iphone development efforts!

  11. 11 Iphone Developer said at 11:08 am on February 5th, 2010:

    Nice UML, do you have some function samples for it as well? Would love to see some cool JS Samples

  12. 12 Halans said at 5:54 pm on February 19th, 2010:

    I think it’s till missing the content found at:
    http://help.apple.com/iphone/3/Contents/en/content.json

  13. 13 Halans said at 6:46 pm on February 19th, 2010:

    And in addition to my previous comment…
    it’s a 664KB json file. If you want to get it formatted, use Aptana: create new JS file (not new json file), paste text in, then Edit/Format.

  14. 14 Jim said at 11:11 pm on March 13th, 2010:

    Great work!

    Thanks

  15. 15 Marcus said at 11:12 pm on March 13th, 2010:

    Hey,

    love it! it helped us to solve some major issues we had with our Javascript!

  16. 16 cbraden said at 5:53 pm on March 19th, 2010:

    Does anyone know if Apple is allowing use of this library? Not necessarily supporting it, but allowing it. I’d like to use it in a PhoneGap app but don’t want to get blocked from the store.

  17. 17 AdLib – Apples iPad version of Pastry Kit? Ipad Javascript Framework | Design | AdLib – Apples iPad version of Pastry Kit? Ipad Javascript Framework said at 3:05 pm on April 7th, 2010:

    [...] basic web technologies supported by the iPhone and iPad. It appears similar in some respects to the PastryKit framework described last December, although AdLib appears to be a more advanced version that incorporates [...]

  18. 18 Louis Vuitton Designer Purse said at 7:50 pm on April 8th, 2010:

    I do not think I’ve seen this depicted that way before. You actually have cleared this up for me. Thanks!

  19. 19 NBA player shoes said at 9:02 am on April 16th, 2010:

    Nice article. Thank you for this info

  20. 20 Scott said at 9:19 am on April 16th, 2010:

    Does anyone have an example of the fixed toolbar up and working besides the scrape example? When I pull up the index page I get the loading gif and that’s about it.

  21. 21 Scott said at 10:02 am on April 16th, 2010:

    I also noticed on line 690 of the javascript.js file it calls for an info.json file. Anyone have that ?

    dataFolder += “http://help.apple.com/Contents/”;
    var infoJsonRequest = new XMLHttpRequest();
    var infoJsonURL = dataFolder + “Info.json”;

  22. 22 admin said at 10:07 am on April 16th, 2010:

    Hello,

    you can find it here
    http://help.apple.com/iphone/3/Contents/Info.json

    or zipped from us

    http://nxfx.com/demo/Info.json.zip

  23. 23 Scott said at 11:15 am on April 19th, 2010:

    So i got the preloader to stop looping but the toolbar does not stay fixed as on the apple site. Are there any examples I can see what I have config’d wrong ?

  24. 24 Pete said at 4:00 am on April 21st, 2010:

    Hi Guys,
    doesn’t work !!! can you help me ?

  25. 25 Daniel said at 12:47 pm on May 23rd, 2010:

    Great Stuff, whats the deal with the compressions, i keep getting Firebug Errors

  26. 26 Samuel said at 9:02 pm on May 23rd, 2010:

    i got it all to work! bug Firebug still gives me errors, please advise!

  27. 27 Nika said at 7:39 am on May 24th, 2010:

    Nice work, any actual samples ?

  28. 28 k0st4s said at 3:18 pm on April 3rd, 2011:

    I’ve got working samples and all files that are hosted on apple’s domain.

    If you want them, just send me an e-mail and you’ll receive every file.

    I can guarantee, PastryKit is over the top framework for native-looks.

    k0st4s@live.se

  29. 29 geonerstiem said at 9:52 am on June 28th, 2011:

    :)

Leave a Reply