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 GeneradoUso del Componente Nombre utilizando convención Edit1DirecciónedtDireccion Label1Resultado de sumalblSuma Table1Tabla de clientestblCliente Timer1RelojtmrReloj Groupbox1Datos de EmpleadogrpbxEmpleado Statusbar1Barra de EstadostsbrEstado

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?