| Artículos | 01 DIC 1998

DHTML Editing Component

Tags: Histórico
Cómo programar un editor de HTML Dinámico
Jaime Peña.

La implementación del DHTML, Dynamic HTML o HTML Dinámico, es fruto de desarrollos conjuntos de numerosas empresas Microsoft, Netscape, Macromedia, etc . aunque, desafortunadamente, hay divergencias entre las especificaciones y modo de operar en Netscape Navigator y Microsoft Internet Explorer . Dentro de la estrategia de dotar de herramientas cada vez más avanzadas y sencillas de usar, Microsoft ha iniciado un programa de desarrollo de un control ActiveX que permite crear editores DHTML y que denomina DHTML Editing Component . En estos momentos se encuentra en fase beta; Microsoft anuncia que verá la luz definitivamente durante el tercer trimestre de este año, aproximadamente cuándo este artículo llegue a sus manos . Puede obtener todo tipo de información y el propio entorno de desarrollo con ejemplos en la dirección de Internet www . microsoft . com/workshop/author/dhtml/edit . Para comentarios e información adicional, acuda al foro de noticias ( News Group ) microsoft . public . inetsdk . programming . dhtml_editing .

El control y la documentación son de libre uso, pero, dado que se soporta en Microsoft Internet Explorer 4 . x, sí deberá tenerlo instalado en su sistema y, llegado el caso, tendrá que obtener los pertinentes permisos de distribución por parte de Microsoft, MSIE es de distribución gratuita, pero se exige disponer de permiso para ello .

La documentación del control está en formato HTMLHelp y, al menos en la versión preliminar que hemos probado, no se crea un acceso directo a ella durante la instalación . Localícela en el directorio de instalación, denominándose el archivo SDK_HELP . CHM, que se encuentra en el directorio DOCS . Bastará que incluya como destino su ruta en un acceso directo y Windows 95 ya arrancará el ejecutor de archivos HTMLHelp . Por supuesto, precisará de MSIE 4 . x .

También se adjuntan diversos ejemplos; dado que nosotros ilustraremos uno en Visual Basic, le sugerimos de un vistazo al denominado VBEDIT; muy completo, con él y nuestro más modesto editor, esperamos le sea suficiente para implementar su propio editor HTML en las aplicaciones que realice . Si además incluye un navegador HTML, como el que hemos creado en nuestro artículo de PC World nº 140 de febrero de 1998, ya tendrá todos los elementos para hacer algo similar a editores HTML de mediana entidad, por ejemplo, muy al estilo de Allaire Homesite, uno de nuestros favoritos, dicho sea de paso . Por supuesto, no trataremos aquí de ilustrar todas sus capacidades, que nos llevaría a comentar el amplio campo del HTML Dinámico, pero esperamos le sirva de base para poder programar un editor HTML todo lo avanzado que sus necesidades requieran .

Funcionalidad del DHTML Editing Component

A vuelapluma, el DHTML Editing Component es una encapsulación a gran nivel, entendido como programación fundamentalmente visual y sin insertar código directo de métodos, funciones de respuesta a eventos y propiedades que permite programar un editor de código para HTML Dinámico de forma rápida, sin necesidad de conocer los entresijos de las etiquetas del lenguaje o los detalles de programación de un editor, con funciones de intercambio, previsualización y carga y guardado de archivos en el formato adecuado . Desde una perspectiva amplia, le proporcionará las siguientes capacidades:

- Formateo de documentos: incluye formateo total de textos y párrafos alineamientos y justificaciones, colores de texto, fondo de texto y fondo de páginas, todo tipo de etiquetas de cabecera como < H1 > , etc . , soporte para edición y formateo de tablas, cabeceras, celdas, colores, fondos, etc . , uso ilimitado de deshacer/rehacer, copiar y pegar desde el Portapapeles de Windows, inclusión de imágenes, enlaces, etc .

- Selección y posicionamiento de elementos: incluye selección de textos, arrastrar y soltar, posicionamiento de elementos gráficos, controles ActiveX y applets de Java también se pueden redimensionar y ordenar los elementos superpuestos según un z-index . Respecto al posicionamiento, soporta el denominado posicionamiento absoluto o relativo; esto es, fijar los anclajes mediante estilos ( cascade Style Sheets ) , de forma que puede alterarse la secuencia descrita en la definición dentro del documento HTML .

- Teclas aceleradoras e indicadores de elementos no visuales ( Glyphs ) : multitud de teclas aceleradoras, que permiten realizar funciones avanzadas sin precisar mayor programación . Los elementos no visuales etiquetas de comentarios, código script, etiquetas no reconocidas, etc . pueden indicarse mediante una relación predeterminada y codificada de pequeños iconos, que nos previenen de su existencia .

El editor trabaja en forma WYSIWYG lo que ve es lo que tendrá, sin precisar introducir directamente código de etiquetas HTML . Elementos como imágenes gráficas y el propio texto, se pueden posicionar mediante arrastrar y soltar, dentro de la ventana de edición . Los hiperenlaces se realizan marcando seleccionando y posteriormente fijando la dirección URL destino . Por otra parte, dispone de amplias capacidades de edición, tales como el intercambio con el Portapapeles de Windows, deshacer y rehacer, justificaciones, trabajo con fuentes de caracteres y demás .

Métodos, eventos y variables

En la Tabla 1, hemos recogido todos los métodos, funciones de respuesta a eventos y propiedades del DHTML Editing Component . Llamamos la atención de la relativa escasez de métodos; eso se debe a que el gran potencial de programación del control se realiza mediante el supermétodo ExecCommand, que es una especie de cajón de sastre para implementar toda la funcionalidad de un editor DHTML complejo . Más adelante, en otro apartado, lo trataremos con cierto detalle; en el presente, comentaremos lo que nos permite programar el restante API de desarrollo .

Tras incluir un DHTML Editing Component en uno de nuestros programas, más abajo hablaremos de un ejemplo desarrollado en Visual Basic, podremos comenzar a escribir texto y formatear con las funciones propias del control, normalmente empleando el método ExecCommand; tras él, del que como dijimos hablaremos seguidamente, nos interesan especialmente los métodos LoadDocument y SaveDocument, los encargados de recuperar un documento HTML y guardarlo en disco, respectivamente . La sintaxis de estos métodos es cómo sigue:

DHTMLEdit1 . LoadDocument pathIn, promptUser

y:

DHTMLEdit1 . SaveDocument pathOut, promptUser

Siendo DHTMLEdit1 un objeto del tipo DHTML Editing Component y los parámetros pathIn y pathOut la ruta completa del archivo HTML a recuperar o guardar . El segundo parámetro, promptUser, es de tipo booleano, si se pasa True, se despliega una caja de diálogo de abrir o guardar archivos; si se pasa False, se abrirá o guardará con el nombre pasado en el primer parámetro, sin preguntar al usuario y permitirle, así, cambiar el nombre o la ruta de unidades y directorios . Si a SaveDocument se le pasa una cadena vacía y True:

DHTMLEdit1 . SaveDocument ??, True

Se ejecutará el comando estándar de Guardar como?, al margen de que el archivo editado ya tenga un nombre concreto .

Una vez estemos trabajando con un determinado documento, que hayamos cargado de disco o ya hayamos guardado con un nombre, el método CurrentDocumentPath nos permite recuperar su ruta completa; por ejemplo:

ruta = DHTMLEdit1 . CurrentDocumentPath

Guardaría en la variable ruta, que debe ser de tipo String, la ruta, unidad, directorio ( s ) y nombre del archivo que estamos editando .

La inclusión de menús contextuales y su manejo, se realiza mediante el método SetContextMenu y las funciones de respuesta a eventos ShowContextMenu y ContextMenuAct

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información