Strange MobileGrid Quirk

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

Strange MobileGrid Quirk

bilbosax
This post was updated on .
I use the mobileGrid component in my mobile AIR app and it works great.  I am
really happy with it...mostly. The problem I am running into is the column
widths.  When I set the column widths using percentages, I get small single
pixel vertical lines that show up in some of the column boundaries in the
header, but not all of them.  Here is an image so you can see the problem:

<http://apache-flex-users.2333346.n4.nabble.com/file/t999/image752.jpg

As you can see, the left header divider has no artifact, but the next three
all have a vertical line artifact. The nice part of doing percentages is
that it looks correct on every device, the column widths are all
appropriately sized.  The bad part of it is that your app looks like it has
small unwanted and random visual artifacts, very unprofessional.

I have found an alternative that displays the header with no artifacts, but
it is unreliable.  If you manually set the widths and round the width values
in your calculations, you get a very smooth header with no visual artifacts.
But for some reason, this component was made so that you have to adjust for
for screenDPI when you calculate them.  Because screenDPI is not always
properly reported, sometimes you get columns that hang off the side of the
screen. So you have to make a choice.  Do I want to have proper looking
headers, and run the risk of not having all of my data shown, or do I want
to have visual artifacts but at least my users will be able to see
everything?

Neither option sounds good to me, but obviously, I have to display my data.
My only option that I can think of is to skin the header to have a black bar
on the right edge so even if the artifact shows up, it will blend in.  

What I really don't understand is why I can't just take the width of my app
and multiply it time a percentage value, round it, and set it to the width
of my column???  If you do the example below on the mobileGrid, it does not
create a column that is one tenth of the screen width:

column1.width = Math.round(appWidth * .1);

That is because the documentation says that width takes into consideration
DPI:

     "Width value is expressed in current applicationDPI, or at 160 DPI if
applicationDPI is not set."

I am not sure why this approach was taken, but that is where it stands
today.

So two questions:

1) has anyone run into this problem and can offer up a possible solution?
My app is so close to being complete and this is the last little glitch I am
trying to iron out.

2) Does anyone know how to get in touch with Maurice Amsellem, as I believe
he did a lot of the development on this experimental component? He posted
about it alot on this forum a couple years back. I think that it is just a simple rounding error when using percentages.





--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Strange MobileGrid Quirk

Erik J. Thomas
Wow, gradients are so last decade. I would lose the gradients and your problem may go away. Just a thought. Cheers. Erik

Sent from my iPhone

> On Jan 13, 2018, at 8:18 PM, bilbosax <[hidden email]> wrote:
>
> I use the mobileGrid component in my mobile AIR app and it works great.  I am
> really happy with it...mostly. The problem I am running into is the column
> widths.  When I set the column widths using percentages, I get small single
> pixel vertical lines that show up in some of the column boundaries in the
> header, but not all of them.  Here is an image so you can see the problem:
>
> <http://apache-flex-users.2333346.n4.nabble.com/file/t999/image752.jpg>
>
> As you can see, the left header divider has no artifact, but the next three
> all have a vertical line artifact. The nice part of doing percentages is
> that it looks correct on every device, the column widths are all
> appropriately sized.  The bad part of it is that your app looks like it has
> small unwanted and random visual artifacts, very unprofessional.
>
> I have found an alternative that displays the header with no artifacts, but
> it is unreliable.  If you manually set the widths and round the width values
> in your calculations, you get a very smooth header with no visual artifacts.
> But for some reason, this component was made so that you have to adjust for
> for screenDPI when you calculate them.  Because screenDPI is not always
> properly reported, sometimes you get columns that hang off the side of the
> screen. So you have to make a choice.  Do I want to have proper looking
> headers, and run the risk of not having all of my data shown, or do I want
> to have visual artifacts but at least my users will be able to see
> everything?
>
> Neither option sounds good to me, but obviously, I have to display my data.
> My only option that I can think of is to skin the header to have a black bar
> on the right edge so even if the artifact shows up, it will blend in.  
>
> What I really don't understand is why I can't just take the width of my app
> and multiply it time a percentage value, round it, and set it to the width
> of my column???  If you do the example below on the mobileGrid, it does not
> create a column that is one tenth of the screen width:
>
> column1.width = Math.round(appWidth * .1);
>
> That is because the documentation says that width takes into consideration
> DPI:
>
>     "Width value is expressed in current applicationDPI, or at 160 DPI if
> applicationDPI is not set."
>
> I am not sure why this approach was taken, but that is where it stands
> today.
>
> So two questions:
>
> 1) has anyone run into this problem and can offer up a possible solution?
> My app is so close to being complete and this is the last little glitch I am
> trying to iron out.
>
> 2) Does anyone know how to get in touch with Maurice Amsellem, as I believe
> he did a lot of the development on this experimental component? He posted
> about it alot on this forum a couple years back.
>
>
>
>
>
> --
> Sent from: http://apache-flex-users.2333346.n4.nabble.com/
>

Reply | Threaded
Open this post in threaded view
|

Re: Strange MobileGrid Quirk

bilbosax
This post was updated on .
Bahahahahaaaa!!!  You are right, gradients are a little bit out of style, but
I don't think they are the problem.  All my skins are FXG vector graphics so
gradient or solid wouldn't make a difference.

I have a solution, but I don't know how reliable it will be.  MobileGrid expects all
of the column widths at 160 DPI, and makes adjustments to calculated dimensions based on
DPI.  So this is what a column would look like now if you wanted it to be
10% of the screen width.

column1.width = Math.round(appWidth * .1 * 160 / this.appRuntimeDPI);

What this basically does is multiply the dimension that you calculate by a
ratio of 160 divided by the appRuntimeDPI.  This works on an Samusung Galaxy
Tab 2 Android that I have and an iPad 2, both with different DPI, and it
works perfectly.  My concern is the appRuntimeDPI.

How reliable are values like appRuntimeDPI, screenDPI, applicationDPI these
days in AIR???  They used to be pretty flaky, but I don't know if that has
changed in the last couple of years.

Thanks!



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Strange MobileGrid Quirk

quick6black
I had fix most of the skin issues on a set of skins I published on github,
also removed the gradient.

https://github.com/quick6black/flex-Android-Material-Skins/tree/master/src/spark/skins/android5




--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/