Sciter教程_03_分析ulayered例程

Sciter教程系列-03 分析sdk/demos/ulayered例程

本例程用分层窗口的方式渲染了一个挂钟，分层窗口（Layered Windows）简单说就是支持透明度的窗口。分层窗口可以实现任意形状的窗口，例程中将涉及BEGIN_FUNCTION_MAP/END_FUNCTION_MAP注册C++函数、元素行为、弹性布局、自定义UI等方面的内容。

编译demos/ulayered例程

将文件sdk/demos/ulayered/ulayered.cpp和sdk/include/sciter-win-main.cpp拷贝到解决方案下的src/文件夹，在VS中移除筛选器src下的所有文件，然后添加这两个文件。拷贝sdk/demos/ulayered/res/文件夹，覆盖解决方案下的res文件夹。

如下图所示，更改项目的部分配置。首先在属性页的"常规–输出目录/中键目录"将值分别改为$(SolutionDir)bin\和$(SolutionDir)obj\，前者将生成的执行文件输出到解决方案下的bin目录，后者将生成过程的中间文件输出到obj目录，方便管理生成的文件，当然，这里只是说明可以这么改。然后单击属性页的配置管理器，将活动解决方案中配置和平台的Debug/Win32删除，也就是只留下Release/x64这一组配置，同样，将项目中的其他配置/平台也删除，接着将sdk/bin.win/x64/sciter.dll拷贝到解决方案下的bin目录。注意：如果VS中解决方案平台的位数和sciter.dll的位数对不上，运行会报错返回0xFFFFFFFF。

运行打包脚本，在VS中编译C++代码并运行，结果如下图所示。

分析C++代码

在frame类的实现中，指定了窗口启用Alpha通道以及毛玻璃效果，同时将成员函数注册到脚本。

宏定义BEGIN/END_FUNCTION_MAP

这对宏定义标示需要注册到脚本的成员函数，宏定义FUNCTION_0的含义是将参数数量为0的成员函数architecture注册到脚本，在脚本中可以通过view.architecture();语句调用到C++中该成员函数。

frame() : window( SW_MAIN | SW_ENABLE_DEBUG | SW_ALPHA | SW_GLASSY, wrc) {
   
   }

BEGIN_FUNCTION_MAP
  FUNCTION_0("architecture", architecture);
END_FUNCTION_MAP

类frame间接继承于类event_handler_raw，此父类具有虚函数on_script_call，当TIScript脚本通过view.func()调用C++函数时，会调用函数on_script_call进行命令的分发。而上述将C++函数注册到脚本的宏展开之后其实就是在子类frame中重写了虚函数，函数体不同的分支构成注册函数查询表，脚本调用C++函数时on_script_call通过这个查询表就可以调用对应的注册函数。

分析HTML/CSS代码

关于html标签这里有几个要注意的写法。

• #name，相当于<tag id="name" />；
• .name，相当于<tag class="name" />；
• |name，相当于<tag type="name" />；
• (somename)，相当于<tag name="somename" />。

样式表中有两点需要关注。

• prototype: Clock url(analog-clock.tis);。表示body这个元素要继承自Clock类，该类定义在analog-clock.tis中。Clock类组件，也叫做行为，包含绘制挂钟的脚本代码，通过prototype的将行为绑定到元素上，这些元素将会按照行为的规则去显示；
• margin:*;。这为元素定义了可变的外边距，就像是在元素的四周放置了四个弹簧一样，弹簧的存在将元素固定在所在容器的中心。如下图所示。

分析TIS代码

sciter使用的脚本是TIScri