Esta es la forma en que inicialmente se define la interfaz de usuario del gadget en el Diseñador. Haz clic sobre cualquiera de estos ocho elementos de interfaz de usuario y arrástralo hasta la posición del área blanca de la pantalla en la que quieres que aparezca en el gadget. Al soltar el botón del ratón, el elemento de la interfaz de usuario estará en el gadget y además aparecerá seleccionado. Al estar seleccionado, sus propiedades y valores aparecerán en el panel de propiedades situado a la derecha. Para seleccionar un objeto de la interfaz, bastará con hacer clic en uno de ellos.

Los objetos de interfaz de usuario cuentan con todos los elementos, métodos y eventos que se describen en la sección Referencia de la API. Recuerda que los objetos que se enumeran en dicho apartado proceden todos del objeto basicElement; por lo tanto, consulta las descripciones de cualquier propiedad o evento que no se hayan especificado para un objeto en particular. Los ocho elementos de interfaz de usuario son:

• Div: se utiliza para configurar el color de fondo del gadget o de un elemento de la interfaz. Además, ofrece un enlace para insertar o eliminar, por medio de programas, elementos de interfaz de usuario del elemento que los contiene.
• Image: especifica una imagen para mostrar en la vista.
• Button: objeto con un solo botón.
• Edit: especifica el área en donde el usuario del gadget puede editar el contenido de texto.
• Check: objeto casilla de verificación.
• Link: define un vínculo HTML.
• Text Label: un objeto de etiqueta de texto fijo.
• Content: un objeto de contención ContentArea. Para saber cómo utilizarlo consulta la sección Referencia de la API.

Los elementos de la interfaz de usuario progressbar y object no están disponibles como elementos para arrastrar y soltar de Diseñador, pero se pueden definir en código XML. Recuerda que el Diseñador no permite editar directamente los archivos XML del gadget; para ello, debes utilizar un programa de edición externo.

Cuando haya uno o varios elementos de interfaz de usuario en el panel de visualización, podrás seleccionarlo de las siguientes formas:

• con un sólo clic sobre el elemento que está en el panel de visualización,
• con un clic sobre el nombre de elemento en el panel de elementos.

Cuando un objeto se coloca por primera vez en el panel de visualización, aparecerá como un dependiente del elemento view en el panel de elementos, y sólo se lo podrá identificar por su tipo. Entonces, por ejemplo, si has arrastrado el elemento Button al panel de visualización dos veces, el panel de elementos mostrará dos elementos, ambos designados por button. Si le das un nombre a un elemento, por ejemplo, Botón1, aparecerá en el panel de elementos como button (Botón1).

Recuerda que la única forma de acceder a las propiedades y los elementos del objeto view del Diseñador es mediante un clic en la entrada view en el panel de elementos.

El panel de propiedades muestra las propiedades y sus valores para el objeto de interfaz de usuario que está seleccionado. Aquí también puedes editar los valores de propiedad de un objeto y las funciones asociadas a sus eventos.

Para editar un valor de propiedad, haz clic sobre el nombre o el valor. Las opciones de datos dependen del tipo de propiedad.

• Si se trata de una propiedad booleana, el valor cambia y muestra un menú desplegable con los valores true y false. Haz clic en el valor que deseas asignar a la propiedad.
• Si es una propiedad con valor numérico o textual, escribe el nuevo valor en el campo correspondiente y pulsa Intro.
Algunos valores de propiedad, como mask o background de div, pueden ser un archivo o una cadena. Para este tipo de propiedad aparece un pequeño cuadro con tres puntos. Si haces clic en el cuadro, aparecerá la ventana de navegación Abrir archivo que permite elegir un archivo como el valor de la propiedad. Si prefieres un valor de cadena, escríbela en el campo de valores y pulsa Intro.

Si es necesario, la pantalla cambia para reflejar el nuevo valor de propiedad del objeto de interfaz de usuario.

Algunas propiedades, como por ejemplo cursor, presentan una cantidad definida y limitada de valores permitidos. El Diseñador no comprueba si el valor que has introducido forma parte del conjunto de valores permitidos de la propiedad. Sin embargo, cuando trates de mostrar la vista, se generará un error.

Además, recuerda que el objeto view, al que se puede acceder seleccionándolo en el panel de elementos, cuenta con su propio conjunto de propiedades y eventos. Si, por ejemplo, deseas cambiar el tamaño de la vista, haz clic en view en el panel de elementos y, a continuación, cambia los valores de la height o del width en el panel de propiedades.

En el caso de los eventos, en el campo de valores introduce el nombre de una función definida en un archivo de secuencia de comandos que esté incluido en el gadget. Por ejemplo, para el evento onOpen de view, puedes escribir view_onOpen(), como se define en la función main.js, en su campo de valores.

Este panel muestra todos los archivos de secuencia de comandos que utiliza el gadget en el archivo XML que aparece en ese momento. Cuando termines de diseñar el gadget, estos archivos se comprimirán junto con los archivos XML de la interfaz de usuario y los archivos de imágenes. De forma predeterminada, inicialmente sólo contiene un archivo main.js, pero puedes añadir otros archivos de secuencias de comandos o eliminar main.js.

Para añadir un archivo de secuencias de comandos al panel de secuencias de comandos, haz clic sobre el icono de hoja de papel situado a la izquierda de los tres iconos. Se abrirá un navegador de archivos que está establecido para mostrar sólo los archivos de secuencia de comandos, comenzando por la carpeta de tus gadgets. Busca el archivo de secuencia de comandos que deseas añadir y haz clic en Abrir. Para poder añadirlo, el archivo debe existir previamente. A diferencia de los comandos Archivo->, este copia el archivo de secuencia de comandos en la carpeta del proyecto; como consecuencia, el Diseñador lo muestra en el panel de archivos. También añade una línea <script src="filename" /> en el archivo XML del gadget que esté activo en ese momento en el panel de visualización. Así pues, por ejemplo, si main.xml está activo, la línea <script src="filename"/> se añade sólo a main.xml y no a options.xml.

En el panel de secuencias de comandos, una vez que hayas seleccionado uno de los archivos de secuencias de comandos haciendo clic sobre él, puedes:

• Hacer clic en el icono de carpeta medio abierta para abrir el archivo y editarlo. A continuación, se añadirá una nueva pestaña en la parte superior con el nombre del archivo correspondiente, y la pantalla cambiará el panel visualización por un panel de edición con el contenido del archivo.
• Eliminar el archivo del panel de secuencias de comandos haciendo clic sobre el icono X que se encuentra a la derecha. Recuerda que la secuencia de comandos se elimina automáticamente sin que aparezca un diálogo de confirmación; además, el archivo de secuencias de comandos sigue presente en el panel de archivos y se comprimirá como parte del gadget a menos que también lo elimines de la carpeta de gadgets por medio de un navegador de archivos externo.

Un aspecto a tener en cuenta es que el panel de secuencias de comandos no muestra los archivos de secuencias de comandos almacenados en la carpeta del proyecto, sino las secuencias de comandos que se utilizan en el archivo XML que define las vistas y que se muestra en esos momentos.

Si consultas main.xml justo después de su creación mediante Archivo->Proyecto nuevo, observarás que presenta una línea <script src="main.js" /> en su elemento <view>. main.js también aparece en el panel de secuencias de comandos y en el panel de archivos.

Si eliminas main.js del panel de secuencias de comandos <script src="main.js" /> desaparecerá del elemento <view>. Es decir, la vista del gadget no reconocerá ninguna de las funciones definidas en el archivo. El archivo todavía se encuentra en la carpeta del proyecto, y se debe eliminar a través de un navegador de archivos externo (si deseas eliminarlo); de lo contrario, se comprimirá en el archivo .gg junto con los demás archivos del proyecto.

Por último, ten en cuenta que, de forma predeterminada, cuando creas un proyecto nuevo, main.xml automáticamente contiene la línea <script src="main.js" />, y main.js contiene una definición de la función view_onOpen() que utiliza main.xml. Si eliminas main.js del panel de secuencias de comandos sin reemplazarlo con una definición de función o sin sobrescribir main.xml para que ya no utilice view_onOpen(), obtendrás un mensaje de error.

En la parte superior de la ventana del Diseñador se muestran cinco comandos, cada uno con un menú desplegable; Archivo, Edición, Ver, Proyecto y Ayuda. Analicemos detalladamente cada uno de ellos.

Archivo cuenta con siete comandos de menú:

• Proyecto nuevo: abre un cuadro de diálogo Guardar como para que especifiques el nombre y el lugar donde deseas guardar la carpeta del nuevo proyecto. Cuando haces clic en Aceptar, el nuevo proyecto aparece en la ventana del Diseñador. Nota: Si ya había un proyecto activo en la ventana del Diseñador, no se le preguntará al usuario si desea guardarlo antes de abrir el nuevo. El método abreviado de teclado es Ctrl+Mayús+N.
• Abrir proyecto: abre el cuadro de diálogo Buscar carpeta para que puedas localizar la carpeta de un proyecto que ya existente. Cuando hayas seleccionado una, haz clic en Aceptar. Si la carpeta elegida no contiene un archivo main.xml, aparecerá un mensaje de error y se anulará la operación. De lo contrario, el proyecto seleccionado se abrirá en la ventana del Diseñador. El método abreviado de teclado es Ctrl+Mayús+O.
• Cerrar proyecto: cierra el proyecto actual y deja la ventana del Diseñador en blanco con los comandos del menú en la parte superior. Recuerda que no se te preguntará si deseas guardar el proyecto que está abierto en ese momento. Este comando no cuenta con ningún método abreviado de teclado.
• Abrir: abre un navegador de archivos configurado para mostrar archivos XML. Si seleccionas y abres un archivo, se crea una nueva pestaña superior con el nombre de archivo en cuestión. Además, abrirá la nueva pestaña con el contenido del archivo en el área del panel de visualización. El nuevo archivo no se añade a la carpeta de tu gadget como se muestra en el panel de archivos, ya que el archivo no se encuentra en la carpeta del proyecto. Para añadir un archivo a la carpeta del proyecto, utiliza un navegador de archivos externo, como el Explorador de Windows. El método abreviado de teclado pertinente es Ctrl+O.
• Guardar: guarda cualquier archivo de gadget que se encuentre abierto Utiliza esta opción cada vez que edites un archivo o cambies las propiedades de un objeto de la interfaz de usuario. El método abreviado de teclado correspondiente es Ctrl+S.
• Cerrar: cierra de forma inmediata todo archivo visible en ese momento en el panel de visualización y elimina la pestaña superior del archivo. El archivo permanecerá en el panel de archivos. El método abreviado de teclado pertinente es Ctrl+F4.
• Salir: muestra un cuadro de diálogo solicitándote si deseas guardar los cambios en el archivo main.xml. Después de hacer clic en Sí o No, se cierra el Diseñador de gadgets El método abreviado de teclado es Alt+F4.

Además, los proyectos recientes aparecen en una sección del menú justo por encima del comando Salir. Si haces clic en uno de ellos, se abrirá en el Diseñador.

Edición cuenta con seis comandos de menú:

• Deshacer: deshace la acción que hayas realizado en el Diseñador, como cambiar el valor de una propiedad, mover un objeto de interfaz de usuario, crear un objeto nuevo, etc. Utiliza esta acción de forma consecutiva para deshacer varias operaciones. El método abreviado de teclado es Ctrl+Z.
• Rehacer: esta opción no estará habilitada a menos que hayas realizado una operación de deshacer; con ella, se volverá a realizar la última operación de deshacer. Si se han realizado varias acciones de deshacer de forma consecutiva, es posible realizar varias acciones de rehacer para restaurar el estado del Diseñador. El método abreviado de teclado pertinente es Ctrl+Y.
• Cortar: operación estándar que permite cortar y que funciona al seleccionar los elementos de la interfaz de usuario en el panel de visualización. El método abreviado de teclado es Ctrl+X.
• Copiar: operación estándar que permite copiar y que funciona al seleccionar los elementos de la interfaz de usuario en el panel de visualización. Cuando se copia un objeto de la interfaz de usuario, se hace una copia exacta que incluye todos los valores de propiedad. Así, por ejemplo, si se copia un botón con el nombre Botón2, la copia también tendrá el valor Botón2 para su propiedad de nombre. Los dos botones serán idénticos en el panel de elementos. El método abreviado de teclado es Ctrl+c.
• Pegar: operación estándar que permite pegar y que funciona al seleccionar los elementos de la interfaz de usuario en el panel de visualización. El método abreviado de teclado es Ctrl+v.
• Eliminar: operación de eliminación estándar que funciona con los elementos seleccionados de la interfaz de usuario en el panel de visualización. El método abreviado de teclado es la tecla Supr.

Ver cuenta con cinco comandos de menú:

• Actualizar: actualiza los objetos y paneles de la ventana del Diseñador. El aspecto más importante es que reinicia todas las variables globales y los valores de propiedad del gadget, y todo código de alcance global se ejecuta ahora desde el principio. Fundamentalmente, restablece el gadget a su estado original, que resulta de gran utilidad para su evaluación. El método abreviado de teclado es la tecla F5.
• Pestaña siguiente: muestra la pestaña superior situada a la derecha de la pestaña que está seleccionada en ese momento. Si la pestaña que está seleccionada es la última, la opción volverá a comenzar por la primera. El método abreviado de teclado es Ctrl+Tab.
• Pestaña anterior: muestra la pestaña superior situada a la izquierda de la pestaña que está seleccionada en ese momento. Si la pestaña que está seleccionada es la primera, la opción volverá a comenzar por la última. El método abreviado de teclado es Ctrl+Mayús+Tab.
• Consola de depuración: abre una consola de depuración en la parte inferior de la ventana del Diseñador. Concretamente, ocupa el espacio que utilizaba previamente el contenido de la ventana; te recomendamos cambiar el tamaño de la ventana para que los otros contenidos vuelvan a su tamaño original. Según las casillas de verificación que estén seleccionadas, aquí aparecerán los mensajes de depuración, mensajes informativos, de advertencia o de error cuando se previsualice o se ejecute el gadget. También se puede elegir si deseas que los mensajes incluyan información sobre cuándo aparecieron. Para que la Consola de depuración sea invisible, haz clic una vez más en el elemento de menú Consola de depuración.
• Ventana de vista previa: muestra en el panel de visualización el gadget en modo de ejecución; podrás poner a prueba la interfaz de usuario y ver cómo funciona. Es lo mismo que hacer clic sobre la pestaña superior Vista previa.

Proyecto cuenta con tres comandos de menú:

• Configuración: Muestra el cuadro de diálogo Configuración del proyecto. El método abreviado de teclado es la tecla F3.
• Añadir vista de opciones añade un archivo options.xml al proyecto, una pestaña options.xml en la parte superior y atenúa la función Añadir vista de opciones ya que sólo se puede definir un archivo options.xml por proyecto. Después de hacer clic en esta opción, deberás crear y probar la vista de opciones y su interfaz de usuario, al igual que con la vista principal.
• Crear paquete: comprime todos los archivos del gadget y los coloca en un archivo Nombre_proyecto.gg para su distribución. El método abreviado de teclado es la tecla F7.

Ayuda cuenta con dos comandos de menú:

• Guía del usuario: abre el documento en una ventana del navegador.
• Acerca de: muestra un mensaje con información breve sobre el Diseñador.