Programación Visual conProgramación Visual con

GambasGambas

1

Juan Matías OlmosJuan Matías Olmos20102010

CAPITULO IProgramación y Lenguajes de Programación

Un programa informático es un conjunto de instrucciones que una vez ejecutadas realizarán una o varias tareas en una computadora. Al conjunto general de programas se le denomina software, y así se refiere al equipamiento lógico o soporte lógico de una computadora digital.

La programación es un proceso por el cual se escribe, se prueba, se depura, se compila y se mantiene el código fuente de un programa informático.

Un lenguajes de programación es un conjunto de símbolos y reglas sintácticas y semánticas que definen su estructura y el significados de sus elementos y expresiones. Es la forma en que el hombre se comunica con la máquina para realizar una determinada tarea.

Al conjunto de líneas de texto que describen por completo el funcionamiento de un programa se conoce como código fuente, y es este texto lo que escribe un programador en algún lenguaje de programación para resolver cierto problema.

Así como existen diversos lenguajes, también hay distintas formas de programar una aplicación, a lo que le llamamos paradigmas de programación. Un paradigma representa un enfoque particular o filosofía para la construcción del software. Cada paradigma tiene sus ventajas y desventajas, y dependiendo de la clase de problema a resolver, uno de ellos puede ser más adecuado que otro.

La programación imperativa (también conocida como programación secuencial) es un paradigma de programación que describe la programación en términos del estado del programa y sentencias que cambian dicho estado. Se desarrolla de forma ordenada, cada línea de código se ejecuta una por una. Algunos lenguajes que se utilizan para este tipo de programación son Ensamblador, Fortran, Cobol y Basic, entre otros.

Otro paradigma de programación común es la programación orientada a eventos, en la que tanto la estructura como la ejecución de los programas van determinados por los sucesos que ocurran en el sistema, definidos por el usuario o que ellos mismos provoquen. Se deben definir los eventos que manejarán el programa y las acciones que se realizarán al producirse cada unos de ellos, lo que se conoce como el administrador de evento. Al comenzar la ejecución del programa se llevarán a cabo las inicializaciones y demás código inicial y a continuación el programa quedará a la espera de alguna acción del usuario o del sistema, es decir, de un evento. El mejor ejemplo de este tipo de sistema es Visual Basic, el primo privativo de Gambas.

Actualmente, el paradigma de programación más usado debido a múltiples ventajas respecto a los demás, es la programación orienta a objetos o POO (OOP según sus siglas en inglés). Donde el elemento fundamental es el objeto, ya que se basa en la idea natural de la existencia de un mundo lleno de objetos, entre los cuales se definen sus interacciones para llevar a cabo una tarea. Su uso se popularizó a principios de la década de los años 1990. Entre sus principales características están la herencia, abstracción, polimorfismo y encapsulamiento; y sus ventajas claves son la reusabilidad y extensibilidad.

2

Programación Orientada a Objetos

Entre los conceptos fundamentales de la programación orientada a objetos se destacan:

1. Clase: definiciones de las propiedades y comportamiento de un tipo de objeto concreto. La instancia es la lectura de estas definiciones y la creación de un objeto a partir de ellas.

2. Objeto: entidad provista de un conjunto de datos o atributos (propiedades) y de comportamiento o funcionalidad (métodos), los mismo que consecuentemente reaccionan a eventos. Es una instancia de una clase.

3. Propiedad (o atributo): contenedor de un tipo de dato asociado a un objeto (o a una clase de objetos) y lo define. El acceso a ellos se hace a través de los métodos del mismo objeto.

4. Método: algoritmo asociado a un objeto (o a una clase de objetos), normalmente empleado para modificar las propiedades del mismo objeto. Desde el punto de vista del comportamiento, es lo que el objeto puede hacer.

5. Evento: Es un suceso en el sistema (tal como una interacción del usuario con la máquina, o un mensaje enviado por un objeto). El sistema maneja el evento enviando el mensaje adecuado al objeto pertinente.

6. Instancia: cada objeto es creado a partir de una clase, se dice que tal objeto es una instancia de esa clase. Entonces, crear una instancia de una clase se conoce como instanciar la clase.

Existe un acuerdo acerca de qué características contempla la orientación a objetos, las más importantes son:

1. Abstracción: es la propiedad que permite representar las características esenciales de un objeto, sin preocuparse de las demás (no esenciales). Definir una abstracción significa tomar la mejor descripción de una entidad del mundo real y utilizarla en un programa.

2. Encapsulamiento: el objeto es considerado una cápsula, debe responder a peticiones a través de sus métodos sin la necesidad de exponer los medios utilizados para llegar a brindar sus resultados. Esta cualidad deriva en una de las ventajas de la POO, la reusabilidad de objetos.

3. Polimorfismo: es la capacidad del lenguaje para referirse a un método común a varios objetos de diferentes clases (por ejemplo, objetos de diferentes subclases derivadas de una clase base) llamándolo con el mismo nombre.

4. Herencia: es la facilidad mediante la cual una clase hereda cada unos de las propiedades y métodos de otra clase, como si esas propiedades y métodos hubiesen sido definidos por la primer clase.

3

Introducción a Gambas

Gambas fue inicialmente creado por Benoît Minisini, es un ambiente libre de desarrollo en Linux basado en un intérprete Basic con extensiones de objetos, parecido a Visual Basic de Windows (pero es importante aclarar que NO es un clon).

Gambas es un entorno de desarrollo que se distribuye con la licencia GNU GPL (General Public Licence), conocida en español como Licencia Pública General de GNU, con lo cual el proyecto de Minisini ganó mucha popularidad.

Los programas de computadora suelen distribuirse con licencias propietarias o cerradas, éstas son intransferibles y no exclusivas, es decir, no eres propietario del programa, sólo tienes derecho a usarlo en un ordenador o tantos como permita expresamente la licencia y no puedes modificar el programa ni distribuirlo.

La licencia GPL, desarrollada por la FSF, o Free Software Foundation (Fundación para el Software Libre), es todo lo contrario. Define la libertad de los usuarios sobre su producto adquirido y, por lo tanto, una vez obtenido puede ser usado, copiado, estudiado, cambiado y redistribuido con o sin modificaciones libremente. Sin embargo, no es obligatorio que el software libre sea siempre gratuito (freeware), ya que también puede ser distribuido comercialmente.

Esto significa que un software es libre si garantiza las siguientes libertades:• Libertad 0: La libertad de usar el programa con cualquier propósito.• Libertad 1: La libertad de estudiar cómo funciona el programa y modificarlo,

adaptándolo a las propias necesidades.• Libertad 2: La libertad de distribuir copias del programa, con lo cual puedes ayudar a tu

prójimo.• Libertad 3: La libertad de mejorar el programa y hacer públicas las mejoras a los demás,

de modo que toda la comunidad se beneficie.

Las libertades 1 y 3 implican que se tenga acceso al código fuente para poder estudiarlo y modificarlo.

4

El lenguaje está creado para soportar los gestores de ventanas más comunes, como lo son Gnome y KDE. Esto significa que una aplicación puede ser compilada para ser ejecutada en los diferentes escritorios sin tener que modificar el código fuente, más bien habría que elegir las librerías propias de ese escritorio y el programa se comportará como una aplicación nativa de ese entorno. Es una característica única entre los entonces de programación para Linux. La versión estable actual (al momento de la edición de este texto) es la versión 2.21.0, liberada el 24 de Julio de 2010, agregando soporte para ArchLinux. Mientras que para Microsoft Windows o Mac, la portabilidad está aún en desarrollo.

Arquitectura de Gambas

Cada programa escrito en Basic Gambas está compuesto por un conjunto de archivos que forman un proyecto. Cada archivo en el proyecto describe una clase. Estos archivos de clases se compilan inicialmente y a continuación son ejecutados por el intérprete de Gambas. Esto se parece mucho a Java, justamente, es el lenguaje sobre el que también se ha inspirado Minisini. Los componentes necesarios para el desarrollo con Gambas son los siguientes:

✔ Un compilador, un pequeño ejecutable capaz de transformar todo el código fuente y archivos que formen parte del proyecto hecho en Gambas, en un programa ejecutable.

✔ Un intérprete, encargado de hacer que los programas hechos en Gambas sean ejecutados por el sistema operativo.

✔ Un entorno de desarrollo, que facilite la programación y diseño de las interfaces gráficas de los programas.

✔ Componentes que agregan funcionalidades al lenguaje. Son librerías específicas que permiten extender las posibilidades del lenguaje, por ejemplo, para el uso de SDL, OpenGL, ODBC, conexiones de red, etc. Todos estos componentes son desarrollados por diferentes programadores que aportan al proyecto de Gambas.

En resumen, gracias al estilo de programación, que toma lo mejor del lenguaje Basic y al cual se le agregó programación orientada a objetos, permitió a Gambas ganar rápidamente mucha popularidad, modernidad, estabilidad y portabilidad entre los desarrolladores de Linux.

Instalando Gambas

Como habíamos dicho anteriormente, la última versión estable disponible desde la página web oficial de Gambas es la versión 2.21.0, mientras que la versión de desarrollo es la 3.0. En dicho sitio se explican con detalle la instalación de ambas versiones a partir del código fuente, la dirección es http://gambas.sourceforge.net/en/main.html.

La solución más rápida y eficiente para el principiante de Linux es recurrir al Gestor de Programas de tu distribución Linux. Por ejemplo, para Linux Mint 9, en el repositorio podemos encontrar la versión 2.19.0 de Gambas, aceptada como estable en los repositorios oficiales de dicha distribución.

5

Desde el Gestor de Programas de Linux Mint 9, solo tenemos que seleccionar la aplicación y presionar el botón de instalación. De la misma forma se puede desinstalar muy fácilmente.

Luego tendremos el acceso a Gambas desde el Menú Programación Gambas2 (Gambas→ → almost means Basic) como se puede ver en la siguiente figura.

6

El Entorno de Programación de Gambas

Esta imagen es la pantalla de presentación del Entorno de Desarrollo Integrado de Gambas. Como se puede ver, lo primero es determinar sobre qué proyecto trabajaremos. Como primera opción podemos crear un nuevo proyecto (o aplicación), podemos abrir un proyecto ya existente desde una ubicación del disco duro, podemos elegir uno de los proyectos usados recientemente, o podemos abrir uno de los tantos ejemplos incluidos en la ayuda de Gambas. Si prefieres comenzar más tarde, tienes el botón para salir.

Los ejemplos están clasificados por categorías, en el transcurso de este texto revisaremos algunos de ellos. Para acceder a ellos entonces elegimos la opción Ejemplos.

7

En la instalación de Gambas, se crea una carpeta en el Home del usuario, en este caso es /home/matias/Gambas2. En esta carpeta se guardan todos los archivos que utilices en tu proyecto, y cada proyecto tiene su propia carpeta, cuyo nombre es el nombre que le pongas al proyecto cuando creas uno. En el caso que estés copiando un proyecto desde otra computadora o descargando de Internet, solo tienes que copiar esa carpeta en el directorio Gambas2. Luego eliges la opción Abrir proyecto... en la pantalla de bienvenida de Gambas y verás cada uno de tus proyectos, pero no como carpetas, más bien se ven como un archivo común que contiene tu proyecto. Con una imagen lo entenderás mejor.

8

Para ver un primer ejemplo, seleccionaremos la opción Nuevo proyecto..., nos aparecerá la siguiente ventana.

Simplemente seleccionamos la primera opción Aplicación gráfica para crear un formulario, y presionamos el botón Siguiente. A continuación, el asistente nos preguntará qué directorio usar para guardar el proyecto, por defecto estará seleccionada la carpeta mencionada Gambas2, pero podemos elegir otra, o bien crear una nueva.

Esta pantalla nos brinda el botón Agregar, con el cual podemos crear un acceso directo a la carpeta actualmente seleccionada que será ubicado en la lista de la izquierda, debajo de Home, Escritorio y Sistema. Dejamos seleccionada la carpeta Gambas2 y presionamos Siguiente.

9

En la siguiente ventana de diálogo se requiere ingresar un nombre y un título para el proyecto. Recuerda el nombre del proyecto no puede contener el carácter ESPACIO y la carpeta del proyecto tendrá este mismo nombre. Entonces escribimos primerProyecto como nombre y Mi primer proyecto como título del proyecto. Luego presionamos Ok para finalizar el asiste, se nos confirmará que el proyecto ha sido creado.

Ahora se nos presentará la Entorno Integrado de Desarrollo de Gambas (IDE, Integrated Development Environment), el cual presenta varios componentes. Ahora, al igual que cada vez que abramos el IDE veremos una ventana que nos brindará un consejo, es una breve nota sobre un caso particular del uso del lenguaje, la cual cambiará cada vez. En caso que lo desees, puedes usar los botones Previo y Siguiente para ver los diferentes consejos, puedes evitar que se abra esta ventana quitando la marca en el opción Mostrar consejos al inicio. Luego cerramos la nota con el botón Cerrar.

10

En el resto del capítulo usaremos en ejemplo para ir mostrando las capacidades que nos brinda este entorno de programación, la idea es crear una ventana como la siguiente.

Componentes del IDE de Gambas

Una vez que estemos en el IDE, haremos doble click sobre Fmain en la ventana del lado izquierdo, con esto podremos ver nuestro formulario y componentes para diseñarlo como podemos ver a continuación.

El primer cuadro de la izquierda es el Explorador de Proyecto, la principal ventana del entorno. Nos muestra un árbol de directorios con todos los tipos de archivos del proyecto (archivos de clases, formularios, módulos y otros tipos de archivos como imágenes, iconos o datos). Inmediatamente arriba tenemos la Barra de Herramientas con las principales funciones. Como ser crear un proyecto nuevo, abrir otro o guardarlo; crear ejecutable, correrlo, depurarlo; ver u ocultar los elementos del IDE, etc. Sobre la barra de herramientas tenemos la Barra de Menú, que no da acceso a todas las características del entorno a través de sus menús desplegables.

Volviendo al explorador de proyecto, podemos ver que la raíz del árbol es el nombre del proyecto, en nuestro caso primerProyecto. De la raíz salen cuatro ramas que describimos a continuación:

11

Clases: Nos mostrará todo los archivos de clases que tengamos en el proyecto. Básicamente son modelos que pueden ser usados para crear objetos en tiempo de ejecución, con código para definir las propiedades, métodos y controladores de eventos de cada uno de los objetos que se creen.

Módulos: Nos mostrará los módulos escritos para el proyecto. Estos módulos son un conjunto de subrutinas o funciones que suelen utilizarse varias veces desde el programa principal. No se pueden crear objetos con ellos, y por lo tanto, no tienen controladores de eventos.

Formularios: Presenta todos los formularios que hayamos diseñado. Son las ventanas con las que el usuario puede interactuar, las cuales las diseñamos insertándole objetos como cuadros de texto, botones, casillas de verificación, listas, etc.

Datos: Presenta los demás archivos que usemos en el proyecto, como ser imágenes, iconos, texto, archivos HTML, música, etc.

Justo debajo del explorador de proyecto hay un pequeño espacio vacío llamada Barra de Estado, en la cual veremos luego que nos indicará si Gambas está realizando alguna operación, por ejemplo Compilando proyecto primerProyecto..., durante unos segundos cuando iniciemos la ejecución del proyecto.

En la zona central del IDE tenemos el Diseñador de Formulario, el cual contiene la apariencia del formulario que estamos diseñando, sobre el cual arrastraremos y soltaremos los componentes gráficos. De aquí sale la principal ventaja de la programación visual, donde podemos rápidamente crear la interfaz del usuario y tenerla lista antes de escribir cualquier código para definir las operaciones de la aplicación.

Al hacer doble click sobre el formulario, o alguno de los controles que agregues, se mostrará en la misma región el Editor de Código, donde escribiremos el código necesario para cada uno de los controles que agreguemos al formulario y que determinará el comportamiento de ellos. Como podrás notar durante la creación de este primer proyecto, el editor de código tiene importantes características que facilitan la codificación y depuración. Algunas de esas características son Auto-completado de Código, Resaltado de Sintaxis, Buscar y Reemplazar.

Sobre el costado derecho del IDE tenemos dos componentes importantes para el diseño de los formularios. En la mitad superior tenemos el Visor de Propiedades, donde podemos ver todas las características del formulario o del control que tengamos seleccionado es ese momento. Con el mismo visor de propiedades podemos modificar esas características para conseguir que los controles se ajusten en apariencia según nuestras necesidades. En la mitad inferior tenemos la Caja de Herramientas, la que contiene todos los elementos gráficos que podemos programar en Gambas, los cuales ya fuimos mencionando y son prácticamente todos los elementos GUI disponibles en Linux (botones, cuadro de textos, etiquetas, etc). Desde esta caja podemos obtener los controles para arrastrarlos al formulario.

Volviendo a las barra de menús y botones, con ello controlamos todas las tareas principales del IDE. La versión actual tiene 6 menús que se muestran a continuación.

12

El menú Archivo con permite crear un proyecto nuevo, abrir uno desde el disco, guardar, ver algún ejemplo o salir de Gambas. El menú Proyecto nos habilita para definir las propiedades del proyecto y compilarlo para crear un ejecutable, archivo fuente, o paquete de instalación. Con el menú Depuración podemos controlar las interrupciones en la ejecución del programa, ejecutar linea por linea, etc. Con el menú Vista podemos ocultar o hacer visibles cada unos de los componentes del IDE. Desde el menú Herramientas tenemos acceso al Gestor de Bases de Datos, las Preferencias respecto al IDE y otras más. Finalmente, desde el menú ? (Ayuda) podemos acceder a la documentación que se instala junto con el entorno.La Barra de Herramientas nos brinda acceso rápido a las funciones de más uso. Dejando el puntero del mouse sobre los botones nos aparecerá un cuadrito con el nombre.

Ahora que conocemos el entorno de programación, sigamos con el diseño del formulario que tenemos creado. En la caja de herramientas, seleccionamos la pestaña Form; allí podremos ver los controles más comunes para los formularios. Para este ejercicio utilizaremos una etiqueta (label) y un botón (button). Entonces seleccionamos con un click el control label de la caja de herramientas, luego movemos el puntero del mouse sobre el formulario, presionamos el botón izquierdo para comenzar a marcar la zona donde queremos que se dibuje la etiqueta, arrastramos el puntero y lo soltaremos para fijar el tamaño que queríamos. La segunda opción es haciendo doble click sobre el control label en la caja de herramientas, aparecerá el control dibujado en la esquina superior derecha del formulario. Una tercera opción es arrastrar el

13

control desde la caja de herramientas hasta el área del formulario donde deseamos dejarlo. En cualquier caso, podemos reubicar y redimensionar un control seleccionándolo en el diseñador del formulario y utilizando los cuadritos blancos que lo rodean. Hacemos lo mismo para ubicar el control button, el botón. Deberías conseguir la siguiente apariencia.

Observa que alrededor del texto Label1 hay una región sin puntos. Esos puntos sobre todo el formulario se llaman grilla, y nos ayudará a ordenar los controles. La etiqueta se ha estirado un poco, por lo que se ve sin puntos hacia la derecha del texto. Eso es para que entre todo el texto que prendemos mostrar más adelante. Prueba escribiendo tu texto en la propiedad Text en el visor de propiedades para ajustar el tamaño de la etiqueta.

Ahora editaremos las propiedades de cada objeto para conseguir nuestro objetivo comenzando con el formulario:

En el explorador de proyecto hacemos click derecho sobre el único formulario que tenemos y elegimos la opción Renombrar... (F2), y escribimos frmEjercicio1. En el visor de propiedades buscamos la propiedad Text y escribimos Mi primer formulario con Gambas.

En el botón modificaremos las propiedades desde el visor de propiedades; entonces Name: btnMostrar y Text: Mostrar texto. Si el botón no tiene el tamaño adecuado, el texto podría ocultarse parcialmente; en tal caso solo redimensiona su tamaño. En la etiqueta modificaremos las mismas propiedades que en el botón, usando como nombre lblSaludo y al texto de la propiedad Text lo borramos. Obtendremos la siguiente apariencia.

Ahora debemos codificar la acción que queremos al presionar el botón. Para abrir el editor de código tenemos cuatro maneras, la más rápida sería haciendo doble click sobre el botón. La segunda opción es hacer click derecho y elegir la opción Abrir código (Ctrl+W). Estas dos opciones nos lleva al editor de código donde veremos que automáticamente se escribieron las instrucciones PUBLIC SUB y END correspondientes al evento Click de nuestro botón. Entre ellas escribiremos la acción de nuestro botón, la cual sería lblSaludo.Text = “¡Bienvenido a la programación con Gambas!”. Notarás que al escribir el nombre de la etiqueta, te mostrará un pequeño cuadro con el nombre completo de nuestra etiqueta, es el auto-completado, para aprovecharlo puedes usar la tecla Tab o Intro para continuar escribiendo el '.', no funcionará con la barra de espacio como puedes hacerlo en otros editores. Al escribir el punto, te saldrá una lista con todas las propiedades y métodos del control (de la etiqueta en nuestro caso), elegimos o escribimos Text, y completamos el texto que vamos a mostrar.

14

Es un buen momento para guardar nuestro proyecto. Aquí podemos cerrar el entorno, luego de volver a abrir nuestro proyecto, tendremos las cosas tal cual lo vemos ahora. De todos modos este paso no es necesario ahora, ya que podemos directamente ejecutar nuestra aplicación. Antes de ejecutarse nuestro código, debe guardarse y compilarse; todo eso se hace de forma automática al presionar el botón Ejecutar o la tecla F5, con lo cual ya no necesitamos guardar el proyecto. Finalmente podremos ver nuestra ventana funcionando.

Para cerrar la aplicación podemos presionar el botón con la X (Cerrar la ventana) que nos ofrece el gestor de ventanas o con el botón Parar de la barra de herramientas del IDE de Gambas. Más adelante usaremos un botón en el formulario programado para terminar la ejecución de la aplicación.

Hasta ahora hemos editado dos tipos de archivos, como podemos ver justo arriba del editor de código. Los archivos que creamos son frmEjercicio1.form, donde tenemos todos los datos del formulario; y el archivo frmEjercicio1.class, que contiene todo nuestro código. Haciendo click sobre la pestaña con el nombre frmEjercicio1.form volveremos al diseñador de formulario, y haciendo click sobre frmEjercicio1.class volveremos al editor de código. Esta última es la tercera forma de acceder al código de nuestro control. Si abrimos nuestro navegador de archivos preferido y accedemos a la carpeta de nuestro proyecto, podremos ver que allí se encuentran nuestros dos archivos. Recordemos que ambos tiene el nombre que elegimos para nuestro formulario.

15

En el siguiente capítulo veremos los fundamentos de la programación en Basic, los tipos de datos que se utilizan y la sintaxis de las instrucciones básicas que se utilizan en cualquier lenguaje de programación.

Bibliografía:

Mg. Ing. Fátima del C. Martínez; 2008; “Introducción a Visual Basic”; Tucumán; Argentina

Luis Joyanes Aguilar; 1996; “Programación Orientada a Objetos”; McGraw-Hill; Madrid; España

John W Rittinghouse; 2005; “A Beginner's Guide to GAMBAS”

Wikipedia; “Programación”; http://es.wikipedia.org/wiki/Programacion; accedido 12/oct/2010

Wikipedia; “Software Libre”; http://es.wikipedia.org/wiki/Software_libre; accedido 12/oct/2010

16