2. Diseño de la Interfaz Gráfica con el Usuario.

SQLWindows provee al usuario los objetos necesarios para diseñar la

interface en el ambiente de Windows. Todos los objetos son ventanas.

Las ventanas según su jerarquía se clasifican en Ventana Padre y

Ventanas Hijas, las primeras contienen a las segundas.

Básicamente existen tres tipos de Ventanas Padre ( o Madre) :

Form Windows

Dialog Box

Top Level Table Window

2.1. Form Windows

Es la ventana general de toda aplicación en ambiente Windows, se

caracteriza por tener un menú de sistema, una barra de menú y barras para

hacer Scroll vertical u horizontal. En este tipo de ventana se da la mayor

interacción entre el usuario y la aplicación.

La ventana del Bloc de notas (Notepad) es un ejemplo típico de Form

Window.

SQLWindows 14

Se ha puesto de moda que adicionalmente las formas incluyan un Tool

Bar y un Status Bar, aunque estas son variaciones de a Form Window,

SQLWindows las soporta.

2.2. Dialog Box

Parecidas a la Form Window, la ventana del tipo Dialog Box no posee

Barra de Menú ni de Scroll, su propósito es la de proveer un elemento de

captura rápida.

La ventana que aparece cuando se va a abrir un archivo es un Dialog

Box.

SQLWindows 15

Barra de Menú

Scroll Horizontal y Vertical

Botones para Maximizar y Minimizar

System Menu

Pueden tener uno o más de los siguientes modos de operación:

No Modal El usuario puede cambiar a otra ventana de la

aplicación (modeless)

Modal El usuario no puede cambiar a otra ventana de la

aplicación hasta cerrar esta ventana.

System Modal El usuario no puede cambiar a otra ventana de

Windows hasta cerrar la ventana.

2.3. Top Level Table Window

Estas ventanas son similares a las Forms Window pero contienen sólo

un objeto para capturar y despliegue de información en forma tabular

(parecida a una hoja de EXCEL).

SQLWindows 16

2.4. Manipulación de Objetos.

Por su parte las ventanas hijas son de una gran variedad y se emplean

para diversos propósitos.

Para colocarlos en una ventana Form Window o Dialog Box sólo se

requiere seleccionar el objeto del Tool Palette y trazarlo en el área que va a

SQLWindows 17

ocupar, también se tienen dos elementos para manipular los objetos, es decir,

moverlos o cambiar su tamaño o sus características.

2.4.1. Paleta de Herramientas (Tool Palette).

El Window Grabber selecciona un objeto; con un click del botón

izquierdo se marca un objeto para moverlo o cambiar su tamaño, con el click

del botón derecho se accede a las ventanas del Customizer, con la cual se

pueden ajustar las propiedades del objeto a valores particulares, por ejemplo a

un Pushbutton se le puede colocar un título, una imagen, configurar el color

para el texto, para el fondo, etc.

Selección de objetos.

SQLWindows 18

Se puede seleccionar varios objetos a la vez cambiando la tecla Shift y

haciendo Click con el Mouse.

El Object Selector permite seleccionar varios objetos. Esta

herramienta traza un rectángulo y todos los objetos contenidos en el son

seleccionados de la misma forma que el método anterior, con la diferencia de

que este es más rápido.

Objeto Nombre Uso Prefijo

Background Text Para colocar textos en la ventana. No aplica

Data Field Se usa para capturar o desplegar un dato. df

Pushbutton Proporciona un mecanismo para que el

usuario indique el inicio de una acción.

pb

List Box Despliega una lista de valores. lb

Picture Permite incluir un gráfico en la interfaz de

la aplicación.

pic

Group Box Crea un marco con un título. Además del

aspecto estético, se emplea para agrupar

controles y separar dichos grupos.

gb

Multiline Text Se utiliza para la captura y despliegue de

textos en la interface, es un minieditor.

ml

Radio Button Se emplea para que el usuario elija una (y

sólo una) opción de un conjunto, por

ejemplo, el sexo de una persona.

rb

Combo Box Es la combinación de Data Field + List

Box, con este control se captura un dato

cmb

SQLWindows 19

(tecleado) o bien puede ser seleccionado

desde una lista.

Horizontal Scroll

Bar

Se emplea para que el usuario indique un

cambio de valor (izquierda - derecha,

incrementa - decrementa).

sb

Vertical Scroll Se emplea para que el usuario indique un

cambio de valor (arriba - abajo,

incrementa - decrementa).

sb

Frame Se utiliza para dar realce a la interface. No aplica

Check Box Parecido al Radio Button, sin embargo en

este caso el usuario puede seleccionar más

de una opción.

cb

Child Table Se emplea para despliegue y captura de

información en forma tabular.

tbl

Line Se utiliza para dar realce a la interfaz. No aplica

Option Button Se emplea para crear barrar y paletas de

herramientas.

ob

El prefijo se utiliza para asignar nombre al objeto, los nombres deben

empezar con una letra y pueden tener una longitud de hasta 32 caracteres,

debe tenerse cuidado en el uso de mayúsculas y minúsculas, pues

SQLWindows hace distinción de ellas.

Nombres

SQLWindows 20

Es importante utilizar una nomenclatura para asignación de nombres

para identificar fácilmente el tipo de objeto y su función, la nomenclatura para

asignación de nombres sigue dos reglas básicas:

El nombre debe iniciar con el prefijo que identifica el tipo de objeto.

En general deben usarse minúsculas, sólo la primera letra de cada palabra

debe ir en mayúsculas.

Ejemplos:

dfNoEmpleado

lbEstados

tblComisionados

Seguir una nomenclatura apropiada evitará muchos dolores de cabeza

para depurar una aplicación.

¿ Que objetos utilizar ? y ¿ Como utilizar estos objetos ?

Los objetos a utilizar deben elegirse en función de como se desea que la

aplicación trabaje, ello implica necesariamente un análisis de la información

que la aplicación va a utilizar para decidir los objetos necesarios que se van a

utilizar en la interface, así como el número de ventanas que va a necesitar. En

muchas ocasiones una aplicación requiere de más de una ventana.

2.5. Consideraciones en el diseño.

SQLWindows 21

Al diseñar una aplicación lo primero que debe hacerse es analizar el tipo

de datos que se van a capturar y desplegar dentro de la ventana, con base en

ello se puede diseñar la ventana combinando los diferentes elementos de

control de SQLWindows.

Modelo Entidad Relación (Esquema Lógico)

para el catálogo de Clientes

La aplicación a desarrollar deberá alimentar renglones a la tabla

Clientes, se puede ver como algunos valores deben existir en otras tablas

(Llaves Foráneas), por lo que en la forma de captura conviene utilizar

Combo Box de tal forma que el usuario de un valor válido para los campos

que relacionan la tabla Clientes con la tabla Tipo Cliente y Agente.

Para las columnas que no estén restringidas se puede utilizar objetos

Data Filed.

SQLWindows 22

Para las columnas Descripción es conveniente utilizar un objeto del tipo

Multiline por la longitud de la información.

Para el caso del Agente, sería deseable que el usuario capturara un

agente existente en la Base de Datos, evitar que cometa error al teclear la

clave o que tenga que memorizarlas, para tal caso se puede utilizar un Combo

Box.

El caso del Tipo de cliente es parecido al Agente, sin embargo el

número de claves es menor por lo que se puede utilizar un Radio Button.

La aplicación debe permitir realizar consultas, insertar nuevos

renglones, modificar renglones ya existentes, así como eliminar renglones. El

usuario puede realizar estas acciones por medio de acciones de menú, pero es

bueno utilizar Pushbuttons.

Modelo Entidad Relación (Esquema Físico)

para el catálogo de Clientes

SQLWindows 23

Ejercicio.

1. Ejecute SQLWindows, si ya lo hizo oprima el botón Nuevo del Tool Bar.

2. Si aparece la ventana de QuickForm oprima el botón Cancel.

3. Antes de continuar borre el contenido de la sección Libraries.

SQLWindows 24

4. Presione la tecla F4 para desplegar el Tool Palette.

5. Cree una nueva forma a partir del Tool Palette, haga click en Form.

6. Configure la forma haciendo click derecho para desplegar el customizer de la

forma, cambie el nombre: elija Object Title y teclee frmMain.

7. Cambie el título, elija Object Title y teclee Captura de Clientes.

8. Agregue Tool Bar y Status Bar a la ventana, elija Accessories Enabled y

seleccione Yes (en caso de que no aparezca el Tool Bar deberá configurar también

la propiedad de Accessories, y por separado iniciar con Yes Tool Bar Visible y

Status Bar Visible).

9. En la región del Tool Bar ponga primero un Frame y configure sus propiedades:

Border Style: Etched y Background Color: Al gusto.

10. Coloque un botón en el Tool Bar, configure su tamaño.

11. Abra el Customizer del botón, asígnele un nombre: Object

Name = pbPrimero.

12. Elija la opción Picture Contents, luego la opción File Name,

aparecerá una ventana para la sección de archivo, seleccione el archivo First.bmp,

oprima Ok.

13. Utilice el duplicador de objetos para copiar el botón, luego

cambie el nombre y figura para cada uno de los botones del Tool Bar.

14. En la región de trabajo de la forma coloque los elementos de

realce (Frame y Group Box).

15. Coloque los demás objetos dentro de la forma Datafields,

Combo, Radio Buttons, Multiline, Backgroud Text, configure cada uno de ellos

con sus propiedades características como nombre, título (si es que lo tienen), tipo

de dato, máximo tamaño de caracteres, editable, etc.

16. Recuerde asignar el nombre de los objetos de acuerdo a la

nomenclatura descrita.

17. Pruebe la captura de los campos pasando de uno a otro con el

tabulador, ¿El orden es el correcto?, utilice el botón de para adecuar el orden.

18. Guarde la aplicación como Clientes.App.

2.6. Codificando los Menús.

SQLWindows 25

Agregar un menú a una aplicación SQLWindows es una tarea sencilla,

para ello se debe editar la sección Menú de la ventana (solamente Form

Window), en esta sección se puede colocar los siguientes elementos:

Menu Item Es una opción del menú, cuando el usuario de un Click en

esta opción se ejecutará una acción.

Menu Row Indica que los elementos siguientes deben colocarse en otra

línea.

Named Menu Indica colocar un menú definido en la sección Named

Menus.

Popup Menu Indica colocar un menú.

Window Menu Indica colocar un menú para el control de ventanas MDI.

Object Menu Agrega el comando para editar un objeto de OLE.

Note el uso de & para definir la tecla de acceso rápido al menú.

Los Popup Menu y Window Menu, pueden contener a su vez:

SQLWindows 26

Menu Column Indica que los siguientes elementos deben colocarse en

otra columna.

Menu Item Una opción de menú.

Menu Separator Una opción de menú

Popup Menu Coloca otro menú.

Secciones de un Menu Item.

Keyboard Acelerator Indica que secuencia de teclas accesará la opción en

forma directa, pueden ser Ctrl-x, F1 a F12, Shift-F1,

etc.

Status Text Es la leyenda a desplegar al colocar el cursor en esta

opción del menú.

Enabled when Indica cuando esta habilitada o deshabilitada la

opción (en gris). En esta sección se coloca cualquier

expresión que regrese un valor booleano.

SQLWindows 27

Checked when Indica en que condición la opción aparecerá con una

marca , de igual forma en este apartado se coloca

una expresión que regrese un valor booleano.

Menu Actions Contiene el código a ejecutar cuando el usuario

seleccione la opción.

Con la ayuda de las características de OOP es muy sencillo programar

los menús, cada opción de menú tiene las secciones descritas en la imagen.

En el programa cada opción del menú se puede ligar con un botón y,

seleccionar una opción equivale a hacer click en el botón.

Ejercicio.

El ejercicio consiste ahora en agregar los menús de la aplicación.

SQLWindows 28

1. Abra la aplicación de captura de Clientes.

2. Marque la sección Menu de la plantilla frmMain.

3. Despliegue el asistente (F2).

4. Marque Popup Menu en el asistente y presione Add Next Level , teclee

&Acciones<Enter>.

5. De la ventana superior del asistente seleccione menuEdit y oprima el

botón Add Same Level.

6. Agregue los menús Herramientas y Ayuda como agrego el de Acciones.

7. Incluya los Menu Items de cada menú: marque el Popup Menu en el

asistente marque la opción Menu Item y presione el botón Add Next

Level, asigne el nombre y propiedades correspondientes al Menu Item.

8. En el caso del Popup Menu Acciones recuerde colocar un Menu

Separator.

9. Cuide la identación de los menús si necesita cambiarla utilice las

combinaciones de teclas: <Alt><Flecha Arriba>, <Alt><Flecha Abajo>,

<Alt><Flecha Izq.> o <Alt><Flecha Der.>.

Evaluación.

SQLWindows 29

1. En el ambiente Windows existen ventanas ____________ y ventanas

____________.

2. Las ventanas Form Window tiene _______________ para que el usuario

indique acciones, y barras de ________________ para ver el contenido de la

ventana.

3. Las ventanas Dialog Box, pueden tener tres modalidades de operación:

Modal, _______________ y _________________________.

4. Se pueden modificar las propiedades de las ventanas con la ventana del

_____________________________.

5. Utilizando la nomenclatura propuesta cada objeto de SQLWindows se

identifica porque su nombre inicia con un __________________.

6. El objeto que sirve para capturar un dato se llama

______________________.

7. El objeto que se utiliza para colocar en la interface un mecanismo mediante el

cual el usuario indique realizar una acción es el _______________________.

8. Cuando se desea que el usuario escoja un dato de una lista de valores se

puede utilizar una _________________ o bien un _____________________.

9. Los elementos para dar realce a una ventana son el ___________________ y

____________________.

10. La elección de los objetos a utilizar se debe basar en

________________ que la aplicación va a utilizar.

11. Para agregar una opción en un menú se utiliza un

_____________________.

12. Cuando se desea que la barra del menú tenga más de una línea se hace

uso de un ________________________________.

13. Los Popup Menu no pueden contener otros Popup Menu.

Cierto Falso

14. La sección _________________________________________ de una

opción de menú se utiliza para asignar una tecla de acceso rápido.

SQLWindows 30

15. Cuando se dese colocar una marca de a una opción de menú se

utiliza la sección __________________________ la cual debe contener una

expresión que de como resultado un valor booleano.

2. DISEÑO DE LA INTERFAZ GRÁFICA CON EL USUARIO.

SQLWindows 31

2.1. Form Windows

2.2. Dialog Box

2.3. Top Level Table Window

2.4. Manipulación de Objetos.2.4.1. Paleta de Herramientas (Tool Palette).

2.5. Consideraciones en el diseño.

2.6. Codificando los Menús.

SQLWindows 32