Hola mundo en entorno visual con Visual C++

abr 06, 2010 en Entorno Visual por En este artculo enseo los conceptos bsicos a todos los que quieran comenzar a desarrollar aplicaciones de entorno visual en C++ con Visual Studio.

En este artculo no pretendo ensearte a programar en C++ sino mostrarte como utilizar el Visual Studio para crear aplicaciones de entorno visual. En el ejemplo que realizar en este artculo pretendo cubrir lo siguiente: Entorno de Visual Studio Creando un proyecto de entorno visual Agregar componentes al formulario Propiedades Cdigo detrs del formulario Eventos

Entorno de Visual Studio

El Visual Studio debera verse algo as:

Para hacer aplicaciones de entorno visual deberas asegurarte de tener por lo menos las siguientes ventanas abiertas: Solution explorer (muestra los archivos del proyecto), el Toolbox (muestra los componentes a agregar a tu formulario), los Properties (muestran las propiedades de los diferentes componentes que utilices). Si no ves alguna de estas ventanas, puedes mostrarlas desde el men View. Adems si deseas puedes arrastrar estas ventanas y reubicarlas dentro de Visual Studio para que se acomode mejor a tus necesidades.

Creando un proyecto de entorno visual

El siguiente paso es crear el proyecto de entorno visual. Para ello necesitas Seleccionar la opcin del men File > New > Proyect con lo cual se abrir la siguiente ventana:

En esta ventana, debes seleccionar en la parte izquierda el Lenguaje Visual C++ y en la parte derecha el tipo de aplicacin Windows Forms Application (entorno visual). En la parte inferior asegrate de colocar el nombre de tu proyecto y la ubicacin dnde deseas que se guarde. Adicionalmente puedes especificar el nombre de la solucin (una solucin puede contener a varios proyectos) pero por lo general podemos llamarla igual a nuestro proyecto. Presiona OK para crear el proyecto. Ahora deberas ver la siguiente ventana:

Ahora, en la parte central puedes ver que ha aparecido un formulario. En este formulario colocaremos los componentes que usaremos en nuestro programa. Adems puedes notar como ahora las ventanas Solution Explorer, Toolbox y Properties tienen el contenido respectivo. En el Solution Explorer puedes ver que se han creado una serie de archivos y aqu te explico brevemente que contiene cada uno de ellos: Archivo Form1.h Descripcin Contiene el cdigo del formulario que se est mostrando actualmente en pantalla. Por lo general, vamos a codificar en este archivo. Este es un archivo de recursos. Actualmente est vaco pero puede contener informacin resource.h acerca de conos, imgenes, videos etc. Actualmente lo utiliza el archivo app.rc as que no lo borres. stdafx.h Es un archivo de cabecera precompilado donde podrs agregar todos los includes que utilices frecuentemente y as no agregarlos en cada una de tus clases. Es el cono de tu aplicacin, es decir, el cono que se le colocar al ejecutable que se generar al momento de compilar el proyecto. Contiene informacin acerca de los recursos utilizados en tu proyecto como por ejemplo imgenes, videos, conos, etc. Contiene informacin acerca de la aplicacin. Como por ejemplo versin, descripcin, ttulo, copyright, etc. Este archivo (llamado igual que tu proyecto) es el que contiene a la funcin main. Esta funcin main es la encargada de ejecutar la aplicacin de entorno visual comenzando por tu

app.ico

app.rc

AssemblyInfo.cpp

HolaMundo.cpp

Archivo

Descripcin formulario 1. Por lo general, no ser necesario modificar esta funcin.

stdafx.cpp Readme.txt

Este archivo es parecido al stdafx.h pero en lugar de agregar cabeceras puedes agregar funciones que utilizars frecuentemente. Simplemente contiene informacin acerca de los archivos creados.

Ejecutando el programa
Ahora prueba ejecutando el programa. Puedes utilizar el atajo de teclado F5 o puedes presionar el botn con una flecha verde (play) en la barra superior. Mientras tu programa est en ejecucin no podrs modificar el cdigo del programa. Cuando termines de probar el programa cierra la ventana para regresar al editor de Visual Studio.

Si en algn momento existieran errores de compilacin, estos aparecern en la barra inferior del Visual Studio, corrgelos y prueba ejecutando el programa nuevamente. Importante!! Dependiendo de la configuracin de tu Visual Studio, al momento de ejecutar una aplicacin te pueden aparecer uno o dos mensajes. LEELOS Y ENTINDELOS, no simplemente presiones OK ya que podras estar intentando ejecutar un programa que no funciona.

Agregar componentes al formulario

En la ventana Toolbox, puedes encontrar una serie de componentes que puedes utilizar en tus programas. Estos componentes estn agrupados en paletas para que sea ms fcil acceder a ellos. En este artculo no pretendo ensearte todos los componentes, ya depende de t experimentar con cada uno de ellos para entender que hacen y como trabajan. Para agregar un componente al formulario basta con seleccionarlo en el toolbox y luego hacer clic en el formulario. Una vez colocado, puedes cambiar su tamao con simplemente seleccionarlo y arrastrar alguno de sus bordes. Prueba agregando un componente de tipo TextBox, 5 botones y un componente de tipo ListBox al formulario y ordenndolos de la siguiente forma:

Si

quieres,

prueba

agregando

ms

componentes al formulario. Puedes utilizar componentes de tipo Panel para agrupar a otros componentes. Simplemente coloca un Panel y coloca componentes dentro de l, de esta forma podrs mover el panel y automticamente se movern todos los componentes que estn dentro de l.

Propiedades
Ahora es necesario que podamos modificar algunas de las propiedades de los componentes, como por ejemplo el color, tipo de letra, etc. Para modificar un componente en particular simplemente seleccinalo en la ventana del formulario y modifica los valores que aparecen en la ventana Properties. Las propiedades ms importantes que voy a modificar son: (Name) que representa el nombre que se utilizar para identificar al componente con cdigo y la propiedad Text que representa el texto que deseamos que aparezca en el componente.

Prueba jugando con las propiedades para que te acostumbres a ella y tengas una idea de todo lo que puedes cambiar. Ahora modifica las propiedades (Name) y Text de los componentes que has agregado para que se llamen as: Componente TextBox Button Button Button Button ListBox Button (Name) txtValor btnAgregar btnColor btnVentana btnTransformar lbValores btnSalir Text vacio Agregar Color Ventana Transformar (no tiene esta propiedad) Salir

El formulario ahora se debera ver as:

Cdigo detrs del formulario

Hasta este momento solo hemos utilizado la interfaz visual para agregar componentes al formulario. Ahora veamos que sucede detrs del mismo, es decir, el cdigo. Para ver el cdigo del formulario haz clic derecho sobre el formulario y selecciona la opcin View Code o selecciona la opcin del menu View > Code. A simple vista, el cdigo puede parecer bastante complejo pero voy a tratar de que lo entiendas. La estructura bsica es la siguiente: 01 #pragma once 02 // Includes 03 04 namespace HolaMundo { 05 06 07 08 09 10 11 12 13 14 15 16 17 18 protected: ~Form1() { public ref class Form1 : public System::Windows::Forms::Form { public: Form1(void) { InitializeComponent(); } using namespace System; // Otros nombres de espacio

19 20 21 22 23 24 25 26 27 28 29 30 31 32 } }; }

if (components) { delete components; }

private: System::Windows::Forms::TextBox^ // El resto de componentes

txtValor;

#pragma region Windows Form Designer generated code // Cdigo autogenerado #pragma endregion

El cdigo comienza con una directiva de compilacin #pragma once. Debajo de esta directiva debers colocar todos los includes que desees utilizar como por ejemplo #include <stdlib.h>. Luego viene el nombre de espacio (namespace) que agrupa todo el resto del cdigo. Al inicio del namespace estn todos using namespace que son ms o menos como los includes de .NET Framework. Luego sigue una clase llamada Form1 que hereda del formulario de .NET. Esta clase agrupa a todo el resto del contenido y aqu es dnde debers agregar nueva funcionalidad. La clase Form1 tiene un constructor y un destructor Form1 y ~Form1 respectivamente. El constructor llama al mtodo autogenerado llamado InitializeComponent y el destructor se encarga de eliminar los componentes creados. Luego sigue la declaracin de todas las variables necesarias para manipular los componentes agregados en el formulario. Aqu podrs ver como se a agregado un atributo para cada componente que colocamos en la seccin anterior. Estos atributos tienen el mismo nombre que el que colocaste en la propiedad (Name). Por ltimo hay una regin con cdigo autogenerado. El cdigo de esta funcin se modifica de forma automtica cada vez que modificas alguna propiedad desde la parte visual o cuando agregas un nuevo componente. Todo el cdigo que ves hasta el momento es autogenerado y no deberas modificarlo directamente. Si quieres cambiar algn valor te recomiendo que lo hagas desde la parte visual mediante la modificacin de las propiedades.

Eventos
Si no has trabajado con aplicaciones de entorno visual, los eventos son un tema nuevo. En programas en C++ normales, las instrucciones se ejecutan de forma secuencial, sin embargo,

en una aplicacin de entorno visual, el cdigo se ejecuta cada vez que ocurre un evento. Por ejemplo, el programa se ejecutar mostrando el formulario y solamente al presionar algn botn algo pasar. El acto de presionar un botn genera un evento llamado Clic que responder a dicho evento haciendo algo particular. Cada componente que agregamos a un formulario, e inclusive el mismo formulario tiene una lista de eventos asociados que podemos programar. Para ver la lista de eventos regresa a la parte visual, selecciona uno de los componentes y en la ventana de propiedades haz clic sobre el cono del rayo.

Ahora podrs ver todos los eventos que ofrece dicho componente. Para programar uno de los eventos simplemente necesitas hacer doble clic sobre el evento que deseas programar.

El evento clic del botn agregar

En este ejemplo, vamos a programar el evento clic del botn agregar para que al presionarlo, el texto que se ha ingresado en el TextBox se adicione a la lista del ListBox. Selecciona el botn Agregar. Haz doble clic sobre el evento Click que aparece en la ventana de Properties (eventos). Automticamente se crear una nueva funcin en el cdigo del formulario donde podemos programar lo que queremos que se haga al hacer clic sobre este botn. La funcin se ver como la siguiente: 1 private: System::Void btnAgregar_Click(System::Object^ System::EventArgs^ e) sender,

2{ 3} Ahora, vamos a programar este evento: private: System::Void btnAgregar_Click(System::Object^ System::EventArgs^ e) 02 { 01 03 04 05 06 07 08 09 10 11 12 } } if (txtValor->Text == "") { MessageBox::Show("Debes ingresar el texto a agregar"); } else { lbValores->Items->Add( txtValor->Text ); txtValor->Text = ""; sender,

En esta funcin primero verificamos si se ha ingresado texto en el TextBox. Si no es el caso entonces mostramos un mensaje al usuario indicando que se ha producido un error. En caso contrario, agregamos un nuevo elemento al ListBox con el texto ingresado y luego limpiamos el texto. Prueba ejecutando tu programa y presionando el botn Agregar varias veces. Modifica el texto y presiona Agregar, inclusive elimina el texto y presiona Agregar para que veas que sucede.

El evento clic del botn Color

En este botn vamos a cambiar el color del formulario por uno aleatorio cada vez que se presione. Programa el evento clic de este botn igual como lo hiciste en botn agregar. El cdigo es el siguiente: private: System::Void btnColor_Click(System::Object^ System::EventArgs^ e) 2{ 1 3 Random ^rand = gcnew Random(); BackColor = Color::FromArgb(rand->Next(255), rand4 >Next(255), rand->Next(255)); 5} En la primera lnea de esta funcin estoy creando un objeto de la clase Random que pertenece a .NET y permite generar nmeros aleatorios. Como puedes notar, este objeto utiliza un puntero ^ en lugar del puntero * utilizado normalmente en C++. Adems se crea el objeto usando el comando gcnew en lugar del comando new. Este tipo de creacin de objetos y punteros es diferente debido a que .NET ofrece clases de tipo Managed, es decir, controladas por el framework. Todas las clases del .NET Framework se deben utilizar de esta forma, pero el concepto de puntero y objeto es el mismo. La nica gran diferencia es que al utilizar gcnew se sender,

est utilizando el Garbage Collector que se encargar de eliminar el objeto de forma automtica as que no es necesario utilizar el comando delete para limpiar la memoria. En la segunda lnea se le est asignando un nuevo valor a la propiedad BackColor (color de fondo) a partir de valores aleatorios RGB (Red, Green, Blue). Con el comando RGB se puede generar un color aleatorio si es que se especifica un valor aleatorio entre 0 y 255 para la cantidad de rojo, verde y azul del color. Prueba ejecutando el programa y presionando el botn Color varias veces para que el color del formulario cambie cada vez.

El evento clic del botn Ventana

En este botn te voy a ensear como crear componentes dinmicos. En particular como crear nuevas ventanas y agregarles componentes. Configura el evento clic de este botn y coloca el siguiente cdigo: private: System::Void btnVentana_Click(System::Object^ System::EventArgs^ e) 02 { 01 03 04 05 06 07 08 09 10 11 12 13 14 } frm->Show(); btn->Text = "Copstone"; btn->Left = 50; btn->Top = 40; btn->Parent = frm; frm->Text = DateTime::Now.ToLongTimeString(); Form ^frm = gcnew Form(); Button ^btn = gcnew Button(); sender,

En las primeras dos lneas creo un componente de tipo formulario (Form) y un componente de tipo botn (Button). Luego coloco el texto del formulario creado con la hora actual. Despus configuro el botn (Texto, posicin izquierda y arriba). La ltima configuracin del botn es la ms importante ya que le digo que el padre sea el formulario creado, de esta forma aparecer dentro de este nuevo formulario. Por ltimo llamo al mtodo Show del formulario para que este se muestre. Prueba tu programa y cada vez que apretes este botn se mostrar una nueva ventana con la hora en la que presionaste el botn y con un botn con el texto Copstone dentro de l.

El evento clic del botn Transformar

En este botn te voy a ensear a realizar conversiones de tipos de datos. Lo primero que tienes que tener en cuenta es que todo lo que se ingresa en un textbox es siempre texto. No importa si escribes un nmero ya que este siempre se considerar como texto. Lo que tenemos que hacer con el texto ingresado es convertirlo en un entero y luego utilizarlo. Para convertir el nmero a un entero puedes utilizar el comando Int32::Parse que recibe como parmetro la cadena a convertir y devuelve el nmero entero (Esta funcin falla si la cadena no tiene un nmero entero vlido). O tambin puedes utilizar la clase esttica Convert que ofrece una serie de mtodos para realizar conversiones entre distintos tipos de datos (Esta funcin tambin falla si la cadena no tiene un nmero entero vlido). El cdigo de este evento es el siguiente:
view sourceprint?

private: System::Void btnTransformar_Click(System::Object^ System::EventArgs^ e) 2{ 1 3 4 5 6 7 8 9} int num = Convert::ToInt32(txtValor->Text); for (int i=0; i<num; i++) { lbValores->Items->Add(i.ToString()); } txtValor->Text = "";

sender,

En la primera lnea convierto el texto ingresado en un nmero (debera haber una validacin pero no la voy a colocar aqu para no complicar el cdigo). Luego, hago un bucle desde 0 hasta el nmero ingresado y agrego los nmeros al ListBox. Si te das cuenta el valor entero de la variable i la convierto a cadena usando el mtodo ToString. Por ltimo limpio la casilla de texto.

Conclusin
Espero que este artculo te sirva para iniciarte en la programacin de aplicaciones de entorno visual en Visual Studio C++. Ten en cuenta que mientras ms pruebes y ms te equivoques ms rpido vas a aprender. Si en caso necesitas hacer una pregunta puntual sobre algo que no te sale o quieres aprender a hacer no dudes en escribir un comentario en este artculo.