Michael Brown October 31 2012 04:45:13 PMMy "Original" NAB Names Picker
A few years pack, I wrote a NAB Name Picker for the Web. I say "wrote", but in fact, I was building on the considerable work of others (all credited at the time).
I was pretty pleased with it back then. But looking at it now, all I can see is what an unholy mess of code it is. Callback soup? Check. Dozens of functions polluting the global namespace? Check. If I were to try and rewrite it now, I wouldn't know where to start!
There were also problems from a UI perspective. For one, the dialog opens in a new browser window, and those are prone to becoming "lost" when the user clicks elsewhere on the desktop. (Users seem to have an infinite capacity for forgetting what they had open on their desktops not ten seconds previously.) The new window causes a different problem on mobile devices, where browser windows open full screen; in this case, you're taken out of your app completely! Furthermore, on iOS you're limited to nine browser windows (actually, browser tabs) open at once in Mobile Safari. What happens if the picker dialog happens to be your tenth browser tab? The picker window will overwrite the contents of one of your existing tabs without asking you. Nice (not).
So, I've written a new one. And this time, I can say "written" with hand on heart because this time it's all my own work. Apart from all the libraries that I've used, of course, and there's a good many of those, I'm afraid! Some of the new features:
- I've used jQueryUI.dialog() so that the dialog (actually, just a div tag) opens on the source form rather than as a new window.
- It uses pagination along the bottom - you know, those 1, 2, 3, 4 links etc that you get on many search engine results. I've borrowed from Addy Osmani's Backbone Paginator project for this. (See my previous blog post for more details.)
- I've also tried to pay particular care to how it looks and operates on mobile devices. On smaller devices In particular, it should resize itself dynamically to fill the viewport (browser) size, and not scroll off outside of that viewport area. This even works if you tilt your phone from portrait to landscape mode, for example. (Note: only really tested on iOS devices.) On bigger devices, like iPads, however, you should be able to drag the picker dialog around and resize it, just as you would on a desktop.
Desktop single picker:
Desktop multi picker (sorted by last name):
iPhone single picker:
The picker app uses jQuery, jQueryUI, backbone.js, underscore.js, LAB.js and the touch-punch library for jQueryUI on mobile devices. Phew! Hopefully, you'll be using some, if not all, of these libraries in your own projects. If not, then you might find it all a bit heavyweight to be loading all those libraries just to use the new picker.
Requires Internet Explorer 7 or better. By "better" I mean any browser that is not called Internet Explorer, as well as higher-numbered versions of IE itself!
The picker makes extensive use of CSS, which is why Internet Explorer 6 is out. I may return to this and see if there's some polyfill that might get it working on IE6. To be honest though, I'm just about through wasting my time making stuff work on that particular rubbish. You may also see some CSS quirks on IE7: elements visible that should be hidden, for example. Resize the picker as a workaround for now.
Live demo of the new picker is at http://22.214.171.124/public/nabpickersample.nsf/pickerTest?OpenForm.
The picker database and a sample app that calls it can be downloaded from the URLs below. Documentation is in the readme.pdf file, included in the zip.
- Comments