lunes, 14 de junio de 2010

Hola Mundo (Boa y Gambas)

Hoy vamos a hacer el infaltable Hola Mundo.

Iniciaremos haciéndolo con el Boa Constructor y luego con el Gambas (y así será siempre la dinámica de estos tutoriales)

Para comenzar abrimos el Boa Constructor.
Hacemos clic en el botón de Aplicaciones (wx.App) que se encuentra en la ficha Nuevo. Esto nos abrirá dos fichas en nuestro editor de código (App1 y Frame1)


Ahora haremos clic en el botón Diseñador de Marcos que se encuentra en la barra de herramientas de nuestro editor. Cuando hacemos clic en este botón lo que hace el Boa es mostrar el formulario para su edición, igualmente en el inspector de objetos se cargan las propiedades de este form para que sean editadas.
Podemos comenzar por cambiar el título de nuestra ventana; para eso en el inspector de objetos cambiamos la palabra u'Frame1' de la propiedad Title por el título que quieran.

¿Cómo se hace? Simple. Haces clic en la palabra que vamos a cambiar u'Frame1' y la reemplazamos por que que queremos. Como mi imaginación está hoy en todo su furor le he puesto Saludo.

Para confirmar los cambios (y esto aplica para cualquier acción que hagamos tanto de forma gráfica como con código) debemos hacer clic en el botón "enviar la sesión", botón que se encuentra en la barra de herramientas del Inspector de objetos. Hasta que no hagas clic ahí no se verán reflejados los cambios.
Cuando hacemos clic en este botón se nos vuelve a mostrar el código fuente de nuestro form (en este caso Frame1). Volvemos a visualizar el form haciendo clic en el botón diseñador de marcos.

Ya se debe encontrar reflejado nuestro título en el form del proyecto.

Ahora agregaremos un texto y un botón cuya acción al hacer clic en él nos mostrará el mensaje de Hola Mundo.

Para agregar el texto hacemos clic en la ficha Controles básicos y seleccionamos el icono wx.StaticText, luego hacemos clic en cualquier lugar del form donde queramos ubicarlo. Si te equivocas de icono y sólo te das cuenta cuando lo pegas en el form puedes hacer clic en el botón cancelar sesión que se encuentra a un lado de enviar sesión; si no te has equivocado haz clic en el botón confirmar (enviar sesión). No te preocupes por la ubicación ahora corregimos esa parte.
Seguimos el mismo procedimiento para agregar el botón (wx.Button).

Ya con los dos objetos en nuestro form procedemos a redimensionar nuestro form como lo haríamos con cualquier ventana normal y teniendo ya un tamaño adecuado para éstos vamos a modificar las propiedades de nuestros dos objetos.

Para seleccionar el texto (si no te funciona al hacer clic sobre éste) hacemos clic en la ficha Objs de nuestro inspector donde nos aparecerá la lista de todos nuestros "objetos utilizados", estando allí seleccionamos el objeto en cuestión y hacemos clic en la ficha Constr de nuestro inspector de objetos.

La ficha Constr del inspector de objetos nos permite cambiar las propiedades básicas de nuestros objetos, para este caso vamos a cambiar el Label por la palabra Primer Ejemplo, Name por st_mensaje y la Position por wx.Point(10,10).

Ahora vamos a la ficha Props de nuestro inspector de objetos y hacemos doble clic en la propiedad Font que nos abrirá la ventana selectora de fuentes; allí seleccionamos la fuente y el tamaño que queramos.

Siguiendo el procedimiento anterior modificamos nuestro botón con las siguientes propiedades:
Label: Púlsame
Name: bt_saludar

La fuente y la posición la que quieras.

Por último haz clic en el botón de enviar sesión de ahora en adelante lo llamaremos Confirmar.

Teniendo ya esta parte lista procederemos a programar la acción del botón, para ello volvemos a visualizar nuestro form, seleccionamos nuestro botón y hacemos clic en la ficha Evts del Inspector de objetos. En esta ficha aparecen los posibles eventos asociados al objeto seleccionado.

Para nuestro ejemplo vamos a seleccionar haciendo clic en el evento denominado ButtonEvent. Aparecerá entonces a una lado wx.EVT_BUTTON que disparará nuestro código; si hacemos doble clic en la palabra (módulo) wx.EVT_BUTTON aparecerá en la parte inferior el nombre con que quedará asociado el evento (OnBt_saludarButton), si deseas puedes cambiar el nombre del evento haciendo clic en el nombre por defecto y luego puedes seleccionar Renombrar o borrar si es del caso. Clic en el botón Confirmar.

Cuando hacemos clic en le botón confirmar se nos abrirá el código fuente de nuestro Form (Frame1). Buscamos en este código el evento que se ha creado y allí digitamos los siguiente:

def OnBt_saludarButton(self, event):
mensaje = wx.MessageDialog(self,'Hola Mundo','Saludar',wx.OK);
mensaje.ShowModal()
mensaje.Destroy()
event.Skip()

Guardamos haciendo clic en el botón guardar de la barra de herramientas de nuestro editor, esto guardará nuestro Frame1 (puedes colocar el nombre que quieras), luego hacemos clic en la ficha App1 y lo guardamos también (puedes colocarle el nombre que quieras, este es el form principal que cargará nuestros demás forms).

Teniendo ya guardados nuestro Form y nuestra Main hacemos clic en el botón ejecutar aplicación (debe estar seleccionada la ficha del Main (App1), esto hará que se ejecute nuestro programa; ahora haz clic en el botón y se debe mostrar una pequeña ventana con nuestro esperado mensaje.




Para crear este mismo proyecto en Gambas procedemos abriendo el programa y haciendo clic en el botón Nuevo Proyecto; esto abrirá una nueva ventana donde nos muestran diferentes opciones de la cual (y por ahora) solo seleccionaremos la opción Aplicación gráfica, clic en el botón siguiente, seleccionamos la ubicación y carpeta donde quedrá almacenado nuestro primer proyecto.
Clic nuevamente en el botón siguiente para darle un Nombre a nuestro proyecto y un Título. Yo le he puesto como Nombre "Saludo" y como Título "Nuestro Primer Programa". Clic en el botón Ok.

Al hacer clic en el botón Ok se abirá el Gambas, normalmente lo primero que muestra es el consejo del día, te sugiero que no lo deshabilites, clic en el botón Cerrar.

En el Administrador de proyectos (Saludo) en la carpeta Formulario observamos el FMain (menú principal/inicial) doble clic en él.

Cuando hacemos doble clic en el Fmain no solo se carga el formulario sino también todas sus propiedades, vamos a proceder cambiando las siguientes propiedades a estos valores:

Text: Saludo

Vamos a agregar un label, para ello hacemos clic en el icono Label de nuestra caja de herramientas,
luego dibujamos un pequeño rectángulo en nuestro form para que aparezca nuestra etiqueta; procedemos de igual forma con el Button.
Debemos tener algo parecido a esto:
Vamos a proceder a cambiar las propiedades de la etiqueta; para ello hacemos clic en ella para seleccionarla y que sean cargadas sus propiedades. Una vez seleccionada la mueves (clic sostenido) hasta el lugar donde quieras ubicarla y en la ventana de propiedades hacemos los siguientes cambios:

(Name): st_mensaje
Font: (cambia el tamaño y la fuente, la que quieras)
Text: Primer Ejemplo

Para el botón procedemos a cambiar las siguientes propiedades:
(Name): bt_saludar
Text: Púlsame

Para agregar el código que mostrará el mensaje al pulsar el botón debemos hacer doble clic en dicho botón. Una vez hacemos doble clic en el botón se nos abrirá la ficha de edición de código ubicándonos el cursor en el evento en cuestión (para este caso: bt_saludar_Click()) que toma el nombre que le hemos dado al objeto seguido de la acción Click(); estando ubicados allí digitamos la siguiente instrucción:

PUBLIC SUB bt_saludar_Click()

Message.Info("Hola Mundo")

END

Para ejecutar nuestro programa podemos hacer clic en el botón ejecutar de la barra de herramientas o presionar la tecla F5.
Si desean volver al formulario pueden hacer clic en la ficha Fmain.form o doble clic en Fmail que se encuentra bajo la carpeta Formularios del administrador de proyectos.

Si ejecutamos nuestro programa obtendremos algo como esto:

Espero las sugerencias, ah! y los clics que aún no los veo :)