BS版图形系统 - 界面控件配置

界面控件考虑资源配置化XML资源配置加载 下一步任务

QQ: 282397369

界面控件考虑

有了属性浏览器，下来就该处理工具栏了。 一个直观感觉，网页留给程序的空间，要比应用程序少。网页在浏览器这个程序中运行，不同的浏览器，提供相应的界面，占据标题、工具栏位置，甚至书签与侧栏。所以做网页程序的时候，尽量能将工作区整大一些。 当然，如何整应该是UI设计的事，技术层面还是关心如何实现的问题。 在属性浏览器的基础上，初步实现了一个VCL的JS框架。但新建控件，还是要写一堆代码来控制新控件的各个属性，比如创建一个ScrollBox

this.choosePanel = new TScrollBox(this); this.choosePanel.Name = "choosePanel"; this.choosePanel.horzScrollBar.Visible = false; // 水平滚动条不可见 this.choosePanel.AddEvent(NControlEvent.OnKillFocus, this.closeChoosePanel, this); // 失去焦点即消失 this.choosePanel.AddEvent(NControlEvent.OnChange, this.onListPanelChange, this); // 选择新的目标项 this.choosePanel.Visible = false; // 先不显示，需要时再弹出显示，并确定其显示区域

觉得在点烦。

资源配置化

那就通过资源来配置界面，感觉应该可以。用XML习惯了，那就用XML来实现。 从使用倒推，应该先写XML配置

XML资源配置

<?xml version='1.0' encoding='gb2312' ?> <xml desc="UI Control Config by DrGraph"> <TPanel name="ToolPanel" autoArrange="true" > <TButton name="btnOpen" Width="40" Height="40" Transparent="true" onClick="true" icon="icon/close.png" Tag="1" Hint="测试按钮" /> <TButton name="btnOpen1" Width="40" Height="40" Transparent="true" onClick="true" icon="icon/close.png" Tag="1" Hint="测试按钮1" /> <TButton name="btnOpen2" Width="40" Height="40" Transparent="true" onClick="true" icon="icon/close.png" Tag="1" Hint="测试按钮2" /> <TButton name="btnOpen3" Width="40" Height="40" Transparent="true" onClick="true" icon="icon/close.png" Tag="1" Hint="测试按钮3" /> <TButton name="btnOpen4" Width="40" Height="40" Transparent="true" onClick="true" icon="icon/close.png" Tag="1" Hint="测试按钮4" /> <TButton name="btnOpen5" Width="40" Height="40" Transparent="true" onClick="true" icon="icon/close.png" Tag="1" Hint="测试按钮5" /> <TButton name="btnOpen6" Width="40" Height="40" Transparent="true" onClick="true" icon="icon/close.png" Tag="1" Hint="测试按钮6" /> <TButton name="btnOpen7" Width="40" Height="40" Transparent="true" onClick="true" icon="icon/close.png" Tag="1" Hint="测试按钮" /> <TButton name="btnOpen8" Width="40" Height="40" Transparent="true" onClick="true" icon="icon/close.png" Tag="1" Hint="测试按钮1" /> <TButton name="btnOpen9" Width="40" Height="40" Transparent="true" onClick="true" icon="icon/close.png" Tag="1" Hint="测试按钮2" /> <TButton name="btnOpen10" Width="40" Height="40" Transparent="true" onClick="true" icon="icon/close.png" Tag="1" Hint="测试按钮3" /> <TButton name="btnOpen11" Width="40" Height="40" Transparent="true" onClick="true" icon="icon/close.png" Tag="1" Hint="测试按钮4" /> <TButton name="btnOpen12" Width="40" Height="40" Transparent="true" onClick="true" icon="icon/close.png" Tag="1" Hint="测试按钮5" /> <TButton name="btnOpen13" Width="40" Height="40" Transparent="true" onClick="true" icon="icon/close.png" Tag="1" Hint="测试按钮6" /> </item> </xml>

将该文件保存为服务端的Res目录下的MainTool.xml，希望直接在界面上目标父窗口对象中直接创建这些控件

加载

那得实现相应的解析逻辑。继续倒推，则应该由目标控件载入这个资源：

this.ToolPanel.loadFromRes(this, DrGraph.PATH_RES + "MainTool.xml", "ToolPanel");

也就是想将以上按钮直接加载到ToolPanel中，需要考虑到从服务端读取文件为异步的，所以调用一个回调函数，以期在载入资源后进行动态解析生成。

loadFromRes(caller: any, xmlUrl: string, nodeName: string = "") { this.FSubControls = []; this.FAlignControls = []; let xml: CbwXML = new CbwXML(xmlUrl, "DrGraphRes"); xml.read(function () { let destNode: CbwXmlNode | null = xml.RootNode; if (nodeName.length > 0) destNode = destNode.NodeByAttribute("name", nodeName); if (destNode) this.from(caller, destNode); else console.log(`未发现目标配置节点 ${nodeName}！！！`) }.bind(this)); }

当然。动态生成就再实现一个from函数，基于VCL类库实现，也算是比较轻松。 基本类：

from(caller: any, node: CbwXmlNode) { this.Anchors.Clear(); node.FAttributes.forEach((value, name) => { DrGraph.TRtti.SetPropertyValue(caller, name, value); }) }

窗口类：

from(caller: any, destNode: CbwXmlNode) { super.from(caller, destNode); destNode.FElements.forEach((node) => { let nodeType: string = node.Name; let control = DrGraph.BuildControl(nodeType, this); if (control != null) control.from(caller, node); else console.log(`${nodeType} 类型未实现自动化`); }) this.ReAlign(); }

正如所想，那些配置的按钮，安静地在那里思考人生。

下一步任务

目前已支持TEdit、TPanel、TScrollBar、TComboBox、TLabel、TScrollBar、TButton、TPropertyGrid等常用控件，下一步可将其它一些如TCheckBox、TRadioButton、TForm、TMenu等实现，以丰富界面效果。 其次，为这些控件提供更多可以控制的属性，以便进行资源配置时使用。 再其次，将这些控件改造成脚本方式，后续可以支持主题应用。 这些够得做一段时间了。