Há uma melhoria muito interessante no Delphi, C ++ Builder e RAD Studio 11.0 Alexandria: o IDE agora oferece suporte total ao escalonamento de DPI alto em telas de alta resolução. Isso significa que se você usar o Windows e tiver um monitor de alta resolução de 4K ou semelhante, o IDE será renderizado de forma nítida e clara na tela. Na verdade, se você tiver duas telas com escalas diferentes, poderá ter janelas IDE diferentes nessas várias telas e cada uma será renderizada de forma perfeita, nítida e clara, em cada monitor. Este suporte de escalonamento de alto DPI usando o suporte do próprio VCL para escalonamento perMonitorv2, que apresentamos alguns lançamentos atrás, além de nossa própria coleção de imagens e componentes de lista de imagens virtuais. Em outras palavras, usamos as mesmas ferramentas que disponibilizamos para você.
É importante ressaltar que o suporte a alto DPI inclui suporte no editor de código, para texto nítido e ao projetar formulários, tanto VCL quanto FMX. (Se você iniciou o RAD Studio 11 e pensou, ‘ei, meu formulário é pequeno!’, Continue lendo – temos configurações que controlam o dimensionamento no designer de formulário VCL e você está definido como sem escala por padrão.)
Vamos nos aprofundar em como o IDE se comporta em telas de alta e baixa resolução hoje, algumas notas interessantes sobre como foi implementado e olhar para o design de formulários VCL em particular.
Table of Contents
Comparação de alto DPI
A melhor maneira de ver a diferença no IDE é usá-lo. Usar o IDE em uma tela de alta resolução é como noite e dia – há algumas coisas que as capturas de tela transmitem apenas pela metade, e a aparência do RAD Studio 11 é uma delas. Pessoalmente, é uma diferença incrível.
Mas para mostrar o que podemos apenas em uma postagem do blog, aqui está uma ótima imagem que Jim McKeeth criou comparando os IDEs 10.4.2 e 11.0:
À direita, o novo IDE com reconhecimento de alto DPI na v11. É nítido e claro, não importa quão alta seja a escala.
Você pode ver que na imagem à direita, na versão 11.0 Alexandria, o texto e os ícones são claros, independentemente do tamanho da tela em que o IDE é colocado.
Histórico – por que alto DPI?
Uma escala típica definida no Windows hoje é de 200%. Isso é 2x a densidade de pixels, o que realmente significa que para cada pixel no passado, agora existem quatro pixels (ele é dividido em dois verticalmente e horizontalmente). Estou escrevendo isso em um monitor de 4K, que tem 2160 pixels de altura. Isso é 2 vezes 1080, uma resolução vertical que antes de alto DPI eu usei por anos. Para fazer com que tudo apareça com o mesmo tamanho físico na tela, preciso dimensionar em 2.
Se um aplicativo não oferecer suporte a DPI alto (é ‘DPI desconhecido’), o Windows o aumentará, mas o aumento de escala adiciona manchas. É muito melhor se um aplicativo estiver ciente do dimensionamento aplicado à tela em que suas janelas estão e puder desenhar com nitidez. Adicionamos suporte ao VCL para isso em 10.3 , suportando escalonamento de alta resolução perMonitorv2 (a mais recente e melhor das opções que o Windows oferece) e adicionando componentes para ícones de alta resolução e desenho de imagem , fornecendo melhor suporte para imagens de alta resolução em barras de ferramentas e menus que o Windows incorporou. O IDE, que é principalmente construído com a VCL, usa isso e é uma grande demonstração dos recursos da VCL.
O IDE usa estilos para desenhar seus temas claro, escuro e nebuloso, e os estilos VCL também têm suporte para escalonamento de DPI alto .
Designers de formulários de alto DPI
Embora o suporte de alto DPI da VCL seja em grande parte uma questão de habilitar o suporte a perMonitorv2 na página Application> Manifest de suas opções de projeto e recompilar, além de atualizar as imagens (mais informações abaixo) e atualizar qualquer desenho personalizado ou constantes de pixel embutidas para usar o Sobrecargas ScaleValuepara obter o novo ponto, valor, retângulo, etc. para a forma de alto DPI, não é tão simples assim. Tínhamos uma área específica que não se aplicava aos aplicativos do cliente em que precisávamos trabalhar, e foi isso que exigiu a maior parte de nosso esforço de desenvolvimento. Na verdade, pesquisar e prototipar a melhor abordagem aqui é um dos motivos pelos quais demorou até a v11 para implementar alto DPI no IDE depois que introduzimos o suporte para o próprio VCL em 10.3. Essa área é o designer de formulário VCL. Encontramos uma solução que esperamos que atenda a todas as necessidades.
Você pode dimensionar o designer de formulário VCL para qualquer DPI (qualquer escala.) Isso é feito usando a mesma tecnologia de dimensionamento que a VCL usa ao se redimensionar em tempo de execução, ou seja, quando um aplicativo é executado e precisa ajustar seu tamanho e layout para corresponder a tela está ligada. Esta configuração está em Ferramentas> Opções> Interface do usuário> Criador de formulários> Alto DPI. Ao alterá-lo, você precisará fechar e reabrir o designer de formulário para ter um efeito.
Por padrão, quando você abre um formulário, ele é projetado em 96 DPI – ou seja, em 100%. Isso significa que se seu IDE estiver em 200%, o formulário aparecerá menor do que os controles ao seu redor. Um dado importante de conhecimento é que quando um formulário é dimensionado, as propriedades Esquerda, Altura etc. são alteradas – isso é exatamente o mesmo que quando você executa um aplicativo e ele é dimensionado; esses valores são multiplicados pela escala da tela. Projetar em 100%, o padrão, significa que o formulário não é escalado: abrir um formulário não altera os valores armazenados no DFM em comparação com abri-lo em, digamos, 10.4.2. Se você instalar a v11 e perceber que seus formulários parecem pequenos, é por isso: criamos o comportamento padrão de não modificar um formulário.
Provavelmente, ajustaremos a legenda do designer de formulário para dimensionar também em uma versão futura – atualmente, ela dimensiona apenas o conteúdo real projetado de seu formulário.
Você também pode permitir que o designer de formulário corresponda à sua tela. Isso significa que um botão em um formulário corresponderá ao tamanho de um botão em uma caixa de diálogo IDE: ele sempre corresponderá ao dimensionamento da tela, não importa a tela ou qual seja a escala (125%, 150%, 300% …) Este é o máximo conveniente se você deseja apenas ver seu formulário do mesmo tamanho de tudo o mais com o qual você interage na IU. Na caixa de diálogo Opções do IDE, isso é ‘Automático’ porque irá defini-lo com base em como a tela do designer está sempre que você a abrir.
Por fim, você pode definir uma escala específica que usará para o design do formulário. Pode ser qualquer escala – 125%, 300%, o que você quiser.
O Windows e, portanto, o VCL usa coordenadas inteiras para seus tamanhos e localizações. Isso significa que qualquer dimensionamento – de qualquer aplicativo – pode nem sempre ser exatamente preciso. Na prática, não há problema em dimensionar uma vez (como quando um aplicativo é executado e aumentar a partir das coordenadas de baixa resolução com as quais foi projetado). Também é possível dimensionar bem algumas vezes, como passar de um monitor para outro. após o lançamento. É mais importante ao dimensionar muitas vezes (e esta é uma razão pela qual não temos um recurso em que você projeta em qualquer escala, mas reduza para 100% ao salvar.) Portanto, é bom projetar em DPI alto em qualquer escala, e executar até mesmo em uma escala inferior – o VCL escalará seu aplicativo corretamente – mas é importante evitar escalar continuamente, o que acontecerá se cada vez que você abrir um formulário no designer ele for aberto em um DPI diferente. Portanto,
FireMonkey Designer
O designer FireMonkey é muito mais simples. Ele simplesmente é dimensionado para corresponder à própria escala do IDE, da mesma forma que se você dimensionar um aplicativo FMX em código. FireMonkey usa coordenadas de ponto flutuante e não tem as mesmas considerações técnicas que os aplicativos VCL. Na v11, também alteramos FireMonkey no Windows para usar um sistema de coordenadas baseado em unidades de dispositivo, não pixels, o que significa que os formulários FMX do Windows podem ser dimensionados para a escala de exibição melhor do que no passado, incluindo renderização de qualidade superior.
Mudanças Técnicas
Os fornecedores de componentes não precisam de nenhuma alteração nos ícones que fornecem com seus componentes, uma vez que oferecemos suporte a ícones de componentes de alta resolução no formato PNG desde 10.2.2 . Fornecedores de plug-ins ou addons têm novas APIs no ToolsAPI para adicionar imagens à coleção de imagens de alta resolução interna do IDE (estão fora do escopo deste artigo, mas verifique ToolsAPI.pas para TGraphicArray: cada uma dessas novas sobrecargas permite adicionar vários tamanhos de uma imagem para a coleção de imagens que apoia as listas de imagens do IDE.)
Internamente, e isso não afetará nenhum desenvolvedor, mas pode ser interessante saber: cada formulário IDE tem sua própria lista de imagens . Isso é necessário para suporte de alta DPI, pois é um formulário que pode ser dimensionado, e dois formulários em duas telas diferentes podem ser dimensionados de maneira diferente, portanto, uma lista de imagens não pode ser compartilhada entre vários formulários ou controles em vários formulários porque as imagens podem ter o tamanho certo para uma forma, mas errada para a outra. Na verdade, no passado, o IDE tinha várias listas de imagens no estilo antigo, geralmente uma por formulário; mas, no passado, como as listas de imagens no estilo antigo armazenavam suas próprias imagens, isso também significava que muitas imagens eram duplicadas. Um X vermelho de exclusão pode estar em várias listas de imagens, o que torna difícil atualizar os ícones.
O IDE agora tem uma única coleção central de imagens . Isso contém todas as imagens usadas no IDE (exceto ícones de componentes, armazenados separadamente). Várias listas de imagens no IDE se conectam a esta coleção de imagens. Como parte desse trabalho, usamos o software e o olho humano para eliminar a duplicação de ícones, de modo que a coleção de imagens tem uma única cópia de cada. Isso tornou muito mais fácil atualizar os ícones. A coleção de imagens agora tem um campo de comentário para cada ícone também, que pode ser usado para armazenar qualquer informação que você quiser: nós o usamos para armazenar notas sobre onde e como o ícone é usado.
Esperamos que este insight sobre a abordagem que adotamos possa ser útil para você ao atualizar seu próprio software para alto DPI. Também temos documentação abrangente sobre imagens de alto DPI aqui .
Outras Mudanças
Uma pequena alteração final que fizemos foi em alguns dos ícones IDE. A maioria dos ícones foi substituída por versões de alta resolução (multi-resolução), para que possam ser exibidos com nitidez em qualquer escala. No entanto, também redesenhamos alguns dos ícones para as partes principais do produto.
Alguns dos botões mais importantes da barra de ferramentas em todo o IDE são Executar com depuração – é para isso que você usa o IDE, em última análise! – além de operações de depuração, como passar por cima, rastrear, etc. Todos agora têm novos ícones que foram especialmente projetados para seu propósito, para parecerem claros, mas também ilustrar o que a operação é. Eles são assim:
 |
 |
| 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 |
Você pode notar que a parte Executar se parece com o ícone de execução do Delphi 7 mais antigo (menos horizontalmente largo), o ícone Plataformas se parece com um que o IDE costumava ter, que é um círculo de várias partes (destina-se a indicar a unidade de vários itens diferentes), e alguns outros ícones também têm novas versões.
Além disso, mudamos para Consolas como a fonte padrão do editor. Consolas é uma fonte muito parecida com Delphi – isto é, parecerá natural para você se você já usou a fonte Courier New padrão antiga (que você ainda pode usar). Também instalamos várias fontes de programador: Fira Code, Monoid, Source Code Pro e assim por diante.
IDE de alta DPI
RAD Studio 11.0 traz uma revisão muito solicitada e muito grande do IDE: suporte total a alta DPI. Renderizando de forma nítida e clara em todas as telas, com suporte para criação de formulários em várias escalas e texto claro com uma fonte nova, mas familiar no editor, é uma das maiores mudanças e melhorias que fizemos.
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition
