Hay una mejora muy interesante en Delphi, C ++ Builder y RAD Studio 11.0 Alexandria: el IDE ahora es totalmente compatible con el escalado de DPI alto en pantallas de alta resolución. Esto significa que si usa Windows y tiene una pantalla de alta resolución 4K o similar, el IDE se procesará de manera nítida y clara en su pantalla. De hecho, si tiene dos pantallas con diferentes escalas, puede tener diferentes ventanas IDE en esas múltiples pantallas y cada una se renderizará perfectamente, nítida y clara en cada monitor. Este alto nivel de DPI admite el uso del propio soporte de VCL para el escalado perMonitorv2, que presentamos hace un par de versiones, además de nuestra propia colección de imágenes y componentes de lista de imágenes virtuales. En otras palabras, utilizamos las mismas herramientas que ponemos a su disposición.
Es importante destacar que el soporte de alto DPI incluye soporte en el editor de código, para texto nítido y al diseñar formularios, tanto VCL como FMX. (Si ha iniciado RAD Studio 11 y pensó, ‘¡hey, mi formulario es pequeño!’, Siga leyendo: tenemos configuraciones que controlan la escala en el diseñador de formularios VCL y está configurado como sin escala de forma predeterminada).
Profundicemos en cómo se comporta el IDE en pantallas de alta y baja resolución en la actualidad, algunas notas interesantes sobre cómo se implementó y veamos el diseño de formularios VCL en particular.
Table of Contents
Comparación de alto DPI
La mejor manera de ver la diferencia en el IDE es usarlo. Usar el IDE en una pantalla de alta resolución es como el día y la noche: hay algunas cosas que las capturas de pantalla solo transmiten a medias, y el aspecto y la sensación de RAD Studio 11 es una de ellas. En persona, es una diferencia asombrosa.
Pero para mostrar lo que podemos en una publicación de blog, aquí hay una gran imagen que Jim McKeeth creó comparando los IDE 10.4.2 y 11.0:
A la derecha, el nuevo IDE de alta resolución de DPI en v11. Es nítido y claro sin importar cuán alta sea la escala.
Puede ver que en la imagen de la derecha, en v11.0 Alexandria, el texto y los íconos son claros sin importar cuán grande sea la pantalla en la que esté colocado el IDE.
Antecedentes: ¿por qué un DPI alto?
Una escala típica establecida en Windows hoy en día es del 200%. Esto es 2 veces la densidad de píxeles, lo que realmente significa que por cada píxel en el pasado, ahora hay cuatro píxeles (está dividido en dos vertical y horizontalmente). Estoy escribiendo esto en un monitor 4K, que tiene 2160 píxeles de alto. Eso es 2 veces 1080, una resolución vertical que antes de los altos DPI usé durante años. Para que todo aparezca con el mismo tamaño físico en pantalla, necesito escalar en 2.
Si una aplicación no es compatible con un DPI alto (“DPI inconsciente”), Windows la ampliará, pero la ampliación añade borrosidad. Es mucho mejor si una aplicación es consciente de la escala aplicada a la pantalla en la que se encuentran sus ventanas y puede dibujar con nitidez. Agregamos soporte a VCL para esto en 10.3 , admitiendo el escalado de DPI alto perMonitorv2 (la última y mejor de las opciones que ofrece Windows) y agregando componentes para íconos de alta resolución y dibujo de imágenes , brindando un mejor soporte para imágenes de alta resolución en barras de herramientas y menús que Windows ha incorporado. El IDE, que se construye principalmente con VCL, los usa y es una gran demostración de las capacidades de VCL.
El IDE usa estilos para dibujar sus temas claros, oscuros y brumosos, y los estilos VCL también son compatibles con el escalado de DPI alto .
Diseñadores de formularios de alto DPI
Si bien el soporte de alto DPI de VCL es en gran parte una cuestión de habilitar el soporte de perMonitorv2 en la página Aplicación> Manifiesto de las opciones de su proyecto y recompilar, además de actualizar imágenes (más información a continuación) y actualizar cualquier dibujo personalizado o constantes de píxeles codificadas para usar el Sobrecargas de ScaleValueobtener el nuevo punto, valor, rect, etc. para la forma de alto DPI, no es tan simple como eso. Teníamos un área específica que no se aplica a las aplicaciones de los clientes en la que necesitábamos trabajar, y fue esta la que requirió la mayor parte de nuestro esfuerzo de desarrollo. De hecho, investigar y crear prototipos del mejor enfoque aquí es una de las razones por las que se tardó hasta v11 en implementar un DPI alto en el IDE después de que introdujimos el soporte para el VCL en sí en 10.3. Esa área es el diseñador de formularios VCL. Hemos ideado una solución que esperamos satisfaga todas las necesidades.
Puede escalar el diseñador de formularios de VCL a cualquier DPI (cualquier escala). Esto se hace utilizando la misma tecnología de escalado que usa VCL cuando se escala a sí mismo en tiempo de ejecución, es decir, cuando se ejecuta una aplicación y necesita ajustar su tamaño y diseño para que coincida la pantalla está encendida. Esta configuración se encuentra en Herramientas> Opciones> Interfaz de usuario> Diseñador de formularios> DPI alto. Cuando lo cambie, deberá cerrar y volver a abrir el diseñador de formularios para que surta efecto.
De forma predeterminada, cuando abre un formulario, el formulario está diseñado a 96 DPI, es decir, al 100%. Eso significa que si su IDE está al 200%, el formulario aparecerá más pequeño que los controles que lo rodean. Un conocimiento clave es que cuando se escala un formulario, se cambian las propiedades Izquierda, Altura, etc., esto es exactamente lo mismo que cuando se ejecuta una aplicación y se escala; esos valores se multiplican por la escala de la pantalla. Diseñar al 100%, el valor predeterminado, significa que el formulario no se escala en absoluto: abrir un formulario no cambia los valores almacenados en el DFM en comparación con abrirlo en, digamos, 10.4.2. Si instala v11 y nota que sus formularios se ven pequeños, esta es la razón: hicimos el comportamiento predeterminado para no modificar un formulario.
Es probable que modifiquemos la leyenda del diseñador de formularios para escalar también en una versión futura; actualmente, solo escala el contenido diseñado real de su formulario.
También puede permitir que el diseñador de formularios se adapte a su pantalla. Esto significa que un botón en un formulario coincidirá con el tamaño de un botón en un cuadro de diálogo IDE: siempre coincidirá con la escala de la pantalla sin importar la pantalla o cuál sea la escala (125%, 150%, 300% …). conveniente si solo desea ver su formulario del mismo tamaño que todo lo demás con lo que interactúa en la interfaz de usuario. En el cuadro de diálogo Opciones de IDE, esto es ‘Automático’ porque lo configurará según la pantalla en la que esté el diseñador cada vez que lo abra.
Por último, puede establecer una escala específica que utilice para el diseño de formularios. Puede ser cualquier escala: 125%, 300%, lo que quieras
Windows y, por lo tanto, la VCL usa coordenadas enteras para sus tamaños y ubicaciones. Esto significa que es posible que cualquier escala, de cualquier aplicación, no siempre sea exactamente precisa. En la práctica, está bien cuando se escala una vez (por ejemplo, cuando se ejecuta una aplicación y se escala a partir de las coordenadas de baja resolución con las que fue diseñada). También es una escala fina varias veces, como pasar de un monitor a otro después del lanzamiento. Importa más cuando se escala muchas veces (y esta es una de las razones por las que no tenemos una función en la que se diseñe a cualquier escala, pero se reduzca al 100% cuando se ahorra). Por lo tanto, está bien diseñar con un DPI alto en cualquier escala, y ejecutar incluso a una escala más baja, el VCL escalará su aplicación correctamente, pero es importante evitar escalar una y otra vez, lo que sucederá si cada vez que abre un formulario en el diseñador, se abre con un DPI diferente. Por lo tanto,
Diseñador FireMonkey
El diseñador de FireMonkey es mucho más sencillo. Simplemente se escala para coincidir con la propia escala del IDE, lo mismo que si escala una aplicación FMX en código. FireMonkey utiliza coordenadas de punto flotante y no tiene las mismas consideraciones técnicas que las aplicaciones VCL. En v11, también cambiamos FireMonkey en Windows para usar un sistema de coordenadas basado en unidades de dispositivo, no píxeles, lo que significa que en los formularios FMX de Windows se puede escalar a la escala de visualización mejor que en el pasado, incluso con una representación de mayor calidad.
Cambios tecnicos
Los proveedores de componentes no necesitan ningún cambio en los íconos que suministran con sus componentes, ya que hemos admitido íconos de componentes de alta resolución en formato PNG desde 10.2.2 . Los proveedores de complementos o complementos tienen nuevas API en ToolsAPI para agregar imágenes a la colección interna de imágenes de alta resolución del IDE (estas están fuera del alcance de este artículo, pero consulte ToolsAPI.pas para TGraphicArray: cada una de estas nuevas sobrecargas permite agregar múltiples tamaños de una imagen a la colección de imágenes que respalda las listas de imágenes del IDE).
Internamente, y esto no afectará a ningún desarrollador, pero puede ser interesante saberlo: cada formulario IDE tiene su propia lista de imágenes . Esto es necesario para el soporte de alto DPI, ya que es un formulario que se escala, y dos formularios en dos pantallas diferentes pueden escalar de manera diferente, por lo que una lista de imágenes no se puede compartir entre múltiples formularios o controles en múltiples formularios porque las imágenes pueden tener el tamaño correcto para una forma pero incorrecta para la otra. De hecho, en el pasado, el IDE tenía varias listas de imágenes de estilo antiguo de todos modos, a menudo una por formulario; pero en el pasado, dado que las listas de imágenes antiguas almacenan sus propias imágenes, esto también significaba que se duplicaban muchas imágenes. Una X de eliminación roja podría haber estado en varias listas de imágenes, y esto dificultó la actualización de los íconos.
El IDE ahora tiene una única colección de imágenes central . Contiene todas las imágenes utilizadas en el IDE (que no sean los iconos de los componentes, que se almacenan por separado). Varias listas de imágenes en el IDE se conectan a esta colección de imágenes. Como parte de ese trabajo, usamos tanto software como el ojo humano para eliminar los íconos duplicados, por lo que la colección de imágenes tiene una única copia de cada uno. Esto ha facilitado mucho la actualización de los iconos. La colección de imágenes ahora también tiene un campo de comentario para cada ícono, que se puede usar para almacenar cualquier información que desee: lo usamos para almacenar notas sobre dónde y cómo se usa el ícono.
Esperamos que esta información sobre el enfoque que adoptamos le sea útil al actualizar su propio software a un DPI alto. También tenemos aquí documentación completa sobre imágenes de alta resolución por pulgada .
Otros cambios
Un pequeño cambio final que hicimos es en algunos de los íconos IDE. La mayoría de los íconos fueron reemplazados por versiones de alta resolución (multi-resolución), por lo que pueden mostrarse nítidamente a cualquier escala. Sin embargo, también rediseñamos algunos de los íconos para las partes clave del producto.
Algunos de los botones más importantes de la barra de herramientas en todo el IDE son Ejecutar con depuración; ¡para esto es para lo que usa el IDE, en última instancia! – además de operaciones de depuración como pasar, rastrear, etc. Todos estos ahora tienen nuevos íconos que han sido especialmente diseñados para su propósito, para que se vean claros pero también ilustran cuál es la operación. Se ven así:
 |
 |
| The new Run with Debugging icon. It looks more like a Run symbol, and has a bug being squashed underneath. | Step Over – such a simple design! But I think a very elegant way of showing the concept |
Puede notar que la parte Ejecutar se parece al ícono de ejecución anterior de Delphi 7 (menos ancho horizontalmente), el ícono de Plataformas se parece a uno que solía tener el IDE que es un círculo de múltiples partes (está destinado a indicar la unidad de varios elementos diferentes), y algunos otros iconos también tienen nuevas versiones.
Además, nos trasladamos a Consolas como fuente predeterminada para el editor. Consolas es una fuente muy similar a Delphi, es decir, le resultará natural si ha utilizado la antigua fuente predeterminada Courier New en el pasado (que aún puede usar). También instalamos varias fuentes de programador: Fira Code, Monoid, Source Code Pro, etc.
IDE de alto DPI
RAD Studio 11.0 trae una revisión muy solicitada y muy grande del IDE: soporte completo de DPI alto. Representar de forma nítida y clara en todas las pantallas, con soporte para el diseño de formularios en múltiples escalas y texto claro con una fuente nueva pero familiar en el editor, es uno de los mayores cambios y mejoras que hemos realizado.
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition
