Arquivo da tag: jquery

Personalizando Select com JQuery

Muitas vezes nos deparamos com situações que exigem o uso da propriedade select em algum projeto web. As vezes o projeto exige dos programadores que o select seja mais elaborado ou diferenciado.
Nos padrões do HTML temos um select com poucas alternativas de customização, o que, em muitos casos não vem acalhar com as nossas reais necessidades de personalização.
Quando tudo esta difícil na web aparece o JQuery para resolver a nossa vida. O plugin Custom Select trás toda a flexibilidade para adaptarmos o nosso select da forma que for necessário.

Exemplo do select no código HTML:

<select name="dormitorios"  title="Exemplo:">
    <option value="1">1 exemplar</option>
    <option value="2">2 exemplar </option>
    <option value="3">3 exemplar </option>
    <option value="4">4 exemplar </option>
    <option value="5">5 exemplar </option>
</select>

Vamos para a configuração:

1 – Baixar a biblioteca principal do JQuery  jquery.tools.min.js

2 -Baixar o plugin jquery.customselect.js

3 – Chamar os arquivos js em seu html:

<script type="text/javascript" src="/path/to/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.customselect.js"></script>

4 – Inserir em seu código HTML a função que executa o nosso plugin;

<script type="text/javascript">
$(document).ready(function(){
    $('#select').SelectCustomizer();
});
</script>

 

CSS do select

Propriedade 1 – _iconselect

Vai ser a primeira parte do nosso select, onde se localizarão configurações como: tamanho da fonte, tipo de fonte, background do campo, entre outros.

Esta propriedade _iconselect é um sufixo gerado pelo próprio plugin.

Ex: A sua configuração no CSS ficará assim:

select_iconselect {
...
}

Propriedade 2 – _options

Esta propriedade é responsável pela configuração da nossa caixa de itens, ou seja, propriedades como tamanho da caixa, barra de rolagem entre outras. A propriedade no código CSS ficará assim:

select_options {
...
}

 

Propriedade 3 – selectwrapper e selectfooter

Esta propriedade vai configurar todos os itens do nosso select em associação com outras propriedades.

Aqui vai alguns códigos que serão relacionados com essa propriedade para a personalização do nosso select no CSS:

.selectwrapper {…}
.selectwrapper .selectitems{...}
.selectwrapper .last{...}
.selectwrapper .selectitems span{...}
.selectwrapper .hoverclass {...}
.selectwrapper .selectedclass {…}

Também temos a propriedade selectfooter que como o próprio nome induz, faz referencia a configurações do nosso rodapé, da caixa de itens.
No código CSS ficará assim:

.selectfooter {…}

Abaixo a imagem de um select personalizado:

OBS: Lembrando que estas propriedades são geradas automaticamente pelo nosso plugin. Por isso não incluímos nem uma dessas classes ao nosso HTML, apenas a propriedade select em sua forma natural.

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.