Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Diseno de Interfases Parte II Corregido3
Diseno de Interfases Parte II Corregido3
Aplicación Windows
Parte II
Haciendo una aplicación más amigable
Por Lisbeth Pacheco
A través de esta práctica se explicarán otros controles, propiedades
formas de uso, que le permitirán desarrollar una aplicación más
amigable.
10/07/2010
Diseño de una Aplicación Windows Parte II
2010
Tabla de contenido
Introducción ........................................................................................................................................ 2
El problema a resolver ........................................................................................................................ 2
Haciendo la interfaz más amigable ..................................................................................................... 5
Agregando Tooltips o mensajes de ayuda emergentes sobre los controles....................................... 5
¿Cómo emitir mensajes al usuario en otra ventana? ........................................................................ 7
Seleccionemos opciones con RadioButton ....................................................................................... 11
Actividades de Postlaboratorio. Para seguir practicando y probando.............................................. 14
Cambiando algunas propiedades del Formulario ......................................................................... 14
Desactivar en la Ventana o Formulario el botón de maximizar ................................................ 14
Quitar los botones de maximizar , minimizar y cerrar la ventana ........................................... 15
Otra Mejora más a la interfaz de la serie ex, ahora el botón Salir mejorado ................................ 16
Diseñando una nueva aplicación de Prueba: Mi explorador Web ................................................ 17
Probando Nuevos Controles: CheckBox Vs RadioButton ............................................................ 20
1
Diseño de una Aplicación Windows Parte II
2010
Introducción
En la práctica pasada, se creó una interfaz sencilla para evaluar una serie numérica en la que se
emplearon, cuadros de texto o textbox, etiquetas o label, botones o button y cuadros lista de
texto o listbox, para diseñar la interfaz. Además se programaron las acciones a ejecutar cuando el
usuario haga clic sobre el botón calcular y cuando el usuario haga clic sobre el botón salir, las
acciones del usuario que desencadenan en instrucciones a ejecutar se denominan eventos.
En la clase de hoy crearemos la interfaz que permita determinar una serie bien sea como la suma
de los primeros N términos o como la suma de los términos necesarios hasta obtener el valor con
un determinado error de estimación permitido.
El problema a resolver
La serie a desarrollar es:
1 , ∞ ∞
1! 2! 3!
Para esta serie se tiene que si se desea aproximar conociendo el error de aproximación, se deben
sumar términos hasta que el término generado sea inferior al error de estimación permitido.
Para determinar la suma de los N primeros términos sin considerar el proceso de lectura, el código
sería
suma = 0
'determino los términos de la serie
For I = 1 To n
'calculo cada elemento del termino
p = x ^ (I - 1)
'Determinación del Factorial
F = 1
For nu = 1 To I - 1
F = F * nu
Next nu
'conformo el termino
termino = p / F
'uso el termino
suma = suma + termino
Lista_terminos.Items.Add(" Termino " & I & " = " & termino)
Next I
'imprimo el resultado
2
Diseño de una Aplicación Windows Parte II
2010
En el caso de se desee determinar la suma conociendo el error de aproximación EPS, lo que
cambiaría sería el ciclo el cual no podría ser un FOR, quedando:
suma = 0 : i = 0
'determino los términos de la serie
Do
i = i + 1
'calculo cada elemento del termino
p = x ^ (I - 1)
'Determinación del Factorial
F = 1
For nu = 1 To I - 1
F = F * nu
Next nu
'conformo el termino
termino = p / F
'uso el termino
suma = suma + termino
Loop Until termino < eps
Observe la similitud de los códigos, si en lugar de un estructura cíclica FOR en el caso de calcular la
suma de los N primeros términos, se empleara un ciclo DO – LOOP UNTIL el código quedaría
suma = 0 : i = 0
'determino los términos de la serie
Do
i = i + 1
'calculo cada elemento del termino
p = x ^ (I - 1)
'Determinación del Factorial
F = 1
For nu = 1 To I - 1
F = F * nu
Next
'conformo el termino
termino = p / F
'uso el termino
suma = suma + termino
Loop Until i = N
Observemos los códigos uno al lado del otro, para ver las similitudes y diferencias:
3
Si observamos ambos códigos lo que varía es la condición a partir de la cual se detiene el ciclo, por
lo que podemos escribir el código
suma = 0 : i = 0
'determino los términos de la serie
Do
i = i + 1
'calculo cada elemento del termino
p = x ^ (I - 1)
'Determinación del Factorial
F = 1
For nu = 1 To I - 1
F = F * nu
Next
'conformo el termino
termino = p / F
'uso el termino
suma = suma + termino
'donde condicion será i=n ó termino <eps dpendiendo del caso
Diseñe la interfaz similar a la anterior colocando las etiquetas y cuadros de texto indicados,
además del listbox, cambie la propiedad text del formulario, Form1 y colóquele Calculador de
Series. Adicionalmente cambie la propiedad Name de los controles indicados, por los nombres que
se especifican en la figura a continuación
Diseño de una Aplicación Windows Parte II
2010
Name: lista_terminos
Name: btn_calcular
5
Diseño de una Aplicación Windows Parte II
2010
Colocarlos en nuestras aplicaciones
es muy sencillo, sólo ubique en los
controles comunes el control
ToolTip y arrástrelo al formulario.
Este control es invisible en
ejecución, por lo que no aparece
disponible en el formulario.
Aparecerá disponible en la ventana
inferior, NO APARECERÁ en el
Formulario. Al colocarlo se activará
para todos los controles en que sea
posible la propiedad ToolTip, podrá
escribir en esta, lo que desee que
aparezca cuando el usuario pase el
mouse o puntero sobre el control
especificado.
Por ejemplo para seleccione el botón Calcular y en la propiedad ToolTip, Calcular el valor de la
serie. Al ejecutar, si pasa sobre el botón verá lo que se muestra en la figura
Estos mensajes pueden colocarse en todos los controles, sobre todo en aquellos que requieren
acciones del usuario, bien sea introducir información o efectuar clic o cualquier otro evento. Se
denominan también ayudas técnicas se recomienda usarlas siempre.
6
Diseño de una Aplicación Windows Parte II
2010
Coloque mensajes de ayuda o emergentes en cada una de las ventanas donde debe introducir el
usuario información o se reportarán resultados, en la tabla siguiente se resumen los valores a
colocar:
Hasta ahora hemos diseñado una aplicación que si ejecutamos no hace nada, cambiemos eso.
End Sub
7
Diseño de una Aplicación Windows Parte II
2010
Al hacer clic, sobre el botón OK, entrará a la ventana de la aplicación o formulario inicial.
Si ejecutamos ahora, previa a la ventana del formulario de cálculo de la serie, aparecerá esta
ventana que desaparecerá al hacer clic sobre el botón OK, o el botón cerrar, dando paso a la
ventana del formulario.
Estas ventanas son útiles, sobre todo para advertir al usuario de errores en la introducción de los
datos.
Hasta ahora hemos mejorado un poco el comportamiento de la interfaz pero todavía no hace
nada, pues no hemos colocado el código para que determine la serie. Coloquémosle ahora código
al botón calcular, para ello hay dos formas o hace doble clic en el botón calcular o selecciona el
botón calcular y busca entre los eventos posibles, el evento clic. Con cualquiera de las dos
selecciones aparecerá en la ventana de código:
End Sub
Dentro de éste, se colocarán las acciones a realizar cuando el usuario haga clic sobre el botón
calcular, llamado btn_calcular, transcriba antes del End Sub el siguiente código
8
Diseño de una Aplicación Windows Parte II
2010
Dim I, nu As Integer
Dim F As Long
' limpiamos la lista antes de cada ejecución
Lista_terminos.Items.Clear()
'leo los valores de número de terminos y variable de la serie
n = Txt_ValorN.Text
x = Txt_ValorX.Text
suma = 0
I = 0
'determino los términos de la serie
Do
I = I + 1
'calculo cada elemento del termino
p = x ^ (I - 1)
'Determinación del Factorial
F = 1
For nu = 1 To I - 1
F = F * nu
Next nu
'conformo el termino
termino = p / F
'uso el termino
suma = suma + termino
Lista_terminos.Items.Add(" Termino " & I & " = " & termino)
Loop Until I = n
'imprimo el resultado
Txt_resultado.Text = suma
Ejecute con N=10 y con X=1, observe que a partir del séptimo término los valores a sumar son
despreciables, por ser muy pequeños.
Borre los valores de N y X y presione el botón calcular, obtendrá un mensaje como este
9
Diseño de una Aplicación Windows Parte II
2010
Al no tener los cuadros de texto valores que puedan ser transformados en números, están vacías,
muestra el error de que no puede transformarlas en números. Cómo corregir este error
verificando que el usuario coloque valores en estas casillas. Para ello agregaremos una estructura
selectiva que permita calcular si en ambas cajas de texto se tienen valores numéricos, para eso
usaremos la función ISNUMERIC( valor ), la cual permite para un determinado valor determinar si
es o no un número, para ello condicionaremos que si ambas cajas de texto contienen un número
entonces determine el valor de la serie, sino el emita un mensaje en una ventana emergente al
usuario indicándole este error, para ello debe colocar en su código las instrucciones encerradas en
rectángulos rojos.
Observe que en este MsgBox se coloca como parámetro de ícono MsgBoxStyle.Critical, éste
es el ícono del botón rojo, que indica al usuario que se ha cometido un error crítico. El título de la
ventana emergente será ERROR
10
Diseño de una Aplicación Windows Parte II
2010
Si ejecutamos sin suministrar los valores para N y X, aparecerá el siguiente mensaje
Hagamos que nuestra aplicación le permita al usuario seleccionar si desea calcular la serie
suministrando el valor de N, para determinar la suma de los primeros N términos, o si desea
suministrar el error de estimación deseado para determinar la serie.
Si se desea que el usuario elija sólo una de varias opciones, se puede utilizar el control
RadioButton o botones de opción, éstos siempre funcionan como parte de un grupo. Al
seleccionar un botón de opción inmediatamente se borran todos los otros botones de opción en el
grupo. Al definir un grupo de botones de opción, se indica al usuario que "tiene este conjunto de
opciones entre las que puede elegir una y solamente una".
Puede utilizar grupos de controles RadioButton para permitir a los usuarios elegir entre las
opciones exclusivas. La información sobre el estado del control RadioButton de la propiedad
RadioButton.Checked.
11
Diseño de una Aplicación Windows Parte II
2010
Se usará una variable valido de tipo boolean, como bandera que se active al encontrar algún dato
invalido, de manera que sólo si los datos son validos, se determine la serie y sino es así hasta que
el usuario no introduzca la información correcta no se calculará nada. Las instrucciones encerradas
en rectángulos rojos representan los cambios en el código.
12
Diseño de una Aplicación Windows Parte II
2010
' variables de entrada
Dim n As Integer
Dim x As Double
Dim eps As Double
'variables de salida
Dim suma As Double
'variables de proceso
Dim termino As Double
Dim p As Double
Dim I, nu As Integer
Dim F As Long
Dim condicion, valido As Boolean
' limpiamos la lista antes de cada ejecución
Lista_terminos.Items.Clear()
'verifico que los datos sean correctos
If IsNumeric(Txt_ValorX.Text) Then 'verifico que x es número
x = Txt_ValorX.Text
valido = True
Else
MsgBox("Debe suministrar para X, un valor numérico",
MsgBoxStyle.Critical, "Error")
valido = False
End If
13
Diseño de una Aplicación Windows Parte II
2010
For nu = 1 To I - 1
F = F * nu
Next nu
'conformación del termino
termino = p / F
'uso del termino
suma = suma + termino
Lista_terminos.Items.Add(" Termino " & I & " = " &
termino)
If opcion_nterminos.Checked Then
condicion = (I = n)
ElseIf opcion_porerror.Checked Then
condicion = (termino < eps)
End If
Loop Until condicion
'imprimo el resultado
Label_resultado.Text = "e^" & x
Txt_resultado.Text = suma
End If
Recuerde colocar código al botón salir y colocar como código para el evento click me.close para
que se cierre el formulario cuando el usuario pulse o haga clic sobre el botón, como se hizo en la
práctica pasada.
Como el diseño de interfaz es una cuestión de gusto o estilo, puede hacer o efectuar mejoras a la
interfaz diseñada tomando en cuenta los siguientes tips.
14
Diseño de una Aplicación Windows Parte II
2010
Puede mejorar el comportamiento del botón salir colocando el siguiente código, aparecerá un
mensaje con el símbolo de pregunta y los botones de yes o no, para ello sustituya me.close, por:
15
Diseño de una Aplicación Windows Parte II
2010
Otra Mejora más a la interfaz de la serie ex, ahora el botón Salir mejorado
Para la aplicación desarrollada el si activamos el evento clic del botón salir, hacemos clic sobre el
botón, se cierra la aplicación, podemos mejorarla colocando un mensaje de conformación usando
msgbox.
End Sub
Las prácticas que ha realizado hasta ahora le dan una de las posibilidades de diseño de interfaz
para una aplicación, en esta práctica reforzamos el uso de los controles vistos en la primera
práctica y adicionamos tres más tooltip, msgbox y radiobutton. Son sólo ideas juegue, explore,
pruebe, inténte diseñar aplicaciones Windows adaptando programas creados y probados en
consola.
16
Diseño de una Aplicación Windows Parte II
2010
Diseñando una nueva aplicación de Prueba: Mi explorador Web
Cree un nuevo proyecto, seleccione
Aplicación Windows Form y colóquele
por nombre miexplorador
Adicionalmente, si modificamos la
propiedad text del formulario y le
colocamos Mi buscador, el
formulario o ventana quedará como
se muestra a la derecha
17
Diseño de una Aplicación Windows Parte II
2010
Al ejecutar si colocamos la dirección
Aulavirtual.ing.uc.edu.ve
Hemos creado nuestro propio navegador, como muy pocas líneas, ahora bien podemos mejorarlo
colocando en el botón en lugar de buscar Ir a la Página Web y colocando el botón Salir, quedando
la aplicación como se muestra a continuación la captura de pantallas al ejecutar
18
Diseño de una Aplicación Windows Parte II
2010
Al maximizar
19
Diseño de una Aplicación Windows Parte II
2010
Probando Nuevos Controles: CheckBox Vs RadioButton
Cree una nueva aplicación Windows Form y colóquele por
Nombre PRUEBA, coloque en la ventana o formulario tres
CheckBox y tres RadioButton, la aplicación quedará como se
muestra. Ejecute y seleccione los tres CheckBox, trate de
hacer lo mismo con los RadioButton, pudo hacerlo?,
establezca las diferecias entre el CheckBox y el RadioButton
observadas en la ejecución.
20