Diseñar un GUI Swing en NetBeans IDE

Este tutorial le guiará en el proceso de creación de la interfaz gráfica de usuario (GUI) para una aplicación llamada ContactEditor usando el IDE NetBeans GUI Builder. En el proceso se le diseño un front-end GUI que permite ver y editar información de contacto de los individuos incluidos en una base de datos del empleado.

En este tutorial aprenderá cómo: utilizar la interfaz del GUI Builder, crear un contenedor de GUI, añadir, redimensionar y alinear componentes, ajustar componentes de anclaje, establecer el comportamiento de cambio de tamaño automático de componentes, editar propiedades de componente.

Este tutorial toma aproximadamente 30 minutos para completar.

Contenido

Introducción o Creación de un proyecto o Creación de un contenedor de JFrame

Familiarizarse con el GUI Builder Conceptos clave

o Diseño libre o Automática de los componentes posicionamiento (ajuste) o Retroalimentación Visual

Lo primero es lo primero o Adición de componentes: Los fundamentos o Adición de componentes individuales al formulario o Agregar varios componentes al formulario o Insertar componentes

Avanzar o Alineación de componente o Alineación de la línea de base

Revisar lo que hemos aprendido o Agregar, alinear y anclaje o Tamaño del componente o Sangría

Hacer los ajustes finales Vista previa de su GUI

Implementación de aplicaciones GUI Véase también

Introducción

GUI Builder del IDE hace posible construir aspecto profesional de interfaces gráficas de usuario sin una comprensión íntima de los administradores de diseño. Usted puede diseñar sus formularios simplemente colocando componentes donde quieras.

Para obtener descripciones de retroalimentación visual del constructor de la GUI, puede usar la GUI Builder leyenda de retroalimentación Visual.

Creación de un proyecto

Porque todo el desarrollo de Java en el IDE tiene lugar dentro de los proyectos, primero necesitamos crear un nuevo proyecto de ContactEditor en el que almacenar fuentes y otros archivos de proyecto. Un proyecto IDE es un grupo de archivos de código fuente de Java más sus metadatos asociados, incluidos los archivos de propiedades específicas del proyecto, un script de compilación de Ant que controla la generación y realizar ajustes y un archivo project.xml que se asigna objetivos de hormiga a los comandos IDE. Mientras que las aplicaciones Java a menudo consisten en varios proyectos IDE, a los efectos de este tutorial, vamos a construir una aplicación simple que se almacena completamente en un solo proyecto.

Para crear un nuevo proyecto de aplicación de ContactEditor :

1. Elija Archivo > nuevo proyecto. Alternativamente, puede hacer clic en el icono de nuevo proyecto en la barra de herramientas IDE.

2. En el panel de categorías, seleccione el nodo de Java y en el panel de proyectos, elija aplicación Java. Haga clic en siguiente.

3. Introduzca ContactEditor en el campo de nombre del proyecto y especifique la ubicación del proyecto.

4. Deje la carpeta de uso dedicado para almacenar bibliotecas de casilla de verificación no está seleccionada.

5. Asegúrese de que el conjunto como principal proyecto de casilla de verificación está seleccionado y borrar el campo de la clase principal de crear.

6. Haga clic en Finalizar.

El IDE crea la carpeta ContactEditor en el sistema en el lugar designado. Esta carpeta contiene todos los archivos asociados del proyecto, incluyendo su script de Ant, carpetas para almacenar fuentes y pruebas y una carpeta de metadatos específicos del proyecto. Para ver la estructura del proyecto, utilice la ventana de archivos del IDE.

Creación de un contenedor de JFrame

Después de crear la nueva aplicación, usted puede haber notado que la carpeta de paquetes de código en la ventana de proyectos contiene un nodo de vacío < paquete predeterminado > . Para continuar con la construcción de nuestra interfaz, necesitamos crear un contenedor de Java dentro de la cual colocamos los otros componentes necesarios de GUI. En este paso crearemos un recipiente utilizando el componente JFrame y coloque el recipiente en un nuevo paquete.

Para agregar un contenedor de JFrame :

1. En la ventana de proyectos, haga clic en el nodo ContactEditor y elija Nuevo > formulario de JFrame. Alternativamente, usted puede encontrar una forma de JFrame eligiendo Nueva > Otros > Swing GUI Forms > formulario de JFrame.

2. Introduzca ContactEditorUI como el nombre de clase.3. Introduzca my.contacteditor como el paquete.4. Haga clic en Finalizar.

El IDE crea la forma de ContactEditorUI y la clase de ContactEditorUI dentro de la aplicación de ContactEditorUI.java y abre el formulario de ContactEditorUI en el GUI Builder. Observe que el paquete de my.contacteditor reemplaza el paquete predeterminado.

Familiarizarse con el GUI Builder

Ahora que hemos configurado un nuevo proyecto para nuestra aplicación, Tomémonos un minuto para familiarizarnos con el interfaz del GUI Builder.

Nota: Para explorar la interfaz GUI Builder con una demostración interactiva, ver el screencast de Explorar GUI Builder (.swf) .

Cuando agregamos el contenedor de JFrame, el IDE abrió la forma de ContactEditorUI recién creado en la ficha de una Editor con una barra de herramientas que contiene varios botones, como se muestra en la ilustración anterior. El formulario de ContactEditor se abre en la vista Diseño de la GUI Builder y tres ventanas adicionales aparecieron automáticamente en los bordes del IDE, lo que le permite navegar, organizar y editar formularios GUI como usted construirlas.

Varias ventanas de la GUI Builder incluyen:

Diseño zona.Ventana principal de la GUI Builder para crear y editar formularios GUI de Java. Botón de fuente de la barra de herramientas le permite ver el código de fuente de una clase, el botón de diseño le permite ver una vista gráfica de los componentes de la GUI, el botón Historial le permite acceder a la historia local de los cambios del archivo. Los botones de la barra de herramientas adicional ofrecen un conveniente acceso a comandos comunes, como elegir entre los modos de selección y conexión, alinear componentes, ajuste el comportamiento de cambio de tamaño automático de componentes y previsualización de formularios.

Navigator.Proporciona una representación de todos los componentes visuales y no visuales, en su aplicación como una jerarquía de árbol. El navegador también proporciona información visual acerca de qué componente en el árbol se está editando en el GUI Builder, así como le permite organizar los componentes en los paneles disponibles.

Paleta.Una lista personalizable de componentes disponibles que contiene fichas de componentes JavaBeans, JFC/Swing y AWT, así como los administradores de diseño. Además, puede crear, quitar y reorganizar las categorías que se muestran en la paleta utilizando el customizer.

Ventana de propiedades de.Muestra las propiedades del componente seleccionado actualmente en el GUI Builder, Navigator ventanas, ventana de proyectos o archivos.

Si hace clic en el botón de la fuente, la muestra IDE código de la aplicación de Java en el Editor de secciones de código que se generan automáticamente por el constructor de interfaz gráfica de usuario indicado por zonas grises (se convierten en azules cuando seleccionado), llamados bloques protegidos. Bloques protegidos son zonas protegidas que no son editables en la vista Código fuente. Sólo se puede editar código que aparecen en las zonas blancas del Editor cuando en la vista Código fuente. Si necesita realizar cambios en el código dentro de un bloque protegido, haciendo clic en el botón diseño vuelve Editor del IDE a la GUI Builder donde usted puede hacer los ajustes necesarios en el formulario. Cuando guarde los cambios, el IDE actualiza fuentes del archivo.

Nota: Para los desarrolladores avanzados, el administrador de la paleta está disponible que permite agregar componentes personalizados de los frascos, bibliotecas, u otros proyectos a la paleta. Para agregar componentes personalizados mediante el administrador de paleta, elija Herramientas > paleta > componentes Swing/AWT.

Conceptos clave

GUI Builder del IDE resuelve el problema básico de la creación de GUI de Java al optimizar el flujo de trabajo de la creación de interfaces gráficas, liberando a los desarrolladores de las complejidades de los administradores de diseño de Swing. Lo hace mediante la ampliación de la actual IDE de NetBeans GUI Builder para apoyar un sencillo paradigma de "Diseño libre" con reglas de diseño sencillo que son fáciles de entender y usar. Como usted diseñar el formulario, el GUI Builder proporciona pautas visuales sugiriendo espaciado óptimo y la alineación de los componentes. En el fondo, el GUI Builder se traduce sus decisiones de diseño en una interfaz de usuario funcional que se implementa utilizando el nuevo administrador de diseño GroupLayout y otras construcciones de Swing. Porque utiliza un modelo de diseño dinámico, GUI construido con el GUI Builder se comportan como usted esperaría en tiempo de ejecución, ajuste para adaptarse a los cambios que realice sin alterar las relaciones definidas entre los componentes. Siempre cambiar el tamaño del formulario, cambiar configuraciones regionales o especificar un aspecto diferente, su GUI se ajusta automáticamente para respetar márgenes del destino aspecto y los desvíos.

Diseño libre

En GUI Builder del IDE, usted puede construir sus formularios simplemente poniendo componentes donde quieras como si estuviera utilizando una posición absoluta. Las cifras de GUI Builder que diseño atributos son necesarios y, a continuación, genera el código para usted automáticamente. No necesita preocuparse con inserciones, anclajes, rellenos y así sucesivamente.

Automática de los componentes posicionamiento (ajuste)

Como agregar componentes a un formulario, el generador de interfaz gráfica de usuario proporciona retroalimentación visual que ayuda en el posicionamiento de componentes basados en la apariencia de su sistema operativo. El GUI Builder proporciona sugerencias de ayuda en línea y otra información visual sobre donde deben colocar los componentes en su formulario, encajando automáticamente componentes en posición a lo largo de las directrices. Hace estas sugerencias basadas en las posiciones de los componentes que ya se han colocado en el formulario, permitiendo el acolchado debe permanecer flexible que destino diferente aspecto y siente representar correctamente en tiempo de ejecución.

Retroalimentación Visual

El GUI Builder también proporciona información visual sobre el componente de anclaje y encadenamiento de relaciones. Estos indicadores permiten identificar rápidamente las diversas relaciones de posicionamiento y componente fijando el comportamiento que afectan la forma de su GUI tanto aparecerá y se comportan en tiempo de ejecución. Esto acelera el proceso de diseño de GUI, lo que le permite crear rápidamente interfaces visuales de aspecto profesional que trabajan.

Lo primero es lo primero

Ahora que ya se han familiarizado con la interfaz del GUI builder, es tiempo para empezar a desarrollar la interfaz de usuario de nuestra aplicación de ContactEditor. En esta sección echaremos un vistazo utilizando paleta del IDE para agregar los diversos componentes de la GUI que necesitamos a nuestro formulario.

Gracias a paradigma de diseño libre del IDE, ya no tienes que luchar con los gerentes de disposición para controlar el tamaño y la posición de los componentes dentro de los contenedores. Todo lo que necesitas hacer es arrastrar y soltar los componentes que necesita para su forma de GUI como se muestra en las ilustraciones que siguen.

Nota: Consulte el screencast Agregar individual y múltiples componentes (.swf) para una demostración interactiva de la sección a continuación.

Adición de componentes: Los fundamentos

Aunque GUI Builder del IDE simplifica el proceso de creación de GUI de Java, suele ser útil esbozar la forma que desee su interfaz a buscar antes de empezar a poner hacia fuera. Muchos diseñadores de interfaz consideran esto una técnica de "mejores prácticas", sin embargo, para los propósitos de este tutorial usted puede simplemente vistazo cómo debería ser nuestro formulario saltando adelante a la sección de vista previa de su GUI .

Puesto que ya hemos añadido un JFrame como contenedor de nivel superior de nuestro formulario, el siguiente paso es añadir un par de JPanels que permitirá agrupar los componentes de nuestra interfaz de usuario utilizando las fronteras tituladas. Consulte las siguientes ilustraciones y observa un comportamiento "arrastrar y soltar" del IDE cuando lograrlo.

Para agregar un JPanel:

1. En la ventana de la paleta, seleccione el componente del Panel de la categoría de contenedores Swing pulsando y soltando el botón del ratón.

2. Mueva el cursor a la esquina superior izquierda del formulario en el GUI Builder. Cuando el componente está situado cerca de la parte superior del contenedor y bordes izquierdos, pautas de alineación horizontal y vertical indicándote los márgenes de preferencia. Haga clic en el formulario para colocar el JPanel en esta ubicación.

El componente JPanel aparece en el formulario de ContactEditorUI con orange destacando lo que significa que está seleccionado. Después de soltar el botón del ratón, pequeños indicadores parecen mostrar relaciones de anclaje del componente y un nodo de JPanel correspondiente se muestra en la ventana del navegador, como se muestra en la siguiente ilustración.

A continuación, necesitamos cambiar el tamaño de los JPanel para hacer espacio para los componentes a colocar dentro de ella un poco más tarde, pero tomemos un minuto para señalar otra de características de visualización de la GUI Builder primera. Para ello necesitamos deseleccionar el JPanel que acaba de agregar. Porque no hemos añadido un borde del título, sin embargo, el panel desaparece. Sin embargo, hay que tener en cuenta que al pasar el cursor sobre el JPanel, sus bordes cambian a gris claro para que pueda verse claramente su posición. Sólo debe pulsar en cualquier lugar dentro del componente lo vuelva a seleccionar y provocar los controladores de tamaño y los indicadores de anclaje para reaparecer.

Para cambiar el tamaño del JPanel:

1. Seleccione el JPanel que acaba de agregar. Los controladores de tamaño cuadrado pequeño a aparecer alrededor del perímetro del componente.

2. Pulse y sujete el mango de tamaño del borde derecho de la JPanel y arrastre hasta la directriz de alineación punteado aparece cerca del borde del formulario.

3. Manija de liberación el cambio de tamaño para cambiar el tamaño del componente.

El componente JPanel se extiende para abarcar entre izquierda y derecha del contenedor márgenes según el desplazamiento recomendado, como se muestra en la siguiente ilustración.

Ahora que hemos añadido un panel para contener la información de nombre de nuestra interfaz de usuario, tenemos que repetir el proceso para agregar otro directamente debajo de la primera para la información de correo electrónico. Refiriéndose a las ilustraciones siguientes, repita las anteriores dos tareas, prestando atención a la GUI Builder sugerido posicionamiento. Observe que el sugerido espaciado vertical entre los dos JPanels es mucho menor que en los bordes. Una vez que haya agregado la segunda JPanel, sombrearlo tal que llene el formulario queda espacio vertical.

Porque queremos distinguir visualmente las funciones en las secciones superiores e inferiores de nuestra GUI, necesitamos agregar un borde y un título a cada JPanel. Primero lo logramos esto mediante la ventana Propiedades y, a continuación, intentaremos mediante el menú emergente.

Para agregar bordes de título a los JPanels:

1. Seleccione el JPanel superior en el GUI Builder.2. En la ventana Propiedades, haga clic en el botón de puntos suspensivos (...) junto

a la propiedad de la frontera.3. En el editor de frontera de JPanel que aparece, seleccione el nodo de

TitledBorder en el panel de fronteras disponibles.4. En el panel Propiedades situado debajo, escriba el nombre para la propiedad

Title.5. Haga clic en el botón de puntos suspensivos (...) junto a la propiedad Font,

seleccione el estilo de fuente negrita y escriba 12 para el tamaño. Haga clic en Aceptar para salir de los cuadros de diálogo.

6. Seleccione el fondo JPanel y repita los pasos 2 a 5, pero esta vez con el botón derecho el JPanel y acceder a la ventana de propiedades utilizando el menú emergente. Escriba el correo electrónico para la propiedad de título.

Fronteras tituladas se agregan a ambos componentes JPanel .

Adición de componentes individuales al formulario

Ahora tenemos que comenzar a añadir los componentes que va a presentar la información de contacto real en nuestra lista de contactos. En esta tarea añadiremos cuatro JTextFields que mostrará la información de contacto y el JLabels que se describen. Al lograr esto, observe las pautas horizontales y verticales que muestra el GUI Builder, sugiriendo el espacio preferido de la componente según lo definido por la apariencia de su sistema operativo. Esto asegura que su GUI se procesa automáticamente respetando la apariencia del sistema operativo destino en tiempo de ejecución.

Para agregar un JLabel al formulario:

1. En la ventana de la paleta, seleccione el componente Label de la categoría de controles Swing.

2. Mueva el cursor sobre el nombre de JPanel hemos añadido antes. Cuando las directrices aparecen indicando que el JLabel es colocado en la esquina superior izquierda de la JPanel con un pequeño margen en los bordes superiores e izquierdos, haga clic para colocar la etiqueta.

El JLabel se agrega al formulario y se agrega un nodo correspondiente que representa el componente a la ventana del Inspector.

Antes de ir más lejos, tenemos que editar el texto de la pantalla de la JLabel hemos añadido. Aunque puede editar el texto de pantalla del componente en cualquier momento, la forma más fácil es hacerlo como agregarlos.

Para editar el texto de un JLabel:

1. Haga doble clic en el JLabel para seleccionar el texto de la pantalla.2. Tipo nombre: y presiona Enter.

Se muestra el nuevo nombre de JLabel y ajusta la anchura del componente como resultado de la edición.

Ahora agregaremos un JTextField así que podemos conseguir un vistazo de la característica de alineación de base de la GUI Builder.

Para agregar un JTextField al formulario:

1. En la ventana de la paleta, seleccione el componente del campo de texto de la categoría de controles Swing.

2. Mover el cursor inmediatamente a la derecha de la nombre: JLabel hemos añadido. Cuando la directriz horizontal aparece para indicar que base de JTextField está alineada con la de la JLabel y sugiere el espaciado entre los dos componentes con una orientación vertical, haga clic para colocar el JTextField.

El JTextField encaje en forma alineada con la línea de base del JLabel, como se muestra en la siguiente ilustración. Observe que el JLabel cambiado ligeramente inclinado hacia abajo para que se alinee con la línea de base del campo de texto del taller. Como de costumbre, un nodo que representa el componente se agrega a la ventana del navegador.

Antes de continuar, necesitamos agregar un adicional JLabel y JTextField inmediatamente a la derecha de los que hemos añadido, como se muestra en la siguiente ilustración. Esta vez escriba apellido: como el JLabel mostrar texto y dejar el texto de marcador de posición de la JTextFields como está por ahora.

Cambiar el tamaño de un JTextField:

1. Seleccione el JTextField que hemos añadido a la derecha de la apellido: JLabel.

2. Arrastre del JTextField borde derecho redimensionar hacia el borde derecho de la envolvente JPanel.

3. Cuando las guías de alineación vertical aparecen sugiriendo el margen entre el campo de texto y el borde derecho de la JPanel, suelte el botón del ratón para cambiar el tamaño del JTextField.

Borde derecho del JTextField encaje en alineación con margen de borde recomendado del JPanel, como se muestra en la siguiente ilustración.

Agregar varios componentes al formulario

Ahora agregaremos el Título: y apodo: JLabels que describen dos JTextFields que vamos a agregar en un minuto. Nos podrá arrastrar y soltar los componentes mientras presiona la tecla Mayús, para agregarlos rápidamente a la forma. Al lograr esto, nuevamente Observe que el GUI Builder muestra pautas horizontales y verticales sugiriendo el espaciado de componente preferido.

Para agregar varios JLabels al formulario:

1. En la ventana de la paleta, seleccione el componente Label de la categoría de controles Swing pulsando y soltando el botón del ratón.

2. Mueva el cursor sobre el formulario directamente el nombre: JLabel que agregó anteriormente. Cuando las directrices aparecen indicando que el borde izquierdo de la JLabel nuevo esté alineada con la de JLabel arriba y un pequeño margen que existe entre ellos, Mayús-clic para colocar el primer JLabel.

3. Mientras sigue presionando la tecla Mayús, coloque otro JLabel inmediatamente a la derecha de la primera. Asegúrese de soltar la tecla Shift antes de posicionar el segundo JLabel. Si se olvida de que suelte la tecla Mayús antes de posicionar el último JLabel, simplemente pulse la tecla Escape.

Los JLabels se agregan a la forma de crear una segunda fila, como se muestra en la siguiente ilustración. Se agregan nodos que representan a cada componente a la ventana del navegador.

Antes de continuar, necesitamos editar el nombre de la JLabels por lo que podremos ver el efecto de las alineaciones que más tarde lo fijamos.

Para editar el texto de la pantalla de JLabels:

1. Haga doble clic en la primera JLabel para seleccionar el texto de la pantalla.2. Tipo Título: y presiona Enter.3. Repita los pasos 1 y 2, entrando apodo: de propiedad de nombre de la segunda

JLabel.

Nuevos nombres el JLabels aparecen en el formulario y se desplazan como resultado de sus anchos editadas, como se muestra en la siguiente ilustración.

Insertar componentes

Nota: Consulte el screencast de componentes de inserción (.swf) para una demostración interactiva de la sección a continuación.

A menudo es necesario añadir un componente entre los componentes que ya se colocan en un formulario. Cuando se añade un componente entre dos componentes existentes, el GUI Builder cambia automáticamente para hacer espacio para el nuevo componente. Para demostrarlo, podrá insertar un JTextField entre la JLabels hemos añadido previamente, como se muestra en las ilustraciones siguientes dos.

Para insertar un JTextField entre dos JLabels:

1. En la ventana de la paleta, seleccione el componente del campo de texto de la categoría de controles Swing.

2. Mueva el cursor sobre el Título: y apodo: JLabels en la segunda fila tal que el JTextField superpone a ambos y se alinea con sus líneas de base. Si encuentra dificultad para colocar el nuevo campo de texto, puede ajustar la orientación izquierda del JLabel apodo como se muestra en la primera imagen que aparece a continuación.

3. Haga clic para colocar el JTextField entre el Título: y apodo: JLabels.

El JTextField encaje en su posición entre los dos JLabels. La derecha JLabel se desplaza hacia la derecha de la JTextField para acomodar el desplazamiento horizontal sugerido.

Todavía tenemos que añadir un JTextField adicional al formulario que mostrará el apodo de cada contacto en el lado derecho del formulario.

Para agregar un JTextField:

1. En la ventana de la paleta, seleccione el componente del campo de texto de la categoría de Swing.

2. Mueva el cursor a la derecha de la etiqueta de apodo y haga clic para colocar el campo de texto.

El JTextField encaje en su lugar al lado de la JLabel a su izquierda.Cambiar el tamaño de un JTextField:

1. Arrastre los controladores de tamaño de la apodo: JTextField de la etiqueta agregó en la tarea anterior hacia la derecha de la envolvente JPanel.

2. Cuando las guías de alineación vertical aparecen sugiriendo el margen entre el campo de texto y los bordes de JPanel, suelte el botón del ratón para cambiar el tamaño del JTextField.

Borde derecho del JTextField encaje en alineación con margen de borde recomendado del JPanel y la GUI Builder infiere el comportamiento de cambio de tamaño adecuado.

3. Pulse Ctrl-S para guardar el archivo.

Avanzar

La alineación es uno de los aspectos más fundamentales de la creación de interfaces de usuario de aspecto profesional. En la sección anterior tenemos un vistazo de las características de alineación del IDE al agregar los componentes JLabel y JTextField a nuestro formulario de ContactEditorUI. A continuación, tomaremos una más en profundidad vistazo a funciones de alineación de la GUI Builder ya que trabajamos con los distintos componentes que necesitamos para nuestra aplicación.

Alineación de componente

Nota: Consulte el screencast de alineación y fijación de componentes (.swf) para una demostración interactiva en las secciones siguientes.

Cada vez que agregue un componente a un formulario, el GUI Builder efectivamente alinea, evidenciada por las guías de alineación que aparecen. A veces es necesario, sin embargo, especificar diferentes relaciones entre grupos de componentes así. Anteriormente hemos añadido cuatro JLabels que necesitamos para nuestra GUI ContactEditor, pero no alinearlos. Ahora podrá alinear las dos columnas de JLabels para que sus bordes bien alineados.

Alinear componentes:

1. Mantenga pulsada la tecla Ctrl y haga clic para seleccionar el nombre: y Título: JLabels en el lado izquierdo del formulario.

2. Haga clic en el alinear a la derecha en el botón de la columna ( ) en la barra de herramientas. Alternativamente, puede uno con el botón derecho y seleccione Alinear > derecha en la columna en el menú emergente.

3. Repita esto para la apellido: y apodo: JLabels así.

Posiciones de la JLabels cambio tal que queden alineados los bordes derecho de su pantalla de texto. Se actualizan las relaciones de anclaje, que indica que los componentes han sido agrupados.

Antes de que haya terminado con el JTextFields hemos añadido anteriormente, que tenemos que asegurarnos de los dos JTextFields inserta entre la JLabels se establecen para cambiar el tamaño correctamente. A diferencia de los dos JTextFields que extendía hasta el borde derecho de nuestra forma, comportamiento de resizeability de los componentes insertados no se configuró automáticamente.

Para establecer el comportamiento de resizeability de componentes:

1. Control + clic en los dos componentes de JTextField insertados para seleccionarlos en el GUI Builder.

2. Con ambos JTextFields seleccionados, haga clic en uno de ellos y elegir el cambio

de tamaño automático > Horizontal en el menú emergente.

Los JTextFields están listos para cambiar el tamaño horizontal en tiempo de ejecución. Las directrices de la alineación y fijación de indicadores se actualizan, proporcionando retroalimentación visual de las relaciones de componente.

Para definir los componentes a ser del mismo tamaño:

1. Control y haga clic en todas las cuatro de la JTextFields en forma para seleccionarlos.

2. Con el JTextFields seleccionado, haga clic en alguno de ellos y seleccione Set mismo tamaño > mismo ancho en el menú emergente.

Los JTextFields todos están ajustados a la misma anchura e indicadores se agregan en el borde superior de cada uno, proporcionando retroalimentación visual de las relaciones de componente.

Ahora tenemos que añadir otro JLabel describiendo el JComboBox que permitirá a los usuarios seleccionar el formato de la información que se mostrará nuestra aplicación de ContactEditor.

Para alinear un JLabel a un grupo de componentes:

1. En la ventana de la paleta, seleccione el componente Label de la categoría de Swing.

2. Mueva el cursor debajo del primer nombre y el título JLabels en el lado izquierdo de la JPanel. Cuando la Directiva aparece indicando que borde derecho de la JLabel nuevo esté alineada con el borde derecho del grupo componente arriba (los dos JLabels), haga clic para colocar el componente.

El JLabel encaje en una posición alineada a la derecha con la columna de JLabels arriba, como se muestra en la siguiente ilustración. El GUI Builder actualiza las líneas de estado de alineación que indica la separación de los componentes y relaciones de anclaje.

Como en los ejemplos anteriores, haga doble clic en el JLabel para seleccionar su texto para mostrar y, a continuación, escriba formato de pantalla: para el nombre para mostrar. Observe que cuando el JLabel encaje en su lugar, los demás componentes se desplazan para acomodar el texto más largo.

Alineación de la línea de base

Cada vez que agregue o mover componentes que incluyen texto (JLabels, JTextFields, etcétera), el IDE sugiere alineaciones que se basan en las líneas de base del texto en los componentes. Cuando inserta el JTextField anteriormente, por ejemplo, su línea de base fue automáticamente alineada a la JLabels adyacentes.

Ahora agregaremos el cuadro combinado que permitirá a los usuarios seleccionar el formato de la información que se mostrará nuestra aplicación de ContactEditor. Como agregamos el JComboBox, le hacemos su línea de base del texto de JLabel. AVISO una vez más las pautas de alineación de línea de base que aparecen para ayudarnos con el posicionamiento.

Para alinear las líneas de base de componentes:

1. En la ventana de la paleta, seleccione el componente de cuadro combinado de la categoría de controles Swing.

2. Mueva el cursor inmediatamente a la derecha de la JLabel hemos añadido. Cuando la directriz horizontal aparecerá indicando que instantánea de los JComboBox esté alineada con la línea base del texto en el JLabel y sugiere el espaciado entre los dos componentes con una guía vertical, haga clic para colocar el cuadro combinado.

El componente encaja en una posición alineada con la línea base del texto en el JLabel a su izquierda, como se muestra en la siguiente ilustración. El GUI Builder muestra líneas de Estado que indica la separación de los componentes y relaciones de anclaje.

Cambiar el tamaño de los JComboBox:

1. Seleccione el componente ComboBox en el GUI Builder.2. Arrastre el control de tamaño en el borde derecho de los JComboBox hacia la

derecha hasta que las guías de alineación aparecen sugiriendo el desvío preferido entre los bordes JComboBox y JPanel.

Como se muestra en la ilustración siguiente, borde derecho del JComboBox encaje en alineación con margen de borde recomendado del JPanel y anchura del componente se establece automáticamente para cambiar el tamaño con el formulario.

3. Pulse Ctrl-S para guardar el archivo.

Edición de modelos de componentes es más allá del alcance de este tutorial, así que por el momento dejaremos marcador de posición de los JComboBox lista de elementos como es.

Revisar lo que hemos aprendido

Nos has no tuvieron un buen comienzo construyendo nuestra GUI ContactEditor, pero vamos a tomar un minuto para resumir lo que hemos aprendido mientras añadimos algunos más de los componentes de que nuestra interfaz requiere.

Hasta ahora nos hemos concentrado en Agregar componentes a nuestro GUI ContactEditor utilizando las pautas de alineación del IDE para ayudarnos con el posicionamiento. Es importante comprender, sin embargo, anclaje de la otra parte integrante de la colocación de componentes. Aunque nosotros no hemos discutido aún, usted ya ha tomado ventaja de esta característica sin darse cuenta. Como se mencionó anteriormente, cuando se añade un componente a un formulario, el IDE sugiere que el destino look and feel preferido posicionamiento con directrices. Una vez colocado, nuevos componentes también están anclados al borde del contenedor más cercano o componente para que se mantengan relaciones de componente en tiempo de ejecución. En esta sección, nos concentraremos en llevar a cabo las tareas de una manera más ágil mientras señalando el trabajo el GUI builder está haciendo detrás de las escenas.

Agregar, alinear y anclaje

El GUI Builder permite diseñar los formularios rápidamente y fácilmente mediante la racionalización de los gestos de flujo de trabajo típico. Cuando se añade un componente a un formulario, el GUI Builder automáticamente les encaje en las posiciones deseadas y establece las relaciones de encadenamiento necesarias para que usted pueda concentrarse en el diseño de sus formas, en lugar de luchando con detalles de implementación complicado.

Para agregar, alinear y editar el texto de la pantalla de un JLabel:

1. En la ventana de la paleta, seleccione el componente Label de la categoría de controles Swing.

2. Mueva el cursor sobre el formulario inmediatamente debajo del título de la parte inferior JPanel correo electrónico. Cuando las directrices indicándote que es colocada en la esquina superior izquierda de la JPanel con un pequeño margen en los bordes superiores e izquierdos, haga clic para colocar el JLabel.

3. Haga doble clic en el JLabel para seleccionar el texto de la pantalla. A continuación, escriba dirección de correo electrónico: y presiona Enter.

El JLabel encaje en la posición deseada en el formulario, anclada a los bordes superiores e izquierdos de la envolvente JPanel. Al igual que antes, se agrega un nodo correspondiente que representa el componente a la ventana del navegador.

Para agregar un JTextField:

1. En la ventana de la paleta, seleccione el componente del campo de texto de la categoría de controles Swing.

2. Mueva el cursor inmediatamente a la derecha de la etiqueta de Dirección de correo electrónico que acaba de agregar. Cuando las directrices indicándote que base de JTextField está alineado con la línea base del texto en el JLabel y sugiere el margen entre los dos componentes con una guía vertical, haga clic para colocar el campo de texto.

El JTextField encaje en su posición a la derecha de la dirección de correo electrónico: JLabel y está encadenado a la JLabel. También se agrega el nodo correspondiente a la ventana del Inspector.

3. Arrastre el control de tamaño de JTextField hacia la derecha de la envolvente JPanel hasta que las guías de alineación aparecen sugiriendo el desplazamiento entre los bordes de JTextField y JPanel.

Borde derecho del JTextField se ajusta a la pauta de alineación que indica los márgenes de preferencia.

Ahora tenemos que añadir el JList que mostrará toda la lista de contacto de nuestra ContactEditor.

Para agregar y cambiar el tamaño de un JList:

1. En la ventana de la paleta, seleccione el componente de lista de la categoría de controles Swing.

2. Mueva el cursor inmediatamente por debajo de la Dirección de correo electrónico de JLabel hemos añadido antes. Cuando las directrices aparecen indicando que el JList del superior e izquierdo los bordes estén alineados con los márgenes de preferencia a lo largo de borde izquierdo del JPanel y la JLabel anterior, haga clic para colocar el JList.

3. Arrastre de JList resize derecho hacia la derecha de la envolvente JPanel hasta que las guías de alineación aparecen indicando que es el mismo ancho que el

anterior de JTextField.

El JList encaje en la posición designada por las guías de alineación y su correspondiente nodo aparece en la ventana del Inspector. Observe también que el formulario se expande para acomodar los JList recién agregado.

Desde JLists se utilizan para mostrar largas listas de datos, normalmente requieren la adición de un JScrollPane. Cuando se añade un componente que requiere un JScrollPane, el GUI Builder agrega automáticamente para usted. Porque JScrollPanes son componentes no visuales, tienes que usar la ventana del Inspector para ver o editar cualquier JScrollPanes que creó el GUI Builder.

Tamaño del componente

Nota: Consulte el cambio de tamaño y componentes (.swf) la sangría screencast para una demostración interactiva en las secciones siguientes.

A menudo es beneficioso establecer varios componentes relacionados, tales como botones en los diálogos modales, ser del mismo tamaño para coherencia visual. Para demostrar esto que agregaremos cuatro JButtons a nuestra forma de ContactEditor que nos permitirá agregar, editar y quitar entradas individuales de nuestra lista de contactos, como se muestra en las ilustraciones siguientes. Posteriormente, podrá establecer los cuatro botones para tener el mismo tamaño, por lo que pueden reconocerse fácilmente como ofrecer funcionalidad relacionada.

Para agregar, alinear y editar el texto de la pantalla de varios botones:

1. En la ventana de la paleta, seleccione el componente Button de la categoría de controles Swing.

2. Mueva el JButton sobre el borde derecho de la Dirección de correo electrónico JTextField en el JPanel inferior. Cuando las directrices aparecen indicando que el JButton instantánea y borde derecho estén alineados con la del JTextField, Mayús-clic para colocar el primer botón borde derecho del JFrame. Ancho del JTextField se encoge para acomodar el JButton cuando suelte el botón del ratón.

3. Mueva el cursor sobre la esquina superior derecha de la JList en el JPanel inferior. Cuando las directrices aparecen indicando que el JButton del superior y derecho bordes estén alineados con la de los JList, Mayús-clic para colocar el segundo botón borde derecho del JFrame.

4. Agregue dos JButtons adicionales por debajo de los dos que ya hemos añadido para crear una columna. Asegúrese de colocar el JButtons tal que el espacio sugerido es respetada y consistente. Si se olvida de que suelte la tecla Mayús antes de posicionar el último JButton, simplemente pulse la tecla Escape.

5. Establecer el texto de la pantalla para cada JButton. (Puede editar el texto de un botón haciendo clic en el botón y elegir Editar texto. O puede hacer clic en el botón pausa y luego haga clic en nuevo.) Escriba Add el botón superior, Edit para el segundo, Remove para el tercero y As Default para el cuarto.

Los componentes JButton encajen en las posiciones designadas por las guías de alineación. La anchura de los cambios de botones para dar cabida a los nuevos nombres.

Ahora que los botones se colocan donde queremos, le fijamos los cuatro botones para tener el mismo tamaño de coherencia visual, así como aclarar que están relacionados funcionalmente.

Para definir los componentes del mismo tamaño:

1. Seleccione todos los cuatro JButtons pulsando la tecla Control al hacer su selección.

2. Uno de ellos con el botón derecho y elija el mismo tamaño > mismo ancho en el menú emergente.

Los JButtons se establecen en el mismo tamaño que el botón con el nombre más largo.

Sangría

A menudo es necesario cluster múltiples componentes bajo otro componente que es evidente pertenecen a un grupo de funciones relacionadas. Un caso típico, por ejemplo, está poniendo varias casillas de verificación relacionados a continuación una etiqueta común. El GUI Builder permite realizar fácilmente la sangría proporcionando directrices especiales sugiriendo el desplazamiento preferido para la apariencia de su sistema operativo.

En esta sección agregaremos unos JRadioButtons por debajo de un JLabel que permite a los usuarios personalizar la forma en que la aplicación muestra los datos. Consulte las siguientes ilustraciones al lograr esto o haga clic en el vínculo Ver Demo siguiendo el procedimiento para ver una demostración interactiva.

Para aplicar una sangría JRadioButtons por debajo de un JLabel:

1. Agregar un JLabel nombrado Formato de correo en el formulario de la JList. Asegúrese de que la etiqueta quede alineado con el JList arriba.

2. En la ventana de la paleta, seleccione el componente de botón de Radio de la categoría de Swing.

3. Mueva el cursor debajo del JLabel que hemos añadido. Cuando las directrices indicándote que borde izquierdo de JRadioButton está alineado con el de la JLabel, mover de la JRadioButton ligeramente hacia la derecha hasta que aparezcan directrices de sangría secundario. Mantenga pulsada la tecla Mayús para colocar el primer botón de opción.

4. Mueva el cursor a la derecha de la primera JRadioButton. Mantenga pulsada la tecla Mayús para colocar el JRadioButtons segundo y tercero, teniendo cuidado de respetar la separación de componentes sugeridos. Asegúrese de soltar la tecla Shift antes de posicionar el último JRadioButton.

5. Establecer el texto de la pantalla para cada JRadioButton. (Puede editar el texto de un botón haciendo clic en el botón y elegir Editar texto. O puede hacer clic en el botón pausa y luego haga clic en nuevo.) Introduzca HTML para el botón de radio izquierdo, Plain Text para el segundo y Custom para el tercero.

Tres JRadioButtons se agrega al formulario y sangría debajo el JLabel de Formato de correo .

Ahora tenemos que añadir los tres JRadioButtons a un ButtonGroup para habilitar el comportamiento esperado de alternar en qué radio sólo un botón puede seleccionarse en un momento. Esto, a su vez, asegura que se mostrará la información de contacto de nuestras aplicaciones de ContactEditor en el formato de correo de nuestra elección.

Agregar JRadioButtons a un ButtonGroup:

1. En la ventana de la paleta, seleccione el componente del grupo de botones de la categoría de controles Swing.

2. Haga clic en el área de diseño de GUI Builder para añadir el componente de ButtonGroup al formulario. Observe que el ButtonGroup no aparece en el propio formulario, sin embargo, es visible en el área de otros componentes del navegante.

3. Seleccione las tres de la JRadioButtons en el formulario.4. En la ventana Propiedades, seleccione buttonGroup1 en el cuadro de combinado de

propiedad de buttonGroup.

Se añaden tres JRadioButtons para el grupo de botones.

5. Pulse Ctrl-S para guardar el archivo.

Hacer los ajustes finales

Hemos conseguido áspera fuera GUI de nuestra aplicación ContactEditor, pero todavía hay algunas cosas que queda por hacer. En esta sección, echaremos un vistazo a un par de otras tareas de diseño típico que optimiza la GUI Builder.

Terminando

Ahora necesitamos agregar los botones que permitirán a los usuarios confirmar la información que escriba para un contacto individual y agregar al contacto lista o cancelación, dejando la base de datos sin cambios. En este paso, nosotros añadir las dos

funciones de botones y luego editarlos para que aparezcan del mismo tamaño en nuestro formulario, aunque su texto de pantalla son diferentes longitudes.

Agregar y editar el texto de los botones:

1. Si el JPanel inferior se extiende hasta el borde inferior de la forma de JFrame, arrastre el borde inferior de la JFrame hacia abajo. Este permite que el espacio entre el borde de los JFrame y el borde de la JPanel para los botones Aceptar y cancelar.

2. En la ventana de la paleta, seleccione el componente Button de la categoría de controles Swing.

3. Mueva el cursor sobre el formulario de la JPanel de correo electrónico. Cuando las directrices aparecen indicando que el borde derecho de JButton esté alineada con la esquina inferior derecha de la JFrame, haga clic para colocar el botón.

4. Añadir JButton otro a la izquierda de la primera, asegurándose de colocar utilizando el espacio sugerido borde inferior del JFrame.

5. Establecer el texto de la pantalla para cada JButton. Introduzca OK para el botón izquierdo y Cancelar por derecha. Observe que el ancho de los botones cambia para adaptarse a los nuevos nombres.

6. Fijar las dos JButtons a tener el mismo tamaño seleccionando tanto, ya sea el botón derecho y eligiendo el mismo tamaño > mismo ancho en el menú emergente.

Los componentes JButton aparecen en el formulario y sus nodos correspondientes se muestran en la ventana del navegador. Código de los

componentes JButton también se agrega al archivo de código fuente del formulario que aparece en la vista de código fuente del Editor. Cada uno de los JButtons se establecen en el mismo tamaño que el botón con el nombre más largo.

7. Pulse Ctrl-S para guardar el archivo.

Lo último que tenemos que hacer es eliminar el texto de marcador de posición en los diversos componentes. Tenga en cuenta que al eliminar el texto de marcador de posición después de desbaste un formulario puede ser una técnica útil para evitar problemas con alineaciones de componente y anclar las relaciones, la mayoría de los desarrolladores normalmente quitar este texto en el proceso de colocación de sus formas. Como vas a través del formulario, seleccione y borre el texto de marcador de posición para cada uno de los JTextFields. Dejamos el marcador de posición elementos de JList tanto el JComboBox para un posterior tutorial.

Vista previa de su GUI

Ahora que ha creado con éxito la GUI ContactEditor, puede probar su interfaz para ver los resultados. Puedes escuchar su forma mientras trabaja, haga clic en el botón de vista previa del formulario ( ) en la barra de herramientas de la GUI Builder. El formulario se abre en su propia ventana, lo que le permite probarlo antes de la creación y ejecución.

Arriba

Implementación de aplicaciones GUI

En orden para las interfaces que se crean con el GUI Builder para trabajar fuera del IDE, la aplicación debe compilarse contra clases para el administrador de diseño GroupLayout y también tiene esas clases disponibles en tiempo de ejecución. Estas clases se incluyen en Java SE 6, pero no en Java SE 5. Si usted desarrolla la aplicación se ejecute en Java SE 5, su aplicación necesita utilizar la biblioteca Swing extensiones de diseño.

Si se ejecuta el IDE en JDK 5, el IDE genera automáticamente el código de la aplicación para usar la biblioteca Swing extensiones de diseño. Al implementar la aplicación, necesita incluir la biblioteca Swing extensiones de diseño con la aplicación. Al crear la aplicación (Build > Build Main Project), el IDE proporciona automáticamente una copia de archivo JAR de la biblioteca en la carpeta dist/lib de la aplicación. El IDE también agrega cada uno de los archivos JAR que se encuentran en la carpeta dist al elemento de la Ruta de clase en archivo de manifest.mf de archivo JAR de aplicación.

Si se ejecuta el IDE en JDK 6, el IDE genera el código de la aplicación para utilizar las clases de GroupLayout que son en Java SE 6. Esto significa que usted puede implementar la aplicación se ejecute en sistemas con Java SE 6 instalado y no es necesario para su aplicación con la biblioteca Swing diseño extensiones del paquete.

Nota: Si creas tu aplicación mediante JDK 6 pero necesita la aplicación se ejecute también en Java SE 5, puede hacer que el IDE genere su código para usar la biblioteca Swing extensiones de esquema en lugar de las clases en Java SE 6. Abrir la clase de ContactEditorUI en el Editor de GUI. En el navegador, haga clic en el nodo de forma ContactEditorUI y elija Propiedades en el menú emergente. En el cuadro de diálogo Propiedades, cambie el valor de la propiedad de estilo de generación de diseño a biblioteca de extensiones de esquema de Swing.

Distribuir y ejecutar aplicaciones Standalone GUI

Para preparar su solicitud de GUI para la distribución fuera del IDE:

ZIP la carpeta del proyecto dist en un archivo ZIP. (La carpeta dist también puede contener una carpeta lib , que también tendría que incluir).

Para ejecutar la aplicación, haga clic en el nombre del proyecto y seleccione ejecutar en el menú contextual. En el cuadro de diálogo de ejecutar el proyecto, seleccione el nombre de la clase principal (my.contacteditor.ContactEditorUI si habla sobre el proyecto que acaba de crear) y haga clic en Aceptar. Su aplicación está en funcionamiento.

Para ejecutar una aplicación independiente GUI desde la línea de comandos:

1. Desplácese hasta la carpeta del proyecto dist .2. Escriba lo siguiente:

java-jar jar <jar_name>

Nota: Si encuentras el siguiente error:

Excepción en el thread "main" java.lang.NoClassDefFoundError: org/jdesktop/diseño/GroupLayout$ grupo

Asegúrese de que el archivo manifest.mf hace referencia a la versión instalada de la biblioteca de extensiones de diseño de Swing.

Para obtener más información sobre la biblioteca de la extensión de diseño, visite el proyecto Swing extensiones de diseño.