Crie um novo documento em branco,
Última atualização em
5 de mai de 2021
Neste exemplo, você cria uma extensão do Editor de scripts que gera um painel flutuante para exibir o código JavaScript que constitui a base de um marcador de script selecionado na Visualização de design. O Editor de scripts exibe o código JavaScript no elemento textarea de um formulário em HTML que é definido em um painel flutuante chamado scriptlayer. Se você alterar o código selecionado no painel flutuante, a extensão chamará a função updateScript() para salvar suas alterações. Se você não selecionou um marcador de script ao invocar o Editor de scripts, a extensão mostrará (nenhum script selecionado) em um painel flutuante chamado blanklayer.
Você cria essa extensão criando painéis flutuantes, escrevendo um código JavaScript e criando um item de menu.
Criar os painéis flutuantes
O início do arquivo HTML para essa extensão contém as informações de cabeçalho do documento padrão e uma tag title que coloca as palavras Editor de scripts na barra de título dos painéis flutuantes.
Criar o cabeçalho do arquivo HTML
-
-
Insira o seguinte:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Script Editor</title> <script language="JavaScript">
A extensão define dois painéis flutuantes que exibem (nenhum script selecionado) se o usuário não tiver selecionado um marcador de script ou o código JavaScript que constitui a base de um marcador de script selecionado. O código a seguir define esses dois painéis flutuantes ou elementos absolutamente posicionados (AP), chamados blanklayer e scriptlayer:
Criar os dois painéis flutuantes
-
Adicione o seguinte código após o cabeçalho no arquivo HTML:
<body> <div id="blanklayer" style="position:absolute; width:422px; ¬ height:181px; z-index:1; left: 8px; top: 11px; ¬ visibility: hidden"> <center> <br> <br> <br> <br> <br> (no script selected) </center> </div> <div id="scriptlayer" style="position:absolute; width:422px; ¬ height:181px; z-index:1; left: 8px; top: 11px; ¬ visibility: visible"> <form name="theForm"> <textarea name="scriptCode" cols="80" rows="20" wrap="VIRTUAL" ¬ onBlur="updateScript()"></textarea> </form> </div> </body> </html>
-
Salve o arquivo como scriptEditor.htm na pasta Configuration/Floaters.
As duas tags div usam o atributo style para especificar a posição (absolute), tamanho (width:422px e height:181px) e a configuração padrão de visibility (visible) dos painéis flutuantes. O painel blanklayer usa o atributo center e uma série de tags de quebra (br) para posicionar o texto no centro do painel. O painel scriptlayer cria um formulário com uma única textarea para exibir o código JavaScript selecionado. A tag textarea também especifica que quando ocorre um evento onBlur, indicando que o código selecionado foi alterado, a função updateScript() será chamada para regravar o texto alterado no documento.
Escrever o código JavaScript
O código JavaScript para o Editor de scripts consiste em uma função do painel flutuante que o Dreamweaver chama, selectionchanged(), e em uma função definida pelo usuário, updateScript().
selectionChanged(): há um marcador de script selecionado?
A função selectionChanged() determina se um marcador de script foi selecionado na Visualização de design. Um marcador de script aparece na Visualização de design se houver uma rotina JavaScript na seção do corpo de um documento e se Scripts for selecionado na seção Elementos invisíveis da caixa de diálogo Preferências. A figura a seguir mostra um ícone do marcador de script:
A função selectionChanged() chama primeiro a função dw.getDocumentDOM() para obter o modelo de objeto de documento (DOM) para o documento do usuário. Depois, ela chama a função getSelectedNode() para ver se o nó selecionado para esse documento é, primeiro, um elemento e, segundo, uma tag SCRIPT. Se essas duas condições forem verdadeiras, a função selectionChanged() tornará o painel flutuante scripteditor visível e o carregará com o código JavaScript subjacente. Ela também define a propriedade visibility do painel flutuante blanklayer com o valor hidden. A figura a seguir mostra o painel flutuante scriptlayer com o código JavaScript selecionado:
Se o nó selecionado não for um elemento ou não for uma tag script, a função selectionChanged() tornará o painel flutuante blanklayer visível e ocultará o painel scriptlayer. O painel flutuante blanklayer exibe o texto (nenhum script selecionado), como mostrado na figura a seguir:
Adicionar a função selectionChanged()
-
Abra o arquivo scriptEditor.htm que está na pasta Configuration/Floaters.
-
Digite o código a seguir na seção header do arquivo.
function selectionChanged(){ /* get the selected node */ var theDOM = dw.getDocumentDOM(); var theNode = theDOM.getSelectedNode(); /* check to see if the node is a script marker */ if (theNode.nodeType == Node.ELEMENT_NODE && ¬ theNode.tagName == "SCRIPT"){ document.layers['scriptlayer'].visibility = 'visible'; document.layers['scriptlayer'].document.theForm.¬ scriptCode.value = theNode.innerHTML; document.layers['blanklayer'].visibility = 'hidden'; }else{ document.layers['scriptlayer'].visibility = 'hidden'; document.layers['blanklayer'].visibility = 'visible'; } } -
Salve o arquivo.
updateScript(): regravar as alterações
A função updateScript() regrava o script selecionado quando um evento onBlur ocorre na textarea do painel scriptlayer. O elemento de formulário textarea contém o código JavaScript, e o evento onBlur ocorre quando textarea perde o foco de entrada.
-
Abra o arquivo scriptEditor.htm que está na pasta Configuration/Floaters.
-
Digite o código a seguir na seção header do arquivo.
/* update the document with any changes made by the user in the textarea */ function updateScript(){ var theDOM = dw.getDocumentDOM(); var theNode = theDOM.getSelectedNode(); theNode.innerHTML = document.layers['scriptlayer'].document.¬ theForm.scriptCode.value; } </script> </head> -
Salve o arquivo.
Criar um item de menu
Não é suficiente salvar o código do Editor de scripts na pasta Configuration/Floaters. Você também deve chamar a função dw.setFloaterVisibility('scriptEditor',true) ou a função dw.toggleFloater('scriptEditor') para carregar o painel flutuante e torná-lo visível. O local mais óbvio do qual invocar o Editor de scripts é o menu Janela, que é definido no arquivo menus.xml. É necessário criar a tag menuitem que cria uma entrada para a extensão do Editor de scripts no menu Janela, como mostrado na figura a seguir:
Se você selecionar um marcador de script na Visualização de design para o documento atual e, em seguida, selecionar o item de menu Editor de scripts, o Dreamweaver invocará o painel flutuante do Editor de scripts e exibirá o código JavaScript que constitui a base do marcador de script. Se você selecionar o item de menu quando um marcador de script não estiver selecionado, o Dreamweaver exibirá o painel blanklayer que contém o texto (nenhum script selecionado).
-
Abra o arquivo menus.xml na pasta Configuration/Menus.
-
Localize a tag que começa com <menuitem name="Tile _Vertically" e posicione o ponto de inserção depois do /> de fechamento da tag.
-
Em uma nova linha, insira o seguinte:
<menuitem name="Script Editor" enabled="true" ¬ command="dw.toggleFloater('scriptEditor')"¬ checked="dw.getFloaterVisibility('scriptEditor')" /> -
Salve o arquivo.
Adobe MAX:
a conferência da criatividade
14 a 16 de outubro, Miami Beach e online
Adobe MAX
A conferência da criatividade
14 a 16 de outubro, Miami Beach e online