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.
É 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.
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.
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.
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.
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.
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"));
}
}Demo 3 – Menu
A Framework disponibiliza vários tipos de menu onde é utilizada a componente Breadcrumb que fornece informações contextuais sobre a hierarquia da página.
Para o menu é criada uma nova página XHTML e a mesma é importada nas restantes páginas assim cada vez que é necessário atualizar o menu essa alteração é feita apenas numa única página XHTML.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui"> <h:body> <h:form> <p:breadCrumb> <p:menuitem value="Demo 1" url="index.xhtml" /> <p:menuitem value="Demo 1" url="index.xhtml" /> <p:menuitem value="Demo 2" url="demo2.xhtml" /> </p:breadCrumb> </h:form> </h:body> </html>
Nas restantes páginas em que o menu vai ser utilizado é necessário introduzir a linha xmlns:ui="http://xmlns.jcp.org/jsf/facelets" no tag <html>.
É inserida a importação do menu antes dos formulários.
<ui:include src="menu.xhtml"></ui:include>
O projeto está terminado. Agora pode ser executado para visualizar o resultado final. Ao iniciar o projeto e deparar-se com o seguinte erro.
Para ser corrigido tem que definir a não utilização do proxy nas opções gerais do NetBeans.
E assim terá o seguinte resultado quando inicia o projeto com o Tomcat.
Com o projeto terminado, já se pode criar o ficheiro WAR que contém todos os ficheiros do projeto a serem enviados para o OpenShift através de SFTP. Para criar o ficheiro clique no projeto com o botão direito do rato selecione Clean and Build.
O ficheiro WAR é basicamente um ficheiro compactado no formato zip com todos os ficheiros do projeto se o abrir com o compactador de ficheiros com suporte zip pode ver o seu conteúdo.
Antes de enviar o ficheiro o projeto para OpenShift é necessário configurar o SFTP com o nosso certificado digital para que o mesmo aceite a ligação SFTP.
Para criar o certificado é utilizada a aplicação PuTTYgen (http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html). Atenção: faça download apenas do site oficial já que existem versões não oficiais que “roubam” as credenciais criadas.
Para criar o certificado inicia-se o PuTTY Key Generator e clica-se no botão Generate, a seguir move-se o rato aleatoriamente na área em branco até o certificado ser criado e depois define-se a key passphrase.
É necessário guardar a chave pública e a chave privada.
Inicie a sua conta do OpenShift, clique em definições e insira a sua chave pública conforme aparece no PuTTY Key Generator.
Se pretender alterar ou apagar a chave pública pode sempre apagar no botão Delete e criar uma nova.
Com a chave inserida podemos criar uma nova aplicação clicando em Applications e selecionando Tomcat 7 (JBoss EWS 2.0), a seguir define-se o endereço da aplicação.
Nos planos gratuitos por norma não é possível definir-se a região, é necessário definir-se No preference.
Com a aplicação criada pode consultar-se o endereço e o utilizador para a ligação SSH que está definido no Soure Code que tem o seguinte aspeto: 854a6dZ40c000d820@xpto-pap.rhcloud.com.
Para ligarmos através de SFTP vou demonstrar com a aplicação FileZilla. Primeiro é necessário adicionar a chave privada. No menu da aplicação selecione a opção Editar e depois Configurações.
Na janela Configurações selecione a página SFTP e clique em Adicionar chave de ficheiro…, adicione a mesma, que foi criada anteriormente e a aplicação questiona se quer converter. Clique Sim vai ser solicitado a passphrase que foi definida na criação da chave privada.
Agora pode criar-se a ligação ao OpenShift. Com as indicações do Soure Code que tem o seguinte aspeto: 854a6dZ40c000d820@xpto-pap.rhcloud.com, o nome de utilizador é 854a6dZ40c000d820 e servidor xpto-pap.rhcloud.com. Para iniciar a ligação clica-se no botão Ligar.
Com a ligação efetuada já pode substituir o ficheiro WAR existente pelo WAR do projeto criado. Para isso selecione a pasta webapps localizada em /var/lib/openshift/[Nome de Utilizador]/app-root/runtime/dependencies/jbossews/webapps e substitua o ficheiro. Mas antes de o fazer é obrigatório mudar o nome do ficheiro WAR do projeto para ROOT.war. Se não mudar o nome do ficheiro e o mesmo se chamar PAP123 a aplicação não fica na raiz mas sim numa subpasta da raiz com o nome PAP123.
Depois de enviarmos o ficheiro reiniciamos a aplicação no painel do OpenShift.
Atenção: Apagar outras pastas ou ficheiros pode danificar a aplicação web.
E ficamos com o seguinte resultado.
A vantagem de se criarem aplicações web em Java no próprio servidor é não obrigar o utilizador a instalar o Java. Mas se o projeto trabalhar com os certificados digitais do utilizador então já é obrigado a instalar o Java para que o mesmo seja validado e identificado. A vantagem de utilizarmos uma UI Framework é de não necessitarmos criar os componentes UI e assim poupar tempo nos projetos. Mesmo utilizando a versão de comunidade existe um grande suporte no fórum do PrimeFace e em grupos do Google ou Facebook. É necessário ter atenção as novas versões em que algumas propriedades são alteradas, mas estão identificadas no manual do PrimeFaces. O OpenShift é uma ótima solução de projetos para clientes em SASS/PASS mas também se pode utilizar para experimentar o seu comportamento e/ou para mostrar. Também podemos utilizar o plano gratuito para alojamento de uma página pessoal, blog ou outros.
Os ficheiros do projeto estão disponíveis no GitHub em https://github.com/rramoscabral/pap-2015-openshift_and_primefaces.