Shortly after Apple started shipping the first iPads, it was quickly discovered that the "help" page for the iPad was nothing more then a bunch of fancy javascript, css, and HTML loaded into Safari. There has been a lot of effort to dissect this new "AdLib" library, and where would I be if I didn't also try to take a stab at it?
Like most of Apples development environments, AdLib focuses on being very Location-aware and has support for multiple languages. As such, it was quite easy to figure out that AdLib is nothing more then a framework which loads in all the content Via an AJAX request to a few files. The most important of these files is
After digging in some more, I noticed a very simple structure to this file, and I was able to easily generate a bundling script to make it easy to write your own application using AdLib. You can check out the entire project at http://bitbucket.org/cmoyer/ipadadlib/overview.
Next we'll create a sub-page for this section. Lets call this sub-page "About the Author". We'll make a single-level sub-page by simply adding in another file to this folder,
Next we'll want to add in some HTML for our About the Author page, so we make the file
When I first started playing with this library, this is where I stopped. I bundled, went to
To solve this, simply create another section under your
That's it! if you bundle up with
Note that this app works beautifully on BOTH the iPhone AND the iPad.
Like most of Apples development environments, AdLib focuses on being very Location-aware and has support for multiple languages. As such, it was quite easy to figure out that AdLib is nothing more then a framework which loads in all the content Via an AJAX request to a few files. The most important of these files is
content.json which is quite literally just a compressed and serialized set of javascript variables containing all the content to be displayed including Base64 encoded images in some cases.After digging in some more, I noticed a very simple structure to this file, and I was able to easily generate a bundling script to make it easy to write your own application using AdLib. You can check out the entire project at http://bitbucket.org/cmoyer/ipadadlib/overview.
Creating your first section
Creating a section is easy, you simply create a directory underContents/en/src/pages/, lets call this page "about" for our example. You should now have a directory called Contents/en/src/pages/about. Within this directory, we need to create an index configuration. This file is named index.cfg and only one field is required: name. You can also specify an icon, which can any URL to your icon to display. Here's what that file should look like:
"name": "About This App",
"icon": "images/About.png"
Next we'll create a sub-page for this section. Lets call this sub-page "About the Author". We'll make a single-level sub-page by simply adding in another file to this folder,
Contents/en/src/pages/about/author.cfg. This file can have all the same configuration options as our root page, and we could even make this a folder and make sub-sections as well, but we'll start simple. Again the only requirement is name, so lets just put that in:
"name": "About the Author"
Next we'll want to add in some HTML for our About the Author page, so we make the file
Contents/en/src/pages/about/author.html. This can contain any HTML code, and there's quite a bit of style that is already set up for you. The simplest style is by simply using a P tag with the Para class:
<p class="Para">The Author is very fun!</p>
When I first started playing with this library, this is where I stopped. I bundled, went to
interface/index.html, and saw just the About the author page show up. I was baffled, until I discovered that AdLib intelligently will only display a section as a SECTION if there are multiple entries.To solve this, simply create another section under your
about folder:Contents/en/src/pages/about/help.cfg
"name": "Help"
Contents/en/src/pages/about/help.html
<p class="Para">Somebody Help me!</p>
That's it! if you bundle up with
./bin/bundle.py [app-name] you'll now have your app available at interface/index.html! You'll need to serve this up with the DocumentRoot being the root of this folder (Or copy Contents and interface into your web root) since the "Contents" folder currently must be at your webroot. Note that this app works beautifully on BOTH the iPhone AND the iPad.
Comments