Genexus - Grid Design

O Design aplicado ao Genexus

Quando trabalhamos em um projeto, a parte gráfica deste, seu design, imagens e estilos, é sempre a última tarefa a ser realizada. Isso, quando não aplicamos o design default disponível a partir da ferramenta Genexus.

Para nós analistas, o design pode parecer algo supérfluo, que não alterará em nada as aplicações. Porém para muitos usuários é algo essencial, a aplicação pode estar perfeita porém se o usuário não se interessar pelo seu design, a sua expectativa com relação ao sistema não terá sido alcançada.

Temos de ser racionais, e considerar que todas estas visões estão corretas. Não podemos transformar a parte gráfica das aplicações no principal processo de desenvolvimento, mas também, devemos considerar que a parte estética pode aumentar em muito a interação de nossas aplicação junto ao usuário final.

Hoje irei tratar de uma configuração simples, como transformar o design padrão dos grids em um grid igual ao da figura do topo do post, muito semelhante à biblioteca gxui. Acredito que a partir deste post podemos avançar para outros mais avançados, como, utilizar consideravelmente a biblioteca jquery em nossa MasterPage.

Configuração do Grid a partir do Tema

Primeiramente, iremos abrir o nosso tema padrão do projeto, a partir da pasta "Customization" - "Themes" (figura 2). Após aberto, precisamos criar uma nova classe do objeto "Grid". Para isso, clicamos com o botão direito sobre o objeto "Grid" e clicamos em "Add Class" (figura 3).

figura 2 - Folder View

figura 3 - Adicionar Classe

OK, agora vamos começar a configurar suas propriedades gráficas. Abaixo irei listar cada propriedade, seu valor de configuração, e uma descrição explicativa:

Propriedade	Valor	Descrição
Name	GridBlog	(nome da classe)
Background Repeat	repeat-x	(determina se a imagem de fundo irá se repetir horizontalmente, verticalmente)
Margin	1pt 1pt 1pt 1pt	(margem externa: acima, a direita, abaixo, a esquerda)
Padding	1pt 5pt 1pt 5pt	(margem interna: acima, a direita, abaixo, a esquerda)
Background Color	Transparent	(cor de fundo do grid)
Background Imagem	GridBackground	(imagem de fundo do grid, disponível abaixo do post)
Border Color	#1a67b8 #1a67b8 #1a67b8 #1a67b8	(cores das bordas: acima, a direita, abaixo, a esquerda)
Border Style	solid	(estilo da borda, linha solida)
Border Width	1px	(largura da borda)
Line Back Color	transparent	(cor das linhas impares)
Line Back Color Even	Gainsboro	(cor das linhas pares)
Line Font Style	normal	(estilo de fonte normal)
Line Font Size	11px	(tamanho da fonte das linhas)
Line Font Family	Arial	(fonte das linhas)
Title Back Color	transparent	(cor de fundo dos títulos das colunas)
Title Font Style	normal	(estilo de fonte normal)
Title Font Weight	bold	(peso da fonte dos títulos das colunas)
Title Font Size	12px	(tamanho da fonte dos títulos das colunas)
Title Font Family	Arial	(fonte dos títulos das colunas)
Title Fore Color	Black	(cor dos títulos das colunas)
Custom CSS Properties	padding-top:2pt;	(margem interna aplicada ao topo)

Imagens Utilizadas

Neste exemplo estamos utilizando apenas 4 imagens. Imagens de ação (alteração, exclusão e visualização) e a principal e referenciada na propriedade da classe, a imagem de fundo do grid (degrade do topo). São elas:

alteração

Exclusão

Visualização

Imagem GridBackground

Estas imagens são de escolha do desenvolvedor, indico um ótimo site de ícones. Muito bom para encontrar as imagens adequadas para a sua aplicação, o site é http://findicons.com/.

Definição de classe

Por fim, é necessário definir esta classe criada em nossos grids apresentados. Para isto, no objeto trabalhado (transação ou web panel), clique sobre o grid de modo a apresentar as suas propriedades à direita. No item "Appearance - Class", selecione o nome da classe criada, GridBlog, conforme a figura abaixo: