Diferença entre HTML com JSP e JSF?

Saudação para todos,

estamos eu e uma amiga minha envolvidas em um projeto, ela está começando a trabalhar com Java voltado para Web, é algo bem novo, e estou solicitando a pergunta em favor da minha amiga, ela futuramente ira criar a conta dela no GUJ, estamos tendo dificuldade para encontrar uma forma de representação que seja mais simples para o nosso entendimento para aplicar programação visual, ou seja, HTML e CSS, mas a forma que estamos utilizando para programar é tão conhecido chamado JavaBean como mostra abaixo;

package br.com.vendelancha.controller;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ViewScoped;
import javax.inject.Inject;
import javax.inject.Named;

import br.com.vendelancha.model.Noticia;
import br.com.vendelancha.repository.Noticias;
import br.com.vendelancha.repository.filter.NoticiaFilter;

@Named
@ViewScoped
public class PesquisaNoticiasBean implements Serializable {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Inject
	private Noticias noticias;

	private NoticiaFilter filtro;
	private List<Noticia> noticiasFiltrados;
	private Noticia noticia;

	public PesquisaNoticiasBean() {
		filtro = new NoticiaFilter();
		noticiasFiltrados = new ArrayList<>();
	}

	public void pesquisar() {

		noticiasFiltrados = noticias.filtrados(filtro);

	}


	public List<Noticia> getNoticiasFiltrados() {
		return noticiasFiltrados;
	}

	public NoticiaFilter getFiltro() {
		return filtro;
	}

	public Noticias getNoticias() {
		return noticias;
	}

	public Noticia getNoticia() {
		return noticia;
	}

}

E essa é a forma que a principio sabemos como apresentar as informações contidas no banco de dados;

<!-- tentar configurar daqui para frente -->

			<p:dataTable id="noticiaTable"
				value="#{pesquisaNoticiasBean.noticiasFiltrados}" var="noticia"
				style="margin-top: 20px" emptyMessage="Nenhum notícia encontrada."
				rows="3" paginator="true" paginatorAlwaysVisible="false"
				paginatorPosition="bottom">

				<p:column headerText="Titulo"
					style=" text-align:center; width: 100px">
					<h:outputText value="#{noticia.titulo_noticia}" />
				</p:column>
				<p:column headerText="Data de criação"
					style="text-align: center; width: 140px">
					<h:outputText value="#{noticia.data_noticia}">
						<f:convertDateTime pattern="dd/MM/yyyy" />
					</h:outputText>
				</p:column>


				<p:column headerText="Foto" style="text-align: center; width: 200px">
					<h:graphicImage value="../ShowImg?nomeFoto=#{noticia.foto_noticia}" />
				</p:column>
				<p:column headerText="Descrição"
					style=" text-align:center; width: 100px">
					<h:outputText value="#{noticia.desc_noticia}" />
				</p:column>


				<p:column style="width: 100px; text-align: center">
					<p:button icon="ui-icon-pencil" title="Editar" />
					<p:commandButton icon="ui-icon-trash" title="Excluir" />
				</p:column>
			</p:dataTable>
		</h:form>
	</ui:define>
</ui:composition>

É claro que essa apresentação fica muito feia de apresenta, nas formas mais comumente usadas são através de HTML como é visto aqui em baixo, e imagina a diferença;

<div id="dentro">
			<table class="table_vendas">
				<tr>
					<td class="cat">
						<div class="serimagem">
							<div class="container">
								<img class="capa" class="bg-img" src="pesca.png"/>								
							</div>	
                             <div class="link">
								<h2>Ventura 215 Cabin Comfort</h2>
							</div>	
						<br/>							
						</div>
					</td>
					<td class="cat">
						<div class="serimagem">
							<div class="container">
								<img class="capa" class="bg-img" src="pesca.png"/>							
							</div>
                               <div class="link">
								<h2>Ventura 215 Cabin Comfort</h2>
							</div>
						<br/>							
						</div>
					</td>
					<td class="cat">
						<div class="serimagem">
							<div class="container">
								<img class="capa" class="bg-img" src="pesca.png"/>							
							</div>	
                             <div class="link">
								<h2>Ventura 215 Cabin Comfort</h2>
							</div>
						<br/>							
						</div>
					</td>
				</tr>

Quando fui procurar uma maneira mais elegante para apresentar as informações encontrei essas linhas de código, com essas ficaram melhores;

<ui:repeat var="noticia"
				value="#{pesquisaNoticiasBean.noticiasFiltrados}">

				<section>
					<header>
						
						<small>#{noticia.data_noticia}data </small>
						
						<h3>#{noticia.titulo_noticia}</h3>
						
						
					</header>
					<article>
						<h:graphicImage
							value="../ShowImg?nomeFoto=#{noticia.foto_noticia}" />
						<p>#{noticia.desc_noticia}noticia</p>
					</article>
					<footer>
						<p:button icon="ui-icon-pencil" title="Editar" />
						<p:commandButton icon="ui-icon-trash" title="Excluir" />
					</footer>
				</section>

			</ui:repeat>

Sabemos que existe o JSP, e queriamos saber se existe incompatibilidade de trabalhar JavaBean com JSP.

6 Respostas

Topicos relacionados