Layout

Configuração dos Blocos

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 Configuração dos blocos da aplicação 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

 * __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 Configuração dos blocos da aplicação , 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.

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

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 : Posicionamento do label dos campos em relação aos dados.
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.

Edição dos Blocos

Blocos

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

Configuração dos blocos da aplicação

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

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

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

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 : Posicionamento do label dos campos em relação aos dados.
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.

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.

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]”.

Edição do layer

Nome : Aqui você altera o nome do seu layer.
Tamanho : Usando esta opção você pode alterar manualmente o tamanho do layer, usando porcentagem. Você também pode definir esse valor em pixels, no entanto, para fazer isso você precisará alterar a opção “Menu Width” dentro do menu “Configurações”, este valor vem em porcentagem como padrão de Scriptcase.
Exibir : Ao clicar nessa opção você altera a exibição do layer, se deseja exibir ou não.
Alinhamento : Aqui você altera o alinhamento de todo conteúdo do layer.
Tipo : Nessa opção você seleciona o tipo de dado que será exibido em cada linha do layer.
- Título : Será exibido o título da aplicação, de acordo com o valor definido no “Título da Aplicação” dentro do menu “Cabeçalho e Rodapé”.
- Data : Aqui você informa um formato de exibição de datas. Exemplo: d-m-Y
- Imagem : Você escolhe uma imagem do gerenciador de imagem.
- Valor : Você informa qualquer texto ou pode informar uma variável global. Exemplo: [var]
- Biblioteca : Usando esta opção você seleciona uma Biblioteca Externa do Scriptcase. Você pode importar ou criar bibliotecas usando a opção “Ferramentas » Bibliotecas Externas” no menu principal.
- Método : Você seleciona um método criado em sua aplicação.
Fonte : Nessa opção você seleciona uma fonte disponível na lista. Altera o tamanho da fonte e coloca o texto como negrito e/ou itálico.
Cor do fundo : Aqui você altera a cor de fundo de cada linha de conteúdo do layer.
Cor da fonte : Nessa opção você pode alterar a cor da fonte que será exibida no layer.
Excluir : Ao clicar nessa opção você exclui uma linha do layer.
Adicionar : Você adiciona mais uma linha ao layer.
Fechar : Você fecha a tela de edição do layer.
Salvar : Você salvar todas as alterações feitas no layer.