Mobile Apps: Saving user preferences (Titanium only)

I am passionate about mobile apps and one of my favorite mobile app development toolkit is Titanium by Appcelerator.

Often mobile apps need to save user preferences such as font size and such. As I dug around, I found some interesting posts and built upon them, I figured it may be worth sharing it. So, here is one way of storing user preferences using Properties

1 2 3 4 5 6 7 8 9 10

//Created for http://www.blog.iSl8.com //This code checks to see if there is a user preference set, otherwise, it sets the default preference property. if (Titanium.App.Properties.getString('MyCustomPreference1') != null){ Ti.API.info('Custom Preference 1 was already set to ' + Titanium.App.Properties.getString('MyCustomPreference1')); } else { //Set default Custom Preference 1 Ti.App.Properties.setString('MyCustomPreference1', 'Default Preference1 value'); Ti.API.info('The Custom Preference 1 was defaulted to : ' + Titanium.App.Properties.getString('MyCustomPreference1')); }

Then, where ever I needed to access it, I just used the getString method.

Why not use Global variables instead?
When I initially started, I thought that is what I should do. Save or default it to a property, and the first time my code accesses this property, just copy it into a Global variable, which can be referenced in any file across the App.

For some reason, the getString code seems cleaner (as in more explicit) to me. That way, if someone changes this property using the setString method, they know exactly what they are changing, instead of some proxy Global variable.

Also, I am not a JavaScript Guru, but I would imagine that setting a property is internally just doing that anyway.

Happy Coding!

HTML5 Mobile Apps builder - Easy-Peasy-Tiggzi

After writing some code with PhoneGap and Sencha Touch / jQueryMobile, I found myself wanting an easier solution especially to consume REST APIs.

<rant>In fact, consuming a REST API for Parse.com(A PaaS / hosted MongoDB instance) from an HTML5 application found me writing a custom Phonegap plugin / extension for Parse.com (which one of these days will probably find its way to Github).</rant>

Thus, on one of those "There's got to be a better way" whims, I was looking around for an easier way to make a basic business apps that can read / write (CRUD) data to a cloud server.

And late one night, I stumbled upon Tiggzi which is a hosted solution that allows you to create mobile apps inside a browser using jQueryMobile UI controls and easily integrates Rest APIs for mobile backends.

Using Tiggzi (and following this video), I was able to create an app that reads QR codes and writes that data to Parse.com (a mobile PaaS back-end, ) in just a few hours.

So, here are my thoughts...

Pros:

• Easy to work with, no IDE / configuration / Android / iOS SDK required for basic prototyping
• Very easy to integrate bar / QR code reader and to consume REST APIs,
• Testflight style remote app deployment and testing (probably the coolest feature of this service)
• Prompt support

Cons / Limitations:

• Needs better documentation / more content on best practices etc.
• Some UI controls are a little bit unintuitive
• Takes a little getting used to (esp. for folks used to of typical IDEs, like me)
• Will costs real money for making non-trivial apps

Here is the data on Parse.com (The bar / QR codes were read from products / QR generators using an Android phone and written to Parse.com).

And here is the same data inside the emulator.

 

Summary: Tiggzi is an interesting way to make basic read / write mobile apps, and for a simpler business app it certainly deserves consideration.

However, for apps that need a superior UX (higher visual and interaction fidelity) and a tighter device integration / better performance, Tiggzi may run into the limitations of jQueryMobile controls and constraints of Phonegap itself.

 

HTML5 for mobile - Comparing JQueryMobile and Sencha Touch

I have been playing around with some HTML5 / JS frameworks that allow creation of mobile web sites and can be integrated with platforms such as PhoneGap for creating mobile apps.

The two frameworks that I have tinkered around with are JQuery Mobile and Sencha Touch. Here is what I found...

 

JQueryMobile

Summary: Easier to learn framework with a strong focus on mobile web / apps. Has a larger corporate backing / partners, and is integrated with Adobe Dreamweaver CS 5.5.

Pros:

• Much easier to learn as compared to SenchaTouch

• Newer version has good basic themes and themeroller makes custom theming easy

• UI controls appear better focused on mobile devices e.g. 

 - By default labels are above the text input boxes which preserve real estate on mobile devices

 - iPhone style Flip switches work out of the box and allow text on both sides of it Ref: http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-switch.html

  - Placeholder text for dropdowns works as expected (broken in Sencha touch)

Cons:

• Less Object oriented / more web site programming like when it comes to wiring events etc. For non-trivial applications, it may almost require using another framework such as backbone or Knockout

• Rough at the edges, Transitions may flicker and sometimes are not smooth

• Some UI controls do not work very well (Fixed toolbars that are overlaid everytime on vertical scrolling make the UX very flaky)

 

Sencha Touch

Summary: A more robust OO style architecture with a strong focus on mobile web / apps.

Pros:

• True MVC style architecture

• Takes a SASS based object oriented approach to theming

• Much smoother / flicker free transitions than JQM

• Nicer iPhone style theme and icons (better than JQM's, IMO)

Cons:

• Steeper learning curve, changes from Sencha 1.x to 2 in coding styles etc. do not help

• UI is more oriented towards web design than mobile design e.g.

  - Form style UI layout with labels on the side of text boxes

  - iPhone style Flip switches (Toggle in Sencha world) require .css changes (https://github.com/tomalex0/SenchaTouch-Form-iosToggleField/commit/0b7de60782...

 

For Adobe AS3 XMLNS = 'XML Non Sense'

I have been playing around with Adobe Actionscript 3 & had a pretty frustating experience. My AS3 / Flex program is calling a web service & getting back an XML response. All I want to do is put this XML into Flex UI using a grid view control by culling selective nodes from the XML into an Array.

This proved to be a Herculean task & took me a few days to figure out. Now, I am certainly a newbie to Actionscript but not new to programming in general. Getting an XML response back from a web service & displaying it on UI is usually a breeze (esp. in .Net etc.).

Unfortunately, AS3 has a bug due to which it cannot parse XML with namespaces very well. As a matter of fact, it simply cannot traverse the XML tree to give you the nodes unless you have stripped it free of the namespaces. Considering that Actionscript is in its third incarnation (& considering that XML has been around for a while), this just seems unacceptable.

Here is the function / workaround that I found on this blog to strip off the namespace...

private function removeNamspaces(...rest):String
{
rest[0] = rest[0].replace(/xmlns[^"]+\"[^"]+\"/g, "");
var attrs:Array = rest[0].match(/\"[^"]*\"/g);
rest[0] = rest[0].replace(/\"[^"]*\"/g, "%attribute value%");
rest[0] = rest[0].replace(/(<\/?|\s)\w+\:/g, "$1");
while (rest[0].indexOf("%attribute value%") > 0)
{
rest[0] = rest[0].replace("%attribute value%", attrs.shift());
}
return rest[0];
}

After dealing with Adobe AS3's buggy XML parsing, MSFT sure does not look bad ;-)

Review: Stickysorter - Free Cardsorter / Digital Post Its Software

Stickysorter from Microsoft Research is an interesting tool on two fronts - One, it is simple to use; Two, it is a good example of "do one thing reasonably well" software i.e. it has limited features which are easily accessible. To add to the sweetness, it is available for free (Yep..not shareware or evaluation versions - Free).

That said, it is a Windows PC Installed application, not a remote / online one but if you have a Webex / netmeeting or something similar, you can utilize it for remote cardsorts as well.

Stickysorter allows for grouping of cards, addition of custom fields, stuff that you can put on the other side (to flip later), different color coded cards (limited to a few though) etc. It saves everything as a .CSV file so that the results can be later opened / printed like a spreadsheet.



This also means that for the folks who likes spreadsheets better, you can take your card sorts, group them in a visual post it style approach, then close Stickysorter, open the .csv with Excel (or something similar), autofilter & utilize the full Excel UI experience (Accountants rejoice!!).

Disclaimer: I have not used other card sorting tools, so not sure if what I find cool about this are standard features or not. Stickysorter is freely downloadable from Microsoft Research Site

Sketchflow "How To" resources

Someone recently asked me how a designer can to go about trying out Sketchflow without getting into all the development related learning that Expression Blend may need. Here is an excerpt from my response. Hopefully, this will benefit anyone else who may be interested.

Frankly, I really just downloaded the evaluation version & took a few stabs at it. I had to refer to the Expression Blend Help Guide for a few things. But, here are the two that I referred to from a how to perspective that give you a sense of using it without writing any code really.

Canadian UX Blog by Qixing of Microsoft


Sample chapters / Zipped example from Chris Bernard's upcoming book


Other then that, just hang in there with an eval version & try a few different things. I paused the Canux video several times to see where she is navigating within the Sketchflow application.

One more that I used to understand what Sketchflow can do for me was the Visual Kitchen infomercial that MSFT did...

Maybe it would be cool to put together something that shows a step by step process (like a flowchart). Kinda like learning Sketchflow using Sketchflow Maps. So, it can be a Sketchflow Map that branches in four different direction (Say for developer, designer, project manager & business analysts) & explains individual steps/features/benefits with screenshots or embedded videos.

Maybe I will do one of those if I find some free time :-)

My First Sketchflow App

Microsoft has recently introduced Sketchflow, a dynamic prototyping app with their latest Expression studio release. Here is my first app created using Sketchflow, hosted on Silverlight streaming & embedded in this blog.

I wanted to try out & actually see how well will it work for a distributed audience, with its ability to produce something that can be shared, annotated & yet be interactive without putting too much effort.

The mockup hosted here is a very rough (2 webpages only) but working example..You can enter username / password, click enter & navigate to the second page (that is all I have for now).

NOT AN IMAGE, INTERACTIVE PROTOTYPE, CLICK ON IT



What is nice is that you can comment by clicking in the feedback pane or draw on this prototype using the highlighter tool from the feedback pane. You can also look at the overall site layout through the map tab.

Once done, you can actually save the feedback by using "Show feedback Option" (The rightmost button on the feedback pane) & selecting Export feedback, which allows you to save your feedback on your machine.

This feedback can than be emailed to the prototyping team & imported back into the Sketchflow, along with feedback from other participants. I think this is a pretty cool tool.

It took me about 2 hrs from downloading, installing Sketchflow to creating first mock up, hosting it on Microsoft's Silverlight Infrastructure & embedding it into my blog. I will blog a screenshot by screenshot version of how I did this in a later post.