Components and Aspects

CSS可分配的脚本行为- DOM元素控制器。

Sciter允许使用prototype CSS属性定义自定义元素。

prototype属性需要从内置的Element派生的自定义类。

class MyComponent extends Element {
 constructor() {}
 componentDidMount() {}
 componentWillUnmount() {}
}

自定义类组件

信息

该协议有意与Reactor组件共享功能。这允许设计可以作为DOM组件的类作为反应器组件。

 方法

这些方法具有特殊的意义

constructor()

在DOM组件的情况下，不带参数调用构造函数。

在调用时，这只是一个对象，并没有连接到真实的DOM元素。

componentDidMount()

在此连接到真实的DOM元素后立即调用，不带参数。

此时，Element类的所有方法都可用并可操作。

组件可能希望通过使用显式DOM创建方法或使用JSX来填充/更新内部DOM结构：

class Hello extends Element {
 componentDidMount() {
 this.content(<>
 Hello <b>World</b>
 </> );
 }
}

componentWillUnmount()

在与DOM元素断开连接之前立即调用，不带参数。

此时Element类的所有方法仍然可用且可操作。

引擎将在两种情况下调用componentWillUnmount（）：

• 当元素从DOM中删除时，或者

• 当元素上的CSS prototype属性更改为不同的类时。

 事件处理程序

要在组件中处理事件，只需将它们定义为具有特殊“事件”表示法的方法：

["on eventname [at selector]"] (event [,target]) {
}

 其中：

• eventname -一个事件名称，如：click，mousedown等。

• selector -可选，CSS选择器，用于从与选择器匹配的特定子对象中过滤事件;

• event -将接收事件的Event实例的参数的名称;

• target -可选，如果使用选择器，将接收与选择器匹配的元素;

 示例：

lass Hello extends Element {
 componentDidMount() {
 this.content(<>
 <label>Name</label><input|text.name/>
 <button.update>Update</button>
 </> );
 }
 ["on click at button.update"] () {
 ... 
 }
 ["on change at input.name"] (evt, input) {
 let name = input.value; 
 ... 
 }
}

尖端

selector支持指定组件DOM元素本身的 :root selector。因此，要选择直接子元素，请使用选择器： :root > button 。

自定义特征函数

Aspects是普通的JS函数，通过CSS及其aspect CSS属性的请求在选定的DOM元素上调用。

aspect函数没有什么特别的，除了：

• this -aspect函数被调用，并将this设置为DOM元素;

• 该函数在元素被挂载时调用，因此这是Element类的操作实例;

• 函数在元素的生命周期中被调用一次;

• 该函数可以从CSS接收参数;

• 该函数可以通过使用Element类的显式DOM操作函数来修改元素的内容，如JSX;

• 该函数可以在元素本身及其子元素上设置事件处理程序;

 例如：

micro-charts.css

chart {
 display:block;
 size:64px;
}
chart.donut { 
 aspect: Donut(fill: #f00 #0f0 #00f, thickness:0.2 ) url(micro-charts.js); 
}

这样的paramateres将作为一个带键的对象传递：

micro-charts.js

function Donut({fill,thickness}) {
 // fill will be [ Color.RGB(255,0,0), Color.RGB(0,255,0), Color.RGB(0,0,255) ]
 // thickness will be 0.2
 this.paintContent = function(gfx) {
 ... code to draw donut chart here ...
 }
}