Versions Compared

Old Version 1

changes.mady.by.user Jose Porto

Saved on

compared with

New Version Current

changes.mady.by.user Rodrigo Borges

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Tip

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
Tip

One layout defines the size of the application window and the basic arrangement of visualization components in the real-time application. You can define fixed parts as menus and indexes and parts that are replaced when moving from one Display to another. Be sure to plan how you want to use the Displays.

Nesta pagina:

Table of ContentsmaxLevel2

Creating Layouts

For example, consider whether you want a menu bar, toolbar, or other elements to always display at the top of the application window.
Often you may need a single layout to frame any of the Displays with all the information in the application. You use the tab Layouts in the environment of Displays for defining layouts.

Info

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 NOTE - The last Display listed in the Layout tab is the only one that is replaced when you change the Display. For example, new projects include a default layout called Startup. See in the figure that there are two other Displays, or components, in this Layout: AN_Header (uma barra de ferramentas) e a toolbar) and AN_Footer (um rodapéa footer). A tela The Display 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.

Image Removed

  • 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

    Image Removed

  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 é

that is listed in the last line of the DataGrid is the area that, by default, will be swapped when you request the Open another Display application.

In the figure, the buttons above the DataGrid on the left on the bar serve, respectively, to:

  • Add new line and describe Display position

  • Remove the selected line

  • Climb the selected line

  • Down the selected line

To create a new layout:

  1. Go to Edit> Displays> Layouts .

  2. Click the button New York, U.. The window for creating Layouts.

Image Added

  • Enter or select the information as needed.

Column

Description

Layout name

Enter a Name for the layout

Layout

Select the type of Layout being created:

  • DockPanel - Select this type to position Displays relative to the layout and other Displays.

  • Canvas - Select to position Displays in an absolute position by entering the position in WPF units (independent pixels of the monitor).

Description

Type a description of this layout.

  1. Click OK. The Layouts creation window will close

  2. In the upper-right corner of the Layouts tab, type or select the information as needed:

Column

Description

Width

Type the height, in WPF units (independent pixels of the monitor), of the layout. This is the Display height of the application at run time.

Height

Type the width, in WPF units (independent pixels of the monitor), of the layout. This is the width of the execution request

Background

Select a background color for this layout.

  1. Click Add line to add a new line to position a Display

    Image Added

  2. Enter or select the information as needed. The Displays you add are the first Displays that the layout will use.

Column

Description

Page

Select a Display that you want to include in the layout. Only Page Displays can be used for placement in Layouts.

Docking

Select the margin of the main viewing area of the application, to be the place of fixation (docing) for this Display:

  • Left (left), Top, Right, Bottom

HorizontalAlign

Select the horizontal alignment of this Display in layout:

  • Left, Center, Right

VerticalAlign

Select the vertical alignment of this Display in layout:

  • Top, Center, Bottom

The StartUp Layout example

Or Layout Startup, shown in the DataGrid above, comes in the Default project of Action.NET. The following information about each of these areas:
This is a schema by setting a footer header Display and the main Display in the center of the monitor. In the sole of the single Display, you must define it by a Layout as shown below in the layout Startup:

  • AN_Header: Is the Display header adjusted at the top left. Because the layout dimension is 1024 x 768, for the header to occupy the entire top horizontal part of the layout must have width of 1024. In the case of this application, its dimension is 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 é It is the footer of the Display, adjusted at the bottom of the Display on the left. Similar to the header, it should be 1024 in length to occupy the entire bottom of the Display. In the case of this application its dimension is 1024 x 45.

Image Removed
  • Image Added

  • 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 it will be the core of the layout with the various process Displays that will be used. In this application, considering that the header has height (Height) of 60 points and footer 45, the core Displays should have a vertical dimension of 768 – 60 - 45 = 663. Thus, all Displays inserted in the core of this layout should have a dimension of 1024 x 663.

Info

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 telaNOTE - When there is more than one layout in a project, before opening a Display you must open its layout and the Display will always be placed at the last level of the layout (in the case above level 2). For example, a script opening a layout and a Display is shown below.

Code Block
@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

Preview area settings

The display area settings control how the application should display the Displays on the monitors of the client computers, that is, they use the display modules of the 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

For this setting there are buttons and controls at the top of the Display environment, shown in the figure below.
These settings are different for normal MS-Windows customers than are required for customers using HTML5 format. The next sections detail these settings.

MS-Windows Clients ("Desktop")

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

Vá para

To set desktop client settings:

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

  1. Go to Edit>Displays>Displays .

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

    1. Click Clients to set up desktops that use Windows. The window for configuration appears.

    2. Enter or select the information as needed and click OK

    Coluna

    Column

    Descrição

    Description

    Maximize When Open

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

    Select to maximize the client window to fit the monitor.

    Stretch

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

    Choose how the layout should extend on the client monitor when using the application:

    • 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

    • should not be resized: The exact size that was configured for the layout should be shown. In this case it is recommended to select the option to include the scroll bar.

    • Fill - The layout will be resized to completely fill the space available on the client monitor, without taking into account the proportion of the original layout.

    • Uniform - The layout will be resized proportionally to the size of the client monitor, maintaining the proportion of the 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

    • The resized layout both to maintain the aspect ratio and also to completely fill the space available on the client monitor. This can result in cutting some parts of the layout.

    Scrollbar

    Select for scrollbar preview in the client window.

    Title

    Enter a title for the client window.

    MinimizeBox

    Select to display the default minimize button.

    MaximizeBox

    Select to display the default maximize button.

    CloseBox

    Select to display the default close button

    ResizeBox

    Select to display the default resize handle (bottom right)

    Menus

    Select which menus to show

    • 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

    Select for the mouse pointer to be visible.

    OnDisplay Keyboard

    Select to display a numeric keypad on the Display.

    Remote Client Comments

    Selecione para proibir usuários do aplicativo de enviar comandos para o PLCAlterar o Cursor - Selecione o tipo de cursor

    Select to prohibit app users from sending commands to plc

    When Mouse Is Over Command areas

    permitir objeto

    allow object

    • Change cursor - Select the cursor type.

    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

    • When the quality is undefined) Select the option and the character that should be shown when the quality of the data coming from the field is undefined.

    • 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

    • Select the option and character that should be shown when the OPC server indicates that the data quality is poor.

    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.

    Image Removed

    • 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.

    Image Removed

    • 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.

    Panel

    Users can run multiple instances of the application on the same computer. The user may need to log in as a different user from time to time. Select this option to automatically change the logged-on user on all running instances of the application on the same computer.

    Initial Theme

    Name of the theme to be used by default when starting the program

    • Enter the number of monitors that the Client viewer will use.

    • Select the monitor and layout to show when the application starts.

    HTML5

    If you are going to use Displays with format in the HTML5 standard, also make the settings, to do so.

    To set up the desktop for HTML5 Displays:

    1. Press the button HTML5. The window for HTML5 configuration appears.

    Image Added

    • Enter or select the information as needed and click OK.

    Column

    Description

    Disable Commands

    Select to prohibit app users from sending commands to the field

    Desktop Initial Page

    Select the Display that users should see when they start the application.

    Mobile Initial Page

    Select the Display that Mobileusers should see when they launch the app on their mobile phone.

    Scroll ignore
    scroll-viewporttrue
    scroll-pdftrue
    scroll-officetrue
    scroll-chmtrue
    scroll-htmltrue
    scroll-docbooktrue
    scroll-eclipsehelptrue
    scroll-epubtrue

    On this page:

    12false