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.

“Should you write a mobile web application which will render on multiple platforms without significant change but won’t be able to take advantage on native features?”

Or

“Should you create platform specific native application to fully utilize the power of the device but increase your effort?”

The basic premise of hybrid approach is that you can have your cake and eat it to. In this approach you use the browser control and create a shell application which is then used to render HTML pages. Since most of the popular phone browsers are Webkit based (Microsoft is an exception), they are expected to have similar behavior making you task simpler.

To access the native features of the handset, you need to create APIs in the shell application which can be invoked through JavaScript coding. The tools and frameworks are expected to provide the shell applications and the APIs for different platforms.

At least that is what the theory says.

In practice there are several issues that need to be looked into.

• There are differences between the browser and the browser control. Their behavior is not identical. Normally, browser controls lag behind and are buggier.
• Especially for iPhone, there is a chance that hybrid applications may get rejected by App Store.
• For the current versions, performance issues have been reported.
• It takes lot of effort to make the hybrid application look and feel like a native application and that is additional effort for each platform – this negated the original value proposition.
• HTML5 have already started providing access to several native features and we can expect it to become more comprehensive.

Finally, hybrid application kills the differentiation between different platforms. So, why would either Apple or Google be interested in promoting it?

As I have mentioned earlier (here it is), there are five approaches to cross platform mobile application development and many tools are available under each category. They are:

(1)    Mobile Web (JavaScript-CSS library), (see this)

(2)    Visual Tool (No access to Code), (see this)

(3)    App Generator (Native application for multiple platforms), (see this)

(4)    Hybrid App (Leverages embedded browser control) and

(5)    Game Builder (see this)

Here are 5 hybrid tools – the ordering is alphabetic.

1. App Mobi

• Home page:  Link
• Genesis: App mobi generates revenue from cloud based services and give the tools free
• Version: 3.4.0
• Licensing: Free
• Download: Link
• Documentation:  JavaScript API Reference,  Web Service API Reference
• Sample application: List, Tutorial
• Implementation: List
• Wikipedia: No
• Additional: Wikimobidex
• Article on how to use:  Learn html5 Game Dev, appMobi XDK Detailed Tour

2. NS Basic

• Home page:  Link
• Genesis: Creator of development tools for handheld devices since 1993
• Version: 2.0.1
• Licensing: Paid only
• Download: only demo version available
• Documentation: Tutorial
• Sample application: How to
• Implementation: Quotes from user
• Wikipedia: Link
• Additional: Tech Notes
• Article on how to use:  By Nick Antonaccio

3. Phone Gap

• Home page:  Link
• Genesis: Adobe acquires Nitobi which is the company behind PhoneGap
• Version: 1.4.1
• Licensing: Modified BSD or MIT
• Download: Available on home page
• Documentation: API Reference
• Sample application: Getting Started
• Implementation: Case Studies
• Wikipedia: Link
• Additional: Using Phone Gap which other tools
• Article on how to use: Net magazine, O’Reilly Radar

4. Quick Connect

• Home page:  Link
• Genesis: Started as a tool for iPhone
• Version: 2.1.2
• Licensing: MIT
• Download: Link
• Documentation: Hybrid API
• Sample application: ?
• Implementation: ?
• Wikipedia: No
• Additional: Blog
• Article on how to use: PB Works

5. Worklight

• Home page:  Link
• Genesis: IBM has acquired Worklight
• Version: 5.0
• Licensing: Free 30 day trial
• Download: Link
• Documentation: List
• Sample application: Getting Started
• Implementation: -
• Wikipedia: No
• Additional: Video Demo
• Article on how to use: -

Do let me know if there are any errors and omissions in the details I have provided.

JavaScript Libraries to go with your Hybrid application

If you are looking for lightweight JavaScript libraries to help you develop your hybrid applications, then do check this site out.

This site lists out host of useful lightweight JS frameworks. I did not have the patience to count but the number more than 160. The site also allows you to filter the list using one of the 30 listed categories.

Do check it out – http://microjs.com by Thomas Fuchs

[Update: Here is one more from Telerik]

Link to homepage

<<Previous (Mobile App Generator)

Next>> (Mobile Gaming Tools)

Udayan Banerjee on Google+

“Should you write a mobile web application which will render on multiple platforms without significant change but won’t be able to take advantage on native features?”

Or

“Should you create platform specific native application to fully utilize the power of the device but increase your effort?”

The basic premise of hybrid approach is that you can have your cake and eat it to. In this approach you use the browser control and create a shell application which is then used to render HTML pages. Since most of the popular phone browsers are Webkit based (Microsoft is an exception), they are expected to have similar behavior making you task simpler.

To access the native features of the handset, you need to create APIs in the shell application which can be invoked through JavaScript coding. The tools and frameworks are expected to provide the shell applications and the APIs for different platforms.

At least that is what the theory says.

In practice there are several issues that need to be looked into.

• There are differences between the browser and the browser control. Their behavior is not identical. Normally, browser controls lag behind and are buggier.
• Especially for iPhone, there is a chance that hybrid applications may get rejected by App Store.
• For the current versions, performance issues have been reported.
• It takes lot of effort to make the hybrid application look and feel like a native application and that is additional effort for each platform – this negated the original value proposition.
• HTML5 have already started providing access to several native features and we can expect it to become more comprehensive.

Finally, hybrid application kills the differentiation between different platforms. So, why would either Apple or Google be interested in promoting it?

As I have mentioned earlier (here it is), there are five approaches to cross platform mobile application development and many tools are available under each category. They are:

(1)    Mobile Web (JavaScript-CSS library), (see this)

(2)    Visual Tool (No access to Code), (see this)

(3)    App Generator (Native application for multiple platforms), (see this)

(4)    Hybrid App (Leverages embedded browser control) and

(5)    Game Builder (see this)

Here are 5 hybrid tools – the ordering is alphabetic.

1. App Mobi

• Home page:  Link
• Genesis: App mobi generates revenue from cloud based services and give the tools free
• Version: 3.4.0
• Licensing: Free
• Download: Link
• Documentation:  JavaScript API Reference,  Web Service API Reference
• Sample application: List, Tutorial
• Implementation: List
• Wikipedia: No
• Additional: Wikimobidex
• Article on how to use:  Learn html5 Game Dev, appMobi XDK Detailed Tour

2. NS Basic

• Home page:  Link
• Genesis: Creator of development tools for handheld devices since 1993
• Version: 2.0.1
• Licensing: Paid only
• Download: only demo version available
• Documentation: Tutorial
• Sample application: How to
• Implementation: Quotes from user
• Wikipedia: Link
• Additional: Tech Notes
• Article on how to use:  By Nick Antonaccio

3. Phone Gap

• Home page:  Link
• Genesis: Adobe acquires Nitobi which is the company behind PhoneGap
• Version: 1.4.1
• Licensing: Modified BSD or MIT
• Download: Available on home page
• Documentation: API Reference
• Sample application: Getting Started
• Implementation: Case Studies
• Wikipedia: Link
• Additional: Using Phone Gap which other tools
• Article on how to use: Net magazine, O’Reilly Radar

4. Quick Connect

• Home page:  Link
• Genesis: Started as a tool for iPhone
• Version: 2.1.2
• Licensing: MIT
• Download: Link
• Documentation: Hybrid API
• Sample application: ?
• Implementation: ?
• Wikipedia: No
• Additional: Blog
• Article on how to use: PB Works

5. Worklight

• Home page:  Link
• Genesis: IBM has acquired Worklight
• Version: 4.2.1
• Licensing: Free 30 day trial
• Download: Link
• Documentation: List
• Sample application: Getting Started
• Implementation: Case Studies
• Wikipedia: No
• Additional: Video Demo
• Article on how to use: -

Do let me know if there are any errors and omissions in the details I have provided.

JavaScript Libraries to go with your Hybrid application

If you are looking for lightweight JavaScript libraries to help you develop your hybrid applications, then do check this site out.

This site lists out host of useful lightweight JS frameworks. I did not have the patience to count but the number more than 160. The site also allows you to filter the list using one of the 30 listed categories.

Do check it out – http://microjs.com by Thomas Fuchs

<<Previous (Mobile App Generator)

Next>> (Mobile Gaming Tools)

So, at my windows computer, I start the NS Basic for Palm developer program. I’ve found this to be a great line of products, giving me a lot of freedom to make programs that do what I want them to, for many kinds of machines, without having to get deeper than I like into the guts of what’s going on inside the machine. Though the programming languages for the different NS Basic products are different, they’re all pretty close to the Visual Basic and VBscript that I use in my day job.

Inside NS Basic, the first job is using the graphical form designer to figure out the interface layout – where the entry fields, labels, buttons, list boxes, popup list triggers, and other things go on the palmpilot screen. With vidlist, I was originally thinking of having a really tall listbox on the left that only went a little over halfway across the screen, but quickly figured out that with the kinds of things I was going to need to store in it, it would be better to have the list wider than it is tall. (You can page through palm lists using the little arrow icons, but can’t page or scroll them side to side.)

After arranging the layout, it’s time to write your own code to specify what happens for each event in the program – what messages show up, what information goes from the visible controls to the database in the palmpilot memory and comes back the other way, and so on.

And once that’s all done, you can pick the ‘compile’ option from the NSB menu bar, which takes your program and turns it into a PRC file that you can transfer over to your palmpilot – or to a palmpilot emulator program running on windows, which is usually easier to do your first testing on:

So, there’s your five-minute summary on programming for palm handhelds. I suppose some people may be asking ‘why bother’, but I feel that palm is really still a good operating system, with a lot of flexibility and power, and some handy little devices still out there – the Alphasmart dana, for instance, and some of the tungsten handhelds, which include miniature keyboards as good as a Blackberry’s – without the headache that I get from trying to get a Blackberry to learn a new trick.

There are lots of grocery store apps in the app store, but that’s the problem; there’s too many to really look through, and most of them seem to be way too complicated, with built-in lists of possibly groceries or what have you. I didn’t even need all the bells and whistles of the Palm to-do program when I used that for groceries. All I really wanted was this:

• Let me type new items into the list.
• Let me see what’s currently in the list, scrolling up and down as necessary.
• Let me delete something from the list easily, but not so easily that I’ll do it by accident.
• And remember the list for me while I’m doing something else.

It wasn’t too hard to put all of this together with NS Basic app studio, though there were a few tricky gotchas – like how you have to tell it to redraw the list every time you add something new, just so it can work out the scrolling logic for the new list length.

The most interesting part of it was probably the save and restore logic, to make sure that the list would always be there when I switched away from the app. It seems that Safari doesn’t give a good way of event trapping when you hit the home button on the iphone, so the best way is to resave with every change. Here’s some of the code that handles that.

• The ‘Request for dedicated readers’ that I answered at critters.org is going fairly well – I’m up to around page 125 out of 184, so more or less on track for finishing by the end of the month. I’m liking the story so far, and hopefully I’ll have some helpful feedback to share with the author.
• New smartphone apps! I’ve been learning some good tricks with NS Basic App Studio, and have completed little apps for date calculator, (figuring the difference in days between two dates or the date result of offsetting an input date by a particular number,) and a data collection front end that feeds into a web application back end. I’ll post some screen captures in a few days if I remember.
• The Straight Dope Message Board short fiction contest went well, though I didn’t win in the voting. But I really like my story, which actually took the character of Lisa from Chatterboxes, which is fundamentally a speculative contemporary sci-fi book, and put her into an urban fantasy scenario, learning sorcery from a teacher who isn’t quite what she expected.
• I’m a little behind on my goal of submitting a story a week this month – I’ve done two, and I want to make a few more revisions to the Landing based on my critique tracking results before sending it out again.
• I’ve nearly finished the second out of three fandom chapter updates I wanted to make in May – this one is ‘Children of the Molecule’, my Roswell/Doctor Who crossover, which is finally drawing towards an end.
• And I’ve written a new scene for ‘The Long Way Home’, with Naveli getting Ereyu as a pet ferret.

(If you have problems reading the image text, then click on it for full size.)

I’ve improved on the idea over the years, and used it to keep track of the hours I’m spending on a few other things beyond EdMo. This year, I’ve only added a few little details to my main Project Tracking system, which runs on a SQLite database file, and has front-end user interfaces for windows, written with NS Basic for Desktop, and my Xubuntu EEE, which was coded with Gambas.

The general layout is the same, but the windows version has a few new options that I’ve added recently, includng the ability to enter in how many hours and minutes have been logged at the Nanoedmo site and tell me how many hours and minutes I need to enter to catch up.

I’ve also recently tweaked it so that if you’re in the middle of a work session, the ‘Total’ button tells you what your overall time total was before you began the session, and the ‘Running Clock’ that includes the session so far. That’s a very important little upgrade!

Tune in tomorrow to see if I’ve figured out a basic logline for my Script Frenzy project yet!