Introduccion a los Graficos Swing

Los mejores corredores de opciones binarias 2020:
  • Binarium
    Binarium

    1er lugar! El mejor broker de opciones binarias!
    Ideal para principiantes! Entrenamiento gratis! Bonos de registro!

  • FinMax
    FinMax

    Broker honesto!

Java desde 0

Aprende a programar en uno de los lenguajes más demandados.

Mostrar menú Ocultar menú

Buscador

Introducción a las interfaces gráficas (GUI)

Hasta ahora, todo lo que hemos hecho hasta ahora, había sido por consola. Pero en este punto, comenzamos a introducirnos en le mundo de las interfaces gráficas en Java.

Interfaces Gráficas (GUI)

Las interfaces gráficas de Java también son muy conocidas como GUI. GUI, es un termino que proviene de Graphical User Interface. Un ejemplo de GUI, podría ser una aplicación de escritorio para leer de PDFs.

Console User Interface (CUI)

Hasta ahora, como hemos comentado antes, hemos trabajado solamente con el concepto de CUI. CUI, proviene de Console User Interface y un ejemplo de CUI, sería la consola como con la que hemos realizado los programas hasta ahora.

Interfaz gráfica (GUI) vs Console User Interface (CUI)

CUI:

  • CUI, es rápida y sencilla de realizar.
  • No requiere grandes conocimientos.
  • El principal inconveniente de esta interfaz es la mala experiencia de usuario.

GUI:

  • GUI, es más lenta y compleja de realizar.
  • Requiere una base de formación y un conocimiento para cada tipo de interfaz gráfica.
  • Aporta una experiencia más visual al usuario.

Clasificación de las principales interfaces gráficas (GUI) de Java

Para empezar a explicar las interfaces, me gustaría primeramente recorrer los principales librerías para crear interfaces gráficas en Java. Y son:

  • AWT: significa Abstract Window Toolkit y la podríamos bautizar como la «old school», la vieja escuela de las interfaces gráficas. Pese a ser la más antigua, también es la más completa. Y se centra en el sistema operativo (SO) para dibujar gráficos, por lo que cada SO o plataforma tendrá su propia GUI . Esto, significa que se verá diferente o tendrá un aspecto distinto en cada una de las plataformas. Como por ejemplo:

También hay que destacar de AWT que utiliza componentes nativos.

  • Swing: extiende de la librería gráfica AWT y proporciona un conjunto de componentes bastante «ligero». Y que trata de tener el mismo comportamiento independientemente del SO o plataforma en el que se ejecuta.
  • JavaFX: se lanzó en Febrero de 2009 bajo el concepto de RIA (Rich Internet Applications) que tiene como finalidad crear aplicaciones para webs, tablets, tvs… Muy «parecidas» a las de escritorio. Un ejemplo, podría ser:
  • SWT: significa Standard Widget Toolkit. Conjunto de componentes para construir interfaces gráficas. Fue creada por IBM para ayudar en el desarrollo de Eclipse, y actualmente, se encarga el propio IDE Eclipse de su mantenimiento. Podemos decir, que es ideal para GUIs complejas y que tendrá un «aspecto» distinto en función del SO en el que se ejecute.

Aunque existen muchas más librerías para crear componentes gráficos, las listadas aquí arriba son las principales. En las próximas clases, empezaremos a trabajar con ellas. Un saludos javeros.

Introduccion a graficos mediante JAVA 2D

Fernando Alfonso Casas De la Torre

Publicada em 22 de mai de 2020

Los mejores corredores de opciones binarias 2020:
  • Binarium
    Binarium

    1er lugar! El mejor broker de opciones binarias!
    Ideal para principiantes! Entrenamiento gratis! Bonos de registro!

  • FinMax
    FinMax

    Broker honesto!

Introduccion a graficos mediante JAVA 2D describiendo el entorno de JAVA 2D, las clases AWT, Swing y otras herramientas para mejorar el diseño de interfaces graficas

  • 0 comentários
  • 2 gostaram
  • Estatísticas
  • Notas

Seja o primeiro a comentar

  1. 1. Graficos 2D en JAVA Maestria en Sistemas Computacionales Tecnicas de Programacion Catedratico: Dr. Enrique Cuan Duron Presenta: Fernando Alfonso Casas De la Torre
  2. 2. INTRODUCCION Java 2D, al igual que todo el lenguaje Java permite la portabilidad de programas lo que le permite a los desarrolladores crear programas que son independientes de la plataforma en la cual se les ejecutará. Esta característica de Java 2D le da a las aplicaciones implementadas en este lenguaje una flexibilidad que de otro modo no tendrían siendo incluso independiente de sobre que tipo de dispositivo gráfico se está trabajando. Java 2d extiende las capacidades contenidas en el paquete de AWT (Abstract Windowing Tool) de Java. Sin embargo se mantiene compatible con este heredar las características de aquel. Esto permite que programas escritos para AWT puedan ejecutarse con Java 2D.
  3. 3. INTRODUCCION Java 2D se mantiene fiel a la lógica imperante en el ambiente Java, por consiguiente permite a los desarrolladores manipular los objetos creados bajo Java 2D con la misma seguridad que todos los objetos de Java. Al hacer que JAVA potencie sus capacidades graficas se fijaron los siguientes objetivos… • Mejorar la calidad gráfica de las aplicaciones programadas en Java (el ambiente AWT no estaba al nivel que otros ambientes gráficos). • Satisfacer la necesidad para los programadores de permitirles tener una sola interfaz de programación independiente. • Mantener una heterogeneidad entre las distintas componentes de Java
  4. 4. JAVA y GRAFICOS Uno de los principales atractivos de JAVA es su soporte para gráficos, el cual permite a los programadores mejorar la apariencia visual de sus aplicaciones. Ahora que se ha difundido el uso de JAVA este posee muchas mas herramientas para realizar dibujos mediante la API JAVA 2D. API es una sigla que procede de la lengua inglesa y que alude a la expresión Application Programming Interface (cuya traducción es Interfaz de Programación de Aplicaciones). El concepto hace referencia a los procesos, las funciones y los métodos que brinda una determinada biblioteca de programación a modo de capa de abstracción para que sea empleada por otro programa informático.
  5. 5. JAVA y GRAFICOS Java 2D es un API para dibujar gráficos en dos dimensiones usando el lenguaje de programación JAVA. Podemos entender la API como un código que indica a las aplicaciones cómo pueden mantener una comunicación entre sí. Estas reglas permiten que los distintos programas mantengan interacciones. El API 2D de JAVA nos permite fácilmente: • Dibujar líneas de cualquier anchura • Rellenar formas con gradientes y texturas • Mover, rotar, escalar y recortar texto y gráficos. • Componer texto y gráficos solapados.
  6. 6. JAVA 2D Java2D es una de las API con el que se puede abarcar temas muy importantes como generar figuras geométricas, imágenes y dibujo de texto. A medida que se van introduciendo nuevas clases de la API, éstas se van hilvanando entre sí para proporcionar al programador un mayor control sobre el aspecto de los lienzos que quiera dibujar.
  7. 7. JAVA y GRAFICOS • Por ejemplo, podríamos usar el API 2D de Java para mostrar gráficos y charts complejos que usan varios estilos de línea y de relleno para distinguir conjuntos de datos, como se muestra en la siguiente figura: • El API 2D de Java también nos permite almacenar datos de imágenes, por ejemplo, podemos realizar fácilmente filtros de imágenes, como se muestra en la siguiente figura: • Pero antes veamos unos CONCEPTOS BASICOS…
  8. 8. CLASE GRAPHICS 2D Dentro de la API de Java se encuentra java.awt.Graphics2D es una clase que extiende a java.awt.Graphics y tiene atributos de estado que conforman el contexto y que pueden modificarse son los siguientes puntos: • Variar la anchura del pincel o líneas. • Definir colores o patrones de relleno para las figuras. • Trasladar, rotar, reducir o ampliar objetos cuando son generados. • Especificar la forma en que se componen las figuras superpuestas Esta clase permite dibujar formas básicas que se pueden integrar a los programas y contienen métodos definidos.
  9. 9. AWT y SWING En sus orígenes Java introdujo la AWT (Abstract Window Toolkit). Ésta interfaz “creaba” los objetos delegando su creación y comportamiento a herramientas nativas de la plataforma donde corre la Máquina Virtual Java. Este esquema condujo a problemas por diferencias en distintas plataformas y S.O. La solución fue desarrollar todos los objetos de la GUI basados sólo en elementos muy básicos y comunes en todas las plataformas. Así surge SWING. NOTA: Junto a la JDK vienen demos de Java y se puede ver un demo de la JFC en el enlace que se muestra abajo. Ver la carpeta que contiene el ejecutable javac y podrá encontrar el directorio demo un nivel más arriba. http://download.java.net/javadesktop/swingset3/SwingSet3.jnlp
  10. 10. CONCEPTOS BASICOS Antes de entrar a describir lo que es parte de el entorno grafico basico de JAVA 2D veamos algunos conceptos basicos: • Sistema de Coordenadas • GUI (Ventana) • Circulo Cromatico • Sistema de colores RGB • Colores en JAVA • WIDGET • APPLET • FRAME
  11. 11. SISTEMA DE COORDENADAS Para empezar dibujar en java, primero debemos entender su SISTEMA DE COORDENADAS el cual es un esquema para identificar a cada uno de los posibles puntos en la pantalla. La esquina superior izquierda de un componente de la GUI (ventana) tiene las coordenadas (0,0). Un par de coordenadas son valores en los ejes x-y. Las coordenadas se utilizan para indicar en donde deben mostrarse los gráficos en una pantalla. Las unidades de las coordenadas se miden en pixeles el cual es la unidad mas pequeña de resolución de un monitor de computadoras .
  12. 12. GUI La INTERFAZ GRÁFICA DE USUARIO, conocida también como GUI (del inglés graphical user interface), es un programa informático que actúa de interfaz de usuario, utilizando un conjunto de imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz. Su principal uso, consiste en proporcionar un entorno visual sencillo para permitir la comunicación con el sistema operativo de una máquina o computador. En el contexto de la interacción persona-computadora, la interfaz gráfica de usuario es el artefacto tecnológico de un sistema da a través del uso y la representación del lenguaje visual, una interacción amigable con un sistema informático (o ventana).
  13. 13. CIRCULO CROMATICO La cantidad de pixeles en una pantalla depende del hardware el cual le informa al sistema operativo de que capacidades graficas puede disponer. Cada píxel de una pantalla o monitor, sintetiza un color graduando la luminosidad de sus 3 subpíxeles (Rojo , Verde o Azul). Los sistemas que emiten rayos luminosos forman las imágenes bien a través de tubos de rayos catódicos (TV, monitores, proyectores de vídeo, etc.), a través de LED (diodos luminosos) o sistemas de Plasma (TV, monitores, etc.) variando la proporción de estos colores en los pixeles y creando la variedad cromática.
  14. 14. CIRCULO CROMATICO Cada píxel de una pantalla o monitor, sintetiza un color graduando la luminosidad de sus 3 subpíxeles. Para indicar con qué proporción es mezclado cada color, se asigna un valor a cada uno de los colores primarios, de manera que el valor «0» significa que no interviene en la mezcla y, a medida que ese valor aumenta, se entiende que aporta más intensidad a la mezcla. Aunque el intervalo de valores podría ser cualquiera (valores reales entre 0 y 1, valores enteros entre 0 y 37, etc.), es frecuente que cada color primario se codifique con un byte (8 bits).
  15. 15. R G B RGB (sigla en inglés de RED-GREEN-BLUE) es la composición del color en términos de la intensidad de los colores primarios de la luz. RGB es un modelo de color basado en la síntesis aditiva, con el que es posible representar un color mediante la mezcla por adición de los tres colores de luz primarios. El modelo de color RGB no define por sí mismo lo que significa exactamente rojo, verde o azul, por lo que los mismos valores RGB pueden mostrar colores notablemente diferentes en distintos dispositivos que usen este modelo de color.
  16. 16. TABLA DE COLORES RGB Los colores primarios son el rojo, el verde y el azul. Java usa el método RGB, que significa que cualquier color se puede describir dando las cantidades de rojo (Red), verde (Green), y azul (Blue). Estas cantidades son números enteros comprendidos entre 0 y 255, o bien, números reales comprendidos entre 0.0 y 1.0. La siguiente tabla nos proporciona los colores más comunes y sus valores RGB.
  17. 17. WIDGET En informática, un widget (o artilugio) es una pequeña aplicación o programa, usualmente presentado en archivos o ficheros pequeños que son ejecutados por un Motor de Widgets o( Widget Engine). Entre sus objetivos están dar fácil acceso a funciones frecuentemente usadas y proveer de información visual. En el contexto de la programación de aplicaciones visuales tienen un significado más amplio como componente o control visual que el programador reutiliza. Suelen reunirse varios widgets en juegos de herramientas de widgets. Se usan para construir interfaces gráficas de usuario (GUI). Un widget en escencia es una interfaz grafica responsable de interactuar con el usuario
  18. 18. WIDGET Con ese nombre tambien designamos unas pequeñas aplicaciones que pueden funcionar en el escritorio del ordenador, en el navegador o en ambos, dependiendo de la plataforma sobre la que funcione. Los Widget son pedazos de código que representan funcionalidades o contenidos y que pueden ser instalados y ejecutados en el programa o nuestra página web de una forma muy sencilla. El objetivo de este tipo de aplicación es enriquecer los contenidos y funcionalidades de la interfaz grafica sin necesidad de programar y crear nuevos contenidos.
  19. 19. OBJETOS GRAFICOS EN JAVA Todos los objetos gráficos en una aplicación Java forman una jerarquía. La mayor jerarquía está en un JFrame, un JDialog, o un JApplet. Ahora veremos la estructura de los JFrame. Ejemplo:
  20. 20. OBJETOS GRAFICOS EN JAVA El RootPane viene con el JFrame. También lo traen los JInternalFrame y los otros contenedores de ventanas superiores (autónomas): JDialog, JApplet, JFrame. El root pane tiene 4 partes: vidrio, panel de capas, panel de contenido, y una barra de menú opcional.
  21. 21. METODOS Y OBJETOS Asociado a cada objeto gráfico debemos distinguir su modelo de su vista. • El MODELO es el conjunto de atributos de un objeto, corresponde a la representación en memoria de un objeto. Por ejemplo, para un termómetro, basta el atributo double temperatura. • La VISTA es la apariencia visual que decidimos dar al objeto. Por ejemplo, un termómetro puede ser digital, columna de mercurio, la intensidad de un color, etc. • Así una cosa es el cambio del estado de un objeto y otra el cambio en la vista correspondiente a ese nuevo estado. • Los Objetos Swing mantienen esa consistencia, pero debemos ocuparnos de ello en objetos gráficos nuestros.
  22. 22. Clase GRAPHICS y sus metodos JAVA proporciona la clase Graphics, que permite dibujar elipses, cuadrados, líneas, mostrar texto y también tiene muchos otros métodos de dibujo. Para cualquier programador, es esencial el entendimiento de la clase Graphics, antes de adentrarse en el dibujo en Java. La clase Graphics proporciona el entorno de trabajo para cualquier operación gráfica que se realice dentro del AWT. Para poder pintar, un programa necesita un contexto gráfico válido, representado por una instancia de la clase Graphics. Pero esta clase no se puede instanciar directamente; así que debemos crear un componente y pasarlo al programa como un argumento al método paint().
  23. 23. Clase GRAPHICS y sus metodos El único argumento del método paint() es un objeto de esta clase. La clase Graphics dispone de métodos para soportar tres categorías de operaciones gráficas: 1) Dibujo de primitivas gráficas, 2) Dibujo de texto, 3) Presentación de imágenes en formatos *.gif y *.jpeg. Además, la clase Graphics mantiene un contexto gráfico: un área de dibujo actual, un color de dibujo del Background y otro del Foreground, un Font con todas sus propiedades, etc. Los ejes están situados en la esquina superior izquierda. Las coordenadas se miden en pixels.
  24. 24. Clase GRAPHICS y sus metodos Algunas de las formas primitivas o básicas que provee Graphics son rectangulos, elipses, circulos, líneas, etc.
  25. 25. SWING Es una biblioteca grafica para JAVA. El paquete Swing es parte de la JFC (Java Foundation Classes) en la plataforma Java. La JFC provee facilidades para ayudar a los programadores a construir GUIs. Swing abarca componentes como botones, tablas, marcos, etc. Incluye WIDGETS para la interfaz grafica del usuario tales como cajas de texto, botones, desplegables y tablas. Antes de la existencia de Swing, las interfaces gráficas con el usuario se realizaban a través de AWT (Abstract Window Toolkit), de quien Swing hereda todo el manejo de eventos.
  26. 26. SWING (cont.) Usualmente, para toda componente AWT existe una componente Swing que la reemplaza, p.ej: clase Button de AWT es reemplazada por clase JButton de Swing. Las componentes Swing se identifican porque pertenecen al paquete javax.swing y el nombre de todas las componentes Swing comienza con «J». Las componentes de Swing utilizan la infraestructura de AWT, incluyendo el modelo de eventos AWT, el cual rige cómo una componente que reacciona a eventos tales como, eventos de teclado, mouse, etc. Es por esto, que la mayoría de los programas Swing necesitan importar dos paquetes AWT: java.awt.* y java.awt.event.*. Ojo: Como regla, los programas no deben usar componentes pesados de AWT junto a componentes Swing, ya que los componentes de AWT son siempre pintados sobre los de Swing. (Por componentes pesadas de AWT se entiende Menú, ScrollPane y todas las componentes que heredan de las clases Canvas y Panel de AWT).
  27. 27. Ejemplo de Aplicacion SWING Una aplicación SWING Se construye mezclando componentes con las siguientes reglas. • Debe existir, al menos, un contenedor de alto nivel (Top- Level Container), que provee el soporte que las componentes Swing necesitan para el pintado y el manejo de eventos. • Otras componentes colgando del contenedor de alto nivel (éstas pueden ser contenedores o componentes simples).
  28. 28. Ejemplo de Aplicacion SWING En las primeras líneas se importan los paquetes necesarios (import). Luego se declara la clase HolaMundoSwing y en el método main se configura el top level container: public class HolaMundoSwing < public static void main(String[] args) < JFrame frame = new JFrame("HolaMundoSwing"); . frame.pack(); frame.setVisible(true); >> En el ejemplo, sólo hay un contenedor de alto nivel, un JFrame. Un frame implementado como una instancia de la clase JFrame es una ventana con decoraciones, tales como, borde, título y botones como íconos y para cerrar la ventana. Aplicaciones con un GUI típicamente usan, al menos, un frame.
  29. 29. Ejemplo de Aplicacion SWING Además, el ejemplo tiene un componente, una etiqueta que dice «Hola Mundo». final JLabel label = new JLabel(«Hola Mundo»); //construye el JLabel. frame.getContentPane().add(label); //agrega el label al frame. Para que el botón de cerrar cierre la ventana, hay dos opciones: frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //JDK 1.3+ frame.addWindowListener(new java.awt.event.WindowAdapter() < //versiones anteriores public void windowClosing(WindowEvent e)< System.exit(0); >> );
  30. 30. Creando una aplicacion En primer lugar invocamos las librerías que usaremos… import java.awt.BorderLayout; import java.awt.Color; import java.awt.EventQueue; import java.awt.Graphics; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.border.EmptyBorder; public class Grafico1 extends JFrame <
  31. 31. Creando una aplicacion Sobrescribimos el método paint heredado de la clase JFrame: public void paint (Graphics g) < El método paint se ejecuta cada vez que el JFrame debe ser redibujado y llega como parámetro un objeto de la clase Graphics. Este objeto nos permite acceder al fondo del JFrame y utilizando las primitivas gráficas dibujar líneas, rectángulos, elipses etc. Lo primero que hacemos dentro de este método es llamar al método paint de la clase superior para que se pinte el fondo del JFrame y otras componentes contenidas dentro (para llamar al método paint de la clase JFrame debemos anteceder la palabra clave super y pasar el parámetro respectivo): super.paint(g);
  32. 32. Asignacion de colores en JAVA Para crear un objeto de la clase Color, se pasan tres números a su constructor que indican la cantidad de rojo, verde y azul. Color colorRosa=new Color(255, 175, 175); Mediante la función setColor, cambiamos color con el que dibujamos una línea, un texto o rellenamos una figura cerrada en el contexto gráfico g. g.setColor(colorRosa);
  33. 33. Asignacion de colores en JAVA No es necesario tener a mano la tabla de las componentes RGB de cada color. La clase Color nos proporciona un conjunto de colores predefinidos en forma de miembros estáticos de dicha clase. Podemos escribir alternativamente g.setColor(Color.pink); Los colores predefinidos son los siguientes: Color.white Color.black Color.yellow Color.lightGray Color.red Color.green Color.gray Color.pink Color.magenta Color.darkGray Color.orange Color.cyan Color.blue
  34. 34. Dibujo de Formas Primitivas Mediante el método setColor activamos un color: g.setColor (Color.blue); Dibuja una línea desde la coordenada inicial hasta la final. La línea es del color ultimo que se definió: g.drawLine (xini, yini, xfin, yfin); Dibuja un rectángulo desde la coordenada inicial con el ancho y alto en pixeles que se defina g.drawRect (xini, yini, ancho, alto);
  35. 35. Dibuja un rectangulo igual que DrawRect con el agregado de que lo rellena del color que se especifique en la ultima línea de color: g.fillRect (xini, yini, ancho, alto); Dibuja un rectángulo desde la coordenada inicial con el ancho y alto en pixeles que se defina pero dandole un efecto de realce (3D) con un pequeño borde. g.fill3DRect (xini, yini, ancho, alto, true/false); Similar a drawRect más un valor de redondeo de los vértices que le indicamos en el quinto y sexto parámetro (arcos) pudiendo ser el rectangulo en contorno o relleno: g.drawRoundRect ( x, y, alto, ancho, arco1, arco2); g.fillRoundRect (x, y, alto, ancho, arco1, arco2); Dibujo de Formas Primitivas
  36. 36. Mediante el método drawString posiciona en una coordenada un dato tipo cadena con el ultimo Font y Color especificado: drawString(String str, int x, int y); Dibuja un óvalo con una razón de ancho y alto (elipse) ya sea en contorno o con relleno definido por el ultimo color: g.drawOval ( x, y, alto, ancho); g.fillOval (350, 270, 50, 70); Dibuja un arco con una razón de ancho y alto (elipse) pero solo una parte de ella según se defina: g.drawArc ( x, y, alto, ancho, inicio, fin); Dibujo de Formas Primitivas
  37. 37. Dibujamos un polígono, en este caso un triangulo (debemos indicar mediante dos vectores los vértices de cada punto del triángulo), el primer punto es el (500,70) el segundo punto es el (550,120) y por último el punto (450,120): int [] vx1 = <500, 550, 450>; int [] vy1 = <70, 120, 120>; g.drawPolygon (vx1, vy1, 3); De forma similar los métodos fillRect, fillRoundRect, fillOval y fillPolygon son similares a los anteriores con la diferencia que pinta su interior con el color activo de la última llamada al método setColor: int [] vx2 = <500, 550, 450>; int [] vy2 = <270, 320, 320>; g.fillPolygon (vx2, vy2, 3); Dibujo de Formas Primitivas
  38. 38. Interfaz de usuario HMI Una finalidad importante de JAVA es dar soporte a aplicaciones e interfaces graficas. La sigla HMI es la abreviación en Ingles de Interfaz Hombre Maquina. La interfaz de usuario es el medio con que el usuario puede comunicarse con una máquina, un equipo o una computadora, y comprende todos los puntos de contacto entre el usuario y el equipo. Normalmente suelen ser fáciles de entender y fáciles de accionar. Las interfaces básicas de usuario son aquellas que incluyen elementos como menús, ventanas, teclado, ratón, los beeps y algunos otros sonidos que la computadora hace, y en general, todos aquellos canales por los cuales se permite la comunicación entre el ser humano y la computadora.
  39. 39. Interfaz de usuario HMI Funciones principales de una HMI… Sus principales funciones son las siguientes: • Puesta en marcha y apagado. • Control de las funciones manipulables del equipo. • Manipulación de archivos y directorios. • Herramientas de desarrollo de aplicaciones. • Comunicación con otros sistemas. • Información de estado. • Configuración de la propia interfaz y entorno. • Intercambio de datos entre aplicaciones. • Control de acceso. • Sistema de ayuda interactivo.
  40. 40. BIBLIOGRAFIA Y REFERENCIAS • Programación de Interfaces Gráficas en Java Agustín J. González • Como programar en Java. Ed. 7. Paul Dietel
  41. 41. MUCHAS GRACIAS POR SU ATENCION Presento: Fernando Alfonso Casas De la Torre

LinkedIn Corporation © 2020

Compartilhar painel de recortes

Painéis de recortes públicos que contêm este slide

Selecionar outro painel de recortes

Parece que você já adicionou este slide ao painel

Interfaz Gráfica de Usuario con Netbeans

por Gaby Nieva · Publicado 9 abril, 2020 · Actualizado 17 mayo, 2020

Esta es la primera entrada de una serie de publicaciones sobre el manejo de los objetos del paquete javax.swing para crear la Interfaz Gráfica de Usuario usando el IDE Netbeans y por supuesto el lenguaje de programación Java.

Pero comencemos desde el inicio.

El acrónimo GUI proviene de “Graphic User Interface” o Interfaz Gráfica de Usuario. Es la abreviatura que define la interfaz gráfica de cualquier aplicación, y considero que es lo que permite que cualquier usuario pueda utilizar fácilmente un programa.

En primer lugar, pensemos un poco en el pasado de la computación, en épocas donde se tenía una interfaz sólo texto para ejecutar comandos. En consecuencia, podemos reconocer lo importante que es ofrecerle al usuario una forma fácil e intuitiva de navegar y realizar el trabajo en la aplicación que vamos a crear.

Elementos comunes de una Interfaz Gráfica de Usuario

En la figura 1 y 2 se pueden observar los elementos más populares de una Interfaz Gráfica de Usuario.

Figura 1. Elementos gráficos de una ventana típica en Windows

Considero que no debo adentrarme en explicar el funcionamiento de cada elemento, pues como se puede observar, son objetos gráficos que usamos comúnmente en cualquier aplicación.

Figura 2. Controles gráficos comunes de una Interfaz Gráfica de Usuario

javax.swing

El paquete que nos permite crear y manipular los elementos gráficos de una GUI se llaman Swing, que fue creado a partir del paquete AWT o Abstract Window Toolkit

Como lo indica la documentación oficial, Swing proporciona un conjunto de componentes ligeros que trabajan de la misma forma en todas las plataformas.

Los componentes Swing utilizan la infraestructura AWT, incluyendo el modelo de eventos AWT, el cual rige como un componente reacciona a eventos tales como un click, escribir en un componente, etc. Es por eso que la mayoria de los programas Swing necesitan importar los paquetes java.awt.* y java.awt.event.*.

Estructura de una aplicación GUI

En la figura 3 se muestra la estructura lógica de una aplicción GUI.

Figura 3. Estructura de una aplicación GUI en Java

Como puedes apreciar, toda la acción de una aplicación GUI sucede al generarse un evento. Un evento es cualquier cosa que un usuario le hace a un objeto gráfico, como por ejemplo, escribir en un cuadro de texto, hacer click sobre un elemento de menú o sobre un botón, entre otros.

Entonces lo “único” que debemos hacer es programar el método que se ejecutará cuando el evento suceda.

Contenedores

Cada aplicación Swing debe tener al menos un contenedor de alto nivel (Top-level Container), el cual podemos ver como un tablero del cuál se podrán colgar los objetos gráficos que queremos mostrar en la interfaz. Los contenedores en Java son:

  • JWindow: representa un panel de ventana que no tiene bordes ni elementos visibles
  • JFrame: Es la clase que representa una ventana típica con bordes, botones de cerrar, etc. y es la que típicamente usaremos para crear nuestras aplicaciones, entre otras cosas, porque a su vez permite que se le cuelguen otros contenedores, como JInternalFrame o JPanel.
  • JPanel: Esta clase es utilizada como un contenedor genérico para agrupar componentes, sin que generalmente sea visible (Algo así como la herramienta agrupar en MS Word)
  • JDialog: Esta clase permite crear un cuadro de diálogo común.
  • JApplet: Este contenedor permite agrupar componentes que serán mostrados en un navegador.

La primera aplicación GUI

Hola Mundo

Después de esta breve introducción, mostraré como desarrollar una aplicación GUI muy sencilla.

      Ahora hacer click derecho sobre el paquete creado (o sobre Source Packages sino se creó un paquete) ir a New y seleccionar JFrame Form… (ver Figura 4)

    Figura 4. Insertando un JFrame

    Figura 5. Editor Gráfico de Netbeans

    Para esta primera aplicación buscamos imprimir un mensaje. Para ello, selecciona un objeto Label desde la paleta, en la categoría Swing Controls, y lo colocaremos en el espacio del JFrame.

    Como puedes ver, cada vez que se selecciona un objeto gráfico, el panel de Propiedades automáticamente despliega los atributos modificables en tiempo de edición del objeto. Por lo tanto basta con seleccionar el objeto etiqueta, insertado en el JFrame, para modificar la propiedad text escribiendo el saludo que nos interesa desplegar.

    La primera parte del programa está completada, por lo que no nos queda más que guardar y ejecuar el programa, el cuál debería de mostrarse como se aprecia en la figura 6.

    Figura 6. Ejemplo de la ejecución de la primera aplicación

    Usando JTextField y JButton

    A continuación, para la segunda parte de la aplicación, agregaremos los siguientes objetos:

    Como resultado de agregar estos componentes, el JFrame quedará como se muestra en la figura 7.

    Figura 7. Los componentes de la aplicación de ejemplo

    Puedes conservar los nombres de los objetos que Netbeans les asigna o los puedes modificar. Sin embargo, yo recomiendo que únicamente se modifiquen los nombres de los objetos interactivos o que programaremos. Por ejemplo, las etiquetas de los mensajes “Hola Mundo Gráfico” y “Escribe tu nombre” son sólo informativas, por lo que no considero tan importante que se modifiquen los nombres. Sin embargo, la última etiqueta se modificará en tiempo de ejecución y su contenido cambiará conteniendo lo que el usuario escriba en la caja de texto.

    Por ello a esta etiqueta le modificaremos el nombre usando el panel Navigator. Para cambiar el nombre de un objeto gráfico:

    1. Selecciona el objeto
    2. Despliega el panel Navigator si es que no se está mostrando por default, haciendo click en Window ->Navigator o presionando las teclas Ctrl + 7.
    3. En el panel Navigator, hacer click derecho sobre el objeto gráfico y luego seleccionar Change Variable Name… tal y como se muestra en la figura 8. En la ventana que se abrirá, escribe el nombre del objeto gráfico, recordando que se trata del nombre de un objeto, por lo que todas las reglas para construir identificadores están vigentes y no se deben usar espacios en blanco o caracteres especiales.

    Figura 8: Modificando el nombre de un objeto

    Este proceso se debe repetir para la caja de texto y el botón.

    Edición del método que responde al evento.

    Para continuar crearemos el método que responderá al evento click del botón Aceptar. Para ello, sólo es necesario hacer doble click sobre el botón. Esto abrirá el modo Source de Netbeans y nos encontramos con el ya clásico editor de código, como se observa en la figura 9.

    Figura 9. Vista Source

    Netbeans ya ha generado el encabezado del método necesario, éste método se llama con el nombre del objeto gráfico más las palabras ActionPerformed que indica que será el método ejecutado el manejador de eventos.

    A continuación, sólo será cuestión de escribir un poco de código:

    Una cosa más: haremos que la etiquetaNombre no se muestre al inicio del programa. Para ello, modificaremos el método constructor del JFrame:

    Sólo queda guardar y ejecutar el programa.

    Un vistazo al código.

    A continuación revisaremos más a detalle el código que Netbeans generó:

    El JFrame creado, VentanaPrincipal es una clase hija de JFrame. Sin embargo, observa una diferencia importante en el constructor: no inicia con el llamado al super constructor (super()). Esto es debido a que, en el caso de los objetos gráficos, el constructor inicia con una llamada al método initComponents(), el cual inicializa todos los componentes swing de la interfaz creada usando el Constructor GUI de Netbeans. De esta forma, ahora el constructor es encargado, además de construir el objeto, de inicializar los componentes que se mostrarán en pantalla.

    Te recomiendo no modificar directamente el código contenido en el método initComponents, pues se encuentra vinculado con el Editor GUI de Netbeans. La modificación de cualquiera de los componentes gráficos (como nombre de objeto, apariencia, etc.) debe realizarse de cualquiera de estas dos formas:

    1. En tiempo de edición, a través de la ventana Design o a través del panel Propiedades.
    2. En tiempo de ejecución, a través del uso de los métodos setters adecuados para el atributo que se busca modificar.

    Método main

    Como ya lo mencioné con anterioridad, el método main es el primer método que se ejecuta al correr la aplicación. En el caso de nuestro programa, se crea lo que se conoce como la instancia de un hilo, a través de la creación de un objeto tipo Runnable. Un hilo permite que una tarea pueda ser ejecutada al mismo tiempo con otra tarea, lo que en realidad es lo que sucede cuando trabajamos en sistemas operativos multitareas: al abrir una aplicación se crea un hilo o thread que a la vez que nos permite trabajar con esa aplicación, nos permite trabajar con otras (como tener MS Word abierto y el Reproductor de música tocando).

    Ten en cuenta que Runnable es una interfaz a la que se le debe implementar el método run. Como se observa en el código, lo único que el método run hará será crear una instancia de la clase VentanaPrincipal y mostrarla (poniéndo su propiedad visible a true). De aquí en adelante, el control de la aplicación la tiene el usuario al generar un evento que dispare la ejecución del método actionPerfomed de la instancia de VentanaPrincipal.

    De esta forma concluyo con esta introducción sobre el uso de Java Swing, espera las siguientes entradas en las que te mostraré el uso de otros controles básicos. ¡hasta el siguiente post!

    Los mejores corredores de opciones binarias 2020:
    • Binarium
      Binarium

      1er lugar! El mejor broker de opciones binarias!
      Ideal para principiantes! Entrenamiento gratis! Bonos de registro!

    • FinMax
      FinMax

      Broker honesto!

Like this post? Please share to your friends:
Cómo negociar opciones binarias
Deja un comentario

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: