Arquivos mensais: junho 2011

Formatando campos monetários no JSF com jQuery

Em nossas aplicações é comum a necessidade de trabalhar com valores monetários(dinheiro). O Java não possui um tipo específico para trabalhar com tipos monetários, ficando a cargo do programador decidir se irá utilizar classes do tipo Float ou Integer ou qualquer outra.

Mas uma coisa é certa: não interessa se nas suas classes Java é utilizado Double, Integer, Float ou BigDecimal. Para o usuário, que vai ver a tela final do sistema, é necessário apresentá-la de forma intuitiva e que o mesmo não precise pensar muito para descobrir o que cada componente faz na tela.

Nesse post iremos demonstrar como utilizar um plugin do jQuery(jQuery Price Format) para formatar os campos que terão valores monetários em uma página JSF.

Partimos do princípio de que o(a) leitor(a) esteja um pouco familiarizado com JSF. Neste exemplo vamos utilizar o tipo Float para armazenar nosso valor monetário, mas poderia ser qualquer outra. Este valor será armazenado diretamente no Managed Bean.

package br.com.exemplo.ManagedBean;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class ExemploMonetarioMB {

	private Float valorMonetario = 0f;

	public String mostraValor() {
		return "mostraValor.xhtml";
	}

	public Float getValorMonetario() {
		return valorMonetario;
	}

	public void setValorMonetario(Float valorMonetario) {
		this.valorMonetario = valorMonetario;
	}

}

Vamos precisar do jQuery e do plugin jQuery Price Format. Após o download dos mesmos, criamos uma pasta chamada “js” dentro de WebContent/resources para colocarmos nossos arquivos JavaScript. Precisamos agora chamar os arquivos “.js” para a nossa página.

<h:outputScript name="jquery.min.js" library="/js" />
<h:outputScript name="jquery_price.js" library="/js" />

Na tela temos somente um campo que irá conter o valor digitado pelo usuário.

<h:form>
    <h:outputLabel value="Digite o valor:" />
    <h:inputText value="#{exemploMonetarioMB.valorMonetario}" converter="dinheiroConverter" styleClass="monetario" />
    <h:commandButton value="Ok" action="#{exemploMonetarioMB.mostraValor}" />
</h:form>

Graças  ao jQuery, com um comando conseguimos formatar mais de um componente, caso houvesse, utilizando o seletor de classe. Colocamos uma classe(neste caso “monetario”, mas poderia ser qualquer outra) nos componentes que queremos formatar com o jQuery Price Format, e chamamos a função assim que a página estiver carregada, utilizando “(document).ready”.

<script type="text/javascript">

	 jQuery(document).ready(function(){
		jQuery('.monetario').priceFormat({
			prefix:'R$ '
		});
	});
</script>

Agora, está faltando somente implementar o nosso Converter, que será responsável por fazer a conversão dos valores da tela para o Java e vice-versa.

package br.com.exemplo.converter;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.FacesConverter;

@FacesConverter(forClass = Float.class, value = "dinheiroConverter")
public class DinheiroConverter implements Converter {

	@Override
	public Object getAsObject(FacesContext context, UIComponent component,
			String value) {
		if (value != null && !value.equals("")) {
			String str = value.trim();

			StringBuilder sb = new StringBuilder();
			for (int i = 0; i < str.length(); i++) {
				char ch = str.charAt(i);
				if (Character.isDigit(ch) || ch == '.') {
					sb.append(ch);
				}
			}

			return new Float(sb.toString());
		}
		return null;
	}

	@Override
	public String getAsString(FacesContext context, UIComponent component,
			Object value) {
		if (value != null) {
			String prefixoMoeda = "R$ ";
			StringBuilder s = new StringBuilder(value.toString());
			if (s.substring(s.indexOf(String.valueOf('.'))).length() == 2) {
				s.append("0");
			}

			for (int i = s.indexOf(String.valueOf('.')) - 3; i > 0; i -= 3) {
				s.insert(i, ',');
			}
			return prefixoMoeda + " " + s.toString();
		}
		return "";
	}
}

Dessa forma, tem-se como resultado a tela de inserção do valor:

E após clicar em “Ok” mostramos os valores da forma nativa, em nosso caso Float, e utilizando o Converter:

 

Você pode baixar o projeto(para Eclipse) neste link.

Aptana, o substituto do Dreamweaver para Linux

Quem utiliza Linux para trabalhar com Web Design sabe que um grande problema é encontrar um IDE que tenha suporte as várias linguagens de desenvolvimento de páginas web. Essa dificuldade é ainda maior quando se conhece o Dreamweaver, que é um excelente ambiente de desenvolvimento web. No entanto, o Aptana é um IDE que tentará diminuir essa grave lacuna no Linux.
O Aptana é um IDE multi-plataforma open-source baseada no Eclipse e que suporta uma grande quantidade de linguagens de programação web. É compatível com as seguintes linguagens: CSS, HTML, JavaScript, PHP, Ruby on Rails, Adobe Air e muito mais, bastando, para isso, instalar o plugin apropriado.

Instalação

Comece fazendo o download no site abaixo:

http://www.aptana.com/studio/download

Depois do download descompacte o arquivo, será necessário dar permissão de execução ao programa, para isso clique com o botão direito do mouse sobre o arquivo “AptanaStudio” no menu suspenso escolha “propriedades”, agora na página que abrir navegue até a aba permissões e selecione o campo “permitir execução do arquivo como um programa”, ai é só executar o programa, basta dar duplo clique no ficheiro “AptanaStudio”.

Crie um atalho para o Aptana

Para não precisar ir toda vez até a pasta do programa para executar o Aptana vamos criar um atalho no Menu do Painel do Gnome, acesse o menu Sistema->Preferências->Menu Principal. Na janela que abrir, selecione a secção onde quer adicionar o programa (aconselho a secção Desenvolvimento) e clique no botão “Novo Item”. Na nova janela deverá preencher da seguinte forma:

  • Nome: “Aptana Studio”
  • Comando: Clique no botão “Navegar” e navegue até ao ficheiro “AptanaStudio” referido acima.
  • Comentário: “IDE para WebDesign”