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

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等实现，以丰富界面效果。
其次，为这些控件提供更多可以控制的属性，以便进行资源配置时使用。
再其次，将这些控件改造成脚本方式，后续可以支持主题应用。
这些够得做一段时间了。