I know, I know, enough news about the iPad already! I haven’t picked one up yet because I’m much more keen on having a device with 3G access. However, this isn’t about the iPad itself, but something very interesting I stumbled upon while playing with the iPad Simulator.
With the iPad comes a special Safari bookmark labeled “iPad User Guide.” The page it links to behaves almost exactly like a native application, but in the web browser. It has a split-view with all of the UI flare in UIKit. The crazy part is, it’s done completely in HTML/CSS/JavaScript.
Check out this video to see the iPad User Guide’s split-view scrolling panes in action:
Breaking the Rules
What’s particularly interesting is that it does something that shouldn’t really be possible in Mobile Safari: It includes scrolling panes that can be manipulated with a single finger, complete with the signature iPhone OS “scroll bars” and elastic transitions. If you have ever worked with Safari on the iPhone, you know that having scrolling boxes of content is sort of possible, but requires a special two-finger gesture to scroll.
Curiosity got the best of me, so I loaded the page in Safari on my laptop (and changed Safari’s user agent to mimic the iPad) and got to work with the developer tools. After extracting the JavaScript and de-minifying it, my suspicions were confirmed. Apple was manually reading the touch events, calculating the inertia of the scrolling, and manually drawing the scroll bars. It was incredible that it worked so smoothly in the browser.
The Mystery of “AD”
What was more interesting is that there was an entire framework running this web application. The framework weighed in at 4,300 lines of code, and was unmistakably an Apple-born API. Every class and constant was prefixed with the letters “AD” and some of the classes include ADTabBarController, ADScrollPane, ADViewController, ADView, ADToolbar, and dozens more.
What does the AD prefix stand for? I don’t know. The framework itself was contained in a file called AdLib-ug-ipad.js, so for the time being let’s call it AdLib. I also appreciate the sense of humor the developers seem to have about the name. The accompanying application code that utilizes the framework is about 1,500 lines and offers a few clues as to how to use the AdLib framework. There is no documentation in the code or anywhere online, and the local variables are shortened to a, b, c, etc… If you want to know more about how it works, take a look at the code linked below.
Is AdLib a framework that Apple plans to release for the public? I sure hope so. The framework looks to be extremely well thought out and complete. Perhaps this will be a framework to support a future release of Dashcode, an application for writing dashboard widgets and Safari/iPhone web apps. Maybe we’ll hear something about it this Thursday at Apple’s event for iPhone OS 4.
What do you think?
I have copied and de-minified the code, however there is absolutely no license from Apple for use of this code. This is purely for informational purposes.
What do you think about AdLib? What does “AD” stand for? Is Apple about to release a JavaScript framework? Let us know, in the comments.
Update
So It looks like Apple has no intent to release these tools to developers to create iPad interfaces. I was informed that GitHub (the company that was hosting the code snippets) received a DMCA takedown notice from Apple for the code, and has removed it. If you are still interested in seeing the code, visit http://help.apple.com/ipad/mobile/interface/ with a browser using an iPad user agent.
91 comments ↓
I think/hope they will adopt http://cappuccino.org since it brings a good portion of a framework people know for Apple development (Cocoa) over to the web. From what I’ve heard Apple seems to let these small frameworks get built for individual projects. Maybe its something they hacked together for this specific app.
Cool. Lets hope some jQuery extension will make this avaible for everybody.
Apple, PLEASE make this available & supported!
I noticed this, and tried to load it via Safari using the iPhone U-A and got booted out. How did you get to the page from your browser?
btw, Apple has a bug in there. All their back buttons are missing the button graphic
via DF: this looks similar hand has comments: http://developer.apple.com/iphone/library/iPad/ui/js/ui-ipad.js
It looks similar to what they did for the iPhone (see http://davidbcalhoun.com/2009/pastrykit-digging-into-an-apple-pie for more details on that) including the JSON content loading. It also includes support for internationalization.
The iPhone U-A won’t work, it has to be iPad U-A. There is a script there called redirect.js that will check for it.
I did some reverse-engineering and built a Twitter trends reader on top of PastryKit a while back.
http://michaelgrinich.com/pastrytweets
Code: http://github.com/grinich/PastryTweets
Have you seen Gmail’s modified Web interface for the iPad? Scrolling inbox pane as well as the ability to scroll the messages.
http://gmailblog.blogspot.com/2010/04/gmail-on-ipad.html
[...] guys who brought it to our attention, Done21, are tentatively referring to this unannounced, not-quite-public framework as “AdLib”, after [...]
[...] a cool library from Apple that makes great iPhone apps using the Web. Now we see the mysterious AdLib which seems to be similar but gives you goodness on the iPad [...]
[...] attempted to fix the Wi-Fi issue. Done21 claims to have found the special framework used in the iPad. iSuppli tore down an iPad, turns out it should cost about [...]
“I haven’t picked one up yet because I’m much more keen on having a device with 3G access.”
Just a public service announcement: you can actually pick up a Wifi iPad now and trade it in for a 3G when it comes out with no restocking fee! I was holding out myself until I learned about this.
[...] Read More [...]
[...] new AdLib framework for iPad, detailed by web developer Jim Hoskins, is used by the built in iPad User Guide within Safari to present a [...]
[...] guys who brought it to our attention, Done21, are tentatively referring to this unannounced, not-quite-public framework as “AdLib”, [...]
[...] com suporte a split views em modo paisagem e popovers no modo retrato. Neste caso, o código dele foi analisado por um desenvolvedor, e foi tão bem implementado que o web app é inteligente o bastante para alternar entre um modo e [...]
Maybe it stands for Almost Done
Joking apart, did you get to play with it a little bit?
It will be so awesome if we could use it too.
Looks like Google may be utilizing the “AD” libraries for their Gmail iPad interface
[...] his iPad (it’s AdLib-ug-ipad.js for the trivia buffs out there), a developer by the name of Jim Hoskins is credited as discovering Apple’s key to HTML 5 through its SDK and [...]
[...] Done21.com has detected something engaging in a online iPad user-guide: a brand brand new JavaScript horizon they’ve dubbed AdLib (after a filename) which allows for really local app demeanour as well as feel in a decidedly web-based app. [...]
Bad idea using the word “ad” in it. I instantly think “mobile advertisement”, the way Apple and Google both compete for it. But I’ll keep an open mind.
[...] Done21.com has discovered something interesting in the online iPad user-guide: a new JavaScript framework they’ve dubbed AdLib (after its filename) that allows for very native app look and feel in the decidedly web-based app. [...]
Apple’s big on SproutCore… We’ll be seeing a lot more Apps written using that framework
[...] User Guide. Was sich auf den ersten Blick anfühlt wie eine native App ist eine Webseite die, wie Jim Hoskins entdeckt hat, über ein gänzlich neues Framework ausgeliefert wird. Bereits für das iPhone nutzte [...]
[...] Done21.com has discovered something interesting in the online iPad user-guide: a new JavaScript framework they’ve dubbed AdLib (after its filename) that allows for very native app look and feel in the decidedly web-based app. [...]
[...] für Web-Entwickler: AdLib – Apple’s secret iPad [...]
[...] Done, Apple apparently has its own iPad-specific web framework, which Jim Hoskins has dubbedAdLib. If you don’t own an iPad, you can still have a look at it by spoofing the user-agent [...]
[...] diseñado para e iPhone y a TuneKit, usado para los contenidos de iTunes LP.Hoskins comenta en su blog que se tratan de 4300 líneas de código JavaScript, HTML y CSS, todos estándares web, que [...]
[...] Falk Hedemann) Apple scheint ein neues Framework für Web-Apps in der Hinterhand zu haben, mit dem Entwickler Anwendungen im iPad-Style erstellen können. Jim [...]
To try it out on Mac (or PC) Safari:
First enable develop menu. (Preferences / Advanced / Show Develop menu in menu bar)
Change user agent (Develop/User Agent/Other…) to:
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us)
AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B367
Safari/531.21.10
Then you can view the iPad’s online help here:
http://help.apple.com/ipad/mobile/interface/
Of course you can try it out in any other modern browser that supports user agent change.
[...] comenta en su blog que se tratan de 4300 líneas de código JavaScript, HTML y CSS, todos estándares web, que [...]
[...] aplicaciones web en la iPad, usando HTML, CSS y Javascript, según ha descubierto el programador Jim Hoskins. El nuevo sistema se usa en la guía del usuario de la iPad, y presenta temas en una pantalla [...]
[...] Interessant om te zien dat de help pagina’s van apple’s Ipad geheel opgebouwd zijn uit HTML,CSS en JavaScript. Lees hier: Almost Done [...]
About the name AD, I think that AD stand for “Apple Developer” and is used by the team in charge of the Apple Developer connection websites.
[...] esto si que es interesante que ya este “disponible” el framework para realizar o transformar vuestras webs para el iPad. Vamos, para tirar de todos las posibilidades que este ofrece. Ideal para webmasters o [...]
[...] Done21 outlines what could be something huge. Indication that Apple is blending the world of Web app and installed app, down to where you cannot really see the difference. Based on what I am seeing in this video, the proof is readily apparent to all those who are ready to see what can be done with a file called AdLib. [...]
Did anyone grab a copy of the commented version on apple’s site? It looks like it has been replaced with the minified version.
This is a very synical view, but could ‘AD’ possibly stand for some sort of ADvertising supported webpages/frameworks. We know Apple is looking at developing an advertising platform (specifically a mobile one). Infusing iPhon/iPad specific webpages with Ads could be the way Apple want’s to go on this.
I think “AD” stands for Apple Developer and AdLib is the Apple Developer Library of JS Framework I’m hoping they’ll release. That’s just my two cents.
I too am waiting for the 3G, but I’ve been to Best Buy twice just to play. I agree that the world of web apps is going to grow. For one, it’s a great way to get your content out there WITHOUT worrying about App Store approval. Actually, I am putting together a list of the best web apps out there, mainly web apps for the iPad but really any Safari web app that looks like a native app. If any one knows of any, please let me know on twitter so I can share. http://twitter.com/iPadWebApps
[...] Fonte [...]
[...] April 8, 2010 The iPad User Guide (web application) was made using a new framework, ADLib, developed by Apple. It is based on HTML/CSS/JavaScript and it reproduces the controls and effects from the [...]
[...] [Via Almost Done] [...]
For a standalone solution for single finger scrolling check out iScroll iScroll is also being integrated with iUI check the iui-developers Google group for the latest info.
Yesterday they announced iAd, which is based on HTML5
[...] web app developers have been means to put together yet. Why? Apple’s got a tip — Done21 is job it “AdLib,” after a record found somewhere in a source code, as well as assumingly it’s a living room [...]
[...] AdLib – Apple’s secret iPad web framework? – Almost Done (tags: ipad javascript framework apple iphone mobile development html) [...]
[...] Visto en Almost Done [...]
[...] than anything web app developers have been able to put together yet. Why? Apple’s got a secret — Done21 is calling it “AdLib,” after a file found somewhere in the source code, and apparently it’s a library that connects UIKit [...]
[...] than anything web app developers have been able to put together yet. Why? Apple’s got a secret — Done21 is calling it “AdLib,” after a file found somewhere in the source code, and apparently it’s a library that connects UIKit [...]
[...] than anything web app developers have been able to put together yet. Why? Apple’s got a secret — Done21 is calling it “AdLib,” after a file found somewhere in the source code, and apparently it’s a library that connects UIKit [...]
[...] web app developers have been able to put together yet. Why? Apple’s got a secret — Done21 is calling it “AdLib,” after a file found somewhere in the source code, and apparently it’s a library that connects [...]
[...] web app developers have been able to put together yet. Why? Apple’s got a secret — Done21 is calling it “AdLib,” after a file found somewhere in the source code, and apparently it’s a library that connects [...]
[...] than anything web app developers have been able to put together yet. Why? Apple’s got a secret — Done21 is calling it “AdLib,” after a file found somewhere in the source code, and apparently it’s a library that connects UIKit [...]
[...] web app developers have been able to put together yet. wht? Apple’s got a secret — Done21 is calling it “AdLib,” after a file found somewhere in the source code, and apparently it’s a library that connects [...]
[...] web app developers have been able to put together yet. Why? Apple’s got a secret — Done21 is calling it “AdLib,” after a file found somewhere in the source code, and apparently it’s a library that connects [...]
[...] web app developers have been able to put together yet. Why? Apple’s got a secret — Done21 is calling it “AdLib,” after a file found somewhere in the source code, and apparently it’s a library that connects [...]
[...] hecho enteramente con XHTML, CSS y JS – No tendría por qué haberlo aclarado). Gracias a Done21 me enteré de la existencia del framework detrás de esa funcionalidad: Una críptica API de JS de [...]
[...] web app developers have been able to put together yet. Why? Apple’s got a secret — Done21 is calling it “AdLib,” after a file found somewhere in the source code, and apparently it’s a library that connects [...]
[...] web app developers have been able to put together yet. Why? Apple’s got a secret — Done21 is calling it “AdLib,” after a file found somewhere in the source code, and apparently it’s a library that connects [...]
[...] web app developers have been able to put together yet. Why? Apple’s got a secret — Done21 is calling it “AdLib,” after a file found somewhere in the source code, and apparently it’s a library that connects [...]
[...] web app developers have been able to put together yet. Why? Apple’s got a secret — Done21 is calling it “AdLib,” after a file found somewhere in the source code, and apparently it’s a library that connects [...]
[...] Pode parecer uma App nativa, mas este iPad User Guide é feito em HTML/CSS/Javascript puro! [...]
[...] a cool library from Apple that makes great iPhone apps using the Web. Now we see the mysterious AdLib which seems to be similar but gives you goodness on the iPad [...]
[...] Done21Web: Apple [...]
[...] detailed over at Done21 last week, Apple have been using an awesome framework to mimmic Native iPad Apps in a web [...]
Hi Jim,
I came across your post this morning as I was wondering would it be possible to mimmic the iPad 2 Column Interface via a Web App. After spending an hour or 2 messing around, I have managed to get all of the source behind the User Guide and figure out how it loads its data etc. My next step is to run the App off a MySQL Database instead of a local file.
I have made the full source available on my site, http://www.gregsrumors.com and have also put the demo of the Users Guide up there that is accessible from any browser, not just the iPad.
I was wondering how interested you where in continuing development along this line after you recent post?
Thanks,
Stephen
[...] web app developers have been able to put together yet. Why? Apple’s got a secret — Done21 is calling it “AdLib,” after a file found somewhere in the source code, and apparently it’s a library that connects [...]
[...] Shared AdLib – Apple’s secret iPad web framework? – Almost Done. [...]
[...] AdLib – Apples secret iPad web framework? – Almost Done – very interesting. (thanks Mark) [...]
[...] web app developers have been able to put together yet. Why? Apple’s got a secret — Done21 is calling it “AdLib,” after a file found somewhere in the source code, and apparently it’s a library that connects [...]
[...] web app developers have been able to put together yet. Why? Apple’s got a secret – Done21 is calling it “AdLib,”after a file found somewhere in the source code, and apparently it’s a library that connects [...]
[...] Full Story: Almost Done [...]
[...] is the name that’s been given to a not-so-secret-anymore Apple web framework. The story mentions use on the iPad, but if I’m not mistaken visiting the iPhone User Guide [...]
[...] Webapp repository for evidence. If that doesn’t do it for you, then see references to a ‘Secret UI Framework,’ nicknamed AdLib by the developer who sniffed it out while tooling around in Apple’s developer [...]
[...] is used by Apple Retail, Coherent is used by Dashcode 3, PastryKit is used by the iPhone, and AdLib is used by the [...]
[...] bruger eksempelvis SproutCore til MobileMe, deres eget TuneKit til iTunes, Coherent til DashCode, AdLib på iPad’en og endelig endnu et eget-udviklet framework, PastryKit på [...]
[...] is used by Apple Retail, Coherent is used by Dashcode 3, PastryKit is used by the iPhone, and AdLib is used by the [...]
[...] velocità che ha, nonostante migliaia di righe di codice.AdLibAdLib è stato scoperto di recente su questo blog, si può dire che è una versione per iPad di Pastrykit, anche se il nome è totalmente diverso. [...]
Off-the-top-of-my-head guess: AD == “Adobe Dominated.” This would look to provide the many features beyond video that Flash supplies.
While Jobs might be right in everything disparaging he’s said about Flash, I can’t believe that he would concede such an important checklist item to Android.
Ergo, there must be something brewing in 1 Infinite Loop that provides for that Rich Internet Experience. This is the closest that I’ve seen to something that might do it.
hola baje el framework adlib y el ejemplo pero no puedo hacer que se actualize el contenido del ejemplo, por mas que modifico el content.json no logo que se actualize el contenido de la pagina alguien que me oriente? saludos
Question is, whether its a low priority API-Project. Or a case study for us to copy? I think it makes great sense starting from scratch for a Webkit specifik framework and the tricks aren’t that hard to acomplish.
ive looked into those codes so many times lol, im guessing AD stands for something like apple development
[...] Webapp repository for evidence. If that doesn’t do it for you, then see references to a ‘Secret UI Framework,’ nicknamed AdLib by the developer who sniffed it out while tooling around in Apple’s developer [...]
[...] mit seiner Silverlight-Plattform ist auch Apple mit drei weiteren Projekten daran beteiligt: AdLip, TuneKit, das unter anderem bei iTunes LPs Verwendung findet und [...]
[...] guys who brought it to our attention, Done21, are tentatively referring to this unannounced, not-quite-public framework as “AdLib”, [...]
Perhaps someone’s already figured it out, but “AD” has got to be short for “Apple Device”. In the source code: “ADSupportsTouch()”. That would make sense.
Seems like Apple offers a JS framework for iAd advertisers called “iAd JS”. Perhaps this is it? This however is only available to registered Apple developers and perhaps advertisers.
Source:
http://developer.apple.com/iad/
[...] becomes one of most discussed topics today. It is made by Apple and suspected being the web framework used by Apple for iPhone and iPad. What [...]
[...] AdLib – Apple’s secret iPad web framework? – Almost Done (tags: ipad html5 lib) [...]
Leave a Comment