Esta Etapa introduce el Tersus Studio.
Usted aprenderá como crear un nuevo proyecto Tersus
Al finalizar esta Etapa usted deberá estar familiarizado con los siguientes conceptos:
Nociones de Modelado:
Modelo, Vista, Plantilla. Nombre de Modelo vs. Nombre de Elemento.
Técnicas de Modelado:
Creación y manejo de una vista. Renombrar un Modelo.
Plantillas útiles:
Vista, Botón, Ventana emergente, Etiqueta, Área de Texto.
En esta etapa usted modelara un formulario de búsqueda para el ingreso de solicitudes.
La aplicación Web resultante incluirá un botón que abre un formulario en una ventana emergente que utilizaremos para el ingreso de las solicitudes, similar al siguiente:
La siguiente captura de pantalla muestra la apariencia por defecto del Tersus Studio. Esta incluye el Editor de modelos (con la Paleta-Pallete- integrada) a la derecha, y una vista con lengüetas que contiene el Repository Explorer y el Outline a la derecha.
Si usted quiere aprender más sobre el Tersus Studio antes de empezar su primer proyecto, vea al Anexo A, que contiene los siguientes temas:
El Tersus Studio y la Plataforma Eclipse
La Paleta
Insertar nuevos elementos en el modelo
Seleccionar, Mover y Redimensionar Elementos
Desplazamiento dentro de los modelos
Zoom-in/out
Deshacer/Rehacer
El Outline
El Repository Explorer
El Servidor de aplicación
Empezaremos creando un nuevo proyecto de aplicación:
Seleccione File (Archivo) -> New (Nuevo) -> Tersus Project.
Note que Tersus Project es la primera opción en el submenú New, seguido de Project..., que es una opción genérica de eclipse (Ver Anexo A para mayor información)..
Ingrese un Nombre de proyecto parar su nuevo proyecto: Tutorial.
Seleccione la Plantilla: Legacy Navigation
Presione el botón Finish.
Para empezar a modelar necesitamos abrir la raíz del modelo en el editor.
Habiendo creado un nuevo proyecto, Tutorial, este ya debería aparecer abierto en el editor. Si no es así haremos lo siguiente:
Localice la raíz del proyecto Tutorial (carpeta) en la vista del Repository Explorer y haga doble clic en el.
Esto debería abrir una nueva ventana de edición, que lucirá como la siguiente captura de pantalla, mostrando un rectángulo amarillo que representa nuestra aplicación. Dado que aun no hemos empezado a modelar, el rectángulo esta vacío, excepto por su nombre:
Una aplicación Web es algo que usted puede ver en su navegador, entonces primero debemos definir Vista. Un modelo Vista delimita lo que se mostrará en el navegador, y contiene otros elementos de vista (etiquetas, botones, tablas, etc.).
Para crear una vista llamada Open Requisitions (que muestre todas sus solicitudes abiertas), haga lo siguiente:
En la Paleta (a la derecha del editor), asegúrese que la categoría Display está abierta (si no es así, basta con hacer clic en ella para abrirla).
Haga clic en la plantilla Vista (View) para seleccionarla.
Note que ahora cuando usted mueve el puntero del ratón sobre el editor, éste cambia para mostrar donde podemos soltar la Vista (mostrando un pequeño rectángulo gris).
Ubique el puntero de ratón dentro del modelo raíz y haga clic para insertar la vista.
Un modelo vista ha sido creado y el editor le permite darle un nombre:
Escriba Open Requisitions y presione [Enter] cuando termine.
El modelo que acaba de crear debería lucir similar al siguiente:
La vista Open Requisitions (el rectángulo verde/azul) es ahora un submodelo del modelo raíz Tutorial (el rectángulo amarillo).
Cualquier modelo en la jerarquía puede contener varios submodelos.
Note que las capturas de pantalla de los modelos que provee este tutorial puede diferir de los modelos que usted crea, principalmente por la diferencia en cuanto a posición y tamaño de los elementos dentro del modelo, y también por el hecho que los elementos que contienen otros elementos pueden estar abiertos (marcados con ) o cerrados (). Esta diferencia no tiene ningún efecto en el funcionamiento de la aplicación, excepto en el caso de los modelos de vista, como explicaremos en esta etapa.
Continuemos con el modelado de la vista Open Requisitions. Ahora agregaremos un botón New Requisition (que permita a usuario ingresar una nueva solicitud en un formulario dentro de una ventana emergente).
Seleccione la plantilla Botón (Button ) de la categoría Display en la paleta (haciendo clic en la plantilla).
Insértela en la vista Open Requisitions (haciendo clic dentro de ella).
Llámelo New Requisition (Escribiendo New Requisition -nueva solicitud-).
El modelo debería verse similar al siguiente:
Tanto el título del Repository Explorer como el del Editor de Modelos muestran un asterisco a un lado (ej. *Tutorial). Ésto indica que los últimos cambios no han sido guardados.
Guarde su trabajo haciendo clic en en la barra de herramientas.
Siempre que guarda sus modelos, el Tersus Studio verifica (valida) los mismos. Si algún error es encontrado un mensaje aparecerá en la pantalla y los errores se mostrarán en la lengüeta Validation. Ver Finalizando la etapa 12 para más detalles sobre la validación.
A pesar de haber modelado muy poco ya podemos dar una primer ojeada a nuestra aplicación en el navegador:
Haga clic en el botón Launch the application (Lanzar la aplicación) en la barra de herramientas principal del studio para cargar la aplicación en el Servidor Tersus y abrirla en un navegador Web.
Si el botón Launch the application está deshabilitado, hacer clic en el editor de modelos debería de habilitarlo.
Su navegador debería mostrar una página similar a la siguiente:
Note que la vista Open Requisitions aparece como una lengüeta simple. Más tarde, cuando vayamos agregando vistas adicionales, éstas aparecerán como lengüetas. Dentro de la vista podemos ver el botón New Requisition.
Vuelva al Tersus Studio. Debe dejar el navegador abierto en segundo plano.
La gente a menudo se sorprende de lo que pasa en la computadora cuando presionan un botón. Pero sería agradable poder mirar a través del botón y ver en el interior la lógica de la aplicación. Éso es exactamente lo que Tersus nos permite por medio de la técnica “zoom in” – modelando "dentro" del botón las acciones que se llevarán acabo cuando el botón sea presionado.
Entonces entremos dentro del botón New Requisition para modelar una ventana emergente que aparecerá cada vez que hagamos clic en el botón:
Haga doble clic en el botón New Requisition para agrandarlo.
Seleccione la platilla Display/Popup () de la paleta.
Insértela dentro del elemento New Requisition.
Llámelo Enter New Requisition.
El botón New Requisition debería ahora lucir similar al siguiente:
La plantilla Popup (Ventana emergente) es un ejemplo de plantilla que provee una funcionalidad adicional preconstruída. En el caso del Popup la funcionalidad preconstruída consiste en: 1. Un Footer (Pie de página), lo que causa que su contenido sea mostrado en la parte inferior de la ventana emergente. 2. Un botón OK, que aún no hace nada. 3. Un botón Cancel, que contiene un modelo Close Window (Cerrar ventana), por lo que, cuando Cancel es presionado la ventana emergente se cerrará. Por lo general usted es libre de cambiar (o borrar) esta función a gusto.
Guarde su trabajo .
Ahora veamos como luce nuestra aplicación cuando es desplegada en el navegador:
Vaya al navegador.
El navegador reconoce que la aplicación ha cambiado desde la última vez que se cargó y recarga la aplicación automáticamente.
Una vez terminada la recarga, presione el botón New Requisition
Debería ver lo siguiente:
Haga clic en el botón Cancel para verificar que la ventana se cierra como esperábamos.
Necesitamos un lugar para que el usuario ingrese los detalles de la solicitud, y ésto sólo para comenzar.
Primero crearemos una etiqueta (“Description:”), que indicará al usuario dónde ingresar la descripción de la solicitud:
Haga Doble clic en la ventana emergente Enter New Requisition para agrandarla.
Seleccione la plantilla Display/Label () y coloque el elemento en la parte superior de la ventana emergente. Dele el nombre Description: (los dos puntos forman parte del nombre).
A continuación insertaremos un elemento de área de texto en el que el usuario podrá escribir la descripción de su solicitud:
Seleccione la plantilla Display/Text Area () y colóquela al lado de la etiqueta. Dele el nombre de Description.
El modelo debería lucir ahora como el siguiente:
Guarde su trabajo y vuelva al navegador.
La ventana emergente debería lucir como sigue:
Note que el orden en el que los elementos aparecen dentro del formulario está determinado por la posición de los correspondientes submodelos en el modelo de la ventana emergente. Por lo general el orden es determinado por la regla arriba-abajo, izquierda-derecha (como se lee en Español). Más generalmente, la manera en que los elementos son acomodados dentro de la jerarquía de modelos es lo que define cómo se mostrarán en la pantalla. Ya tenemos dos ejemplos diferentes: 1. Colocar una ventana emergente dentro de un botón causa que ésta aparezca cuando e botón es presionado. 2. Colocar un elemento de vista cerca de otro (dentro del modelo padre) determina el orden en que se mostrarán en la pantalla.
La ventana Enter New Requisition contiene un botón preconstruído, OK, que usaremos en las siguientes etapas para enviar una nueva solicitud. Renombrémoslo adecuadamente:
Agrande el botón OK en su modelo.
Luego, o bien
Clic derecho y seleccione Rename del menú.
o
Haga Clic para seleccionar el modelo y presione [F2].
Ésto abrirá el cuadro de diálogo Rename:
Escriba Submit(Enviar) en vez de OK, y haga clic en Finish.
El cuadro de diálogo Rename es utilizado para especificar dos nombres diferentes para el elemento que esta renombrando, un Nombre de Elemento y un Nombre de Modelo. El Nombre de Modelo (Model Name) es el nombre compartido de los modelos reutilizables (ver la etapa 4 para mayores detalles referentes a reutilización). Un nombre de modelo debe ser único dentro de un paquete determinado. El Nombre de Elemento (Element Name) es el nombre local de un modelo. Un nombre de elemento debe ser único dentro de un padre determinado. En el caso de los modelos de vista (como la Vista que hemos creado), el nombre de elemento es el que se mostrará al usuario. Usualmente, los nombres son idénticos, y en esos casos la casilla de verificación Keep the model name and element name equal (Mantener el nombre de modelo y de elemento iguales) está marcada por defecto lo que hace que ambos nombres cambien simultáneamente. Hay, de todas formas, situaciones en las que cierto elemento o nombre de modelo no pueden ser usados y en esos casos usted puede decidir desmarcar la casilla de verificación y seleccionar diferentes nombres. Para mayores detalle, vea la discusión sobre nombres generados automáticamente en la Etapa 14. La casilla de verificación Keep package name equal to modelo name (Mantener el nombre de paquete igual al nombre de modelo) aparece cuando un modelo que usted renombra tiene el mismo nombre que el paquete que lo contiene. Está seleccionada por defecto, pero usted puede desmarcarla si no desea renombrar el paquete.
El modelo debería ahora lucir similar al siguiente:
El botón que hemos renombrado aún muestra su nombre original entre comillas latinas (<<OK>>). Éste es un recordatorio de que el botón fue originado por la plantilla Popup . Ésto no tiene un efecto real y no se mostrará en tiempo de ejecución, así que usted puede ignorarlo.
Guarde su trabajo, y vuelva al navegador.
La ventana debería lucir como sigue:
Hemos completado el modelado del formulario, aunque al presionar el botón Submit los datos no son guardados en ningún lugar. Nos ocuparemos de ésto en la siguiente etapa.
Ahora importaremos el proyecto ejemplo preconstruído, Tutorial 2-3. Este proyecto ejemplo contiene todas las funciones modeladas hasta ahora, y nos servirá como base para la próxima etapa de este tutorial:
Seleccione File(Archivo)| Import… para abrir el asistente de Importación.
Seleccione Existing Project into Workspace (Proyecto Existente en el Espacio de Trabajo) como origen de importación.
Haga clic en Next>.
Asegúrese de que el botón de opción Select archive file: está seleccionado, y haga clic en el botón Browse… (Buscar) para abrir el cuadro de diálogo Select archive containing the projects to import (Seleccione el archivo contenedor de los proyectos a importar).
Por defecto el diálogo debe abrirse en la carpeta workspace que contiene los archivos de los proyectos ejemplo.
Seleccione (o haga doble clic) el archivo samples.zip.
Note lo siguiente: El archivo samples.zip contiene proyectos ejemplo para todas las etapas del tutorial. Usted puede importar tantos ejemplos como desee, pero se recomienda que solo importe el que necesita (Tutorial 2-3 en esta etapa). La ruta completa del archivo que seleccione puede ser diferente, dependiendo de la ubicación en la que instaló Tersus.
Haga clic en el botón Deselect All (Desmarcar Todo).
Seleccione la casilla de verificación cercana al proyecto Tutorial 2-3.
Haga clic en Finish para importar el proyecto.
El asistente importará el proyecto y lo agregará al Repository Explorer.
Haga doble clic en el proyecto Tutorial 2-3 para abrir el modelo raíz en el editor de modelos.
Como alternativa, expanda el proyecto importado, Tutorial 2-3, y el paquete Tutorial 2-3 para encontrarlo, y haga doble clic en el modelo raíz.
Esto abrirá el modelo en una nueva ventana de edición.
Note que el proyecto en que usted trabajó previamente, Tutorial, aún permanece abierto para edición por separado en el editor de modelos, (la lengüeta más a la izquierda, en la captura de pantalla que sigue) y en el servidor de aplicación.
Vuelva al editor de modelos Tutorial, haciendo clic en la lengüeta Tutorial.
Haga clic en el botón Stop the application (Detener la aplicación) de la barra de herramientas principal del studio para detenerla aplicación incluida en el Servidor Tersus.
Cierre la ventana del navegador en que está corriendo la aplicación.
Cierre el editor de modelos Tutorial presionando la X de la lengüeta:
El editor de modelos debe ahora lucir como sigue:
También se recomienda que cierre el (anterior) proyecto Tutorial que creó al principio de esta etapa:
En el repository explorer, haga clic derecho en el proyecto Tutorial.
Seleccione Close Project (Cerrar Proyecto) del menú.
El repository explorer debe lucir similar al siguiente:
Usted puede ahora proceder a la Etapa 3, en la que implementaremos un proceso que guarda la solicitud enviada en la base de datos.
To use the full functionality of this web site, JavaScript needs to be turned on.
For best results, use the Firefox browser..
Copyright © 2003-2017 - Tersus Software Ltd., All rights reserved. Terms of Use License Graphic design by EmaraDesign
