Sean Cook » Handsets

Testing mobile web pages in Firefox

Sean — Wed, 24 Sep 2008 17:19:56 +0000

The worst part of developing for the mobile web is ensuring that you’re accounting for the quirks of each of your target devices’ browsers. I often compare this to developing for the fixed web circa 1998– no matter how great your site looked in one browser, you still had to hack it to pieces to make it render correctly in another browser (*cough* IE *cough*). To accomodate these nuances, you typically have to implement per-device views that can make projects exponentially harder to test, and really take the fun out of mobile development.

Fortunately, I spend a lot of time writing both the client side of my mobile web apps, as well as the server side components that power them. The easiest way I’ve found to quickly test the rendering of my output per device User-Agent is to install the User Agent Switcher component for Firefox. This component allows you to quickly and easily change the User-Agent header that your browser uses to identify itself to web servers. With just a few clicks I can quickly run down a list of 10 devices and verify that device-specific logic is firing properly on the backend. Additionally, I’ll often resize my Firefox window to the target device’s screen dimensions (e.g. 240×320) to get a rough approximation of the overall look and feel of the page.

While there is no real substitute for testing on real devices, this technique has proven useful to me and hopefully someone else will also find it useful.

iPhone screenshots are easy

Sean — Mon, 22 Sep 2008 21:38:07 +0000

If you have firmware version 2.0+ on your iPhone, you can quickly take a screenshot on the device by navigating to the screen you want to grab, holding down the home button, then pressing and releasing the sleep/awake button on the top of the phone. Your screen will “flash” to indicate that the picture has been taken and you can find the picture in your camera roll library on the device.

Programmatically obtain a phone’s ESN

Sean — Thu, 03 Jul 2008 18:28:02 +0000

Bitpim is an open-source program that allows a user to manipulate data on a CDMA handset, including the phone book, wallpapers, ringtones, and in some cases, the filesystem. While poking around the application’s source, which is written in python, I found a great class that provides a quick way to access the phone’s manufacturer, ESN, and firmware revision. Yes, this information is available through a small set of keystrokes on CDMA handsets, but I have often found cases where I would still prefer to provide an app to a user and have it do all the dirty work.

The class is called “phone_detect.py” and it’s located under the /src/ in the source tree. All that it really does is act as a wrapper for the AT commands that are necessary to switch the phone into the correct mode and also to ask the phone for it’s configuration info. You can get a good understanding of what it’s doing by following the calls to __get_esn(). There are plenty of references available online that show the full range of AT commands that phones respond to.

To play with the class, you’ll need to get an install python. In addition to python, you will also need pySerial in order to interface with your serial port. Once you have your handset connected to your computer you can call use the class directly by calling DetectPhone().detect(). There’s an example of using this call in setphone_wizard.py if you need one.

GZIP content for mobile devices

Sean — Wed, 02 Jul 2008 18:31:39 +0000

One of the easiest, most obvious ways to lower the data transfer footprint of your mobile apps is to compress data. For some reason, I still see mobile web decks that output XHTML-MP in plain text instead of very-easy-to-implement GZIP compression. I’ve implemented GZIP output on multiple J2EE projects with the help of Jayson Falkner’s excellent GZIPFilter which is available in his article Two Servlet Filters Every Web Application Should Have.

To implement the filter in your own projects, download the three pieces of the filter: GZIPFilter, GZIPResponseStream, GZIPResponseWrapper and save them in your project. Then, in your web.xml add the following entries:


Compress
GZIPFilter


Compress
*.do

Remember to adjust the url-pattern to what’s appropriate for your webapp. I typically map my Spring MVC dispatcher servlet to *.do, but that’s just a hangover from Struts.

Once you’ve redeployed your webapp you should verify that output is rendering correctly in a desktop client such as Firefox.