Several of my colleagues were discussing HTML 5, and one of them pointed me to this great online book: Dive into HTML 5. After some reading, I thought I’d try my hand at using the HTML 5 geolocation API in Visualforce.
Turns out it was rather simple – check out my page here (assuming I haven’t hit any limits). The image to the right shows it running on my iPhone.
Implementing
So one problem with HTML 5 is that it’s not quite a baked standard yet. If you’re visiting my page, I don’t know whether you’re using a dated and creaky browser, or a shiny and new browser. I used a great little JavaScript library – Modernizr – to help me out there.
So to Force.com. All I did was:
- Download Modernizr (a single JavaScript file)
- Create a Static Resource called modernizr, mapping to the file.
- Create a simple Visualforce page and controller (below) – which shows a simple button and two outputfields. When the button is pushed, it called Modernizr, calls the geolocation API (if you have one), and invokes a JavaScript function which then sends the values to the controller, which then also rerenders the form values (using AJAX) so that you can see your coords.
The Controller
Here’s the code for my controller. It’s pitifully simple:
Two properties, and a method that will be called when we have the values.
The View
Now here’s the Visualforce page:
A brief description:
- The includeScript includes the static resource (the Modernizr library)
- The doTheGeoThang() function checks that you’re hip, and then calls findMe() with your location if you are
- findMe() is created using the actionFunction Visualforce component (see this blog post). When it’s called, it invoked the iFoundYou() method in our controller, and rerenders the outputPanel containing the longitude and latitude.
Thoughts
That’s it really. You can imagine using this in your own forms or other apps on Force.com. What’s really cool is that the same page works on my iPad and iPhone too. No matter which platform you use, your browser will ask you for permission to provide your location.
HTML 5 is full of other great features – like support for placeholder text, autofocus and ‘typed’ fields (like an email field), and web storage for offline support. I’d really like to see how far one could push the web storage and Force.com.