Positioning GUI Elements in MobiAccess
Introduction
The positioning system of MobiAccess has been designed to best serve the need of only having to place components on a form once, and of making these components adjust to their future size the best possible way. Naturally, this also includes the case when we rotate our device, in which case the controls automatically adjust to the new size after rotation.
Although not even this positioning system can adjust to the wildest of ideas, but it is still much more flexible than other known systems, and its usage is remarkably simple and convenient at that.
As with all things that have advantages, however, there are disadvantages involved here as well, else the balance between good and bad would disappear, having dire consequences. Having taken all this into account at its development, the single weakness of the system is that it is a little bit more complex than say, one with absolute positioning. With a bit of practice, however, this can be overcame very quickly.
Hopefully by the time this tutorial is concluded and you complete a practice phase, you will have found that you possess the ability to use our system as easily and with such routine as you would any other positioning system out there.
Types of Positions
We can use 16 types of positionings in MobiAccess. There is no need to be alarmed, however, since all these are of the same lot, with the only difference being in anchor points.
Parameters
Each position is characterized by 4 parameters. These four parameters are made up of the following variants (Note: the control’s container is always the one that contains said control) :
- Left -> How far the left side of the control is from the left side of its container.
- Center -> How far the control’s vertical midline is from its container’s vertical midline.
- Right -> How far the right side of the control is from its container’s right side.
- Top -> How far the top of the control is from the top of its container.
- Middle -> How far the horizontal midline of the control is from the horizontal midline of its container.
- Bottom -> How far the bottom of the control is from its container’s bottom.
- Width -> The width of the control.
- Height ->The height of the control.
We have to choose 4 of these 8 attributes to characterize a position used to describe the placement of a control. We are to give values to these 4 parameters when we create an iteration of our chosen position.
The value given is of Double type, which has a dual meaning: if we give it a number less than -1 and more than 1, it is understood in pixels, but if we give it a number between -1 and 1 it is understood as a percentage.
For example:
12.6 -> 12px
0.26 -> 26%
In case of a horizontal parameter (Left, Center, Right, Width), the percentage is that of the percental ratio of the width of the control’s container. If the parameter is vertical, the percentage is that of the percental ratio of the height of the control’s container.
The first letters of these parameters appear in the position classes. For example, LTWHPos means Left-Top-Width-Height-Position.
Here are the 16 types of positions we can use:
- CBWHPos -> Center-Bottom-Width-Height-Position
- CMWHPos -> Center-Middle-Width-Height-Position
- CTBWPos -> Center-Top-Bottom-Width-Position
- CTWHPos -> Center-Top-Width-Height-Position
- LBWHPos -> Left-Bottom-Width-Height-Position
- LMWHPos -> Left-Middle-Width-Height-Position
- LRBHPos -> Left-Right-Bottom-Height-Position
- LRMHPos –> Left-Right-Middle-Height-Position
- LRTBPos -> Left-Right-Top-Bottom-Position
- LRTHPos -> Left-Right-Top-Height-Position
- LTBWPos -> Left-Top-Bottom-Width-Position
- LTWHPos -> Left-Top-Width-Height-Position
- RBWHPos -> Right-Bottom-Width-Height-Position
- RMWHPos -> Right-Middle-Width-Height-Position
- RTBWPos -> Right-Top-Bottom-Width-Position
- RTWHPos -> Right-Top-Width-Height-Position
The Method of Selecting the Appropriate Position Type
At first a lot of users try to assess and comprehend all the types of positions, and then pick the one that they believe is the most appropriate for their needs. This unnecessarily takes a lot of valuable time.
The correct way to select the approprate position is to first decide where we want to position the given component, then with all this in mind we pick the type of position we need.
The Naming Scheme of Positions
After we have selected the type of position we need, and we know what letters it is made up of, we still need to figure out in what order these four letters make up the abbreviation. At this point it vastly accelerates our work if we are familiar with the precedence of their position in the abbreviation.
We always have 4 letters, out of which 2 are always made of horizontal and the other 2 are of vertical parameters.
Horizontal parameters:
- Left
- Center
- Right
- Width
Vertical parameters:
- Top
- Middle
- Bottom
- Height
Apart from being horizontal or vertical, parameters possess another important attribute: whether a given parameter is an anchor or a size parameter.
With all that in mind the previous list is altered as follows:
- Horizontal parameters
- Anchor parameters
- Left
- Center
- Right
- oSize parameters
- Width
- Vertical parameters
- Anchor parameters
- Top
- Middle
- Bottom
- Size parameters
- Height
The only thing that remains afterwards is to understand in what order the parameters appear. Let’s see:
- 1.Horizontal anchor parameters. Minimum 1, maximum 2. [L, C, R, LR]
- 2.Vertical anchor paramerers. Minimum 1, maximum 2. [T, M, B, TB]
- 3.Horizontal size parameters. 1 or 0. If 2 horizontal anchor parameters are given, nothing stands here, but if only 1 anchor parameters were given, then it is compulsory to put a width here. [W, -]
- 4.Vertical size parameters. 1 or 0. If 2 vertical anchor parameters are given, nothing stands here, but if only 1 such parameter is given, then it is compulsory to put height here. [H, -]
A Simple Example
Now that we know the basics, let us assume that we would like to position a component on the screen that it works and behaves as follows, independently of screen size and arrangement:
- Its top is always 50 pixels from the top of the screen [T]
- Its bottom is always 100 pixels from the bottom of the screen [B]
- Its right side is always 20 pixels from the right side of the sceeen [R]
- Its width is always 40% of the form’s width (ie. its left side is positioned approximately in the center). [W]
After clarifying all this, we can see what letters we need. We only need to find their right order, which is not too complicated if we use the scheme above.
The result:
RTBW
Therefore we need the position called RTBWPos, and their component’s positions look like this:
RTBWPos.CI(20.0, 50.0, 100.0, 0.4)
I know it might seem rather lengthy and complicated as it is written down, but believe me, after using it for a while all of it will turn into routine work without any need of complicated thought.
A Simple Example Program
Let’s assume that we have 9 buttons and we would like to organize them in a 3x3 grid in a way that – independently of screen size – the buttons on the sides are 10 pixels from the screen’s sides, and the buttons fit to each other exactly. Also, the 3-line and 3-column grid should possess the following sizes:
- 1. column: 100 pixels wide
- 2. column: fully fills the available space
- 3. column: 50 pixels wide
- 1. line: 160 pixels high
- 2. line: fully fills the available space
- 3. sor: 80 pixels high
Since it might be a little difficult to imagine it based on what is written down, let us rather see how it would look like. The buttons on the picture also have the positions and values I used and given written on them.
And if this form is rotated, it still fits the description perfectly. Following rotation, our form would look like this:
Conclusion
I sincerely hope that this little write-up was not only useful, but that it doesn’t scare anyone off and encourages everyone to give the system a try.
Written by DI
