You are on page 1of 28

Disear un GUI Swing en NetBeans IDE

Este tutorial le guiar en el proceso de creacin de la interfaz grfica de usuario (GUI) para una aplicacin llamada ContactEditor usando el IDE NetBeans GUI Builder. En el proceso se le diseo un front-end GUI que permite ver y editar informacin de contacto de los individuos incluidos en una base de datos del empleado. En este tutorial aprender cmo: utilizar la interfaz del GUI Builder, crear un contenedor de GUI, aadir, redimensionar y alinear componentes, ajustar componentes de anclaje, establecer el comportamiento de cambio de tamao automtico de componentes, editar propiedades de componente. Este tutorial toma aproximadamente 30 minutos para completar.

Contenido

Introduccin o Creacin de un proyecto o Creacin de un contenedor de JFrame Familiarizarse con el GUI Builder Conceptos clave o Diseo libre o Automtica de los componentes posicionamiento (ajuste) o Retroalimentacin Visual Lo primero es lo primero o Adicin de componentes: Los fundamentos o Adicin de componentes individuales al formulario o Agregar varios componentes al formulario o Insertar componentes Avanzar o Alineacin de componente o Alineacin de la lnea de base Revisar lo que hemos aprendido o Agregar, alinear y anclaje o Tamao del componente o Sangra Hacer los ajustes finales Vista previa de su GUI

Implementacin de aplicaciones GUI Vase tambin

Introduccin
GUI Builder del IDE hace posible construir aspecto profesional de interfaces grficas de usuario sin una comprensin ntima de los administradores de diseo. Usted puede disear sus formularios simplemente colocando componentes donde quieras. Para obtener descripciones de retroalimentacin visual del constructor de la GUI, puede usar la GUI Builder leyenda de retroalimentacin Visual.

Creacin 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 cdigo fuente de Java ms sus metadatos asociados, incluidos los archivos de propiedades especficas del proyecto, un script de compilacin de Ant que controla la generacin 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 aplicacin simple que se almacena completamente en un solo proyecto. Para crear un nuevo proyecto de aplicacin 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 categoras, seleccione el nodo de Java y en el panel de proyectos, elija aplicacin Java. Haga clic en siguiente. 3. Introduzca ContactEditor en el campo de nombre del proyecto y especifique la ubicacin del proyecto. 4. Deje la carpeta de uso dedicado para almacenar bibliotecas de casilla de verificacin no est seleccionada. 5. Asegrese de que el conjunto como principal proyecto de casilla de verificacin 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 especficos del proyecto. Para ver la estructura del proyecto, utilice la ventana de archivos del IDE.

Creacin de un contenedor de JFrame


Despus de crear la nueva aplicacin, usted puede haber notado que la carpeta de paquetes de cdigo en la ventana de proyectos contiene un nodo de vaco < paquete predeterminado > . Para continuar con la construccin 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 aplicacin 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 aplicacin, Tommonos un minuto para familiarizarnos con el interfaz del GUI Builder. Nota: Para explorar la interfaz GUI Builder con una demostracin interactiva, ver el screencast de Explorar GUI Builder (.swf) .

Cuando agregamos el contenedor de JFrame, el IDE abri la forma de ContactEditorUI recin creado en la ficha de una Editor con una barra de herramientas que contiene varios botones, como se muestra en la ilustracin anterior. El formulario de ContactEditor se abre en la vista Diseo de la GUI Builder y tres ventanas adicionales aparecieron automticamente 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:

Diseo zona.Ventana principal de la GUI Builder para crear y editar formularios GUI de Java. Botn de fuente de la barra de herramientas le permite ver el cdigo de fuente de una clase, el botn de diseo le permite ver una vista grfica de los componentes de la GUI, el botn 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 seleccin y conexin, alinear componentes, ajuste el comportamiento de cambio de tamao automtico de componentes y previsualizacin de formularios. Navigator.Proporciona una representacin de todos los componentes visuales y no visuales, en su aplicacin como una jerarqua de rbol. El navegador tambin proporciona informacin 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 diseo. Adems, puede crear, quitar y reorganizar las categoras 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 botn de la fuente, la muestra IDE cdigo de la aplicacin de Java en el Editor de secciones de cdigo que se generan automticamente por el constructor de interfaz grfica 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 Cdigo fuente. Slo se puede editar cdigo que aparecen en las zonas blancas del Editor cuando en la vista Cdigo fuente. Si necesita realizar cambios en el cdigo dentro de un bloque protegido, haciendo clic en el botn diseo 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 bsico de la creacin de GUI de Java al optimizar el flujo de trabajo de la creacin de interfaces grficas, liberando a los desarrolladores de las complejidades de los administradores de diseo de Swing. Lo hace mediante la ampliacin de la actual IDE de NetBeans GUI Builder para apoyar un sencillo paradigma de "Diseo libre" con reglas de diseo sencillo que son fciles de entender y usar. Como usted disear el formulario, el GUI Builder proporciona pautas visuales sugiriendo espaciado ptimo y la alineacin de los componentes. En el fondo, el GUI Builder se traduce sus decisiones de diseo en una interfaz de usuario funcional que se implementa utilizando el nuevo administrador de diseo GroupLayout y otras construcciones de Swing. Porque utiliza un modelo de diseo dinmico, GUI construido con el GUI Builder se comportan como usted esperara en tiempo de ejecucin, ajuste para adaptarse a los cambios que realice sin alterar las relaciones definidas entre los componentes. Siempre cambiar el tamao del formulario, cambiar configuraciones regionales o especificar un aspecto diferente, su GUI se ajusta automticamente para respetar mrgenes del destino aspecto y los desvos.

Diseo libre
En GUI Builder del IDE, usted puede construir sus formularios simplemente poniendo componentes donde quieras como si estuviera utilizando una posicin absoluta. Las cifras de GUI Builder que diseo atributos son necesarios y, a continuacin, genera el cdigo para usted automticamente. No necesita preocuparse con inserciones, anclajes, rellenos y as sucesivamente.

Automtica de los componentes posicionamiento (ajuste)


Como agregar componentes a un formulario, el generador de interfaz grfica de usuario proporciona retroalimentacin visual que ayuda en el posicionamiento de componentes basados en la apariencia de su sistema operativo. El GUI Builder proporciona sugerencias de ayuda en lnea y otra informacin visual sobre donde deben colocar los componentes en su formulario, encajando automticamente componentes en posicin 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 ejecucin.

Retroalimentacin Visual
El GUI Builder tambin proporciona informacin visual sobre el componente de anclaje y encadenamiento de relaciones. Estos indicadores permiten identificar rpidamente 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 ejecucin. Esto acelera el proceso de diseo de GUI, lo que le permite crear rpidamente 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 aplicacin de ContactEditor. En esta seccin echaremos un vistazo utilizando paleta del IDE para agregar los diversos componentes de la GUI que necesitamos a nuestro formulario. Gracias a paradigma de diseo libre del IDE, ya no tienes que luchar con los gerentes de disposicin para controlar el tamao y la posicin 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 mltiples componentes (.swf) para una demostracin interactiva de la seccin a continuacin.

Adicin de componentes: Los fundamentos


Aunque GUI Builder del IDE simplifica el proceso de creacin de GUI de Java, suele ser til esbozar la forma que desee su interfaz a buscar antes de empezar a poner hacia fuera. Muchos diseadores de interfaz consideran esto una tcnica de "mejores prcticas", sin embargo, para los propsitos de este tutorial usted puede simplemente vistazo cmo debera ser nuestro formulario saltando adelante a la seccin de vista previa de su GUI . Puesto que ya hemos aadido un JFrame como contenedor de nivel superior de nuestro formulario, el siguiente paso es aadir 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 categora de contenedores Swing pulsando y soltando el botn del ratn. 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 alineacin horizontal y vertical indicndote los mrgenes de preferencia. Haga clic en el formulario para colocar el JPanel en esta ubicacin.

El componente JPanel aparece en el formulario de ContactEditorUI con orange destacando lo que significa que est seleccionado. Despus de soltar el botn del ratn, pequeos 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 ilustracin.

A continuacin, necesitamos cambiar el tamao de los JPanel para hacer espacio para los componentes a colocar dentro de ella un poco ms tarde, pero tomemos un minuto para sealar otra de caractersticas de visualizacin de la GUI Builder primera. Para ello necesitamos deseleccionar el JPanel que acaba de agregar. Porque no hemos aadido un borde del ttulo, 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 posicin. Slo debe pulsar en cualquier lugar dentro del componente lo vuelva a seleccionar y provocar los controladores de tamao y los indicadores de anclaje para reaparecer. Para cambiar el tamao del JPanel:
1. Seleccione el JPanel que acaba de agregar. Los controladores de tamao cuadrado pequeo a aparecer alrededor del permetro del componente. 2. Pulse y sujete el mango de tamao del borde derecho de la JPanel y arrastre hasta la directriz de alineacin punteado aparece cerca del borde del formulario. 3. Manija de liberacin el cambio de tamao para cambiar el tamao del componente.

El componente JPanel se extiende para abarcar entre izquierda y derecha del contenedor mrgenes segn el desplazamiento recomendado, como se muestra en la siguiente ilustracin.

Ahora que hemos aadido un panel para contener la informacin de nombre de nuestra interfaz de usuario, tenemos que repetir el proceso para agregar otro directamente debajo de la primera para la informacin de correo electrnico. Refirindose a las ilustraciones siguientes, repita las anteriores dos tareas, prestando atencin 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 ttulo a cada JPanel. Primero lo logramos esto mediante la ventana Propiedades y, a continuacin, intentaremos mediante el men emergente. Para agregar bordes de ttulo a los JPanels:
1. Seleccione el JPanel superior en el GUI Builder. 2. En la ventana Propiedades, haga clic en el botn 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 botn de puntos suspensivos (...) junto a la propiedad Font, seleccione el estilo de fuente negrita y escriba 12 para el tamao. Haga clic en Aceptar para salir de los cuadros de dilogo. 6. Seleccione el fondo JPanel y repita los pasos 2 a 5, pero esta vez con el botn derecho el JPanel y acceder a la ventana de propiedades utilizando el men emergente. Escriba el correo electrnico para la propiedad de ttulo.

Fronteras tituladas se agregan a ambos componentes JPanel .

Adicin de componentes individuales al formulario


Ahora tenemos que comenzar a aadir los componentes que va a presentar la informacin de contacto real en nuestra lista de contactos. En esta tarea aadiremos cuatro JTextFields que mostrar la informacin 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 segn lo definido por la apariencia de su sistema operativo. Esto asegura que su GUI se procesa automticamente respetando la apariencia del sistema operativo destino en tiempo de ejecucin. Para agregar un JLabel al formulario:
1. En la ventana de la paleta, seleccione el componente Label de la categora de controles Swing. 2. Mueva el cursor sobre el nombre de JPanel hemos aadido antes. Cuando las directrices aparecen indicando que el JLabel es colocado en la esquina superior izquierda de la JPanel con un pequeo 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 ms lejos, tenemos que editar el texto de la pantalla de la JLabel hemos aadido. Aunque puede editar el texto de pantalla del componente en cualquier momento, la forma ms fcil 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 edicin. Ahora agregaremos un JTextField as que podemos conseguir un vistazo de la caracterstica de alineacin 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 categora de controles Swing. 2. Mover el cursor inmediatamente a la derecha de la nombre: JLabel hemos aadido. 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 orientacin vertical, haga clic para colocar el JTextField.

El JTextField encaje en forma alineada con la lnea de base del JLabel, como se muestra en la siguiente ilustracin. Observe que el JLabel cambiado ligeramente inclinado hacia abajo para que se alinee con la lnea 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 aadido, como se muestra en la siguiente ilustracin. Esta vez escriba apellido: como el JLabel mostrar texto y dejar el texto de marcador de posicin de la JTextFields como est por ahora.

Cambiar el tamao de un JTextField:


1. Seleccione el JTextField que hemos aadido 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 guas de alineacin vertical aparecen sugiriendo el margen entre el campo de texto y el borde derecho de la JPanel, suelte el botn del ratn para cambiar el tamao del JTextField.

Borde derecho del JTextField encaje en alineacin con margen de borde recomendado del JPanel, como se muestra en la siguiente ilustracin.

Agregar varios componentes al formulario


Ahora agregaremos el Ttulo: 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 Mays, para agregarlos rpidamente 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 categora de controles Swing pulsando y soltando el botn del ratn. 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 pequeo margen que existe entre ellos, Mays-clic para colocar el primer JLabel. 3. Mientras sigue presionando la tecla Mays, coloque otro JLabel inmediatamente

a la derecha de la primera. Asegrese de soltar la tecla Shift antes de posicionar el segundo JLabel. Si se olvida de que suelte la tecla Mays 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 ilustracin. 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 ms 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 Ttulo: 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 ilustracin.

Insertar componentes
Nota: Consulte el screencast de componentes de insercin (.swf) para una demostracin interactiva de la seccin a continuacin. A menudo es necesario aadir un componente entre los componentes que ya se colocan en un formulario. Cuando se aade un componente entre dos componentes existentes, el GUI

Builder cambia automticamente para hacer espacio para el nuevo componente. Para demostrarlo, podr insertar un JTextField entre la JLabels hemos aadido 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 categora de controles Swing. 2. Mueva el cursor sobre el Ttulo: y apodo: JLabels en la segunda fila tal que el JTextField superpone a ambos y se alinea con sus lneas de base. Si encuentra dificultad para colocar el nuevo campo de texto, puede ajustar la orientacin izquierda del JLabel apodo como se muestra en la primera imagen que aparece a continuacin. 3. Haga clic para colocar el JTextField entre el Ttulo: y apodo: JLabels.

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

Todava tenemos que aadir 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 categora 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 tamao de un JTextField:


1. Arrastre los controladores de tamao de la apodo: JTextField de la etiqueta agreg en la tarea anterior hacia la derecha de la envolvente JPanel. 2. Cuando las guas de alineacin vertical aparecen sugiriendo el margen entre el campo de texto y los bordes de JPanel, suelte el botn del ratn para cambiar el tamao del JTextField.

Borde derecho del JTextField encaje en alineacin con margen de borde recomendado del JPanel y la GUI Builder infiere el comportamiento de cambio de tamao adecuado. 3. Pulse Ctrl-S para guardar el archivo.

Avanzar
La alineacin es uno de los aspectos ms fundamentales de la creacin de interfaces de usuario de aspecto profesional. En la seccin anterior tenemos un vistazo de las caractersticas de alineacin del IDE al agregar los componentes JLabel y JTextField a nuestro formulario de ContactEditorUI. A continuacin, tomaremos una ms en profundidad vistazo a funciones de alineacin de la GUI Builder ya que trabajamos con los distintos componentes que necesitamos para nuestra aplicacin.

Alineacin de componente
Nota: Consulte el screencast de alineacin y fijacin de componentes (.swf) para una demostracin interactiva en las secciones siguientes. Cada vez que agregue un componente a un formulario, el GUI Builder efectivamente alinea, evidenciada por las guas de alineacin que aparecen. A veces es necesario, sin embargo, especificar diferentes relaciones entre grupos de componentes as. Anteriormente hemos aadido 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 Ttulo: JLabels en el lado izquierdo del formulario. 2. Haga clic en el alinear a la derecha en el botn de la columna ( ) en la barra de herramientas. Alternativamente, puede uno con el botn 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 aadido anteriormente, que tenemos que asegurarnos de los dos JTextFields inserta entre la JLabels se establecen para cambiar el tamao correctamente. A diferencia de los dos JTextFields que extenda hasta el

borde derecho de nuestra forma, comportamiento de resizeability de los componentes insertados no se configur automticamente. 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 tamao automtico > Horizontal en el men emergente.

Los JTextFields estn listos para cambiar el tamao horizontal en tiempo de ejecucin. Las directrices de la alineacin y fijacin de indicadores se actualizan, proporcionando retroalimentacin visual de las relaciones de componente. Para definir los componentes a ser del mismo tamao:
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 tamao > mismo ancho en el men emergente.

Los JTextFields todos estn ajustados a la misma anchura e indicadores se agregan en el borde superior de cada uno, proporcionando retroalimentacin visual de las relaciones de componente. Ahora tenemos que aadir otro JLabel describiendo el JComboBox que permitir a los usuarios seleccionar el formato de la informacin que se mostrar nuestra aplicacin de ContactEditor. Para alinear un JLabel a un grupo de componentes:
1. En la ventana de la paleta, seleccione el componente Label de la categora de Swing. 2. Mueva el cursor debajo del primer nombre y el ttulo 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 posicin alineada a la derecha con la columna de JLabels arriba, como se muestra en la siguiente ilustracin. El GUI Builder actualiza las lneas de estado de alineacin que indica la separacin 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 continuacin, escriba formato de pantalla: para el nombre para mostrar. Observe que cuando el JLabel encaje en su lugar, los dems componentes se desplazan para acomodar el texto ms largo.

Alineacin de la lnea de base


Cada vez que agregue o mover componentes que incluyen texto (JLabels, JTextFields, etctera), el IDE sugiere alineaciones que se basan en las lneas de base del texto en los componentes. Cuando inserta el JTextField anteriormente, por ejemplo, su lnea de base fue automticamente alineada a la JLabels adyacentes. Ahora agregaremos el cuadro combinado que permitir a los usuarios seleccionar el formato de la informacin que se mostrar nuestra aplicacin de ContactEditor. Como agregamos el JComboBox, le hacemos su lnea de base del texto de JLabel. AVISO una vez ms las pautas de alineacin de lnea de base que aparecen para ayudarnos con el posicionamiento. Para alinear las lneas de base de componentes:
1. En la ventana de la paleta, seleccione el componente de cuadro combinado de la categora de controles Swing. 2. Mueva el cursor inmediatamente a la derecha de la JLabel hemos aadido. Cuando la directriz horizontal aparecer indicando que instantnea de los JComboBox est alineada con la lnea base del texto en el JLabel y sugiere el espaciado entre los dos componentes con una gua vertical, haga clic para colocar el cuadro combinado.

El componente encaja en una posicin alineada con la lnea base del texto en el JLabel a su izquierda, como se muestra en la siguiente ilustracin. El GUI Builder muestra lneas de Estado que indica la separacin de los componentes y relaciones de anclaje.

Cambiar el tamao de los JComboBox:


1. Seleccione el componente ComboBox en el GUI Builder. 2. Arrastre el control de tamao en el borde derecho de los JComboBox hacia la derecha hasta que las guas de alineacin aparecen sugiriendo el desvo preferido entre los bordes JComboBox y JPanel.

Como se muestra en la ilustracin siguiente, borde derecho del JComboBox encaje en alineacin con margen de borde recomendado del JPanel y anchura del componente se establece automticamente para cambiar el tamao con el formulario.

3. Pulse Ctrl-S para guardar el archivo.

Edicin de modelos de componentes es ms all del alcance de este tutorial, as que por el momento dejaremos marcador de posicin 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 aadimos algunos ms de los componentes de que nuestra interfaz requiere. Hasta ahora nos hemos concentrado en Agregar componentes a nuestro GUI ContactEditor utilizando las pautas de alineacin del IDE para ayudarnos con el posicionamiento. Es importante comprender, sin embargo, anclaje de la otra parte integrante de la colocacin de componentes. Aunque nosotros no hemos discutido an, usted ya ha tomado ventaja de esta caracterstica sin darse cuenta. Como se mencion anteriormente, cuando se aade un componente a un formulario, el IDE sugiere que el destino look and feel preferido posicionamiento con directrices. Una vez colocado, nuevos componentes tambin estn anclados al borde del contenedor ms cercano o componente para que se mantengan relaciones de componente en tiempo de ejecucin. En esta seccin, nos concentraremos en llevar a cabo las tareas de una manera ms gil mientras sealando el trabajo el GUI builder est haciendo detrs de las escenas.

Agregar, alinear y anclaje

El GUI Builder permite disear los formularios rpidamente y fcilmente mediante la racionalizacin de los gestos de flujo de trabajo tpico. Cuando se aade un componente a un formulario, el GUI Builder automticamente les encaje en las posiciones deseadas y establece las relaciones de encadenamiento necesarias para que usted pueda concentrarse en el diseo de sus formas, en lugar de luchando con detalles de implementacin 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 categora de controles Swing. 2. Mueva el cursor sobre el formulario inmediatamente debajo del ttulo de la parte inferior JPanel correo electrnico. Cuando las directrices indicndote que es colocada en la esquina superior izquierda de la JPanel con un pequeo 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 continuacin, escriba direccin de correo electrnico: y presiona Enter.

El JLabel encaje en la posicin 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 categora de controles Swing. 2. Mueva el cursor inmediatamente a la derecha de la etiqueta de Direccin de correo electrnico que acaba de agregar. Cuando las directrices indicndote que base de JTextField est alineado con la lnea base del texto en el JLabel y sugiere el margen entre los dos componentes con una gua vertical, haga clic para colocar el campo de texto.

El JTextField encaje en su posicin a la derecha de la direccin de correo electrnico: JLabel y est encadenado a la JLabel. Tambin se agrega el nodo correspondiente a la ventana del Inspector.
3. Arrastre el control de tamao de JTextField hacia la derecha de la envolvente JPanel hasta que las guas de alineacin aparecen sugiriendo el desplazamiento entre los bordes de JTextField y JPanel.

Borde derecho del JTextField se ajusta a la pauta de alineacin que indica los mrgenes de preferencia. Ahora tenemos que aadir el JList que mostrar toda la lista de contacto de nuestra ContactEditor.

Para agregar y cambiar el tamao de un JList:


1. En la ventana de la paleta, seleccione el componente de lista de la categora de controles Swing. 2. Mueva el cursor inmediatamente por debajo de la Direccin de correo electrnico de JLabel hemos aadido antes. Cuando las directrices aparecen indicando que el JList del superior e izquierdo los bordes estn alineados con los mrgenes 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 guas de alineacin aparecen indicando que es el mismo ancho que el anterior de JTextField.

El JList encaje en la posicin designada por las guas de alineacin y su correspondiente nodo aparece en la ventana del Inspector. Observe tambin que el formulario se expande para acomodar los JList recin agregado.

Desde JLists se utilizan para mostrar largas listas de datos, normalmente requieren la adicin de un JScrollPane. Cuando se aade un componente que requiere un JScrollPane, el GUI Builder agrega automticamente 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.

Tamao del componente


Nota: Consulte el cambio de tamao y componentes (.swf) la sangra screencast para una demostracin interactiva en las secciones siguientes. A menudo es beneficioso establecer varios componentes relacionados, tales como botones en los dilogos modales, ser del mismo tamao 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 tamao, por lo que pueden reconocerse fcilmente 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 categora de controles Swing. 2. Mueva el JButton sobre el borde derecho de la Direccin de correo electrnico JTextField en el JPanel inferior. Cuando las directrices aparecen indicando que el JButton instantnea y borde derecho estn alineados con la del JTextField, Mays-clic para colocar el primer botn borde derecho del JFrame. Ancho del JTextField se encoge para acomodar el JButton cuando suelte el botn del ratn.

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 estn alineados con la de los JList, Mays-clic para colocar el segundo botn borde derecho del JFrame.

4. Agregue dos JButtons adicionales por debajo de los dos que ya hemos aadido para crear una columna. Asegrese de colocar el JButtons tal que el espacio sugerido es respetada y consistente. Si se olvida de que suelte la tecla Mays 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 botn haciendo clic en el botn y elegir Editar texto. O puede hacer clic en el botn pausa y luego haga clic en nuevo.) Escriba Add el botn 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 guas de alineacin. 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 tamao de coherencia visual, as como aclarar que estn relacionados funcionalmente. Para definir los componentes del mismo tamao:
1. Seleccione todos los cuatro JButtons pulsando la tecla Control al hacer su seleccin. 2. Uno de ellos con el botn derecho y elija el mismo tamao > mismo ancho en el men emergente.

Los JButtons se establecen en el mismo tamao que el botn con el nombre ms largo.

Sangra
A menudo es necesario cluster mltiples componentes bajo otro componente que es evidente pertenecen a un grupo de funciones relacionadas. Un caso tpico, por ejemplo, est poniendo varias casillas de verificacin relacionados a continuacin una etiqueta comn. El GUI Builder permite realizar fcilmente la sangra proporcionando directrices especiales sugiriendo el desplazamiento preferido para la apariencia de su sistema operativo.

En esta seccin agregaremos unos JRadioButtons por debajo de un JLabel que permite a los usuarios personalizar la forma en que la aplicacin muestra los datos. Consulte las siguientes ilustraciones al lograr esto o haga clic en el vnculo Ver Demo siguiendo el procedimiento para ver una demostracin interactiva. Para aplicar una sangra JRadioButtons por debajo de un JLabel:
1. Agregar un JLabel nombrado Formato de correo en el formulario de la JList. Asegrese de que la etiqueta quede alineado con el JList arriba. 2. En la ventana de la paleta, seleccione el componente de botn de Radio de la categora de Swing. 3. Mueva el cursor debajo del JLabel que hemos aadido. Cuando las directrices indicndote 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 sangra secundario. Mantenga pulsada la tecla Mays para colocar el primer botn de opcin.

4. Mueva el cursor a la derecha de la primera JRadioButton. Mantenga pulsada la tecla Mays para colocar el JRadioButtons segundo y tercero, teniendo cuidado de respetar la separacin de componentes sugeridos. Asegrese 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 botn haciendo clic en el botn y elegir Editar texto. O puede hacer clic en el botn pausa y luego haga clic en nuevo.) Introduzca HTML para el botn de radio izquierdo, Plain Text para el segundo y Custom para el tercero.

Tres JRadioButtons se agrega al formulario y sangra debajo el JLabel de Formato de correo .

Ahora tenemos que aadir los tres JRadioButtons a un ButtonGroup para habilitar el comportamiento esperado de alternar en qu radio slo un botn puede seleccionarse en un momento. Esto, a su vez, asegura que se mostrar la informacin de contacto de nuestras aplicaciones de ContactEditor en el formato de correo de nuestra eleccin. Agregar JRadioButtons a un ButtonGroup:
1. En la ventana de la paleta, seleccione el componente del grupo de botones de la categora de controles Swing. 2. Haga clic en el rea de diseo de GUI Builder para aadir 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 aaden 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 aplicacin ContactEditor, pero todava hay algunas cosas que queda por hacer. En esta seccin, echaremos un vistazo a un par de otras tareas de diseo tpico que optimiza la GUI Builder.

Terminando
Ahora necesitamos agregar los botones que permitirn a los usuarios confirmar la informacin que escriba para un contacto individual y agregar al contacto lista o cancelacin, dejando la base de datos sin cambios. En este paso, nosotros aadir las dos funciones de botones y luego editarlos para que aparezcan del mismo tamao 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 categora de controles Swing. 3. Mueva el cursor sobre el formulario de la JPanel de correo electrnico. 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 botn.

4. Aadir JButton otro a la izquierda de la primera, asegurndose de colocar utilizando el espacio sugerido borde inferior del JFrame. 5. Establecer el texto de la pantalla para cada JButton. Introduzca OK para el botn 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 tamao seleccionando tanto, ya sea el botn derecho y eligiendo el mismo tamao > mismo ancho en el men emergente.

Los componentes JButton aparecen en el formulario y sus nodos correspondientes se muestran en la ventana del navegador. Cdigo de los componentes JButton tambin se agrega al archivo de cdigo fuente del formulario que aparece en la vista de cdigo fuente del Editor. Cada uno de los JButtons se establecen en el mismo tamao que el botn con el nombre ms largo. 7. Pulse Ctrl-S para guardar el archivo.

Lo ltimo que tenemos que hacer es eliminar el texto de marcador de posicin en los diversos componentes. Tenga en cuenta que al eliminar el texto de marcador de posicin despus de desbaste un formulario puede ser una tcnica til para evitar problemas con alineaciones de componente y anclar las relaciones, la mayora de los desarrolladores normalmente quitar este texto en el proceso de colocacin de sus formas. Como vas a travs del formulario, seleccione y borre el texto de marcador de posicin para cada uno de los JTextFields. Dejamos el marcador de posicin 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 botn 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 creacin y ejecucin.

Arriba

Implementacin de aplicaciones GUI


En orden para las interfaces que se crean con el GUI Builder para trabajar fuera del IDE, la aplicacin debe compilarse contra clases para el administrador de diseo GroupLayout y tambin tiene esas clases disponibles en tiempo de ejecucin. Estas clases se incluyen en Java SE 6, pero no en Java SE 5. Si usted desarrolla la aplicacin se ejecute en Java SE 5, su aplicacin necesita utilizar la biblioteca Swing extensiones de diseo. Si se ejecuta el IDE en JDK 5, el IDE genera automticamente el cdigo de la aplicacin para usar la biblioteca Swing extensiones de diseo. Al implementar la aplicacin, necesita incluir la biblioteca Swing extensiones de diseo con la aplicacin. Al crear la aplicacin (Build > Build Main Project), el IDE proporciona automticamente una copia de archivo JAR de la biblioteca en la carpeta dist/lib de la aplicacin. El IDE tambin 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 aplicacin. Si se ejecuta el IDE en JDK 6, el IDE genera el cdigo de la aplicacin para utilizar las clases de GroupLayout que son en Java SE 6. Esto significa que usted puede implementar la aplicacin se ejecute en sistemas con Java SE 6 instalado y no es necesario para su aplicacin con la biblioteca Swing diseo extensiones del paquete.
Nota: Si creas tu aplicacin mediante JDK 6 pero necesita la aplicacin se ejecute tambin en Java SE 5, puede hacer que el IDE genere su cdigo 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 dilogo Propiedades, cambie el valor de la propiedad de estilo de generacin de diseo a biblioteca de extensiones de esquema de Swing.

Distribuir y ejecutar aplicaciones Standalone GUI


Para preparar su solicitud de GUI para la distribucin fuera del IDE:

ZIP la carpeta del proyecto dist en un archivo ZIP. (La carpeta dist tambin puede contener una carpeta lib , que tambin tendra que incluir).

Para ejecutar la aplicacin, haga clic en el nombre del proyecto y seleccione ejecutar en el men contextual. En el cuadro de dilogo 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 aplicacin est en funcionamiento. Para ejecutar una aplicacin independiente GUI desde la lnea de comandos:
1. Desplcese hasta la carpeta del proyecto dist . 2. Escriba lo siguiente:
java-jar jar <jar_name>

Nota: Si encuentras el siguiente error:


Excepcin en el thread "main" java.lang.NoClassDefFoundError: org/jdesktop/diseo/GroupLayout$ grupo

Asegrese de que el archivo manifest.mf hace referencia a la versin instalada de la biblioteca de extensiones de diseo de Swing. Para obtener ms informacin sobre la biblioteca de la extensin de diseo, visite el proyecto Swing extensiones de diseo.

You might also like