Layout

View video

Pages

Uma página é um contêiner de blocos. Cada aplicativo possui pelo menos uma página por padrão. Nos aplicativos Form, Control e Search, é possível criar várias páginas. As páginas são como guias, onde cada guia contém um ou mais blocos.

As páginas podem ser mostradas como Abas ou na forma de um Form Wizard. Na opção abaixo você pode selecionar o tipo de Layout da sua Página.

Páginas em abas

Pages (available only in the Form, Control and Search applications) configuration Interface.

Incluindo uma nova página

Para incluir uma nova página, insira as informações sobre o nome e o rótulo da nova página, selecione uma imagem se desejar e clique no botão “Incluir”.

Excluindo uma página

Para excluir uma página, clique no ícone Lixeira correspondente à linha da página.

Veja o exemplo abaixo de aplicação de Formulário usando duas Páginas: Dados Gerais e Documentos.

Form Application using Pages feature.

Configurações de páginas

O aplicativo de formulário já vem com uma página padrão, identificada como “Pag1”, mas é possível renomeá-la. Use as páginas quando tiver um aplicativo que contém muitos campos. Um formulário com mais de 20 campos verticalmente é desafiador de usar. Assim, você pode organizar os campos nos blocos e os blocos nas páginas.

Pages Configuration Interface.

Configurações padrão

Fonte

Defina a família de fontes dos títulos das páginas. Ao clicar no ícone do lado direito, você pode selecionar a família de fontes em uma lista.

Tamanho da fonte

Defina o tamanho da fonte dos títulos das páginas.

Cor da fonte selecionada

Defina a cor da fonte da página selecionada.

Cor de fundo selecionada

Defina a cor de fundo da página selecionada.

Cor da fonte não selecionada

Defina a cor da fonte das páginas não selecionadas.

Cor de fundo não selecionada

Defina a cor de fundo das páginas não selecionadas.

Páginas em Etapas

Configuração da Etapa

[Veja aqui um vídeo][video-form-etapas]{:target=”_blank”} mostrando o passo a passo de criação.

Op Esta opção serve para deletar a página desejada.

Nome
É o nome da página.

Título Nesta opção, o usuário pode dar um título para a página.

Descrição Nesta opção o usuário pode configurar uma descrição. A descrição será mostrada na etapa do seu assistente.

FontAwesome Nesta opção você pode selecionar o ícone que será mostrado acima do número da Etapa.

Por padrão, não há nenhum ícone habilitado, o usuário precisa selecionar um para ser mostrado.

Formato do assistente de páginas

Botão Incluir
Esta opção permite ao usuário configurar se o Botão Inserir será mostrado em todas as etapas, mas ficará desabilitado, ou se deseja ocultar o botão a ser mostrado apenas na última etapa.

Botões Avançar e Voltar Esta opção permite ao usuário configurar se o Botão Voltar será mostrado em todas as etapas, mas será desabilitado, ou se deseja ocultar o botão para ser mostrado somente após o avanço do formulário.

Tamanho Esta opção define o tamanho da visualização dos passos, podendo-se escolher entre Pequeno, Médio ou Grande. Exemplo:

Largura
Esta opção define a largura dos degraus, você pode escolher entre Mínimo ou 100% da largura.
Exemplo com 100% da largura:

Posição Esta opção define onde as etapas serão localizadas, você pode escolher entre Esquerda, Centro ou Direita.

Modo de atualização
Define como o assistente de formulário será usado ao atualizar os registros:

• Modo de assistente tradicional: Modo de assistente tradicional (todas as etapas são obrigatórias).
• Assistente com navegação habilitada: A interface do assistente será usada, mas sem botão para avançar ou voltar do assistente, podendo navegar qualquer etapa livremente.
• Interface de páginas: A interface de página tradicional será usada.

Modelo

Com esta opção, o usuário pode selecionar a aparência das etapas. Na imagem há uma prévia da opção selecionada.

Formato do assistente de páginas

Fonte do título Define uma fonte a ser usada nos títulos das etapas. Caso não seja informado, utilizará a mesma fonte definida no tema do aplicativo.

Tamanho da fonte do título Define o tamanho da fonte para os títulos das etapas. Caso não seja informado, será aplicado o mesmo tamanho de fonte definido no tema do aplicativo.

Cor do título para as etapas concluídas Define a cor da fonte para o título das etapas já concluídas. Caso não seja informado, será aplicada a mesma cor definida no tema do aplicativo.

Title colCor do título para a etapa atualor for the current step Define a cor da fonte para o título da etapa atual. Caso não seja informado, será aplicada a mesma cor definida no tema do aplicativo.

Cor do título para a próxima etapa Define a cor da fonte para o título da próxima etapa. Caso não seja informado, será aplicada a mesma cor definida no tema do aplicativo.

A cor após a próxima etapa Define a cor da fonte para o título das etapas após a próxima etapa. Caso não seja informado, será aplicada a mesma cor definida no tema do aplicativo.

Fonte de descrição Define a fonte para a descrição da etapa. Caso não seja informado, será aplicada a mesma fonte definida no tema do aplicativo.

Tamanho da fonte para descrição Define o tamanho da fonte para as descrições das etapas. Caso não seja informado, será aplicado o mesmo tamanho de fonte definido no tema do aplicativo.

Cor da descrição para a etapa concluída Define a cor da fonte para a descrição das etapas já concluídas. Caso não seja informado, será aplicada a mesma cor definida no tema do aplicativo.

Cor da descrição para a etapa atual Define a cor da fonte para a descrição da etapa atual. Caso não seja informado, será aplicada a mesma cor de fonte definida no tema do aplicativo.

Cor da descrição para a próxima etapa Define a cor da fonte para a descrição da próxima etapa. Caso não seja informado, será aplicada a mesma cor de fonte definida no tema do aplicativo.

Cor da descrição após a próxima etapa Define a cor da fonte para a descrição da etapa após a próxima etapa. Caso não seja informado, será aplicada a mesma cor de fonte definida no tema do aplicativo.

Layout

Neste módulo estão disponíveis recursos de edição, atributos e visualização da aplicação, de forma que podemos atribuir esquemas de visualização, organizar os campos em blocos, definir os valores e o formato do cabeçalho entre outros.

Blocos

Conceitualmente um bloco é um “container” onde posicionamos nossos campos de uma Aplicação de Formulário, Controle ou Consulta com orientação Slide.

Por padrão as aplicações criadas no Scriptcase são constituídas de um único bloco, este com o mesmo nome da aplicação. Podemos adicionar quantos novos blocos quisermos e organizá-los da maneira que nos for mais conveniente. Na tela abaixo observe que há uma coluna chamada ORGANIZAÇÃO , é lá que definimos se o próximo bloco virá ao lado ou abaixo do corrente.

Configuração dos blocos da aplicação

No lado esquerdo de cada bloco existem dois ícones, o primeiro tem a função de editar todas as informações relativas ao bloco e o segundo para exclusão do bloco.

• Organização e Mudança de posição dos Blocos
  • Veja abaixo como alterar a ordem de exibição dos Blocos de uma Página.

  Clique e araste o bloco que deseja alterar para a sua nova posição.

  Configuração de exibição dos blocos da aplicação

  • Veja agora como remover um bloco da exibição

  Clique sobre o bloco desejado e arraste-o até o item “Blocos não exibidos”. Desta forma, assim como você pode remover um bloco arrastando-o até o item “Blocos não exibidos”, para mudar um bloco de página é só arrasta-lo até a página desejada. Veja as imagens abaixo.

  Configuração de exibição dos blocos da aplicação

  Configuração de exibição dos blocos da aplicação

  • Bloco
    • Nome : Nome do Bloco.
    • Label : Título do bloco que será exibido na aplicação.
  • Titulo
    • Exibir : Flag que controla se o título do bloco será exibido.
  • Label
    • Exibir : Flag que controla se o label dos campos dentro do bloco devem ser exibidos.
    • Posição : Opções de exibição do label :
      • Acima : o label será exibido acima do campo.
      • Ao Lado : o label será exibido ao lado do campo.
      • Abaixo : o label será exibido abaixo do campo.
  • Campos
    • Colunas : Quantidade de colunas a serem exibidas lado a lado dentro do bloco.
    • Posição : De que forma os campos serão exibidos dentro do bloco :
      • Abaixo : Os campos serão exibidos um abaixo do outro respeitando a quantidade de colunas.
      • Ao lado : Os campos serão exibidos ao lado do outro respeitando a quantidade de colunas.
      • Corrido : Os campos serão exibidos lado a lado sem conter tabulação.
  • Organização
    • Próximo : Forma como os blocos ficarão organizados dentro da página:
      • Abaixo : Indica que o próximo bloco será exibido abaixo.
      • Ao lado : Indica que o próximo bloco será exibido ao lado.
    • Largura : Especifica em pixels ou percentual a largura que o bloco deverá ocupar, caso a informação seja em percentual especificar (%).
    • Colapse : Habilta opção de fechar (colapse) o bloco.

• Inclusção de blocos

  Para incluir novos blocos em uma Aplicação, basta clicar no botão . Em seguida, será apresentada a seguinte interface para definição do nome e label do bloco. No fim clique no botão Criar.

  Interface de criação dos blocos da aplicação

  • Nome : Nome do bloco.
  • Label : Texto que será que mostrado no bloco da aplicação.

Edição dos blocos

Para editar um bloco basta clicar no ícone , que fica do lado esquerdo do bloco. Em seguida, será apresentada a seguinte interface para definição dos parâmentros do bloco. No fim clique no botão Salvar.

• Nome : Nome do bloco.
• NTítulo : Exibe o título do bloco.
• Exibir Título : Esta opção, quando ativada, permite exibir o título do bloco.
• Fonte do Título : Nome da fonte aplicada no título do bloco.
• Tamanho da Fonte : Tamanho da fonte aplicada ao título do bloco.
• Cor da Fonte : Cor da fonte do título do bloco.
• Cor do Fundo : Cor de fundo da linha do título do bloco.
• Figura de Fundo : Figura de fundo da linha do título do bloco.
• Altura do Título : Altura em pixels da linha do título do bloco.
• Alinhamento Horizontal : Alinhamento horizontal do título do bloco (Esquerda, Centro e Direita).
• Alinhamento Vertical : Alinhamento vertical do título do bloco(Topo, Meio e Baixo).
• Exibir Label : Exibir os labels dos campos do bloco.
• Colunas : Quantidade de colunas de campos no bloco.
• Largura das Colunas : Forma de cálculo das colunas do bloco.
• Cor do Label : Cor para exibir o label dos campos.
• Organização dos Campos : Forma de organização dos campos no bloco.
• Posição do Label : Define o Posicionamento do label dos campos em relação aos dados.
  • Ao Lado - Valor padrão das aplicações, posicionando a label no lado direito do input
  • Acima - Posiciona a label acima do input
  • Abaixo - Posiciona a label abaixo do input
• Próximo Bloco : Posicionamento do próximo bloco em relação ao atual.
• Cor da Borda : Cor da borda do bloco.
• Largura da Borda : Largura da borda do bloco.
• Largura do Bloco : Largura do bloco (width).
• Altura do Bloco : Altura do bloco (height).
• CellSpacing : Espaçamento das células do bloco.
• Collapse : Habilta opção de fechar (colapse) o bloco.

Visualização

Nesta interface, podemos definir o esquema de visualização de uma aplicação em específico, isto porque o Scriptcase utiliza a definição de Valores Padrões por Projeto, que além do esquema de visualização, permite a definição de valores a outros atributos a nível de Projeto.

Configuração de visualização de temas da aplicação

• Configuração de visualização
  • Modelo para o Cabeçalho : Permite a escolha do modelo para compor o cabeçalho da aplicação.
  • Modelo para o Rodapé : Permite a escolha do modelo para compor o rodapé da aplicação.
  • Botão : Permite a escolha do modelo dos botões da aplicação.
  • Temas : Escolhendo um dos temas existentes, será carregado o modo visual (cores,fontes, etc) que irá compor a aplicação.

Cabeçalho

Neste bloco é feita a definição dos conteudos variáveis que farão parte do cabeçalho.

Configuração do cabeçalho da aplicação

Esta tela pode variar dependendo do formato de cabeçalho escolhido dentro da pasta Visualização.

• Exibir Cabeçalho : Esta flag determina se o cabeçalho será exibido.
• Título da Consulta : Permite informar um título para ser exibido na aplicação.
• Variáveis de Cabeçalho : Os campos variáveis podem ser preenchidos com qualquer um dos tipos exibidos no Combobox. Dependendo do tipo, será necessário associar um conteúdo ao mesmo. Abaixo descrevemos os tipos existentes:
  • Campo : Quando se escolhe a opção do tipo “Campo”, abrirá um Combobox ao lado com os campos que fazem parte do “Select”. Escolhendo um desses campos, estará associando o valor do campo para exibição no cabeçalho.
  • Título : Esta opção quando selecionada exibirá no cabeçalho o valor preenchido no “Título do Filtro”.
  • Data : Quando é selecionado o tipo “Data”, será exibido no cabeçalho da controle a data do sistema no formato dd/mm/aaaa. Existem diversos formatos de exibição utilizando a data e a hora do servidor. O formato poderá ser informado no campo texto que aparece ao lado. Para ter acesso aos formatos existentes clique em e aparecerá uma tela explicativa.
  • Imagem : Quando selecionado o campo tipo imagem, aparece um campo para o preenchimento do nome da imagem existente no servidor. Para localizar as imagens existentes e selecionar uma, clique no ícone “Escolher imagem” e para disponibilizar novas imagens no servidor clique em “Fazer upload de uma imagem” .
  • Valor : Quando selecionado o tipo “Valor”, o conteúdo preenchido no campo texto que aparece ao lado será exibido no cabeçalho, pode ser informado textos e “Variáveis globais”. Ex: “Nome do Funcionário: [v_nome]”.

Rodapé

Configuração do rodapé da aplicação

Esta tela pode variar dependendo do formato de Rodapé escolhido dentro da pasta Visualização.

• Exibir Rodapé : Esta flag determina se o Rodapé será exibido na aplicação.
• Variáveis de Rodapé : Os campos variáveis podem ser preenchidos com qualquer um dos tipos exibidos no Combobox, dependendo do tipo será necessário associar um conteúdo ao mesmo. Abaixo descrevemos os tipos existentes:
  • Campo : Quando se escolhe a opção do tipo “Campo”, abrirá um Combobox ao lado com os campos que fazem parte do “Select”. Escolhendo um desses campos, estará associando o valor do campo para exibição no Rodapé.
  • Data : Quando é selecionado o tipo “Data”, será exibido no Rodapé da aplicação a data do sistema no formato dd/mm/aaaa. Existem diversos formatos de exibição utilizando a data e a hora do servidor. O formato poderá ser informado no campo texto que aparece ao lado. Para ter acesso aos formatos existentes clique em e aparecerá uma tela explicativa.
  • Imagem : Quando selecionado o campo tipo imagem, aparece um campo para o preenchimento do nome da imagem existente no servidor. Para localizar as imagens existentes e selecionar uma, clique no ícone “Escolher imagem” e para disponibilizar novas imagens no servidor clique em “Fazer upload de uma imagem”.
  • Valor : Quando selecionado o tipo “Valor”, o conteúdo preenchido no campo texto que aparece ao lado será exibido no Rodapé. Pode ser informado textos e “Variáveis globais”. Ex: “Nome do Funcionário: [v_nome]”.