Como fazer o deploy de uma aplicação web com PrimeFaces no OpenShift

Neste artigo vou mostrar como importar a User interface (UI) Framework PrimeFaces (http://primefaces.org/) para o desenvolvimento de uma aplicação web de JavaServer Faces (JSF) utilizando NetBeans (https://www.netbeans.org) e alojar a mesma aplicação na plataforma OpenShift por SFTP.

O OpenShift Online (https://www.openshift.com) é um serviço em nuvem da Red Hat (http://www.redhat.com) para desenvolvimento de aplicações e alojamento ou seja é um Platform as a service (PaaS) que permite otimizar a aplicação web e não necessitamos de preocupar com a infraestrutura necessária para distribuir a aplicação web.

Uma das vantagens de utilizarmos o OpenShift é a utilização de um plano gratuito sem necessitarmos de cartão de crédito.

Principais diferenças nos planos disponíveis:

Plano Gratuito Bronze Prateado
Preço base Gratuito Gratuito 15€/mês
Inatividade da aplicação 24 Horas Nunca Nunca
Escalabilidade Sim (3 min / 3 max) Sim (3 min / 16 max max) Sim (3 min / 16 max)
Alojamento 1 GB 1 GB 6 GB
Suporte Comunidade Comunidade Red Hat e Comunidade

No plano gratuito se a aplicação não receber nenhum pedido a mesma é desligada e apenas volta a ser ligada quando receber um novo pedido. Para que a aplicação se mantenha ligada normalmente utilizam-se técnicas para fazer pedidos de X em X tempos.

 Um dos principais concorrentes do OpenShift é a Microsoft Azure que permite também um plano gratuito para alojamento de aplicações Java, mas este apenas permite 1 GB de tráfego. No OpenShift nunca fui avisado por utilização de tráfego e a aplicação web continua a funcionar.

O PrimeFaces é uma UI Framework para Websites em JSF. Esta Framework contém um grande conjunto de componentes UI em JSF Ajax APIs, e pode consultar os componentes no showcase que estão disponíveis na página de internet do PrimeFaces. O desenvolvedor tem à sua disponibilidade quatro versões PRO, CASE, Elite e Comunidade.

  PRO CASE Elite Comunidade
Custo Subscrição anual por desenvolvedor Gratuito (incluído comercial)
Suporte PrimeFaces (resposta no máximo em um dia útil) PrimeFaces  PrimeTek www.primetek.com.tr Comunidade PrimeFaces 

O criador do PrimeFaces também disponibiliza o Mobile UI kit para aplicações mobile, Layouts e temas para as mesmas.

Para criar a aplicação deste projeto web em JSF vai ser utilizado IDE Netbeans.  Esta aplicação é patrocinada pela Oracle e permite o desenvolvimento de projetos Java, HTML5, PHP e C/C++, não tem nenhum custo para o utilizador nem para empresas.

O idioma utilizado neste Netbeans é o Inglês. Selecione a opção New Project  para iniciar um novo projeto depois é selecionada a categoria Java Web em que é selecionado o projeto Web Application sem código incluído, após a seleção avança para fase seguinte.

NetBeans: novo projeto

É definido o nome do projeto e a localização do mesmo mas não é definida a localização da pasta das bibliotecas e avança para fase seguinte.

NetBeans: definição do projeto

O servidor a ser utilizado é o Apache Tomcat e é o mesmo que vai ser utilizado no OpenShift após a seleção avança para fase seguinte.

NetBeans: definições do servidor

O projeto vai trabalhar com JavaServer Faces.  O NetBeans já inclui as bibliotecas para o PrimeFaces mas não vai ser utilizada esta funcionalidade vais ser descarregado a última versão e importada para o projeto. Após a seleção avança para fase seguinte.

NetBeans: escolha de frameworks

Com o projeto criado a primeira coisa fazer é definir o Source/Binary Format do projeto para JDK 7, porque o OpenShift ainda não trabalha com o Java 8. Para definir clica-se com o botão direito do rato em cima no nome do projeto, seleciona-se Properties, seleciona-se a opção Sources e define-se Source/Binary Format para JDK 7.

NetBeans: versão do Java

Agora pode importar-se o PrimeFaces. Por norma eu crio uma pasta com nome libs na raiz do projeto onde coloco todas as bibliotecas que utilizo e que não estão integradas no IDE ou que são mais recentes, já que assim consigo abrir o projeto noutros computadores sem problemas. Também pode se utilizar o Maven.

openShift8

Após a importação da biblioteca é necessário que a mesma seja reconhecida nas páginas XHTML que utilizem os componentes UI assim é necessário adicionar a seguinte linha xmlns:p="http://primefaces.org/ui" no tag <html> .

O PrimeFaces tem uma ótima compilação de documentação disponível na sua página de internet (http://primefaces.org/documentation) como aplicar os seus componentes e também estão disponíveis demonstrações dos seus componentes em http://www.primefaces.org/showcase/.

Vão ser utilizadas três demonstrações. A primeira um input com validação, a segunda é idêntica à primeira mas com mensagens sobrepostas e a terceira é um menu para navegarmos entre as duas demonstrações anteriores.

Antes de iniciar a criação das demonstrações O tag url-pattern no ficheiro web.xml na pasta WEB-INF será alterado e adicionado um context-param para o PrimeFaces.

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
 <context-param>
 <param-name>javax.faces.PROJECT_STAGE</param-name>
 <param-value>Development</param-value>
 </context-param>
 <context-param>
 <param-name>javax.faces.CONFIG_FILES</param-name>
 <param-value>/WEB-INF/faces-config.xml</param-value>
 </context-param>
 <servlet>
 <servlet-name>Faces Servlet</servlet-name>
 <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
 <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
 <servlet-name>Faces Servlet</servlet-name>
 <url-pattern>*.xhtml</url-pattern>
 </servlet-mapping>
 <session-config>
 <session-timeout>
 30
 </session-timeout>
 </session-config>
 <welcome-file-list>
 <welcome-file>index.xhtml</welcome-file>
 </welcome-file-list>
</web-app>

É criado um novo ficheiro com nome faces-config.xml na mesma pasta com o seguinte conteúdo.

<?xml version='1.0' encoding='UTF-8'?>
<faces-config version="2.2"
 xmlns="http://xmlns.jcp.org/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd">
</faces-config>

As alterações anteriores não são obrigatórias mas fica a conhecer os ficheiros onde se definem as configurações a serem utilizadas no PrimeFaces. Com por exemplo a configuração das páginas em que o utilizador consegue aceder sem sessão e as páginas que apenas acede com uma sessão iniciada.  

Demo 1

Validação de entrada de dados executados no servidor (http://www.primefaces.org/showcase/ui/ajax/validation.xhtml)

Na página de índex (index.xhtml) é apagada a linha referente ao Hello World e introduzido o seguinte código que contém o formulário que solicita a introdução de dados.

<h:form>
 <p:panel id="panel" header="Demo: http://www.primefaces.org/showcase/ui/ajax/validation.xhtml">
 <p:messages id="msgs" />
 <h:panelGrid columns="3" cellpadding="5">
 <p:outputLabel for="name" value="Insira o seu nome:" />
 <p:inputText id="name" value="#{welcomeView.name}" required="true" label="name">
 <f:validateLength minimum="2" />
 </p:inputText>
 <p:message for="name" display="icon" />
 </h:panelGrid>
 <p:commandButton value="Submeter" update="panel" actionListener="#{welcomeView.welcome}" icon="ui-icon-check" />
 </p:panel>
</h:form>

Para validar dos dados introduzidos é necessário criar uma nova classe Java que contém o código que o servidor vai utilizar para validação dos dados recebidos pelo formulário e entregar a mensagem construída.

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;

@ManagedBean
public class WelcomeView {
 
 private String name;
 
 public String getName() {
 return name;
 }
 
 public void setName(String sname) {
 this.name = sname;
 }
 
 public void welcome() {
 FacesContext.getCurrentInstance().addMessage(null,
 new FacesMessage("Olá " + name + " bem-vindo"));
 } 
}

Demo 2

É idêntico ao demo 1 mas com mensagem de informação ao utilizador sobrepostas.

É criado uma nova página XHTML que vai estar na raiz. É necessário introduzir a linha xmlns:p="http://primefaces.org/ui" no tag <html> e alterar os seguintes tags head para h:head e body para h:body.

É inserido o código referente ao formulário:

<h:form> 
 <p:growl id="growl" showDetail="true" sticky="true" /> 
 <p:panel header="Demo 2 - http://www.primefaces.org/showcase/ui/message/growl.xhtml"> 
 <h:panelGrid columns="2" cellpadding="5"> 
 <p:outputLabel for="msg" value="Mensagem:" /> 
 <p:inputText id="msg" value="#{growlView.message}" required="true" /> 
 </h:panelGrid> 
 <p:commandButton value="Guardar" actionListener="#{growlView.saveMessage}" update="growl" /> 
 </p:panel> 
</h:form>

É criada uma nova classe Java que contém o código para validação.

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
 
@ManagedBean
public class GrowlView {
 
 private String message;
 
 public String getMessage() {
 return message;
 }
 
 public void setMessage(String message) {
 this.message = message;
 }
 
 public void saveMessage() {
 FacesContext context = FacesContext.getCurrentInstance();
 context.addMessage(null, new FacesMessage("Com sucesso", "Sua mensagem: " + message) );
 context.addMessage(null, new FacesMessage("Segunda mensagem", "Detalhe adicional"));
 }
}