Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

Um layout define o tamanho da janela do aplicativo e o arranjo básico de componentes de visualização na aplicação de tempo real. Pode-se definir partes fixas como menus e índices e partes que são substituidas quando se passa de uma tela para a outra. Certifique-se de planejar como você deseja utilizar as telas.

Criação de Layouts

Por exemplo, considere se você quer uma barra de menu, barra de ferramentas ou outros elementos para exibir sempre no topo da janela da aplicação.
Muitas vezes você pode precisar de um único layout para enquadrar qualquer das telas com toda a informação na aplicação. Usa-se a aba Layouts no ambiente de Displays para a definição de layouts.

NOTA - A última Tela listada na aba Layout é a única que é substituída quando você troca de Tela. Por exemplo, os novos projetos incluem um layout padrão chamado Startup. Veja na figura que há outras duas telas, ou componentes, neste Layout: AN_Header (uma barra de ferramentas) e AN_Footer (um rodapé). A tela AN_MainPage que está listada na última linha do DataGrid é a área que, por default, será trocada quando você solicita para a aplicação Abrir outra tela.

Na figura, os botões acima do DataGrid à esquerda na barra servem, respectivamente, para:

  • Adicionar nova linha e descrever posição da tela

  • Retirar a linha selecionada

  • Subir a linha selecionada

  • Descer a linha selecionada

Para criar um novo layout:

  1. Vá para Edit> Displays> Layouts .

  2. Clique o botão New. Será mostrada a janela para a criação de Layouts.

  • Digite ou selecione as informações, conforme necessário.

Coluna

Descrição

Layout name

Entre com um Nome para o layout

Layout

Selecione o tipo de Layout sendo criado:

  • DockPanel - Selecione este tipo para posicionar telas em relação ao layout e a outras telas.

  • Canvas - Selecione para posicionar telas em uma posição absoluta, introduzindo a posição em unidades WPF (pixels independentes do monitor).

Description

Digite uma descrição desse layout.

  1. Clique em OK. A janela de criação de Layouts será fechada

  2. No canto superior direito da aba Layouts, digite ou selecione as informações, conforme necessário:

Coluna

Descrição

Width

Digite a altura, em unidades WPF (pixels independentes do monitor), do layout. Esta é a altura da tela da aplicação em tempo de execução.

Height

Digite a largura, em unidades WPF (pixels independentes do monitor), do layout. Esta é a largura do pedido de execução

Background

Selecione uma cor para fundo deste layout.

  1. Clique em Adicionar linha para adicionar uma nova linha para posicionar uma Tela

  2. Digite ou selecione as informações, conforme necessário. As Telas que você adiciona são as primeiras telas que o layout utilizará.

Coluna

Descrição

Page

Selecione uma Tela que você deseja incluir no layout. Somente Telas tipo Page podem ser utilizadas para posicionamento em Layouts.

Docking

Selecione a margem da área principal de visualização da aplicação, para ser o local de fixação (docagem) para esta Tela:

  • Left (esquerda), Top (topo), Right (direita), Bottom (inferior)

HorizontalAlign

Selecione o alinhamento horizontal desta tela no Layout:

  • Left (esquerda), Center (centro), Right (direita)

VerticalAlign

Selecione o alinhamento vertical desta tela no Layout:

  • Top (topo), Center (centro), Bottom (inferior)

O exemplo de Layout StartUp

O Layout Startup, mostrado no DataGrid acima, vem no projeto Default do Action.NET. A seguir informações sobre cada uma destas áreas:
Trata-se de um esquema definindo uma tela de cabeçalho outra de rodapé e a tela principal na parte central do monitor. Para que sejam mostradas como uma única tela deve-se definir por um Layout conforme apresentado abaixo no layout Startup:

  • AN_Header: é o cabeçalho da tela ajustado no topo à esquerda. Como a dimensão do layout é 1024 x 768, para o cabeçalho ocupar toda a parte horizontal superior do layout deverá ter comprimento (width) de 1024. No caso desta aplicação, sua dimensão é 1024 x 60.

  • AN_Footer: é o rodapé da tela, ajustado na parte inferior da tela à esquerda. De forma similar ao cabeçalho, deverá ter comprimento de 1024 para ocupar toda a parte inferior da tela. No caso desta aplicação sua dimensão é 1024 x 45.

  • AN_MainPage: será o miolo do layout com as diversas telas de processo que serão utilizadas. Nesta aplicação, considerando que o cabeçalho tem altura (Height) de 60 pontos e o rodapé 45, as telas de miolo deverão ter dimensão vertical de 768 – 60 – 45 = 663. Assim, todas as telas inseridas no miolo deste layout deverão ter a dimensão de 1024 x 663.

NOTA - Quando em um projeto existe mais de um layout, antes de se abrir uma tela deve-se abrir seu layout e a tela sempre será colocada no último nível do layout (no caso acima nível 2). A título de exemplo, abaixo é mostrado um script abrindo um layout e uma tela.

@Layout.AN_NoFilterReports.Open(); 
@Display.AN_HistoricEventsSummary.Open();

Configurações da área de Visualização

As configurações da área de visualização controlam como o aplicativo deve exibir as telas nos monitores dos computadores clientes, isto é que utilizam os módulos de visualização do Action.NET.
Para esta configuração há botões e controles na parte superior do ambiente Display, mostrados na figura abaixo.
Estas configurações são diferentes para clientes normais MS-Windows daquelas necessárias para clientes utilizando o iOS dos tablets e iPhones da Apple, ou no formato HTML5. As próximas seções detalham estas configurações.

Clientes MS-Windows ("Desktop")

Para definir as configurações do cliente de desktop:

  1. Vá para Edit>Displays>Displays .

  2. Clique em Clients para configurar desktops que usam Windows. Aparece a janela para configuração.

  3. Digite ou selecione as informações, conforme necessário e clique em OK

Coluna

Descrição

Maximize When Open

Selecione para maximizar a janela do cliente de forma a se ajustar ao monitor.

Stretch

Escolha como o layout deve se estender no monitor cliente quando usando o aplicativo:

  • None - Layout não deve se redimensionar: Deve ser mostrado o tamanho exato que foi configurado para o layout. Neste caso recomenda-se selecionar a opção de incluir a barra de rolagem.

  • Fill ( Preencher) - O layout será redimensionado para preencher completamente o espaço disponível no monitor do cliente., sem levar em conta a proporção do layout original.

  • Uniforme - O layout será redimensionado proporcionalmente ao tamanho do monitor do cliente, mantendo a proporção do layout. original.

  • UniformToFill - O layout redimensionado tanto para manter a proporção como também para preencher completamente o espaço disponível no monitor do cliente. Isto pode resultar em cortar algumas partes da disposição.

Scrollbar

Selecione para visualização da barra de rolagem na janela do cliente.

Title

Digite um título para a janela do cliente.

MinimizeBox

Selecione para exibir o botão padrão de minimizar.

MaximizeBox

Selecione para exibir o botão padrão de maximização.

CloseBox

Selecione para exibir o botão padrão de fechar

ResizeBox

Selecione para exibir o puxador padrão de redimensionamento (canto inferior direito)

Menus

Selecione quais menus devem ser mostrados

  • File

  • Tools

  • Security

Mouse Cursor Visible

Selecione para o ponteiro do mouse ser visível.

OnScreen Keyboard

Selecione para exibir um teclado numérico na tela.

Remote Client Comments

Selecione para proibir usuários do aplicativo de enviar comandos para o PLC

When Mouse Is Over Command areas

permitir objeto

  • Alterar o Cursor - Selecione o tipo de cursor.

Verify Tag Quality on Client Displays

  • On undefined quality show - (Quando a qualidade for indefinida) Selecionar a opção e o caractere que deve ser mostrado quando a qualidade dos dados vindos de campo for indefinida.

  • On OPC Bad quality show - Selecionar a opção e o caractere que deve ser mostrado quando o servidor OPC indica que a qualidade dos dados é ruim.

Multiples users on same computer Share user Logon

Os usuários podem executar múltiplas instâncias do aplicativo no mesmo computador. O usuário pode precisar logar como um usuário diferente de vez em quando. Selecione essa opção para alterar automaticamente o usuário conectado em todas as instâncias em execução do aplicativo no mesmo computador.

Initial Theme

Nome do tema a ser utilizado por default ao iniciar o programa

  • Digite o número de monitores que o visualizador Cliente vai usar.

  • Selecione o monitor e o Layout a ser mostrado quando o aplicativo é iniciado.

Cliente iOS

Se necessário, faça também as configurações da visualização para os Cliente iOS.

Para configurar a área de trabalho para Clientes iOS:

  1. Pressione o botão iOS Device. Aparece a janela de configuração para iOS client.

  • Digite ou selecione as informações, conforme necessário e clique em OK .

Coluna

Descrição

Disable Commands

Selecione para proibir usuários do aplicativo de enviar comandos para o campo

iPad Initial Page

Selecione a Tela que os usuários do iPad devem ver quando iniciar a aplicação no iPad.

iPhone Initial Page

Selecione a Tela que os usuários do iPhone devem ver quando iniciar a aplicação no iPhone.

Stretch Fill

Selecione para redimensionar o aplicativo de modo a preencher a tela do dispositivo.

iPad Landscape

Selecione para redimensionar o aplicativo de modo a aparecer como paisagem em iPads

iPhone Landscape

Selecione para redimensionar o aplicativo de modo a aparecer como paisagem em iPhones

HTML5

Se for utilizar telas com formato no padrão HTML5, faça também as configurações, para tal.

Para configurar a área de trabalho para telas em HTML5:

  1. Pressione o botão HTML5. Aparece a janela para configuração de HTML5.

  • Digite ou selecione as informações, conforme necessário e clique em OK .

Coluna

Descrição

Disable Commands

Selecione para proibir usuários do aplicativo de enviar comandos para o campo

Desktop Initial Page

Selecione a Tela que os usuários devem ver quando iniciar a aplicação.

Mobile Initial Page

Selecione a Tela que os usuários de Mobiles devem ver quando iniciar a aplicação no celular.

Nesta pagina:


  • No labels