Autor Tema: Tutorial crear GUI con JAVA (código desde teclado)  (Leído 4038 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado CompSystems

  • PIC18
  • ****
  • Mensajes: 488
    • Home Page
Tutorial crear GUI con JAVA (código desde teclado)
« en: 25 de Enero de 2016, 20:35:05 »
En el hilo "Tutorial JAVA con GUI e IDE NetBeans 8.x" llegue a un punto que a pesar de usar la interface de DISEÑO de controles (arrastrar y soltar componentes a golpe de ratón) el IDE agrega automáticamente al codigo fuente, métodos, definiciones muy poco comprensible para un principiante, ademas hay que modificar ciertas partes del código para obtener lo deseado, entonces se requiere aprender paralelamente la construcción de GUIs paso a paso o en PURO CÓDIGO, y eso es lo que expongo en este nuevo hilo

La programacion informática es una actividad muy creativa, emocionante e interesante, ademas de ser muy lucrativa, la inmensa mayoría de programas que se realizan en el mundo son aplicaciones de cientos a miles de lineas de sentencias de programacion, las aplicaciones mas importantes la realizan un grupo de programadores, a cada persona del grupo se le asigna o deroga una tarea o parte del código, una minoría escribe programa individuales, pero todos iniciamos como esa minoría


Primer ejemplo trivial  "saludo con caja de dialogo emergente", creado  digitado 100%

//
Código: Java
  1. package paquete1;
  2.  
  3. // Bibliotecas a enlazar
  4. import javax.swing.*;
  5.  
  6. // la palabra clave "extends" expresa herencia
  7. // la siguiente sentencia hereda la clase JFrame
  8. public class ClPrimerVentana extends JFrame {
  9.  
  10.     public static void main(String[] args) {
  11.  
  12.         // El siguiente codigo despliega dos cajas de dialogo
  13.         // uso de showMessageDialog como una caja de dialogo emergente
  14.  
  15.         // se ejecuta de la clase JOptionPane,  el método showMessageDialog con 2do parámetro el String a desplegar
  16.         JOptionPane.showMessageDialog(null, "Hola Mundo nuevamente");
  17.         JOptionPane.showMessageDialog(null, "Nos vemos");
  18.  
  19.         //Accion para cerrar la ventana después de ejecutar las anteriores sentencias
  20.         System.exit(0);
  21.     }
  22.  
  23. }//

Uso del control JTextField

//
Código: Java
  1. package paquete1;
  2.  
  3. // Biblioteca a enlazar
  4. //import javax.swing.JOptionPane;
  5. import java.awt.*;
  6. import javax.swing.*;
  7.  
  8. public class ClPrimerVentana extends JFrame {
  9.     // Declaracion de un control tipo [Campo de texto] con ID referencia, de nombre "fldCampo1"
  10.     private JTextField fldCampo1;
  11.  
  12.     // Metodo Principal
  13.     public static void main(String[] args) {
  14.         // Se crea una primer instancia de la clase o primer obj de nombre "ventana_obj1"
  15.         ClPrimerVentana ventana_obj1 = new ClPrimerVentana();
  16.         // Se Fija el tamano de la vetana del objeto "ventana_obj1"
  17.         ventana_obj1.setSize(320,240);
  18.         // despliega y hace visible la ventana
  19.         ventana_obj1.crearGUI();
  20.         ventana_obj1.setVisible(true);
  21.      
  22.  
  23.     }
  24.    
  25.     // Metodo crearGUI
  26.     private void crearGUI(){
  27.         setDefaultCloseOperation(EXIT_ON_CLOSE);
  28.         Container GUI_obj1 = getContentPane();
  29.         GUI_obj1.setLayout(new FlowLayout() );
  30.  
  31.         // Al ID referencia "fldCampo1" se le asigna un texto
  32.         fldCampo1 = new JTextField("Hola Mundo nuevamente");
  33.         // Se añade o adhiere el control campo de texto a la GUI
  34.         GUI_obj1.add(fldCampo1);
  35.     }
  36.  
  37. }//

redactando ...
« Última modificación: 04 de Febrero de 2016, 18:35:28 por CompSystems »
Desde Colombia

Desconectado CompSystems

  • PIC18
  • ****
  • Mensajes: 488
    • Home Page
Re:Tutorial JAVA con GUI (puro código desde teclado)
« Respuesta #1 en: 26 de Enero de 2016, 17:02:00 »
EL siguiente ejemplo muestra una ventana con un area de graficacion, se agregan los ejes coordenados y se tranzan líneas, próximamente incluiré una función algebraica, le falta centrar el botón de graficacion y el plano cartesiano. ... investigando ...

espero sea de su interés

//
Código: Java
  1. package matematicas.graficas2D;
  2.  
  3. // Bibliotecas a enlazar
  4. //AWT Abstract Window Toolkit (Kit de Herramientas de Ventana Abstracta)
  5. import java.awt.*;
  6. import java.awt.event.*;
  7. //SWING movimiento?
  8. import javax.swing.*;
  9.  
  10. // la palabra clave "extends" expresa herencia
  11. // la palabra clave "implements" hace referencia al tipo de interfaz
  12. // la siguiente sentencia además define una clase de nombre "ClPlanoCartesiano" que hereda la clase JFrame
  13. // e implementa la interfaz "ActionListener"
  14. public class ClPlanoCartesiano extends JFrame implements ActionListener {
  15.  
  16.     // 1: CAMPOS
  17.     // Identificadores instancia de la clase o de referancia
  18.     // Declaración de un control tipo [Campo de E/S de texto (jTextField)] con ID referencia de nombre "fldCampo1" y tipo privada
  19.     // Se usara para mostrar un tecto de salida (coordenada final)
  20.     private JTextField fldCampo1;
  21.  
  22.     // Declaración de un control tipo PANEL con ID referencia de nombre "pnlPlanoDeGraficacion" y tipo privada
  23.     // se usara para contener una grafico (plano cartesiano)
  24.     private JPanel pnlPlanoDeGraficacion;
  25.  
  26.     // control tipo BOTON, nombre de ID "btnBoton1"
  27.     // se usara para iniciar la graficacion, al hacer clic se genera un evento de interrupcion que es "escuchado" por el metodo "actionPerformed"
  28.     private JButton btnBoton1;
  29.  
  30.     public int intAnchoVentana;
  31.     public int intAltoVentana;
  32.     public int intPlanoCentroX;
  33.     public int intPlanoCentroY;
  34.  
  35.     // 2: CONSTRUCTOR
  36.     // Función o método CONSTRUCTOR para inicializar los Identificadores instancia de la clase
  37.     // por medio de parametros formales "intAnchoVentana_par" y "intAltoVentana_par"
  38.     ClPlanoCartesiano(int intAnchoVentana_par, int intAltoVentana_par) {
  39.         intAnchoVentana = intAnchoVentana_par;
  40.         intAltoVentana = intAltoVentana_par;
  41.         intPlanoCentroX = intAnchoVentana_par / 2;
  42.         intPlanoCentroY = intAltoVentana_par / 2;
  43.     }// fin de la función o metodo CONSTRUCTOR
  44.  
  45.     // Metodo Principal
  46.     //
  47.     public static void main(String argumentosDeEntrada[]) {
  48.         // ID locales
  49.         // Constantes de la dimension de la ventana
  50.         // 400 pixeles direccion horizontal y 300 vertical
  51.         final int dim_x = 400;
  52.         final int dim_y = 300;
  53.  
  54.         // Se crea una nueva y primer instancia de la clase "ClPlanoCartesiano", un obj de nombre identificador "ventana_obj1" parámetros actuales ANCHO, ALTO
  55.         ClPlanoCartesiano ventana_obj1 = new ClPlanoCartesiano(dim_x, dim_y);
  56.  
  57.         // Se Fija el tamano de la ventana al objeto "ventana_obj1"
  58.         ventana_obj1.setSize(dim_x, dim_y);
  59.         ventana_obj1.setTitle("Plano cartesiano");
  60.  
  61.         // Despliega y hace visible la ventana del objeto "ventana_obj1"
  62.         ventana_obj1.metCrearGUI();
  63.         ventana_obj1.setVisible(true);
  64.  
  65.     }
  66.  
  67.     private void metCrearGUI() {
  68.         // EL boton salir o cerrar [X] de la barra de titulo, ejecuta CERRAR al SALIR
  69.         setDefaultCloseOperation(EXIT_ON_CLOSE);
  70.         Container GUI_obj1 = getContentPane();
  71.         GUI_obj1.setLayout(new FlowLayout());
  72.  
  73.         // PANEL
  74.         // Se crea o contruye un nuevo control tipo PANEL sobre el declarado ID referencia "pnlPlanoDeGraficacion"
  75.         pnlPlanoDeGraficacion = new JPanel();
  76.         // Dimension menor al tamaño de la ventana
  77.         pnlPlanoDeGraficacion.setPreferredSize(new Dimension(intAnchoVentana - 100, intAltoVentana - 100));
  78.  
  79.         // Fija el fondo del PANEL en gris
  80.         pnlPlanoDeGraficacion.setBackground(Color.gray);
  81.         // Se añade o adhiere el control PANEL a la GUI
  82.         GUI_obj1.add(pnlPlanoDeGraficacion);
  83.         // Sobre el plano de graficacion se dibuja una linea
  84.         //BOTON
  85.         // Se crea o contruye un nuevo control tipo BOTON sobre el declarado ID "btnBoton1" y se lo etiqueta con un nombre visible "Graficar"
  86.         btnBoton1 = new JButton("Graficar");
  87.         // Se añade o adhiere el control BOTON a la GUI
  88.         GUI_obj1.add(btnBoton1);
  89.         // Se adhiere o agrega "btnBoton1" al auditor de la interrupción
  90.         // this: Localize al metodo dentro del objeto
  91.         btnBoton1.addActionListener(this);
  92.  
  93.         //CAMPO-de-TEXTO
  94.         // Se crea o contruye un nuevo control TIPO CAMPO-E/S-de-TEXTO con ID referencia "fldCampo1"
  95.         // además se le asigna un texto como salida fija del campo
  96.         fldCampo1 = new JTextField("coordenada actual");
  97.         // Se añade o adhiere el control CAMPO-de-TEXTO a la GUI
  98.         GUI_obj1.add(fldCampo1);
  99.  
  100.     }
  101.  
  102.     @Override
  103.     // ISR: Rutina de Servicio o Gestion de Interrupción a la accion realizada o pulsacion de un bonton del mouse sobre el puntero visible en pantalla
  104.     // De acceso PUBLICO, ya que es invocada externamente o fuera de esta clase
  105.     public void actionPerformed(ActionEvent evento) {
  106.         // Para usar el control PANEL como area de dibujo, se define el tipo de objeto "Graphics" con ID "grphGrafica_obj1" y contenido
  107.         Graphics grphGrafica_obj1 = pnlPlanoDeGraficacion.getGraphics();
  108.  
  109.         // CONSTANTES para indicar posición 0 que es el valor X de la coordenada, posición 1 igual a Y
  110.         final int x = 0;
  111.         final int y = 1;
  112.         // coordenadas de graficación de la línea recta cooA(x1, y1)  cooB(x2, y2)
  113.         int cooA[] = {0, 0};
  114.         int cooB[] = {0, 0};
  115.  
  116.         // El método drawLine, recibe, las coordenadas separadas y no como pares ordenados
  117.         // Grafica los ejes coordenados
  118.         // EJE x
  119.         cooA[0] = 0;
  120.         cooA[1] = intPlanoCentroY;
  121.  
  122.         cooB[0] = intAnchoVentana;
  123.         cooB[1] = intPlanoCentroY;
  124.         grphGrafica_obj1.drawLine(cooA[x], cooA[y], cooB[x], cooB[y]);
  125.  
  126.         // EJE y
  127.         cooA[0] = intPlanoCentroX;
  128.         cooA[1] = 0;
  129.  
  130.         cooB[0] = intPlanoCentroX;
  131.         cooB[1] = intAltoVentana;
  132.         grphGrafica_obj1.drawLine(cooA[x], cooA[y], cooB[x], cooB[y]);
  133.  
  134.         // Luego Grafica una línea recta desde el origen hasta (25,25)
  135.         cooA[0] = metCoox(0);
  136.         cooA[1] = metCooy(0);
  137.  
  138.         cooB[0] = metCoox(25);
  139.         cooB[1] = metCooy(25);
  140.         grphGrafica_obj1.drawLine(cooA[x], cooA[y], cooB[x], cooB[y]);
  141.  
  142.         // Grafica una línea recta desde (25,25) hasta (50,0)
  143.         // usando el metodo metDibujarLinea, primer parametro el objeto "grphGrafica_obj1", siguientes args coordenadas de los puntos extremos
  144.         metDibujarLinea(grphGrafica_obj1, 25,25,50,0);
  145.  
  146.         // Despliega las coo de graficación
  147.         fldCampo1.setText("x0:" + cooA[x] + " y0:" + cooA[y] + " x1:" + cooB[x] + " x1:" + cooB[y]);
  148.  
  149.     }
  150.  
  151.     // Toma como 1er argumento un obtejo tipo "Graphics"
  152.     private void metDibujarLinea(Graphics grphGrafica_obj1_copia, int x0, int y0, int x1, int y1) {
  153.        
  154.         grphGrafica_obj1_copia.drawLine(metCoox(x0), metCooy(y0), metCoox(x1), metCooy(y1));
  155.     }
  156.  
  157.     // Método para el ajuste de coordenada X
  158.     private int metCoox(int x) {
  159.         int x_;
  160.         if (x >= 0) {
  161.             x_ = intPlanoCentroX + x;
  162.         } else {
  163.             x_ = intPlanoCentroX - x;
  164.         }
  165.         return x_;
  166.     }
  167.  
  168.     // Método para el ajuste de coordenada Y
  169.     private int metCooy(int y) {
  170.         int y_;
  171.         if (y >= 0) {
  172.             y_ = intPlanoCentroY - y;
  173.         } else {
  174.             y_ = intPlanoCentroY + y;
  175.         }
  176.         return y_;
  177.     }
  178.  
  179. }//

« Última modificación: 27 de Enero de 2016, 16:30:33 por CompSystems »
Desde Colombia

Desconectado CompSystems

  • PIC18
  • ****
  • Mensajes: 488
    • Home Page
Re:Tutorial JAVA con GUI (puro código desde teclado)
« Respuesta #2 en: 27 de Enero de 2016, 16:14:09 »
Como buena practica de programación informática, se recomienda que los comentarios se hagan en líneas independientes y no seguidamente al finalizar una sentencia, debido a que es mejor visualizar independientemente, sentencias programables, de sentencias o texto de ayuda o documentación

El código anterior sigo esa buena practica :)

anexo unas ideas mas sobre la sintaxis y forma de un código en java


HABLEMOS DE CADA LINEA DEL CÓDIGO

A: PAQUETES
Código: Java
  1. package matematicas.graficas2D;

Todo archivo fuente de java *.class contiene al menos una clase y cada clase pertenece a un PAQUETE, que agrupan clases similares, por ejemplo un paquete de nombre ÁLGEBRA debe contener clases que se relacionen con ÁLGEBRA como álgebra lineal, álgebra Boole, álgebra de vectores, álgebra de números complejos y no algo por fuera del tema como cuenta de usuario

En el ejemplo anterior se definió el nombre del paquete "matematicas.graficas2D" sentencia « package matematicas.graficas2D; »

cada nombre del paquete no debe contener espacios y debe seguir las mismas reglas de creación de un identificador, excepto que se puede incluir un punto (.), cada punto encontrado dentro del nombre del paquete, el IDE lo interpreta como un directorio y lo crea con el mismo nombre en el disco duro,  "matematicas" es el paquete y directorio principal de paquetes, "graficas2D" el subpaquete  y subdirectorio del paquete principal

Nombre del Proyecto: ClPlanoCartesiano
Ubicación del Proyecto:
(C:\Users\<USER NAME>\Documents\NetBeansProjects\ClPlanoCartesiano\)
Ubicación del archivo fuente:
(C:\Users\<USER NAME>\Documents\NetBeansProjects\ClPlanoCartesiano\src\ matematicas\graficas2D\ClPlanoCartesiano.java)


vista de los directorios del proyecto sobre el IDE y en el disco duro

ClPlanoCartesiano (Nombre del proyecto y nombre del directorio del proyecto)
--src (subdirectorio para contener los archivos FUENTE, visto desde el árbol de proyectos de java se observa como "src" y como "SOURCE PACKAGES" en el disco duro)
----matematicas (directorio del paquete principal)
------graficas2D (subdirectorio o paquete secundario)
--------ClPlanoCartesiano,java (nombre del archivo fuente)

Creo que quedo entendido sobre los PAQUETES

B:  BIBLIOTECAS A ENLAZAR

con las instrucciones básicas de java, prácticamente no tendríamos posibilidad de ni siquiera mostrar un resultado en pantalla, se requiere cargar o enlazar bibliotecas especializadas

Código: Java
  1. //AWT Abstract Window Toolkit (Kit de Herramientas de Ventana Abstracta)
  2. import java.awt.*;
  3. import java.awt.event.*;
  4. import javax.swing.*;






redactando ...
« Última modificación: 31 de Enero de 2016, 02:38:31 por CompSystems »
Desde Colombia