JSP x XHTML --- Vraptor ![resolvido]

18 respostas
juniorsatanas

Pessoal eu sempre detestei usar JSP, sempre achei que era uma gambiarra, não sei por que ! posso até está enganado... iniciei meus estudos com xhtml e acho muito melhor e muito mais rápido....
Ggostaria que os colegas que são programadores e usam o VRaptor me fale como usar XHTML ou uma maneira de não usar JSP !

Obrigado.
*************************
EXEMPLO XHTML *
*************************

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
    <style type="text/css">
        .ecol1 { vertical-align: top; padding-right : 25px }
        .ecol2 { vertical-align: top; border-left: #ACBECE 1px solid; padding-left : 10px }
        .rich-calendar-tool-btn{
            font-family: Arial, Verdana;
        }
    </style>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <link rel="StyleSheet" type="text/css" href="../style/estilos.css" media="screen" />
    </head>
    <a4j:keepAlive beanName="clientesMB" />
    <ui:composition template="/template/template.xhtml">
        <ui:define name="corpo">
            <rich:tabPanel switchType="ajax">
                  <rich:tab label="Cadastro de Clientes">
                    <a4j:form>
                        <rich:messages />
                        <legend>Cadastro de Clientes</legend>
                        <a4j:region id="regiaoAjax">
                            <a4j:status id="sts">
                                <f:facet name="start">
                                    <h:graphicImage value="/images/ajax-loader_1.gif" />
                                </f:facet>
                            </a4j:status>
                        </a4j:region>
                        <!-- INICIA FORMULARIO-->
                        <fieldset>
                            <h:panelGrid columns="2" id="inputs">
                                <h:outputLabel for="id" value="Digite a CGC/CPF: " />
                                <h:inputText id="id" value="#{clientesMB.clientes.id}"  >
                                
                                </h:inputText>
                                <h:outputLabel for="nome" value="Digite o Nome: " />
                                <h:inputText id="nome" value="#{clientesMB.clientes.nome}"   styleClass="edit" size="40">
                                                                </h:inputText>
                                <h:outputLabel for="endereco" value="Digite o Endereço: " />
                                <h:inputText id="endereco" value="#{clientesMB.clientes.endereco}" styleClass="edit" size="60"  >
                                </h:inputText>
                                <h:outputLabel for="cep" value="Digite o CEP: " />
                                <h:inputText id="cep" value="#{clientesMB.clientes.cep}"  >
                                </h:inputText>
                                 <h:outputLabel for="cidade" value="Digite a Cidade: " />
                                <h:inputText id="cidade" value="#{clientesMB.clientes.cidade}"  >
                                </h:inputText>
                                 <h:outputLabel for="uf" value="UF.:"/>
                                <rich:comboBox defaultLabel="" id="uf" value="#{clientesMB.clientes.uf}" >
                                    <f:selectItem itemValue="AC"/>
                                    <f:selectItem itemValue="AL" />
                                    <f:selectItem itemValue="AM" />
                                    <f:selectItem itemValue="AP"/>
                                    <f:selectItem itemValue="BA" />
                                    <f:selectItem itemValue="CE" />
                                    <f:selectItem itemValue="DF" />
                                    <f:selectItem itemValue="ES"/>
                                    <f:selectItem itemValue="FN"/>
                                    <f:selectItem itemValue="GO" />
                                    <f:selectItem itemValue="MA" />
                                    <f:selectItem itemValue="MG" />
                                    <f:selectItem itemValue="MS" />
                                    <f:selectItem itemValue="MT" />
                                    <f:selectItem itemValue="PA" />
                                    <f:selectItem itemValue="PB" />
                                    <f:selectItem itemValue="PE"/>
                                    <f:selectItem itemValue="PI"/>
                                    <f:selectItem itemValue="PR" />
                                    <f:selectItem itemValue="RJ" />
                                    <f:selectItem itemValue="RN"/>
                                    <f:selectItem itemValue="RO" />
                                    <f:selectItem itemValue="RR" />
                                    <f:selectItem itemValue="RS"/>
                                    <f:selectItem itemValue="SC" />
                                    <f:selectItem itemValue="SE"/>
                                    <f:selectItem itemValue="SP"/>
                                    <f:selectItem itemValue="TO" />
                                </rich:comboBox>
                                <h:outputLabel for="contato" value="Digite o Contato: " />
                                <h:inputText id="contato" value="#{clientesMB.clientes.contato}" styleClass="edit" size="40">
                                </h:inputText>
                                <h:outputLabel for="tipo" value="Digite o Tipo: " />
                                <h:inputText id="tipo" value="#{clientesMB.clientes.tipo}"  >
                                </h:inputText>
                                <h:outputLabel for="areaAtividade" value="Digite o AreaAtividade: " />
                                <h:inputText id="areaAtividade" value="#{clientesMB.clientes.areaAtividade}" styleClass="edit" size="40" >
                                </h:inputText>
                                <h:outputLabel for="fone" value="Digite o Fone: " />
                                <h:inputText id="fone" value="#{clientesMB.clientes.fone}"  >
                                </h:inputText>
                                <h:outputLabel for="fax" value="Digite o Fax: " />
                                <h:inputText id="fax" value="#{clientesMB.clientes.fax}"  >
                                </h:inputText>
                                <h:outputLabel for="cxPostal" value="Digite o Caixa/Postal: " />
                                <h:inputText id="cxPostal" value="#{clientesMB.clientes.cxPostal}" >
                                </h:inputText>
                                <h:outputLabel for="email" value="Digite o E-mail: " />
                                <h:inputText id="email" value="#{clientesMB.clientes.email}" styleClass="edit" size="40" >
                                </h:inputText>
                                <h:outputLabel for="insest" value="Digite o insest: " />
                                <h:inputText id="insest" value="#{clientesMB.clientes.insest}"   >
                                </h:inputText>
                                <h:outputLabel for="celular" value="Digite o Celular: " />
                                <h:inputText id="celular" value="#{clientesMB.clientes.celular}"  >
                                </h:inputText>
                                   </h:panelGrid>
                            |<a4j:commandButton value="Salvar" action="#{clientesMB.save}" status="sts" reRender="inputs" styleClass="botoes"/>
                            |<a4j:commandButton value="Voltar" immediate="true" action="toIndex" styleClass="botoes"/>|
                        </fieldset>
                        <rich:messages />
                        <fieldset><legend>Atualização de Dados</legend>
                            <f:subview id="listauser">
                           
                                    <rich:dataTable value="#{clientesMB.clientess}" var="clientes" rows="30" id="clientess" width="100%" cellspacing="0" cellpadding="0" border="5">
                                        <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="Cliente/CG/CPF:" />
                                            </f:facet>
                                            <h:outputText value="#{clientes.id}" />
                                        </h:column>
                                        <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="Nome:" />
                                            </f:facet>
                                            <h:outputText value="#{clientes.nome}" />
                                        </h:column>
                                         <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="Telefone:" />
                                            </f:facet>
                                            <h:outputText value="#{clientes.fone}" />
                                        </h:column>
                                         <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="Celular:" />
                                            </f:facet>
                                            <h:outputText value="#{clientes.celular}" />
                                        </h:column>
                                         <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="E-mail:" />
                                            </f:facet>
                                            <h:outputText value="#{clientes.email}" />
                                        </h:column>
                                         <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="Mostrar"/>
                                            </f:facet>
                                            <a4j:commandLink reRender="inputs,clientes,clientess" >
                                                <h:outputText value="Mostrar"/>
                                                <f:setPropertyActionListener value="#{clientes}" target="#{clientesMB.clientes}" />

                                            </a4j:commandLink>
                                        </h:column>
                                        <f:facet name="footer">
                                            <rich:datascroller />
                                        </f:facet>
                                    </rich:dataTable>
                            </f:subview>
                       </fieldset>
                    </a4j:form>
                </rich:tab>
                    <rich:tab label="Pesquisa Clientes">
                         <a4j:form>
                             <fieldset>
                                <h:outputLabel for="id" value="Digite a CGC/CPF: " />
                                <h:inputText id="id" value="#{clientesMB.clientes.id}"  styleClass="inputPesquisa" >
                                <a4j:commandButton  value="Pesquisar" action="#{clientesMB.pesquisaById}"  reRender="inputs,listauser,clientes,clientess">
                                </a4j:commandButton>
                                </h:inputText>
                                <h:outputLabel for="nome" value="Digite o Nome: " />
                                <h:inputText id="nome" value="#{clientesMB.clientes.nome}"   styleClass="inputPesquisa">
                                <a4j:commandButton  value="Pesquisar" action="#{clientesMB.pesquisaByNome}" reRender="inputs,listauser,clientes,clientess">
                                </a4j:commandButton>
                                </h:inputText>
                            </fieldset>
                     <fieldset>
                         <legend>Atualização de Dados</legend>
                            <f:subview id="listauser">

                                    <rich:dataTable value="#{clientesMB.clientess}" var="clientes" rows="60" id="clientess" width="100%" cellspacing="0" cellpadding="0" border="5">
                                        <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="Cliente/CG/CPF:" />
                                            </f:facet>
                                            <h:outputText value="#{clientes.id}" />
                                        </h:column>
                                        <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="Nome:" />
                                            </f:facet>
                                            <h:outputText value="#{clientes.nome}" />
                                        </h:column>
                                         <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="Telefone:" />
                                            </f:facet>
                                            <h:outputText value="#{clientes.fone}" />
                                        </h:column>
                                         <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="Celular:" />
                                            </f:facet>
                                            <h:outputText value="#{clientes.celular}" />
                                        </h:column>
                                         <h:column>
                                            <f:facet name="header">
                                                <h:outputText value="E-mail:" />
                                            </f:facet>
                                            <h:outputText value="#{clientes.email}" />
                                        </h:column>
                                         
                                        <f:facet name="footer">
                                            <rich:datascroller />
                                        </f:facet>
                                    </rich:dataTable>
                            </f:subview>
                       </fieldset>
                              </a4j:form>
                </rich:tab>
            </rich:tabPanel>
        </ui:define>
    </ui:composition>
</html>

*************************
EXEMPLO JSP *
*************************

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page contentType="text/html" pageEncoding="iso-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<%@include file="../titulo.jsp" %>
<style type="text/css" media="screen">
<!--
        @import URL("../css/estilos.css");
-->
</style>
</head>

<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<table border="0" cellpadding="0" cellspacing="0" class="principal" id="principal">
  <tr>
    &lt;td width="5%" height="138"&gt;<img    />&lt;/td&gt;
    &lt;td width="95%" rowspan="2" valign="top"&gt;&lt;table width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
      &lt;tr&gt;
        &lt;td width="95%" bgcolor="#FFFFFF"&gt;<img    />&lt;/td&gt;
        &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td bgcolor="#edefea"&gt;&lt;%@include file="menuUsuario.jsp" %&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;<br/>
            &lt;div id="erros"&gt;
<ul>
&lt;c:forEach items="${errors}" var="error"&gt;
<li>${error.category } - ${error.message }</li>
&lt;/c:forEach&gt;
</ul>
&lt;/div&gt;
            &lt;table class="tabela" width="80%" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#999999"&gt;
          &lt;thead&gt;
            &lt;tr class="tabelaTitulo"&gt;
                    &lt;th&gt;Nome&lt;/th&gt;
                    &lt;th&gt;Login&lt;/th&gt;
                    &lt;th width="70"&gt;Excluir&lt;/th&gt;
                    &lt;th width="60"&gt;Editar&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;% int i=0; %&gt;
          &lt;tbody&gt;&lt;c:forEach var="usuario" items="${usuarioList}"&gt;

                  &lt;% i+=1;
                  if(i%2==0){
%&gt;
                      &lt;tr class="tabelaFonte" bgcolor="#eeeeee"&gt;   
						  &lt;td &gt;${usuario.nome}&lt;/td&gt;
                          &lt;td align="center"&gt;${usuario.login}&lt;/td&gt;
                    &lt;td align="center"&gt;&lt;form action="&lt;c:url value="/usuario/${usuario.idUsuario}"/&gt;&quot; method=&quot;POST&quot;&gt;
&lt;input type="hidden"  name="_method"  value="delete" /&gt;
 &lt;input type="image" src="../img/delete.png"  value="Enviar"/&gt;
                        &lt;/form&gt;&lt;/td&gt;
                    &lt;td align="center"&gt;<a /usuario/${usuario.idUsuario}"/>&quot;&gt;<img      /></a>&lt;/td&gt;
                  &lt;/tr&gt;
                 &lt;% }else{
               %&gt;
            &lt;tr class="tabelaFonte"&gt;
				  	&lt;td &gt;${usuario.nome}&lt;/td&gt;
				  	&lt;td align="center"&gt;${usuario.login}&lt;/td&gt;
                   &lt;td align="center"&gt;&lt;form action="&lt;c:url value="/usuario/${usuario.idUsuario}"/&gt;&quot; method=&quot;POST&quot;&gt;
&lt;input type="hidden"  name="_method"  value="delete" /&gt;
 &lt;input type="image" src="../img/delete.png"  value="Enviar"/&gt;
                       &lt;/form&gt;&lt;/td&gt;
                    &lt;td align="center"&gt;<a /usuario/${usuario.idUsuario}"/>&quot;&gt;<img      /></a>&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;% }%&gt;
              &lt;/c:forEach&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;&lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
    &lt;td width="5%" height="680" valign="top" class="fundoMenu"&gt;
	&lt;%@include file="../menu.jsp" %&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td colspan="3" valign="top" class="filRodape"&gt;
        &lt;%@include file="../rodape.jsp" %&gt;    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

18 Respostas

ricardosoares

outro tópico do mesmo assunto

http://www.guj.com.br/posts/list/213042.java

e, ainda mais, do mesmo usuário

juniorsatanas

Verdade..

Por que eu não fiquei satisfeito com a resposta , e eu sei que deve ter uma maneira de não usar JSP. tu perdeu uma chance de ficar calado, se não tem nada de útil para postar ! la eu perguntei se dava para usar xhtml + vraptor.

&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;form&gt;
         &lt;fieldset&gt;
            &lt;legend&gt;Dados pra Cadastro&lt;/legend&gt;
            &lt;label for="nome"&gt;Nome:&lt;/label&gt; 
            &lt;input type="text" name="nome" id="nome" /&gt;<br />
            &lt;label for="tipo"&gt;Tipo:&lt;/label&gt; 
            &lt;input type="text" name="tipo" id="tipo" /&gt;<br />
            &lt;label for="data"&gt;Data:&lt;/label&gt;
            &lt;input type="text" name="data" id="data" /&gt;<br />
            &lt;input type="submit" value="enviar" class="botao" /&gt;
         &lt;/fieldset&gt;
      &lt;/form&gt;
   &lt;/body&gt;
&lt;/html&gt;
form fieldset
{
   float: left;
   margin-right: 7px;
   width: 40%;
   border: solid black 1px;
   padding: 3%;
   margin-bottom: 10px;
}
 
form legend
{
   padding: 6px;
   margin: 10px;
   border: solid black 1px;
   font-size: 90%;
   font-weight: bold;
   background-color: #e8e8e8;
}
 
form label
{
   display: block;
   font-size: 11px;
} 
 
form input
{
   width: 100%;
   border: solid #ccc 1px;
   font-size: 11px;
   font-family: 'Trebuchet MS', Verdana, Tahoma, Serif;
}
 
form input.botao
{
   display: block;
   width: auto;
   float: right;
}
Lucas_Cavalcanti

não dá pra usar esse XHTML com o VRaptor

ele é o XHTML do JSF, e o VRaptor não é compatível com JSF…

vc pode usar o Velocity ou o Freemarker se vc odeia tanto o jsp assim… qualquer template de View baseado em Servlet vc pode usar… templates baseados em JSF, como o XHTML, não funcionam…

juniorsatanas

Lucas Obrigado !

Um grande motivo para pensar se vale a pena usar VRaptor em meus sistemas ! apesar de gostar muito dele ! mias JSP eu não curto !

tipo: usar if else + 1 dentro do View ! eu acho TOSCO..

&lt;tbody&gt;&lt;c:forEach var="usuario" items="${usuarioList}"&gt;

                  &lt;% i+=1;
                  if(i%2==0){
%&gt;
                      &lt;tr class="tabelaFonte" bgcolor="#eeeeee"&gt;   
						  &lt;td &gt;${usuario.nome}&lt;/td&gt;
                          &lt;td align="center"&gt;${usuario.login}&lt;/td&gt;
                    &lt;td align="center"&gt;&lt;form action="&lt;c:url value="/usuario/${usuario.idUsuario}"/&gt;&quot; method=&quot;POST&quot;&gt;
&lt;input type="hidden"  name="_method"  value="delete" /&gt;
 &lt;input type="image" src="../img/delete.png"  value="Enviar"/&gt;
                        &lt;/form&gt;&lt;/td&gt;
                    &lt;td align="center"&gt;<a /usuario/${usuario.idUsuario}"/>&quot;&gt;<img      /></a>&lt;/td&gt;
                  &lt;/tr&gt;
                 &lt;% }else{
               %&gt;
            &lt;tr class="tabelaFonte"&gt;
Lucas_Cavalcanti

mas vc não precisa usar if e else…

vc pode usar <c:if test="${um teste}">

se vc usa JSTL vc não precisa ficar programando em java dentro das jsps…

juniorsatanas

Então oproblema não é jsp e sim eu que não aprendir direito ! hahahah

Lucas_Cavalcanti

jsp sem scriptlet (esses códigos java no meio) é bem parecido com o xhtml… vc pode usar sem problemas

juniorsatanas

Lucas Obrigado !

H

Lucas

Na documentação do VRaptor o atributo de identificação “name” é utilizado ao invés de “id” nos .

É comentado que o atributo “name” encontra-se em desuso e possivelmente será removido de futuras versões do XHTML.
Tentei alterar os “name” para “id” em meus forms, mas ocorreram erros.

Gostaria de saber: é possível o VRaptor trabalhar somente com o atributo “id” ao invés do atributo “name”?

Utilizar:

Ao invés de:

Obrigado

juniorsatanas

Opa mano não to usando XHTML mas sim JSP !

Lucas_Cavalcanti

@lhtaconi
qdo vc fala XHTML vc está se referindo ao template do JSF ou ao formato XHTML?

se for o formato, quando vc submete um form, o seu browser manda na requisição os parâmetros:

name_do_input_1 = value_do_input_1
name_do_input_2 = value_do_input_2
...
name_do_input_n = value_do_input_n

ou seja, ele usa o name do input como nome do parâmetro enviado. O id é simplesmente ignorado.

O VRaptor (nem qualquer outro Framework) não consegue mudar isso.

Agora se vc se refere ao template do JSF, ele não é compatível com o VRaptor…

de qqer forma, use o atributo name nos inputs, mesmo que ele saia da especificação os browsers vão continuar suportando ele pelo menos pelos próximos 10 anos (vide IE6)

H

Ok Lucas.

O que estou fazendo é colocar em cada input tanto o “name” quanto o “id”.

A pergunta foi apenas para ver se existia a possibilidade de utilizar apenas o campo “id”, o qual já utilizo nas validações javascript, etc… Ficaria um pouco mais limpo o código…

Sem problema utilizar os 2 atributos.

Obrigado

juniorsatanas

lhtaconi JSP é foda !

G

Mas de onde veio isso? A menos que você tenha o link da W3C dizendo sobre isso vou considerar que você se enganou. Até porque muita gente confunde o formato XHTML do engine XHTML do faces.

O formato XHTML prevê a tag ID e NAME que possuem funcionalidades diferentes. Name é o nome do parametro que será enviado para o outro lado da tela, já o campo ID serve apenas como um identificador único desse campo na tela. Ou seja, propósitos diferentes.

H

garcia-jj

Realmente, após você mencionar isto, procurei algo referente na documentação do W3C e não encontrei. Ao contrário disso, em diversos casos são utilizados exemplos tanto com o atributo “name”, quanto com o atributo “id”.

A informação que eu tinha obtido está no site do Maujor: http://maujor.com/tutorial/xhtml.php.

Meu questionamento foi em relação a, no meu caso, ter que utilizar os dois atributos (“name” e “id”) com os exatos mesmos valores.

vlw…

G

lhtaconi, acho que o autor do artigo esqueceu de explicar que o name só está em depreciated para objetos que não sejam formulários. Formulários continuarão usando o NAME, pelo menos até onde sei.

Abraços

[quote]Notar que em XHTML 1.0, o atributo name destes elementos está formalmente em desuso e possivelmente será excluido nas versões futuras de XHTML.

Errado:

Certo:

juniorsatanas

garcia-jj Tu é foda cara… poderia ficar calado !

o Cara já tinha resolvido a parada eu já tinha até intendido… agora não vou dormir pensando nisso… TU ME DEIXOU CONFUZZZZZZZZZZZZZZOOOOOOOOOOOOOOOOO

Explica !? não intendi o que vc falou !
Lucas_Cavalcanti

basicamente o name está deprecado pra tudo, menos pra formulários e inputs de formulário (input, select, textarea)

Criado 30 de julho de 2010
Ultima resposta 6 de out. de 2010
Respostas 18
Participantes 5