JSP

Tabelas<table>:

<TABLE>...</TABLE> delimita uma tabela. Um atributo básico é BORDER, que indica a apresentação da borda.

<TABLE BORDER="borda">

...

</TABLE>

Os atributos que definem as dimensões, height e width, funcionam de uma maneira análoga ao das células, tal como vimos no capítulo anterior. Contrariamente, o atributo align não nos permite justificar o texto de cada una das células que compõem a tabela, mas sim que permite, justificar a própria tabela em relação ao seu entorno.

Vamos colocar três exemplos de alinhamento de tabelas, centralizadas, alinhadas à direita e à esquerda.

Os atributos cellpading e cellspacing ajudarão a dar a nossa tabela um aspecto mais estético. À princípio pode nos parecer um pouco confuso seu uso mas com um pouco de prática já será suficiente para saber utilizá-los.

Na seguinte imagem podemos ver graficamente o significado destes atributos:

Você mesmo pode comprovar que os atributos definidos para uma célula têm prioridade em relação aos definidos para uma tabela. Podemos definir, por exemplo, uma tabela com a cor de fundo vermelha e uma das células com a cor de fundo verde. E assim, toda a tabela será vista de cor vermelha manos a célula verde. Da mesma forma, podemos definir uma cor azul para as bordas da tabela e fazer com que uma célula particular seja mostrada com uma borda vermelha. (Apesar de que isto não funcionará em todos os navegadores devido ao fato de alguns não reconhecerem o atributo bordercolor.)

Tabelas aninhadas

O uso de tabelas aninhadas também é muito útil. Da mesma forma que podíamos incluir listas dentro de outras listas, as tabelas podem ser incluídas dentro de outras. Assim, podemos incluir uma tabela dentro da célula de outra. A forma de funcionamento continua sendo o mesmo apesar de que a situação pode se complicar se o número de tabelas incluídas dentro de outras for elevado.

Vamos ver um código de um aninhamento de tabelas. Veremos primeiro o resultado e em seguida, o código, pois assim conseguiremos entendê-lo melhor.

Este seria o código:

<table cellspacing=”10″ cellpadding=”10″ border=”3″>
<tr>
<td align=”center”>
Célula da tabela principal
</td>
<td align=”center”>
<table cellspacing=”2″ cellpadding=”2″ border=”1″>
<tr>
<td>Tabela aninhada, célula 1</td>
<td>Tabela aninhada, célula 2</td>
</tr>
<tr>
<td>Tabela unida, célula 3</td>
<td>Tabela aninhada, célula 4</td>
</tr>
</table>
</td>
</tr>
</table>

Exemplos práticos

Estas são as informações que pretendíamos transmitir-lhes sobre as tabelas em HTML. Agora seria importante fazer algum exemplo de realização de uma tabela um pouco mais complexa. Por exemplo, a seguinte:

Outro exemplo de tabela com a qual podemos praticar:

Títulos, linhas e elementos

<CAPTION>...</CAPTION>

define o título da tabela

<TR>...</TR>

delimita uma linha

<TH>...</TH>

define um cabeçalho para colunas ou linhas (dentro de <TR>)

<TD>...</TD>

delimita um elemento ou célula (dentro de <TR>)

Uma tabela simples:

<TABLE BORDER=4>

<CAPTION>Primeiro exemplo</CAPTION>

<TR><TH>Coluna 1</TH><TH>Coluna 2</TH></TR>

<TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR>

<TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR>

</TABLE>

Títulos compreendendo mais de uma coluna ou linha

É possível englobar colunas e linhas, através dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas):

<TABLE BORDER=1>

<TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR>

<TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR>

<TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR>

<TR><TH ROWSPAN=3>3 linhas</TH><TD>uma linha</TD></TR>

<TR><TD>duas linhas</TD></TR>

<TR><TD>tres linhas</TD></TR>

</TABLE>

Neste exemplo, vemos que o cabeçalho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3).

Tabelas sem borda

As páginas deste tutorial foram construídas com tabelas sem borda. Para tanto, foi empregada a seguinte delaração:

<TABLE BORDER="0">

...

</TABLE>

The attribute value type “color” () refers to color definitions as specified in [SRGB]. A color value may either be a hexadecimal number (prefixed by a hash mark) or one of the following sixteen color names. The color names are 

and sRGB values

	Black = “#000000″		Green = “#008000″
	Silver = “#C0C0C0″		Lime = “#00FF00″
	Gray = “#808080″		Olive = “#808000″
	White = “#FFFFFF”		Yellow = “#FFFF00″
	Maroon = “#800000″		Navy = “#000080″
	Red = “#FF0000″		Blue = “#0000FF”
	Purple = “#800080″		Teal = “#008080″
	Fuchsia = “#FF00FF”		Aqua = “#00FFFF”

Thus, the color values “#800080″ and “Purple” both refer to the color purple.

Fonte:

http://www.w3.org/TR/html401/struct/tables.html#rowgroups

http://www.w3.org/TR/html401/types.html#type-number

Iterando por uma coleção:

<c:forEach var="contato" items="${dao.lista}">
	${contato.nome}, ${contato.email}, ${contato.endereco}, ${contato.dataNascimento}
</c:forEach>

forEach e varStatus

É possível criar um contador do tipo int dentro do seu laço forEach. Para isso basta definir o

atributo chamado varStatus para a variável desejada e utilizar a propriedade count dessa variável.

<table border="1">
<c:forEach var="contato" items="${dao.lista}" varStatus="id">
<tr bgcolor="#${id.count % 2 == 0 ? ’aaee88’ : ’ffffff’ }" >
<td>${id.count}</td><td>${contato.nome}</td>
</tr>
</c:forEach>
</table>

Listar os contatos de ContatoDAO usando jsp:useBean e JSTL.

a) Criando o arquivo WebContent/lista-contatos-elegante.jsp:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
  <body>
   <!-- cria a lista -->
   <jsp:useBean id="dao" class="br.com.caelum.agenda.dao.ContatoDAO"/>
    <table>
      <!-- for -->
      <c:forEach var="contato" items="${dao.lista}">
        <tr>
           <td>${contato.nome}</td>
           <td>${contato.email}</td>
           <td>${contato.endereco}</td>
           <td>${contato.dataNascimento.time}</td>
        </tr>
      </c:forEach>
    </table>
  </body>
</html>

7.10 – Fazendo ifs com a JSTL

Para que possamos fazer essa verificação precisaremos fazer um if para sabermos se o e-mail está pre-
enchido ou não. Mas, novamente, não queremos colocar código Java na nossa página e já aprendemos que
estamos mudando isso para utilizar tags. Para essa finalidade, existe a tag c:if, na qual podemos indicar qual
o teste lógico deve ser feito através do atributo test. Esse teste é informado através de Expression Language.
Para verificarmos se o e-mail está preenchido ou não, podemos fazer o seguinte:

<c:if test="${not empty contato.email}">
<a href="mailto:${contato.email}">${contato.email}</a>
</c:if>

Podemos também, caso o e-mail não tenha sido preenchido, colocar a mensagem “e-mail não informado”,

ao invés de nossa tabela ficar com um espaço em branco. Repare que esse é justamente o caso contrário que

fizemos no nosso if, logo, é equivalente ao else.

O problema é que não temos a tag else na JSTL, por questões estruturais de XML. Uma primeira alternativa

seria fazermos outro <c:if> com a lógica invertida. Mas isso não é uma solução muito elegante. No Java,

temos outra estrutura condicional que consegue simular um if/else, que é o switch/case.

Para simularmos switch/case com JSTL, utilizamos a tag c:choose e para cada caso do switch fazemos

c:when. O default do switch pode ser representado através da tag c:otherwise, como no exemplo a seguir:

<c:choose>
  <c:when test="${not empty contato.email}">
    <a href="mailto:${contato.email}">${contato.email}</a>
  </c:when>
  <c:otherwise>
    E-mail não informado
  </c:otherwise>
</c:choose>

7.12 – Importando páginas

Um requisito comum que temos nas aplicações Web hoje em dia é colocar cabeçalhos e rodapé nas páginas

do nosso sistema. Esses cabeçalhos e rodapés podem ter informações da empresa, do sistema e assim por

diante. O problema é que, na grande maioria das vezes, todas as páginas da nossa aplicação precisam ter

esse mesmo cabeçalho e rodapé. Como poderíamos resolver isso?

Uma primeira alternativa e talvez a mais inocente é colocarmos essas informações em todas as páginas da

nossa aplicação, copiando e colando todo o cabeçalho várias vezes.

Mas o que aconteceria se precisássemos mudar o logotipo da empresa? Teríamos que mudar todas as

páginas. O que não é um trabalho agradável.

Uma alternativa melhor seria isolarmos esse código que se repete em todas as páginas em uma outra

página, por exemplo, cabecalho.jsp e todas as páginas da nossa aplicação, apenas dizem que precisam dessa

outra página nela, através de uma tag nova, a c:import.

Para utilizá-la, podemos criar uma pagina com o cabeçalho do sistema, a cabecalho.jsp, com o seguinte

conteúdo:

<html>
  <body>
    <img src="caminho/de/alguma/imagem.jpg" /> Nome da empresa
     E uma página para o rodapé, por exemplo, rodape.jsp:
     Copyright 2010 - Todos os direitos reservados
  </body>
</html>

Agora, bastaria que em todas as nossas páginas, por exemplo, na lista-contatos-elegante.jsp, colocás-

semos ambas as páginas, através da c:import como abaixo:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:import url="cabecalho.jsp" />
<jsp:useBean id="dao" class="br.com.caelum.agenda.dao.ContatoDAO"/>
<table>
    <!-- for -->
    <c:forEach var="contato" items="${dao.lista}">
      <tr>
        <td>${contato.nome}</td>
        <td>${contato.email}</td>
        <td>${contato.endereco}</td>
        <td>${contato.dataNascimento.time}</td>
      </tr>
    </c:forEach>
</table>
<c:import url="rodape.jsp" />

Espaço:

    

dasdfasd

   asdfasdfasdf

dasdfasd

   asdfasdfasdf

dasdfasd

   asdfasdfasdf