Bienvenidos sean a este post, hoy veremos una leve introduccion a lo que es trabajar con la parte visual del lenguaje.
Hasta ahora hemos trabajado siempre con la consola, tanto con Visual Studio como sin el, pero hoy veremos como crear una aplicacion con elementos y como crear el codigo para poder trabajar, para ello usaremos la solucion Universidad que hicimos anteriormente, les recomiendo esta serie de posts:
- Proyecto Alumnos
- Clase Examenes
- Proyecto Secretaria
- Proyecto Profesores
- Modificando Alumnos
- Preparando a Universidad
- Usando archivos INI
- Esparciendo a Inifile
Con todos estos posts pueden generar la solucion llamada Universidad, si tienen conocimientos y necesitan solo los codigos para generar la solucion les recomiendo este post, una vez que hayan generado la solucion procederemos a agregar un nuevo proyecto para ello hacen click con el boton derecho sobre la solucion en el Explorador de Soluciones y seleccionan Agregar -> Nuevo Proyecto donde nos aparecera el siguiente cuadro
En este caso les recomiendo modificar el filtro, seleccionen de la siguiente forma:
- Lenguaje: C#
- Plataforma: Windows
- Tipo: Windows
Una vez aplicado el filtro les recomiendo seleccionar Aplicacion Windows Forms (.Net Framework), una vez seleccionado presionen Siguiente para pasar al siguiente cuadro
En esta ventana ingresaremos el nombre de nuestro proyecto, para este usaremos AlumnosGUI, elegimos la misma version de FrameWork que la solucion, una vez hecho todo esto presionamos Crear para finalizar nuestra creacion.
Con todo esto ya tendremos disponibles nuestra ventana, antes de comenzar les recomiendo habilitar el Cuadro de Herramientas, para ello vayan a Ver->Cuadro de Herramientas
Este se nos habilitara de costado y nos permitira acceder a los distintos items que tenemos disponibles para agregar a nuestra ventana, como por ejemplo botones, etiquetas, cuadros de texto, etc
Aca es simple, solo debemos elegir el elemento en cuestion y hacerle click (o doble click sino reacciona), con esto ya lo agregaremos a nuestra ventana, en la ventana cada item que agregamos tiene sus propias propiedades, estos los veremos en el rincon derecho inferior
En estas propiedades podras modificar, la fuente, el tamaño, el nombre que lo va a identificar, el texto que mostraremos en pantalla (dependiendo de si muestra texto o no), en fin todas las caracteristicas de cada uno de los elementos, con esto aclarado vamos a armar una nueva ventana, para ello agregaremos dos label, dos listBox, y un boton (button), los elementos label seran para identificar a que corresponde cada listbox, los listbox seran para mostrar los datos, en uno mostraremos el listado de alumnos y en el otro las notas de cada alumno, el boton sera para salir del programa, una opcion que nos ofrece Visual Studio es que al hacer doble click sobre alguno de los elementos automaticamente nos agregara una funcion realizada a este evento, si hacemos doble click sobre el boton nos generara el siguiente metodo en Forms.cs:
private void button1_Click(object sender, EventArgs e)
{
}Como pueden ver nos relaciono el evento Click con el elemento en cuestion, para este evento le agregaremos el metodo Close facilitandonos la opcion de salir del programa, el metodo quedara de la siguiente manera:
private void button1_Click(object sender, EventArgs e)
{
Close();
}Veamos el siguiente video de como agregar los elementos a nuestra ventana y como modificar sus propiedades
En este video no solamente vemos como se agregan elementos en nuestra ventana (o Form), sino tambien vemos como por medio de Ctrl+C (copiar) y Ctrl+V (pegar) podemos duplicar elementos y Visual Studio se encarga de renombrarlos automaticamente, tambien vemos con que facilidad se puede reacomodar los elementos, tambien como podemos modificar los atributos del elemento a traves de las propiedades y por ultimo como por medio de un doble click nos agrego el metodo para el evento Click sobre este elemento, Button1, al cual le agregamos el metodo Close para poder cerrar esta ventana, al final lo vemos en accion.
Con esto ya tendriamos nuestra interfaz grafica (GUI por sus siglas en ingles) finalizada, antes de continuar con nuestro codigo deberemos hacer una ultima modificacion, esta sera agregar una nueva referencia, en este caso sera el proyecto Alumnos, para eso en nuestro proyecto actual hacen click con el boton derecho sobre referencias y seleccionan Agregar Referencias, nos va a abrir un cuadro donde seleccionaremos la opcion Solucion, en el cual apareceran todos los proyectos miembros de la solucion, para nuestro caso seleccionaremos Alumnos, lo tildamos y le damos Aceptar, para nuestra siguiente modificacion agregaremos entre los using del principio la siguiente linea:
using Alumnos.Clases;Esta linea nos permitira acceder a la clase Inifile que esta almacenada en la carpeta Clases, nuestra siguiente modificacion sera agregar al principio de Form.cs el siguiente objeto:
Inifile config = new Inifile("config.ini");Este sera el objeto que se encargara de cargar la informacion que almacenamos en nuestro archivo config.ini, el cual creamos con la solucion, con esto explicado procedemos a agregar el siguiente metodo:
private void ListaAlumnos()
{
string path = config.mostrar("rutas","alumnos");
using(StreamReader sr = File.OpenText(path))
{
string linea;
string[] s;
while((linea = sr.ReadLine()) != null)
{
s = linea.Split(',');
listBox1.Items.Add(s[0] + " - " + s[2] + ", " + s[1]);
}
}
}Este metodo sera el encargado de cargar la lista de los alumnos en el elemento listBox1, el listado a nuestra izquierda, para ello primero crearemos una variable de tipo string llamada path a la cual le asignaremos el valor por medio del objeto config que creamos de Inifile, despues usaremos el using para que por medio de un StreamReader haremos que abra el archivo que informamos en path, en el bloque creamos una variable de tipo string llamada linea y un array de tipo string llamado s, nuestro siguiente paso sera un bucle que leera linea por linea y cada vez que lea lo asignara a linea y a su vez hara ese bloque mientras el valor de linea sea distinto de null, luego en el while asignaremos a s los valores que obtenemos de linea por medio de Split, despues tenemos esta linea:
listBox1.Items.Add(s[0] + " - " + s[2] + ", " + s[1]);Esta linea se encarga de agregar por cada vuelta un nuevo item al elemento listBox1, para ello primero usaremos a Items para indicarle que usaremos a la coleccion para agregar nuevos elementos y el metodo Add es el encargado de agregar el elemento, para este caso usaremos los tres elementos disponibles, primero el codigo de ID (s[0]), luego el apellido (s[2]) y finalmente el nombre (s[1]), nuestro siguiente paso sera modificar el constructor de la siguiente manera:
public Form1()
{
InitializeComponent();
ListaAlumnos();
}En este caso de manera predeterminada agrega el metodo InitializeComponent, el cual se encarga de mostrar nuestros componentes, lo que nosotros agregamos es el metodo que creamos recien permitiendo que al momento de abrir la ventana se carguen los datos que obtiene
Para nuestra siguiente modificacion, haremos doble click sobre el listBox donde mostramos los alumnos para que nos agregue el evento click para este elemento, nos quedara este metodo:
private void listBox1_SelectedIndexChanged(object sender, EventArgs e)
{
}Pasemos a modificarlo de la siguiente manera:
private void listBox1_SelectedIndexChanged(object sender, EventArgs e)
{
string pathExamenes = config.mostrar("rutas", "examenes");
string pathNotas = config.mostrar("rutas", "notas");
string alumno = listBox1.SelectedItem.ToString();
string[] a = alumno.Split(' ');
string linea, renglon, examen = "";
string[] l, r;
listBox2.Items.Clear();
using (StreamReader sr = File.OpenText(pathNotas))
{
while ((linea = sr.ReadLine()) != null)
{
l = linea.Split(',');
if (l[1] == a[0])
{
using (StreamReader sr2 = File.OpenText(pathExamenes))
{
while ((renglon = sr2.ReadLine()) != null)
{
r = renglon.Split(',');
if (r[0] == l[0])
examen = r[1];
}
}
listBox2.Items.Add(examen + " / Nota: " + l[2]);
}
}
}
}En este metodo, no trabaja realmente sobre el Click, como en el caso del boton, sino cuando cambiemos la seleccion de alguno de los items, veamos el primer bloque:
string pathExamenes = config.mostrar("rutas", "examenes");
string pathNotas = config.mostrar("rutas", "notas");
string alumno = listBox1.SelectedItem.ToString();
string[] a = alumno.Split(' ');
string linea, renglon, examen = "";
string[] l, r;
listBox2.Items.Clear();En este bloque declararemos a la variable pathExamenes y le asignaremos el valor almacenado en config.ini por medio de config, lo mismo hacemos para pathNotas, luego declaramos a alumno y le asignamos el item seleccionado pero como como este tiene varios datos usaremos un Split que nos divida este valor en un array de tipo string y lo asignaremos al array a, luego declaramos tres variables de tipo string llamdas linea, renglon y examen, despues crearemos dos arrays de tipo string llamdas l y r, por ultimo limpiamos el contenido de listBox2, ya veremos porque, veamos el siguiente bloque:
using (StreamReader sr = File.OpenText(pathNotas))
{
while ((linea = sr.ReadLine()) != null)
{
l = linea.Split(',');
if (l[1] == a[0])
{
using (StreamReader sr2 = File.OpenText(pathExamenes))
{
while ((renglon = sr2.ReadLine()) != null)
{
r = renglon.Split(',');
if (r[0] == l[0])
examen = r[1];
}
}
listBox2.Items.Add(examen + " / Nota: " + l[2]);
}
}
}En este caso usaremos a using para que por medio de StreamReader abrimos el archivo que asignamos a pathNotas, primero usaremos un bucle while donde almacenaremos las lineas que vayamos leyendo en el archivo por medio de ReadLine y lo almacenaremos en linea, la condicion del while se cumplira mientras linea sea distinta de null, en el bloque del while usaremos a l para asignarle el Split de linea, despues chequearemos si la segunda posicion de l es igual a la primera posicion en a, la variable que almaceno al alumno, en caso de ser verdadero usaremos nuevamente a using para poder usar nuevamente StreamReader para leer el archivo que informamos en pathExamenes, volvemos a usar un bucle while igual al anterior pero en lugar de usar linea usamos a renglon, esta variable le aplicaremos un Split y lo almacenaremos en r, en este chequearemos si el valor de la primera posicion de r es igual a la primera posicion de l, en caso de ser verdadero asginaremos a examen la segunda posicion de r, este valor es el de la fecha del examen, una vez terminado este bloque asignamos a listBox2 la fecha almacenada en examen y luego la nota del mismo por medio de la tercera posicion de l, con esto concluimos el codigo, veamos como quedo:
Form1.cs
using System;
using System.IO;
using System.Windows.Forms;
using Alumnos.Clases;
namespace AlumnosGUI
{
public partial class Form1 : Form
{
Inifile config = new Inifile("config.ini");
public Form1()
{
InitializeComponent();
ListaAlumnos();
}
private void button1_Click(object sender, EventArgs e)
{
Close();
}
private void ListaAlumnos()
{
string path = config.mostrar("rutas", "alumnos");
using (StreamReader sr = File.OpenText(path))
{
string linea;
string[] s;
while ((linea = sr.ReadLine()) != null)
{
s = linea.Split(',');
listBox1.Items.Add(s[0] + " - " + s[2] + ", " + s[1]);
}
}
}
private void listBox1_SelectedIndexChanged(object sender, EventArgs e)
{
string pathExamenes = config.mostrar("rutas", "examenes");
string pathNotas = config.mostrar("rutas", "notas");
string alumno = listBox1.SelectedItem.ToString();
string[] a = alumno.Split(' ');
string linea, renglon, examen = "";
string[] l, r;
listBox2.Items.Clear();
using (StreamReader sr = File.OpenText(pathNotas))
{
while ((linea = sr.ReadLine()) != null)
{
l = linea.Split(',');
if (l[1] == a[0])
{
using (StreamReader sr2 = File.OpenText(pathExamenes))
{
while ((renglon = sr2.ReadLine()) != null)
{
r = renglon.Split(',');
if (r[0] == l[0])
examen = r[1];
}
}
listBox2.Items.Add(examen + " / Nota: " + l[2]);
}
}
}
}
}
}
Con esto podriamos compilarlo y probar nuestro nuevo programa como se ve en el siguiente video
Nota: Recuerden copiar el config.ini de alguno de los otros proyectos sino va a devolver un error.
En el video primero lo probamos en el modo de desarrollo, vemos como funciona perfectamente, luego vamos a donde se genero el ejecutable lo copiamos a nuestro directorio de «produccion» y con eso ya basto para que pueda trabajar directamente, otra curiosidad es como ahora nos facilito la busqueda de notas de una forma mas eficiente y «monona», esta es lo que nos brindara el trabajar con una interfaz grafica.
En resumen, hoy hemos visto como crear una aplicacion grafica basada en una aplicacion que hicimos antes, hemos visto como se agregan elementos en el Form (o Ventana), hemos visto como se pueden modificar sus propieddes, como se le puede agregar un evento predeterminado y por ultimo vimos como agregr un codigo que nos permite definir las acciones de estos eventos, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.
Tambien podes donar
Es para mantenimiento del sitio, gracias!
$1.00
El blog de Tinchicus 