PDA

View Full Version : Best practices for handling screen orientation



giupo
12 Aug 2011, 2:58 PM
Hi all!

I need some suggestions on how to handle properly the screen orientation change. For properly I mean an acceptable user experience.

My App is using sencha for ux and Rhomobile/Rhodes for handling local store and middleware functions in general (exceptions handling with backend, logging, etc..). Rhomobile provides a configurable callback function for orientation change events, and it works; but when it comes to change the orientation on Sencha's widgets , it does work, but it snaps ungracefully; I would like to add an animation for the case, like a 'slide' or a 'flip' but I don't seem to overcome ... :((

below the callback called by Rhomobile (secondly: why should I have to call the setOrientation method for each components? I thought that calling it on the main viewport will do the trick).



screenRotation : function(tipo, width, height) {
this.views.viewport.setOrientation(tipo, width, height-15);
this.views.detail.setOrientation(tipo, width, height-15);
this.views.viewport.doLayout();
this.views.detail.doLayout();
var tabbar = Ext.getCmp('bm_tabbar');
if(tabbar) {
tabbar.setOrientation(tipo);
tabbar.doComponentLayout();
}

var button = Ext.getCmp('tipo_news_selector');
if(button) {
button.setOrientation(tipo);
}
}

I would have added something like :


Ext.Anim.run(viewport, 'flip', { out : true }
..
..
Ext.Anim.run(viewport, 'flip', { out : false }



but it does play only the last animation

Summing it all: how can i add an animation to cover the layout work and provide a graceful transition (without that snappy behavior?)

Thanks!
Giupo

sPadawan
15 Aug 2011, 7:48 AM
Hi giupo,

Would you have any clue as to why my Ext.List does not render in iPod touch until I physically rotate the iPod? It renders fine in Safari desktop. And when it was an Ext.Panel it rendered fine immediately on both.

http://www.sencha.com/forum/showthread.php?143791-Ext.List-Only-Renders-in-Desktop-Safari

(http://www.sencha.com/forum/showthread.php?143791-Ext.List-Only-Renders-in-Desktop-Safari)Sorry about your issue. A little flicker is the least of my troubles. I'm happy to let the framework do it for me as is.

giupo
18 Aug 2011, 10:14 AM
Hi sPadawan,

Sorry but probably I wasn't clear enough: my problem is not a rendering problem ('bug'), AFAIK, but a feature : I just want to add an animation when I change the orientation of the device to improve the user experience, since by now it just "snaps"....

Thanks!
Giupo

MaximusW
18 Aug 2011, 11:22 AM
guipo,

Not really a direct response to your question, but I wanted to make sure that you were aware of the framework's built in solution for idiomatic layouts:
http://www.sencha.com/learn/idiomatic-layouts-with-sencha-touch/

Ayame
13 Oct 2011, 12:46 PM
Is there any way to gracefully handle the rotation animation? It still 'snaps' very disgracefully with me no matter what I try...

@Giupo have you ever found a solution to this problem?

Thanks!