Tabla de contenidos
El editor de Sketcher de MOSKitt ofrece la posibilidad de definir el nivel concreto de una interfaz gráfica de una aplicación, utilizando la mayoría de los widgets comunes como son botones, etiquetas, tablas, menús... La finalidad del Sketcher, más allá de un simple dibujador, es poder enlazar el nivel concreto de la interfaz con el nivel abstracto, representado por los modelos UIM en MOSKitt, y finalmente con los modelos de datos (típicamente diagramas UML, Bases de Datos o Ecore) para poder especificar la población de datos sobre la que se va a interactuar. Una vez tengamos todos los modelos enlazados (Sketcher <-> UIM, UIM <-> UML2), se podrá generar el código de la aplicación con el generador indicado para cada una de ellas.
Los diagramas de los que se compone el Sketcher son los siguientes:
Sketcher Diagram
Window Diagram
El diagrama del Sketcher sirve para definir las distintas ventanas (Window) de las que se va a componer nuestra aplicación. Se pueden usar paquetes (Package) para ordenar las ventanas del modo que el usuario prefiera. Así mismo, se pueden ver los enlaces entre las distintas ventanas en este diagrama, de modo que el usuario puede visualizar inmediatamente la navegabilidad entre las distintas ventanas de la aplicación.
Los iconos de las Ventanas, muestran un pequeño resumen de su contenido a modo de imagen, para poder identificar mejor qué Ventana es cada una.
El elemento raíz de este diagrama es el Sketcher.
La paleta del diagrama es la siguiente:
Los elementos con representación gráfica son los siguientes:
Package
Este elemento sirve como agrupador de otros Paquetes y de Ventanas, para tenerlas organizadas de algún modo según le convenga al usuario.
Captura de pantalla
Propiedades editables a través de la figuras
Id
Elementos que puede contener
Window, Package
Elementos dónde se puede crear
Sketcher (Canvas)
Package
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Ninguna
Window
Este elemento representa una Ventana de la aplicación. Para poder editarla, dispone de un diagrama asociado, accesible a través de su menú contextual o al hacer doble click sobre la figura. La figura en sí tiene dos representaciones: una básica que muestra un pequeño dibujo acerca del tipo de ventana según el Tag que tenga asignado o un dibujo vacío (si se trata de una ventana no mapeable a un patrón de la CIT); y otra que muestra un resumen de su contenido, de los Widgets i componentes de la Ventana.
NOTA: se recomienda utilizar la primera representación, dado que la segunda hace uso de mucha memoria y puede ralentizar el editor.
Captura de pantalla
Propiedades editables a través de la figura
Id
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Sketcher (Canvas)
Package
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Muestra una imagen a modo de resumen del contenido del diagrama que tiene asociado la Window.
Link
Captura de pantalla
Propiedades editables a través de la figura
Ninguna
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Canvas - Este elemento no se puede crear, sino que se dibuja automáticamente cuando desde una Ventana existe una referencia a otra Ventana
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Ninguno
Elementos origen y destino
Posibles elementos origen
Window
Posibles elementos destino
Window
Comment
Este elemento sirve para añadir comentarios al diagrama y poderlos visualizar en el diagrama
Captura de pantalla
Propiedades editables a través de la figura
Body
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Sketcher (Canvas)
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Ninguno
Comment Link
Captura de pantalla
Propiedades editables a través de la figura
Ninguna
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Canvas
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Ninguno
Elementos origen y destino
Posibles elementos origen
Comment
Posibles elementos destino
Window
Package
Comment (distinto al de origen)
En el diagrama de la Window se puede modelar la Ventana de la aplicación, incluyendo los Widgets y Componentes que la van a formar. Para ello, se dispone de una figura base que representa la Ventana, y sobre ella se pueden incluir los elementos directamente.
Varios Widgets pueden tener asociado un elemento del modelo de datos
La paleta del diagrama es la siguiente:
Los elementos con representación gráfica son los siguientes:
Window
Este elemento representa la Ventana de la aplicación. A este elemento, se le puede añadir cualquier tipo de Widget.
Captura de pantalla
Propiedades editables a través de la figuras
Ninguna
Elementos que puede contener
Basic
Label
Text Box
Button
Icon Button
Check Box
Radio Button
List Box
Combo Box
Image
Panel
Group Box
Panel
Tab Panel
Table
Table
DateTime
Calendar
Date Field
Time Field
Menus
Popup Menu
Bar Menu
Tool Bar Menu
Tree View Menu
Navigation
Link
Pagination
Breadcrumb
Derived Widgets
Derived Label
Derived Link
Others
Multi View Panel
Tree View
Radio Button Group
Check Box Group
Cover Flow
Elementos dónde se puede crear
Canvas - Este elemento no se puede ni crear ni eliminar, ya que representa la Window que se está editando.
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
La figura dispone de un borde para poder moverla mejor sobre el diagrama.
TextBox
Representa un campo de texto donde poder entrar datos.
Captura de pantalla
Propiedades editables a través de la figura
Sample Text
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Ninguno
Label
Representa un etiqueta para mostrar información.
Captura de pantalla
Propiedades editables a través de la figura
Text
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Tree View Item
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Ninguno
Check Box
Representa un seleccionable en forma de Check Box. Útil para selección múltiple en una lista de elementos, o para valores lógicos de verdadero o falso para una propiedad.
Captura de pantalla
Propiedades editables a través de la figura
Text
Selected
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Check Box Group
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Al hacer click sobre la decoración de la figura, cambia automáticamente el valor del atributo "selected".
Radio Button
Representa un seleccionable en forma de Radio Button. Útil para selección única en una lista de elementos.
Captura de pantalla
Propiedades editables a través de la figura
Text
Selected
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Radio Button Group
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Al hacer click sobre la decoración de la figura, cambia automáticamente el valor del atributo "selected".
Link
Representa una etiqueta con comportamiento de enlace para enlazar con otra Window.
Captura de pantalla
Propiedades editables a través de la figura
Text
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Tree View Item
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Ninguna
Image
Representa una imagen. Permite seleccionar una imagen del sistema de ficheros o del espacio de trabajo previamente cargada como elemento Image Descriptor en los Reusable Elements.
Captura de pantalla
Propiedades editables a través de la figura
Ninguna
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Si el elemento no tiene ninguna imagen asociada, muestra una aspa; y si la tiene, muestra la imagen.
Button
Representa un botón. Permite enlazar con otras Windows.
Captura de pantalla
Tabla 1.7.
Sin imagen asociada ![]() |
Con imagen asociada ![]() |
Widget No Editable ![]() |
Widget Obligtatorio ![]() |
Widget con datos ![]() |
Propiedades editables a través de la figura
Text
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Si el elemento tiene una imagen asociada, la muestra.
Icon Button
Representa un botón sin texto. Permite enlazar con otras Windows.
Captura de pantalla
Tabla 1.8.
Sin imagen asociada ![]() |
Con imagen asociada ![]() |
Widget No Editable ![]() |
Widget Obligatorio ![]() |
Widget con datos ![]() |
Propiedades editables a través de la figura
Ninguna
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Si el elemento no tiene ninguna imagen asociada, muestra una aspa; y si la tiene, muestra la imagen.
List Box
Representa una lista desplegada de elementos de tipo Item.
Captura de pantalla
Propiedades editables a través de la figura
Ninguna
Elementos que puede contener
Item
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Layout en forma de lista vertical para los items
Acciones específicas o comportamiento específico
Ninguno
Combo Box
Representa una lista plegada de elementos de tipo Item.
Captura de pantalla
Propiedades editables a través de la figura
Collapsed
Elementos que puede contener
Item
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Layout en forma de lista vertical para los items
Acciones específicas o comportamiento específico
Al hacer click sobre la decoración de la figura, cambia automáticamente el valor del atributo "collapsed", mostrando todos los items (false) o solamente el primero (true).
Cover Flow
Representa una lista de elementos de tipo Item con visualización especial. Permite visualizar únicamente un item, viendo su Texto y su Imagen asociadas.
Captura de pantalla
Propiedades editables a través de la figura
Sample Text del item
Elementos que puede contener
Item
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Muestra en el centro la imagen de su primer item
Acciones específicas o comportamiento específico
Si el elemento no tiene ningún item, no muestra nada; si tiene un item que no tiene ninguna figura asociada, muestra una aspa; y si tiene un item con una imagen asociada, muestra la imagen.
Item
Representa un item de tipo lista para los elementos List Box, Combo Box o Cover Flow
Captura de pantalla
Propiedades editables a través de la figura
Sample Text
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
List Box
Combo Box
Cover Flow
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Dentro del Cover Flow, si el elemento no tiene ninguna figura asociada, muestra una aspa; y si tiene una imagen asociada, muestra la imagen.
Pagination
Representa un elemento de paginación, útil para poder visualizar distintos registros.
Captura de pantalla
Propiedades editables a través de la figura
Sample Text
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Muestra el texto de ejemplo entre las decoraciones
Acciones específicas o comportamiento específico
Ninguno
Breadcrumb
Representa un elemento que ayuda a la navegación entre las distintas Ventanas de la aplicación. Útil para no perder la ubicación actual dentro de la aplicación.
Captura de pantalla
Propiedades editables a través de la figura
Ninguna
Elementos que puede contener
Breadcrumb Item
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Muestra la lista de Breadcrumb Items en un layout de tipo lista horitontal. Además, añade entre dos items una decoración para indicar la ubicación anterior y la siguiente.
Acciones específicas o comportamiento específico
Ninguno
Breadcrumb Item
Representa un item del Breadcrumb, que sería una Ventana dentro de la aplicación.
Captura de pantalla
Propiedades editables a través de la figura
Sample Text
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Breadcrumb
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Al hacer doble click sobre la figura, si tiene asociada una Window en el atributo "Target Window", abre su diagrama. Y si no tiene asignado ningún valor, pregunta al usuario si desea crear una Window para enlazarla con dicho elemento.
Featured Label (Derived Label)
Representa un etiqueta para mostrar información. Dicha información, puede sacarse del modelo de datos a través de una expresión.
Captura de pantalla
Tabla 1.13.
Widget Editable ![]() |
Widget No Editable No disponible |
Widget Obligatorio No disponible |
Widget con datos ![]() |
Propiedades editables a través de la figura
Sample Text
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Tree View Item
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Ninguno
Featured Link (Derived Link)
Representa un enlace entre Windows. El valor que se muestra, puede sacarse del modelo de datos a través de una expresión.
Captura de pantalla
Tabla 1.14.
Widget Editable ![]() |
Widget No Editable No disponible |
Widget Obligatorio No disponible |
Widget con datos ![]() |
Propiedades editables a través de la figura
Sample Text
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Tree View Item
Layouts / posicionamiento automático
Ninguno.
Acciones específicas o comportamiento específico
Al hacer doble click sobre la figura, si tiene asociada una Window en el atributo "Target Window", abre su diagrama. Y si no tiene asignado ningún valor, pregunta al usuario si desea crear una Window para enlazarla con dicho elemento.
Calendar
Representa un calendario.
Captura de pantalla
Propiedades editables a través de la figura
Ninguno
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Ninguno.
Acciones específicas o comportamiento específico
Ninguno.
Date Field
Representa un elemento de selección/visualización de fecha.
Captura de pantalla (solamente se muestra cuando es editable, no obligatorio y sin datos asociados. Si no es editable, la figura se visualiza más grisácea; si es obligatorio, se muestra un asterisco a la izquierda de la figura; si tiene datos asociados, se muestra una D pequeña en la parte superior izquierda).
Tabla 1.16.
Visualization: Text | Visualization: Label | Visualization: Splitted Text | |
Edition: None |
![]() |
![]() |
![]() |
Edition: Picker |
![]() |
![]() |
![]() |
Edition: Spinner |
![]() |
![]() |
![]() |
Edition: Drop Down |
![]() |
![]() |
![]() |
Edition: Calendar |
![]() |
![]() |
![]() |
Propiedades editables a través de la figura
Sample Text
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Ninguno.
Acciones específicas o comportamiento específico
Este elemento tiene hasta 15 representaciones diferentes, según el valor de sus atributos "Visualization" y "Edition". El cambio de cualquiera de ellos, actualiza la figura acorde a su representación.
El atributo Sample Text, se parsea del siguiente modo:
4 caracteres para el año
1 caracter para la separación entre año y mes
2 caracteres para el mes
1 caracter para la separación entre mes y día
2 caracteres para el dia
Time Field
Representa un elemento de selección/visualización de hora.
Captura de pantalla (solamente se muestra cuando es editable, no obligatorio y sin datos asociados. Si no es editable, la figura se visualiza más grisácea; si es obligatorio, se muestra un asterisco a la izquierda de la figura; si tiene datos asociados, se muestra una D pequeña en la parte superior izquierda)
Tabla 1.17.
Visualization: Text | Visualization: Label | Visualization: Splitted Text | |
Edition: None |
![]() |
![]() |
![]() |
Edition: Picker |
![]() |
![]() |
![]() |
Edition: Spinner |
![]() |
![]() |
![]() |
Edition: Drop Down |
![]() |
![]() |
![]() |
Edition: Clock |
![]() |
![]() |
![]() |
Propiedades editables a través de la figura
Sample Text
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Ninguno.
Acciones específicas o comportamiento específico
Este elemento tiene hasta 15 representaciones diferentes, según el valor de sus atributos "Visualization" y "Edition". El cambio de cualquiera de ellos, actualiza la figura acorde a su representación.
El atributo Sample Text, se parsea del siguiente modo:
2 caracteres para las horas
1 caracter para la separación entre horas y minutos
2 caracteres para los minutos
Tab Panel
Este elemento representa un panel con pestañas. Su representación puede ser tanto horizontal como vertical
Captura de pantalla
Propiedades editables a través de la figura
Ninguna
Elementos que puede contener
Contenedor superior
Tab Item
Contenedor inferior
Basic
Label
Text Box
Button
Icon Button
Check Box
Radio Button
List Box
Combo Box
Image
Panel
Group Box
Panel
Tab Panel
Table
Table
DateTime
Calendar
Date Field
Time Field
Menus
Popup Menu
Bar Menu
Tool Bar Menu
Tree View Menu
Navigation
Link
Pagination
Breadcrumb
Derived Widgets
Derived Label
Derived Link
Others
Multi View Panel
Tree View
Radio Button Group
Check Box Group
Cover Flow
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
La figura consta de dos compartimentos: un compartimento superior (orientación Horizontal) o derecho (orientación Vertical), de tipo lista, que contiene los Tab Items; y un compartimento inferior (orientación Horizontal) o izquierdo (orientación Vertical), de tipo canvas, para poder dibujar cualquier otro tipo de Widget.
Acciones específicas o comportamiento específico
La modificación del atributo "Orientation", modifica la figura para adaptarse al modo seleccionado.
En el compartimento inferior (o izquierdo), únicamente se muestran los Widgets de la pestaña activa.
La modificación del atributo "Active Tab", modifica el contenido del panel inferior (o izquierdo).
Haciendo click sobre un Tab Item del panel superior (o derecho), se modifica el atributo "Active Tab", con la modificación del panel inferior (o izquierdo) correspondiente.
La figura dispone de un borde para poder moverla mejor sobre el diagrama.
Multi View
Este elemento representa un panel con pestañas, como un Tab Panel, pero cambia el tipo de visualización de las pestañas y el modo con el que se pasa de una pestaña a otra.
Captura de pantalla
Propiedades editables a través de la figura
Active Tab
Elementos que puede contener
Basic
Label
Text Box
Button
Icon Button
Check Box
Radio Button
List Box
Combo Box
Image
Panel
Group Box
Panel
Tab Panel
Table
Table
DateTime
Calendar
Date Field
Time Field
Menus
Popup Menu
Bar Menu
Tool Bar Menu
Tree View Menu
Navigation
Link
Pagination
Breadcrumb
Derived Widgets
Derived Label
Derived Link
Others
Multi View Panel
Tree View
Radio Button Group
Check Box Group
Cover Flow
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
La figura consta de dos secciones: una sección superior con botones de navegación entre pestañas (anterior y siguiente) y botones para añadir una nueva pestaña y para eliminar la pestaña activa; y una sección inferior de tipo canvas, para poder dibujar cualquier otro tipo de Widget.
Acciones específicas o comportamiento específico
En el compartimento inferior, únicamente se muestran los Widgets de la pestaña activa.
La modificación del atributo "Active Tab", modifica el contenido del panel inferior (o izquierdo).
Haciendo click sobre los botones de navegación de la sección superior, se puede cambiar el Tab Activo.
Haciendo click sobre el botón de inserción de la sección superior, se añade un nuevo elemento Tab Item.
Haciendo click sobre el botón de borrado de la sección superior, se elimina el Tab Item activo.
Tab Item
Este elemento representa un panel con pestañas, como un Tab Panel, pero cambia el tipo de visualización de las pestañas y el modo con el que se pasa de una pestaña a otra.
Captura de pantalla
Propiedades editables a través de la figura
Text
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Tab Panel
Multi View (a través de los botones superiores de la figura)
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Cuando se encuentra dentro de un Tab Panel, el click sobre el elemento Tab Item supose la modificación del atributo "Active Tab" del elemento Tab Panel, modificando el contenido de su compartimento dedicado para los Widgets (Ver elemento Tab Panel).
Tree View
Este elemento representa un árbol de elementos. Sus elementos pueden estar anidados
Captura de pantalla
Propiedades editables a través de la figura
Ninguna
Elementos que puede contener
Tree View Item
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Tiene un layout específico para poder mostrar los items desplazados de forma correcta, para simular la visualización en árbol correctamente. Así pues, los elementos de primer nivel aparecen sin sangría; los de segundo nivel, con la sangría de segundo nivel; los de tercer nivel, con la sangría de tercer nivel...
Acciones específicas o comportamiento específico
La figura dispone de un borde para poder moverla mejor sobre el diagrama.
Tree View Item
Este elemento una entrada en el Tree View. Puede a su vez contener otros TreeView anidados, para simular el comportamiento de un árbol.
Captura de pantalla
Propiedades editables a través de la figura
Ninguna
Elementos que puede contener
Label
Link
Featured Label
Featured Link
Elementos dónde se puede crear
Tree View
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Ninguno
Table
Este elemento representa una Tabla, con columnas y filas.
Captura de pantalla
Propiedades editables a través de la figura
Ninguna
Elementos que puede contener
Table Headers
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Existe un layout específico para la Tabla para poder manejar los Table Headers y Table Cell Items de forma correcta, para simular el comportamiento de una tabla. Así pues, cada Table Header se situará al lado del otro según la orientación sea Horizontal (izquierda o derecha) o Vertical (arriba o abajo). Del mismo modo, los Table Cell Items también se colocarán uno al lado del otro dentro del Table Header, también según la orientación de la Tabla.
Cuando se quiere modificar el tamaño de la tabla, se debe seleccionar la tabla entera, y su modificación se verá reflejada en sus Table Headers y también en sus Table Cell Items, que verán modificado su tamaño en proporción según se agrande o disminuya la tabla, y del número de elementos que contenga esta.
Si se selecciona un Table Header y se quiere modificar su tamaño, se modificará el tamaño de ese Table Header, redimensionando la Tabla y no los Table Headers colindantes.
Acciones específicas o comportamiento específico
La Tabla puede representarse de forma Horizontal o Vertical, según el valor del atributo "Orientation".
Se puede elegir el tipo de selección de la Tabla:
None: no hay selección en la tabla
Check Box: añade una Columna a la tabla para seleccionar filas en modo Check Box (múltiple selección)
Radio Button: añade una Columna a la tabla para seleccionar filas en modo Radio Button (selección única)
Highlighted: resalta la primera fila de la tabla.
La figura dispone de un borde para poder moverla mejor sobre el diagrama.
Table Header
Este elemento representa una Columna dentro de una Tabla
Captura de pantalla
Propiedades editables a través de la figura
Id
Elementos que puede contener
Table Cell Item
Elementos dónde se puede crear
Table
Layouts / posicionamiento automático
Ver el elemento Table
Acciones específicas o comportamiento específico
Ver el elemento Table
Table Cell Item (Table Row)
La entrada de menú Table Row, inserta tantos Table Cell Item dentro de cada Table Header como convenga, a fin de crear una fila completa en la Tabla.
Captura de pantalla
Propiedades editables a través de la figura
Ninguna
Elementos que puede contener
Basic
Label
Text Box
Button
Icon Button
Check Box
Radio Button
List Box
Combo Box
Image
Panel
Group Box
Panel
Tab Panel
Table
Table
DateTime
Calendar
Date Field
Time Field
Menus
Popup Menu
Bar Menu
Tool Bar Menu
Tree View Menu
Navigation
Link
Pagination
Breadcrumb
Derived Widgets
Derived Label
Derived Link
Others
Multi View Panel
Tree View
Radio Button Group
Check Box Group
Cover Flow
Elementos dónde se puede crear
Table Header
Layouts / posicionamiento automático
Ver el elemento Table
Acciones específicas o comportamiento específico
Ver el elemento Table
Popup Menu
Este elemento representa menú simple.
Captura de pantalla
Propiedades editables a través de la figura
Ninguna
Elementos que puede contener
Sub Menu
Menu Item Action
Menu Item Separator
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
La figura dispone de un borde para poder moverla mejor sobre el diagrama.
Tree View Menu
Este elemento representa menú cuyos items se disponen en forma de árbol.
Captura de pantalla
Propiedades editables a través de la figura
Ninguna
Elementos que puede contener
Sub Menu
Menu Item Action
Menu Item Separator
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Tiene un layout específico para poder mostrar los items desplazados de forma correcta, para simular la visualización en árbol correctamente. Así pues, los elementos de primer nivel aparecen sin sangría; los de segundo nivel, con la sangría de segundo nivel; los de tercer nivel, con la sangría de tercer nivel...
Acciones específicas o comportamiento específico
La figura dispone de un borde para poder moverla mejor sobre el diagrama.
Bar Menu
Este elemento representa menú de la barra de menús de la aplicación.
Captura de pantalla
Propiedades editables a través de la figura
Ninguna
Elementos que puede contener
Sub Menu
Menu Item Action
Menu Item Separator
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
El menú puede mostrarse según su orientación en Horizontal o Vertical
La figura dispone de un borde para poder moverla mejor sobre el diagrama.
Tool Bar Menu
Este elemento representa menú de la barra de menús de la aplicación.
Captura de pantalla
Propiedades editables a través de la figura
Ninguna
Elementos que puede contener
Sub Menu
Menu Item Action
Menu Item Separator
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
El menú puede mostrarse según su orientación en Horizontal o Vertical
La figura dispone de un borde para poder moverla mejor sobre el diagrama.
Sub Menú
Este elemento representa un Sub Menú dentro de un Menú de cualquier tipo.
Captura de pantalla
Propiedades editables a través de la figura
Text (dentro de un Popup Menu, Tree View Menu y Bar Menu)
Elementos que puede contener
Sub Menu
Menu Item Action
Elementos dónde se puede crear
Popup Menu
Tree View Menu
Bar Menu
Tool Bar Menu
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Ninguno
Menu Item Action
Este elemento representa una acción dentro de un Menú de cualquier tipo.
Captura de pantalla
Propiedades editables a través de la figura
Text (dentro de un Popup Menu, Tree View Menu y Bar Menu)
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Popup Menu
Tree View Menu
Bar Menu
Tool Bar Menu
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Ninguno
Radio Button Group
Este elemento representa un Group Box especial, en el que únicamente se pueden añadir elementos de tipo Radio Button.
Captura de pantalla
Propiedades editables a través de la figura
Text
Elementos que puede contener
Radio Button
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
La figura dispone de un borde para poder moverla mejor sobre el diagrama.
Chech Box Group
Este elemento representa un Group Box especial, en el que únicamente se pueden añadir elementos de tipo Check Box.
Captura de pantalla
Propiedades editables a través de la figura
Text
Elementos que puede contener
Check Box
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
La figura dispone de un borde para poder moverla mejor sobre el diagrama.
Panel
Este elemento representa un Panel, un agrupador de Widgets
Captura de pantalla
Propiedades editables a través de la figura
Ninguna
Elementos que puede contener
Basic
Label
Text Box
Button
Icon Button
Check Box
Radio Button
List Box
Combo Box
Image
Panel
Group Box
Panel
Tab Panel
Table
Table
DateTime
Calendar
Date Field
Time Field
Menus
Popup Menu
Bar Menu
Tool Bar Menu
Tree View Menu
Navigation
Link
Pagination
Breadcrumb
Derived Widgets
Derived Label
Derived Link
Others
Multi View Panel
Tree View
Radio Button Group
Check Box Group
Cover Flow
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Ninguno
Group Box
Este elemento representa un agrupador de Widgets especial con forma de grupo.
Captura de pantalla
Propiedades editables a través de la figura
Text
Elementos que puede contener
Basic
Label
Text Box
Button
Icon Button
Check Box
Radio Button
List Box
Combo Box
Image
Panel
Group Box
Panel
Tab Panel
Table
Table
DateTime
Calendar
Date Field
Time Field
Menus
Popup Menu
Bar Menu
Tool Bar Menu
Tree View Menu
Navigation
Link
Pagination
Breadcrumb
Derived Widgets
Derived Label
Derived Link
Others
Multi View Panel
Tree View
Radio Button Group
Check Box Group
Cover Flow
Elementos dónde se puede crear
Window
Tab Panel
Multi View
Table Cell Item
Panel
Group Box
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Ninguno
Comment
Este elemento sirve para añadir comentarios al diagrama y poderlos visualizar en el diagrama
Captura de pantalla
Propiedades editables a través de la figura
Body
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Sketcher (Canvas)
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Ninguno
Comment Link
Captura de pantalla
Propiedades editables a través de la figura
Ninguna
Elementos que puede contener
Ninguno
Elementos dónde se puede crear
Canvas
Layouts / posicionamiento automático
Ninguno
Acciones específicas o comportamiento específico
Ninguno
Elementos origen y destino
Posibles elementos origen
Comment
Posibles elementos destino
TextBox
Label
Check Box
Radio Button
Link
Image
Button
Icon Button
List Box
Combo Box
Cover Flow
Pagination
Breadcrumb
Featured Label
Featured Link
Calendar
Date Field
Text Field
Tab Panel
Multi View
Tree View
Table
Popup Menu
Tree View Menu
Bar Menu
Tool Bar Menu
Radio Button Group
Check Box Group
Panel
Group Box
Window
Comment (distinto al de origen)