jQuery

Conheça o Blisk: Um navegador voltado para desenvolvedores

Imagina unir o desempenho do Chromium com as funcionalidades de desenvolvedor que o FirefoxDeveloper fornece.

Esse é o Blisk, um navegador totalmente voltado para desenvolvedores. Com ele você desenvolve e testa seus websites em qualquer tipo de dispositivo.

Segue seus principais recursos:

  • Emula os mais variados tipos de smartphones e tablets
  • A URL e scroll do mobile e desktop são sincronizados
  • Blisk atualiza a página automaticamente quando o código fonte é alterado.
  • É possível debugar desktop e mobile com as DevTools
  • Blisk funciona com qualquer IDE, linguagem e framework.

Para quem tiver interesse: blisk.io


Assim diz o Senhor DEUS, que congrega os dispersos de Israel: Ainda ajuntarei outros aos que já se lhe ajuntaram. Isaías 56:8

Anúncios

Obtendo paleta de cores com Color Thief

Uma dica bem legal é para obter a paleta de cores de uma imagem, para isso conheci o framework Color Thief, que apenas com JS faz essa extração dessas informações de uma imagem.

Sua utilização é bem simples. Veja o exemplo abaixo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js'></script>
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.0.1/color-thief.min.js' ></script>
    <script type='text/javascript'>
        jQuery(document).ready(function(){
            var myImage = this.querySelector('#myImg');
            var colorThief = new ColorThief();
            var colors = colorThief.getPalette(myImage);
            
            for(var k =0; k < colors.length; k++){
                cor = colors[k];
                console.log(cor);
                var pal = $("<div/>");
                pal.css('width', '50px').css('height', '50px');
                pal.css('background-color', 'rgb('+cor[0]+', '+cor[1]+', '+cor[2]+')');
                $('#colors').append(pal);
            }
        });
    </script>

</head>
<body>
    <img id='myImg' width="500" height="400" src='gb.jpg' />
    <div id='colors'></div>
</body>
</html>

Com o método querySelector obtemos a imagem em nosso DOM, após isso instanciamos o objeto ColorThief e assim utilizamos o método getPalette que traz todas as cores encontradas na imagem.

Em seguida fazemos um loop nas cores retornadas e criamos um elemento div para cada cor usando jQuery, dentro da div alteramos as cores do background com o que é retornado  pelo método getPalette.

Também da para obter a cor principal de uma imagem com o método getColor(image).

O resultado é esse:

color-thief

Bem útil quando temos que editar a cor de uma tela de acordo com a imagem subida por um usuário, achei bem legal e resolvi compartilhar.


O que faz justiça aos oprimidos, o que dá pão aos famintos. O Senhor solta os encarcerados. Salmos 146:7

Gerando PDF com jsPDF

Recentemente eu conheci o plugin jsPDF, feito totalmente em JavaScript ele permite a geração de PDF totalmente do lado do cliente baseado em jQuery.

A utilização dele é bem simples :

var doc = new jsPDF();

doc.setFontSize(40);
doc.text(40, 30, "Teste PDF", 0);

Veja o resultado :

2016-09-23_1536

O plugin também permite que você converta um html em pdf fazendo com que a geração do documento seja feito de maneira bem mais simples.

Você pode encontrar as demais funcionalidades do plugin e sua documentação em seu site: http://bit.ly/1yk7mjF.


E nós conhecemos, e cremos no amor que Deus nos tem. Deus é amor; e quem está em amor está em Deus, e Deus nele. 1 João 4:16

Enviando formulários com Ajax

Recentemente precisei enviar um form via Ajax e não foi possível usar a função nativa do jQuery pela necessidade de enviar imagens junto com os dados do meu formulário. Foi ai que conheci o framework jQuery Ajax Form.  Com ele é muito simples enviar um formulário via Ajax para o servidor, basta baixar o plugin no link destacado anteriormente, anexar ao seu projeto (requer jQuery previamente configurado) e seguir o exemplo abaixo.

<form id="myForm" action="comment.php" method="post"> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form>

Depois, basta selecionarmos o formulário e chamar o método ajaxForm.

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
 
    <script> 
        // espera pelo DOM ser carregado 
        $(document).ready(function() { 
            // faz o bind do nosso formulário e atribui um callback
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
    </script> 
</head> 
...

Rode a aplicação e salve o formulário, o mesmo será processado de maneira assíncrona.

Esse plugin aceita várias opções que podem ser agregadas as chamadas, métodos de callback, configurações da requisição e por aí vai. Essas opções podem ser visualizadas nesse link.


Dá força ao cansado, e multiplica as forças ao que não tem nenhum vigor.
Isaías 40:29

 

Disparando seu próprio evento com jQuery

jquery_logo
Nesse post vou compartilhar algo que aprendi recentemente no jQuery, criar o seu próprio evento. Vamos supor que você queira disparar um evento chamado enterKey toda vez que o seu usuário apertar a tecla enter em um determinado campo.

$('.seuCampo').bind("enterKey",function(e){
   //trate o evento aqui
});
$('.seuCampo').keyup(function(e){
    if(e.keyCode == 13)
    {
        $(this).trigger("enterKey");
    }
});

Primeiro tratamos o evento original (keyup) e dentro dele verificamos se a tecla pressionada é o enter (keyCode == 13), caso ok disparamos o evento enterKey através do método trigger do jQuery.

Para “ouvirmos” esse evento basta utilizarmos o método bind junto com um método de callback que será chamado toda vez que o evento acontecer.

Simples, né ?


Encontraram-me no dia da minha calamidade; porém o Senhor se fez o meu amparo.
2 Samuel 22:19

Integrando jQuery Mobile com JSF 2.2.

Nesse post ensinarei a integrar o jQuery Mobile (framework baseado em jQuery e jQuery UI para construção de interfaces web para dispositivos móveis) com o JSF.

O primeiro passo é criar um projeto Maven com JSF 2.2. no Eclipse (Ensinei isso no post anterior).

O segundo passo é baixar a biblioteca do jQuery Mobile 1.4.5 em:

Zip File: jquery.mobile-1.4.5.zip

Agora vamos adicionar o framework em nosso projeto JSF 2.2., crie dentro da pasta WebContent uma pasta chamada resources, dentro da pasta resources crie uma pasta chamada skin e por fim dentro de skin crie as pastas css js.

A estrutura deverá ficar dessa maneira:

Captura de Tela 2015-05-25 às 21.03.44
Descompacte o arquivo jquery.mobile-1.4.5.zip  e copie as o arquivo jquery.mobile-1.4.5.min.css e a pasta images para a pasta css. E copie o arquivo jquery.mobile-1.4.5.min.js para a pasta js do projeto. Na pasta descompactada abra a pasta demo e logo em seguida a pasta js e copie o arquivo jquery.min.js para a pasta js do projeto.

Pronto, temos o mínimo para iniciar um projeto jQuery Mobile!

Crie um arquivo index.xhtml com o seguinte conteúdo:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:jsf="http://xmlns.jcp.org/jsf">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Hello JQM</title>
	<h:outputStylesheet library="skin"
		name="css/jquery.mobile-1.4.5.min.css" />
	<h:outputScript library="skin" name="js/jquery.min.js" />
	<h:outputScript library="skin" name="js/jquery.mobile-1.4.5.min.js" />
</h:head>
<h:body>
	<div id="pagina1" data-role="page">
		<div data-role="header">
			<h1>Exemplo jQuery Mobile com JSF 2.2.</h1>
		</div>
		<div role="main" class="ui-content">
        	<form data-ajax="false"  jsf:id="form" jsf:prependId="false">
			    <input placeholder="Texto..." type="text" name="texto"
					jsf:value="#{jqueryManagedBean.texto}" jsf:id="texto"  />     
				<button jsf:action="#{jqueryManagedBean.irPagina2}">Envia</button>
			</form>
		</div>
	</div>
</h:body>
</html>

Nessa tela chamamos as bibliotecas do jQuery Mobile usando as tags h:outputStylesheet e h:outputScript. E depois criamos uma página do jQuery com um campo de texto e um botão que ficará conectado à um Managed Bean.

A novidade está no namespace jsf onde utilizamos ele para chamar as propriedades do JSF dentro do HTML. Essa novidade está disponível apenas na versão 2.2 do framework.

No input text ligamos o campo com o atributo texto da classe JqueryManagedBean que será apresentada em breve utilizando o atributo jsf:value.

E no button usamos o atributo jsf:action para chamar o metódo irPagina2 do nosso managed bean.

Visite esse link para mais detalhes:

https://fernandofranzini.wordpress.com/2014/10/17/jsf2-2-html5-combinacao-perfeita-para-2015/

No nosso form usamos os atributos jsf:id e jsf:prependId que servem para definir o id e impedir que o JSF gere um id de maneira automática respectivamente.

E também desabilitamos o ajax do jQuery Mobile usando o atributo data-ajax= ‘false’.

Aqui segue o código de nossa managed bean com escopo de sessão (SessionScoped) que ficará responsável por definir o atributo texto e o método irPagina2 que redirecionará o usuário para a pagina2.xhtml (Em breve apresentada):

package hellomaven;


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


@SessionScoped
@ManagedBean
public class JqueryManagedBean {
	
	private String texto;
	
	
	public String getTexto(){
		return this.texto;
	}
	
	public void setTexto(String texto){
		this.texto = texto;
	}
	
	
	public String irPagina2(){
		return "pagina2";
	}
	
}

E por fim segue o código da pagina2.xhtml que apenas apresentará o que o usuário digitou no campo de texto da tela anterior.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:jsf="http://xmlns.jcp.org/jsf"
	xmlns:f="http://java.sun.com/jsf/core">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Página 2</title>
	<h:outputStylesheet library="skin"
		name="css/jquery.mobile-1.4.5.min.css" />
	<h:outputScript library="skin" name="js/jquery.min.js" />
	<h:outputScript library="skin" name="js/jquery.mobile-1.4.5.min.js" />
</h:head>
<h:body>
	<div id="pagina1" data-role="page">
		<div data-role="header">
			<h1>Página 2.</h1>
		</div>
		<div role="main" class="ui-content">
			<h:outputText value="O Texto digitado foi: #{jqueryManagedBean.texto}" />
		</div>
	</div>
</h:body>
</html>

O Resultado esperado disso tudo se ve nas imagens 1 e 2:

Captura de Tela 2015-06-06 às 17.48.07

Imagem 1

Captura de Tela 2015-06-06 às 17.48.24

Imagem 2


Portanto, qualquer que me confessar diante dos homens, eu o confessarei diante de meu Pai, que está nos céus. Mateus10:32

Montadora Dodge : um grande case jQuery Mobile


IMG_1634 (1)

A montadora Americana Dodge utiliza jQuery Mobile em seu site na versão para dispositivos móveis desde 2012. Um site totalmente robusto, possui navegação navegação canivete na esquerda para o menu e na direita para filtro de localização, além de tudo isso conta com uma UX (User eXperience) otimizada.

IMG_1635

 

A Dodge não é o único case, para conferir mais grandes empresas que adotou essa tecnologia basta acessar o link : http://www.jqmgallery.com/

Assim como o Pai me conhece a mim, também eu conheço o Pai, e dou a minha vida pelas ovelhas. João 10:15