Capítulo III

Diseñador de Formas

El diseñador de Formas(Form Designer)

• Herramientas de dos vias y su uso.• Un ejemplo de herramientas de dos vías.• Configurando el diseñador de formas.• Componentes visibles vs componentes invisibles.• Creando una forma simple.• Agregando componentes a una forma.• Moviendo y ajustando el tamaño de los componentes de

una forma.• Utilizando el “Object Inspector” para asignar valores a

las propiedades.• Eventos y su programación con el “Object Inspector”.• Asignando valores a las propiedades.• Manejadores de eventos y ¿Cómo son usados?• Un ejemplo simple de una forma.

Diseño de Interfaz (Herramientas de Dos Vías)

• Métodos de Diseño: Visual y Editor de Código de las Formas.

• Puede usar la interfaz gráfica para diseñar o bien editar el código manualmente.

• Permite intercambiar el uso de las dos vías sin problema alguno.

Práctica 3

• Prueba de las dos vías.

Configurando el Diseñador de Formas

Se activa del menú Tools-Environment Options. Página Designer.

Los Componentes

• Los elementos que se depositan en la forma son llamados componentes.

• Un componente depositado en la forma es un objeto y sus características y comportamiento están descritos en una definición de clase.

Depositando Componentes en las Formas

• Hay varios métodos para depositar componentes en una forma:– En la página correspondiente seleccionar el componente

con un click y luego dar un click en la forma.– Seleccionar el componente con un click y dibujar en la

forma un rectángulo del tamaño deseado para el componente.

– Dando un doble click en el componente deseado.– Presione la tecla Shift mientras da un click en el

componente deseado, luego de click en la forma y por cada click aparecerá un componente en el lugar que lo dió.

Componentes visibles vs componentes invisibles

• Se depositan igual en la forma, pero actúan diferente cuando la aplicación se ejecuta.

• Componente Visible: Se les llama así a aquellos que el usuario puede ver cuando se ejecuta la aplicación.

• Componente Invisible: Son aquellos que el usuario no ve a la hora de ejecución y no importa la posición donde los depositemos cuando diseñamos la forma.

Convenciones de Nomenclatura

• En la actualidad los programadores de Windows utilizan una nomenclatura llamada “Hungarian Notation”, la cual consiste en que el prefijo de los nombres de los identificadores se componga de unas abreviaturas que describen el tipo, visualización, uso , etc; de los mismos.

Tipos de Notación Húngara

• lpszBuffer (lpsz = long pointer to null terminated string)

• hWindow (h= handle to Window)

El Nombre de los Componentes

• Name: Es una propiedad de todos los componentes.

• C++ Builder nunca nos obliga a asignar un nombre.

• Siempre que depositamos un componente en la forma, C++ Builder le asigna un nombre único.

Convensiones de Nomenclatura recomendadas por C++ Builder.

• Siempre usar la abreviatura del tipo como la primera parte del nombre.

• Después de la abreviatura utilice un nombre que indique el uso que se le dará al componente.

• Crear las abreviaturas a partir del nombre de tipo del componente removiéndole las vocales, excepto cuando este empiece con vocal.

• Suprima consonantes duplicadas.• Si después de aplicar todas las reglas anteriores existen

abreviaturas duplicadas, empiece agregándole vocales de izquierda a derecha. Ejemplo: el tipo Form tiene la abreviatura frm y si después aparece un tipo llamado Firma, la abreviatura de este podrá ser firm.

Tabla de Ejemplos

Nombre Generado Uso del Componente

Nombre utilizando convención

Edit1 Dirección edtDireccion

Label1 Resultado de suma lblSuma

Table1 Tabla de clientes tblCliente

Timer1 Reloj tmrReloj

Groupbox1 Datos de Empleado grpbxEmpleado

Statusbar1 Barra de Estado stsbrEstado

Creando una forma simple.

Construiremos una aplicación sencilla para practicar.

Agregando componentes a una forma

• Depositaremos algunos componentes en la forma (visibles e invisibles).

• Haremos que interactúen.

Crear un Proyecto Nuevo

• Del Menu elegir File-New-Application.

Esto creará un nuevo proyecto llamado Project1 con una forma en blanco llamada Form1.

Recordemos que para poder producir una aplicación y compilarla necesitamos tener un proyecto.

Agregar los siguientes componentes:

• 1 Edit (de la página Standard).

• 1 Group Box (de la página Standard).

• 2 Button (de la página Standard).

• 2 Label (de la página Standard), uno de ellos irá dentro del Group Box.

• 1 Progress Bar (de la página Win32).

• 1 Timer (de la página System).

Manipulando los componentes

• Moverlos: Se pueden arrastrar simplemente.

• Focus: Generalmente solo un componente tiene el focus. Y se ve así:

• Para modificar más de un componente a la ves dibuje con el ratón un rectángulo que los encierre y se verá algo así:

Manipulando los componentes

• Cambiar el tamaño: Basta con seleccionarlo y arrastrar sus puntos de redimensión.

Utilizando el “Object Inspector” para asignar valores a las propiedades.

Objeto que se está inspeccionando

Si desea conocer más sobre una propiedad, puede averiguarlo seleccionándola y presionando la tecla F1.

¿Qué pasa con el Object Inspector si se seleccionó más de un componente?

Únicamente lista las propiedades que los objetos seleccionados tienen en común.

Asignando valores a las propiedades (Tipos de Propiedades)

• Simples: Se les asigna valores escribiendo en ellas.• Enumeradas: Se selecciona un valor de una lista

definida.• De Conjunto: Se expande en una lista de elementos

cuyos valores pueden ser true ó false para indicar si están incluidos o no en el conjunto de dicha propiedad. Cuando la propiedad está vacía muestra el símbolo “[ ]”.

• De editor de propiedades: Se pueden expandir o bien darles un click en el botón que aparece a su derecha con el símbolo “…” para activar su editor de propiedades.

Práctica 4

• Diseñando una Forma Simple

Programando Eventos

La página de eventos muestra los eventos asociados a un componente.

Componente Button1

Manejadores de Eventos

• Cuando se necesita responder a un evento se adiere código a ese evento. Dicho código es llamado “Event Handler”

Tipos de Eventos

• Del Sistema: Son eventos generados por mensajes de Windows (OnEnter, OnExit).

• Del Usuario: Son eventos generados por acciones del usuario, click del ratón, presionar una tecla, etc.

¿Cómo asigno el código para un evento)

1. Seleccionar el componente.

2. Activar el Object Inspector (F11).

3. Seleccionar página de eventos.

4. Buscar el evento deseado.

5. Dar doble click en el cuadro de edición del evento.

Ejemplo de Asignación de Evento

Práctica 5. Manejadores de Eventos

• Creando Un Manejador de Evento.

Cuestionario

• Mencione los métodos para depositar componentes en las formas.

• ¿Cuál es la diferencia entre un evento de usuario y un evento del sistema?

• ¿Cuál es la diferencia entre un componente visible y un componente invisible?