ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

TMS FNC UI Pack:一套代码搞定Delphi VCL与FMX跨框架界面开发

TMS FNC UI Pack:一套代码搞定Delphi VCL与FMX跨框架界面开发 简介本资源是面向Delphi与C Builder中高级开发者的专业级UI组件库——TMS FNC UI Pack v7.1.0.0完整源码包专为XE7至XE13 Florence版本设计解决跨平台现代化界面开发效率低、控件样式陈旧、FireMonkey适配困难等核心痛点。压缩包共2000个文件含591个Pascal源文件.pas、166个Delphi项目文件.dproj、88个窗体定义.dfm、67个FireMonkey界面文件.fmx、149个图标.ico及大量资源图.jpg/.png/.svg总大小31.07MB结构清晰、模块完备便于按控件类型或平台目标快速定位源码与示例。已有42人学习下载适用于需深度定制UI、构建Windows/macOS/iOS/Android多端一致界面的商业应用或复杂数据可视化项目。用户可直接编译运行全部示例工程查阅完整源码理解FNC框架集成机制并基于源码修改渲染逻辑、扩展主题支持或适配特定硬件交互需求。 做Delphi开发这么多年我最头疼的事情之一就是第三方控件经常只支持VCL或者只支持FMX两边界面代码不通用。早先在XE7时代这个问题还能忍后来项目越做越大Windows工作台要给客户配安卓PDA移动端VCL这一套直接断了路FMX又得重写一遍界面代码量直接翻倍。后来我评估了一圈跨框架UI方案最后选定TMS FNC UI Pack v7.1.0.0才算是把这个问题彻底解决掉。TMS FNC UI Pack不是普通的功能控件集合它最核心的价值是FNC这套组件体系一套代码同时跑在VCL和FMX上。从Delphi XE7到Delphi 13 Florence以及对应时期的CBuilder版本全部都能编译安装。而且这个版本带Full Source完整源码调试组件内部逻辑、按自己的需求调整组件行为都非常方便这也是我坚持选源码版而不是纯二进制版的原因。这篇文章我会把这套组件从选型思路、安装部署、核心组件用法、实际项目中的组合方式到踩坑排查完整过一遍最后把发布部署的工程化细节也一并梳理。适合正在纠结VCL和FMX控件不通用、或者被第三方控件版本冲突折磨的Delphi/CBuilder开发者参考。1. 为什么是TMS FNC UI Pack跨VCL与FMX的统一方案1.1 项目背景与选型过程我这边的情况比较典型有一个仓库管理系统的项目原来用VCL写Windows端运行得挺好。后来客户提出要加一个PDA盘点功能硬件是安卓扫码手持机自然只有FMX才能跑安卓。问题来了VCL端已有的表格、树、工具栏这些界面元素FMX一个都用不上。同一个业务逻辑两套UI代码维护成本直线上升。调研阶段我列了三个方案第一Windows端继续用VCLPDA端用FMX单独开发。这个方案缺点很明显两套界面逻辑要分别维护后期加字段、改样式都得改两遍测试用例也得双倍。第二把Windows端整个迁移到FMX统一控件体系。老项目里还有几个第三方VCL控件迁移工作量非常大而且FMX在Windows上默认的控件编排方式和老用户习惯存在差异部分交互细节要额外适配。第三找一套能同时适配VCL和FMX的控件库。TMS FNC UI Pack就是在这个阶段进入视野的。最后选了第三个方案。不是因为TMS没有其他缺点而是从长期维护和跨平台需求来看一套代码覆盖两种框架的收益太大了。我算过一笔账如果选方案二光是迁移和回归测试大概要三到四周而用FNC重构界面层加上熟悉控件的时间也就一周多。后续每次功能变更还能省掉一次重复开发这笔账怎么算都划算。1.2 FNC体系的技术特点FNC的全称是Frame-Native-Component翻译过来就是“框架原生组件”。它和传统的VCL控件实现思路不太一样传统VCL控件直接继承自TControl等VCL基类FMX控件继承自TFMXObject等FMX基类两套体系完全平行。FNC则把组件本体建立在更底层的位置组件本身是一个TComponent运行时通过适配层对接VCL或FMX的窗口和绘制机制。这样做的好处有几个。第一视觉表现统一。同一套TMSFNCGrid在VCL下和FMX下渲染出来的风格基本一致不会有那种一个控件在VCL下是经典Windows风、在FMX下变成另一种风格的情况省去大量的界面样式对齐工作。第二事件模型统一。设计期拖上去的组件事件参数、方法调用都是一套后端代码完全不用关心当前是VCL还是FMX。这不只是省代码更重要的是团队协作时不用再区分谁是VCL熟手谁是FMX熟手。第三多平台支持。FNC组件在Windows、macOS、Linux、iOS、Android上用同一套API虽然不会把所有平台都优化到极致但对业务型应用来说足够用了。我对FNC的理解是TMS没有试图在系统层面去统一VCL和FMX而是做了一层业务组件抽象层。它把常见的UI元素——表格、树、工具栏、仪表盘、日历等封装成独立于框架的组件再用兼容层来绘制。这套思路虽然让组件内部复杂度变高了但它换来了开发者的代码统一性价比很高。1.3 与DevExpress、原生控件的对比说到Delphi生态里的UI控件很多人第一反应是DevExpress。我早期也用过DevExpress的VCL套件功能确实强表格的筛选、分组、统计基本是天花板级别的体验但它只支持VCL。后来DevExpress也推出了FMX套件不过那是另一套控件API、设计思路都不一样等于还是要维护两套代码。我把当时对比的几个方案整理成一张表方便大家直观判断对比项TMS FNC UI PackDevExpress原生控件自绘VCL支持支持仅VCLFMX版另算需分别开发FMX支持支持需专用FMX套件需分别开发代码复用度高一套代码跑两框架低两套组件API不同完全无复用界面风格统一自绘风格VCL风格细腻依赖系统部署复杂度低可静态链接较高依赖较多无额外依赖学习成本中中高高表格之外补一句并不是说DevExpress不好它的功能深度确实领先。如果你的项目铁定只用WindowsVCL追求极致的数据展示体验DevExpress依然是不错的选择。但如果你和我一样有跨平台需求FNC这条路能明显减少重复劳动。原生控件自绘我就不展开说了工程量摆在那里不是三五个控件的小工具很难靠自绘支撑一个完整项目。2. 安装部署全流程从XE7到13 Florence2.1 下载、解压与目录规划这套包的安装形式是一个RAR压缩包解压后里面是完整的源码和各个版本的包工程。我拿到手的第一步不是急着编译而是先规划目录。老Delphi开发者都懂第三方控件的目录规划决定了后面IDE库路径好不好管。我的习惯是在D盘建一个专门的Components目录比如D:\Components然后以控件名加版本号建子目录例如D:\Components\TMSFNC\v7.1.0.0。这样升级的时候不会覆盖旧版本万一新版本有问题还能快速切回去。压缩包内一般会带source、packages、docs这样的目录结构保留原始结构不要在里头乱改文件方便后面对照。这里有两个细节目录尽量不要带中文路径旧版IDE对中文路径的感知文件支持不稳定偶尔会出现找不到源文件的问题。解压时如果杀毒软件误删了包工程文件先加入白名单再重新解压。不是说不安全而是编译生成的可执行文件和BPL文件容易被实时防护误判。2.2 按IDE版本编译和安装包安装FNC UI Pack不能像普通安装程序那样双击Next完事因为它要针对你的IDE版本和Windows编译器平台Win32/Win64编译出匹配的DCP、BPL文件。步骤大致是这样打开packages目录找到对应IDE版本的包工程。命名规律一般会带上Delphi版本代号比如XE7、10_4、D12对应打开即可。用IDE打开主包工程。在项目管理器里对包含运行时包和设计时包的工程组依次执行编译和安装。如果是CBuilder环境打开对应的.cbproj工程文件先编译运行时包再安装设计时包。最重要的顺序是核心包、组件包、设计期包逐层往上编。设计期包依赖组件包组件包依赖核心包顺序错了会报找不到单元的错误。一般来说TMS提供的工程组文件里已经排好顺序直接Build整个Group就行。我在Delphi 10.4 Sydney里安装时实际步骤是打开工程组文件先批量编译所有运行时包然后再把设计期包通过“Component Install Packages”手动添加生成的BPL。这里有一个个人建议不一定要把全部功能包都安装用不到的组件包只编译不安装减少IDE加载的包数量IDE启动速度会明显变快。2.3 配置IDE搜索路径安装完BPL之后还有一步不能漏就是把FNC源码目录加进IDE的Library路径。不加的话打开已有项目就会出现找不到单元的报错。配置方法Tools Options Environment Options Delphi Options Library Library Path把D:\Components\TMSFNC\v7.1.0.0\source加进去。CBuilder的话还要在CPaths里添加Include路径。这里有一个小技巧Library Path里只加source目录别把各个版本的packages编译目录也加进去。因为编译时IDE会自己查找BPL和DCP源码路径只要一个就够了加多了反而容易出现不同版本DCP混用的问题。另外如果你同时装了多个IDE版本比如10.4和11每个IDE的Library Path都要单独配置。千万别想着一个IDE配好另一个版本直接拷贝配置路径里包含的版本信息对不上就会出一堆怪问题。2.4 Full Source有什么用什么时候需要标题里特别标了Full Source说明这个版本是带完整源代码的。源码这东西一开始你可能觉得没必要真遇到问题就知道值回票价了。对普通使用来说Full Source最直接的价值是调试。你可以在IDE里按F7跟进组件内部代码看它到底是怎样绘制单元格、怎样处理鼠标事件的。尤其当某个功能表现跟预期不符时不用靠猜直接看源码就能定位。对我自己来说还有几个额外场景用到了源码公司要求代码审计需要确认控件内部没有不安全的网络请求或者其他隐藏逻辑。有源码可以快速检索核查。在旧版本IDE上编译时偶尔遇到新版组件引用了新版本RTL函数导致编译失败有源码就能定位到具体函数做一个小兼容替换。曾经因为项目需要我给某个仪表盘组件加了一个自定义刻度算法改的是组件源码然后重新编译包这样全项目都能用不用在每个界面里单独处理。不过要提醒一句改动源码之前最好备份原始文件并且一定要用注释把改动点标记清楚否则将来升级组件版本时这些改动会变成非常大的负担。3. 核心组件拆解哪些组件最常用3.1 网格与树视图数据展示的王牌在实际业务项目里用得最多的肯定是数据展示类组件。TMSFNCGrid和TMSFNCTreeView是这套包里实用性极高的两个。TMSFNCGrid是一个功能很全的网格控件。它支持多列、排序、筛选、合并单元格、单元格内嵌进度条、树形分组展开等等。用法上很灵活给Cells[col,row]赋值就能显示数据也可以绑定TDataSource走传统数据库模式。它跟VCL里的TDBGrid和FMX里的TGrid用法都有差异但一旦上手会发现API设计得非常一致VCL和FMX之间切换完全无感。我印象很深的是它的列排序和过滤。业务人员经常要求双击列头排序、按关键字过滤原生TDBGrid是做不到的FNC Grid自带这个能力省去大量自研代码。而且它支持横向和纵向虚拟滚动加载几万行数据也不卡顿这在做库存台账、订单列表时非常有价值。TMSFNCTreeView则适合做组织结构、菜单树、目录树。它支持拖拽排序、复选框、图标自定义、节点懒加载。在PDA这种小屏幕上树形结构展开收起很丝滑触摸体验比VCL原生树好不少。3.2 工具栏、Ribbon与仪表盘界面快速搭建如果你要做专业感很强的桌面软件FNC里还有一批视觉组件可以看。TMSFNCRibbon是类似Office的Ribbon风格工具栏。项目里有一个配置管理工具以前用Panel加Button拼出来的顶栏又要自适应宽度又要分组样式简陋。换成TMSFNCRibbon之后把功能分类放到不同Tab用户一下子就能找到入口。唯一要注意的是Ribbon在FMX和VCL下占用的高度不太一样开发期要分别在两个框架下看一眼别在Windows上调好了、到PDA上被挤掉一行。TMSFNCGauge、TMSFNCDashboard这类仪表盘组件适合做实时监控看板。仓库管理系统里有一个大屏页面显示今日入库量、库存周转率、设备在线数量用几个仪表盘和面板组合视觉效果立刻就不一样。还有TMSFNCToolBar、TMSFNCColorPicker、TMSFNCObjectInspector这些也都是日常开发中很实用的小工具。ObjectInspector很有意思它可以直接列出一个对象的公开属性并在运行时修改做调试工具或者低代码配置界面都能派上用场。3.3 在FMX PDA扫码场景中的应用我团队在做PDA端时用的就是FMX加FNC这套组合效果很好。PDA硬件厂商比如Honeywell、Zebra通常会提供安卓SDK扫码枪按下后会回调扫描结果你只需要在FMX里接收这个回调然后把结果带给FNC组件刷新界面。具体流程大概是扫码得到条码字符串查数据库或调用后端接口把结果填到TMSFNCGrid的对应行同时用TMSFNCToDoList或者Panel高亮提示“盘点成功”。全程界面组件都来自FNCWindows端复用了大量样式和事件处理逻辑移动端只需要调整屏幕布局即可。在PDA上我最担心的其实是两个问题一是小屏幕显示密度二是触摸交互体验。FNC的Grid支持自定义行高和字号在4寸屏幕上也能看清楚。触摸滚动、行点击、长按这些手势在FMX下表现正常没有出现VCL控件移植到FMX后那种明显的触控延迟。说到Delphi FMX开发PDA扫码“delphi firemonkey pda 编程实现扫码结果接受”这类搜索向来很多。我想说的是扫码结果接收本身和FNC没有直接关系它只是FMX与安卓SDK之间的数据回调问题但接收之后的数据展示、交互反馈才是FNC真正发挥价值的地方。3.4 辅助组件二维码、PDF、颜色选择器除了常规UI组件FNC套件里还有一批平时不显眼、用起来却很顺手的辅助组件。TMSFNCQRCode能十分方便地生成二维码。仓库盘点时扫描枪扫的是条码但给客户展示设备信息时经常需要把设备编号生成二维码贴到资产标签上。本文还有配套的精品资源点击获取
返回列表