jQuery Mobile

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

Livro – JQuery Mobile – Casa do Código

 A cada dia, o desenvolvimento para dispositivos móveis vem ganhando  um grande mercado, e uma das provas deste crescimento é a criação de  diversas tecnologias para este fim. Apesar de termos ferramentas para o  desenvolvimento nativo, como Android e iOs, existem sites e sistemas    que devem ser visualizados no browser e seguem um processo diferente.

Neste livro, Daniel Schmitz aborda o processo de criar sistemas para serem exibidos no navegador, escolhendo como biblioteca o jQuery Mobile. Seguindo a ideia de que menos é mais, podemos criar interfaces ricas para o mobile com apenas um conjunto limitado de componentes.

Para compra-lo clique aqui.


Quer aprender jQuery Mobile e se tornar um profissional na área ? A FOR-J disponibiliza um curso de desenvolvimento jQuery Mobile para você, confira no link abaixo :


O coração do homem planeja o seu caminho, mas o Senhor lhe dirige os passos.
Provérbios 16:9

Customizando o tema do seu app jQuery Mobile

 Theme Roller
Um dos pontos fortes do desenvolvimento com jQuery Mobile é a poderosa ferramenta que o mesmo disponibiliza para editar o estilo das aplicações, chamada Theme Roller.

O Theme Roller é ferramenta criada por um grupo de desenvolvimento da Adobe, com ela é possível gerar uma folha de estilos para um tema com paletas de cores personalizadas. Com ela é possível criar novas paletas, personalizar cada componente com a cor desejada e depois baixar a folha de estilos para se aplicar no projeto.

Sem ela, para customizarmos os estilos do nosso app, seria bem trabalhoso, teríamos que editar as folhas de estilos na unha, algo que seria totalmente improdutivo já que um dos objetivos do jQuery Mobile é codificar o mínimo possível e obter grandes resultados, seguindo as premissas de seu framework base “Write less, do more”.


Quer aprender jQuery Mobile e se tornar um profissional na área ? A FOR-J disponibiliza um curso de desenvolvimento jQuery Mobile para você, confira no link abaixo :


Porque assim diz o Senhor aos homens de Judá e a Jerusalém: Preparai para vós o campo de lavoura, e não semeeis entre espinhos.
Jeremias 4:3

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

Construindo aplicações jQuery Mobile com Rational Application Developer

A IBM possui uma aplicação chamada Rational Application Developer onde é possível construir de maneira rápida e intuitiva interfaces com o plugin jQuery Mobile.

A licença chega a aproximadamente 10 mil dólares.

O download da versão trial pode ser feito em:

http://www.ibm.com/developerworks/downloads/r/rad/

Veja um vídeo demonstrativo:


Mas o Altíssimo não habita em templos feitos por mãos de homens, como diz o profeta: Atos 7:48

Os 3 tipos de experiências Mobile

Há várias maneiras de construir aplicações para dispositivos móveis, cada uma com vantagens e desvantagens. Basicamente temos três tipos NATIVO, WEB e HÍBRIDO.

Nessa figura abaixo, nós podemos ver como os 3 tipos são comparados tanto em questão de design quanto arquitetura. Ela mostra como os aplicativos irão acessar o banco de dados ou web service para carregar dados.

native-web-hybrid


De maneira resumida é descrito os 3 tipos de experiência mobile:

APP NATIVO

Apps nativos são escritos usando a linguagem padrão da plataforma, Objetictive C ou Swift para iOS e Java para Android. Apps nativos são compilados e executados diretamente no dispositivo. Usando a SDK o app pode se comunicar com a plataforma para acessar os dados do dispositivo ou carregar dados de um serviço externo usando requisições HTTP.

Alguns SDK’s do mercado:

http://developer.android.com/index.html
https://developer.apple.com/devcenter/ios/index.action
https://dev.windowsphone.com/pt-br/dashboard

APP WEB

Apps web são aplicações que são acessadas através de navegadores mobile. Onde é utilizado a linguagem HTML5 para construir sua interface. Uma das grandes vantagens é que um único  código funciona para qualquer plataforma que suporta essa tecnologia.

Alguns frameworks do mercado:

https://jquerymobile.com/
http://www.telerik.com/kendo-ui
https://www.sencha.com/products/touch/

APP HÍBRIDO

Um app híbrido é um app que contém um webview para rodar uma aplicação dentro de um app nativo, esse recurso permite que sua aplicação possa se comunicar com a plataforma nativa do dispositivo. Ou seja, você pode rodar aplicações no dispositivo como se ela fosse nativa e ter acesso aos recursos do dispositivo, tal como a câmera, GPS e outros.

Alguns frameworks do mercado:

https://cordova.apache.org/

http://www.appcelerator.com/product/


Em Deus está a minha salvação e a minha glória; a rocha da minha fortaleza, e o meu refúgio estão em Deus. Salmos 62:7

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