usar tutorial template tag etiquetas define como user-interface frameworks

user interface - tutorial - Patrones de GUI Framework?



ui include src (6)

Algunas cosas que aprendí al ayudar a desarrollar SingStar PS3

  • Ayuda a mantener la lógica de sus componentes (cómo funciona un botón) y su lógica visual (cómo renderizar una imagen) por separado. Esto es especialmente bueno cuando se presenta una forma totalmente nueva de renderizar algo y funciona con los viejos controles de botón de forma transparente.
  • Configure una forma flexible de vincular una fuente de datos en su aplicación a una página llena de componentes, para que los mismos componentes puedan mostrar todas las canciones en una página o todas las fotos en otra. Aquí es donde entró MVC en SingStar
  • Los modelos de envío de eventos / recepción de eventos (es decir, suscribirse al clic de un botón) son una forma muy agradable de enlazar un diseño de página a su código. Puede convertirse en spagetti si no tienes cuidado.
  • No invente otro lenguaje de programación para describir su lógica, probablemente su lenguaje de programación actual esté bien.
  • Considere los pasos cuando se cambia de una página a otra. Mucho de esto se reduce al uso de la memoria, pero puede haber un momento en el que se carguen dos páginas o no se carguen las páginas. Piense en la comunicación entre páginas aquí.
  • Data-drive el diseño de su página. Permita el intercambio en caliente del diseño (presione una tecla para volver a cargarlo desde su PC) ya que lo repetirá mucho.

Estamos desarrollando en un entorno de tipo incrustado y nos encontramos con la necesidad de crear nuestro propio marco de interfaz de usuario.

He hecho esto antes, pero estoy interesado en investigar un poco sobre los patrones de diseño comunes para los marcos.

Tipos de cosas en las que estoy pensando como patrones (de gran alcance):

  • Widget Focus / desenfoque
  • Animación de widgets
  • Intercambio de datos entre elementos
  • Adjuntar comandos a widgets
  • Estado de ahorro (¿MVC?)

¿Qué lectura recomendada tiene para los patrones del Marco de GUI?

Tengo dos para ti, la devolución de llamada o notificación, tal vez esto es lo que llamas "adjuntar comandos a widgets", de alguna manera quieres reaccionar a los cambios de estado en tu elemento UI. El controlador debe ser informado de que se ha producido un cambio.

Cocoa / UIKit tiene un patrón que se llama "Delegación" y notificaciones para lograr esto, otros usan funciones u objetos de devolución de llamada (Java Swing) o "señales y ranuras" (QT).

Un patrón muy útil que no ocurre en la naturaleza muy a menudo es la capacidad de evitar un cambio de estado, el caso de uso más fácil para esto es la validación de entrada, desea evitar la pérdida de foco de un widget cuando el texto en el widget lo hace no está de acuerdo con lo que cabría esperar Windows Forms solía tener eso en algunos elementos, no en todos, Cocoa puede hacer esto. Esto se puede lograr mediante el uso de valores devueltos o parámetros de referencia (o punteros) en las devoluciones de llamada donde el destinatario puede comunicarse de nuevo con el widget de origen.

Hoy en día, aplicar estilos a los elementos de la interfaz de usuario, es decir, cambiar el aspecto sin cambiar la funcionalidad también se ha vuelto muy popular. QT puede hacerlo y estoy seguro de que muchas otras bibliotecas

El patrón Gang of Four Decorator también se usa a veces para mejorar las capacidades de un widget, haciendo que algo desplazable se pueda hacer a través de un decorador. Todo depende de qué tan lejos necesite ir con los elementos de su IU. Buena suerte, no es una tarea fácil

EDT: aplique MVC siempre que pueda. Los primeros candidatos son cualquier tipo de pantalla, no los haga responsables de mantener los elementos que muestran. Esto definitivamente va para el cuadro combinado, un cuadro de lista, tablas y árboles, podría implementar esto para las entradas de texto, pero eso podría no valer la pena.

Estudia XAML , especialmente enlaces.

Microsoft ha hecho un trabajo realmente bueno en un lenguaje XML limpio para describir el diseño de la interfaz gráfica de usuario y si utiliza una versión simplificada de XAML para su descripción de la interfaz de usuario, podrá utilizar sus herramientas para que los diseñadores realicen una simulación de la interfaz de usuario.

Solo algunos consejos sobre patrones de diseño clásico; Creo que estos están relacionados con la construcción de GUI:

  • Patrón de MVC obvisously.
  • Patrón observador ; por ejemplo, la vista necesita observar el modelo (para saber cuándo cambia su estado) y el controlador debe observar la vista (para saber cuándo se hace clic en un botón).
  • Patrón de estrategia ; en cierto modo, usar un controlador como pegamento entre View y Model es elegir una Estrategia. En teoría, debería poder cambiar el Controlador de forma transparente.
  • Patrón compuesto ; Su vista es como un árbol de paneles, widgets, etc. Tener una interfaz común y una forma de iterar sobre esta colección es útil cuando necesita llamar algo como "view.paint ()".

Sé que preguntaste acerca de los patrones para los marcos , pero aún debes confiar en estos patrones ya que los desarrolladores probablemente usarán tu marco con estos conceptos en mente.

¿Tiene requisitos / necesidades específicas para su marco? Es probable que desee perder un par de "buenos principios" si su plataforma objetivo está limitada en memoria / CPU.

El patrón de Cadena de mando .

Ejemplo en el contexto de GUIs:

interface IWidget { bool HandleEvent(Event event); // returns true if event was handled // or false if event was ignored } class Button : IWidget { public override bool HandleEvent(Event event) { switch(event.Type) { case EventType.MousePressed: DoStuff(); return true; case EventType.MouseScrolled: return false; } } }

Aquí, a los botones no les importan los eventos de desplazamiento, por lo que permiten que sus padres (la cadena de comando ) los manejen. Entonces, si tiene un Botón en, por ejemplo, una página HTML, y el usuario se desplaza sobre el botón, esto es manejado por el widget padre (la vista HTML) y la página completa se desplaza.

Para ver un ejemplo del uso del mundo real en el marco Qt, consulte bool QWidget :: event (QEvent *) y la documentación sobre los filtros de eventos .

Ver también: Patrones de diseño en KDE . KDE es una colección multiplataforma de código abierto de librerías y software C ++ orientadas a objetos, muy popular como entorno de escritorio Linux. Esas son diapositivas de una conferencia 2003 de KDE.