认识soui4js(第5篇)：使用扩展控件

无论内置控件多么丰富，也不可能满足用户所有需求。总有时候用户需要自己扩展控件。

soui4js推荐使用C++来扩展控件，然后通过实现一个js模块来提供js使用。

扩展控件通常涉及到图形上下文的频繁交互，如果使用js来实现，效率上会大打折扣。使用C++，没了C++和js的相互调用。使用起来就和C++版本没有区别了。

相对于浏览器中全部使用js来操作cavas, soui4js提供的这种方案即有C++的高效又有js的灵活。

如果用户了解soui中如何扩展控件，就会知道使用C++实现好一个控件后，需要将这个新控件注册到soui系统中。

如何开发js扩展模块参见：认识soui4js(第3篇）：使用C/C++开发扩展模块

同样的，由于js的扩展模块的init,uninit方法获取不到soui4的IApplication对象，我们需要给这个扩展模块导出两个方法到js，示例代码如下：

using namespace SOUI;
void RegisterCtrls(IApplication* pApp) {
    pApp->RegisterObjFactory(&TplSObjectFactory<SProgressRing>());
    pApp->RegisterObjFactory(&TplSObjectFactory<SRatingBar>());
    pApp->RegisterObjFactory(&TplSObjectFactory<SAniWindow>());
    pApp->RegisterObjFactory(&TplSObjectFactory<SChatEdit>());
    pApp->RegisterObjFactory(&TplSObjectFactory<SCheckBox2>());
    pApp->RegisterObjFactory(&TplSObjectFactory<SGroupList>());
    pApp->RegisterObjFactory(&TplSObjectFactory<SHexEdit>());
    pApp->RegisterObjFactory(&TplSObjectFactory<SRoundWnd>());
    pApp->RegisterObjFactory(&TplSObjectFactory<SScrollText>());
    pApp->RegisterObjFactory(&TplSObjectFactory<SPropertyGrid>());
    pApp->RegisterObjFactory(&TplSObjectFactory<SScrollSubtitles>());
    pApp->RegisterObjFactory(&TplSObjectFactory<SVText>());
    pApp->RegisterObjFactory(&TplSObjectFactory<SIECtrl>());
}

void UnregisterCtrls(IApplication* pApp) {
    pApp->UnregisterObjFactory(&TplSObjectFactory<SProgressRing>());
    pApp->UnregisterObjFactory(&TplSObjectFactory<SRatingBar>());
    pApp->UnregisterObjFactory(&TplSObjectFactory<SAniWindow>());
    pApp->UnregisterObjFactory(&TplSObjectFactory<SChatEdit>());
    pApp->UnregisterObjFactory(&TplSObjectFactory<SCheckBox2>());
    pApp->UnregisterObjFactory(&TplSObjectFactory<SGroupList>());
    pApp->UnregisterObjFactory(&TplSObjectFactory<SHexEdit>());
    pApp->UnregisterObjFactory(&TplSObjectFactory<SRoundWnd>());
    pApp->UnregisterObjFactory(&TplSObjectFactory<SScrollText>());
    pApp->UnregisterObjFactory(&TplSObjectFactory<SPropertyGrid>());
    pApp->UnregisterObjFactory(&TplSObjectFactory<SScrollSubtitles>());
    pApp->UnregisterObjFactory(&TplSObjectFactory<SVText>());
    pApp->UnregisterObjFactory(&TplSObjectFactory<SIECtrl>());
}

extern "C"
__declspec(dllexport) JSModuleDef* js_init_module(JSContext* ctx, const char* module_name)
{
    qjsbind::Context* context = qjsbind::Context::get(ctx);
    qjsbind::Module *module = context->NewModule(module_name);
    module->ExportFunc("RegisterCtrls", RegisterCtrls);
    module->ExportFunc("UnregisterCtrls", UnregisterCtrls);
    Exp_Ctrls(module);
    return module->module();
}

上述代码来自xliveplayer的扩展控件模块。

该模块导出了两个方法：

RegisterCtrls，UnregisterCtrls

这样，在导入该模块后，在main函数中调用这两个方法。就可以在xml中使用这些扩展控件了。

import * as extctrl from "extctrl.dll";

//...

var g_WordDir;
function main(inst,workDir,args)
{
    soui4.log(workDir);
    g_WordDir = workDir;
    let theApp = soui4.GetApp();
    let souiFac = soui4.CreateSouiFactory();
    let trMgr = soui4.CreateTranslatorMgr();
    if(trMgr!=0){
        theApp.SetTranslator(trMgr);
        trMgr.Release();
    }
    let logMgr = soui4.CreateLogMgr();
    if(logMgr != 0){
        theApp.SetLogManager(logMgr);
        logMgr.setLoggerName("xliveplayer");
        logMgr.start();
    }
    let resProvider = souiFac.CreateResProvider(1);
    soui4.InitFileResProvider(resProvider,workDir + "\\uires");
    extctrl.RegisterCtrls(theApp);
    let resMgr = theApp.GetResProviderMgr();
    resMgr.AddResProvider(resProvider,"uidef:xml_init");
    resProvider.Release();
    let hwnd = soui4.GetActiveWindow();
    let hostWnd = new CMainDlg("xml\\dlg_main.xml");
    hostWnd.Create(hwnd,0,0,0,0);
    hostWnd.SendMessage(0x110,0,0);//send init dialog message.
    hostWnd.ShowWindow(1); //1==SW_SHOWNORMAL
    souiFac.Release();
    let ret= theApp.Run(hostWnd.GetHwnd());
    extctrl.UnregisterCtrls(theApp);
    soui4.log("js quit");
    if(logMgr!=0){
        logMgr.stop();
        logMgr.Release();
    }
    return ret;
}

完整代码参见 soui4js-app/xliveplayer: 基于soui4js实现的在线直播视频播放器 (github.com)。