ExtJS Jumpstart Parte 2

27
Ext JS Jumpstart Por Daniel da Cunha Bueno / 2014

description

Segunda apresentação do grupo DevRioClaro sobre ExtJS. Detalhando o uso do SenchaCMD e do JSDuck como ferramenta de documentação de código fonte javascript.

Transcript of ExtJS Jumpstart Parte 2

Page 1: ExtJS Jumpstart Parte 2

Ext JS

Jumpstart

Por Daniel da Cunha Bueno / 2014

Page 3: ExtJS Jumpstart Parte 2

Software não é feito por

máquinas,mas por

pessoas!

Page 4: ExtJS Jumpstart Parte 2

Espaço físicoInfra-estrutura dos encontros

www.mappase.com.br

Page 5: ExtJS Jumpstart Parte 2

www.novatec.com.br

Page 6: ExtJS Jumpstart Parte 2

2 e-Books para sorteio no dia do evento!15% desconto - “DevRioClaro_16AGO ”

(válido até 01/11/2014)

www.casadocodigo.com.br

Page 7: ExtJS Jumpstart Parte 2

Desconto de 40% livro impresso e 10% eBook - “V00031”(válido até [while true])

www.lcm.com.br

Page 8: ExtJS Jumpstart Parte 2

Sobre Mim

{nome: ‘Daniel da Cunha Bueno’,idade: 31,email: ‘[email protected]’,entusiastaWebDesktopApps: true,

github: https://github.com/danielcbueno}

Page 9: ExtJS Jumpstart Parte 2

ExtJS – Jumpstar parte 2

» Lembrando a todos que essa é uma apresentação em continuação a apresentação feita no dia 19/07/2014.

» Interessados podem ver a apresentação no slideshare que esta dentro do grupo DevRioClaro no facebook.

» Se alguém ficar com a dúvida, por favor, me mande mande e-mail, ou entre em contato pelo facebook.

Page 10: ExtJS Jumpstart Parte 2

Mas o que é SenchaCMD?

» É um utilitário de comando de linha que permite várias operações dentro do ambiente de desenvolvimento sencha.

» Serve tanto para aplicações desenvolvida em ExtJS e Sencha Touch.

» Auxilia na organização dos fontes a serem gerados pela aplicação.

» Gera temas para a sua aplicação.

Page 11: ExtJS Jumpstart Parte 2

Instalação – Pré-requisitos

» Pré-requisitos (Ambiente Windows): ˃ Java˃ Ruby (versão 1.9.2)˃ Download do ExtJS ou SenchaTouch.˃ SenchaCmd através do site www.sencha.com

ou procure por “SenchaCmd Download” no google.

Page 12: ExtJS Jumpstart Parte 2

Rodando SenchaCmd

» Para rodar o SenchaCmd, basta digitar o commando “sencha” no prompt do DOS (Powershell / Terminal) você verá o resultado.

Page 13: ExtJS Jumpstart Parte 2

Antes de começar?

» Bem, agora que rodamos e descobrimos que o SenchaCMD oferece diversas opções de execução, uma das mais importantes a serem consideradas é a opção sencha help.

» Exemplos: ˃ sencha help generate˃ sencha help generate workspace˃ Sencha help generate app

Page 14: ExtJS Jumpstart Parte 2

Por onde começar?

» Como vimos no help, o comando oferece uma série opções, mas no caso da apresentação anterior, vamos começar com a geração de um workspace.

Page 15: ExtJS Jumpstart Parte 2

O que é um workspace ?

» Workspace, como o próprio nome diz é um espaço de trabalho.

» Auxilia para que o seu fonte não seja desorganizado.

» Cria todas as estruturas de diretório de acordo com o padrão de trabalho de aplicações ExtJS.

Page 16: ExtJS Jumpstart Parte 2

Como criar um workspace.

» sencha generate workspace --path c:\DevRioClaroWorkspace

» Ele irá criar o diretório pronto para hospedar as suas aplicações e seus packages.

Page 17: ExtJS Jumpstart Parte 2

O que são packages ?

» Packages são como uma biblioteca que você pode colocar o seu código isolado da aplicação.

» Podem organizar a regra de negócio de estrutura de componentes a ser utilizada pelas aplicações.

Page 18: ExtJS Jumpstart Parte 2

Antes de criar uma package

» Para comandos que funcionam com geração de packages e ou aplicações, é muito importante atentar para o diretório do SDK.

» No meu exemplo eu deixarei tudo no diretório D:\ExtJS\Frameworks a título de demonstração.

» Porque a geração de uma package ou de aplicação você vai precisar de um SDK já disponível na sua máquina.

» Existem duas maneiras de você utilizar o diretório de SDK, ou você vai até através do prompt ou vou utiliza o argumento --sdk.

Page 19: ExtJS Jumpstart Parte 2

Criando uma package

» sencha generate package˃ --name [Nome do Package]

˃ Exemplo:˃ Sencha generate package –name Calc˃ Esse comando deverá ser executado na raiz da workspace.

Page 20: ExtJS Jumpstart Parte 2

Criando um aplicação

» sencha generate app˃ --name [Nome da application]˃ --Path

˃ Exemplo:˃ Sencha generate app –name Demo01˃ Esse comando deverá ser executado na raiz do SDK ou utilizar o

parâmetro --sdk.

Page 21: ExtJS Jumpstart Parte 2

Outras opções

» Sencha web ˃ Servidor Web embutido para testar aplicações de maneira rápida.˃ sencha web --port 1234 [start|stop]

» Sencha generate theme˃ Gera temas para sua aplicação

» Sencha repositório˃ sencha repository init --name DevRioClaro --email

[email protected]

» Sencha generate theme˃ sencha generate theme --name Tema1˃ No diretório da aplicação.(Ele vai usar o tema da aplicação para gerar

um novo tema.)

Page 22: ExtJS Jumpstart Parte 2

Mais opções

» Sencha app build˃ Compila a aplicação.

» Sencha app refresh˃ Atualiza as referência do projeto.

» Sencha ant clean˃ Limpa o diretório de build.

Page 23: ExtJS Jumpstart Parte 2

JSDuck

» Uma ferramenta que auxilia na documentação de códigos fontes e de aplicação criada pela sencha labs.

» Gera a documentção similar a própria documentação do Ext 4.2.1.

» Fácil de usar.» O seu fonte tem que ser todo salvo em UTF-8

with boom.

Page 24: ExtJS Jumpstart Parte 2

Demo do JSDuck

Page 25: ExtJS Jumpstart Parte 2

Dúvidas ?

Page 26: ExtJS Jumpstart Parte 2

Links

» http://www.sencha.com» http://extjs.eu/ext-examples/

Page 27: ExtJS Jumpstart Parte 2

Obrigado!