{"id":1766,"date":"2026-07-15T17:14:30","date_gmt":"2026-07-15T20:14:30","guid":{"rendered":"https:\/\/code4delphi.com.br\/blog\/?p=1766"},"modified":"2026-07-15T17:14:31","modified_gmt":"2026-07-15T20:14:31","slug":"dashboards-no-delphi-com-tms-fnc-dashboard-pack","status":"publish","type":"post","link":"https:\/\/code4delphi.com.br\/blog\/dashboards-no-delphi-com-tms-fnc-dashboard-pack\/","title":{"rendered":"Dashboards no Delphi com TMS FNC Dashboard Pack"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Criar interfaces modernas e facilitar a visualiza\u00e7\u00e3o das informa\u00e7\u00f5es \u00e9 cada vez mais importante em sistemas de gest\u00e3o, monitoramento, vendas, produ\u00e7\u00e3o e outras aplica\u00e7\u00f5es que trabalham com grandes volumes de dados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O <strong>TMS FNC Dashboard Pack<\/strong> oferece diversos componentes visuais para criar dashboards modernos no Delphi, permitindo representar informa\u00e7\u00f5es por meio de indicadores, gr\u00e1ficos, medidores, barras de progresso e outros widgets personaliz\u00e1veis.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Neste primeiro conte\u00fado, vamos conhecer algumas das possibilidades oferecidas pelo pacote.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Sum\u00e1rio<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Alternar tabela de conte\u00fado\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/code4delphi.com.br\/blog\/dashboards-no-delphi-com-tms-fnc-dashboard-pack\/#Indicadores_de_distribuicao\" >Indicadores de distribui\u00e7\u00e3o<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/code4delphi.com.br\/blog\/dashboards-no-delphi-com-tms-fnc-dashboard-pack\/#Barras_verticais_e_horizontais\" >Barras verticais e horizontais<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/code4delphi.com.br\/blog\/dashboards-no-delphi-com-tms-fnc-dashboard-pack\/#Graficos_em_formato_de_funil\" >Gr\u00e1ficos em formato de funil<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/code4delphi.com.br\/blog\/dashboards-no-delphi-com-tms-fnc-dashboard-pack\/#Indicadores_circulares_de_progresso\" >Indicadores circulares de progresso<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/code4delphi.com.br\/blog\/dashboards-no-delphi-com-tms-fnc-dashboard-pack\/#Gauges_e_medidores\" >Gauges e medidores<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/code4delphi.com.br\/blog\/dashboards-no-delphi-com-tms-fnc-dashboard-pack\/#Displays_de_LED_e_indicadores_visuais\" >Displays de LED e indicadores visuais<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/code4delphi.com.br\/blog\/dashboards-no-delphi-com-tms-fnc-dashboard-pack\/#Indicadores_de_tendencia\" >Indicadores de tend\u00eancia<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/code4delphi.com.br\/blog\/dashboards-no-delphi-com-tms-fnc-dashboard-pack\/#Dashboards_multiplataforma\" >Dashboards multiplataforma<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/code4delphi.com.br\/blog\/dashboards-no-delphi-com-tms-fnc-dashboard-pack\/#Componentes_disponiveis\" >Componentes dispon\u00edveis<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/code4delphi.com.br\/blog\/dashboards-no-delphi-com-tms-fnc-dashboard-pack\/#Exemplos_praticos\" >Exemplos pr\u00e1ticos<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/code4delphi.com.br\/blog\/dashboards-no-delphi-com-tms-fnc-dashboard-pack\/#%E2%AD%90_Projeto_de_exemplo_no_GitHub\" >\u2b50 Projeto de exemplo no GitHub<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/code4delphi.com.br\/blog\/dashboards-no-delphi-com-tms-fnc-dashboard-pack\/#%F0%9F%94%97_Links_uteis\" >\ud83d\udd17 Links \u00fateis<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/code4delphi.com.br\/blog\/dashboards-no-delphi-com-tms-fnc-dashboard-pack\/#%F0%9F%8F%B7%EF%B8%8F_Cupom_de_desconto\" >\ud83c\udff7\ufe0f Cupom de desconto<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/code4delphi.com.br\/blog\/dashboards-no-delphi-com-tms-fnc-dashboard-pack\/#%E2%9C%85_Conclusao\" >\u2705 Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Indicadores_de_distribuicao\"><\/span>Indicadores de distribui\u00e7\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Os componentes de distribui\u00e7\u00e3o permitem representar diferentes valores dentro de um mesmo conjunto de dados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Entre os formatos dispon\u00edveis, podemos utilizar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gr\u00e1fico Donut;<\/li>\n\n\n\n<li>Gr\u00e1fico de pizza;<\/li>\n\n\n\n<li>Barras verticais;<\/li>\n\n\n\n<li>Barras horizontais;<\/li>\n\n\n\n<li>Gr\u00e1ficos em formato de funil.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Esses componentes podem exibir valores absolutos ou percentuais, al\u00e9m de permitir a personaliza\u00e7\u00e3o das cores, legendas e diferentes formas de apresenta\u00e7\u00e3o.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00e3o op\u00e7\u00f5es interessantes para representar vendas por regi\u00e3o, distribui\u00e7\u00e3o de clientes, participa\u00e7\u00e3o de produtos, etapas de um processo comercial e diversas outras informa\u00e7\u00f5es.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"928\" height=\"403\" src=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/Dunnet-pIE.png\" alt=\"\" class=\"wp-image-1767\" srcset=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/Dunnet-pIE.png 928w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/Dunnet-pIE-300x130.png 300w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/Dunnet-pIE-768x334.png 768w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/Dunnet-pIE-920x400.png 920w\" sizes=\"auto, (max-width: 928px) 100vw, 928px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Barras_verticais_e_horizontais\"><\/span>Barras verticais e horizontais<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Os mesmos dados podem ser apresentados utilizando barras empilhadas na posi\u00e7\u00e3o vertical ou horizontal.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cada parte da barra representa uma categoria diferente, permitindo visualizar rapidamente a participa\u00e7\u00e3o de cada item no valor total.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"928\" height=\"603\" src=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/Dashboard-Bar-horizontal-Vertical.png\" alt=\"\" class=\"wp-image-1768\" srcset=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/Dashboard-Bar-horizontal-Vertical.png 928w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/Dashboard-Bar-horizontal-Vertical-300x195.png 300w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/Dashboard-Bar-horizontal-Vertical-768x499.png 768w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/Dashboard-Bar-horizontal-Vertical-920x598.png 920w\" sizes=\"auto, (max-width: 928px) 100vw, 928px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Graficos_em_formato_de_funil\"><\/span>Gr\u00e1ficos em formato de funil<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Os gr\u00e1ficos de funil s\u00e3o \u00fateis para representar processos compostos por diferentes etapas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eles podem ser utilizados, por exemplo, para acompanhar um processo de vendas:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Visitantes;<\/li>\n\n\n\n<li>Leads;<\/li>\n\n\n\n<li>Pedidos;<\/li>\n\n\n\n<li>Regi\u00f5es;<\/li>\n\n\n\n<li>Vendas conclu\u00eddas.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">O tamanho de cada etapa facilita a identifica\u00e7\u00e3o das maiores quedas durante o processo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"928\" height=\"603\" src=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/Dashboard-Funnel.png\" alt=\"\" class=\"wp-image-1769\" srcset=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/Dashboard-Funnel.png 928w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/Dashboard-Funnel-300x195.png 300w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/Dashboard-Funnel-768x499.png 768w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/Dashboard-Funnel-920x598.png 920w\" sizes=\"auto, (max-width: 928px) 100vw, 928px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Indicadores_circulares_de_progresso\"><\/span>Indicadores circulares de progresso<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O pacote tamb\u00e9m oferece diferentes estilos de indicadores circulares de progresso.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esses componentes podem ser utilizados para acompanhar o andamento de tarefas, processos de backup, metas, sincroniza\u00e7\u00f5es, carregamentos ou qualquer opera\u00e7\u00e3o que possua um valor percentual.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 poss\u00edvel criar desde indicadores circulares mais simples at\u00e9 componentes formados por v\u00e1rios an\u00e9is, permitindo acompanhar diferentes informa\u00e7\u00f5es simultaneamente.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"934\" height=\"521\" src=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/progress.png\" alt=\"\" class=\"wp-image-1770\" srcset=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/progress.png 934w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/progress-300x167.png 300w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/progress-768x428.png 768w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/progress-920x513.png 920w\" sizes=\"auto, (max-width: 934px) 100vw, 934px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Gauges_e_medidores\"><\/span>Gauges e medidores<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Os componentes do tipo Gauge permitem criar medidores semelhantes aos utilizados em pain\u00e9is de ve\u00edculos, m\u00e1quinas e equipamentos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eles podem apresentar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Valores m\u00ednimos e m\u00e1ximos;<\/li>\n\n\n\n<li>Divis\u00f5es e marca\u00e7\u00f5es;<\/li>\n\n\n\n<li>Valor total de vendas ou compras;<\/li>\n\n\n\n<li>Metas e objetivos;<\/li>\n\n\n\n<li>N\u00famero de documentos emitidos;<\/li>\n\n\n\n<li>\u00c1reas de alerta.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Esse tipo de componente pode ser utilizado para monitorar temperatura, velocidade, press\u00e3o, consumo, produtividade ou qualquer outro indicador num\u00e9rico.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"934\" height=\"503\" src=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/gauge.png\" alt=\"\" class=\"wp-image-1771\" srcset=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/gauge.png 934w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/gauge-300x162.png 300w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/gauge-768x414.png 768w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/gauge-920x495.png 920w\" sizes=\"auto, (max-width: 934px) 100vw, 934px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Displays_de_LED_e_indicadores_visuais\"><\/span>Displays de LED e indicadores visuais<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Outra op\u00e7\u00e3o dispon\u00edvel s\u00e3o os componentes que simulam displays e indicadores de LED.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eles podem ser utilizados para representar o estado de equipamentos, servi\u00e7os, conex\u00f5es ou processos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Verde para funcionamento normal;<\/li>\n\n\n\n<li>Amarelo para aten\u00e7\u00e3o;<\/li>\n\n\n\n<li>Vermelho para erro ou interrup\u00e7\u00e3o.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Tamb\u00e9m existem displays capazes de apresentar textos e valores utilizando um estilo semelhante aos pain\u00e9is eletr\u00f4nicos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"360\" height=\"40\" src=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/widgetledbar-basic-dark.png\" alt=\"\" class=\"wp-image-1772\" srcset=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/widgetledbar-basic-dark.png 360w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/widgetledbar-basic-dark-300x33.png 300w\" sizes=\"auto, (max-width: 360px) 100vw, 360px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"300\" src=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/image-3.png\" alt=\"\" class=\"wp-image-1773\" srcset=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/image-3.png 420w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/image-3-300x214.png 300w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"572\" height=\"55\" src=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/image-4.png\" alt=\"\" class=\"wp-image-1774\" srcset=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/image-4.png 572w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/image-4-300x29.png 300w\" sizes=\"auto, (max-width: 572px) 100vw, 572px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Indicadores_de_tendencia\"><\/span>Indicadores de tend\u00eancia<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para representar pequenas varia\u00e7\u00f5es de dados, podemos utilizar componentes de tend\u00eancia semelhantes a gr\u00e1ficos de linha simplificados.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eles s\u00e3o \u00fateis para exibir informa\u00e7\u00f5es como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Evolu\u00e7\u00e3o das vendas;<\/li>\n\n\n\n<li>Dados de entregas;<\/li>\n\n\n\n<li>Quantidade de acessos;<\/li>\n\n\n\n<li>Consumo de recursos;<\/li>\n\n\n\n<li>Altera\u00e7\u00f5es em indicadores.<\/li>\n\n\n\n<li>Varia\u00e7\u00e3o diversas<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Por serem componentes compactos, podem ser adicionados facilmente dentro de cards ou pain\u00e9is de um dashboard.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"778\" height=\"289\" src=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/image-5.png\" alt=\"\" class=\"wp-image-1775\" srcset=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/image-5.png 778w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/image-5-300x111.png 300w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/image-5-768x285.png 768w\" sizes=\"auto, (max-width: 778px) 100vw, 778px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"773\" height=\"292\" src=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/image-6.png\" alt=\"\" class=\"wp-image-1776\" srcset=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/image-6.png 773w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/image-6-300x113.png 300w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/image-6-768x290.png 768w\" sizes=\"auto, (max-width: 773px) 100vw, 773px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Dashboards_multiplataforma\"><\/span>Dashboards multiplataforma<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Como os componentes fazem parte da fam\u00edlia FNC, eles podem ser utilizados em diferentes tecnologias do ecossistema Delphi, incluindo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"524\" height=\"124\" src=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/VCL-FMX-Web-FNC.png\" alt=\"\" class=\"wp-image-1780\" srcset=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/VCL-FMX-Web-FNC.png 524w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/VCL-FMX-Web-FNC-300x71.png 300w\" sizes=\"auto, (max-width: 524px) 100vw, 524px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Isso permite criar dashboards para aplica\u00e7\u00f5es Windows, dispositivos m\u00f3veis e aplica\u00e7\u00f5es Web, mantendo uma base visual consistente entre as diferentes plataformas, com reaproveitamento de c\u00f3digo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Componentes_disponiveis\"><\/span>Componentes dispon\u00edveis<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Na paleta do TMS FNC Dashboard Pack, encontramos todos os componentes dispon\u00edveis para a cria\u00e7\u00e3o de dashboards modernos no Delphi. Cada componente oferece uma forma diferente de representar informa\u00e7\u00f5es, indicadores e dados visuais. Nos pr\u00f3ximos artigos, veremos exemplos pr\u00e1ticos de <strong>como utilizar cada um deles<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"301\" height=\"314\" src=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/image-7.png\" alt=\"\" class=\"wp-image-1783\" srcset=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/image-7.png 301w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2026\/07\/image-7-288x300.png 288w\" sizes=\"auto, (max-width: 301px) 100vw, 301px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Exemplos_praticos\"><\/span>Exemplos pr\u00e1ticos<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Este foi apenas um overview das possibilidades oferecidas pelo TMS FNC Dashboard Pack.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nos pr\u00f3ximos artigos, veremos exemplos pr\u00e1ticos de uso dos componentes, suas principais propriedades e como podemos utiliz\u00e1-los para criar dashboards modernos em aplica\u00e7\u00f5es Delphi.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E2%AD%90_Projeto_de_exemplo_no_GitHub\"><\/span>\u2b50 Projeto de exemplo no GitHub<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Os exemplos apresentados nesta s\u00e9rie estar\u00e3o dispon\u00edveis no reposit\u00f3rio da Code4Delphi: <a href=\"https:\/\/github.com\/Code4Delphi\/TMS-FNC-Dashboard-Pack\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/Code4Delphi\/TMS-FNC-Dashboard-Pack<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%F0%9F%94%97_Links_uteis\"><\/span>\ud83d\udd17 Links \u00fateis<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">TMS FNC Dashboard Pack:<br><a href=\"https:\/\/www.tmssoftware.com\/site\/tmsfncdashboardpack.asp\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.tmssoftware.com\/site\/tmsfncdashboardpack.asp<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Documenta\u00e7\u00e3o oficial:<br><a href=\"https:\/\/doc.tmssoftware.com\/fnc\/dashboardpack\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/doc.tmssoftware.com\/fnc\/dashboardpack\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%F0%9F%8F%B7%EF%B8%8F_Cupom_de_desconto\"><\/span>\ud83c\udff7\ufe0f Cupom de desconto<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Utilize o cupom exclusivo da Code4Delphi para obter <strong>30% de desconto<\/strong> nos produtos da TMS Software:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2026Code4Delphi30<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E2%9C%85_Conclusao\"><\/span>\u2705 Conclus\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O TMS FNC Dashboard Pack oferece uma grande variedade de componentes para transformar dados em informa\u00e7\u00f5es visuais mais claras e atrativas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Com gr\u00e1ficos, gauges, barras de progresso, indicadores, displays e outros widgets, podemos criar dashboards profissionais e melhorar significativamente a experi\u00eancia dos usu\u00e1rios de nossas aplica\u00e7\u00f5es Delphi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Criar interfaces modernas e facilitar a visualiza\u00e7\u00e3o das informa\u00e7\u00f5es \u00e9 cada vez mais importante em sistemas&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"footnotes":""},"categories":[1,98],"tags":[166,138],"class_list":["post-1766","post","type-post","status-publish","format-standard","hentry","category-geral","category-tms","tag-dashboard","tag-tms-dashboard"],"_links":{"self":[{"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1766","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/comments?post=1766"}],"version-history":[{"count":7,"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1766\/revisions"}],"predecessor-version":[{"id":1785,"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1766\/revisions\/1785"}],"wp:attachment":[{"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}