DREAMWEAVER SPRY & WIDGETS

NDICE
NDICE .......................................................................................................................................... 2 ABRA SPRY DREAMWEAVER ................................................................................................ 3

Spry MenuBar................................................................................................. 7 Spry Accordion ............................................................................................. 11 Spry Collapsible Panel.................................................................................. 12 Spry Tabbed Panels ..................................................................................... 13 Spry Tooltip................................................................................................... 15 Spry Validao de Formulrio.................................................................... 16
ADOBE WIDGET BROWSER .................................................................................................... 22

Spry Image Slideshow. ................................................................................. 25 Zoom em parte da imagem........................................................................... 33 Google Maps ................................................................................................ 36 Redes Sociais............................................................................................... 40

ABRA SPRY DREAMWEAVER

Embora tenha sido lanado na verso CS3 do Dreamweaver as ferramentas Spry ainda so pouco utilizadas. O objetivo apresentar a voc como tirar proveito destas ferramentas. O framework Spry so bibliotecas no formato JavaScript e CSS, as quais permitem aos usurios do Dreamweaver desenvolver interfaces mais ricas e dinmicas. Alm de possibilitar a exibio de dados no formato XML e criar elementos interativos em pginas que exibem contedo dinmico sem a necessidade de tais pginas se carregarem por completo. O Dreamweaver disponibiliza o Spry em duas perspectivas, uma para designers e outra para programadores. Os designers podero criar efeitos visuais como Appear, Fade, Blinds (Up e Down), Grow, Shake, Slide, entre vrios outros. J os programadores tero facilidades ao trabalhar com o Ajax e na exibio de dados armazenados em arquivos XML. Alm desses recursos, tantos para designers quanto para programadores, o Spry oferece alguns widgets que auxiliam na validao de formulrios. Vamos analisar a interface do Dreamweaver e localizar os recursos do Spry. Ele possui um painel chamado Spry.

No painel DATA

No painel Forms

No painel Layout

Os demais recursos oferecidos pelo Spry so os efeitos, effects. Ambos esto localizados na opo Effects do painel Behaviors.

Quando voc seleciona algum recurso do spry no Documento window do Dreamweaver, o Property inspector atualizado e exibe as configuraes de recurso em questo.

O Spry so bibliotecas no formato JavaScript e CSS. O que significa dizer que para cada recurso do Spry h um arquivo JavaScript e outro CSS relacionado. O arquivo JavaScript o responsvel pelo comportamento, interatividade, animao e o arquivo CSS se encarrega da estilizao. Quando voc utiliza algum recurso do Spry e posteriormente salva pgina em questo, exibido o painel Copy Dependent Files, o qual copia para o seu site, configurado no Dreamweaver, os arquivos relacionados ao recurso utilizado. Alm de copiar os arquivos, ele lhe informa quais so os arquivos e exibe um alerta para lembrar-lhe de enviar os arquivos para o servidor na web.

Spry MenuBar
O primeiro componente Spry que vamos trabalhar o MenuBar. Pelo painel Spry clique no componente,ele perguntar se quer criar um vertical ou horizontal.

Escolha e clique em OK.

Salve seu arquivo para que ele gere os demais arquivos necessrios. Pela barra de propriedades voc pode adicionar ou remover elementos de seu componente, acrescentar links, etc. Ao salvar e testar, voc j poder ter idia de como ficar sua barra de navegao.

Ao alterar as propriedades na barra ele muda as informaes no painel do Dreamweaver.

Se precisar mudar alguma formatao de seu menu, ser necessrio que isso seja feito pelo painel de CSS.

Por exemplo no modelo gerado pelo Dreamweaver, o fundo de cada elemento no Over azul, caso queira que ele mude de cor para por exemplo vermelho, localize no arquivo CSS onde est esta propriedade e mude a cor.

Para verificar a mudana, necessrio utilizar o comando File/Save All para que ele salve o arquivo CSS. Depois recarregue a pgina.

10

Spry Accordion
O Spry Accordion, funciona da mesma forma que o componente Accordion que vimos no Flash, ele permite adicionar contedo em seu site em elementos como se fossem sanfonas. Crie um novo arquivo e clique no componente Accordion, ser solicitado que a pgina seja salva. Salve-a e seu componente estar disponvel no Dreamweaver

11

O seu funcionamento semelhante ao visto no menuBar, posso adicionar ou remover contedo pela barra de propriedades. No campo Content de cada ABA do Accordion, posso adicionar o contedo HTML.

Spry Collapsible Panel

Funciona de forma muito semelhante ao Accordion, ele usa uma ABA que ao ser clicada mostra / oculta o contedo. Em uma nova pgina clique sobre o componente Collapsible Panel

12

Observe pela barra de propriedades que podemos deix-la aberta ou fechada. Adicione seu contedo e salve seu arquivo.

Ao testar, voc poder verificar que ao clicar sobre o ttulo da barra, ela ir mostrar/ocultar o contedo.

Spry Tabbed Panels

O Spry Tabbed Panels um grupo de painis organizados por abas, onde cada uma delas exibida por vez, ou seja, quando o contedo de uma aba exibido, os demais permanecem oculto. Esse tipo de recurso muito utilizado na exibio de extenso contedo em espaos compactos. Clique no componente Spry Tabbed Panels para inseri-lo em seu documento.

Inicialmente ele cria duas TABS, mas seguindo a mesma lgica do que vimos acima, voc pode adicionar e inserir quantas ABAS forem necessrias. A propriedades Default panel permite que se defina qual a ABA a ser aberta ao

13

carregar a pgina. Vamos criar um Spry com sees como : Notcias, Esportes, Tecnologia e Entretenimento.

Vamos tematizar nossas Abas com a cor Branca de fundo e adicionar uma cor de contorno somente em baixo para cada uma das sees. A classe CSS que define as propriedades de cada uma das Abas TabbedPanelsTab.

Encontre este bloco CSS no cdigo de suas pginas e duplique criando um para cada ABA e mude a cor de contorno de baixo.

necessrio tambm mudar a chamada da classe de cada uma dos elementos: <body> <div id="TabbedPanels1" class="TabbedPanels"> <ul class="TabbedPanelsTabGroup"> <li class="TabbedPanelsTabNot" tabindex="0">Notcias</li> <li class="TabbedPanelsTabEsp" tabindex="0">Esportes</li> <li class="TabbedPanelsTabTec" tabindex="0">Tecnologia</li> <li class="TabbedPanelsTabEnt" tabindex="0">Entretenimento</li>

14

Adicione contedo a suas Abas

Spry Tooltip
O Tooltip, ou seja a dica/complemento que apresentado numa janela que aparece ao se passar o mouse sobre um elemento da pgina (chamaremos este de gatilho), uma ferramenta muito til em qualquer projeto de webdesign, e necessria em alguns. Est se tornando cada vez mais comum encontrarmos estas janelinhas flutuantes que servem como apndice para facilitar a navegao. Crie um novo Arquivo e salve-o, depois insira o componente Tooltip.

O texto que est na are em branco o texto que ser a chamada de seu Tooltip e o que est na DIV amarela ser o mostrado ao passar o mouse. Na barra de propriedades podemos definir se o tooltip seguir o mouse, se ele ficar oculto ao retirar o mouse e o efeito que ele ter ao aparecer e sumir.

15

Spry Validao de Formulrio

No curso WebKit 01, vimos como validar um formulrio no Dreamweaver atravs de comportamentos Javascript (Behaviors), agora vamos aprender como fazer o processo utilizando alguns componentes Spry. Monte o formulrio conforme abaixo:

Vamos utilizar os botes de validao da Aba Spry

Vamos trabalhar com 2 tipos que so os textbox e o textarea.

16

Coloque o cursor dentro da tabela ao lado do nome para incluir um text field clicando na primeira opo da rea marcada na imagem acima e ao abrir uma janela clique apenas em OK. Aps isso teremos o seguinte resultado mostrado na imagem abaixo.

Vamos fazer o mesmo passo para e-mail e assunto, e para a opo mensagem clicamos na ltima opo da barra de ferramentas marcadas na imagem mais acima, a opo textarea. Logo teremos o resultado abaixo. Antes de comear a validao vamos nomear os campos certinhos e definir o tamanho que voc achar melhor. Clique no campo nome e a opo azul vai aparecer, clique na opo azul que a barra de propriedades ir mostrar as opo de validao para tipo de campo.

17

Repare que est definido com Required para os campos. Abaixo de Preview states temos a ao na qual queremos que seja feita a validao, normalmente deixo no submit mesmo. Para a opo Type temos as seguintes opes:

Agora s escolher a melhor opo para cada campo atendendo as suas necessidades. A opo Type nesse artigo eu s vou usar para o campo email. Mas para o campo nome vamos colocar Min Chars = 3 e Max Chars = 200. Se for reparar assim que colocar Min Chars = 3 o para o campo nome a opo em vermelho com a mensagem em ingls, edite ela, repita para o mximo.

18

Faa o mesmo processo para o campo assunto e para o campo e-mail, porem para o campo e-mail no se esquea de selecionar o Type (Email Address) dele para e-mail. Para o Text Area alm de definirmos o nmero min e max de caracteres ainda podemos marcar as opes: Char Count: A medida que vai digitando vai mostrando um contador de caracteres ao lado. Chars remaining: Aps definirmos o nmero mximo de caracteres essa opo habilitada e a contagem ser decrescente at voc poder marcar o block extra characteres.

19

Salve e teste seu formulrio. Ao tentar enviar seu formulrio em Branco, ele avisar que necessrio preencher os campos.

Vamos corrigir as mensagens em ingls. Visualize no modo cdigo. Selecione o texto value is required e chame o comando de substituir (Menu Edit, Find And Replace. Preencha o texto em Replace, depois clique no boto Replace All.

20

Salve e teste novamente.

21

ADOBE WIDGET BROWSER

Um Widget da Web um componente de pginas da Web composto de HTML, CSS e JavaScript Exemplos de widgets da Web incluem acordeons, painis com guias e calendrios. Para acrescentar Widgets a sua pgina, clique no boto Extend Dreamweaver.

Escolha a opo Widget Browser.

Ser dado um aviso que precisa ser instalado a aplicao.

Clique em OK, voc ser direcionado ao Adobe Labs.

22

Faa o download do aplicativo AIR. Ser perguntado se voc quer realmente instalar o aplicativo.

Clique em instalar. Voc poder definir se quer deixar um cone dele em sua rea de trabalho e se quer iniciar seu aplicativo aps a instalao.

23

Clique em Continuar. Clique em aceitar na primeira tela.

24

Spry Image Slideshow.

Ao clicar ser necessrio se logar no site da Adobe.

25

Ao finalizar o login, ser mostrado a tela de detalhes do aplicativo.

Voc pode dar um Preview (topo a direita) par visualizar o efeito.

Estando no modo Preview, pode clicar em CODE e analisar a codificao do componente.

26

Para adicionar o componente para seus projetos clique no boto Add My Widgets (rodap direita). Aceite os termos, depois clique no boto Go to My Widgets.

Ao clicar em seu Widget, voc ter os PRESETS do desenvolvedor e a

27

possibilidade de acrescentar seus PRESETS.

Clique em Configure.

Voc poder configurar se o efeito deve iniciar automaticamente, se deve ter

28

efeito de lide, de Pan e Zoom, o tempo de exibio da imagem, o tempo da transio. Podemos configurar os ttulos de nossa galeria.

Os frames.

29

A ltima opo sobre os thumbnails como podemos configur-los.

Para salvar suas modificaes clique no boto Save Preset, e ele agora far parte de seus Presets. Retorne ao Dreamweaver, posicione o cursor onde deseja adicionar a sua galeria.

Na Painel Insert, ao deixarmos em Commom, agora estar disponvel a opo Widget.

30

Clique sobre ele, e ser mostrada uma tela com seus Widgets.

Clique em OK. Ser necessrio agora configurar seu Widget. Salve e clique no boto Live View, ou pelo seu navegador.

31

Para mudar as fotos, o processo simples. No Dreamweaver selecione a primeira foto, depois pelo Painel Files, abra a pasta onde esto as fotos as serem trabalhadas.

Basta apenas direcionar as imagens de thumbs e a grande para as que voc possui em sua pasta.

As fotos que esto a mais, basta selecion-las pelo modo de cdigo e excluir as suas linhas.

Se precisar adicionar mais fotos, basta duplicar umas linha de cdigo e mudar as imagens.

32

Voc pode testar outros widgets, como por exemplo adicionar em sua pgina atualizaes de seu Twitter.

Zoom em parte da imagem

Outro Widget bem interessante o jqZoom, ele permite que voc possa dar zoom em apenas uma parte de sua imagem. Alguns sites de comrcio eletrnico usam este recurso com frequncia.

Clique sobre esta opo. Clique no boto Add My Widgets

33

Ele foi acrescentado aos seus Widgets, clique sobre ele.

Na direita voc pode configurar o Zoom na imagem. No rodap desta tela voc pode configurar o aplicativo clicando em Configure.

34

Aps ter feito todas as configuraes, no Dreamweaver na ABA Commom, clique no boto Widget.

Escolha seu Widget.

Clique em OK.

35

Salve e visualize em seu navegador.

Para poder substituir a imagem voc precisar criar a imagem grande e a menor que vai aparecer na tela. Depois visualize seu cdigo. Observe a linha de chamada da imagem.

Nela voc tem BIG_IMAGE e SMALL_IMAGE, estas devem ser as imagens a serem trocadas.

Google Maps
Atualmente comum adicionarmos ao nosso site ao invs de somente o endereo, telefone tambm o mapa. E sempre digo que no necessrio sempre ficar reinventando a roda, pois se preciso disponibilizar um mapa, nada melhor que o Google maps para isso. Podemos adicion-lo de duas formas, uma copiando o cdigo gerado pelo

36

Google maps. Acesse maps.google.com, digite o endereo desejado.

Na direita clique em Link. Basta copiar o segundo bloco e colar em seu HTML.

Salve e visualize em seu navegador.

37

A segunda forma utilizando o Widget que faz este processo.

Clique sobre ele e adicione ao seus Widgets. Vamos precisar sabe a latitude e longitude para podermos configurar o widget. Faa a busca normalmente no Google maps, clique com o boto direito e escolha O que h aqui?

38

Observe que ser mostrada uma flecha e no campo de busca sero mostrada as coordenadas.

Volte ao seu Widget. Clique em Configure. Coloque as suas coordenadas.

39

Salve seu preset. Repita o processo para inserir o Widget do mapa. Apenas certifique-se de escolher o seu Preset.

Redes Sociais
Para finalizar nosso estudo com Widgets e esta apostila vamos implementar em uma pgina HTML os botes de redes sociais.

40

Clique sobre esta opo e depois clique em Add My Widgets Clique em Configure e necessrio preencher os campos com seus endereos.

Adicione o widget pelo Dreamweaver.

41

Salve e visualize.

Com isso finalizamos o material de Dreamweaver Spry e Widgets onde foi possvel acrescentar contedo rico em suas pginas sem a necessidade de nenhuma linha de cdigo. Para saber mais sobre o Dreamweaver e aplicaes WEB faa o download de nossas apostilas ou adquira o curso Webkit.

42