En este tutorial explicaremos cómo hacer nuestro primera interfaz gráfica en Netbeans.

La versión del NetBeans de este tutorial es:  6.7.1

Primera etapa: Inicio

1)Abrí el NetBeans desde: Inicio>TodosLosProgramas>NetBeans>NetBeans 6.7.1

2)Crea un nuevo Proyecto:  “File”>”New Project”.  En la próxima ventana selecciona en “categoría”:java y en  “Projects”:


Java Application

Damos click a “Next” y rellenamos los siguientes campos con estos datos:

En:

  • Name: InterfazGráfica
  • Project Location: Puedes elegir cualquier ruta, acá elegimos “C:\Documents and Settings\Administrador\Mis documentos\NetBeansProjects”
  • Set as main project: Lo marcamos
  • Create Main class: lo desmarcamos

Segunda etapa: creación de la clase

1)Posicionate sobre el nombre del proyecto, haz click con el botón derecho del mouse, y elige New>JFrame form

JFrameNetbeans

Se nos abrirá una ventana, en ella escribiremos lo siguiente (en verdad sólo en ClassName)

  • Class Name: MiPrimerForm
  • Project: InterfazGráfica
  • Location:Source Packages

nombreformnetbeans

Damos click a finish y aparecerá la siguiente pantalla:

paletasnetbeans

Vamos a hablar un poco sobre esta pantalla….

Observa a la derecha, tenemos dos cuadrados.  Uno llamado palette donde están todos los componentes que puedes usar y abajo están las propiedades de los componentes, el código, los eventos y el binding.  Ahí podrás cambiar las propiedades desde el color, el texto, agregarle funcionalidad a través de los eventos y hacer los bindings que quieras.

paletaypropiedadesnetbeans

Si prestan atención al margen inferior izquierda podrán ver que a medida que agreguen componentes se verá reflejado en esa ventana

InspectorNetBeans

Tercera etapa: Construir un formulario

1)Ya tenemos el frame, ahora necesitamos elegir el contenedor de este frame.  En el ejemplo elegiremos el panel: click sobre panel, luego click sobre el frame donde deseamos el panel.

2)Una vez ubicado, le daremos el tamaño que querramos agrandando el panel tanto como tú quieras con el mouse (también lo puedes hacer desde propiedades)

3)Necesitamos darle un tipo de layout.  Nos ubicamos en el panel, hacemos click con el botón derecho: setLayout>Absolute Layout, como se muestra en la figura

setlayoutnetbeans

nota: El tipo de capa lo elige uno depende de lo que se necesite o se quiera.

Una vez puesto el contenedor y elegido el tipo de capa, vamos a ir arrastrando y soltando controles dentro de este panel.

Elijamos un TextField y pongamosló donde querramos.  Para cambiar el texto mostrado, fijate en el cuadro derecho llamado “propiedades” (está debajo de patterns), y busca la propiedad “text”.  Ahí mismo puedes cambiar el texto poniéndole lo que tu quieres

cambiarpropiedadnetbeans

Ahora pondremos varios TextField, Labels, textArea para darle un poco de color a esta formulario

AltaSitios

Si quieres darle funcionalidad a la pantalla, tienes que ir a la parte de código, en el margen superior, al lado de la pestaña design, elige source y te llevará directamente al código

VerCódigoNetBeans

Para ver realmente como se verá la interfaz cuando es ejecutada como una aplicación normal ve a Run>Run File y listo.  Mira como queda el mío llenándole los campos!

formulariofinal