Ejemplo de panel flotante sencillo

Buscar

Última actualización el 3 may 2021

En este ejemplo, realizará una extensión del editor de scripts en Dreamweaver que crea un panel flotante para mostrar el código JavaScript subyacente de un marcador de script seleccionado en Vista de diseño. El editor de scripts muestra el código JavaScript en el elemento textarea de un formulario HTML definido en un panel flotante denominado scriptlayer. Si realiza cambios en el código seleccionado en el panel flotante, la extensión llama a la función updateScript () para guardar los cambios. Si no ha seleccionado un marcador de script al invocar el editor de script, la extensión muestra (ningún script seleccionado) en un panel flotante denominado blanklayer.

Esta extensión se crea mediante la creación de paneles escribiendo código JavaScript y creando un elemento de menú.

Crear los paneles flotantes

El comienzo del archivo HTML para esta extensión contiene información de encabezado estándar del documento y una etiqueta title que coloca el editor de script en la barra de título de los paneles flotantes.

Crear la cabecera del archivo HTML

Crear un nuevo documento en blanco.

Introduzca lo siguiente:

 <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Script Editor</title> 
<script language="JavaScript">

La extensión define los dos paneles flotantes, que muestran bien (ningún script seleccionado), si el usuario no ha seleccionado un marcador de script, o bien el código JavaScript que identifica de un marcador de script seleccionado. El código siguiente define estos dos paneles flotantes, o elementos posicionamiento absoluto, denominados blanklayer y scriptlayer:

Crear los dos paneles flotantes

Agregue el siguiente código tras el encabezado del archivo 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>

Guarde el archivo como scriptEditor.htm en la carpeta Configuration/Floaters.

Ambas etiquetas div utilizan el atributo style para especificar la posición (absolute), size (width: 422px y height:181px) y la configuración de visibilidad predeterminada (visible) de los paneles flotantes. El panel blanklayer utiliza el atributo centro y una serie de etiquetas de salto (br) para posicionar el texto en el centro del panel. El panel scriptlayer crea un formulario con un único textarea para mostrar el código JavaScript seleccionado. La etiqueta textarea también especifica que cuando se produce un evento onBlur, lo que indica que el código seleccionado ha cambiado, se llama a la función updateScript () para escribir de nuevo el texto modificado en el documento.

Escribir el código JavaScript

El código JavaScript para el editor de script consiste en una función de panel flotante a la que llama Dreamweaver, selectionchanged() y una función definida por el usuario, updateScript ().

selectionChanged(): ¿es un marcador de script?

La función selectionChanged() determina si se ha seleccionado un marcador de script en la Vista de diseño. Un marcador de script aparece en la Vista de diseño si hay una rutina de JavaScript en la sección body de un documento y si se ha seleccionado Scripts en la sección Elementos invisibles del cuadro de diálogo Preferencias. La siguiente figura muestra un icono de marcador de script:

La función selectionChanged() llama primero a la función dw.getDocumentDOM() para obtener el Modelo de objetos de documento (DOM) del documento del usuario. A continuación, llama a la función getSelectedNode() para ver si el nodo seleccionado para este documento es, en primer lugar, un elemento y, en segundo lugar, una etiqueta SCRIPT. Si se cumplen ambas condiciones, la función selectionChanged() hace visible el panel flotante scripteditor y lo carga con el código JavaScript subyacente. También establece la propiedad de visibilidad del panel flotante blanklayer en el valor oculto. En la siguiente figura se muestra el panel flotante scriptlayer con el código JavaScript seleccionado:

Si el nodo seleccionado no es un elemento o no es una etiqueta script, la función selectionChanged() hace visible el panel flotante blanklayer y oculta el panel scriptlayer. El panel flotante blanklayer muestra el texto (ningún script seleccionado), como aparece en la siguiente figura:

Añada la función selectionChanged()

Abra el archivo como scriptEditor.htm que está en la carpeta Configuration/Floaters.

Introduzca el código siguiente en la sección header del archivo.

 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'; 
    } 
}

Guarde el archivo.

updateScript(): anote los cambios

La función updateScript() escribe el script seleccionado cuando ocurre un evento onBlur tiene lugar en en textarea del panel scriptlayer. El elemento de formulario textarea contiene el código JavaScript y el evento onBlur ocurre cuando textarea deja de tener la selección de entrada.

Abra el archivo scriptEditor.htm que está en la carpeta Configuration/Floaters.

Introduzca el código siguiente en la sección header del archivo.

 /* 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>

Guarde el archivo.

Cree un elemento de menú

No es suficiente para guardar el código del editor script en la carpeta Configuration/Floaters. También se debe llamar a la función dw.setFloaterVisibility('scriptEditor',true) o a la función dw.toggleFloater('scriptEditor”) para cargar el panel flotante y hacerlo visible. El lugar más obvio desde el que invocar el editor de script es el menú Ventana, que se define en el archivo menus.xml. Debe crear la etiqueta menuitem que crea una entrada para la extensión del editor de script en el menú Ventana, tal y como se muestra en la siguiente figura:

Entrada de la extensión del editor de script

Si selecciona un marcador de script en la Vista de diseño del documento actual y, a continuación, selecciona el elemento de menú del editor de script, Dreamweaver invoca el panel flotante del editor de script y muestra el código JavaScript subyacente del marcador de script. Si se selecciona el elemento de menú cuando no se ha seleccionado un marcador de script, Dreamweaver muestra el panel blanklayer, que contiene el texto (ningún script seleccionado).

Abra el archivo menus.xml de la carpeta Configuration/Menus.
Localice la etiqueta que empieza por <menuitem name="Tile _Vertically" y coloque el punto de inserción después del cierre /> de la etiqueta.

En una nueva línea, inserte lo siguiente:

 <menuitem name="Script Editor" enabled="true" ¬ 
command="dw.toggleFloater('scriptEditor')"¬ 
checked="dw.getFloaterVisibility('scriptEditor')" />

Guarde el archivo.

Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?