Laboratorio 3 “Interfaces gráficas”

Laboratorio 3 “Interfaces gráficas”

Andrés Felipe Betancur López, Diego Pinzón Abril, Camilo Andrés Mora

Ingeniería de sonido, Universidad de San Buenaventura. Bogotá, Colombia

afbetancurl@academia.usbbog.edu.co dapinzona@academia.usbbog.edu.co camoras@academia.usbbog.edu.co

Resumen— El presente trabajo de la materia ‘Lenguajes de programación’, tiene como fin analizar los resultados obtenidos del uso de las interfaces gráficas en 3 diferentes lenguajes (C#, Python, Matlab) para así sacar conclusiones en relación a la comparación que se hará entre cada uno de ellos.

     En la realización de dichas interfaces, se tuvieron en cuenta una serie de librerías que permitieron desarrollar lo que se requería en la guía del laboratorio y a su vez, comprender aún más el uso de los métodos en la programación orientada a objetos.  

     Palabras clave: lenguajes de programación, variables, bytes, DAW.

1. INTRODUCCIÓN

La programación orientada a objetos hoy y siempre ha sido una gran área de desempeño a la que apuntan muchos profesionales y personas interesadas con el fin de diseñar aplicaciones y programas informáticos que satisfagan las necesidades del medio. Esta forma de programar es característica, ya que en él se combinan datos y métodos en estructuras lógicas para diseñar lo nombrado anteriormente. Dentro de esto, se hace uso de las interfaces gráficas para lograr tener una ‘idea’ visual de cómo está funcionando el código realizado y cerciorarse de las funciones que realizan cada uno de los objetos creados dentro de esta.  

En cada lenguaje, las formas de crear las interfaces varían ya que la sintaxis es diferente en cada uno y a su vez las librerías que se usan para las funciones asignadas a los objetos hacen que un lenguaje pueda parecer más fácil que otro.

Por dicha aplicación que se tiene de la programación orientada a objetos se evidencia la necesidad de tener un aprendizaje significativo en esta área y, por ende, se comienza con el desarrollo de talleres como este para aclarar los temas básicos y a medida que se avanza, se integren más conceptos que harán del aprendizaje algo mucho más completo.

1. PROCESO DE LOS CÓDIGOS

El programa o código fue desarrollado en 3 lenguajes distintos, en los cuales varía la sintaxis y las librerías que permiten asignar funciones que operan con los objetos que se han creado. Cabe destacar que cada uno cuenta con sus propias palabras reservadas, caracteres específicos, entre otros elementos que permiten que se pueda ejecutar de forma correcta en cada uno de ellos. Dentro de las interfaces gráficas se debían incluir:

• Un botón con texto dentro de él, el cual debía cambiar cada vez que se oprimiera.
• Una caja de texto (text box).
• Una entrada de texto.
• Un botón que permitiera el uso del texto ingresado por el usuario (en la entrada de texto anterior) como texto en la interfaz gráfica en el ‘text box’ solicitado anteriormente.
• Un slider con valores entre 0 y 1
• Un slider con valores entre 1 y 100

Las representaciones gráficas de cada uno de los objetos son diferentes en cada lenguaje, teniendo así más comodidad a la “vista” en un lenguaje como Python o Matlab, por tener en ellos una ventana común similar a las que se usan habitualmente. A comparación, por ejemplo, de C# que, al ser un motor de videojuegos, no crea una ventana externa para observar los objetos creados, sino que en el mismo ‘main camera’ se van creando y posterior a esto los scripts para cada uno de ellos. Esto y otros factores serán analizados por secciones, para tener una mejor comparación entre los resultados obtenidos en los 3 lenguajes.

1. Librerías en los lenguajes

     En primer lugar, se analizarán las librerías que se deben de importar en los lenguajes para poder crear las diferentes interfaces gráficas. En Python se comienza incluyendo la librería Tkinter, con la cual se pueden crear los objetos pertinentes al taller y operar con funciones en cada uno de ellos. En este lenguaje se puede importar de dos formas: la primera es ‘import tkinter as tk’ teniendo en cuenta que con esta forma, tocaría escribir antes del llamado a un objeto o función la palabra tk seguida de un punto, por ejemplo: “tk.Button()”; la segunda forma es usando la palabra from y al final un asterisco para así evitar tener que poner tk, de este modo: “from tkinter import*”. Esta última forma de importar la librería resulta mejor para poder llamar al objeto solo con el nombre: Button().

     En C# se incluye la librería de UnityEngine.UI con la cual se pueden crear los objetos como botones, sliders, cuadros de texto, etc. En este lenguaje, se debe primero crear los objetos con canvas y posteriormente los scripts que en ellos se codifica para después asignarlos a los objetos y que realicen las funciones correspondientes.

     Por último, en Matlab se tiene algo muy particular y es que se crea una ventana en la cual se añaden los objetos de una forma ‘manual’ ya que, por ejemplo, los botones se pueden dibujar haciendo un rectángulo con el mouse, dándole el tamaño que se quiera. Posterior a esto, existe una plantilla que va a contener todos los objetos creados, de allí se hace un “callback” para que el mismo lenguaje lo ubique en la función del objeto y se pueda programar sobre este. Además, en esta plantilla, se tiene la explicación que permite ubicar también cuando no se tiene claro lo que se debe hacer por lo que es un lenguaje que sería útil para comenzar a trabajar interfaces gráficas de una forma más rápida y en parte más sencilla.    

[pic 1]

Fig.1. “Importación librería Tkinter”

[pic 2]

Fig.2. “Ejemplo función en Matlab, no se importan librerías exactamente”

[pic 3]

Fig.3 “Importación librería UnityEngine.UI”

1. Ventana

     Posterior a la importación de la librería, se debe crear la ventana donde se trabajará. En Python se comienza creando una variable y a esta se le asigna la ventana con el comando Tk( ) o tk.Tk( ), en este lenguaje es necesario añadir al final de todo el código el nombre de la ventana junto con la siguiente función .mainloop( ) que lo que hace es crear una especie de loop infinito para que la ventana se ejecute hasta el momento del cierre. Es un lenguaje cómodo para codificar que maneja una sintaxis más comprensible a comparación de los otros dos lenguajes trabajados (Fig.4).

     En Unity la ventana en la que se trabaja es el “scene”, en el cual se tienen los objetos a crear en el lado izquierdo (canvas). Para esto se debe entonces crear el objeto desde la pestaña de canvas y estos se ven reflejados en scene, se crean los scripts, se hace el código y se asigna a los objetos. Con esto después al ejecutar se podrá ver su funcionamiento en la ventana (Fig.5).

     En Matlab, se debe escribir en el script la palabra guide, de allí al ejecutar se obtienen una serie de plantillas sobre las cuales se pueden crear los diferentes objetos de una forma sencilla. Es un lenguaje muy gráfico que puede resultar más sencillo de trabajar cuando se comprende completamente el desarrollo del código para asignarlo a los objetos (Fig.6).

[pic 4][pic 5]

Fig. 4 “Creación ventana y el tamaño de ella”

[pic 6]

Fig. 5 “Scene Unity”

[pic 7]

Fig. 6 “Ventana de creación de objetos Matlab”

1. Botón con texto dentro

     Los botones son objetos que se evidencian en todos los programas que se conocen, por ende, es importante el entender bien como se crean para así asignarle las diferentes funciones que se quiere que realicen. En Python se debe crear una variable a la cual se le asignará el botón, dentro de los paréntesis que acompañan al objeto se pueden crear gran variedad de funciones que lo transforman. Dentro de estos se tiene el tamaño, la fuente del texto, la ubicación, el color, los bordes, etc. Todos estos tienen unas palabras reservadas de la librería que hacen que se vea afectado el botón. Tal y como se observa en la Fig.7.

[pic 8]

Fig.7 “Botón en Python”

     Observando la Fig.7, es importante destacar que al final de cada uno de los objetos se debe ubicar dentro de la ventana ya sea con la función  .place() o .pack(). El uso de los paréntesis es necesario para que se vean incluidos dentro de esta. Para el texto cambiante lo que hizo fue añadirle al texto del botón, una variable creada (textvariable = direction), a esta variable direction se le asigna un valor con .set de (0), para que así lo muestre por defecto. De allí, con la palabra command, que está dentro de los paréntesis del objeto Button, se está llamando a un método creado que tiene la tarea de incluir un contador que se asigna al texto del botón para que así cada vez que se le de click, este cambie su texto interno. El código completo se observa en la Fig.8.

...