INSTRUES DE USO DO HTML/CSS FORNECIDO PELA MJV

MAPFRE
CONNECT
Manual de integrao
INSTRUES DE USO DO HTML/CSS FORNECIDO PELA MJV

Sumrio
Grid System _____________________________________ 3
Fluxo de navegao _______________________________ 6
Elementos Multi-item ______________________________ 8
Modais _________________________________________ 9
Outros Elementos ________________________________ 10
INSTRUES DE USO DO HTML/CSS FORNECIDO PELA MJV

Grid System
O HTML e as CSS foram pensados contemplando um sistema de colunas fixas para o alinhamento dos
elementos na tela, sendo assim, foram criadas classes de g de grid, com o valor de colunas que ocupa o
elemento.

Classes G1 G9

Sendo assim, possvel colocar 9 inputs de tamanho G1, ou quantos estiverem na tela, sempre totalizando
no mximo 9. Estas classes das CSS, devem ser colocadas preferencialmente no elemento que envolve
(pai) os elementos label e input.

Essas classes de g1 g9, podem ser utilizadas juntamente com a class field para dar a aparncia correta
dos campos de texto. J contemplando s diferentes renderizaes de HTML, estas classes podem ser
colocadas em qualquer elemento HTML que envolva os inputs, dando a eles as dimenses corretas. Cada
uma destas colunas, em cinza escuro possui 60px de largura.
INSTRUES DE USO DO HTML/CSS FORNECIDO PELA MJV

Todas as colunas tem uma rea de gutter, que so os espaos entre-colunas para dar respiro. Essa rea
nas CSS so feitas atravs de margens de 10px esquerda e direita de cada coluna. Estes 20px (10px de
cada lado) esto presentes no tamanho de cada classe de grid, ou seja, a classe g1, tem o tamanho padro
de coluna, de 60px, j a g2 so 2x g1 + 10px + 10px, totalizando 140px de largura, e assim por diante.

Classes Alpha e Omega

Em alguns casos os elementos devem ser posicionados de forma a no contar com as margens, ou seja,
sua largura total no deve exceder 10px direita ou esquerda. Por isso, foram criadas mais 2 classes que
removem a margem destes elementos. Seguindo a ordem alfabtica, a classe Alpha, remove margem
esquerda, ou seja, antes do elemento, e a classe Omega, remove a classe direita, ou seja, depois do
elemento, conforme a ilustrao.

Na rea indicada em vermelho abaixo, o elemento anterior com a classe Omega no possui margem sua
INSTRUES DE USO DO HTML/CSS FORNECIDO PELA MJV

direita, por quanto o elemento direita, com a classe Alpha, no possui margem direita, constanto apenas
a classe do elemento G1possui as duas margens.
INSTRUES DE USO DO HTML/CSS FORNECIDO PELA MJV

Fluxo de navegao
No fluxo de navegao, foram utilizados elementos de lista para agrupar cada passo, o nmero
correspondente a ele e a etiqueta correspondente. Todo o elemento envolvido por uma div de classe
wizard que, por padro, prev o fluxo de 5 etapas. Logo abaixo deste div h uma lista ul, com li's para cada
passo. Dentro de cada lista h 1 link para o passo correspondente, onde devem ser inseridas as URLs das
pginas do JAVA. Em seguida h um elemento de ttulo, h2, com a etiqueta que deve aparecer sobre a
bolinha do passo e posteriormente a este elemento, ainda dentro do link, um span de classe step que
possui o numeral relacionado etapa. H um espao abaixo do elemento de respiro e que j prev a
insero dos botes de item no caso do multi-item. Para fins de garantir que este sistema ir funcionar
cross-browser, adiciona-se uma classe extra ao ltimo elemento do fluxo que o last-child, este elemento
no precisa necessariamente estar no cdigo HTML, pois ser injetado pelo Javascript aps a renderizao
da pgina.

Alterando o nmero de passos do fluxo de navegao

Como dito anteriormente, o fluxo padro o de 5 elementos, sendo assim, para us-lo no fluxo de proposta
que possui apenas 4, deve-se adicionar apenas a classe four-steps no mesmo elemento que contm a
classe wizard..

Alterando o status de um passo

Para contemplar as variaes previstas no wireframe de funcionalidades, foram criadas algumas classes
que devem ser colocadas no elemento de lista referente ao passo que se deseja alterar. Nos HTMLs
entregues j h exemplos de diferentes formas de estilzar, mas abaixo segue como fazer cada um deles.

Primeiramente, vejamos o fluxo comum, sem nenhuma classe inserida em nenhum dos elementos. Note
que este estado nunca ocorrer, pois ao entrar no sistema ele deve marcar que o usurio est no primeiro
passo, este apenas para fins de explicao.

Ao entrar no sistema, presume-se que o usurio esteja no passo 1, para tal, a primeira ocorrncia de fluxo
de navegao que ele ver, com o item 1 marcado como ativo. Para isso, basta adicionar a classe active
ao primeiro passo e o efeito gerado ser o seguinte:

Ao se setar a classe no elemento de lista, ele automaticamente j preenche o fundo da bolinha, altera a cor
do numeral e torna negrito o texto da etiqueta.
INSTRUES DE USO DO HTML/CSS FORNECIDO PELA MJV

Ao preencher os dados corretamente, o usurio poder seguir para o passo 2, neste caso veculo, e o
sistema deve indicar na mudana de tela que ele est no passo 2, e que o passo 1 fora preenchido e
validado com sucesso. Sendo assim, adicione a classe active ao passo 2, e a classe done ao passo que
fora concludo, neste caso, o passo 1.

Caso na tentativa de validao, feita ao clicar no boto prosseguir, o usurio no tenha preenchido um dos
campos ou tenha digitado alguma informao invlida, o mesmo no pode prosseguir para o segundo
passo, e a primeira bolinha deve conter a marcao, error - indicando que houve erro no preenchimento.
Lembrando que no permitido prosseguir de um passo com erro na validao.

O usurio, no pode avanar passos, ele deve seguir o fluxo passando e completando cada passo antes de
seguir adiante para o prximo. Porm, ao preencher passos com sucesso, possvel retorna um passo
anterior, sendo assim, para ele saber em qual passo est deve-se colocar as 2 classes, active e done. Por
exemplo, o usurio avanou at
INSTRUES DE USO DO HTML/CSS FORNECIDO PELA MJV

Elementos Multi-item
Os passos que contm elementos multi-item so demarcados por um fundo de cor amarela de fundo. O
aparecimento da cor de fundo sob os passos j condicional e vai se ajustar sendo 5 ou 4 passos uma vez
que dentro do elemento wizard. Para que os passos multi-item sejam evidenciados, basta inserir uma div
sem contedo com a classe multibg. Ao colocar este elemento, dever aparecer o fundo, no fluxo de
cotao marcando os passos 2,3 e 4 e no fluxo de proposta marcando os passos 2 e 3.

Inserindo os itens do multi-item

Os itens do multi-item devem aparecer apenas nos passos indicados em amarelos, como mostrado
anteiormente, para fazer que exiba os itens. A pegada dos itens deve ser feita pelo Java, e os elementos
contados para a renderizao dos botes.

Para inserir os botes, primeiramente deve-se inserir uma div com classe multi-item, e dentro dela sero
inseridos os botes. Cada boto dever ter uma classe bt, pode se usar um elemento span para insero
deste contedo. Dentro de cada span, haver os elementos com o nmero do Item, dentro de um link, e no
fluxo de cotao o boto para excluir aquele item. Quando aquele item estiver completo, para dar a classe
de sucesso na sua insero, adicione ao span onde contm a classe bt, a classe with-success, separando-
os por um espao

Adicionalmente, para fazer com que o ele acione as informaes do item corretamente e exiba os dados,
este elemento deve ter um link internamente, cujo o href deve ser uma ncora para a div que envolver o
formulrio do item correspondente, ou seja, deve-se nomear a div referente ao item 1, de item1 e classe
widget e o href do link deve ser #item1. Alm disso, todas as divs que envolvem os dados do item, devem
estar envolvidas por uma class de id envolucro.
INSTRUES DE USO DO HTML/CSS FORNECIDO PELA MJV

Modais
Existe no prottipo uma pgina .html com o HTML de todos os modais. Nesta pgina, ops modais no
possuem o x ao topo, no se preocupe, ele, assim como a funcionalidade de exib-lo e ocult-lo ser feita
pelo javascript. muito importante que no seja utilizado o componente de pop-up do richfaces, pois este
adiciona um painel branco abaixo do modal, sem sobra, e no faz a insero do boto fechar.

Para copiar o bloco do modal, copie do incio da div de classe window, uma vez o HTML em sua pgina,
adicione a esta mesma div um ID de sua preferencia e style=display: none para ocult-la, ou utilize a
funo do richfaces se preferir.
INSTRUES DE USO DO HTML/CSS FORNECIDO PELA MJV

Outros elementos

Classe cf
Serve para forar que um elemento v para linha de baixo quando os elementos acima esto alinhados
direita ou a esquerda, e ao coloc-lo, ele entra do lado. Muito recorrente esse elemento aparace por
exemplo quando se deseja inserir um elemento dentro do grid, porm o mesmo somado aos seus anteriores
aparecia na linha de cima.

Classes mbottom
Servem para dar margem para baixo do elemento que a recebe, importante nos respiros previstos no
layout. Sua variaes so quanto a quantidade de px que estas do para baixo. So elas:

mbottom10, mbottom15, mbottom20, mbottom25, mbottom30, mbottom35, mbottom40, mbottom45,

mbottom50, mbottom60, mbottom70, mbottom80, mbottom90.

Classes right e left

As classes right e left alinham o elemento conforme diz a prpria classe, right direita e left esquerda.

Barra de progresso
A barra de progresso composta por uma div de classe bar e dentro ela possui um span de style inline com
o atributo width, que posto em percentual, o percentual da largura deste elemento mostra o
preenchimento da barra at onde se progrediu, e deve ser o mesmo valor do texto ao lado da barra.

Tooltip
O tooltip composto de 2 elementos, primeiramente um span com a classe help e nenhum contedo
dentro, este deve tambm conter um atributo 'data-reference' cujo valor deve ser igual ao de ID de uma div
que ter o contedo ser apresentado.

A div que conter o contedo deve ter o id conforme notado no 'data-referente' e as classes de grid para
dar sua largura e tambm a classe tooltip. Seu contedo preferencialmente deve ser composto de h3
para o ttulo e paragrafos 'p' para o contedo.