Diego A. Lusa - 2014

Agenda

• Sobre JQuery Mobile

• Funcionamento

• Estrutura básica

• Temas

• Eventos

• Exemplo prático

Um pouco sobre JQuery Mobile

• É um framework baseado em HTML5, Javascript e CSS, voltado a criação de interfaces responsivas para vários dispositivos

• Mantido pela JQuery Foundation

– JQuery

– JQuery UI

– QUnit

• Projeto open source

Um pouco sobre JQuery Mobile

• A versão estável mais atual é a 1.4.4

• O site oficial é http://jquerymobile.com/

JQuery Mobile – Compatibilidade (1.4) Recursos Totais Experiência aprimorada, mas sem

navegação por Ajax Suporte básico, mas funcional

Apple iOS 4-7.0 Android 4.4 (KitKat) Android 4.1-4.3 (Jelly Bean) Android 4.0 (ICS) Android 3.2 (Honeycomb) Android 2.1-2.3 Windows Phone 7.5-8 Blackberry 6-10 Blackberry Playbook (1.0-2.0) Palm WebOS (1.4-3.0)

Firefox Mobile 18 Chrome for Android 18 Skyfire 4.1 Opera Mobile 11.5-12 Meego 1.2 Tizen Samsung Bada 2.0 UC Browser Kindle 3, Fire, and Fire HD Nook Color 1.4.1 Chrome Desktop 16-24 Safari Desktop 5-6 Firefox Desktop 10-18 Internet Explorer 8-10 Opera Desktop 10-12

Opera Mini 7 Nokia Symbian^3

Internet Explorer 7 e mais antigos Apple iOS 3.x e mais antigos Blackberry 4-5 Windows Mobile Plataformas antigas

JQuery Mobile - Licença

• É concedido uso sob a licença MIT

– Pode-se utilizar o software para projetos proprietários

– O software desenvolvido permanece proprietário

– Não é necessário distribuir versões do código de forma aberta

Fonte: Arantes, C. A. Comparativo de Licenças de Código Aberto. Belo Horizonte, 2009.

Disponível em <http://homepages.dcc.ufmg.br/~alison/Monografia_Especializacao_Comparativo_licencas_codigo_aberto.pdf>. Acesso em: 23 out. 2014.

Custom Data Attributes

• Foram criados na especificação do HTML5

• Tem por objetivo transportar alguma semântica para a aplicação, mas nenhum sentido/efeito para o browser

• Todos os atributos custom devem ser prefixados com data- e não podem conter nenhum caractere em caixa alta.

Custom Data Attributes

• O desenvolvimento de interfaces com JQuery Mobile utiliza atributos data-*

• A lista com todos os atributos data-* utilizados podem ser encontrados em http://api.jquerymobile.com/data-attribute/

JQuery Mobile – Estrutura básica

• É preciso iniciar o site com a doctype HTML5

• No head do HTML é necessário referenciar o Javascript e CSS usados pelo framework

JQuery Mobile – Estrutura básica

• No head do HTML é preciso adicionar a tag meta, configurando o viewport

– Configura as dimensões

– Nível de zoom inicial

JQuery Mobile – Estrutura básica

JQuery Mobile – Estrutura básica

• Dentro da tag body do HTML configuram-se as visões ou páginas que irão compor o aplicativo.

• É possível configurar uma ou várias visões em um mesmo arquivo HTML.

• Toda visão é identificada pelo atributo data-role=“page”, geralmente colocada numa tag <div>.

JQuery Mobile – Estrutura básica

• Dentro do elemento definido como “page” criam-se três containers específicos:

header

main

footer

JQuery Mobile – Estrutura básica

• data-role="page"

– É a página que será exibida no web browser

• data-role=“header"

– Cria uma barra de ferramentas no topo da página

• data-role="main"

– Define o conteúdo da página

• data-role=“footer"

– Cria uma barra de ferramentas na parte inferior da página

JQuery Mobile - Criando Dialogs

• Deve-se utilizar o atributo data-dialog=”true” para gerar o efeito de uma caixa de diálogo.

JQuery Mobile - Efeitos de Transição

• Configurados através do atributo data-transition

• O atributo data-direction="reverse" inverte o sentido do efeito

• Aplica-se a transição para pages e dialogs

• Alguns efeitos:

– fade, flip, flow, slide, slidefade, slideup, turn, none

JQuery Mobile - Criando Temas

• Pode-se customizar a aparência visual dos elementos

• A ferramenta ThemeRoller pode ser utilizada para tal: http://themeroller.jquerymobile.com/

• Criado o tema, basta baixar o novo arquivo css e utilizá-lo

• Utilizar o atributo data-theme

JQuery Mobile - Eventos

• Todos os eventos da API JQuery

• E eventos específicos, como

– Toque

– Scroll

– Rotação

– Eventos de página (criada, escondida, etc.)

JQuery Mobile – Codificando...

Links Úteis

• http://api.jquerymobile.com/data-attribute/

• http://themeroller.jquerymobile.com/

• http://demos.jquerymobile.com/1.4.4/

• http://jquerymobile.com/

• http://api.jquerymobile.com/classes/

• http://www.w3schools.com/jquerymobile/

Contatos

• Linkedin – br.linkedin.com/in/diegolusa/

• Facebook – https://pt-br.facebook.com/diego.lusa

• Lattes – http://lattes.cnpq.br/2284574291171229

• E-mail – 83473@upf.br

OBRIGADO PELA ATENÇÃO