You are on page 1of 42

Universidad Nacional Autnoma de Nicaragua

Len, Nicaragua

Programacin Visual I
Ingeniera en Telemtica

Tema 4: Aplicaciones con interfaz


grfica

Pre-requisito: Programacin
Orientada a Objetos

Crditos: 4
Semestre: 6to

Ing. Julio Csar Gonzlez Moreno


julcgmoreno@gmail.com

Contenidos
Introduccin
Programando en Windows
Eventos
Estructura de una aplicacin
Controles ms comunes
Manejo de eventos
Eventos ms comunes
Asignar manejadores de eventos a un objeto
Cajas de texto, etiquetas y botones
Botn por omisin y de cancelacin
Tecla de acceso
Eventos asociados con el teclado
Eventos Validating y Validate
Enfocar un objeto
Seleccionar el texto de una caja de texto
Mtodos relacionados a la seleccin de texto
Bibliografa

Programacin Visual
I
Ingeniera en Telemtica

2 / 42

Introduccin
Una de las grandes ventajas de trabajar con aplicaciones grficas es que todas
las ventanas se comportan de la misma forma y todas las aplicaciones utilizan
los mismos mtodos bsicos (mens desplegables, botones) para introducir
rdenes
Una ventana tpica tiene las siguientes partes:

Programacin Visual
I
Ingeniera en Telemtica

3 / 42

Programando en Windows (I)


Elementos que forman una aplicacin grfica
Una interfaz grfica tiene bsicamente dos tipos de objetos:
Ventanas (tambin llamadas formularios)
Controles (botones, cajas de texto, mens, listas, etc.)
Funcionamiento de una aplicacin grfica
Diseada la interfaz grfica, lo siguiente es escribir el cdigo fuente
relacionado con la funcin que tiene que realizar cada objeto de la
interfaz
Este enfoque se dice que responde a un esquema de programacin guiada
por eventos y orientada a objetos

Programacin Visual
I
Ingeniera en Telemtica

4 / 42

Programando en Windows (II)


Programar una aplicacin grfica implica escribir cdigo separado para cada objeto;
quedando la aplicacin dividida en pequeos mtodos conducidos por eventos
Ejemplo:
btSaludo.Click += new System.EventHandler(btSaludo_Click); //manejador de evento clic

private void btSaludo_Click(object sender, EventArgs e)


{
etSaludo.Text = Hola Mundo!!!;
}
De lo anterior podemos decir que:
El mtodo btSaludo_Click ser puesto en ejecucin en respuesta al evento Click
del objeto identificado por btSaludo; es decir, que cuando el usuario haga clic
en el objeto btSaludo se ejecutar el mtodo btSaludo_Click
Esto es justamente lo que est indicando el delegado EventHandler
El mtodo btSaludo_Click manejar el evento Click del objeto btSaludo

Programacin Visual
I
Ingeniera en Telemtica

5 / 42

Eventos (I)
Son mecanismos mediante los cuales los objetos (ventanas o controles)
pueden notificar de la ocurrencia de sucesos
Pueden ser causados por:
Una accin del usuario. Ejemplo: Al pulsar una tecla
Por el sistema. Ejemplo: Al agotarse un temporizador
Indirectamente por el cdigo. Ejemplo: Al cargar una ventana
Dentro de una app. grfica cada ventana y cada control pueden responder
a un conjunto de eventos predefinidos
Cuando ocurre uno de estos eventos, el sistema lo transforma en un
mensaje que se coloca en la cola de mensajes de la aplicacin implicada
Un mtodo Run, denominado bucle de mensajes, es el encargado de
extraer los mensajes de la cola y despacharlos para que sean procesados
Cada mensaje almacenar la informacin suficiente para identificar al
objeto y ejecutar el mtodo que tiene para responder a ese evento

Programacin Visual
I
Ingeniera en Telemtica

6 / 42

Eventos (II)
A continuacin se puede ver de forma grfica como acta el bucle de
mensajes mientras la aplicacin est en ejecucin

Programacin Visual
I
Ingeniera en Telemtica

7 / 42

Estructura de una aplicacin (I)


Una ventana o formulario no es ms que un objeto de una clase derivada
de Form
Todo programa para poder ser ejecutado debe tener un mtodo principal o
mtodo de entrada conocido como main
Este mtodo es el punto de entrada a la aplicacin
Al crear una aplicacin C# con Visual Studio, el cdigo generado
aporta explcitamente el mtodo Main en una clase llamada Program
localizada en el fichero Program.cs

Programacin Visual
I
Ingeniera en Telemtica

8 / 42

Estructura de una aplicacin (II)

Programacin Visual
I
Ingeniera en Telemtica

9 / 42

Estructura de una aplicacin (III)


Cuando se ejecuta el mtodo Main:
Se invoca al constructor de la clase Form1
Esto crea la venta o formulario principal
El constructor de Form1 llama al mtodo InitializeComponent
Personaliza el tamao, el nombre y el ttulo del formulario principal
Personaliza, crea y asocia los controles al formulario principal
Finalizado el mtodo InitializeComponent
La ventana principal esta construida
Main invoca al mtodo Run de la clase Program para visualizar e
iniciar el bucle de mensajes de la aplicacin

Programacin Visual
I
Ingeniera en Telemtica

10 / 42

Controles ms comunes (I)


A continuacin se muestra, de forma resumida, una lista de los controles
ms comunes:
Etiquetas. Se implementan a partir de la clase Label
Botones. Se implementan a partir de la clase Button
Cajas de texto. Se implementan a partir de la clase TextBox las de
una sola lnea de texto, las de varias lneas y las de "palabra de paso"
Casillas de verificacin. Se implementan a partir de la clase CheckBox
Botones de opcin. Se implementan a partir de la clase RadioButton
Listas. Se implementan a partir de las clases ListBox y ComboBox
Barras de desplazamiento. Se implementan a partir de la clase
ScrollBar
Estos
controles
se
localizan
en
el
espacio
de
nombres
System.Windows.Forms y son objetos de la subclase Control que a su vez
se deriva de la clase System.ComponentModel.Component

Programacin Visual
I
Ingeniera en Telemtica

11 / 42

Controles ms comunes (II)


Aadir una etiqueta y editar sus propiedades
Primero hay que aadir a la clase del formulario una variable de tipo Label
private Label etSaludo;
Luego, crear un objeto Label referenciado por etSaludo
etSaludo = new Label();
Esto generalmente esta dentro del mtodo InitializeComponent
Establecer las propiedades de la etiqueta
etSaludo.Name = "etSaludo";
etSaludo.Text = "etiqueta";
etSaludo.Font = new Font("Microsoft Sans Serif", 14, FontStyle.Regular);
etSaludo.Location = new Point(53, 48);
etSaludo.Size = new Size(187, 35);

Asociar la etiqueta a la coleccin de controles del formulario


Controls.Add(etSaludo);

Programacin Visual
I
Ingeniera en Telemtica

12 / 42

Controles ms comunes (III)


Aadir un botn de pulsacin y editar sus propiedades
Hay que aadir a la clase del formulario una variable de tipo Button
private Button btSaludo;
Luego, crear un objeto Button referenciado por btSaludo
btSaludo = new Button();
Esto generalmente esta dentro del mtodo InitializeComponent
Establecer las propiedades del botn
btSaludo.Name = "btSaludo";
btSaludo.Text = "Haga &clic aqu";
btSaludo.Location = new Point(53, 90);
btSaludo.Size = new Size(187, 23);
Asociar el botn a la coleccin de controles del formulario
Controls.add(btSaludo);

Programacin Visual
I
Ingeniera en Telemtica

13 / 42

Controles ms comunes (IV)


Asociar una descripcin breve a un componente
Una descripcin abreviada se mostrar cuando el puntero del ratn se site
encima del componente
Primero hay que aadir a la clase del formulario una variable de tipo ToolTip
private ToolTip ttToolTip1;
Luego, crear un objeto ToolTip referenciado por ttToolTip1
ttToolTip1 = new ToolTip();
Esto generalmente esta dentro del mtodo InitializeComponent
Finalmente, aadir al botn la descripcin abreviada que se desee
ttToolTip1.setToolTip(btSaludo, "Botn de pulsacin");
El proceso de aadir los componentes resulta muy sencillo cuando utilizamos
Visual Studio

Simplemente tenemos que tomar los componentes de una paleta y


dibujarlos sobre el formulario
Esto hace que se aada automticamente todo el cdigo descrito
anteriormente

Programacin Visual
I
Ingeniera en Telemtica

14 / 42

Manejo de eventos (I)


Cuando una accin sobre un componente genera un evento, se espera que
suceda algo, entendiendo por evento, un mensaje que un objeto enva a
algn otro objeto
Esto quiere decir que hay un remitente del evento, por ejemplo, un
botn, y hay un receptor del evento, por ejemplo, la ventana que
contiene ese botn
Lgicamente ese algo hay que programarlo y para ello hay que saber
cmo manejar ese evento
Los eventos que se producen sobre un componente se manipulan a
travs de los manejadores de esos eventos
Un manejador de eventos es un objeto en el que un componente
delega la tarea de manipular un tipo particular de eventos

Programacin Visual
I
Ingeniera en Telemtica

15 / 42

Manejo de eventos (II)

Cuando un componente genera un evento, un manejador de eventos vinculado


con el componente se encarga de analizar qu evento ocurri
Luego responde al evento ejecutando el mtodo adecuado
El manejador de eventos, recibe tambin el nombre de delegado y es un
objeto de la clase EventHandler
El delegado guarda una referencia al mtodo que responder al evento
Este mtodo recibe el nombre de controlador de eventos

Programacin Visual
I
Ingeniera en Telemtica

16 / 42

Eventos ms comunes (I)

Programacin Visual
I
Ingeniera en Telemtica

17 / 42

Eventos ms comunes (II)

Programacin Visual
I
Ingeniera en Telemtica

18 / 42

Eventos ms comunes (III)

Programacin Visual
I
Ingeniera en Telemtica

19 / 42

Asignar manejadores de eventos a un objeto (I)


Un objeto, generalmente un componente, puede tener asociados tantos
manejadores de eventos como tipos de eventos tenga que manejar
Ejemplo:
btSaludo.Click += new System.EventHandler(btSaludo_Click);
private void btSaludo_Click(object sender, EventArgs e)
{
etSaludo.Text = Hola Mundo!!!;
}
El delegado EventHandler permite definir qu mtodo se ejecutar para
un determinado evento producido sobre un control
El primer parmetro del mtodo btSaludo_Click hace referencia al objeto
que produce el evento y el segundo contiene informacin que depende del
evento producido

Programacin Visual
I
Ingeniera en Telemtica

20 / 42

Asignar manejadores de eventos a un objeto (II)


Para indicar que el mtodo btSaludo_Click es el manejador del evento
Click se crea un delegado de tipo EventHandler, pasndole la direccin
del mtodo y aadiendo este delegado a la lista de mtodos que seran
llamados cuando el evento Click sea generado
Para aadir un delegado se utiliza el operador += y para quitarlo se
utiliza el operador -=
Un delegado es un objeto de una clase que puede contener una referencia
a un mtodo

Programacin Visual
I
Ingeniera en Telemtica

21 / 42

Cajas de texto, etiquetas y botones

Los controles ms comunes en una aplicacin grfica son: las cajas de


texto, las etiquetas y los botones de pulsacin
Las cajas de texto, controles TextBox, son importantes porque permiten
realizar la entrada de datos para una aplicacin y visualizar los resultados
producidos por la misma
Las etiquetas, controles Label, son cajas de texto no modificables por el
usuario
Informan al usuario de qu tiene que hacer y cul es la funcin de
cada control
Los botones, controles Button, permiten al usuario ejecutar una accin
cuando sea preciso

Programacin Visual
I
Ingeniera en Telemtica

22 / 42

Botn por omisin y de cancelacin (I)


Si una ventana tiene uno o ms botones, uno y slo uno de ellos puede ser
el botn por omisin, lo que implica que la tecla Enter realice la misma
funcin
Para hacer que un botn sea el botn predeterminado de un formulario,
hay que asignar a la propiedad AcceptButton del formulario el nombre de
ese botn
El botn por omisin se distingue de los dems porque aparece
rodeado con un borde ms oscuro
Para hacer que un botn sea el botn de cancelacin predeterminado de
un formulario, hay que asignar a la propiedad CancelButton del formulario
el nombre de ese botn
El botn de cancelacin predeterminado se distingue de los dems
porque al pulsar la tecla Esc ejecuta su cdigo

Programacin Visual
I
Ingeniera en Telemtica

23 / 42

Botn por omisin y de cancelacin (II)


Ejemplo

Programacin Visual
I
Ingeniera en Telemtica

24 / 42

Tecla de acceso (I)


Nemnicos

En la siguiente figura, se puede observar en el ttulo del botn Aceptar,


que la letra A aparece subrayada
Esto significa que el usuario podr tambin ejecutar la accin
especificada por el botn, pulsando las teclas Alt + A
Esta asociacin tecla-control recibe el calificativo de nemnico y se
realiza escribiendo el smbolo ampersand (&) antes de la letra que
desea d acceso al botn
Si no se ve la letra subrayada, es necesario pulsar la tecla Alt

Programacin Visual
I
Ingeniera en Telemtica

25 / 42

Tecla de acceso (II)


Nemnicos Ejemplo

Programacin Visual
I
Ingeniera en Telemtica

26 / 42

Eventos asociados con el teclado (I)


Cuando el usuario escribe sobre un control, por ejemplo sobre una caja de
texto, cada pulsacin produce los eventos:
KeyDown
Se genera cuando se pulsa la tecla
KeyPress
Se genera cuando se va a escribir el carcter
Se genera slo cuando se introducen caracteres ASCII
Se excluyen teclas como: funciones (F1 a F12), cursores (),
especiales (Del)
KeyUp
Se genera cuando se suelta la tecla
Para interceptar este tipo de eventos hay que aadir un controlador de
eventos

Programacin Visual
I
Ingeniera en Telemtica

27 / 42

Eventos asociados con el teclado (II)


Ejemplo (I)
private void ctGradosC_KeyPress(object sender, KeyPressEventArgs e)
{
//...
}

El controlador anterior est asociado a una caja de texto cuyo nombre es ctGradosC y
ejecutar el cdigo cuando se produzca el evento KeyPress sobre dicha caja
El controlador recibe un primer parmetro, sender, de tipo object
Hace referencia al objeto para el cual ha sido invocado
y un segundo parmetro, e, de tipo KeyPressEventArgs
El cual proporciona las siguientes propiedades:
Handled. Propiedad de tipo bool, permite obtener o establecer si se control
(true) o no (false) el evento KeyPress

Si el evento no est controlado, se enviar el carcter tecleado al sistema


operativo para que l realice el procesamiento predeterminado

KeyChar. Propiedad de tipo char, permite obtener, y modificar si fuera


necesario, el carcter correspondiente a la tecla pulsada

Programacin Visual
I
Ingeniera en Telemtica

28 / 42

Eventos asociados con el teclado (III)


Interceptar la tecla pulsada - Ejemplo (II)
Una forma de interceptar la tecla Enter es asociando un manejador de
eventos KeyPress con el componente de texto que recibe tal evento, y
verificar si se puls la tecla Enter
private void CajaTexto_KeyPress(object sender, KeyPressEventArgs e)
{
if (e.KeyChar == Convert.ToChar(13)) //Se pulso la tecla Enter
{
e.Handled = true;
Conversion(sender);
}
}
La propiedad KeyChar se utiliza para comprobar si se presion la tecla
Enter
Si se presion, la propiedad Handled se establece en true, lo que indica
que ser nuestra aplicacin la que controlar el evento, no el sistema
operativo

Programacin Visual
I
Ingeniera en Telemtica

29 / 42

Eventos asociados con el teclado (IV)


Validacin de un campo de texto - Ejemplo (III)
Validar un campo de texto equivale a restringir su contenido a un conjunto
de caracteres vlidos para dicho campo
Formas de validar un campo de texto:
Despus de escribir
El campo de texto podra contener valores no vlidos
Obliga a verificar los valores del campo de texto antes de operar
con ellos
Durante se escribe
El campo de texto ya estar validado una vez finalizada la entrada
Cuando una caja de texto tiene el foco y el usuario pulsa una tecla el
control genera tres mensajes: KeyDown, KeyPress y KeyUp
KeyDown lo genera cuando se pulsa la tecla, KeyPress cuando se va a
escribir el carcter y KeyUp cuando se suelta la tecla

Programacin Visual
I
Ingeniera en Telemtica

30 / 42

Eventos asociados con el teclado (V)


Validacin de un campo de texto - Ejemplo (IV)
El contenido de la caja de texto ser vlido cuando sus caracteres
pertenezcan al siguiente conjunto: +-,1234567890.
El signo + o slo puede aparecer al principio del dato y ste slo
puede contener una coma decimal
private void CajaTexto_KeyPress(object sender, KeyPressEventArgs e)
{
else if (e.KeyChar == - || e.KeyChar == +)
if (e.KeyChar == Convert.ToChar(13))
{
{
TextBox ObjTextBox = (TextBox) sender;
// Se pulso la tecla Enter
// Admitir o + solo en la primera posicion
e.Handled = true;
if (ObjTextBox.SelectionLength == ObjTextBox.TextLength)
Conversion(sender);
{
}
// Todo el texto esta seleccionado: se sobrescribe con el signo
else if (e.KeyChar == Convert.ToChar(8))
e.Handled = false;
{
}
// Se pulso la tecla Retroceso
else if (ObjTextBox.Length != 0)
e.Handled = false;
{
}
// La primera posicion ya esta ocupada
else if (e.KeyChar == ,)
e.Handled = true;
{
}
TextBox ObjTextBox = (TextBox) sender;
}
if (ObjTextBox.Text.IndexOf(,) != -1)
else if (e.KeyChar < 0 || e.KeyChar > 9)
{
{
// Solo puede haber una coma
// Desechar los caracteres que no son digitos
e.Handled = true;
e.Handled = true;
}
}
}
}

Programacin Visual
I
Ingeniera en Telemtica

31 / 42

Eventos Validating y Validate (I)


Se producen en ese orden cuando el control pierde el foco (al hacer uso de
la tecla Tab, dar clic con el ratn en otro control, etc.), siempre y cuando
su propiedad CausesValidation valga true, que es el valor predeterminado
Dentro de Validating, se debe probar una condicin determinada (por
ejemplo, probar si el dato es numrico)
Si la prueba da error, debe asignar a la propiedad Cancel del
parmetro CancelEventArgs del controlador el valor true
Esto cancela el evento Validating y devuelve el foco al control
El resultado es que el usuario no puede dejar el control hasta que
los datos sean vlidos, dependiendo esto de la propiedad
AutoValidate
del
formulario
que
por
defecto
vale
EnablePreventFocusChange
Si la prueba no da error, finaliz la validacin del control, se produce el
evento Validate, en cuyo controlador podremos utilizar el dato
validado con toda seguridad

Programacin Visual
I
Ingeniera en Telemtica

32 / 42

Eventos Validating y Validate (II)


Ejemplo Validating
private void CajaTexto_Validating(object sender, CancelEventArgs e)
{
TextBox objTextBox = (TextBox)sender;
try
{
datoCajaTexto = Convert.ToDouble(objTextBox.Text);
}
catch (Exception)
{
e.Cancel = true;
objTextBox.SelectAll();
MessageBox.Show("Tiene que ser numrico");
}
}

Programacin Visual
I
Ingeniera en Telemtica

33 / 42

Eventos Validating y Validate (III)


Ejemplo Validate

Si despus de que el usuario haya introducido el dato y pulse la tecla Tab


o haga clic en otro control, la prueba no da error, se produce el evento
Validate, en cuyo controlador podremos realizar las operaciones que sean
necesarias
Ejemplo:
private void CajaTexto_Validated(object sender, EventArgs e)
{
Console.WriteLine("Caja de texto validada");
Conversion(sender);
}

Programacin Visual
I
Ingeniera en Telemtica

34 / 42

Enfocar un objeto
Cuando un control posee el punto de insercin, se dice que dicho control
est enfocado o que tiene el foco
Un usuario de una aplicacin puede enfocar un determinado control:
Haciendo clic sobre l
O pulsando la tecla Tab una o ms veces hasta situar el foco sobre l
Asimismo, un control tambin puede ser enfocado desde el cdigo de la
propia aplicacin y lo podemos hacer de la siguiente manera:
Invocando al mtodo Focus para el control que requiere el foco una
vez abierto el formulario
Ejemplo:
private void Form1_Load(object sender, EventArgs e)
{
ctGradosC.Focus();
}

Programacin Visual
I
Ingeniera en Telemtica

35 / 42

Seleccionar el texto de una caja de texto

En la mayora de las veces es necesario que cuando una caja de texto


obtenga el foco, todo su contenido quede seleccionado
Esto es fcil si sabemos que cuando un control obtiene el foco, genera el
evento foco obtenido (Enter o GotFocus) y cuando lo pierde, foco
perdido (Leave o LostFocus)
Ejemplo:
private void CajaTexto_Enter(object sender, EventArgs e)
{
TextBox ObjTextBox = (TextBox) sender;
ObjTextBox.SelectAll();
}
El anterior es un mtodo que contiene un cdigo genrico sin importar el
nombre de la caja de texto sobre la cual se ha ganado el foco

Programacin Visual
I
Ingeniera en Telemtica

36 / 42

Mtodos relacionados a la seleccin de texto


Otras propiedades/mtodos relacionadas con la seleccin de texto en un
control de texto son las siguientes:
SelectionStart. Propiedad que permite obtener o establecer el punto
de inicio del texto seleccionado en la caja de texto
TextBox1.SelectionStart = 10;
pos = TextBox1.SelectionStart;
SelectionLength. Propiedad que permite obtener o establecer el
nmero de caracteres seleccionados en la caja de texto
TextBox1.SelectionLength = 5;
n = TextBox1.SelectionLength;
SelectedText. Propiedad que permite obtener el texto seleccionado,
o bien reemplazar el texto seleccionado (puede ser nulo) por otro
TextBox1.SelectionStart = TextBox1.Text.Length;
TextBox1.SelectedText = NuevoTexto;
Select (int pos_inicial, int pos_final). Selecciona el texto que se
encuentra entre las posiciones especificadas

Programacin Visual
I
Ingeniera en Telemtica

37 / 42

MaskedTextBox (I)
La clase MaskedTextBox, derivada de TextBoxBase
Es un control TextBox mejorado que soporta una sintaxis declarativa
para aceptar o rechazar una entrada del usuario
Utilizando la propiedad Mask, se puede especificar la siguiente entrada
sin escribir una validacin personalizada
El nmero de caracteres requeridos
Caracteres opcionales
El tipo de entrada esperada en una posicin determinada; por
ejemplo, un dgito, un carcter alfabtico, o un carcter
alfanumrico
Caracteres que componen la mscara, o caracteres que deberan
aparecer directamente en el control; por ejemplo, el guin ( - ) en
una fecha, o el carcter que especifica la moneda utilizada

Programacin Visual
I
Ingeniera en Telemtica

38 / 42

MaskedTextBox (II)
Caracteres utilizados para componer la mscara

Programacin Visual
I
Ingeniera en Telemtica

39 / 42

MaskedTextBox (III)
Ejemplos

##-???-####

Fecha de la forma: 20-may-2012

##:## ??

Hora de la forma: 12:15 PM

00->L<LL-0000

Una fecha: da, mes abreviado y ao (20-May-2012)

Programacin Visual
I
Ingeniera en Telemtica

40 / 42

MaskedTextBox (IV)
Propiedades

PromptChar. Especifica el carcter utilizado para rellenar las posiciones


donde hay que introducir un carcter (por omisin es _)
Text. Almacena la entrada del usuario
IncludeLiterals. Especifica si Text incluye los caracteres no
reemplazables que componen la mscara, como, por ejemplo, el guin ( - )
en una fecha
IncludePrompt. Especifica si Text incluye el carcter PromptChar de
las posiciones no rellenadas
Si ResetOnPrompt vale true el carcter PromptChar no formar parte
de la entrada
Si BeepOnError vale true se le avisa al usuario de que el carcter
introducido no es vlido a travs de un pitido

Programacin Visual
I
Ingeniera en Telemtica

41 / 42

Bibliografa
Enciclopedia de Microsoft Visual C#, 2da edicin
Fco. Javier Ceballos Sierra
RA-MA
Captulo 5, pgina 137

Programacin Visual
I
Ingeniera en Telemtica

42 / 42

You might also like