Uma das preocupações quando se desenvolve aplicativos é a resolução de tela. Principalmente quando se trata de uma aplicação RIA mobile, pois existem varias resoluções de diferentes e temos que atender a todas com o mínimo de esforço de desenvolvimento possível.
Para resolver este problema, nós usamos uma configuração chamada placements.
Os placements configuram os ajustes dos controles para redimensionamento e reposicionamento da tela, evitando que ela fique distorcida ou desarrumada:
Porém, é difícil sabermos exatamente quais os valores corretos para configuração dos placements em nossos layouts. Isso nos obriga a realizar vários testes com diferentes valores a fim de determinar quais são os corretos para cada tela de nossa aplicação.
O Cálculo
Existe um cálculo que pode ser feito para se descobrir qual a configuração correta para os controles de tela de modo que não haja distorções no layout caso a tela seja maximizada, reposicionada horizontalmente ou quando o programa for aberto em uma tela com uma resolução diferente.
Este cálculo está disponível em uma planilha Excel que pode ser encontrado no help do Magic xpa:
Home > Technical Notes > Forms >Control Placement Definitions
ou diretamente aqui.
Abrindo este arquivo, encontraremos três painéis:
1. Form Navigation Properties – Onde adicionamos a altura e largura da tela que estamos desenhando no Studio. Normalmente configuramos a menor resolução de tela possível para o SO que estamos desenvolvendo:
Form Navigation Properties |
||
Width |
80 |
|
Height |
13 |
*Se estivermos desenvolvendo a tela horizontalmente então devemos trocar os valores: o valor de Width colocamos em Height e vice-versa, desta forma o cálculo será feito levando em consideração o posicionamento horizontal da tela.
2. Control Navigation Properties – Onde colocamos altura, largura e a posição do controle na tela:
Control Navigation Properties |
||
Left |
0,000 |
|
Top |
1,000 |
|
Width |
5,000 |
|
Height |
1,125 |
3. Placement – Onde mostra o resultado, os valores que devem ser configurados no placements do controle:
Placement |
|
Left |
0% |
Right |
6% |
Top |
8% |
Bottom |
9% |
Agora é só inserir os valores calculados na configuração de placements do controle.
*Os valores devem ser calculados para cada controle da tela.