Actualizado el 14-01-2007
versión para imprimir
La barra de controles
En el siguiente gráfico puedes ver la barra de controles. Un click en cada botón te permite insertar el campo correspondiente en el menú de la izquierda (sInputFields):
Al hacer click en cada botón se te pedirá que introduzcas algunos valores necesarios para su uso. Volveremos sobre ello dentro de un momento. Si no estás satisfecho con el resultado, arrastra el campo creado al icono de reciclaje abajo a la izquierda.
Si deseas que el valor que se introduzca en ese campo aparezca reflejado en la ventana de previsualizacion, arrastra el campo sobre dicha ventana; se te pediran algunos valores adicionales.
Antes de examinar cada uno de los controles disponibles vamos a ver un ejemplo de inserción de uno de los mas habituales: un campo de texto.
El campo de texto
Para añadir un campo de texto a nuestro plugin (que nos permitirá capturar datos introducidos por el usuario) haz click sobre el botón de control text. Aparecerá una ventana flotante, donde debes proporcionar el texto que se usará como prompt (el texto que aparecerá en el plugin como etiqueta del campo). Por ejemplo, Tu nombre. Tambien tendrás que proporcionar la id (identidad) del campo (que debe ser unica; el IW designer se encarga de que así sea), y una pista (hint, el texto que aparece como ayuda cuando el puntero del ratón está sobre el campo), asi como un valor (value) que se use por defecto. Los dos últimos valores son opcionales, aunque en nuestro ejemplo usaremos 'inserta tu nombre' como pista, y 'Jim Smith' como valor por defecto. Click en el botón Add, click preview (el botón mas a la derecha del menu) y observa el resultado:
Mostrando la entrada en la ventana de previsualización
Te habrás dado cuenta de que al arrancar el IW designer, hay una palabra resaltada en la ventana de previsualización: <%=sTextField1%>
.
Quizás hayas notado también, al visualizar el plugin diseñado, que cualquier cosa que escribas en el campo de texto (por ejemplo, el valor 'Jim Smith' que se escribia por defecto en nuestro ejemplo) aparecía inmediatamente reemplazando la palabra <%=sTextField1%>.
Una de las ventajas del IW es que cualquier valor que se introduzca en el menu (sInputFields) está automáticamente disponible en la ventana de previsualización: se crea una nueva variable cuyo nombre es la ID del campo precedida por una letra explicativa del tipo de valor: sFieldTex1, porque la ID de nuestro campo era FieldText1, precedida de una s porque el contenido de la variable es una cadena (string).
Si has usado otras IDs para el campo de texto, no olvides borrar <%=sTextField1%> en la ventana de previsualizacion (o sustituirla por la ID usada) o recibirás un mensaje de error al visualizar el plugin. No puedes mostrar en la ventana de previsualización variables que no esten fijadas en sInputFields |
¿ y que son esas % cosas ?
Se trata de XSCL. HTML-Kit puede usar funciones hkscript mezcladas con código html utilizando la sintaxis XSCL. Recuerda que el contenido de la ventana de previsualizacion (sPreview) es básicamente HTML con bloques especiales separados con las marcas <% ... %>
Estos bloques son interpretados por HTML-Kit antes de ser enviados al navegador .
La sintaxis XSCL puede ser un poco complicada, pero probablemente habrás imaginado que <%=sTextField1%> pide al interprete que imprima (fijate en el signo =) el valor de la variable.
¿que mas podemos hacer?
Como dijimos, el IW fue pensado para crear plantillas de páginas; por ello el IW designer se limita a crear los campos de entrada de datos, aunque tenemos algunas opciones de previsualización. Veamos un ejemplo:
En primer lugar, en el IW designer, descartamosTextField1: arrastra el campo a la papelera de reciclaje del IW designer y borra <%=sTextField1%> en la pantalla de previsualización, ya que usaremos nuestro propio TextField. Click en el botón Text, inserta los valores necesarios 'OurText' como Id, por ejemplo), y arrastra el campo sobre la ventana de previsualización. En la nueva ventana flotante podemos marcar la primera opción ('Insert the value of the field'), y entonces,
<%=sOurText%> aparecerá en el lugar donde arrastramos el campo. Pero podemos hacer otras cosas, por ejemplo: 
Click Ok, para ver el código generado:
<html>
<head><title>Page Template</title></head>
<body>
<%if(sOurText == "Jim Smith"){%>
Hello Jimmy
<%}%>
</body>
</html>
Si previsualizamos ahora nuestro plugin, en la ventana de previsualizacion veremos escrito 'Hello Jimmy', asumiendo desde luego que hayas escrito 'Jim Smith' como valor por defecto del campo 'OurText'. En otro caso, no verás nada salvo que escribas 'Jim Smith' dentro del campo.
Como ves, se trata de control de flujo básico, con la única especialidad de que el código XSCL se separa de la parte HTML encerrándolo dentro de parejas de <% %>.
Los botones
Haz click en cada uno de ellos
Group
Delimita un nuevo grupo de campos, separados visualmente.
Como excepción, no se genera una variable sFieldGroup1 asi que arrastrar este campo a la ventana de previsualización no tiene efecto alguno.
Text
Un campo de entrada de texto. Es al que venimos refiriendonos hasta ahora.
Textarea
Otro campo de entrada de texto, cuando necesitamos facilitar la entrada de un texto mas grande. Advierte su distinto tamaño:
Recuerda que con el IW Designer puedes reordenar la situación de los campos de entrada de datos arrastrandolos y soltandolos.
Number Field
Campo para entrada de datos numéricos. Con el IW se crean dos variables distintas para cada dato introducido: sNumberField es una string, es decir, contiene nuestro número como una cadena de texto ("123") y nNumberField que contiene el valor de la cadena no como texto sino como número entero (123). Puedes usar <%=sNumberField%> para mostrar el número en la ventana de previsualización, pero no <%=nNumberField%>, porque el método <%= solo trabaja con cadenas de texto, no con números.
Si usas la variable como control de flujo, puedes utilizar ambas indistintamente:
o bien usa el numero como string<%if(nFieldNumber > 5){%>... haz algo ...<%}%>
y no olvides que los valores de texto siempre van entrecomillados, no asi los valores numericos.<%if(sFieldNumber > '5'){%>... haz algo ...<%}%>
Spin Field
Se trata de un campo para la introducción de valores numericos con controles para aumentar o disminuir el numero introducido: 
Checkbox field
Un botón checkbox. Posibles valores son 0 (desmarcado) and 1 (marcado).
Recuerda de nuevo que sCheckbox es una cadena ("1" == checked) y nCheckbox es un entero (1 == checked)
label field
El valor de este campo será mostrado como una etiqueta de texto, no modificable por el usuario.
Campos de color y estilos
No disponibles en esta version
file field
Este campo permite introducir una ruta de archivo, o invocar el clasico dialogo windows para seleccionarlo.
Preview
Click aqui para ver como se ejecutaría el plugin que estas diseñando.
attributes
Cada vez que insertas un campo puedes utilizar la pestaña 'Advanced' en la ventana flotante y seleccionar algunos atributos para tus campos, como longitud maxima, mayusculas o minusculas, alineacion, con foco o sin foco, etc. Hay otros atributos (y tipos de campo de entrada) que solo pueden introducirse a mano, no con el IW designer.
| El IW Designer no permite modificar a mano el código que genera, pero puedes verlo en la pestaña 'Definition' y copiarlo al clipboard con CTRL-C. |
| Si modificas a mano el código generado se extra-cuidadoso al teclear el código. Es XML y por ello cualquier error (por ejemplo olvidar unas comillas) puede causar que todo el plugin deje de funcionar. |