Tutorial de exemplo do Ultradev: 4 Instalação e uso de plug-ins
Autor:Eve Cole
Data da Última Atualização:2009-05-30 18:34:38
Capítulo 4: Instalação e uso simples do plug-in ultratrade
O uso de plug-ins pode nos ajudar a implementar rapidamente algumas funções e evitar muitos problemas de programação. Antigamente, os plug-ins Dreamweaver e Ultradev exigiam a cópia manual dos arquivos para o diretório correspondente antes que pudessem funcionar, o que era bastante problemático para quem não estava familiarizado com esse aspecto. Na versão 4.0, a Marcomedia utilizava um software chamado Extention Manager Tools. para ajudar os usuários a instalar plug-ins, e o formato do plug-in também mudou para *.mxp.
O Extension Manager é instalado quando o Dreamweaver ou Ultradev é instalado. Podemos abri-lo em Iniciar->Programas->Macromedia Extension Manager.
A interface de exibição é simples e clara. Os dois botões no lado esquerdo da barra de ferramentas são de instalação e desinstalação. O nome, versão, tipo, autor e outras informações dos plug-ins instalados serão listados na janela abaixo da barra de ferramentas. A janela abaixo lista a descrição da finalidade do plug-in e alguns cuidados ou métodos simples de uso. Conforme mostrado na imagem acima.
Se desejar instalar um novo plug-in, você pode clicar duas vezes diretamente no arquivo do plug-in e o sistema chamará automaticamente o Extention Manager para instalá-lo. Você também pode instalá-lo clicando no botão Instalar na barra de ferramentas do Extention Manager. e selecione o plug-in que deseja instalar:
No início da instalação, você será questionado se concorda com a declaração da Macromedia, que geralmente afirma que este plug-in não deve ser usado como distribuição comercial, etc. Recusar sairá do programa de instalação, então é claro que escolhemos Aceitar :)
Onde você pode encontrar plug-ins? Recomenda-se ir até a casa da Macromedia, que oferece uma central de plug-ins onde usuários do Ultradev de todo o mundo fornecem plug-ins. A classificação é científica, e há também uma busca para ajudar você a encontrar rapidamente os plug-ins desejados.
Abaixo apresentarei brevemente como usar um plug-in.
Nome do plug-in: dHTML Outlines
Versão: 1.7.7
Tipo: Objeto
Este é um plugin de objeto que cria um menu suspenso no estilo do explorador (recolher árvore). Este plug-in requer IE4 ou superior ou Netscape 6 para suportá-lo (mencionado na introdução do plug-in na imagem).
Após a instalação, você pode abrir o painel de configurações do plug-in no painel de objetos ou no menu Inserir -> Contornos.
O painel de controle do plug-in é muito simples, conforme mostra a figura:
Selecione a guia de detalhes e podemos ver que há três locais no painel para definirmos.
Nome base para Outlines: Você pode preencher como quiser, mas deve ser um nome válido. Ele funcionará apenas como parâmetro no código JavaScript que será gerado posteriormente e não será exibido na página web. Observe que os espaços não podem ser incluídos.
Adicionar cabeçalho: Este é o tronco que você deseja exibir na página web. O conteúdo das ramificações não pode ser modificado até mais tarde na página web. Como mostrado na imagem:
Recuo de texto de itens filhos: O número de recuo do conteúdo da ramificação, você pode escolher de acordo com suas necessidades. A imagem acima mostra o efeito de exibição de recuo padrão.
Incluir texto de preenchimento latino: Provavelmente use apenas um pedaço de texto latino para descrevê-lo. Não importa.
Após clicar em criar, o plug-in gera uma página como esta:
Nosso próximo trabalho é modificar o conteúdo da parte inferior preta para o que você deseja exibir, conforme mostrado na imagem acima. Após a modificação, visualize.
Olhando para o código-fonte da página web, podemos ver:
< div id="helloParenthello3" onClick="javascript:hideshow('helloChildhello3')" class="exheading" >hello3< /div >
< div id="helloChildhello3" style="cursor:auto" class="exindent" >Olá mundo!!< /div >
Desta forma, se quisermos gerar dinamicamente uma árvore dobrável a partir dos dados do banco de dados, será fácil apenas substituir hello world!! ")%>.