Objetivos:
• Describir los diferentes tipos de Canvases y las relaciones entre sí.
• Identificar el tipo de Canvas apropiado de acuerdo al escenario.
• Crear un Efecto Overlay mediante el uso de Stacked Canvases.
• Crear una Barra de Herramientas (Toolbar).
• Crear una interfaz con pestañas.
NOTA: Usamos como ejemplo la Base de Datos: ORCL, la cual viene por defecto en cualquier versión de ORACLE.
Además del Content Canvas, Forms Builder proporciona otros tres tipos:
• Stacked Canvas.
• Toolbar Canvas.
• Tab Canvas.
Al crear un Canvas, especifique su tipo estableciendo la propiedad Canvas Type. El tipo determina cómo se visualizara en la Ventana (Window) a la que está asignado.
______________________________________________________________________________________
Stacked Canvas.
Un Stacked Canvas se muestra encima o apilado sobre el Content Canvas asignado a una ventana. Un Stacked Canvas puede compartir una ventana con un Content Canvas y con cualquier número de Stacked Canvases adicionales. Los Stacked Canvases suelen ser más pequeños que la ventana en la que se muestran.
Tamaño de un Stacked Canvas.
Los Stacked Canvases suelen ser más pequeños que el Content Canvas en la misma ventana. Puede determinar las dimensiones del Stacked Canvases estableciendo las propiedades Width y Height. Puede determinar las dimensiones del area visible estableciendo las propiedades Viewport Width y Viewport Height.
Uso típico de un Stacked Canvas: Si un bloque de datos contiene más Items de los que pueden mostrarse en la ventana, Forms desplaza la ventana para mostrar los Items que inicialmente no estaban visibles. Esto puede hacer que Items importantes, se desplacen fuera de la vista. La alternativa es colocar Items importantes en un Content Canvas y, a continuación, ubicar los Items antes no visibles en un Stacked Canvas, así este último Canvas se convierte en la región de desplazamiento.
Usos y beneficios de los Stacked Canvases.
Con estos puede:
• Crear vistas desplazables, similares a las generadas por Oracle Designer.
• Crear un efecto overlay en una sola ventana.
• Mostrar encabezados con información constante, como nombre de la empresa.
• Crear un efecto en cascada o revelador dentro de una sola ventana.
• Visualizar información adicional.
• Mostrar información de acuerdo a ciertas condiciones.
• Visualizar ayuda contextual.
• Ocultar información.
______________________________________________________________________________________
Creación de un Stacked Canvas.
Puede crearlo mediante el:
• Editor de Diseño.
Pasos:
1. Abra el Editor de Diseño para el Content Canvas donde desea crear el Stacked Canvas.
2. Haga clic en la icono Stacked Canvas
en la barra de herramientas.
3. Haga clic en el lugar (Sobre el Content Canvas) donde desea que aparezca, y arrastre el cursor del mouse para darle el tamaño apropiado.
4. Establezca las propiedades de acuerdo a sus necesidades.
• Navegador de Objetos.
Pasos:
1. Haga clic en el nodo Canvases del Navegador de objetos y luego en el icono Crear.
Un nuevo Canvas se muestra con un nombre predeterminado de CANVASXX.
2. Establezca la propiedad Canvas Type en Stacked.
3. Asegúrese de que el Stacked Canvas esté debajo del Content Canvas en el Navegador de objetos.
Nota: Puede convertir cualquier Canvas y creado en el tipo que desea.
Para que el Stacked Canvas se muestre correctamente en tiempo de ejecución, asegúrese de que su orden no tenga precedencia sobre el Content Canvas asignado a la misma ventana. El orden de precedencia de los Canvases se define por la secuencia en la que aparecen en el Navegador de Objetos.
Visualización de imágenes apiladas en el editor de diseño.
Compruebe la posición de visualización de los Stacked Canvases haciendo lo siguiente:
• Abra el Editor de Diseño para el Content Canvas en cuestión y luego seleccione Ver (View)>Stacked Views... Aparecerá el cuadro de diálogo Stacked/Tab Canvases, con una lista de todas los Stacked/Tab Canvases asignados a la misma ventana que el Content Canvas seleccionado previamente.
• Seleccione el Canvas que desea mostrar en el Editor de diseño.
Nota: [Ctrl] + clic para desmarcar un Canvas previamente seleccionado.
Las Propiedades del Stacked Canvas.
Hay varias propiedades que se pueden configurar para afectar el aspecto y el comportamiento de los Stacked Canvas:
• Raise on Entry: Controla la forma en que Forms muestra el Canvas cuando el usuario o la aplicación navega hacia un Item contenido en dicho Canvas.
• Viewport X/Y Position: Especifica el punto en el que se encuentra la esquina superior izquierda del Stacked Canvas en relación con el Content Canvas.
• Viewport Width/Height: Determina el tamaño del Stacked Canvas que se muestra en tiempo de ejecución.
• Visible: Indica si el Content Canvas es inicialmente visible.
• Window: Especifica la ventana en la que se mostrará el Canvas.
• Show Horizontal/Vertical Scroll Bar: especifica si las barras de desplazamiento se muestran con el Canvas.
______________________________________________________________________________________
El Toolbar Canvas.
Un Toolbar Canvas es un tipo especial de Canvas que puede crear para contener botones y otros elementos de GUI utilizados con frecuencia.
Tipos de la barra de herramientas:
• Barra de Herramientas Vertical (Vertical Toolbar): utilice un Vertical Toolbar para colocar herramientas en el lado izquierdo de la ventana.
• Barra de Herramientas Horizontal (Horizontal Toolbar): utilice un Vertical Toolbar para colocar herramientas y controles en la parte superior de la ventana debajo de la barra de menús de la ventana.
Usos y ventajas de los Toolbars.
Estos tipos de Canvas ofrecen las siguientes ventajas:
• Proporcionar una apariencia estándar a través de Canvases que se muestran en la misma ventana.
• Disminuye el tiempo de mantenimiento del módulo.
• Aumenta la usabilidad de las aplicaciones.
• Crear aplicaciones similares a otras utilizadas en el mismo entorno.
• Proporcionar una alternativa a las aplicaciones basadas en menús o en las teclas de función.
______________________________________________________________________________________
El MDI Toolbar.
Puede adjuntar el Toolbar a ventanas individuales, o al propio Form. Adjuntar una barra de herramientas a un Form proporciona una barra de herramientas MDI, por lo que no es necesario crear más de una barra de herramientas para una aplicación de Forms que utiliza varias ventanas. Si muestra una barra de herramientas en la ventana MDI, la misma barra de herramientas no se duplicará en las ventanas individuales del Form.
La visualización de una barra de herramientas MDI se determina mediante una combinación de propiedades de Form y el parámetro runtime useSDI que se establece como parte de otherparams:
Creando un Toolbar Canvas.
Pasos:
1. Crear o modificar un Canvas:
Establezca la propiedad Canvas Type con Horizontal o Vertical Toolbar.
2. Añada funcionalidad. Para evitar problemas con la navegación no deseada, asegúrese de establecer la propiedad Mouse Navigate en No.
3. Resize: Utilice el Editor de diseño para cambiar el tamaño del Toolbar Canvas de modo que cumpla con su requerimiento.
4. Asignelo al Window o al Form: En la paleta Propiedad del Window o en el módulo Form, establezca las propiedades Horizontal/Vertical Toolbar Canvas.
Cuando mostramos barras de herramientas en el Form/Window, el window manager controla el desplazamiento del Content Canvas ya sea hacia abajo o hacia la derecha para mostrar la barra de herramientas. No es necesario dejar suficiente espacio en el Content Canvas para colocar la barra de herramientas.
Estableciendo las Propiedades del Toolbar.
Una vez creado el Toolbar Canvas, puede establecer sus propiedades así como las propiedades del Window o Form asociado:
• Propiedades del Canvas:
---Canvas Type: Barra de herramientas horizontal o vertical.
---Window: Especifica en qué ventana aparece la barra de herramientas.
---Width/Height: Tamaño del Canvas. El ancho de una barra de herramientas horizontal se establece en el ancho (Width) de la ventana. De igual modo, la altura de una barra de herramientas vertical se establece en la altura (Height) de la ventana.
• Propiedades del Window:
---Horizontal/Vertical Toolbar Canvas: Identifica la barra de herramientas horizontal/vertical que se mostrará en esta ventana.
• Propiedades del Módulo Form:
---Horizontal/Vertical Toolbar Canvas: Identifica la barra de herramientas horizontal/vertical que se mostrará en la ventana MDI (cuando el parámetro runtime useSDI está establecido en No).
______________________________________________________________________________________
El Tab Canvas.
Es un tipo especial de Canvas que le permite organizar y mostrar información relacionada en pestañas separadas. Al igual que los Stacked Canvases, los Tab Canvases se muestran sobre un Content Canvas.
¿Qué es un Tab Page?
Es un sub-objeto del Tab Canvas. Cada Canvas se compone de una o más pestañas. Una pestaña muestra un subconjunto de información, la cual esta distribuida en el conjunto de pestañas. Cada pestaña tiene una etiqueta en la que los usuarios pueden hacer clic para acceder a la información de la misma.
Cada pestaña ocupa una cantidad igual de espacio del Tab Canvas.
Usos y Ventajas.
Puede utilizarlos para:
• Crear un efecto overlay en una sola ventana.
• Mostrar grandes cantidades de información en un solo Canvas.
• Ocultar información.
• Acceder fácilmente a la información requerida haciendo clic en la pestaña en cuestión.
Creación:
Para crear un Tab Canvas funcional, debe:
• Cree un Canvas mediante el Navegador de objetos o el Editor de diseño.
• Establezca la propiedad Canvas Type en Tab Canvas.
• Defina una o más pestaña según su requerimiento.
• Coloque los Items correspondientes en las pestañas pertinentes.
Creación mediante el Navegador de Objetos.
Pasos:
1. Con el nodo Canvas seleccionado, haga clic en el icono Crear
.
2. Establezca la propiedad Canvas Type en Tab. Además, establezca las demás propiedades de acuerdo a sus necesidades.
3. Expanda el nodo Canvas y a su vez seleccione el nodo Tab Pages.
4. Haga clic en el ícono Crear (Con el Nodo Tab Pages seleccionado). Esto crea una pestaña en el Navegador de objetos con un nombre predeterminado de PAGEXX.
5. Establezca las propiedades de cada pestaña según sus necesidades.
6. Cree pestañas adicionales repitiendo los pasos 4 y 5.
Creación mediante el Layout Editor.
Pasos:
1. Muestre el Content Canvas donde desea crear el nuevo Tab Canvas.
2. Haga clic en la herramienta Tab Canvas, luego arrastre el ratón sobre el area donde desea colocarlo. Por defecto se crea con dos Pestañas.
3. Establezca las propiedades de acuerdo a sus necesidades.
5. Si así lo requiere, cree pestañas adicionales siguiendo los pasos 3, 4, 5 y 6 descritos en Creación mediante el Navegador de Objetos (Mas arriba).
6. Establezca las propiedades de las pestañas según sus necesidades.
______________________________________________________________________________________
Configurando las Propiedades del Tab Canvas, sus Pestañas y sus Items.
Una vez que crea el Tab Canvas y sus Pestañas, debe establecer las propiedades necesarias para ambos objetos. Coloque los Items sus Pestañas correspondientes usando ciertas propiedades.
• Propiedades del Tab Canvas:
---Viewport X/Y Position: Especifica el punto en el que se encuentra la esquina superior izquierda del Tab Canvas en relación con el Content Canvas.
---Viewport Width/Height: Define el tamaño del Tab Canvas.
---Corner Style: Especifica la forma de las pestañas etiquetadas (Labeled Tabs) (Chamfered, Square, o Rounded).
---Tab Attachment Edge: Es donde se visualizaran las pestañas (Top, Bottom, Left, Right, Start, o End).
---Width Style: Especifica si el ancho de la pestaña varía con la longitud de la etiqueta (Label).
---Active Style: Especifica si la etiqueta (Label) se muestra en negrita cuando la pestaña está activa.
• Propiedades del Tab Page:
---Label: Especifica la etiqueta que aparece en la pestaña.
• Propiedades del Item:---Canvas: El Canvas en el que se mostrará el Item.
---Tab Page: La pestaña en la que se mostrará el Item.
Nota: Recuerde que puede visualizar el diseño de los Canvases y cambiar la ubicación de sus Items en el Editor de Diseño.
Consejo de Rendimiento: En tiempo de ejecución, el tiempo tomado en cargar e inicializar un Tab Canvas depende de todos los objetos del mismo y no sólo de los inicialmente visibles.
______________________________________________________________________________________
Ajunto el Módulo Form creado para esta práctica: Link.
Nota: El Módulo contiene ciertos códigos no explicados en esta publicación, los mismos serán explicados en futuras publicaciones del Blog.
______________________________________________________________________________________
______________________________________________________________________________________
Los Tipos de Canvases.• Stacked Canvas.
• Toolbar Canvas.
• Tab Canvas.
______________________________________________________________________________________
Stacked Canvas.
Un Stacked Canvas se muestra encima o apilado sobre el Content Canvas asignado a una ventana. Un Stacked Canvas puede compartir una ventana con un Content Canvas y con cualquier número de Stacked Canvases adicionales. Los Stacked Canvases suelen ser más pequeños que la ventana en la que se muestran.
Tamaño de un Stacked Canvas.
Los Stacked Canvases suelen ser más pequeños que el Content Canvas en la misma ventana. Puede determinar las dimensiones del Stacked Canvases estableciendo las propiedades Width y Height. Puede determinar las dimensiones del area visible estableciendo las propiedades Viewport Width y Viewport Height.
Usos y beneficios de los Stacked Canvases.
Con estos puede:
• Crear vistas desplazables, similares a las generadas por Oracle Designer.
• Crear un efecto overlay en una sola ventana.
• Mostrar encabezados con información constante, como nombre de la empresa.
• Crear un efecto en cascada o revelador dentro de una sola ventana.
• Visualizar información adicional.
• Mostrar información de acuerdo a ciertas condiciones.
• Visualizar ayuda contextual.
• Ocultar información.
______________________________________________________________________________________
Creación de un Stacked Canvas.
• Editor de Diseño.
Pasos:
1. Abra el Editor de Diseño para el Content Canvas donde desea crear el Stacked Canvas.
2. Haga clic en la icono Stacked Canvas
en la barra de herramientas.3. Haga clic en el lugar (Sobre el Content Canvas) donde desea que aparezca, y arrastre el cursor del mouse para darle el tamaño apropiado.
4. Establezca las propiedades de acuerdo a sus necesidades.
• Navegador de Objetos.
Pasos:
1. Haga clic en el nodo Canvases del Navegador de objetos y luego en el icono Crear.
2. Establezca la propiedad Canvas Type en Stacked.
3. Asegúrese de que el Stacked Canvas esté debajo del Content Canvas en el Navegador de objetos.
Para que el Stacked Canvas se muestre correctamente en tiempo de ejecución, asegúrese de que su orden no tenga precedencia sobre el Content Canvas asignado a la misma ventana. El orden de precedencia de los Canvases se define por la secuencia en la que aparecen en el Navegador de Objetos.
Visualización de imágenes apiladas en el editor de diseño.
Compruebe la posición de visualización de los Stacked Canvases haciendo lo siguiente:
• Abra el Editor de Diseño para el Content Canvas en cuestión y luego seleccione Ver (View)>Stacked Views... Aparecerá el cuadro de diálogo Stacked/Tab Canvases, con una lista de todas los Stacked/Tab Canvases asignados a la misma ventana que el Content Canvas seleccionado previamente.
Nota: [Ctrl] + clic para desmarcar un Canvas previamente seleccionado.
Las Propiedades del Stacked Canvas.
Hay varias propiedades que se pueden configurar para afectar el aspecto y el comportamiento de los Stacked Canvas:
• Raise on Entry: Controla la forma en que Forms muestra el Canvas cuando el usuario o la aplicación navega hacia un Item contenido en dicho Canvas.
• Viewport X/Y Position: Especifica el punto en el que se encuentra la esquina superior izquierda del Stacked Canvas en relación con el Content Canvas.
• Viewport Width/Height: Determina el tamaño del Stacked Canvas que se muestra en tiempo de ejecución.
• Visible: Indica si el Content Canvas es inicialmente visible.
• Window: Especifica la ventana en la que se mostrará el Canvas.
• Show Horizontal/Vertical Scroll Bar: especifica si las barras de desplazamiento se muestran con el Canvas.
______________________________________________________________________________________
El Toolbar Canvas.
Un Toolbar Canvas es un tipo especial de Canvas que puede crear para contener botones y otros elementos de GUI utilizados con frecuencia.
Tipos de la barra de herramientas:
• Barra de Herramientas Vertical (Vertical Toolbar): utilice un Vertical Toolbar para colocar herramientas en el lado izquierdo de la ventana.
• Barra de Herramientas Horizontal (Horizontal Toolbar): utilice un Vertical Toolbar para colocar herramientas y controles en la parte superior de la ventana debajo de la barra de menús de la ventana.
Usos y ventajas de los Toolbars.
Estos tipos de Canvas ofrecen las siguientes ventajas:
• Proporcionar una apariencia estándar a través de Canvases que se muestran en la misma ventana.
• Disminuye el tiempo de mantenimiento del módulo.
• Aumenta la usabilidad de las aplicaciones.
• Crear aplicaciones similares a otras utilizadas en el mismo entorno.
• Proporcionar una alternativa a las aplicaciones basadas en menús o en las teclas de función.
______________________________________________________________________________________
El MDI Toolbar.
Puede adjuntar el Toolbar a ventanas individuales, o al propio Form. Adjuntar una barra de herramientas a un Form proporciona una barra de herramientas MDI, por lo que no es necesario crear más de una barra de herramientas para una aplicación de Forms que utiliza varias ventanas. Si muestra una barra de herramientas en la ventana MDI, la misma barra de herramientas no se duplicará en las ventanas individuales del Form.
La visualización de una barra de herramientas MDI se determina mediante una combinación de propiedades de Form y el parámetro runtime useSDI que se establece como parte de otherparams:
Setting
|
Setting Type
|
Effect
|
Form Horizontal or Vertical Toolbar Canvas
|
Form Property
|
If useSDI=no, displays MDI toolbar at top or left of MDI window
|
otherparams=
useSDI=no |
Runtime setting
|
Displays MDI window and uses MDI toolbar if set as Form property
|
otherparams=
useSDI=yes |
Runtime setting
|
MDI window not displayed; Form Horizontal or Vertical Toolbar
setting, if any, has no effect.
|
Pasos:
1. Crear o modificar un Canvas:
Establezca la propiedad Canvas Type con Horizontal o Vertical Toolbar.
2. Añada funcionalidad. Para evitar problemas con la navegación no deseada, asegúrese de establecer la propiedad Mouse Navigate en No.
3. Resize: Utilice el Editor de diseño para cambiar el tamaño del Toolbar Canvas de modo que cumpla con su requerimiento.
4. Asignelo al Window o al Form: En la paleta Propiedad del Window o en el módulo Form, establezca las propiedades Horizontal/Vertical Toolbar Canvas.
Cuando mostramos barras de herramientas en el Form/Window, el window manager controla el desplazamiento del Content Canvas ya sea hacia abajo o hacia la derecha para mostrar la barra de herramientas. No es necesario dejar suficiente espacio en el Content Canvas para colocar la barra de herramientas.
Estableciendo las Propiedades del Toolbar.
Una vez creado el Toolbar Canvas, puede establecer sus propiedades así como las propiedades del Window o Form asociado:
• Propiedades del Canvas:
---Canvas Type: Barra de herramientas horizontal o vertical.
---Window: Especifica en qué ventana aparece la barra de herramientas.
---Width/Height: Tamaño del Canvas. El ancho de una barra de herramientas horizontal se establece en el ancho (Width) de la ventana. De igual modo, la altura de una barra de herramientas vertical se establece en la altura (Height) de la ventana.
• Propiedades del Window:
---Horizontal/Vertical Toolbar Canvas: Identifica la barra de herramientas horizontal/vertical que se mostrará en esta ventana.
• Propiedades del Módulo Form:
---Horizontal/Vertical Toolbar Canvas: Identifica la barra de herramientas horizontal/vertical que se mostrará en la ventana MDI (cuando el parámetro runtime useSDI está establecido en No).
______________________________________________________________________________________
El Tab Canvas.
Es un tipo especial de Canvas que le permite organizar y mostrar información relacionada en pestañas separadas. Al igual que los Stacked Canvases, los Tab Canvases se muestran sobre un Content Canvas.
Es un sub-objeto del Tab Canvas. Cada Canvas se compone de una o más pestañas. Una pestaña muestra un subconjunto de información, la cual esta distribuida en el conjunto de pestañas. Cada pestaña tiene una etiqueta en la que los usuarios pueden hacer clic para acceder a la información de la misma.
Cada pestaña ocupa una cantidad igual de espacio del Tab Canvas.
Usos y Ventajas.
Puede utilizarlos para:
• Crear un efecto overlay en una sola ventana.
• Mostrar grandes cantidades de información en un solo Canvas.
• Ocultar información.
• Acceder fácilmente a la información requerida haciendo clic en la pestaña en cuestión.
Creación:
Para crear un Tab Canvas funcional, debe:
• Cree un Canvas mediante el Navegador de objetos o el Editor de diseño.
• Establezca la propiedad Canvas Type en Tab Canvas.
• Defina una o más pestaña según su requerimiento.
• Coloque los Items correspondientes en las pestañas pertinentes.
Creación mediante el Navegador de Objetos.
Pasos:
1. Con el nodo Canvas seleccionado, haga clic en el icono Crear
.2. Establezca la propiedad Canvas Type en Tab. Además, establezca las demás propiedades de acuerdo a sus necesidades.
3. Expanda el nodo Canvas y a su vez seleccione el nodo Tab Pages.
4. Haga clic en el ícono Crear (Con el Nodo Tab Pages seleccionado). Esto crea una pestaña en el Navegador de objetos con un nombre predeterminado de PAGEXX.
6. Cree pestañas adicionales repitiendo los pasos 4 y 5.
Creación mediante el Layout Editor.
Pasos:
1. Muestre el Content Canvas donde desea crear el nuevo Tab Canvas.
2. Haga clic en la herramienta Tab Canvas, luego arrastre el ratón sobre el area donde desea colocarlo. Por defecto se crea con dos Pestañas.
5. Si así lo requiere, cree pestañas adicionales siguiendo los pasos 3, 4, 5 y 6 descritos en Creación mediante el Navegador de Objetos (Mas arriba).
6. Establezca las propiedades de las pestañas según sus necesidades.
______________________________________________________________________________________
Configurando las Propiedades del Tab Canvas, sus Pestañas y sus Items.
Una vez que crea el Tab Canvas y sus Pestañas, debe establecer las propiedades necesarias para ambos objetos. Coloque los Items sus Pestañas correspondientes usando ciertas propiedades.
• Propiedades del Tab Canvas:
---Viewport X/Y Position: Especifica el punto en el que se encuentra la esquina superior izquierda del Tab Canvas en relación con el Content Canvas.
---Viewport Width/Height: Define el tamaño del Tab Canvas.
---Corner Style: Especifica la forma de las pestañas etiquetadas (Labeled Tabs) (Chamfered, Square, o Rounded).
---Tab Attachment Edge: Es donde se visualizaran las pestañas (Top, Bottom, Left, Right, Start, o End).
---Width Style: Especifica si el ancho de la pestaña varía con la longitud de la etiqueta (Label).
---Active Style: Especifica si la etiqueta (Label) se muestra en negrita cuando la pestaña está activa.
• Propiedades del Tab Page:
---Label: Especifica la etiqueta que aparece en la pestaña.
• Propiedades del Item:---Canvas: El Canvas en el que se mostrará el Item.
---Tab Page: La pestaña en la que se mostrará el Item.
Nota: Recuerde que puede visualizar el diseño de los Canvases y cambiar la ubicación de sus Items en el Editor de Diseño.
Consejo de Rendimiento: En tiempo de ejecución, el tiempo tomado en cargar e inicializar un Tab Canvas depende de todos los objetos del mismo y no sólo de los inicialmente visibles.
______________________________________________________________________________________
Ajunto el Módulo Form creado para esta práctica: Link.
Nota: El Módulo contiene ciertos códigos no explicados en esta publicación, los mismos serán explicados en futuras publicaciones del Blog.
______________________________________________________________________________________
