2009-11-16 36 views
25

Ya he realizado algunas aplicaciones con una pequeña interfaz gráfica de usuario. Nada complejo, pero me he encontrado con varios problemas de que los componentes no se muestran o simplemente no se comportan como se esperaba.Java AWT/SWT/Swing: ¿cómo planificar una GUI?

Ahora mi pregunta:

¿Cómo planificar las interfaces de usuario? ¿Qué haces cuando necesitas hacer cambios? ¿Cómo depurar comportamientos extraños?

Esto se aplica a casi todos los tipos de diseño de gui. Claro, con Microsofts Visual Studio tiene una gran ventaja porque casi obtiene lo que ve en el diseñador.

¿Existe un bueno y un diseñador de fuente abierta (o freeware) para AWT? Ya miró alrededor y no encontró nada realmente inteligente.

EDIT: Hasta ahora, también he creado todas mis GUI a mano. Claro que es un código más limpio, pero a veces es muy difícil encontrar los errores de diseño. Si Visual Studio by MS puede crear código aproximadamente limpio, ¿por qué los otros no?

He oído hablar de algún diseñador visual de Eclipse. ¿Ya está listo para producción?

+0

Gracias por las buenas respuestas, todos ustedes proporcionaron información útil. Construí con Visual Editor para Eclipse. Para un prototipo, es una buena herramienta, pero no realmente para uso en producción. – Atmocreations

+1

Voté para cerrar esta pregunta como fuera de tema porque no se trata de programación sino de UI/UX. –

Respuesta

70

No soy un gran admirador de los constructores de GUI: Por lo general, autogeneran cargas de código que bloquean a todo su equipo de desarrollo a usar un IDE. Además, este código a menudo no se puede leer (verifique el código generado al usar Matisse en Netbeans).

Mis recomendaciones para interfaz gráfica de usuario de diseño/depuración serían:

  • Añadir un método main a cada panel (o "alto nivel" componente) aplicación, permitiendo que otros desarrolladores determinar fácilmente lo que un componente se parece.
  • Favorecer el uso de Action s sobre ActionListener sy registrar estas acciones con cada JComponent 's ActionMap. Esto permite que sean "extraídos" y agregados a otras partes de la UI (por ejemplo, JToolBar) mientras que todavía tienen su estado controlado por el "propietario" JComponent (es decir, acoplamiento flojo).
  • Use assert para asegurarse de que todas las modificaciones del componente de la interfaz de usuario se estén produciendo en la cadena de distribución de eventos; p.ej. assert SwingUtilities.isEventDispatchThread().
  • Para depurar el comportamiento de diseño extraño, ¡considere pintar el fondo de un componente en rojo!
  • Centralice la captura y el informe de eventos y excepciones del flujo de trabajo. Por ejemplo, normalmente implemento una clase TaskManager que está registrada en la barra de estado de mi UI. Cualquier procesamiento en segundo plano (realizado dentro de SwingWorker s) se pasa un identificador a Task creado por TaskManager. La interacción con la tarea (llamando al setDescription(String), setThrowable(Throwable), cancel()) hace que la barra de estado se actualice. También hace que el panel de cristal se muestre para tareas "globales" ... pero todo esto está desacoplado u oculto de los SwingWorkers individuales.
  • No utilice las clases Observer/Observable, pero en su lugar favor favor de ChangeListener, PropertyChangeListener o su propia implementación personalizada de escucha para propagar eventos. Observer pasa un Object como suceso, obligando al código del cliente a verificar el tipo utilizando instanceof y realizar downcasts, lo que hace que el código sea ilegible y que las relaciones entre clases sean menos claras.
  • Favorece el uso de JTable en JList, incluso en situaciones en las que su tabla solo tiene una columna. JList tiene algunas características desagradables en su API, incluido el hecho de que debe proporcionar un valor de prototipo para que pueda calcular su tamaño correctamente.
  • Nunca use DefaultTableModel, ya que generalmente se produce el almacenamiento de los datos de su "modelo" en dos lugares: en sus objetos comerciales reales y también dentro de la matriz 2D en la que se sienta DefaultTableModel. En su lugar, simplemente subclase AbstractTableModel - Es muy fácil hacer esto y significa que su implementación puede simplemente delegar en la estructura de datos (por ejemplo, List) almacenando sus datos.
+10

Todo es esta respuesta es genial, solo me gustaría agregar un poco. Considere dibujar su GUI en papel. Utilice un lápiz/bolígrafo de color diferente para indicar los paneles ocultos, los administradores de diseño, las acciones, etc. ¡Funciona con MARAVILLAS! Se podría hacer lo mismo en un tablero blanco, pero yo prefiero la precisión de papel y lápiz (además de que tenemos todo tipo de chatarra en el trabajo) – basszero

+0

1 Niza punta con la afirmación. Los errores que ocurren cuando accede a la interfaz de usuario desde fuera del EDT son a menudo sutiles y extraños. Y muy difícil de encontrar – Joey

+0

Un buen conjunto de mejores prácticas aquí. Bien hecho. – M1EK

0

Le sugiero que use netbeans para el desarrollo de GUI en AWT/SWING.

Saludos, Sameer

+0

Por favor, eche un vistazo al siguiente enlace. Te ayudará. Es lo que importa de arrastrar y soltar. http://java.sun.com/docs/books/tutorial/javabeans/nb/index.html – Samra

1

Ha habido un apoyo temporal-muertos (pero ahora al parecer, al menos, medio vivo) plugin for Eclipse para el diseño de interfaz gráfica de usuario visual y Netbeans todavía tiene para él. Sin embargo, el código resultante fue menos que estelar. Al menos para las personas que tienen que trabajar con esa base de código después, es bastante doloroso.

En cuanto a mí, tiendo a planificar en papel de antemano y trato de obtener todas las agrupaciones de paneles con sus diseños en el primer intento. El código GUI de Java es intrínsecamente de solo escritura en mi experiencia.

La última vez que hice tal cosa, primero creé todos los controles que necesitaba y luego los ensamblé en múltiples paneles y diseños, etc. De esa manera al menos fue manejable y funcionó sin demasiado dolor cuando hubo que hacer cambios.

Tiendo a no pensar demasiado sobre el diseño particular en Winforms y WPF debido a, como notó también, soporte de diseñador fuerte. Además, WPF es muy fácil de manejar incluso en XAML. Las clases parciales de Ans hacen que trabajar con un código parcialmente generado y parcialmente escrito a mano sea muy agradable. Por desgracia, no hay tal cosa en el mundo de Java.

+0

corrígeme si me equivoco, pero pensé que el eclipse VE se había vuelto a activar (después de algunos años). ¡Lee algo sobre una versión 1.4! –

+0

Oh, gracias por el aviso. No me di cuenta de que lo levantaron de la muerte ya que la mayor parte de mí que usé Java estaba muerto o cerca. – Joey

+0

Me gusta el código que genera VE. Es mucho más limpio comparando con el constructor de GUI de Netbeans, es fácil de entender y modificar "por las manos". – bancer

1

NetBeans es la mejor opción para compilar GUI en modo WYSIWYG, pero muchos desarrolladores de Java escriben su GUI con las manos, ya que no es tan difícil. Tenga cuidado con el grosor de sus bordes y espacios entre sus controles y está bien :)

+0

y sí, sobre la alineación. Hay muchas cosas en la interfaz de usuario que son bastante complejos desde el punto de vista técnico y hay trucos para la depuración (por ejemplo, puntos de interrupción no pueden ayudar si su control se repintó menudo => registro de uso) pero lo realmente difícil que sucede en una hoja de papel y en cerebro del diseñador. – Dmitry

1

Además de las herramientas de discusión, sólo algunas ideas y pensamientos

  1. Antes de tocar el teclado, dibujar los elementos de la GUI en el papel. Como el guión gráfico clásico utilizado para la producción de videos. Si tiene clientes, use los diseños dibujados a mano (!) Para comunicar las ideas (solo lea, que ya planea en papel)
  2. Planifique la implementación de un modelo-vista-controlador (MVC) o modelo-vista -presenter patrón
  3. Databinding es una gran técnica a considerar.Garantiza la sincronización entre su modelo (datos) y la vista (GUI) y ofrece validación de entrada, conversión sobre la marcha y muchas cosas más útiles (Proporcionó el enlace para el enlace de datos de JFace, pero estoy seguro de que hay otros marcos para Swing/AWT también)
5

Soy uno de esos tipos arcaicos que hacen el diseño de GUI a mano. ¡Tampoco le temo al infame GridBagLayout!

Mantengo las cosas simples al emular el estándar de codificación utilizado por Visual Age, hace años: uso muchos JPanels para organizar partes de la GUI, y cada uno obtiene su propio método makeXXX() para crearlo, colocarlo y devuélvalo a un panel principal o al constructor. De esta forma, cada makeXXX solo tiene que concentrarse en una pequeña parte de las obras completas.

Es necesario acceder a algunos componentes mediante diversos métodos de instancia; Declaro esos como campos de instancia. Las otras cosas, eso es solo decoración o diseño, no necesitan exponerse fuera de los métodos makeXXX.

Eso es principalmente eso. Funciona para mi.

+2

GridBagLayout rocas. – Adamski

+2

estoy completamente de acuerdo! – Atmocreations

+6

Me sustituyo GridBagLayout (estremecimiento ...) con MigLayout - http://www.miglayout.com/ – Nate

0

Si bien el editor Matisse de NetBeans es realmente útil, el código que produce es bastante esotérico y los diseños son frágiles. Así que he estado sacando lo mejor de ambos mundos, usando NetBeans para prototipos WYSIWYG y luego recodificando todo a mano.

+0

que estaba cerca de realidad tratando de escribir un convertidor de XAML para hacer pivotar código porque VS y WPF eran * muy * útil en la creación de prototipos de interfaces de usuario. Pero luego me faltaba tiempo y todavía lo codificaba a mano * suspiro * – Joey

1

Yo uso JFormDesigner para la generación de GUI. Genera un bonito código Java, y he aprendido algunas cosas al leer el código generado. Hace que la localización sea muy fácil.

Es una manera muy rápida de armar un diseño involucrado, especialmente en los diseños de barras de menú y cuadrículas complejas.

2

Hágalo a mano. Los constructores de GUI no son buenos a menos que tenga el concepto de "clase parcial" en C#, e incluso entonces a menudo causan más problemas de los que resuelven. Utilice las herramientas de construcción de la GUI para crear un prototipo, claro, pero no para el código de producción.

Además, otro pequeño truco que he usado en los últimos años con buenos resultados cuando se trata de diseño de depuración o "panel que estoy realmente viendo aquí" problemas es dar a cada panel de 'contenedor' un color de fondo muy llamativa (amarillo , azul, etc.). Algo lo suficientemente obvio como para verlo incluso si tiene solo un píxel de ancho.

Y mi diseño favorito para cuadros de diálogo simples es BoxLayout. No es genial, tienes que escribir un montón de repeticiones, pero al menos generalmente funciona de la manera que esperarías en tu cabeza. No pienses demasiado en los diseños hasta que tengas que hacerlo.

1

que para mí usar

Pencil

para algunos prototipos en primer lugar, a continuación, empezar a programar "a mano" (es decir, no con cualquier editor de interfaz gráfica de usuario).

+0

El enlace proporcionado da un error HTTP 500. Este es un enlace actualizado: http://pencil.evolus.vn/ –