You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by bilbosax <wa...@comcast.net> on 2016/10/17 04:43:38 UTC
Mobile Width and Height
I have written my first mobile AIR app. On my iPad, the layout is a dismal
failure. It looks perfect in the simulator.
I have the application set up to run in portrait mode with no
auto-orientation. It starts at 160 DPI and scales up. When the application
is complete, I get the width and height of the stage, and then use these
numbers to calculate the layout of all of my buttons and column widths for
my datagrid. On the iPad, all of the buttons are spread way too far apart,
several running off the screen. The datagrid is all supposed to fit on the
screen but four of the colums ran off the screen.
It is almost as if it calculated the width of the screen in landscape mode
instead of in portrait mode. So I have two questions:
1) If you layout the application in portrait orientation, is the width of
the stage the width in portrait orientation or landscape orientation?
2) I am confused on how to lay everything out on mobile devices with varying
screen densities. Is it better to get the app width and height and then set
up distances and spacing in pixels, or to use percentages?
Thanks for any insight. This was disappointing.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Mobile-Width-and-Height-tp13813.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Mobile Width and Height
Posted by bilbosax <wa...@comcast.net>.
I finally got it working. Since I checked the box to develop the app at
160DPI, every distance or width that I was calculating was the being scaled.
So I ended up putting all of my buttons in Groups whose width was based on
percentages. This way, I don't really have to think much about scaling and
calculating for every device, AIR will do the heavy lifting for me.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Mobile-Width-and-Height-tp13813p13828.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Mobile Width and Height
Posted by bilbosax <wa...@comcast.net>.
I am going to have to try several things, but I think there may possibly be a
logic problem on my part. The datagrid appears to be exactly twice as wide
as it is supposed to be. I think that perhaps since I set the program to
scale up from 160DPI when I set it up, when I calculate positions and widths
based on the screen size, AIR thinks that I meant them to be at the 160DPI
setting, and then doubles the number if the screen density is higher than
that. I think I tried to be too exact in my layout compounded with the fact
that AIR will automatically scale all my results. I may try converting
everything to percentage values. Otherwise, I am going to have to test the
DPI of the screen, and adjust my calculations for the layout based on the
value that I get. I'll let you all know what happens.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Mobile-Width-and-Height-tp13813p13824.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Mobile Width and Height
Posted by bilbosax <wa...@comcast.net>.
HaHa!! Not exactly. I don't know where it happens programmatically, if it is
a setting in the descriptor file or how AIR handles it.
All I can tell you is that when you start a new Mobile Project, you can
select a checkbox that says "Automatically scale application for different
screen densities", and then you select the starting DPI from a drop-down
menu that is displayed.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Mobile-Width-and-Height-tp13813p13823.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Mobile Width and Height
Posted by OmPrakash Muppirala <bi...@gmail.com>.
Looks like you getting the correct width and height.
In your original email il you said that the app starts at 160 dpi and
scales up. Can you explain how and why you are doing this?
Thanks,
Om
On Oct 17, 2016 10:44 AM, "bilbosax" <wa...@comcast.net> wrote:
> I'll try that just as a test. In the meantime, I "traced" the width and
> height values by writing them to a label component that is visible on my
> screen after the application is complete, and it displays 1536x2048, which
> is correct for my iPad. Yet, the spacing between my buttons is WAY off,
> and
> the grid is twice as wide as it is supposed to be??? I'll listen for the
> Resize event, but even if it does fire, all of my calculations will still
> be
> based on the 1536x2048 screen size.
>
>
>
> --
> View this message in context: http://apache-flex-users.
> 2333346.n4.nabble.com/Mobile-Width-and-Height-tp13813p13820.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
Re: Mobile Width and Height
Posted by Matthew Weir <ma...@yahoo.com.INVALID>.
DPI playing it's part perhaps?
On Monday, October 17, 2016 1:44 PM, bilbosax <wa...@comcast.net> wrote:
I'll try that just as a test. In the meantime, I "traced" the width and
height values by writing them to a label component that is visible on my
screen after the application is complete, and it displays 1536x2048, which
is correct for my iPad. Yet, the spacing between my buttons is WAY off, and
the grid is twice as wide as it is supposed to be??? I'll listen for the
Resize event, but even if it does fire, all of my calculations will still be
based on the 1536x2048 screen size.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Mobile-Width-and-Height-tp13813p13820.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Mobile Width and Height
Posted by bilbosax <wa...@comcast.net>.
I'll try that just as a test. In the meantime, I "traced" the width and
height values by writing them to a label component that is visible on my
screen after the application is complete, and it displays 1536x2048, which
is correct for my iPad. Yet, the spacing between my buttons is WAY off, and
the grid is twice as wide as it is supposed to be??? I'll listen for the
Resize event, but even if it does fire, all of my calculations will still be
based on the 1536x2048 screen size.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Mobile-Width-and-Height-tp13813p13820.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Mobile Width and Height
Posted by Josh Tynjala <jo...@gmail.com>.
You should try listening for Event.RESIZE on the stage to see if it resizes
again after the application is complete. It is common for the Flash stage
to resize multiple times on startup.
- Josh
On Oct 17, 2016 10:18 AM, "bilbosax" <wa...@comcast.net> wrote:
> When the application is complete, I dispatch a custom event to let the rest
> of my components know that the app is loaded so that they can then get the
> width and height of the app and lay themselves out appropriately. In my
> main app, I have this code:
>
> protected function appCreationCompleteHandler(event:FlexEvent):void {
> // Dispatch an event to the rest of the application that the
> application is
> complete so that I can calculate all of my layout distances
> var e:Event = new Event("appComplete", true);
> dispatchEvent(e);
> appWidth = stage.stageWidth;
> appHeight = stage.stageHeight;
> }
>
> In my application descriptor file, I have the following values set:
>
> <aspectRatio>portrait</aspectRatio>
>
> <autoOrients>false</autoOrients>
> <fullScreen>true</fullScreen>
> <visible>true</visible>
> <softKeyboardBehavior>pan</softKeyboardBehavior>
>
> I feel like it has to be something in my descriptor file, because it is
> laid
> out perfectly in the simulator, just not on the device. The height values
> appear to be correct on the device, but the width is just WAY off.
>
>
>
> --
> View this message in context: http://apache-flex-users.
> 2333346.n4.nabble.com/Mobile-Width-and-Height-tp13813p13818.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
Re: Mobile Width and Height
Posted by bilbosax <wa...@comcast.net>.
When the application is complete, I dispatch a custom event to let the rest
of my components know that the app is loaded so that they can then get the
width and height of the app and lay themselves out appropriately. In my
main app, I have this code:
protected function appCreationCompleteHandler(event:FlexEvent):void {
// Dispatch an event to the rest of the application that the application is
complete so that I can calculate all of my layout distances
var e:Event = new Event("appComplete", true);
dispatchEvent(e);
appWidth = stage.stageWidth;
appHeight = stage.stageHeight;
}
In my application descriptor file, I have the following values set:
<aspectRatio>portrait</aspectRatio>
<autoOrients>false</autoOrients>
<fullScreen>true</fullScreen>
<visible>true</visible>
<softKeyboardBehavior>pan</softKeyboardBehavior>
I feel like it has to be something in my descriptor file, because it is laid
out perfectly in the simulator, just not on the device. The height values
appear to be correct on the device, but the width is just WAY off.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Mobile-Width-and-Height-tp13813p13818.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Mobile Width and Height
Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Sun, Oct 16, 2016 at 9:43 PM, bilbosax <wa...@comcast.net> wrote:
> I have written my first mobile AIR app. On my iPad, the layout is a dismal
> failure. It looks perfect in the simulator.
>
> I have the application set up to run in portrait mode with no
> auto-orientation. It starts at 160 DPI and scales up. When the
> application
> is complete, I get the width and height of the stage, and then use these
> numbers to calculate the layout of all of my buttons and column widths for
> my datagrid. On the iPad, all of the buttons are spread way too far apart,
> several running off the screen. The datagrid is all supposed to fit on the
> screen but four of the colums ran off the screen.
>
How are you getting the stage's width and height? You should be using
stage.stageWidth and stage.stageHeight.
>
> It is almost as if it calculated the width of the screen in landscape mode
> instead of in portrait mode. So I have two questions:
>
> 1) If you layout the application in portrait orientation, is the width of
> the stage the width in portrait orientation or landscape orientation?
>
It should start in portrait orientation, if you have set it in the
app-descriptor.xml file.
>
> 2) I am confused on how to lay everything out on mobile devices with
> varying
> screen densities. Is it better to get the app width and height and then set
> up distances and spacing in pixels, or to use percentages?
>
Best is to use percentages for layouts. Also, create different skins for
different orientations and devices. Use CSS media queries to specify the
appropriate skin. [1]
>
> Thanks for any insight. This was disappointing.
>
Sorry to hear that. I am sure we can work this out :-)
Thanks,
Om
[1]
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf62883-7ff2.html#WS19f279b149e7481c4a89460c12d804a111e-8000
>
>
>
> --
> View this message in context: http://apache-flex-users.
> 2333346.n4.nabble.com/Mobile-Width-and-Height-tp13813.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
Re: Mobile Width and Height
Posted by Scott Mathewson <sc...@matheson.it>.
Module is. It my skill set however I used bottom top left right Center on most of my objects
Then allow the app to be resized seems to work ok
Sent from my iPhone
> On 17 Oct 2016, at 05:43, bilbosax <wa...@comcast.net> wrote:
>
> I have written my first mobile AIR app. On my iPad, the layout is a dismal
> failure. It looks perfect in the simulator.
>
> I have the application set up to run in portrait mode with no
> auto-orientation. It starts at 160 DPI and scales up. When the application
> is complete, I get the width and height of the stage, and then use these
> numbers to calculate the layout of all of my buttons and column widths for
> my datagrid. On the iPad, all of the buttons are spread way too far apart,
> several running off the screen. The datagrid is all supposed to fit on the
> screen but four of the colums ran off the screen.
>
> It is almost as if it calculated the width of the screen in landscape mode
> instead of in portrait mode. So I have two questions:
>
> 1) If you layout the application in portrait orientation, is the width of
> the stage the width in portrait orientation or landscape orientation?
>
> 2) I am confused on how to lay everything out on mobile devices with varying
> screen densities. Is it better to get the app width and height and then set
> up distances and spacing in pixels, or to use percentages?
>
> Thanks for any insight. This was disappointing.
>
>
>
> --
> View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Mobile-Width-and-Height-tp13813.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.