Para este ejemplo usaremos el ide NetBeans. Yo estoy usando la versión 6.1, pero cualquier versión sirve, sólo que cambian algunos detalles de menor importancia.
Una vez que tengamos creado nuestro proyecto agregamos un nuevo formulario JPanel haciendo click con el boton derecho en el paquete del proyecto donde queremos crearlo, luego en nuevo y despues en JPanel como se muestra en la siguiente figura:
A continuación escribimos el nombre de nuestro formulario en la ventana que aparcerá y aceptamos.
Luego nos debería aparecer el formulario en blanco en nuestro ide como se muestra en la imágen:
Luego nos debería aparecer el formulario en blanco en nuestro ide como se muestra en la imágen:
En este punto tenemos la libertad de diseñar nuestro formulario como lo queramos simplemente arrastrando los componentes de la pantalla de la derecha al formulario. Si en cualquier punto desean ver el diseño final sin tener que ejecutarlo solo hagan click en el boton "Diseño Previo" que esta arriba del formulario.
Como en el futuro usaré esta misma interfaz para explicar como se conecta a una base de datos mySQL usaremos el siguiente esquema:
2. Los jButton 1, 6 y 7 corresponden en orden a:
4. Todos los jTextField tienen etiquetas en blanco.
Ustedes pueden ordenar su interfaz como prefieran pero este es el formato que yo utilizé.
Paso 2: Incrustación de código útil sobre una clase
Para el siguiente paso debemos añadir al paquete de nuestro proyecto una nueva clase de la misma forma como añadimos un JPanel en el Paso 1 pero ahora seleccionamos "Java Class" o "Clase Java".
Una vez que tenemos añadida nuestra clase al proyecto lo primero que tenemos que hacer es extender la clase a JFrame usando la sentencia "extends JFrame" junto al nombre de la clase en la zona de declaración de clase. (Asegurence que el ide haya importado javax.swing.JFrame; - si no lo hizo haganlo manualmente usando "import javax.swing.JFrame;" antes de la zona de declaración de clase).
Ahora nos vamos al código del JPanel haciendo click en el botón "Diseño" ubicado sobre el formulario.
Ahora lo que debemos hacer es copiar el codigo de inicializacion de los componentes de la interfaz (jLabel, jTextField y jButton con sus posiciones y etiquetas). Para esto debemos buscar el método initComponents(). Usualmente este método no se ve pero para que podamos usarlo debemos hacer click en lo que se indica en la siguiente imágen:
Una vez que lo hacemos aparecerá el método initComponents(). Posterior a eso debemos seleccionar el método completo y copiarlo a la clase que creamos bajo el metodo constructor de la misma. Este es el metodo constructor (uso el nombre IDEejemplo como nombre de clase):
public IDEejemplo()
{
}
Cuando hayamos hecho eso debemos hacer lo mismo con las variables. Estas se encuantran bajo la el método initComponents() mostrado en la imágen anterior. Debemos copiar todas las variables a la clase en la parte de declaración de variables sobre el método constructor vacío.
De esta forma nos quedaría así:
public class nombreDeTuClase {
Declaración de variables;
Método constructor vacío
{
}
Método initComponents
{
}
}
Una vez que esto esta listo, en el constructor vacío debemos añadir una llamada al método initComponents() usando la sentencia "initComponents();". De esta forma al crear una nueva instancia del constructor el método initComponents() cargará todos los componentes con las etiquetas y las posiciones establecidas en el JPanel.
public Login()
{
initComponents();
}
Pero si sólo hacemos esto el formulario nunca será visible. Para esto debemos añadir en el constructor la sentencia: "this.setVisible(true);". Con esto estamos diciendo que el formulario se haga visible en el mismo momento que creamos una nueva instancia del método constructor (Ej: Formulario form = new Formulario(); --> Al hacer esto el constructor hace visible inmediatamente la ventana).
Ahora en el método initComponents() debemos añadir antes de la última llave de cierre la sentencia "pack();". Con esto indicamos que empaquetamos todos los componentes en el formulario para que se puedan ver.
Además de esto debemos buscar el siguiente código en el método initComponents():
javax.swing.GroupLayout layout = new javax.swing.GroupLayout(this);
this.setLayout(layout);
Una vez que lo tengamos reemplazamos ambos this por la sentencia getContentPane(). Con esto estamos pidiendo el Panel del contenedor actual para insertarle los componentes.
Si cuando crearon la interfaz no modificaron las etiquetas de los componentes ahora es el momento de hacerlo. En el metodo initComponents() deben modificar las sentencias .setText("etiqueta"); por las que quieran. Por ejemplo jLabel1.setText("jLabel1"); la modificamos por jLabel1.setText("ID");. Hacemos esto con todos los componentes.
Ahora sólo falta ejecutarlo y ver el resultado de la interfaz. Para eso debemos crear la clase main() o sólo añadir el método main() a nuestra clase:
public static void main(String args[]){
IDEejemplo objeto = new IDEejemplo();
}
Este codigo puede ir en la misma clase o en una clase externa.
Nota: Para ejecutar asegurense de tener el proyecto como principal ya que si no lo tienen, el ide puede lanzar un error con el contenedor de la interfaz)
Con este código ya pueden diseñar sus propias interfaces gráficas usando la misma lógica.
Ahora que ya les funcionó vayanse a descansar por que probablemente deben estar aburridos con tando initComponent y código java. Para la siguiene guía explicaré como añadir acciones a los jButton usando el método actionListener();
Código fuente
Les dejo el código fuente del programa pero les RECOMIENDO QUE LO HAGAN USTEDES ya que se aprende más que copiando y pegando el código:
http://www.megaupload.com/?d=CVKNCZIP
Hasta la próxima y no olviden comentar, pregunta por dudas o aconsejar para una futura guía.
Como en el futuro usaré esta misma interfaz para explicar como se conecta a una base de datos mySQL usaremos el siguiente esquema:
No se preocupen por las etiquetas de los componentes ya que estan pueden cambiarse en el futuro en el código fuente del programa, aunque estas pueden modificarse dando dos click lentos sobre el componente.
1. Los jButtons del 2 al 5 corresponden en orden a:
1. Los jButtons del 2 al 5 corresponden en orden a:
- Nuevo
- Modificar
- Guardar
- Eliminar
- Listar Datos
- Salir
- Buscar
- ID
- Precio
- Descrición
- Número Bodega
- Stock por compra --> La cantidad de este producto que se compra cada vez
- Stock actual
- Stock crítico --> Cuando el Stock actual llega al indicado por el crítico se realiza una compra
- Buscar
4. Todos los jTextField tienen etiquetas en blanco.
Ustedes pueden ordenar su interfaz como prefieran pero este es el formato que yo utilizé.
Paso 2: Incrustación de código útil sobre una clase
Para el siguiente paso debemos añadir al paquete de nuestro proyecto una nueva clase de la misma forma como añadimos un JPanel en el Paso 1 pero ahora seleccionamos "Java Class" o "Clase Java".
Una vez que tenemos añadida nuestra clase al proyecto lo primero que tenemos que hacer es extender la clase a JFrame usando la sentencia "extends JFrame" junto al nombre de la clase en la zona de declaración de clase. (Asegurence que el ide haya importado javax.swing.JFrame; - si no lo hizo haganlo manualmente usando "import javax.swing.JFrame;" antes de la zona de declaración de clase).
Ahora nos vamos al código del JPanel haciendo click en el botón "Diseño" ubicado sobre el formulario.
Ahora lo que debemos hacer es copiar el codigo de inicializacion de los componentes de la interfaz (jLabel, jTextField y jButton con sus posiciones y etiquetas). Para esto debemos buscar el método initComponents(). Usualmente este método no se ve pero para que podamos usarlo debemos hacer click en lo que se indica en la siguiente imágen:
Una vez que lo hacemos aparecerá el método initComponents(). Posterior a eso debemos seleccionar el método completo y copiarlo a la clase que creamos bajo el metodo constructor de la misma. Este es el metodo constructor (uso el nombre IDEejemplo como nombre de clase):
public IDEejemplo()
{
}
Cuando hayamos hecho eso debemos hacer lo mismo con las variables. Estas se encuantran bajo la el método initComponents() mostrado en la imágen anterior. Debemos copiar todas las variables a la clase en la parte de declaración de variables sobre el método constructor vacío.
De esta forma nos quedaría así:
public class nombreDeTuClase {
Declaración de variables;
Método constructor vacío
{
}
Método initComponents
{
}
}
Una vez que esto esta listo, en el constructor vacío debemos añadir una llamada al método initComponents() usando la sentencia "initComponents();". De esta forma al crear una nueva instancia del constructor el método initComponents() cargará todos los componentes con las etiquetas y las posiciones establecidas en el JPanel.
public Login()
{
initComponents();
}
Pero si sólo hacemos esto el formulario nunca será visible. Para esto debemos añadir en el constructor la sentencia: "this.setVisible(true);". Con esto estamos diciendo que el formulario se haga visible en el mismo momento que creamos una nueva instancia del método constructor (Ej: Formulario form = new Formulario(); --> Al hacer esto el constructor hace visible inmediatamente la ventana).
Ahora en el método initComponents() debemos añadir antes de la última llave de cierre la sentencia "pack();". Con esto indicamos que empaquetamos todos los componentes en el formulario para que se puedan ver.
Además de esto debemos buscar el siguiente código en el método initComponents():
javax.swing.GroupLayout layout = new javax.swing.GroupLayout(this);
this.setLayout(layout);
Una vez que lo tengamos reemplazamos ambos this por la sentencia getContentPane(). Con esto estamos pidiendo el Panel del contenedor actual para insertarle los componentes.
Si cuando crearon la interfaz no modificaron las etiquetas de los componentes ahora es el momento de hacerlo. En el metodo initComponents() deben modificar las sentencias .setText("etiqueta"); por las que quieran. Por ejemplo jLabel1.setText("jLabel1"); la modificamos por jLabel1.setText("ID");. Hacemos esto con todos los componentes.
Ahora sólo falta ejecutarlo y ver el resultado de la interfaz. Para eso debemos crear la clase main() o sólo añadir el método main() a nuestra clase:
public static void main(String args[]){
IDEejemplo objeto = new IDEejemplo();
}
Este codigo puede ir en la misma clase o en una clase externa.
Nota: Para ejecutar asegurense de tener el proyecto como principal ya que si no lo tienen, el ide puede lanzar un error con el contenedor de la interfaz)
Con este código ya pueden diseñar sus propias interfaces gráficas usando la misma lógica.
Ahora que ya les funcionó vayanse a descansar por que probablemente deben estar aburridos con tando initComponent y código java. Para la siguiene guía explicaré como añadir acciones a los jButton usando el método actionListener();
Código fuente
Les dejo el código fuente del programa pero les RECOMIENDO QUE LO HAGAN USTEDES ya que se aprende más que copiando y pegando el código:
http://www.megaupload.com/?d=CVKNCZIP
Hasta la próxima y no olviden comentar, pregunta por dudas o aconsejar para una futura guía.
Capo, necesito ayuda.
ResponderEliminarQuiero crear una interfaz gráfica para una aplicación que hice, y parte de ella incluye algo así como un "árbol de check box". Y no puedo encontrar una forma fácil de hacerlo mediante Netbeans.