design - ¿Cómo hacer mis aplicaciones "personalizables"?
user-interface skinning (10)
¿Hay alguna forma estándar de hacer que mis aplicaciones sean personalizables?
Por "skinnable" me refiero a la capacidad de la aplicación para admitir varias máscaras.
No estoy apuntando a ninguna plataforma en particular aquí. Solo quiero saber si existen pautas generales para hacer que las aplicaciones sean personalizables.
Parece que desvelar aplicaciones web es relativamente fácil. ¿Qué pasa con las aplicaciones de escritorio?
Dependiendo de cuán profundo desee cavar, puede optar por utilizar un marco de "formateo" (por ejemplo, el PLAF de Java, el CSS de la web) o una arquitectura de niveles múltiples completamente desacoplada.
Si desea definir una máscara conectable, debe tener en cuenta eso desde el principio. La capa de presentación no sabe nada sobre la lógica de negocios, pero es API y viceversa.
El principio básico es el utilizado por CSS en las páginas web.
En lugar de especificar el formato (color / fuente / diseño [hasta cierto punto]) de su contenido, simplemente describa qué tipo de contenido es.
Para dar un ejemplo web, en el contenido de una página de blog puede marcar diferentes secciones como una:
- Título
- Entrada de blog
- Panel de archivo
etc.
La Entrada puede estar compuesta de varias subsecciones, como "encabezado", "cuerpo" y "marca de tiempo".
Luego, en otro lugar, tiene una hoja de estilo que especifica todas las propiedades de cada tipo de elemento, tamaño, alineación, color, fondo, fuente, etc. Al representar la página o dibujar / inicializar los componentes en su UI siempre consulta la hoja de estilos actual para ver estas propiedades
Entonces, desollar y, de hecho, editar su diseño, se vuelve MUCHO más fácil. Puede crear una hoja de estilo diferente y ajustar los valores al contenido de su calor.
Editar:
Un punto clave para recordar es la distinción entre un estilo general (como clases en CSS) y un estilo específico (como ID en CSS). Desea poder identificar de forma única algunos elementos en su diseño, como el título, como un elemento único identificable al que puede aplicar un estilo único, mientras que otros elementos (como una entrada en un blog o un campo en una vista de base de datos) todos querrán tener el mismo estilo.
Es diferente para cada plataforma / tecnología.
Para WPF, eche un vistazo a lo que Josh Smith llama skinning estructural: http://www.codeproject.com/KB/WPF/podder2.aspx
Esto debería ser relativamente fácil, siga estos pasos:
- Elimine todo el diseño de su aplicación web o sitio web completo
- Usa css para cambiar la apariencia de tu aplicación.
Para obtener más información, visite css zen garden para obtener ideas.
Las pieles son solo otro nivel de abstracción (YALOA!).
Si lee en el patrón de diseño de MVC, entonces comprenderá muchos de los principios necesarios.
La capa de presentación (o máscara) solo tiene que hacer algunas cosas:
- Mostrar la interfaz
- Cuando se toman ciertas acciones (hacer clic, ingresar texto en un cuadro, etc.), entonces desencadena acciones
- Tiene que recibir avisos del modelo y el controlador cuando deba cambiarse
En un programa normal, esta abstracción se realiza mediante un código que conecta los cuadros de texto a los métodos y objetos con los que están relacionados, y con un código que cambia la visualización en función de los comandos del programa.
Si desea agregar skinning, necesita tomar esa habilidad y hacerlo de modo que pueda hacerse sin volver a compilar el código.
Vea, por ejemplo, XUL y vea cómo se hace allí. Encontrará que muchos proyectos de skinning utilizan XML para describir las distintas "caras" de la máscara (reproducir música u organizar la biblioteca para un aspecto de reproductor de MP3) y, luego, dónde se encuentra cada control y qué datos y métodos se debe adjuntar en el programa.
Puede parecer difícil hasta que lo haces, entonces te das cuenta de que es como cualquier otro nivel de abstracción con el que hayas lidiado antes (desde un programa con gotos, para controlar estructuras, a funciones, a estructuras, a clases y objetos, a JIT compiladores, etc.).
La curva de aprendizaje inicial no es trivial, pero haga algunos proyectos y verá que no es difícil.
-Adán
Mantenga todos sus estilos en un archivo (s) CSS separado
Manténgase alejado de cualquier estilo en línea
No deberias. O al menos deberías preguntarte si realmente es la decisión correcta.
Skinning rompe las pautas de diseño de la interfaz de usuario. "Acelera" al usuario porque su aplicación skinned funciona y se ve totalmente diferente de todas las otras aplicaciones que usa. Cosas como las teclas de método abreviado de comando no serán consistentes y perderán productividad. Será menos accesible para discapacitados porque a los lectores de pantalla les será más difícil entenderlo.
Hay un montón de razones para NO pelar. Si solo quieres hacer que tu aplicación sea visualmente distinta, esa es una mala razón en mi opinión. Harás que tu aplicación sea más difícil de usar y menos probable que las personas vayan más allá del período de prueba.
Habiendo dicho todo eso, hay algunas clases de aplicaciones en las que se espera básicamente el despellejamiento, como los reproductores de medios y los juegos imersive de pantalla completa. Pero si su aplicación no está en una clase en la que el skinning es obligatorio, consideraría seriamente encontrar otras formas de mejorar su aplicación.
Parece que la mayoría de la gente se refiere a CSS, como si fuera la única opción de skinning. Windows Media Player (y Winamp, AFAIR) usan XML así como también imágenes (si es necesario) para definir un aspecto.
El XML hace referencia a ganchos, eventos, etc. y maneja cómo se ven las cosas y cómo reaccionan. No estoy seguro de cómo manejan la parte de atrás, pero cargar una máscara determinada es tan simple como ubicar el archivo XML apropiado, cargar las imágenes y colocarlas donde necesitan ir.
XML también le brinda mucho más control sobre lo que puede hacer (es decir, crear nuevos componentes, cambiar el tamaño de los componentes, etc.).
XML combinado con CSS podría dar resultados maravillosos para un motor de desarrollo de una aplicación de escritorio o web.
Realmente depende de cuán "skinnable" quieras que sean tus aplicaciones. Permitir que el usuario configure colores e imágenes será mucho más fácil que dejarlos ocultar / eliminar componentes o incluso escribir sus propios componentes.
En la mayoría de los casos, probablemente pueda salirse con la suya escribiendo algún tipo de proveedor de recursos que sirva colores e imágenes en lugar de codificarlos en su archivo fuente. Así que esto:
Color backgroundColor = Color.BLUE;
Se convertiría en algo así como:
Color backgroundColor = ResourceManager.getColor("form.background");
Entonces, todo lo que tiene que hacer es cambiar las asignaciones en su clase ResourceManager y todos los clientes serán consistentes. Si desea hacer esto en tiempo real, cambiar cualquiera de las asignaciones de ResourceManager probablemente enviará un evento a sus clientes y les notificará que algo ha cambiado. Luego, los clientes pueden volver a dibujar sus componentes si así lo desean.
La implementación varía según la plataforma, pero aquí hay algunas consideraciones generales multiplataforma:
- Es bueno tener un diseño general establecido en el que los elementos visuales puedan ser "enchufados". Es más difícil (pero aún posible) admitir diseños generales completamente diferentes mediante el desollado.
- Desarrolle una convención de nomenclatura bien documentada para los activos (imágenes, fragmentos de HTML, etc.) que componen una máscara.
- Diseña una forma limpia de "descubrir" máscaras existentes y agregar nuevas. Por ejemplo: Winamp usa un formato de archivo ZIP para almacenar todas las imágenes de sus máscaras. Todos los archivos de máscara residen en una carpeta conocida de la carpeta de la aplicación.
- Tenga en cuenta los problemas de escala. No todos usan la misma resolución de pantalla.
- ¿Vas a permitir el desarrollo de la piel de un tercero? Esto afectará tu diseño.
- Arquitectónicamente, el patrón Modelo-Vista-Controlador se presta para desollar.
Estas son solo algunas de las cosas a tener en cuenta. Su implementación variará entre la web y el cliente gordo, y según los requisitos de su función. HTH.