EX05 - Desenvolvimento Web Full MVC_SN

Prévia do material em texto

Exercício por
Temas
 avalie sua aprendizagem
As tabelas já foram muito utilizadas para organizar o conteúdo da página HTML, mas a W3C desaconselha a prática, por
causa da incompatibilidade de alguns navegadores, levando a outro tipo de organização, baseado em divs, segundo o
padrão tableless. No entanto, as tabelas ainda são utilizadas para exibição de dados tabulares. Qual tag de�ne uma área
de títulos na tabela?
No conjunto de componentes do Thymeleaf, temos uma classe denominada WebContext, que permite o encapsulamento
de chamadas HTTP, com base na requisição, na resposta e no próprio contexto do Servlet. Após ser instanciado, o
componente permite obter os valores que foram enviados na requisição, efetuar os procedimentos necessários, e de�nir
valores que serão utilizados no template, tornando-o uma ferramenta prática para a de�nição de controladores genéricos.
Qual método de WebContext permite enviar um valor para o template?
DESENVOLVIMENTO WEB FULL MVC
Lupa  
 
Aluno: ANDRO GONÇALVES F RA Matr.: 
Disc.: DESENVOLVIMENTO WEB   EAD (G) / EX
Prezado (a) Aluno(a),
Você fará agora seu EXERCÍCIO! Lembre-se que este exercício é opcional, mas não valerá ponto para sua avaliação. O mesmo
será composto de questões de múltipla escolha.
Após responde cada questão, você terá acesso ao gabarito comentado e/ou à explicação da mesma. Aproveite para se
familiarizar com este modelo de questões que será usado na sua AV e AVS.
03593 - CAMADA DE VISÃO
 
1.
tfoot
thead
tbody
table
tr
Explicação:
De forma geral, uma tabela pode ser criada simplesmente com o uso de table, para de�nir a tabela em si, tr, para cada
linha, e td, para cada célula da linha. No entanto, podem ser de�nidas três áreas, de grande utilidade para o
reconhecimento a partir de frameworks ou na aplicação de estilos. As áreas citadas são: thead, indicando o cabeçalho,
onde são colocadas as células com os títulos, tbody, com o conteúdo, ou seja, linhas de valores associados aos títulos, e
tfoot, com o rodapé, onde é comum a presença de sumarizações dos valores apresentados.  
 
2.
getAttribute
javascript:voltar();
javascript:voltar();
javascript:voltar();
javascript:voltar();
javascript:diminui();
javascript:diminui();
javascript:aumenta();
javascript:aumenta();
Ao utilizar Bootstrap, temos algumas classes para a apresentação de alertas, alinhados ao padrão de exibição da
plataforma, que podem expressar mensagens informativas, avisos sobre erros ou ações perigosas, e muitos outros tipos
de informação. Supondo que queremos informar o �nal bem-sucedido de um download, qual seria a classe mais
adequada?
Podemos utilizar formatações CSS de diferentes formas, como escrita direta no atributo da tag, de forma inline, em um
trecho delimitado pela tag style, ou em um arquivo externo. O uso de arquivo externo traz os maiores benefícios, pois traz
uma separação física entre a estrutura e a formatação do documento, além de promover o reuso, permitindo até mesmo a
de�nição de temas para o site. Qual tag deve ser utilizada na página HTML para importar as formatações de�nidas em um
arquivo CSS?
getParameter
setAttribute
setVariable
setLocale
Explicação:
Após instanciar um componente do tipo WebContext, temos acesso ao contexto de execução, requisição e resposta,
além de de�nir valores (variáveis) que serão acessadas ao nível do template HTML. Para que o processo execute
corretamente, o método setVariable, de WebContext, de�ne o valor que será recuperado no template, com o uso de
cifrão ($) antes do nome da variável, ocorrendo a substituição pelo valor fornecido no processamento por um objeto
do tipo TemplateEngine.
 
3.
alert alert-light
alert alert-warning
alert alert-success
alert alert-danger
alert alert-dark
Explicação:
A melhor opção seria o subtipo alert-success, pois indica sucesso, adotando uma coloração esverdeada por padrão. O
uso de alert-warning ou alert-danger deve ocorrer quando temos uma situação de erro ou ação perigosa, segundo uma
gradação de impacto. Quanto aos subtipos alert-light e alert-dark, são apenas informações de uso geral, sem
conotação de sucesso ou falha, apenas com a variação do fundo utilizado.  
 
4.
a (âncora)
object
link
script
meta
Explicação:
Para importar uma folha de estilo, utilizamos a tag link, de�nindo o tipo de relação como stylesheet, no atributo rel, e o
nome do arquivo no atributo href. Por exemplo, podemos ter algo como < link rel="stylesheet" "MeuArquivo.css" >.
Quanto às demais tags, script de�ne uma área para escrita ou importação de JavaScript, âncoras são utilizadas para
de�nir o salto para algum endereço, meta permite especi�car os metadados da página, e object serve para importar
arquivos de mídia, normalmente executados por plugins.
 
5.
O uso de Bootstrap facilita muitas das tarefas comuns na construção de interfaces grá�cas, além de incluir recursos para
garantia da responsividade. Entre os diversos ferramentais que são disponibilizados, temos a criação de diálogos modais
com o uso de classes CSS e um pequeno conjunto de divs. Nesse contexto, qual a função do atributo data-bs-dismiss com
valor modal?    
Para utilizar o Bootstrap em um projeto Spring Boot, podemos acessar as bibliotecas via link para os repositórios na Web,
ou adicionar uma dependência para baixar os arquivos Java Script e CSS necessários, transformando em chamadas locais
para o servidor, o que pode diminuir de forma considerável o tempo necessário para a abertura das páginas. Qual
componente deve ser incluído para que os arquivos sejam baixados?
As tags para tipogra�a, utilizadas nas versões antigas do HTML, são consideradas obsoletas atualmente, sendo toda a
formatação delegada para folhas de estilo em cascata (CSS), o que foi de�nido como uma boa prática pela W3C. Supondo
que seja necessário formatar determinado trecho genérico único, identi�cado como "aviso", com fonte amarela, fundo
vermelho, itálico e sublinhado, qual seria a expressão utilizada em uma tag style?
Não tem efeito sobre o comportamento do diálogo, e serve apenas para indicar a presença dele nas ferramentas de
busca.
Desativa o acesso à fonte de dados padrão do formulário.
Desativa todos os botões que foram de�nidos no trecho do diálogo modal.
Quando aplicado a um botão, fecha o diálogo modal como resposta ao clique.
Deve ser aplicado à div contendo o título, para que o valor não seja substituído no template.
Explicação:
A construção de um diálogo modal é iniciada com uma div da classe modal, com atributo role apresentando valor
dialog, onde o primeiro elemento interno deve ser uma div da classe modal-dialog e dentro dela outra div, esta última
da classe modal-content. No interior são de�nidas três divisões: modal-header, para o título, modal-body, para alguma
informação ou formulário, e modal-footer, normalmente com botões de ação. Quando um dos botões recebe o atributo
data-bs-dismiss com valor modal, ele fecha o diálogo modal em resposta ao clique.
 
6.
Retro�t
Express
JacksonConverter
WebJars
OkHttpClient
Explicação:
Os elementos WebJars são as bibliotecas do Bootstrap oferecidas no formato jar, para permitir a utilização ao nível do
projeto, sem a necessidade de acesso a um repositório remoto. A versão desejada deve ser especi�cada no arquivo
pom.xml, sendo indicada a 5.0.2, devido à existência de documentação mais completa.
 
7.
#aviso {color: yellow; background-color: red; text-decoration: underline; font-style: italic}
span, #aviso {background-color: red; font: yellow italic underline}
#aviso {font-color: yellow; font-background: red; text-decoration: italic underline}  
span, .aviso {background-color: red; font: yellow italic underline}
.aviso {color: yellow; background-color: red; text-decoration: italic underline}
Explicação:
Como estamos de�nindo a formatação de um elemento unicamente identi�cado, trabalhamos com o id precedido de
cerquilha, no caso #aviso. A cor da fonte é especi�cada no atributo color, o fundo através de background-color, o
sublinhado é de�nido via text-decoration,e o estilo itálico é obtido a partir de font-style. Não podemos preceder o
seletor com ponto, pois seria para a aplicação em elementos de uma determinada classe, não permitindo que ocorra
uma individualização. Outra observação é a de que o uso de vírgula nos seletores não de�ne uma hierarquia para
aplicação de estilos, mas sim um grupo onde o estilo será aplicado.
A construção de interfaces grá�cas seguindo uma estratégia modular permite, entre outras coisas, a reutilização de
componentes visuais ao longo de todo o sistema, diminuindo o esforço de programação e design consideravelmente.
Quando utilizamos o Bootstrap em conjunto com o Thymeleaf, a modularização é proporcionada pelo uso de fragmentos.
Em termos práticos, temos um template dividido em fragmentos, os quais podem ser incluídos em outros templates, de
acordo com a Standard Expression Syntax, através do símbolo:
Qualquer site precisa de um sistema de navegação adequado, onde temos como exemplo a barra de navegação,
posicionada no topo da página, com os links para as páginas, na forma de um menu principal. Através do Bootstrap, temos
a classe navbar para a de�nição de uma barra de navegação a partir de uma tag nav, apresentando diversas opções, como
uso de tema dark. Qual das a�rmativas seguintes é CORRETA, no que se refere ao componente navbar?   
Utilizar o Thymeleaf junto ao Spring Boot permite eliminar muitas con�gurações, facilitando o processo de fornecimento
de dados para os templates HTML, dentro da arquitetura padrão de controladores. Na prática, utilizamos o mesmo
modelo de comunicação adotado para interfaces JSP, mas agora com os dados sendo tratados em arquivos HTML, com os
atributos e diretivas do Thymeleaf. Nesse contexto, qual atributo do Thymeleaf permite associar um formulário HTML
aos dados de um objeto fornecido pelo controlador?
 
8.
cerquilha
cifrao
arroba
asterisco
til
Explicação:
A inclusão de um fragmento em um template é feita com o uso de til (~), segundo a forma geral ~{template-fonte ::
fragmento}. No template de origem, o nome do fragmento é de�nido através do atributo th:fragment, ao nível da tag
principal, podendo ser feita a inclusão em um segundo template, inclusive com a passagem de parâmetros. Um exemplo
de utilização de fragmento seria < div th:replace="~{menu :: menuprincipal (pagina=' ') }" >, onde precisamos de um
arquivo menu.html, contendo uma tag com atributo th:fragment="menuprincipal".     
 
9.
De forma geral, a classe navbar-brand é aplicada na opção principal da barra de navegação.
A classe navbar-nav é aplicada aos itens de uma lista, fazendo com que eles se apresentem como itens de menu.
A de�nição de uma barra de navegação impede a organização do espaço através de classes como col-sm-8 ou col-
sm-4.
Para demonstrar visualmente qual a página ativa, devemos con�gurar o nav-link como used.
A opção navbar-expand-lg é utilizada para preencher todo o espaço vertical com o conteúdo da barra de navegação.
Explicação:
No Bootstrap, a classe navbar oferece uma barra de navegação, onde con�guramos a opção principal, como a tela
inicial (home), através da classe navbar-brand, destacando-a das demais. Os demais links podem ser dispostos em uma
lista, com a classe navbar-nav, onde os itens serão do tipo nav-item, de�nindo as opções de menu. Cada nav-item deve
encapsular uma âncora da classe nav-link, onde a página ativa será indicada através da opção active. Finalmente, os
espaços podem ser organizados pelas classes do Bootstrap Grid System, como col-sm-4, e a opção navbar-expand-lg
preenche todo o espaço horizontal para telas largas, comprimindo os itens para telas com espaço menor.       
 
10.
th:object
th:href
th:action
th:text
th:�eld
Explicação:
No processo de utilização do Thymeleaf com o Spring Boot, o controlador adiciona um objeto nomeado ao model,
sendo recuperado no template e associado ao formulário pelo atributo th:object. Os campos do formulário são
preenchidos com os valores das propriedades do objeto, através do atributo th:�eld, e os dados são enviados para a
rota de�nida no atributo th:action, quando ocorre a submissão do formulário. Quanto aos demais atributos, th:href
serve para de�nir o endereço de uma âncora, e th:text substitui o conteúdo interno de uma tag.    
    Não Respondida      Não Gravada     Gravada