How to mimic the user experience of native application while building for cross mobile? - mobile

I'm building an application which I intend to deploy to iphone, android and blackberry. There's a unique characteristic I've noticed about my blackberry bold 9700, which uses an optical track pad for maneuvering around the screen. As an experiment, I deployed a simple phone gap application to my blackberry. I used the optical track pad to move a "small arrow cursor" around the screen to select and click on elements. When I compared my experimental app to some of the other native blackberry applications on my device, I noticed that none of them use this "small arrow cursor". Instead, sliding my thumb across the optical track pad will cause a "hi-light selector" to jump from one available link/button/field/image/list-item/tab etc... to another. This "hi-light selector" is much faster and user-friendly than the "small arrow cursor".
Now I need advice on the best technology to achieve the following:
I would like to write one set of code for an application to deploy to
iOS 4+ , android 2.2+ and Blackberry OS6+
On android and ios devices, you can simply scroll and touch buttons
for call to actions. On blackberry, I would like to replace the
"small arrow cursor" with the "hi-light selector".
I would like to use slide screen effects on android and ios devices.
On the blackberry, I would need a good substitute.
So my question is: Is there a practical way for a solo developer to achieve all the criteria above? If not, then what is the closest I can achieve to the criteria above? And what mobile javascript library would be best for the job[1]? Or do I really have to consider building with native technology (obj c for ios, java for android, java for bbos)?
I've only looked at sencha touch and didn't see anything relevant to the "hi-light selector".

I'd take a look at Appcelerator:
http://www.appcelerator.com/
... and ...
iUi:
http://www.iui-js.org/

Related

optimizing resolution mobile app various devices

i am developing an app for mobile with corona sdk, i'd like to know if there is a way to optimize the user experience for the whole range of products that use android. I have many doubts because of the wide range of pictures that my app uses. I mean it's an app that navigates through pictures by clicking them and by letting the users insert more of them. As i code i notice that i have to adapt every image to the borders of the device i'm actually testing it on.
Is there a way to make the optimization automatic and quick for all the devices?
ps i am actually developing it for a tablet

Port an OpenLayers application to mobile devices

After making a duration/cost estimation, I'm about to start developing a desktop application using OpenLayers. I've never had experience on it before, but have the support of some coworkers who do.
Now we have to estimate the time and effort it would take the same application to be viewable in mobile devices. I know the existence of openlayers.mobile.js, but nobody in my company has ever worked with it before.
I know it has some advantages over the normal OpenLayers library, such as pinching for zooming, and so. But, does it has any blocked capabilities? I mean, if I write code to draw a line on a layer in the desktop application, change the simbology of a layer, add a buffer arround a polyline, etc.. will it still work with the mobile library?
Is there funcionality in the desktop version that is not in the mobile one?
I'd need to know before estimating what can I offer in the mobile version, and how hard will it be to get so.
See examples tagged with mobile:
http://dev.openlayers.org/examples/
The next OpenLayer versions will probably have better mobile support as this is something many users are interested in.

ExtJS vs Sencha Touch for RIA

I'm trying to bootstrap a Rich Internet Application, which will have a complex canvas (think: Visio), and should work according to these principles:
it would run in a browser
it would run on a tablet (Android or other)
supports complex drawing, drag & drop etc.
runs on its own (eg. without a server component) happily
can leverage conventional & touch UI as needed - user can draw a line with a mouse or using the touchscreen
I was thinking about using a Javascript framework and found ExtJS, whose demos I quite like and checking the API docs it seems it supports all the low level GUI stuff I need (think: Ext.draw package, especially Ext.draw.Sprite).
But then I also found Sencha Touch, which seems to be leveraging the same technology stack, only for the mobile. However the API is much more limited (no Ext.draw available), and only runs in Webkit browsers, as far as I can understand. But it supports touch-based interaction.
Is there a way to create an app that works in a browser but can also be "compiled" to native mobile/tablet code (eg. with PhoneGap)? Or is this just a dream and these two cannot mix at the moment?
PS. checked the other similar questions but they seem to be quite out of date.
Short answer: it is currently just a dream I'm afraid.
Long answer: Sencha Touch and ExtJS share a lot of underlying logic and are somewhat similar, but I would say you'd only be able to reuse 50% of your code, at most, when trying to port one to the other.
jQuery Mobile and jQuery UI share similar issues at the moment - they have both created nice mobile UI frameworks, which only support webkit browsers, meaning there's no easy way of developing rich apps that run in desktops and on mobile platforms. Hopefully these projects will merge their mobile and desktop frameworks at some point in the future to allow us to create apps that can be deployed across both without a massive rewrite. There will always be differences in the way mouse and touch screen events work but I wish that was the only thing we had to consider.
Extjs is for desktop application, while Sencha touch & touch charts are for mobile, eg. tablet or Android.
#JunkMyFunk is right, you'd only be able to reuse 50% of your code at most.
The definition of class is not the same between Extjs and sencha touch which means currently you can't mix Extjs with sencha touch, the namespace will conflict if you do that way.

Mobile UI frameworks & other UI scripts

I'm looking for the best cross browser compatible swipe script for android, iphone and other touch phones. Has anyone used any of the available frameworks or have you used custom scripts? What is your experience with these?
SenchaTouch
jQTouch
Phone Gap
Unify Project
Any others? I am joining a mobile task force and would like to get more involved in one or more of these communities so I can provide some UI support.
Thanks,
Seth
First of all, let's sort out the apples and oranges.
PhoneGap and Appcelerator Titanium are NOT UI frameworks. They are both Web to Native bridging technologies. They provide JavaScript API's for mobile capabilities like accelerometer, contacts, GPS, telephony, etc. Also, they facilitate the creation of a deployable mobile app (versus a web page)
Sencha Touch, jqTouch, and jQuery Mobile are mobile UI frameworks that provide support for mobile UI concepts, like touch, swipe, transitions, small screen sizes, etc. They can run in a pure web page or be used in conjunction with PhoneGap or Appcelerator Titanium in a mobile app.
I'm not too familiar with the Unify Project, but it seems to be a bundle of PhoneGap plus their own UI framework.
Both Sencha Touch and jQuery Mobile are in early days, but already have some great capabilities and they're moving fast.
SenchaTouch is good, but be aware that it provides no native hardware support, so if you need access to the phone hardware, you will need PhoneGap or equivalent.
I hear good things about jqTouch, but haven't tried is personally.
Another option is Appcelerator. If you need to write an app for mobile devices, it is a really approachable framework. You write javascript code, and their machinery compiles it to the appropriate platform. Note that this is for writing apps that run on a mobile device directly, not for writing apps that run in a browser on a mobile device.
I found jqTouch to be great on top of the PhoneGap technology however you need to understand that all the "good looking" UI kits are built on HTML 5 and so far you'll be disappointed with the HTML 5 support from Android devices. You'd think Google would be on this like ants on syrup but you'd be wrong. The jqTouch works like a dream on almost all iOS based devices and quite poorly on most Android devices.
As for Titanium, it still appears and feels web based and there are no UI styles to my knowledge. This means it "attempts" to look native whereas with PhoneGap and JQT you can get a really nice theme. So if you want "snazy" then go PG and something else. Titanium is far more stable than JQT when you're building for iOS and Android so that is a plus but it would be really nice if they did some kind of theme engine.
note over time this answer will become irrelevant as Android improve their HTML 5 support and those UI frameworks become more stable :)

Good mobile oriented GWT widget library alternatives

I've been developing a travel planning site - tripgrep.com - which is built on appengine, GWT and smartgwt, among other technologies. It is still early days, and the site is now working well on my development environment, which is either a windows or mac computer.
However, I am frequently talking up the website to my friends when we are at a bar or other venue, so I am standing there while they try to access the site via an iPhone, Android or Blackberry - I've witnessed all three. It has been painfully obvious that the browser based frontend takes a long time to download on a mobile device. I am pretty sure this is because of the javascript download for SmartGWT.
So, I would like to look at alternatives to SmartGWT.
What I like about SmartGWT is that it has a reasonable look and feel out of the box - I don't need to learn any design or css and it has an office application look. This is considerably better than the GWT built-in widgets, which just get a blue border. The better look-and-feel is why I went with SmartGWT early on. However, the slow load times are killing me on these mobile demos. So now I want a fast loading widget alternative that has good look-and-feel out of the box.
The features I care about are: tabs, good form layout, Google maps API integration, grid data viewing. If those are all available in a library that loads quickly on a mobile device, then that's the library I want.
Your best bet is probably just to use the standard GWT widgets and learn how to style them to your liking. SmartGWT's automatic styling is nice, but as you've noticed, it comes with a price.
Even GWT's standard widgets, which are lighter, could still be trimmed down for maximum speed, so if you're really adventurous you could roll your own light-weight widgets that do only what you need them to do.
You can try mgwt-also called mobile gwt...(available at http://code.google.com/p/mgwt/ )
You could write a wrapper for jqTouch... that would be cool.
Write a seperate View for your model, specifically for either a) mobile devices or b) iPhone speicfically (see "iui" f.ex.). That is the very best way to do it.

Resources