认识soui4js(第2篇）:代码编辑及调试
开始
假定您使用向导在d:\jsdemo目录创建一个工程，您也已经安装好了vscode, 那么您应该可以看到下面的界面效果：
工程生成后，主要包含一个soui资源包及一个main.js
要运行这个程序，您需要给vscode安装一个插件：quickjs-debug
由于向导已经自动配置了一个launch.json,
这里，你可在选择vscode菜单中的Run/Start Debugging或者Run/Run Without Debugging来启动soui4js-host.exe来加载这个测试工程。
然后你可以看到下面的效果：
在这个demo中只有一个test按钮，点击该按钮，会弹出一个msgbox。
如果您已经看到上面界面，恭喜，您已经可以开始soui4js的开发了。
切换到main.js的代码，展开OutLine, 我们可以看到整个main.js的代码结构：
主要有3个对象：
g_workDir，这是一个全局变量，标识当前程序的运行路径。
MainDialog， 这是一个继承自soui4.JsHostWnd主界面窗口。
main, 这是main.js的入口函数。
main函数功能：
1 function main(inst,workDir,args) 2 { 3 soui4.log(workDir); 4 g_workDir = workDir; 5 let theApp = soui4.GetApp(); 6 let souiFac = soui4.CreateSouiFactory(); 7 //* 8 let resProvider = souiFac.CreateResProvider(1); 9 soui4.InitFileResProvider(resProvider,workDir + "\\uires"); 10 //*/ 11 /* 12 // show how to load resource from a zip file 13 let resProvider = soui4.CreateZipResProvider(theApp,workDir +"\\uires.zip","souizip"); 14 if(resProvider === 0){ 15 soui4.log("load res from uires.zip failed"); 16 return -1; 17 } 18 //*/ 19 let resMgr = theApp.GetResProviderMgr(); 20 resMgr.AddResProvider(resProvider,"uidef:xml_init"); 21 resProvider.Release(); 22 let hwnd = soui4.GetActiveWindow(); 23 let hostWnd = new MainDialog(); 24 hostWnd.Create(hwnd,0,0,0,0); 25 hostWnd.SendMessage(0x110,0,0);//send init dialog message. 26 hostWnd.ShowWindow(soui4.SW_SHOWNORMAL); 27 souiFac.Release(); 28 let ret= theApp.Run(hostWnd.GetHwnd()); 29 hostWnd=null; 30 soui4.log("js quit"); 31 return ret; 32 } 33 34 globalThis.main=main;
main函数代码基本上是固定的，没有特殊要求的情况下，可以不需要修改。
它的功能就是从资源包路径（或者zip包，见注释部分代码）创建一个soui资源包，然后交给theApp管理。
再从MainDialog创建一个窗口对象并显示。
再调用theApp.Run来运行程序的消息循环。
最后退出程序。
main函数后面需要有一行globalThis.main = main， 这样soui4js-host.exe才能通过全局对象找到这个函数并执行。
MainDialog方法介绍：
constructor(){ super("layout:dlg_main"); this.onEvt = this.onEvent; }
MainDialog的基类soui4.JsHostWnd的构造函数需要一个参数：布局文件的资源ID，因此在MainDialog的构造里需要把这个数据传递给基类。
此外，还在构造函数中指定了使用MainDialog的onEvent方法来处理窗口的事件。
1 onEvent(e){ 2 if(e.GetID()==soui4.EVT_INIT){//event_init 3 this.init(); 4 }else if(e.GetID()==soui4.EVT_EXIT){ 5 this.uninit(); 6 } 7 return false; 8 }
onEvent方法有一个参数e, 这个参数是soui的事件对象。通过e.GetID来识别是哪一种事件。
这里处理了两个事件：soui4.EVT_INIT, soui4.EVT_EXIT
这两个事件分别在界面元素创建完成及窗口退出前触发。
1 init(){ 2 console.log("init"); 3 soui4.SConnect(this.FindIChildByName("btn_test"),soui4.EVT_CMD,this,this.onBtnTest); 4 }
init方法只干了一件事：使用soui4.FindIChildByName("btn_test")， 找到布局文件里配置的name为btn_test的按钮，并且将它产生的soui4.EVT_CMD事件（点击事件）和this.onBtnTest方法相关联。
也就是说这个按钮按下后，执行this.onBtnTest。
1 uninit(){ 2 //do uninit. 3 console.log("uninit"); 4 }
uninit目前只打印了一行日志。
1 onBtnTest(e){ 2 console.log("you click test button"); 3 soui4.SMessageBox(this.GetHwnd(),"you click test button","test",soui4.MB_OK); 4 }
onBtnTest中，调用soui4.SMessageBox来显示一个msgbox。
代码调试：
写代码离不开调试，好在quickjs已经提供了调试支持，配合vscode的quickjs debugger插件就可以断点，调试。
我们可以在调试运行前或者运行过程中在代码行设置断点。
假定我们在onBtnTest里断点，点击test按钮，程序在断点中断。
从界面上可以看到程序的调用栈及当前的局部及全局变量的值。
需要注意的下，目前这个调试功能还不完美，仅仅是能用，部分操作可能会导致host崩溃。不过问题不大，已经足可能应对我们一般的代码调试需求。
到这里你应该已经基本了解了soui4js的开发流程了。
