Artigos Java Overview sobre a biblioteca JSF ibm_extended

1. Introdução

Há muito já vem sendo comentada sobre a influência que a IBM exerce no meio tecnológico. Com hardware poderoso e suas ferramentas integradas, a empresa vem também crescendo consideravelmente no mundo de desenvolvimento de software. Aqui mesmo na DevMedia é comum encontrar vários artigos, cursos e aulas sobre as tecnologias IBM, e as mesmas sempre estão presentes nos meios acadêmico, corporativo e de eventos.

De igual forma, é comum também ver inúmeras empresas que usem de alguma forma, as soluções da IBM, de forma a ter um ambiente de produção de software mais otimizado e flexível.

Usar IBM, por outro lado, implica em novos rumos e conhecimentos a serem tomados e adquiridos. Isso é bom e ruim ao mesmo tempo. Bom porque isso força uma motivação de aprendizado nas equipes de software, ou age até mesmo de forma pessoal na carreira profissional individual em questão. Ruim porque, de um jeito ou de outro, o projeto, a equipe e a empresa de uma forma específica se vê “presa” à tecnologia, uma vez que a mesma é detida por uma patente privada. Isso mesmo, as ferramentas IBM são, em sua grande maioria, pagas.

Neste artigo será mostrado como utilizar mais uma dessas soluções, porém dessa vez se tratando de uma biblioteca de código fonte Java, mais especificamente a biblioteca JSF (Java Server Faces, ver Nota 1) “ibm_extended”.

Nota 1. JSF, ou Java Server Faces, é um framework ou conjunto de bibliotecas de tags customizadas, baseado em Java, para lidar com o desenvolvimento de aplicações web, com foco especial na comunicação “interface de usuário-código Java”.

Quando o framework web JSF se encontrava em sua versão 1.2, versão essa que foi amplamente utilizada e ainda é por muitos projetos e empresas, a IBM decidiu lançar uma biblioteca de tags de sua própria autoria.

Como de costume, esse tipo de estratégia já era adotado por outras empresas que criavam bibliotecas que integravam seus recursos (inovadores em muitas vezes) aos já existentes no JSF base, como a richfaces da empresa Red Hat, ou o primefaces. Consequentemente, uma gama nova de funcionalidades, opções e recursos são adicionados à comunidade de desenvolvimento que pode usufruir livremente dos mesmos. De tal forma, a IBM lançou o “ibm_extended” que faz parte do JWL (JSF Widget Library by IBM) e já vem incorporado às ferramentas da IBM, em sua grande maioria.

2. Configurando

Conforme falado anteriormente, as tecnologias IBM possuem excelente integração entre si. Portanto, para configurar o ambiente e começar a trabalhar com a ibm_extended não é necessário todo um esforço.

Para este artigo será utilizada como ferramenta IDE IBM a ferramenta Rational RSA. Para maiores informações sobre a mesma, tais como instalação e uso, consulte a documentação oficial da IBM ou alguns artigos aqui na DevMedia sobre o assunto (Confira no final do artigo, seção links).

Com o ambiente RSA todo pronto, você estará apto a trabalhar com todo o poder da ferramenta.

3. Criando o projeto

Na opção de menu “File > New > Other”, digite na caixa de texto que irá aparecer o seguinte: “Dynamic Web Project” e selecione a opção correspondente e clique em “Next”.

Na próxima janela, coloque o nome do projeto (ibm-extended-devmedia) e selecione na opção “Configuration” o valor “JavaServer Faces v1.2 Project”, tal como exibido na Figura 1.

Criando projeto IBM extended

Figura 1: Criando projeto IBM extended

E clique em “Finish”.

Obs.: Todos os passos serão considerados com uma instalação prévia da ferramenta tendo como linguagem selecionada o inglês.

Dentro da estrutura de pacotes do projeto atualmente, agora é hora de configurar a faceta do projeto que o caracterizará como apto a trabalhar com o ibm_extended. Para tanto, clique com o botão direito no projeto e selecione a opção “Properties”. Logo após clique na opção “Project Facets”.

Como o projeto foi criado sob a configuração de um projeto JSF 1.2, todas as facetas (configurações do projeto para quais features o mesmo vai ter...) do JSF já se encontram marcadas, exceto a do “IBM Enhanced”. Selecione a mesma, tal como na Figura 2 e clique em “OK”.

Setando faceta do IBM JSF Enhanced

Figura 2: Setando faceta do IBM JSF Enhanced

Depois disso, note que na pasta lib, contido no diretório “WebContent > WEB-INF” foi modificada com a adição de duas novas libs: icu4j_3_4_1.jar e jsf-ibm.jar. As mesmas citadas sobre o projeto JWL anteriormente.

Pronto, agora o seu projeto está configurado para trabalhar com o básico do JSF 1.2, ibm_extended e JSTL.

4. Testando a biblioteca

O próximo passo agora será a criação da JSP que conterá o código JSF. Para isso, clique com o botão direito na pasta WebContent > New > Web Page. Uma janela surgirá solicitando o nome da página, que se chamará “índex”. Clique em Finish.

As páginas criadas pelo template do RSA já vem com um código inicial para que possa trabalhar, dentre o qual se encontra a importação da biblioteca core do JSF, assim como uma criação básica de visão (Confira na Listagem 1).

Listagem 1: Importação do core JSF e criação de view

<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<f:view>
	<body>
	</body>
</f:view>

Agora é necessário que as demais importações sejam feitas, no caso o import da biblioteca de HTML do JSF, bem como a do próprio ibm_extended. Para primeiro teste da mesma, veja a Listagem 2 e explicação em seguida.

Listagem 2: Importação do html do JSF e do ibm_extended

<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://www.ibm.com/jsf/html_extended" prefix="hx"%>
<f:view>
	<hx:scriptCollector>
	<body>
		<h:form>
			<h:inputText id=”teste” />
		</h:form>
	</body>
	</hx:scriptCollector>
</f:view>

Na mesma listagem, é possível observar o uso do prefixo “hx” usado para importar as tags da biblioteca do extended. Para fazer uso da mesma, é preciso definir um escopo dentro do código, neste caso representado pela tag “hx:scriptCollector”.

4.1. Criando um calendário

Veja abaixo na Listagem 3 como criar um campo de calendário usando o componente:

Listagem 3: Criando calendário com a ibm_extended

<h:inputText size="21">
	<hx:convertDateTime pattern="dd.MM.yyyy" />
	<hx:inputHelperDatePicker />
</h:inputText>

Neste exemplo, é possível observar que a primeira tag hx é usada para converter o valor selecionado pelo usuário para o padrão de data brasileiro, e em seguida a tag responsável por imputar o calendário (que faz uso de javascript, por sinal) para que o mesmo apareça no clique do ícone de calendário. A configuração do “value” para o valor no bean funciona da mesma forma que no JSF convencional. Veja na Figura 3 o resultado do mesmo.

Calendário gerado pelo ibm_extended

Figura 3: Calendário gerado pelo ibm_extended

4.2. Criando um modalPanel

No modelo de modal pretendido, será criado um botão que ao ser clicado abrirá a janela modal com uma mensagem de boas vindas. Confira na Figura 4 o resultado.

Modal usando ibm_extended

Figura 4: Modal usando ibm_extended

Veja agora o código para gerar isso, na Listagem 4.

Listagem 4: Código de criação da modal

<hx:panelDialog type="modal" id="panel" style="height: 100px;width:150px;" styleClass="panelDialog">
	Olá Modal!
</hx:panelDialog>
			
<hx:commandExButton type="button" value="Teste">
              <hx:behavior event="onclick" behaviorAction="get" targetAction="panel"></hx:behavior>
              <hx:behavior event="onclick" behaviorAction="show;stop" targetAction="panel"></hx:behavior>
</hx:commandExButton>

Neste exemplo, se faz necessária a combinação de tags para geração da modal. A tag “hx:panelDialog” é usada para criar a modal de fato. Enquanto a tag “hx:commandExButton” cria o botão que aciona a modal. Dentro do botão, é necessário adicionar as tags “hx:behavior” que, como o próprio nome diz, definem o comportamento do botão no evento de clique. “Get” para abrir/recuperar a modal e “show;stop” para habilitar a opção de fechamento, feita de forma automática pelo próprio framework.

5. Concluindo

Depois de muito analisar componentes como esses você pode se perguntar: vale mesmo a pena investir em uma ferramenta como essa? A resposta talvez só o tempo consiga te responder, mas uma coisa é certa: acúmulo de experiências faz uma grande diferença na experiência do aprendizado de JSF. A IBM tem ferramentas muito boas que podem ser usadas sim para o auxílio dos desenvolvedores quando em um projeto complexo, principalmente se o mesmo faz uso extensivo de tecnologias JEE, como EJB, etc.

Links