Actualizado el 14-01-2007
versión para imprimir
Todo junto: un ejemplo.
Veamos todas las partes de un plugin basado en el IW con un gran ejemplo: demoIWtable. Esta pequeña joya es un archivo hpd, es decir, contiene la definición de un plugin para generar tablas HTML sencillas. Por ser un archivo hpd, debe ser abierto con el Plugins Generator: descomprime el archivo, y desde el menu principal del Plugins Generator, selecciona File | Open. El archivo descomprimido a abrir se llama demoIWTable.hpd
Action1 renombrada). Ahora, en el panel de la derecha, haz click en el botón del IW designer:
Ahora puedes ver al IW Designer con los datos del plugin cargados. En esta captura mostramos el panel correspondiente a los campos sInputFields. Como ves, los campos están ordenados en tres grupos. Cada tipo de campo se identifica por un icono diferente. La primera columna de texto contiene la ID unica de cada campo. La segunda, el prompt del campo (la etiqueta junto al campo de entrada de datos):
Y asi es como se verá el plugin en funcionamiento: (click en el botón preview, el situado mas a la derecha en la barra de controles):
Y esto es todo: el plugin proporciona una serie de spin fields o campos para introducir valores numéricos para indicar el numero de filas y columnas, borde, cellpading y cellspacing en el primer grupo de campos. El segundo grupo de campos nos permite insertar estilos, y el tercer grupo es un campo tipo textarea para introducir defecto de cada celda (en este caso, un espacio ).
Pruebalo !
Previsualizando el plugin en el HK Plugins Generator, especifica un valor de borde para la tabla de '1' (para poder ver los cambios) y juega con el numero de filas y columnas. La tabla se irá creando y mostrando en la ventana de previsualización del plugin de manera instantanea !.
¿como está hecho ?
Para comprender como se ha hecho debemos abandonar por un momento el mundo del diseño visual: haz click en la pestaña 'Definition' y podrás ver el código que crea el menú del plugin (sInputField). Es código tipo XML; analizemos algunas lineas:
<?xml version="1.0"?>
<data version="1.0" title="HTML-Kit InputWizard Field Definition">
<group caption="Table Properties" id='FieldGroup2'>
<input type='spin' id='Rows' prompt='Number of Rows' value='2' />
<input type='spin' id='Cols' prompt='Number of Columns' value='2' />
<input type='spin' id='BorderSize' prompt='Border Size' value='1' />
<input type='spin' id='CellPadding' prompt='Cell Padding' value='0' />
<input type='spin' id='CellSpacing' prompt='Cell Spacing' value='0' />
</group>
<group caption="Table Styles" id='FieldGroup1'>
<input type='style' id='StyleTable' prompt='Table Style' value=
'background-color:white;' />
<input type='style' id='StyleRow' prompt='Row Style' />
<input type='style' id='StyleCol' prompt='Column Style' />
</group>
<group caption="Table Data" id='FieldGroup3'>
<input type='textarea' id='DataCell' prompt='Default Data' value=' ' />
</group>
</data>
Se trata como ves de una serie de etiquetas input muy similares a las usadas en HTML. Fíjate en el atributo type, en la ID única, en el prompt o etiqueta del campo, y en el valor (value) proporcionado por defecto. Por supuesto XML no es tan permisivo con tus descuidos como puede serlo el HTML, asi que debes extremar el cuidado al escribir el código. Como ocurre con toda la familia de lenguajes XML, todas las etiquetas son escritas en minusculas, y estan cerradas con />
Toda la magia del plugin reside en este caso en el código de la ventana de previsualización. Con los valores pasados desde los campos sInputFields y unos pocos loops, el plugin construye nuestra tabla. the plugin construct or table. Veamos el código, recordandote antes que tienes ejemplos similares en la XSCL Gallery.
Veamos
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>Table Template</title></head>
<body bgcolor="#ffffff">
<table
border="<%=sBorderSize%>"
<%if(length(sStyleTable)>0){%> style="<%=sStyleTable%>"<%}%>
<%if(length(sCellPadding)>0){%> cellpadding="<%=sCellPadding%>"<%}%>
<%if(length(sCellSpacing)>0){%> cellspacing="<%=sCellSpacing%>"<%}%>
>
<%var r=0, c=0;for(r=0;r<nRows;r++){%>
<tr<%if(length(sStyleRow)>0){%> style="<%=sStyleRow%>"<%}%>>
<%for(c=0;c<nCols;c++){%>
<td<%if(length(sStyleCol)>0){%> style="<%=sStyleCol%>"<%}%>>
<%if(length(sDataCell)>0){%><%=sDataCell%><%}%>
</td>
<%}%> // end of nCol loop
</tr>
<%}%> // end of nRows loop
</table>
</body>
</html>
Hemos resaltado algunas partes del código para ayudar a la legibilidad.
El primer bloque de código no tiene demasiada historia: el plugin abre una etiqueta html <table y si recibe algun valor introducido por el usuario, escribe los valores para los atributos de la tabla border, cellpading y cellspacing, y añade las reglas de estilo proporcionadas.
El segundo bloque de código es el que hace todo el trabajo pesado: hay dos loops for anidados. El primero genera las filas (horizontales) de la tabla. Comienza poniendo el contador a cero y repite el ciclo hasta que alcanza el numero total de filas, dado por nRows: for(r=0;r<nRows;r++) .
En este primer bucle, el plugin escribe en la tabla la primera etiqueta <tr>. Pero antes de que pueda llegar al final del bucle, el interprete de código de encuentra el segundo bucle, este para las columnas. Como en el anterior caso, en este segundo bucle se pone el contador a cero, mientras el contador no alcance el numero de columnas deseado (dado por nCols), irá añadiendo parejas de etiquetas <td> <td>.
Cuando se alcanza el numero deseado de columnas el plugin sale del bucle anidado ... y sigue ejecutando el primer bucle donde lo dejó: añadiendo una etiqueta TR de cierre. A continuacion, si nRows era mayor que 1 (es decir, queremos una tabla con mas de una fila) comenzara a ejecutar de nuevo el primer bucle, añadiendo otra etiqueta TR, y asi sucesivamente.
El principal aspecto a notar es que el plugin ejecutará ambos loops de código hasta que se haya alcanzado el numero de columnas y filas indicados por el usuario desde el menu del plugin.
La primera orden for genera un ciclo que genera el numero de filas deseadas, mientras que el segundo bucle genera (columnas) indicadas.
Guardar el código, ejecutar el plugin
El formato .hpd contiene la definicion del plugin de forma interpretable por el Plugins Generator, pero no es directamente ejecutable desde HTML-Kit. Para ello, en el menu principal (File) tienes la opción de guardar el plugin en formato HKS en el directorio de plugins de HTML-Kit.