The jQuery Mobile talk was presented by Todd Parker and Scott Jehl of the
Filament Group, who are design leads & corporate sponsor for jQuery UI and have written volumes on both jQuery and Progressive Enhancement. The talk built on John Resig’s keynote announcement of the framework, and delved into some more of the specifics of how a jQuery Mobile app will function in different environments. One complaint at the end of the talk pointed out that their presentation did not give a good sense of how the platform will appear on low-end devices, but you can get a taste for what is to come on the more advanced phones at the jQuery Mobile demo page.
Note: these (and most subsequent) notes have been dumped more or less wholesale from a vim file, so I apologize for the inconsistencies of format.
UI: You don’t make a mac version and a windows version of a web app, you have one UI across devices. Moving in that direction for Mobile apps, don’t need to make it all look like iPhone!
Synthesized a flexible look and feel that they believed would work across touch and mobile devices: goal was to work in all modern mobile platforms
jQuery UI is theming a widget: ThemeRoller is theming an entire application.
Accessibility is a focus
The future: progressive enhancement and symantic markup, leveraging html5 when appropriate but falling back to even primitive browsers.
Aside: A List Apart isn’t really jQuery focused, but it’s a great and relevant blog
One codebase, all platforms, works for each device in the best way for that platform
AN APP
Theme file, jQuery mobile, jQuery core.
Within body of the page, you create divs with a data-role="page" to designate the pages of your application. Multi-page websites in one HTML doc -> Less loading on old browsers, faster responses. Alternately, make an individual doc for each page, pull in with ajax, grab the div with the data-role of page, then switch the view.
jQuery mobile will be full back-button support, missed the name of the specific plugin that enabled that behavior
You get nice transitions layered on top if you have a capable browser – they borrowed jQTouch transitions, built very elegantly. Implement with <a href="" data-transition="pop">Link</a>
(or fade, etc)
Dialogs are not built differently from any other page, just designate that you want it to be a dialog.
jQuery Mobile will inset and “float” the content, but load it just like any other page.
Can add data-transitions to dialogs too, therefore
THEMING
Can designate button and list styles, header bar styles, coloring, bg textures, and then mix and match to have buttons “pop” more
Framework drops in back buttons (although you can override) automatically, to help with the state maintenance
Can put your own buttons in header bar: buttons automatically generated from links in header div, and again, you can override default placement with tags. If you put two links in, by default the first is on the left of the title, the other on the right.
They don’t turn every link into a button, but data-role="button" will designate a link as one, and wrap with the appropriate theme style
Other types of inputs are automatically made into buttons, you only need to specify for links.
Sweet: Icon set will swap out for high-res on retina display
<a iconpos="notext">Delete</a> will display as a simple (X) button, but work with screen reader
Can wrap data-inline="true" container around several links, to inline them
data-role="controlgroup" will make buttons into a vertical list
Can, as said before, mix and match themes for your buttons. A button will inherit the parent theme, all the way up to body, or you can override.
FORMS
Markup drives behavior, so it’s picky about your code: Associate your labels with form elements, or it will look messed up. Keeps you honest.
Labels floated, but if the screen goes too narrow the labels pop above the input element. “Do your markup the right way, and the framework will take care of the rest”
Text areas grow as you type, to avoid the scrollbar! Hooray!
Aside: IPHONE OS GESTURE: Two-finger scroll will scroll within a text area, or any other page element with a scrollbar. That’ll come in handy!
sliders: based on plain HTML5, <input type="range"/>, script will use this text to either generate a text input or a custom widget or both, and keep them in sync
Lists: Esp. Filtered lists
One takeaway: Need textmate, everybody and their friggin mother uses it
SEARCH FILTER BAR, want:
data-filer='true' on the UL itself (or OL, I suppose). Magic.
collapsables, UI element grids (buttons in a line, etc, better than tables)
Collapsable: Have a div with the right attribute, then a header: the header displays on the collapsable, anything after will be shown/collapsed.
Toolbars: several positioning options, still working on it, they know it’s slightly buggy
Footers do something with data attributes to indicate where and how they should display–missed it, but it’s in the demo.
Shooting for a bit of a community aspect to the theme creation
Q&A: Can you use themeroller to build a caching manifest for you?
–Good question, interesting idea
Any support for @font-face?
–Doesn’t work for enough platforms to be in core, but you can roll your own stylesheet to accompany your jQuery Mobile app.