ingeniería en sistemas y redes informáticas. facultad de ... · ingeniería en sistemas y redes...
TRANSCRIPT
![Page 1: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/1.jpg)
Ingeniería en Sistemas y Redes Informáticas.
Facultad de Ciencias y Tecnología.
Programación Computacional 1.
Menús y Barra de Herramientas
Irving Geovanny Martinez Urbina / ContextMenuStrip
Salvador Alexander Martinez Azucar / MenuString.
Jennifer Madai Reyes Carranza / ToolStrip.
Alba Lidia Zamora Ordoñez / StatusStrip.
CICLO II-15
![Page 2: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/2.jpg)
CONTEXTMENUSTRIP
1) Primero abrimos un nuevo proyecto, seleccionamos “Visual Basic”, después “Aplicación de
Windows Forms”, le damos un nombre a nuestro formulario y le damos clic en aceptar.
2) Buscamos en el cuadro de herramientas la opción de menú y barra de herramientas,
seleccionamos ContextMenuStrip y lo arrastramos al formulario.
![Page 3: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/3.jpg)
3) Ahora en las opciones que nos aparecen le asignamos las acciones que tendrán nuestro menú.
Cortar, Copiar y Pegar.
4) Regresamos al cuadro de herramientas y seleccionamos todos los formularios de Windows
Forms. Buscamos el componente “RitchTextBox” y lo arrasamos al formulario.
![Page 4: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/4.jpg)
5) Después seleccionamos el componente “RitchTextBox” y damos clic derecho, propiedades, y
buscamos donde diga “ContextMenuStrip” y seleccionamos “ContextMenuStrip1”.
6) Después damos clic debajo del formulario donde se encuentra “ContextMenuStrip1” y nos
aparecerá el menú antes creado en el formulario. Ahora daremos doble clic en copiar y
digitamos el código que aparecerá en la imagen.
![Page 5: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/5.jpg)
7) Ahora damos clic en iniciar y corremos el programa. Escribimos un texto, lo sombreamos y
damos clic derecho y aparecerá nuestro menú con sus funciones reales de cortar, copiar y
pegar.
![Page 6: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/6.jpg)
MENUSTRING
Cuando se habla de una Interfaz de Documento Múltiple (MDI), se hace referencia a una aplicación que tendrá
entre sus formularios uno que actuará como principal, el cual encerrará los demás formularios que formarán
parte de la aplicación, en donde al resto de los formularios que se carguen en el formulario principal se le
denomina formularios hijos.
Creación del Formularios MDI
Para continuar, veamos cómo podemos implementar este tipo de interfaz en una aplicación:
Iniciaremos por definir un nuevo proyecto de Visual Studio.
Para este ejemplo llamaremos al nuevo proyecto: AplicacionMDI, a como se puede ver en la imagen.
Ajustar las Propiedades del Formulario MDI
Una vez dentro del proyecto, lo primero que haremos será confeccionar el formulario que funcionará como
contenedor MDI o Formulario Padre, siguiendo los siguientes pasos:
Cambiar el nombre del Formulario por MDIPrincipal, haciendo clic derecho sobre el formulario, seleccionando
la opción propiedades, ver imagen No.2
![Page 7: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/7.jpg)
Imagen No.2. Acceso a las propiedades del formulario
Cuando llevamos a cabo esta acción se nos debe habilitar el panel de propiedades que se ubica normalmente en
la parte derecha del proyecto, y estando en este panel lo primero que haremos será, ha como ya hemos indicado
anteriormente, cambiar el nombre en la propiedad Name, reemplazando el nombre del formulario por
MDIPrincipal,
![Page 8: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/8.jpg)
Seguido configuraremos el formulario para que sea de tipo MDI, en la propiedad isMDIContainer y la
estableceremos en True (Verdadero) a como se ve en la imagen, en donde prueba de que la propiedad fue
correctamente aplicada, el formulario deberá cambiar su color gris claro a uno más oscuro ver figura
![Page 9: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/9.jpg)
Imagen Panel de Propiedades, Propiedad IsMdiContainer
Panel de propiedades, Propiedad WindowsState
![Page 10: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/10.jpg)
Ahora agregaremos al formulario una barra de menú, con el objetivo de utilizarla para hacer los llamados a los
demás formularios que necesitemos, y lo haremos haciendo clic en el cuadro de herramientas, sobre la opción
Menús y Barras de herramientas y seleccionar de ésta el control MenuStrip, arrastrando y soltar sobre el
formulario principal a como se puede apreciar en la imagen
Formulario MDI, Control MenuStrip.
A continuación procederemos a crear cada uno de los elementos de menú que necesitemos, haciendo clic sobre
la barra de herramienta exactamente sobre el texto que dice Escriba Aquí, a como se verá en la imagen, y de
esta manera podremos agregar la cantidad de menú tanto como sean necesarios para llamar o todos los
formularios que tengamos en la aplicación.
![Page 11: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/11.jpg)
Agregando los Formularios Necesarios para la Aplicación
Luego de ellos agregaremos un nuevo formulario, al que llamaremos frmHijo1, con la combinación de teclas
Ctrl + Shift + A y de la ventana que nos aparecerá, seleccionar Windows Forms e indicar el nombre que antes
hemos mencionado y hacer clic sobre la opción Agregar,
Ventana para Agregar Nuevos Elementos al proyecto.
![Page 12: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/12.jpg)
En este nuevo formulario no haremos nada, sola mente usarlo en los llamados desde el formulario
MDIPrincipal, para lo cual será necesario regresar a este para culminar con el ejercicio, haciendo doble clic
sobre el mismo.
Creando los Formularios Hijos
Una vez de regreso en el formulario MDPPrincipal, haremos doble clic sobre el elemento de menú que se
utilizará para hacer el llamado al formulario hijo, en este caso se utilizara el elemento que se rotula
Formulario Hijo 1, hacemos doble clic sobre este y una vez en la ventana de código agregamos las siguientes
líneas de código
Dim f As New frmHijo1
‘Declaramos una nueva variable según el formulario a utilizar
f.MdiParent = Me
‘Indicamos a la variable que hemos declarado el formulario MDI,
‘Donde el Me, representa el formulario actual donde se está trabajando
f.Show()
‘Por último, le indicamos a la variable que se muestre
Ventana de código de Visual Studio.
Para finalizar se guardan los cambios presionando la combinación de teclas Ctrl + S y luego ejecutamos el
programa presionando la tecla F5 para ver los resultados, y si está todo bien se debe mostrar la aplicación a
![Page 13: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/13.jpg)
como se puede apreciar en la imagen ., haciendo clic sobre el elemento de menú destinado para hacer el
llamado al Formulario Hijo1.
De esta manera hemos aprendido a crear una aplicación de tipo MDI, si por alguna razón has tenido alguna
dificulta en llevar a cabo este ejercicio, puedes repetir nuevamente los pasos.
![Page 14: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/14.jpg)
TOOLSTRIP
Primeramente abrimos un nuevo proyecto.
Realizaremos un pequeño calculo con el control tool string
Le asignaremos el nombre de toolstring
![Page 15: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/15.jpg)
Abrimos el cuadro de herramientas y buscamos menús y barras de herramientas.
Arrastramos el toolstring a nuestro formulario
Como se observa se muestra una serie opciones que podemos utilizar en el toolstring
![Page 16: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/16.jpg)
Pero aquí utilizaremos los elementos que ya trae por defecto
Damos clic en insertar elementos estándar
Como podemos observar nos muestra una serie de opciones que podemos utilizar como:
Botón nuevo, guardar imprimir cortar y ayuda.
Como se observa solo dejamos los botones nuevo y ayuda
![Page 17: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/17.jpg)
Ya que hemos dejado los elementos que necesitáremos para hacer el ejemplo
Damos doble clic en el botón ayuda para codificar
E ingresamos el siguiente código:
Public Class Form1
Private Sub AyudaToolStripButton_Click(sender As Object, e As EventArgs) Handles
AyudaToolStripButton.Click
'aqui le agregaremos un mensaje
MsgBox("bienvenido, ejemplo de toolstring", MsgBoxStyle.Information, "mensaje del programador")
End Sub
End Class
Ahora arreglaremos el botón nuevo
Arrastraremos 3 textbox y 3 label, Ya arrastrados le pondremos los siguientes nombres
Label1 primer numero
Label2 segundo numero
Label3 resultado
Agregamos el siguiente código para el botón nuevo
Private Sub NuevoToolStripButton_Click(sender As Object, e As EventArgs) Handles
NuevoToolStripButton.Click
TextBox1.Clear()
TextBox2.Clear()
TextBox3.Clear()
End Sub
End Class
Bueno ahora codificaremos el botón calcular
![Page 18: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/18.jpg)
Este es el botón que utilizaremos para calcular
ingresamos el siguiente código
Private Sub ToolStripButton1_Click(sender As Object, e As EventArgs) Handles ToolStripButton1.Click
TextBox3.Text = Val(TextBox1.Text) + Val(TextBox2.Text)
End Sub
End Class
Ahora que ya hemos codificado los botones lo ejecutaremos para probar si no tenemos algún erro
Como vemos se ejecuto sin ningún erros ahora probaremos los botones
Comenzaremos con el botón ayuda
![Page 19: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/19.jpg)
Podemos ver que si funciona y nos muestra el mensaje que le codificamos
Ahora el botón calcular
Ahí se muestra el cálculo que si funciona
Y por último el botón nuevo
![Page 20: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/20.jpg)
Efectivamente si nos funciono
Bueno así concluimos con el ejemplo de toolstring
![Page 21: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/21.jpg)
STATUSSTRIP
Este control proporciona un área donde la aplicación puede mostrar breve información
de estado, por lo general en la parte inferior del formulario. Puede contener varios tipos de
objetos tales como botones desplegables, barras de progreso, y paneles. Estos objetos están
representados por diferentes tipos de controles contenidos en forma, por ejemplo, la barra de
progreso está representado por un ToolStrip y ProgressBar control. Puedes editar las propiedades
de un objeto en el Propiedades ventana. Se selecciona el objeto y luego utilizar la ventana
Propiedades para cambiar su apariencia o comportamiento. O bien, puede
hacerlo mediante programación:
1) Creamos un nuevo proyecto, aplicación de Windows Forms, le agregamos un nombre
cualquiera, y le damos aceptar.
2) Al haber creado un nuevo formulario nos vamos al cuadro de herramientas, selecionamos
donde dice menú y barra de herramientas, seleccionamos la que dice “StatusStrip”, lo
arrastramos a la parte inferior del formulario.
![Page 22: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/22.jpg)
3) Seleccionamos el componente y damos clic en “ProgressBar”.
4) Seleccionamos la barra que nos creó y le damos clic derecho, propiedades. Después
cambiamos en la opción de AutoSize de “True” a “False”, ahora cambiamos en la opción de
“Step” ponemos “1”.
![Page 23: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/23.jpg)
5) Regresamos de nuevo al statusstrip, y creamos un “StatusLabel”. Le damos clic derecho, propiedades y borramos donde dice “Text”.
![Page 24: Ingeniería en Sistemas y Redes Informáticas. Facultad de ... · Ingeniería en Sistemas y Redes Informáticas. Facultad de Ciencias y Tecnología. Programación Computacional 1](https://reader033.vdocumento.com/reader033/viewer/2022051807/600802678679bd56dd2b2845/html5/thumbnails/24.jpg)
6) Ahora le damos doble clic en el ”ProgressBar” y digitamos el codigo de la imagen, luego le damos clic en iniciar, el programa se correra, y esta programado para cuando el usuario de clic en la barra diga: Cargando; y aparezca una linea verde simulando hasta que llegue a los 10 clic.