Personalizando o skin da sua aplicação

O nosso objetivo hoje é mostrar como é fácil personalizar a apresentação (skin) dos sistemas desenvolvidos em Maker. Estas aplicações possuem um layout padrão para que o desenvolvedor se preocupe apenas com as regras de negócio. Este layout muitas vezes não agrada a todos e muitos pensam que é “um bicho de 7 cabeças” poder alterá-lo. Vamos ver o quão simples é deixar a aplicação com o skin desejado.

O Webrun possui em sua estrutura de arquivos, as pastas Resource e também a Skins e dentro dela a pasta Default, como podemos visualizar na imagem logo abaixo.

Personalizando o skin da sua aplicação

No interior destas pastas, o Webrun armazena todas as imagens que são utilizadas para montar layout dos sistemas que serão executados por aquele contexto. Para que o desenvolvedor altere o layout dos seus sistemas ele tem a opção de alterar as imagens originais por imagens que for da sua escolha, lembrando que os nomes e a extensão devem continuar os mesmos das imagens originais.

Para alterar o skin da aplicação, devemos observar que na pasta Resource contém todas as imagens compõem a tela de seleção de sistemas e na pasta Skins contém todas as imagens que compõem a área principal da aplicação e dos formulários.

Para alterar qualquer imagem, sugerimos que utilize uma ferramenta que identifique qual o nome daquela imagem.

Como exemplo, vamos inicialmente alterar a imagem de fundo da aplicação. Localize a imagem “enterprise.jpg” e substitua pela imagem desejada (lembre-se de manter o mesmo nome), esta imagem está na pasta Resource.

Tela principal sem modificações:

Personalizando o skin da sua aplicação

Tela principal após alteração:

Personalizando o skin da sua aplicação

Este procedimento modifica apenas a tela inicial do sistema.

Após ter logado no sistema, como dito anteriormente as imagens serão somente da pasta Skins, e então podemos começar alterar as imagens desta pasta, por exemplo, a imagem de background agora será a da pasta Skins, então é só ir até a pasta encontra-la e altera-la, lembrando, mantendo o mesmo nome sempre. A imagem de fundo terá o nome background_(versão do Webrun utilizada).jpg nesse caso background_enterprise.jpg trocando as imagens ficará assim.

Tela principal sem alterações:

Personalizando o skin da sua aplicação

Tela principal após alterações:

Personalizando o skin da sua aplicação

E o mesmo pode ser feito nos formulários de trabalho do seu sistema, os ícones da barra de navegação, por exemplo, podem ser alterados por ícones escolhidos pelo desenvolvedor, pois, todos são imagens se encontram na pasta Skins. Como podemos visualizar nas figuras a seguir.

Formulários com imagens padrão:

Personalizando o skin da sua aplicação

Personalizando o skin da sua aplicação

Formulários com imagens personalizada:

Personalizando o skin da sua aplicação

Personalizando o skin da sua aplicação

Depois de alterar as imagens é só parar o serviço do Webrun, apagar a pasta work e a pasta cacheCompressed do seu contexto, limpar o cache dos navegadores e iniciar o serviço novamente. Pronto, seu sistema já terá uma cara diferente.

Porém se houver a necessidade de republicar o seu contexto, você perderá todas as alterações realizadas, a não ser que copie a pasta Skins para outro local, republique o seu contexto e substitua a pasta atual pela copiada anteriormente. Só que este é um procedimento cansativo e repetitivo.

Um macete bem interessante é utilizar o recurso “Maker.Commons”, essa pasta foi desenvolvida para servir como um pasta espelho do seu contexto na hora da execução do sistema. O Servidor ao invés de procurar os arquivos no contexto, ele primeiro verifica se não existe na pasta Maker.Commons, lembrando que se o arquivo for para substituir algum arquivo do seu contexto deve ter a mesma assinatura, nome.extensão ex: background_enterprise.jpg
A grande vantagem de usar a pasta Maker.Commons é que se por um acaso o desenvolvedor trocar seu Webrun, por exemplo para uma versão mais nova, ou se tiver que republicar seu contexto não perderá seus arquivos modificados, é só manter seu contexto com o mesmo nome. Para maiores informações de como utilizar a pasta Maker.Commons acesse o manual online da softwell, disponível em http://suporte.softwell.com.br/maker/manual2_7/pt/dicas_e_truques/webrun/utilizacao_da_pasta_maker_commons.htm

E para aqueles que realmente querem desenvolver aplicações com design diferenciado, com o Maker e um pouco de criatividade pode-se desenvolver aplicações bastante personalizadas, definir formulário principal, importar bibliotecas de terceiros, Applets e muito mais, pronto agora é só usar a criatividade e correr para o abraço.

Personalizando o skin da sua aplicação

Aplicação criada com o Maker

Comentar

Você precisa estar logado para comentar.