Bases de dados de projectos: embeleze os seus formulários com folhas de estilo

Novembro 8, 2019 3 Tempo de leitura

As estruturas binárias 4D clássicas permitem-lhe definir folhas de estilo para especificar a fonte, o tamanho da fonte e o estilo de texto a utilizar nos seus formulários tanto para as plataformas MacOS como Windows. As bases de dados de projectos permitem-lhe ir ainda mais longe, permitindo-lhe definir as propriedades de um botão de 4 estados ou especificar a cor e borda de todos os objectos de linha ou mesmo definir a altura do cabeçalho de todas as caixas de listagem de uma aplicação! Inspirado pela gramática e sintaxe do CSS, 4D adaptou-o para responder às necessidades específicas dos formulários das bases de dados 4D de projectos. Graças às folhas de estilo, é possível configurar todas as propriedades para criar formulários verdadeiramente apelativos do ponto de vista visual. Este post no blogue mostra-lhe como!

Exemplo de base de dados de folhas de estilo

Plataforma

Nas bases de dados de projectos, é possível definir folhas de estilo individuais para ambas as plataformas (Windows ou macOS), bem como uma folha de estilo “global”.

Porque quer folhas de estilo diferentes por plataforma? Porque muitas vezes é utilizado em macOS um tamanho de letra / fonte diferente do tamanho de letra / fonte utilizado em Windows. Por outro lado, a cor do texto é muitas vezes idêntica para ambos.

Agora, é possível definir estilos comuns no ficheiro “stylesheets.css” e estilos específicos da plataforma nos seus próprios ficheiros: “stylesheets_mac.css” e “stylesheets_windows.css”.

Propriedades

Uma das maiores revoluções nas bases de dados de projectos é que todas as propriedades suportadas por objectos de forma podem ser utilizadas em folhas de estilo.

Por exemplo, pode-se criar uma classe “buttonAction” para criar botões de 4 estados com a aparência de “barra de ferramentas”, texto cinzento, e não focalizável:

.buttonAction {
  iconFrames: 4;
  style: toolbar;
  stroke: grey;
  focusable: false;
}

Isto facilita o desenho de formulários para a sua aplicação, mantendo o mesmo desenho gráfico.

Selectores

Outra grande mudança é que se podem criar folhas de estilo por classe, por tipo de objecto, nome do objecto, ou atributos.

Selector de tipo de objecto

Com o selector de tipo de objecto (equivalente ao selector de elementos CSS), é possível definir propriedades comuns aplicáveis a todos os objectos da base de dados. Por exemplo, todas as caixas da lista devem ter um cabeçalho de 2 linhas, linhas vazias não devem ser exibidas, e as cores de fundo das linhas devem ser gainsboro e whitesmoke:

listbox {
  headerHeight: 2em;
  hideExtraBlankRows: true;
  fill: gainsboro;
  alternateFill: whitesmoke;
}

Graças a este selector, pode definir a sua própria aparência para os objectos da sua forma.

Selector de atributo

Com o selector de atributos, é possível definir uma folha de estilo por um valor de propriedade.

Por exemplo, nos formulários de entrada/saída de dados, tenho botões para adicionar, editar, ou apagar registos. Todos estes botões utilizam o mesmo ícone, título, e dicas de ajuda.

Porque não criar uma folha de estilo para botões de acção e designar um valor específico para a propriedade acção? Por exemplo, se a propriedade da acção estiver definida para “editSubrecord”:

.buttonAction[action=editSubrecord] {
  icon: url("/RESOURCES/Images/Buttons/edit.png");
  tooltip: ":xliff:button_tip_EditRecord";
  text: ":xliff:button_EditRecord" !important;
}