Histórico e motivação


Anteriormente, existia apenas um único arquivo para exibição visual do PDV, que era extremamente limitado, com posições bem delimitadas. Esse arquivo era um “.tela”, baseado na antiga exibição AWT. Porém, mesmo no modelo antigo de UI do PDV, havia uma customização por cliente, porém não era intuitiva e de fácil manutenção mesmo pelo time técnico.

Quando a solução Javafx passou a ser uma realidade, além da modernização visual e tecnológica, a possibilidade de customização do layout por conceito de CSS (JavaFx Css). Por basear-se em um modelo de mercado, a manutenção, evolução e personalização tornou-se mais prática, produtiva e independente de P&D. E isso facilitou a questão da customização. 

Na questão de customização, existe o conceito de bandeiras de cliente. Conceito de bandeira originou-se de um cliente possui diferentes marcas e, por essa razão, ter a necessidade de ter um layout diferente para cada grupo. Anteriormente isso significava um esforço adicional. Com a customização e o conceito de bandeiras, isso fica um processo bem menos oneroso.  No StoreX Standard a bandeira dele se chama Linx, por default.


Estrutura


Quando você iniciará a customização de um novo cliente, você precisa configurar a “interface” gráfica do PDV para o seu cliente, com as cores desejadas por ele.

Para fazer isso, você precisa criar em seu projeto a pasta com a bandeira do cliente. Nela estarão configuradas as imagens e cores da bandeira do cliente.

No PDV, estes arquivos ficam na pasta /p2k/bin/dominios/<nome-da-bandeira>.

Pasta de domínios




Figura 1 — Exemplos de bandeiras na pasta domínios.




No exemplo temos temos um exemplo de como ficaria uma bandeira- na pasta domínios. No exemplo, mostramos a bandeira "linx", que é a padrão. Porém, podemos ter uma ou mais bandeiras, a depender do cliente.



Figura 2 — Exemplo de bandeira

Dentro de uma pasta de bandeira, temos sempre a pasta telas. Ela contém:

  • Todos os arquivos de imagens presentes no pdv, em formato png.
  • Os arquivos EstiloPDVTouch.css, MapeamentoTeclado.xml e o layout_teclado_touch.xml, que são os arquivos principais para customização do pdv, que são abordados na seção de Passo a Passo.
  • Podem conter pastas, como no exemplo a pasta "wallets", que são arquivos especificos de imagens com outros ícones que dependerá do cliente.



ícones




Figura 3 — Exemplos de ícones na pasta telas.



 

As imagens são encontradas como mostra o exemplo. No caso da bandeira default, que é a Linx, as imagens são encontrados na cor roxo. Cada imagem tem um nome e ele é usado para fazer as referências a imagens na tela.

  • Sem rótulos