JSF com Bootstrap e AJAX

Prof. Andrey Masiero

29 de setembro de 2016
Agenda

1 JSF e Bootstrap

2 AJAX

3 Próxima Aula
JSF e Bootstrap

Até agora o sistema está com essa aparência . . .

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 1 / 25

JSF e Bootstrap
Mas queremos essa aparência . . .

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 2 / 25

JSF e Bootstrap

Para isso utilizaremos CSS através do framework Bootstrap

(http://getbootstrap.com/).

Primeiro passo, é fazer o download do bootstrap e colocar dentro de uma

pasta resources do seu projeto.

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 3 / 25

JSF e Bootstrap

Para fazermos o link no código JSF utilizamos a tag h:outputStylesheet.

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 4 / 25

JSF e Bootstrap

Vamos envolver todo o corpo do código com uma div atribuindo a classe
container.

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 5 / 25

JSF e Bootstrap
Vejam o resultado após esses dois primeiros passos.

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 6 / 25

JSF e Bootstrap

Cuidaremos agora do cabeçalho do sistema.

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 7 / 25

JSF e Bootstrap
Vejam o resultado.

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 8 / 25

JSF e Bootstrap

Que tal melhoramos essa tabela?

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 9 / 25

JSF e Bootstrap
Vejam o resultado.

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 10 / 25

JSF e Bootstrap

Agora o título da funcionalidade.

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 11 / 25

JSF e Bootstrap
Vejam o resultado.

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 12 / 25

JSF e Bootstrap

Por último arrumamos o botão / link.

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 13 / 25

JSF e Bootstrap
Chegamos ao resultado desejado =D.

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 14 / 25

JSF e Bootstrap
Vamos fazer agora com a tela de cadastro . . . Iremos pular os elementos
repetidos

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 15 / 25

JSF e Bootstrap

Primeiro substituiremos o fieldset e o legend por algumas divs formatadas.

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 16 / 25

JSF e Bootstrap
O resultado é . . .

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 17 / 25

JSF e Bootstrap

Agora o componente de mensagens.

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 18 / 25

JSF e Bootstrap
O resultado é . . .

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 19 / 25

JSF e Bootstrap

Por fim os componentes do formulário.

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 20 / 25

JSF e Bootstrap
Esse é o resultado final.

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 21 / 25

AJAX
Para demonstração, foi criado a lista de produtos na parte de baixo do
cadastro.

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 22 / 25

AJAX

Existem várias maneiras de trabalhar com o AJAX e JSF. Aqui é

apresentado duas: Submit e Eventos.

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 23 / 25

AJAX

Demonstração no NetBeans

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 24 / 25

Próxima Aula

Continuando com JSF (mas só daqui a 3 semanas =D)

Na próxima aula. . .

Prof. Andrey Masiero Aula 07 29 de setembro de 2016 25 / 25