认识soui4js(第4篇)：定义一个窗口类并显示

soui4js基于soui4设计实现。

首先我们看一下soui4中如何定义一个窗口类。

soui4最基本的窗口类是SHostWnd和SHostDialog，它需要一个布局xml。

假定布局xml在资源包中的位置为：layout:maindlg。

那么soui4中定义一个窗口可以是下面的代码(为了演示方便，这里使用SHostDialog)：

SHostDialog dlg("layout:maindlg");
dlg.DoModal(NULL);

在soui4js中，这两个对象被导出为soui4.JsHostWnd, soui4.JsHostDialog。

如果不需要处理窗口消息或者事件，可以使用下面的方法来直接创建窗口：

let dlg = new soui4.JsHostDialog("layout:maindlg");
dlg.DoModal(0);

可以看出来，js的代码和C++代码基本上是一样的。

如果需要处理UI中的事件要如何处理呢？

在C++中，最简单的方法是从SHostDialog继承一个新的对象，然后使用消息或者事件映射表来响应窗口消息及控件的事件。

伪代码如下：

class CDemoDialog : public SHostDialog{
public:
CDemoDialog():SHostDialog("layout:maindlg"){}
//....
protected:
      void OnBtnTest(){
          SSLOGI()<<"test button click";
      }
       EVENT_MAP_BEGIN()
              EVENT_NAME_COMMAND(L"btn_test", OnBtnTest)
        EVENT_MAP_END()
};

EVENT_MAP_BEGIN, EVENT_MAP_END一起构成SHostDialog的事件响应虚函数，从而实现接管事件处理流程。

在js中，用法基本类似：

class OptionDlg extends soui4.JsHostDialog{
    constructor(settings){
        super("layout:maindlg");        
        this.onEvt = this.onEvent;//这一行实现事件处理的接管
    }

        onBtnTest(){
            console.log("test button click");
        }
    onEvent(e){
             //事件处理函数，e是事件对象，可以使用GetID(),Sender()等来获取id及发送者
        let evt_id = e.GetID();
        switch(evt_id){
            case soui4.EVT_CMD:
                if(e.NameFrom()=="btn_test")
                    this.onBtnTest();
                break;
        }
    }
}

这样就完成了窗口中事件的处理。

窗口消息处理也类似，只需要设定JsHostDialog.onMsg就可以接管消息处理。

具体代码，参考 https://github.com/soui4js-app/somine