The Droid Groceries saga so far…

Warning, this post gets kinda geeky and technical in places. 🙂

I shared with you guys a few details about my first few forays into iPhone programming with NS Basic App Studio. It looks like I never told you about my favorite iPhone ‘app’ that I made myself: a simple grocery list program that I use all the time. There are other to-do lists and grocery story management apps available for free, but I love this one because it’s streamlined to exactly what I need – it’s easy to add new things to the list, and to mark them off when I’m shopping.

A few months back, I got a Droid LG Eclypse from work, to replace the ancient Blackberry I was issued years and years ago. NSBasic App Studio is supposed to work with all versions of Droid as well, so I was excited to get the Grocery app working on the Eclypse. This didn’t turn out to be so easy. The screen is slightly smaller, and I really wanted to be able to use the slide-out keyboard when typing into the list, which means showing the screen in landscape view. So I played around with a few different layouts, and thought I had a version that would work great in portrait view. Here’s what it looked like in Chrome on my desktop:

Loaded it onto my droid, checked it first in portrait mode…

Then in landscape mode:

Somehow the absolute positions are thrown completely out of whack when the orientation changes, and I couldn’t find any good way to fix that in App Studio. This evening, I tried something different – I took the important bits of code from the app, and worked them into an HTML app that was a bit more bare-bones; simple flow layout in tables, an ordinary list box instead of the crazy NSBasic menu list, and so on.

Again, it worked great locally. Loaded it onto the Droid…

That’s not right! Apparently the reason that NSBasic App Studio didn’t use traditional HTML list boxes was very simple – mobile browsers for iPhone and Droid don’t show them right, they just show one line and popup the rest of the list if you click on the box, same as for HTML drop-down listboxes:

That’s where things stand for now. I like the way the app behaves with the ‘homegrown HTML’ approach – I can scroll it back and forth with my finger when it extends off the screen now, which I couldn’t do with the NSB App Studio version, probably because that used so much ‘absolute positioning.’ I could even use it like this, but I don’t really like the pop-up list. I want a list where I can actually see at least a few items on my list and also have access to the other controls at the same time. The droid screen is small, but it’s big enough to handle that.

I think the best approach is to reverse-engineer the NSB iMenu list control, so that I can drop something like it into my table layout, without an absolute position. It seems to be an HTML unordered list structure, with plenty of CSS style formatting dumped onto it, and special handling so that it can scroll on its own and keep track of the list element that’s been tapped most recently. That shouldn’t be too hard.

Wish me luck, and I’ll come back to report if I make any progress.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: