ddmorales
9 Dec 2010, 8:37 AM
I know there has already been some talk about this, but I couldn't find a good enough tutorial or sample.
Basically I would like to know what would be the best way to work with different devices (phone and tablet) and their current orientation in different situations. Some understanding and simple demo codes could not hurt any starting developers!
Devices
---------------------------
Phone (resolution 320 x 480 and less)
Tablet (resolution 1024x768 and more)
Or is this measured by viewport since iPhone4 has bigger resolution?
Orientation
---------------------------
Portrait
Landscape
If I understood correctly, sencha adds "x-landscape" and "x-portrait" to every element depending on which orientation you are in?
Situation one: Loading custom CSS files for different devices
---------------------------
Lets say I have a global.css, phone.css and tablet.css and I want to load the right css for the right device. What would be the easiest way? I assume I can use Sencha to do this?
Situation two: Changing layouts depending on orientation and device
---------------------------
If I have a panel with two docked items, how can I change their docking position according to the size and orientation the device?
for example if I have panels docked on the left and right, and I rotate my device and the orientation changes and the layout would be much better if the panels were docked on top of each other.
I found an article about this but as the author said, this has the same logic in two places: http://insideria.com/2010/11/making-orientation-aware-apps.html
I would gladly compile some demo codes and write a tutorial post if you experts would help me first. I have only been working with Sencha Touch for a while now but I'm blown away how much I could accomplish in such a short period. But I think there could be much better tutorials for beginners, and I would be happy to help other beginners on stuff I had problems with.
Basically I would like to know what would be the best way to work with different devices (phone and tablet) and their current orientation in different situations. Some understanding and simple demo codes could not hurt any starting developers!
Devices
---------------------------
Phone (resolution 320 x 480 and less)
Tablet (resolution 1024x768 and more)
Or is this measured by viewport since iPhone4 has bigger resolution?
Orientation
---------------------------
Portrait
Landscape
If I understood correctly, sencha adds "x-landscape" and "x-portrait" to every element depending on which orientation you are in?
Situation one: Loading custom CSS files for different devices
---------------------------
Lets say I have a global.css, phone.css and tablet.css and I want to load the right css for the right device. What would be the easiest way? I assume I can use Sencha to do this?
Situation two: Changing layouts depending on orientation and device
---------------------------
If I have a panel with two docked items, how can I change their docking position according to the size and orientation the device?
for example if I have panels docked on the left and right, and I rotate my device and the orientation changes and the layout would be much better if the panels were docked on top of each other.
I found an article about this but as the author said, this has the same logic in two places: http://insideria.com/2010/11/making-orientation-aware-apps.html
I would gladly compile some demo codes and write a tutorial post if you experts would help me first. I have only been working with Sencha Touch for a while now but I'm blown away how much I could accomplish in such a short period. But I think there could be much better tutorials for beginners, and I would be happy to help other beginners on stuff I had problems with.