Tecnorama

18/12/2009: Extender DW: insertar en xml

Si utilizáis Dreamweaver para manipular archivos XML habréis podido comprobar que no acepta la inserción de objetos y que éstos aparecen deshabilitados.

Esto no es un problema hasta que intentas crear un objeto personalizado que permita insertar por ejemplo un bloque de etiquetas con atributos definidos por el usuario. Imaginemos que tenemos un xml al que deseamos poder añadir desde una ventana modal una etiqueta como:

Donde marca y modelo son seleccionados desde un desplegable. En circunstancias normales creamos un objeto con los dos menus y todo funcionando.... pero en xml el objeto aparece deshabilitado!!!

La solución pasaba entonces por crear un comando: No es lo más ortodoxo pero al menos permitía que la ventana apareciera.

Por lo tanto:

Nada de objetos ni de función objectTag()
Crear un comando con una función que añada el texto (tampoco podemos invocar al objeto desde el comando: Ya lo he probado yo por vosotros y no funciona).

Listos? Vamos a por el código:

//array de botones para llamar a las funciones:
function commandButtons() {
return new Array(MM.BTN_OK,"anadirEtiqueta()",
MM.BTN_Cancel,"window.close()",
}

//la función anadirEtiqueta añade la cadena
//para simplificar utilizamos campos de texto
function anadirEtiqueta(){
str="<vehiculo marca=\""+document.form1.marca.value+"\" modelo=\""+document.form1.value+"\">";
dw.getDocumentDOM().insertHTML(str,true);
window.close();
}

Sencillo, ¿verdad?. Pues sí, pero el problema es que tampoco funciona: Por alguna razón desconocida, insertHTML(str) no funciona en el xml. Probemos con otro método:

dw.getDocumentDOM().insertText(str,true);

Nos vamos acercando: Ésta funciona pero mal, ya que reemplaza los caracteres especiales (<vehiculo...)

Nos encontramos en este punto:

Nada de objetos
Nada de dom.insertHTML ni dom.insertText

Y por fín se hizo la luz: El objeto dom.source!!! Este objeto tiene un método que sí que permite trabajar con xml, ya que está enfocado para trabajar sólo código. Y el método mágico insert().

Sólo nos quedaba resolver el último escollo: dom.source.insert() necesita como primer parámetro el punto de inserción (al revés que los métodos anteriores, que lo capturaban automáticamente). Esto sin embargo no es mayor problema utilizando dom.source.getSelection(). El código final fue este:

//array de botones para llamar a las funciones:
function commandButtons() {
return new Array(MM.BTN_OK,"anadirEtiqueta()",
MM.BTN_Cancel,"window.close()",
}

function anadirEtiqueta(){
str="<vehiculo marca=\""+document.form1.marca.value+"\" modelo=\""+document.form1.value+"\">";
//capturamos el DOM del documento
theDOM=dw.getDocumentDOM();
//capturamos la selección: getSelection devuelve un array de dos valores: punto de inicio y punto final
theSel=theDOM.source.getSelection();
//nosotros seleccionamos el punto de inicio
insertPoint=theSel[0];
//lo tenemos todo: hora de insertar
theDOM.source.insert(insertPoint,str);
window.close();
}

Sencillo cuando se descubre.

Permalink