Академический Документы
Профессиональный Документы
Культура Документы
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
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.
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.
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.
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.
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.
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.
Borde derecho del JTextField encaje en alineacin con margen de borde recomendado del JPanel, como se muestra en la siguiente ilustracin.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
Arriba
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>
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.