www.ceminfosv.com                         Programación I                   UGB, San Miguel
               Universidad Capitán General Gerardo Barrios, SM.                  Guía Nº 4 - Computo II-09

               Asignatura: Programación I                                     Fecha: 04 de Octubre de 2009

               Docente: Lic. Marvin Antonio Romero Flores


Objetivo:
-   Aprender a crear aplicaciones Windows – Forms, y seguir practicando la creación y el consumo de clases.



Para la realización de esta guía se necesitará lo siguiente:

    1. Guía de Práctica No. 1, 2, 3 y 4
    2. Computadora con software Microsoft Visual Basic 2005 ó 2008.




                                           r l
                                         do gue
                                      lva i
                                    Sa n M
                                  El , Sa
                        GB
                  U




    Diseñado y Escrito por: Lic. Marvin Romero                           marfonline@gmail.com
www.ceminfosv.com                         Programación I                       UGB, San Miguel


                                                Parte Única:
     Creación de Una Aplicación Windows Forms, y consumir clases creadas por el
                                programador en ella.
En este ejercicio se comprobará la forma en que funcionan los alcances de variables en Visual Basic, y la
manera en que podemos aprovechar su manejo para preservar valores en memoria con eficiencia.

1. Cree una solución en Blanco (Nuevo Proyecto > Tipos De Proyecto > Otros Tipos de Proyecto >
   Soluciones de Visual Studio > Plantilla Solución en Blanco), llamada “formularios y funciones”,
   estaría de más decirles que es criterio de Uds. Elegir la Ubicación (Pen Drive, o ruta fija en su disco
   duro).
2.
   NOTA: SI NO RECUERDA COMO HACERLO CONSULTE LA GUIA 3; PASO 1




                                         r l
                                       do gue
3. Agregue a su solución un nuevo proyecto
                                    lva i
    NOTA: SI NO RECUERDA COMO HACERLO CONSULTE LA GUIA 3; PASO 2
                                  Sa n M
    De tipo Windows – Aplicación de Windows Forms, y asígnele como nombre Formularios, y
    presiones Aceptar
                                El , Sa
                       GB
                 U




   Diseñado y Escrito por: Lic. Marvin Romero                               marfonline@gmail.com
www.ceminfosv.com                      Programación I                     UGB, San Miguel

4. Obtendrá lo siguiente, El IDE ha preparado su entorno para el diseño de Interfaz Gráfica de
   Usuario (IGU).




                                       r l
                                     do gue
                                  lva i
                                Sa n M
                              El , Sa
                     GB
               U




   Así debe quedar el IDE para el diseño con todos los elementos necesarios totalmente visibles:
   1. El Explorador de Soluciones,
   2. El Cuadro de Herramientas,
   3. El Diseñador de Formularios,
   4. Lista de Errores, y la
   5. Ventana de Propiedades,
       Se ruega prestar muchísima atención ya que en la clase práctica se explicara cómo conseguirlo
   (aunque ya deberías saber si llevan la lectura del material).




   Diseñado y Escrito por: Lic. Marvin Romero                          marfonline@gmail.com
www.ceminfosv.com                    Programación I                    UGB, San Miguel

5. Insertar dentro del formulario Form1, los siguientes controles:
   a) 4 Etiquetas (Label)
   b) 2 Cuadros de Texto (TextBox)
   c) 1 Cuadros Combinados (ComboBox)
   d) 1 Botón de Acción (Button)

   Organícelos de tal forma que quede similar a la siguiente captura.




                                      r l
                                    do gue
                                 lva i
                               Sa n M
                             El , Sa

6. Modifique las siguientes propiedades a cada uno de los controles (Objetos). Tal y como lo refleja
   la siguiente Tabla Nº 1, esto se consigue fácilmente, seleccionado primero el control, y luego
   cambiado el valor de la propiedad respectiva en la Ventana de Propiedades.
                     GB
               U




   Diseñado y Escrito por: Lic. Marvin Romero                        marfonline@gmail.com
www.ceminfosv.com                     Programación I                    UGB, San Miguel

                                               TABLA Nº 1
                               Valores de las Propiedades de los Controles

            CONTROL           PROPIEDAD VALOR ASIGNADO POR IDE               NUEVO VALOR
       Etiquetas              (Name)    Label1                             lbln1
                                        Label2                             lbln2
                                        Label3                             lbloperacion
                                        Label4                             Lblresultado
                              Text      Label1                             Número 1:
                                        Label2                             Número 2:
                                        Label3                             Operación
                                        Label4                             Resultado
       Cuadros de Texto       (Name)    TextBox1                           txtn1
                                        TextBox2                           txtn2
       Cuadro Combinado       (Name)    ComboBox1                          cmboperacion




                                      r l
                                    do gue
       Botón de Acción        (Name)    Button1                            btncalcular

7. Si realiza todo de la manera adecuada el resultado será algo como esto:
                                 lva i
                               Sa n M
                             El , Sa
                     GB
                U




8. Ahora todo está casi todo listo, para comenzar a codificar, ya que hemos cumplido con la norma
   básica de todo diseñador de IGU’s, que es la de asignar nombre a cada objeto que forma parte del
   formulario y que será utilizado e invocado dentro del código, esto se consiguió al modificar el
   valor por defecto de la propiedad (Name) de cada uno de los controles (Objetos), utilizando los
   prefijos adecuados establecidos en los estándares de denominación de controles. (poner atención
   en clase)

9. El propósito de este formulario será el de solicitar el usuario 2 números de tipo Double utilizando
   cuadros de texto, así mismo se podrá elegir el poder realizar una de las operaciones matemáticas
   básicas (+,-,/,*) mediante un cuadro combinado, y ejecutándolas mediante un botón de acción.




   Diseñado y Escrito por: Lic. Marvin Romero                        marfonline@gmail.com
www.ceminfosv.com                     Programación I                    UGB, San Miguel

10. Las operaciones matemáticas serán invocadas, desde un espacio de nombres creado por nosotros,
    en donde diseñaremos una clase que contendrá las cuatro funciones para conseguir realizar cada
    operación.

11. Para finalizar con el diseño de la IGU, solo nos resta asignar los elementos que formarán parte del
    cuadro combinado, esto se logra dando clic derecho sobre el control llamado cmboperaciones, y
    elegir la opción editar elementos.




                                       r l
                                     do gue
                                  lva i
                                Sa n M
                              El , Sa


Una vez dentro del Editor de la Colección Cadena, procedemos a agregar los cuatro elementos que
formaran parte del cuadro combinado (Ver circulo), y presionar aceptar.
                     GB
                U




                                    No olvides que después
                                      de cada elemento
                                     debes presión ENTER




   Diseñado y Escrito por: Lic. Marvin Romero                         marfonline@gmail.com
www.ceminfosv.com                     Programación I                    UGB, San Miguel

12. Ahora si podemos decir que ya tenemos terminada la IGU, por lo que procederemos de lleno a
    codificar, en primer lugar Nuestra Biblioteca de Clases.

13. Agregar a la solución Existente un Proyecto de tipo Windows – Biblioteca de Clases, llamada
    misoperaciones

   NOTA: SI NO RECUERDA COMO HACERLO CONSULTE LA GUIA 3; PASO 3

14. Modifique el programa Class1.vb (Búsquelo en el Explorador de Soluciones, en el proyecto de
    Biblioteca de Clases mis operaciones, y de doble clic), de tal manera que quede como sigue:




                                       r l
                                     do gue
                                  lva i
                                Sa n M
                              El , Sa
                     GB




15. Genere o Construya el Proyecto de Biblioteca de Clases, y guarde todo.

NOTA: SI NO RECUERDA COMO HACERLO CONSULTE LA GUIA 3; PASO 6
                U




16. Nótese que estamos creando un espacio de nombres llamado operaciones (línea 1), dentro
    también creamos una clase pública llamada básicas (línea 2), y luego esta lo nuevo, están dentro
    de la clase 4 funciones de tipo publicas y compartidas (líneas 3 a la 14).

17. Si ya nos dimos cuenta estamos acostumbrados a crear Procedimientos ó Metodos (Sub), sin
    embargo ahora lo que estamos creando son Funciones (Function … End Funtion), ambas pueden
    recibir argumentos (valores) por referencia (ByRef) o por valor (ByRef), la diferencia entre ambos
    es la posibilidad que tienen las segundas de poder retornar (Return) valores cuando se les invoca.

18. Explicaré únicamente la función suma, ya que las otras 3 funcionas de manera similar, de acuerdo.

19. Se declaran una función pública y compartida llamada suma, a la cual se le especifica que recibirá
    como argumentos por valor (ByRef), de tipo Double. (línea 3), y retornara el resultado de operar
    los valores recibidos (los captura y almacena en las variables n1 y n2 respectivamente) al lugar de
    invocación usando Return (línea 4).



   Diseñado y Escrito por: Lic. Marvin Romero                         marfonline@gmail.com
www.ceminfosv.com                     Programación I                    UGB, San Miguel

20. Establezca la referencia a nuestra biblioteca en el proyecto de Aplicación Windows Forms,
    llamado formularios.

NOTA: SI NO RECUERDA COMO HACERLO CONSULTE LA GUIA 3; PASO 11 y 12

21. Hemos terminado de codificar nuestra biblioteca de clases, también ya establecimos la referencia
    en el proyecto de aplicación Windows para poder ser consumida, ahora comenzaremos a codificar
    el formulario.

22. Seleccione el Diseñador de Formularios Presionando sobre la ficha con su nombre.




                                       r l
                                     do gue
23. El código como es de esperar, debe ir dentro de un Botón de Acción, por lo que seleccionamos el
                                  lva i
    control Botón de Acción llamado btncalcular, y damos doble clic, para abrir el código.
                                Sa n M
                              El , Sa


                                                              DOBLE CLIC
                        GB
                 U




24. Y no abrirá el que tanto conocemos, el Editor de Código. Preste atención a los globos de texto, ya
    que reflejan lo que el IDE hace por UD.

                                Crea una Clase
                                llamada Form1




                                                                            Nótese el evento
                                                                            por defecto Click
     Crea un método
    con el nombre del
         control



   Diseñado y Escrito por: Lic. Marvin Romero                        marfonline@gmail.com
www.ceminfosv.com                     Programación I                     UGB, San Miguel

25. Ahora debemos importar nuestra biblioteca de clases, con el espacio de nombres y la clase para
    poder consumirlas, tal y como sigue:




                                                                            Continuador de Línea


                                                                                  Continuador de Línea




                                       r l
                                     do gue
26. Observe como he utilizado el carácter continuador de línea (_) para poder la lectura más fácil, si
    usar las barras de desplazamiento (opcional).
                                  lva i
                                Sa n M
27. Ahora procederemos a codificar las líneas correspondientes al procedimiento btncalcular_Click, de
    la siguiente manera:
                              El , Sa
                     GB
                U




   Diseñado y Escrito por: Lic. Marvin Romero                         marfonline@gmail.com
www.ceminfosv.com                     Programación I                     UGB, San Miguel

28. Declaramos dos variables para almacenar los números a operar (línea 8), de tipo Double
    (Recuerde que la función requiere como argumento valores de ese tipo).

29. Le asignamos a las variables el valor que contiene los controles cuadros de textos, este se extrae
    de la propiedad Text (Linea 9 y 10)

30. Evaluamos que tipo de operación se le aplicara a los valores, mediante una estructura de control
    Select Case ... End Select (Linea 11 a 22), esto se logra comparando el valor que el usuario haya
    elegido dentro del cuadro combinado y su propiedad text, empleado un Case para cada
    posibilidad (línea 12, 13, 16, 18 y 20).

31. Dependiendo cual sea el caso, se invocará la función respectiva de nuestra Biblioteca de Clases. y
    se mostrarán los resultados retornados por las mismas en el control lblresultado en su propiedad
    text (línea 13,15,17 y 19)




                                       r l
                                     do gue
32. Existe un Case por defecto (Case Else) (línea 20), el cual se ejecutara cuando ninguno de los
    anteriores se cumple, mostrando un cuadro de mensaje con la cadena “Elija Una Opción” (línea
    21).                          lva i
                                Sa n M
33. Construya la Solución, Guarde Todo, Establezca el proyecto formularios como proyecto de inicio e
    Inicie la depuración.
                              El , Sa


                                           FIN DEL EJERCICIO.
ACTIVIDAD:
                     GB




a) ¿Qué pasa si como entrada en los cuadros de texto introducimos cadenas de texto, y presionamos
   sobre el botón calcular?
                U




b) ¿Qué pasa si los cuadros de texto están vacíos, y presionamos sobre el botón calcular?
c) ¿Qué pasa si no elegimos ninguna operación?
d) ¿Qué pasa su escribimos 0 en el cuadro de texto txtn2, y cualquier valor en txtn1, y queremos
   hacer una división?




   Diseñado y Escrito por: Lic. Marvin Romero                         marfonline@gmail.com

Guia 4 VB .NET

  • 1.
    www.ceminfosv.com Programación I UGB, San Miguel Universidad Capitán General Gerardo Barrios, SM. Guía Nº 4 - Computo II-09 Asignatura: Programación I Fecha: 04 de Octubre de 2009 Docente: Lic. Marvin Antonio Romero Flores Objetivo: - Aprender a crear aplicaciones Windows – Forms, y seguir practicando la creación y el consumo de clases. Para la realización de esta guía se necesitará lo siguiente: 1. Guía de Práctica No. 1, 2, 3 y 4 2. Computadora con software Microsoft Visual Basic 2005 ó 2008. r l do gue lva i Sa n M El , Sa GB U Diseñado y Escrito por: Lic. Marvin Romero marfonline@gmail.com
  • 2.
    www.ceminfosv.com Programación I UGB, San Miguel Parte Única: Creación de Una Aplicación Windows Forms, y consumir clases creadas por el programador en ella. En este ejercicio se comprobará la forma en que funcionan los alcances de variables en Visual Basic, y la manera en que podemos aprovechar su manejo para preservar valores en memoria con eficiencia. 1. Cree una solución en Blanco (Nuevo Proyecto > Tipos De Proyecto > Otros Tipos de Proyecto > Soluciones de Visual Studio > Plantilla Solución en Blanco), llamada “formularios y funciones”, estaría de más decirles que es criterio de Uds. Elegir la Ubicación (Pen Drive, o ruta fija en su disco duro). 2. NOTA: SI NO RECUERDA COMO HACERLO CONSULTE LA GUIA 3; PASO 1 r l do gue 3. Agregue a su solución un nuevo proyecto lva i NOTA: SI NO RECUERDA COMO HACERLO CONSULTE LA GUIA 3; PASO 2 Sa n M De tipo Windows – Aplicación de Windows Forms, y asígnele como nombre Formularios, y presiones Aceptar El , Sa GB U Diseñado y Escrito por: Lic. Marvin Romero marfonline@gmail.com
  • 3.
    www.ceminfosv.com Programación I UGB, San Miguel 4. Obtendrá lo siguiente, El IDE ha preparado su entorno para el diseño de Interfaz Gráfica de Usuario (IGU). r l do gue lva i Sa n M El , Sa GB U Así debe quedar el IDE para el diseño con todos los elementos necesarios totalmente visibles: 1. El Explorador de Soluciones, 2. El Cuadro de Herramientas, 3. El Diseñador de Formularios, 4. Lista de Errores, y la 5. Ventana de Propiedades, Se ruega prestar muchísima atención ya que en la clase práctica se explicara cómo conseguirlo (aunque ya deberías saber si llevan la lectura del material). Diseñado y Escrito por: Lic. Marvin Romero marfonline@gmail.com
  • 4.
    www.ceminfosv.com Programación I UGB, San Miguel 5. Insertar dentro del formulario Form1, los siguientes controles: a) 4 Etiquetas (Label) b) 2 Cuadros de Texto (TextBox) c) 1 Cuadros Combinados (ComboBox) d) 1 Botón de Acción (Button) Organícelos de tal forma que quede similar a la siguiente captura. r l do gue lva i Sa n M El , Sa 6. Modifique las siguientes propiedades a cada uno de los controles (Objetos). Tal y como lo refleja la siguiente Tabla Nº 1, esto se consigue fácilmente, seleccionado primero el control, y luego cambiado el valor de la propiedad respectiva en la Ventana de Propiedades. GB U Diseñado y Escrito por: Lic. Marvin Romero marfonline@gmail.com
  • 5.
    www.ceminfosv.com Programación I UGB, San Miguel TABLA Nº 1 Valores de las Propiedades de los Controles CONTROL PROPIEDAD VALOR ASIGNADO POR IDE NUEVO VALOR Etiquetas (Name) Label1 lbln1 Label2 lbln2 Label3 lbloperacion Label4 Lblresultado Text Label1 Número 1: Label2 Número 2: Label3 Operación Label4 Resultado Cuadros de Texto (Name) TextBox1 txtn1 TextBox2 txtn2 Cuadro Combinado (Name) ComboBox1 cmboperacion r l do gue Botón de Acción (Name) Button1 btncalcular 7. Si realiza todo de la manera adecuada el resultado será algo como esto: lva i Sa n M El , Sa GB U 8. Ahora todo está casi todo listo, para comenzar a codificar, ya que hemos cumplido con la norma básica de todo diseñador de IGU’s, que es la de asignar nombre a cada objeto que forma parte del formulario y que será utilizado e invocado dentro del código, esto se consiguió al modificar el valor por defecto de la propiedad (Name) de cada uno de los controles (Objetos), utilizando los prefijos adecuados establecidos en los estándares de denominación de controles. (poner atención en clase) 9. El propósito de este formulario será el de solicitar el usuario 2 números de tipo Double utilizando cuadros de texto, así mismo se podrá elegir el poder realizar una de las operaciones matemáticas básicas (+,-,/,*) mediante un cuadro combinado, y ejecutándolas mediante un botón de acción. Diseñado y Escrito por: Lic. Marvin Romero marfonline@gmail.com
  • 6.
    www.ceminfosv.com Programación I UGB, San Miguel 10. Las operaciones matemáticas serán invocadas, desde un espacio de nombres creado por nosotros, en donde diseñaremos una clase que contendrá las cuatro funciones para conseguir realizar cada operación. 11. Para finalizar con el diseño de la IGU, solo nos resta asignar los elementos que formarán parte del cuadro combinado, esto se logra dando clic derecho sobre el control llamado cmboperaciones, y elegir la opción editar elementos. r l do gue lva i Sa n M El , Sa Una vez dentro del Editor de la Colección Cadena, procedemos a agregar los cuatro elementos que formaran parte del cuadro combinado (Ver circulo), y presionar aceptar. GB U No olvides que después de cada elemento debes presión ENTER Diseñado y Escrito por: Lic. Marvin Romero marfonline@gmail.com
  • 7.
    www.ceminfosv.com Programación I UGB, San Miguel 12. Ahora si podemos decir que ya tenemos terminada la IGU, por lo que procederemos de lleno a codificar, en primer lugar Nuestra Biblioteca de Clases. 13. Agregar a la solución Existente un Proyecto de tipo Windows – Biblioteca de Clases, llamada misoperaciones NOTA: SI NO RECUERDA COMO HACERLO CONSULTE LA GUIA 3; PASO 3 14. Modifique el programa Class1.vb (Búsquelo en el Explorador de Soluciones, en el proyecto de Biblioteca de Clases mis operaciones, y de doble clic), de tal manera que quede como sigue: r l do gue lva i Sa n M El , Sa GB 15. Genere o Construya el Proyecto de Biblioteca de Clases, y guarde todo. NOTA: SI NO RECUERDA COMO HACERLO CONSULTE LA GUIA 3; PASO 6 U 16. Nótese que estamos creando un espacio de nombres llamado operaciones (línea 1), dentro también creamos una clase pública llamada básicas (línea 2), y luego esta lo nuevo, están dentro de la clase 4 funciones de tipo publicas y compartidas (líneas 3 a la 14). 17. Si ya nos dimos cuenta estamos acostumbrados a crear Procedimientos ó Metodos (Sub), sin embargo ahora lo que estamos creando son Funciones (Function … End Funtion), ambas pueden recibir argumentos (valores) por referencia (ByRef) o por valor (ByRef), la diferencia entre ambos es la posibilidad que tienen las segundas de poder retornar (Return) valores cuando se les invoca. 18. Explicaré únicamente la función suma, ya que las otras 3 funcionas de manera similar, de acuerdo. 19. Se declaran una función pública y compartida llamada suma, a la cual se le especifica que recibirá como argumentos por valor (ByRef), de tipo Double. (línea 3), y retornara el resultado de operar los valores recibidos (los captura y almacena en las variables n1 y n2 respectivamente) al lugar de invocación usando Return (línea 4). Diseñado y Escrito por: Lic. Marvin Romero marfonline@gmail.com
  • 8.
    www.ceminfosv.com Programación I UGB, San Miguel 20. Establezca la referencia a nuestra biblioteca en el proyecto de Aplicación Windows Forms, llamado formularios. NOTA: SI NO RECUERDA COMO HACERLO CONSULTE LA GUIA 3; PASO 11 y 12 21. Hemos terminado de codificar nuestra biblioteca de clases, también ya establecimos la referencia en el proyecto de aplicación Windows para poder ser consumida, ahora comenzaremos a codificar el formulario. 22. Seleccione el Diseñador de Formularios Presionando sobre la ficha con su nombre. r l do gue 23. El código como es de esperar, debe ir dentro de un Botón de Acción, por lo que seleccionamos el lva i control Botón de Acción llamado btncalcular, y damos doble clic, para abrir el código. Sa n M El , Sa DOBLE CLIC GB U 24. Y no abrirá el que tanto conocemos, el Editor de Código. Preste atención a los globos de texto, ya que reflejan lo que el IDE hace por UD. Crea una Clase llamada Form1 Nótese el evento por defecto Click Crea un método con el nombre del control Diseñado y Escrito por: Lic. Marvin Romero marfonline@gmail.com
  • 9.
    www.ceminfosv.com Programación I UGB, San Miguel 25. Ahora debemos importar nuestra biblioteca de clases, con el espacio de nombres y la clase para poder consumirlas, tal y como sigue: Continuador de Línea Continuador de Línea r l do gue 26. Observe como he utilizado el carácter continuador de línea (_) para poder la lectura más fácil, si usar las barras de desplazamiento (opcional). lva i Sa n M 27. Ahora procederemos a codificar las líneas correspondientes al procedimiento btncalcular_Click, de la siguiente manera: El , Sa GB U Diseñado y Escrito por: Lic. Marvin Romero marfonline@gmail.com
  • 10.
    www.ceminfosv.com Programación I UGB, San Miguel 28. Declaramos dos variables para almacenar los números a operar (línea 8), de tipo Double (Recuerde que la función requiere como argumento valores de ese tipo). 29. Le asignamos a las variables el valor que contiene los controles cuadros de textos, este se extrae de la propiedad Text (Linea 9 y 10) 30. Evaluamos que tipo de operación se le aplicara a los valores, mediante una estructura de control Select Case ... End Select (Linea 11 a 22), esto se logra comparando el valor que el usuario haya elegido dentro del cuadro combinado y su propiedad text, empleado un Case para cada posibilidad (línea 12, 13, 16, 18 y 20). 31. Dependiendo cual sea el caso, se invocará la función respectiva de nuestra Biblioteca de Clases. y se mostrarán los resultados retornados por las mismas en el control lblresultado en su propiedad text (línea 13,15,17 y 19) r l do gue 32. Existe un Case por defecto (Case Else) (línea 20), el cual se ejecutara cuando ninguno de los anteriores se cumple, mostrando un cuadro de mensaje con la cadena “Elija Una Opción” (línea 21). lva i Sa n M 33. Construya la Solución, Guarde Todo, Establezca el proyecto formularios como proyecto de inicio e Inicie la depuración. El , Sa FIN DEL EJERCICIO. ACTIVIDAD: GB a) ¿Qué pasa si como entrada en los cuadros de texto introducimos cadenas de texto, y presionamos sobre el botón calcular? U b) ¿Qué pasa si los cuadros de texto están vacíos, y presionamos sobre el botón calcular? c) ¿Qué pasa si no elegimos ninguna operación? d) ¿Qué pasa su escribimos 0 en el cuadro de texto txtn2, y cualquier valor en txtn1, y queremos hacer una división? Diseñado y Escrito por: Lic. Marvin Romero marfonline@gmail.com