Same card for two size of controls: phone or tablet

[trevix]

Hi all.
I am trying to find how the best way to handle the fact that my standalone will be used both on cellular and tablet screen size.
In fact, for a better user experience, some buttons and controls are sized differently, may be with different size icons, image etc.

First method
In the beginning, my method was to use 2 cards in the same stack:
1) "PhoneCard"
2) "TabletCard"
Most of the scripts, when possibile, where on the stack and I used a lot of behaviour for the controls inside the two cards.
In the preopenstack I decided wich one to use, according to the screenSize, putting their name in a global.

Code: Select all

put "PhoneCard" into gCurrentCard

So, a tipical message would be:

Code: Select all

put "abc" into fld "TextField" of gCurrentCard

While this worked, the growing complexity of the standalone, made me thinking that it would have been easier, particularly on debugging, to have only 1 card, and showing/resizing grouped controls according to the screen size. I could do this because I was able to group the different size controls in only 4/5 groups.
Second method:
- 1 card only
- 4/5 groups made in two sizes (for phone and tablet) and named differently, for example:
On Preopenstack I set a global and show/hide the needed groups:

Code: Select all

put "phone" into gMachine
Show group "ScoreGroupPhone"
Hide group "ScoreGroupTablet"

A typical message would then be:

Code: Select all

Put "123" into field "Score" of group ("ScoreGroup" & gMachine)

The first method forced me to duplicate EVERY control script in the two cards, NOT only those with different sizes. This would make the standalone more prone to script errors and generally having less control of what was going on.
The second method works fine, up to now, but the problem is the message path: if I forget to detail every control name (of the 4/5 groups) with a "...of group "ScoreGroupTablet", sometime the message is sent to the hidden group (if I am on phone and the message is sent to the Tablet hidden group).
This because, of course, controls inside the different size groups are named the same.

HOW to solve it:
A) Delete (in the preopenstack) the unwanted size groups:
This would work once the standalone is installed on the device, but it would be a problem on the developing environment

B) Find a way (in the preopenstack) to remove from the message path the unwanted size group.
Is this possible? And how?

Thanks and sorry for the long post
Trevix

[richmond62]

Well, at the risk of completely missing the point, you could do this:

Code: Select all

put the screenRect

This will give you 4 numbers delimited by commas: item 3 being the screen width, and item 4 the screen height.

Then you could run a routine to position your screen objects where you want them depending on the screen size.
That way you'd only need a single card.

[trevix]

I guess I did not explain myself correctly:
I am not talking about resizing (I know how to do it)

I am talking about referring to, for example, two buttons, that have the same name, but with different properties because of different screen size.
I Know that I shouldn't name two controls with the same name.
That's why they differentiate because of the name of the group they are in ("ScorePhone" or "ScoreTablet")

What I am asking is: is there a command that takes a group temporarily OUT of the message path? (without having to delete it)

That is:
If I have a field "Score" inside a group named "ScorePhone" and a field "Score" inside a group named "ScoreTablet", if a script (from somewhere) put a value on the field "Score", the first in the message path gets changed (I guess because of the stacking order).
To be sure I refer to the correct field: field "Score" of group "ScorePhone"
OR ?? Since the all session will happens on the same screen size device, can I get the the group "ScoreTablet" off the message path?

[jacque]

There's no way to remove a control from the message path with the setup you have. Typically mobile apps use only one set of controls and resize and position them in a preOpenStack or preopencard handler. The other way is to use fullscreenmode to do the same thing automatically. Having two sets of controls with the same names is a problem, as you know.

But I did have one case where I needed to show different groups depending on the platform. In that case I named each group with the platform in its name, the same way you did. I put the group name into a script local so I could just refer to "button x of grp sGrpName". That's about as close as you can get.

But if possible, it would be better to avoid duplicate controls and just do dynamic resizing.

[trevix]

Is there a performance or easy of use difference between this two methods?

Code: Select all

local sScore
--on Preopenstack
put "ScoreTablet" into sScore
...
...
--on a script
put 5 into field "Score" of group sScore
show group sScore

then

Code: Select all

--on Preopenstack
put "Tablet" into gMachine --a global
...
...
--on a script
put 5 into field "Score" of group ("Score"& gMachine)
show group  ("Score"& gMachine)

With the first method i have to fill the local in every script of every control that want to do something in the group "ScoreTablet"

[jacque]

Now that I'm back at the computer, I see that I did it the second way. I didn't use a global, but substitutions were only for a single card. So yeah, I'd go with "group ("Score"& gMachine)".

[bwmilby]

I’d vote for using the resizeStack handler to do what you want and dynamically size/position the controls. This allows you to have the controls react to the different variations of device sizes. Just like CSS, you would use a metric to switch between the two methods.

If you want everything to be statically designed in the IDE, then you could also use profiles. They are no longer wired into the IDE/Inspector but the code is still there and works reasonably well for this. In some previous work I tried 3 (default, portrait, landscape) but would advise against having any extra/duplicate ones. For what you describe you would need tablet and phone and then set the profile appropriately.

[trevix]

I’d vote for using the resizeStack handler to do what you want and dynamically size/position the controls.

The reason for my choice is that my resizestack handles are already chock full and, as you know, debugging them is pretty hard.
You see, my app is: X 2 OS (android and iOS), X 2 devices (phone/tablet), X 2 languages, X 3 or more Sports board (stacks), X 3 UI cards. So this is like the famous rice on the checkerboard. (if you are curious about it, you can see it here: www.segnapunto.it)

Because of the infinite (many very small) sizes of Android, there is a big difference between the phone and tablet layout. I had to use different field sizes, different icons, background images and so on.
Somehow I managed to use only 4 groups that are "groupPhone" and "groupTablet", so that I could easily refer to their content.
If on startup I could just take the unused one out of the LC message path, that would solve my problems (I could delete them, but it would add complexity on development environement).
Is this a too strange idea for a Enhancement request?

then you could also use profiles.

Gee...I am already struggling with profiles (the app is in 2 languages).
I believe that profiles (particularly for localisation) need a radical re-design in LC in order to be useful