JSF – Aplicação rich:editor + Facelets

Neste post irei demonstrar a utilização do componente rich:editor que faz parte da biblioteca de componentes RichFaces.

O rich:editor é um componente usado para a criação de um editor em páginas. Seu uso é relativamente simples e o resultado é impressionante.

A aplicação consiste num cadastro de Rascunhos onde o usuário poderá cadastrar e remover seus rascunhos de uma forma prática e simples. Para gerenciar as sessões/transações do Hibernate criei um serlvet filter Open Session In View fazendo papel de um interceptador, que será executado a cada request e response.

Utilizarei Tomcat, Hibernate e MySQL para a persistência de dados e disponilizarei o projeto para download.

Estrutura do projeto

rich_editor

Versões utilizadas

  • Eclipse 3.4.1
  • JDK 1.6
  • Tomcat 6.0.18
  • MyFaces 1.2.5
  • RichFaces 3.3.1
  • Hibernate Annotations 3.4.0
  • Hibernate 3.3.1
  • MySQL 5
  • MySQL Query Browser 1.2

Códigos

Rascunho.java:

package br.com.serjaum.modelo;

@Entity
@Table(name="rascunho")
public class Rascunho implements Serializable{

 private static final long serialVersionUID = -6142163109498247473L;

 @Id
 @GeneratedValue(strategy=GenerationType.IDENTITY)
 @Column(name="RASCUNHO_ID")
 private Long id;

 @Column(name="titulo")
 private String titulo;

 @Temporal(TemporalType.DATE)
 @Column(name="data")
 private Date data = new Date();    

 @Lob
 @Column(name="conteudo")
 private String conteudo;

...
}

RascunhoMB.java:

package br.com.serjaum.mb;

public class RascunhoMB implements Serializable {

 private static final long serialVersionUID = -7138652046367400871L;

 private Long id;

 private Rascunho rascunho = new Rascunho();

 public RascunhoMB(){
 System.out.println(" >>>>>>>>>>>>>>>>>>>> Construtor do RASCUNHO_MB <<<<<<<<<<<<<<<<<<");

 if(this.rascunho == null){
 this.rascunho = new Rascunho();
 }
 }

 public String save(){
 Session session = HibernateUtil.currentSession();
 RascunhoDAO rascunhoDAO = new RascunhoDAO(session, Rascunho.class);

 rascunhoDAO.save(this.rascunho);

 this.rascunho = new Rascunho();
 return "toIndex";
 }

 public String delete(){
 Session session = HibernateUtil.currentSession();
 RascunhoDAO rascunhoDAO = new RascunhoDAO(session, Rascunho.class);

 this.rascunho = rascunhoDAO.load(this.id);
 rascunhoDAO.delete(this.rascunho);
 this.rascunho = new Rascunho(); 

 return "removeSucesso";
 }

 public String merge(){
 Session session = HibernateUtil.currentSession();
 RascunhoDAO rascunhoDAO = new RascunhoDAO(session, Rascunho.class);
 rascunhoDAO.merge(this.rascunho);
 this.rascunho = new Rascunho(); 

 return "atualizaSucesso";
 }

 public String load(){
 Session session = HibernateUtil.currentSession();
 RascunhoDAO rascunhoDAO = new RascunhoDAO(session, Rascunho.class);

 this.rascunho = rascunhoDAO.load(this.id);

 return "pesquisaSucesso";
 }

 public String pesquisaByTitulo(){
 Session session = HibernateUtil.currentSession();
 RascunhoDAO rascunhoDAO = new RascunhoDAO(session, Rascunho.class);

 this.rascunho = rascunhoDAO.pesquisaRascunhoByTitulo(this.rascunho.getTitulo());

 return "pesquisaByTituloSucesso";
 }

 public String exibeRascunho(){
 Session session = HibernateUtil.currentSession();
 RascunhoDAO rascunhoDAO = new RascunhoDAO(session, Rascunho.class);

 this.rascunho = rascunhoDAO.load(this.id);

 return "toRascunho";
 }

 public List<Rascunho> getRascunhos(){
 Session session = HibernateUtil.currentSession();
 RascunhoDAO rascunhoDAO = new RascunhoDAO(session, Rascunho.class);

 return rascunhoDAO.list();
 }

 public Long getId() {
 return id;
 }

 public void setId(Long id) {
 this.id = id;
 }

 public Rascunho getRascunho() {
 return rascunho;
 }

 public void setRascunho(Rascunho rascunho) {
 this.rascunho = rascunho;
 }
}

cadastraRascunho.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">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 </head>

 <a4j:keepAlive beanName="rascunhoMB" />

 <ui:composition template="/template/template.xhtml">
 <ui:define name="corpo">
 <h:form>
 <rich:messages />

 <fieldset>
 <legend>Rascunho</legend>
 <h:panelGrid columns="1">
 <h:outputLabel for="titulo" value="Título "/>
 <h:inputText id="titulo" value="#{rascunhoMB.rascunho.titulo }" required="true" requiredMessage="Preencha o Título do Rascunho" styleClass="edit" size="35" />

 <h:outputLabel for="conteudo" value="Conteúdo "  />
 <rich:editor id="conteudo" theme="advanced" value="#{rascunhoMB.rascunho.conteudo}" required="true" requiredMessage="Preencha o Conteúdo do Rascunho" height="300" width="700"/>
 </h:panelGrid>

 <a4j:commandButton value="Salvar " action="#{rascunhoMB.save}" styleClass="botoes"/>
 <h:commandButton value="Voltar " action="toIndex" immediate="true" styleClass="botoes"/>
 </fieldset>
 </h:form>
 </ui:define>
 </ui:composition>
</html>

rascunho.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">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 </head>

 <a4j:keepAlive beanName="rascunhoMB" />

 <ui:composition template="/template/template.xhtml">
 <ui:define name="corpo">
 <h:form>
 <rich:messages />

 <fieldset>
 <legend>Rascunho</legend>
 <h:panelGrid columns="2">
 <h:outputLabel for="titulo" value="Título "  />
 <h:outputLabel id="titulo" readonly="true" value="#{rascunhoMB.rascunho.titulo}" style=" width : 254px;"/>

 <h:outputLabel for="data" value="Data "  />
 <h:outputLabel id="data" readonly="true" value="#{rascunhoMB.rascunho.data}" style=" width : 254px;">
 <f:convertDateTime pattern="dd/MM/yyyy" />
 </h:outputLabel>
 </h:panelGrid>    

 <h:panelGrid columns="1">
 <rich:editor theme="advanced" autoResize="true" value="#{rascunhoMB.rascunho.conteudo}" height="300" width="822" readonly="true"/>
 </h:panelGrid>                

 <a4j:commandButton value="Salvar " action="#{rascunhoMB.save}" styleClass="botoes"/>
 <h:commandButton value="Voltar " action="toGerenciaRascunhos" immediate="true" styleClass="botoes"/>
 </fieldset>
 </h:form>
 </ui:define>
 </ui:composition>
</html>

Importando o projeto

  1. Baixe o projeto completo >>aqui<<;
  2. Descompacte o projeto no seu workspace;
  3. No Eclipse vá em: File –> Import –> General – Existing Projects into Workspace –> Next –> Selecione o projeto descompactado no workspace –> Finish.

Criando o banco de dados

  1. Com o MySQL instalado e configurado com usuário: root e senha: root crie um novo schema com o nome de jsf.
  2. Execute a classe br.com.serjaum.util.GerarTabelas.java. Essa classe criará as tabelas que foram mapeadas no arquivo hibernate.cfg.xml, no caso a classe Rascunho terá uma tabela correspondente com o nome de rascunho no nosso banco de dados.

Resultado

resultado1

resultado2


Até o próximo post!


6 Comentários on “JSF – Aplicação rich:editor + Facelets”

  1. Hugo disse:

    Boas Sergio, excelente topico.
    Mas ficou aqui uma duvida, eu já tenho a componente rich:editor a funcionar, isto é, já tenho a informação guardada numa variavel String de uma bean, contudo essa informação vai com as tags do html e eu gostava de exibir a informação sem essas tags do html.
    Dá para dar uma ajuda? Ficava-lhe bastante agradecido!
    Basicamente gostava de fazer o que voçê fez. ahh eu uso o netbeans com o jsf,richfaces e facelets apenas isto.

  2. Hugo disse:

    Boas Sergio,

    olha agora tou com um pequeno problema no meu rich:editor, gostaria de tirar a border que tem à sua volta.
    Voçê sabe como se tira isso?
    Obrigado

    • Carlos Eduardo disse:

      Bom dia,

      Sergio ou Hugo, alguem tem a resposta acima? gostaria de tirar a borda e manter a formatação original conforme post do Fabio Morais.

      Obrigado a todos.

  3. Fabio Morais disse:

    Bom dia, Sergio.

    Você sabe como eu faço para colar um texto que esteja formatado na origem dentro do rich:editor e remover a formatação automaticamente, mantendo a que estiver por padrão do rich:editor?

    Obrigado.

  4. Gustavo disse:

    Vocês sao sensacionais! aprendi muita coisa com vocês! muito obrigado pelo compartilhamento do conteudo e continuem assim!

    Excelentes posts!

    Estou no aguardo de um crud com login+jsf+hibernate+primefaces!Iria ser de mais!

    Vlw, pessoal!


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s