ingeniería en sistemas y redes informáticas. facultad de ... · ingeniería en sistemas y redes...

24
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

Upload: others

Post on 24-Sep-2020

2 views

Category:

Documents


0 download

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.