已经为Sciter添加了基本的<video>支持。
15 |<video>元素(实际上是behavior:video)作为一个无窗口的普通DOM元素，可以在它上做动画、变换，已经将其他DOM元素在它之上渲染。
16 |下面是Sciter中播放视频(标准的30 fps)的一个截图，并且这个视频在semi-transparent背景上做了动画和变换。
17 |
13 | 在脚本中，有一个otherwise关键字，它用在循环语句中，比如:
var emptyArr = [];
10 | for(var el in emptyArr)
11 | stdout.println(el);
12 | otherwise
13 | stdout.println("nothing seen, array is empty!");
14 | 上面的代码执行后将输出：nothing seen, array is empty!。
当循环体未执行时，循环语句(块)之后的otherwise语句将被执行。
我为Sciter添加支持了<html window-frame=”extended”>特性，用于想在窗口标题区域添加工具条:
11 |
12 |
13 |
15 | 
16 |
错误对象, 当脚本运行时检测到错误抛出的对象。
8 |N/A
11 |{ status: ..., response: ... }对象。N/A
已经为Sciter添加了基本的<video>支持。
15 |<video>元素(实际上是behavior:video)作为一个无窗口的普通DOM元素，可以在它上做动画、变换，已经将其他DOM元素在它之上渲染。
16 |下面是Sciter中播放视频(标准的30 fps)的一个截图，并且这个视频在semi-transparent背景上做了动画和变换。
17 |
我正在添加支持CSS变量。对于Sciter,这是一个非常不错的功能，它与CSS Variables Working Draft中的变量定义相似但语法有点不同:
10 |变量的声明:
11 |body {
12 | var(foo): #f00; /* 声明一个名为"foo"的变量，并定义了它的默认值 */
13 | color: var(foo,#000); /* 使用这个变量var(变量名, 变量不存在时的默认值) */
14 | }
15 | 变量是可以继承的，所以<body>中的所有子元素都可以使用这个变量:
16 |div {
17 | background-color: var(foo,#00f);
18 | size:200dip;
19 | }
20 | 注意，变量包含两部分内容: 变量的名称，已经等变量未定义时的默认值。
21 |在运行期，脚本也可可以调用DOM API来获取/设置这些CSS变量:
22 |$(body).style.setVariable("foo", color(0,255,0));
23 | 在脚本中设置后，所有在样式中使用这个变量的元素都会采用新的颜色。
24 | 25 | 26 | -------------------------------------------------------------------------------- /content/behaviors/label.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |该行为将绑定了该行为的元素上的鼠标事件重定向到它标签指定的元素。因此，当鼠标在标签上点击时，会导致标签指定的元素获取焦点或生成点击事件。
8 |默认情况下，应用了该行为的元素有:
10 |<label><label for=...>该行为需要知道的属性:
15 |for="id" - label标签指定的输入元素的ID。N/A - 该行为没有引入任何特有的事件。
19 |N/A - 该行为没有引入任何特有的方法。
21 |N/A
23 |下面的标记:
25 |<label>点我<input|text></label> 26 | <label for="buddy">也点我</label> <input|text id="buddy"> 27 |28 |
将会生成两个绑定了标签的input元素。
29 | 30 | -------------------------------------------------------------------------------- /styles/autozoom.tis: -------------------------------------------------------------------------------- 1 | function AutoScrollX() { 2 | 3 | function showOver() { 4 | var (left,top,right,bottom) = this.scroll(#rect); 5 | this.attributes.toggleClass("over-left", left > 0); 6 | this.attributes.toggleClass("over-right", right > 0); 7 | } 8 | 9 | this.on("mousemove", function(evt) { 10 | var (left,top,right,bottom) = this.scroll(#rect); 11 | var width = this.scroll(#width); 12 | var over = left + right; 13 | if(over > 0 ) { // overflows 14 | var w3 = width / 3; 15 | var scrollx; 16 | if( evt.x < w3 ) scrollx = 0; 17 | else if( evt.x > 2* w3 ) scrollx = over; 18 | else scrollx = (evt.x - w3).toFloat() / width * over * 3; 19 | this.scrollTo(scrollx.toInteger(),0,true); 20 | } 21 | showOver.call(this); 22 | }); 23 | 24 | this.on("mouseleave", :: this.scrollTo(0,0,true) ); 25 | 26 | this.on("animationend", showOver); 27 | this.onSize = showOver; 28 | 29 | } 30 | -------------------------------------------------------------------------------- /flex-flow/flex-layout.css: -------------------------------------------------------------------------------- 1 | html 2 | { 3 | font: 10pt verdana, arial, sans-serif; 4 | background: gray; 5 | } 6 | 7 | body 8 | { 9 | width:700px; 10 | margin:10px auto; 11 | background: white; 12 | padding:1em; 13 | } 14 | 15 | td 16 | { 17 | font: 10pt verdana, arial, sans-serif; 18 | } 19 | 20 | tt, code, samp, kbd 21 | { 22 | font-family: monospace; 23 | } 24 | 25 | pre 26 | { 27 | font-family : monospace; 28 | display : block; 29 | display : table-cell; 30 | margin : 10px 0; 31 | padding : 4px; 32 | background-color: ghostwhite; 33 | border : 1px dotted #ccc; 34 | } 35 | 36 | pre code { color:blue; } 37 | 38 | p 39 | { 40 | margin : 10px 0; 41 | } 42 | 43 | blockquote 44 | { 45 | margin : 10px 0 10px 10px; 46 | border-left : 2px solid #ccc; 47 | padding-left : 8px; 48 | } 49 | -------------------------------------------------------------------------------- /core/event_handler_assignment.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |Sciter支持jQuery风格的事件处理器赋值方式:
14 |element.on("event", "selector", function(evt) {...});
15 | 这种方式大部分情况下已经足够了，不过因为某些元素，我觉得它“不够美观” 所以我正在想它的替代方法。
16 |目前，有一个比较灵活的选项/主意，类似下面这样:
17 |// subscribe function for "click" event on element
18 | element << event click (evt) {...};
19 | 上面的语句等同于
20 |element.on("click", function (evt) {...});
21 | 以及它的完整格式(带选择器)：
22 |// subscribe function for "click" event on <button id=first> element
23 | self << event click $(button#first) (evt) {...};
24 | 目前主要的挑战是JS syntax/grammar…
25 |进度条行为。
9 |默认情况下，应用了该行为的元素有:
11 |<progress>;<meter>.该行为需要知道的属性:
22 |max=float - 最大值, 默认为1.0;value=float - 进度值, 该值在0.0 ... max范围间。name="name" - 标准的name属性 - 该元素的名称。N/A - 没有特有方法.
28 |float, 进度值，该值在0.0 ... max范围间。
N/A - 没引入特有方法。
32 | 33 | -------------------------------------------------------------------------------- /content/behaviors/scrollbar.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |我正在为Sciter的CSS添加@mixin功能。
mixin是一个命名的CSS属性定义集合，这个集合可以被直接应用到CSS规则中。这个特性类似于SASS’s mixins。
15 |参考下面的声明:
16 | @mixin LIKE-BUTTON
17 | {
18 | behavior:button;
19 | background: linear-gradient(top, #3498db, #2980b9);
20 | border-radius: 28dip;
21 | color: #ffffff;
22 | font-size: 20dip;
23 | padding: 10dip 20dip 10dip 20dip;
24 | text-decoration: none;
25 | }
26 | 它声明了一个LIKE-BUTTON属性块，这个属性块可以使用LIKE-BUTTON名称(以@为前缀)被应用到样式中：
27 | div {
28 | @LIKE-BUTTON;
29 | margin:1em;
30 | }
31 |
32 | a {
33 | @LIKE-BUTTON;
34 | display:inline-block;
35 | }
36 | 代表当前Sciter应用程序的实例。
8 |返回字符串 - 这个运行的Sciter实例的操作系统登录用户名。
返回这个运行的Sciter实例的机器名。如果提供了full参数且为true，则这个函数返回这个机器的完全限定的网络域名。
启动这个机器上另一个应用程序。Filename是应用程序的文件名，或要打开的文档。
下面是和behavior:pager相关的所有元素列表:
9 |<pageframe> - 被打印文档的容器。<pageframe>的内容盒用于呈现文档的被打印部分。id="document-url"的元素 - 可选, 将会包含被打印文档的URL;id="document-title"的元素- 可选, 将会包含被打印文档的<title>元素中的文本;id="page-no"的元素 - 可选, 将会包含当前页号;id="total-pages"的元素- 可选, 将会包含文档的总页数。模板文档中<html>元素的属性:
16 |page-no=N - 在pageframe中渲染的页面的页号;page-parity="odd" | "even" - 页面的奇偶标志.上面的这些属性可以应用在模板文档中设置CSS样式，如下面的CSS规则:
20 |html[page-parity=odd] footer { text-align:left; }
21 | html[page-parity=even] footer { text-align:right; }
22 |
23 | 将会使模板中<footer>元素在奇偶页面有不同的对齐方式。
在Sciter中，你可以使用@const来定义CSS常量，比如:
12 |13 | <style> 14 | @const TEST_STR:"test"; 15 | @const TEST_COLOR: rgb(128,0,0); 16 | @const TEST_NUMBER: 128; 17 | </style> 18 |19 |
这些常量不仅可以在CSS中使用(比如@TEST_COLOR)，也可以在脚本中使用:
20 |
21 | var test_str = self.style.constant("TEST_STR");
22 |
23 | 如果你觉得self.style.constant太繁琐，你可以为它定义一个"字符串器"函数:
25 | function $const( name ) { return self.style.constant(name) || ""; }
26 |
27 | 这样你就可以这样使用了:
28 |29 | var t1 = $const(TEST_STR); // 字符串, "test" 30 | var t2 = $const(TEST_COLOR); // 颜色类型, color(128,0,0) 31 | var t3 = $const(TEST_NUMBER); // 整数, 128 32 |33 |
虚拟机(VM)相关方法和属性。
12 |这个名称空间中的方法在脚本中不总是有效的 - 它们依赖于VM创建时的特征参数。
13 |根据name获取obj的属性。
20 |等同于const name = ... var val = obj.(name);
根据name设置obj的属性。
24 |等同于const name = ... obj.(name) = val;
function(err) : true | false的函数，该函数将会接收到错误(error)对象。 如果该函数返回true，则异常被认为已经处理了，并且将不会再向stderr输出错误信息。
在Sciter中，任何函数体内包含yield关键字的函数都可以认为是一个生成器(generator)函数。
生成器的主要目标是产生一系列的值 – 每次调用生成器返回它的下一个值。
11 | 每当生成器执行到yield <表达式>时，生成器就返回下一个值。
考虑下面这个生成器函数:
13 |function ordinals() {
14 | yield "first";
15 | yield "second";
16 | yield "third";
17 | }
18 | 使用下面的代码来执行这个函数:
19 |for(var ordinal in ordinals()) 20 | stdout.println(ordinal); 21 |22 |
这个循环体将会被执行三次，并且在生成器的每次调用中，yield将依次返回它的值。
23 | 这时，你会看到下面的输出内容:
> first 25 | > second 26 | > third 27 |28 |
(生成器中的)yield和(异步任务中的)await同一种机制(协同式多线程)的不同体现。
8 | popup-position属性接受以下值:
9 |popup-position: default; - 默认位置(行为指定)。popup-position: inherit; - 从它的父元素继承。popup-position: <popup-reference-point> <anchor-reference-point>; - 明确指定弹出位置。其中:
14 |<popup-reference-point>和<anchor-reference-point>可以使用以下枚举值:
top-lefttop-centertop-rightmiddle-leftmiddle-centermiddle-rightbottom-leftbottom-centerbottom-right示例，下面的声明:
26 |select > popup {
popup-position: top-right bottom-right;
27 | }
28 |
29 | 将弹出元素的右上角放置在锚点元素(这是是select元素本身)的右下角。
30 | 31 | -------------------------------------------------------------------------------- /core/standalone_Sciter_executable.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |SDK中添加了一个scapp.exe。
15 |这个ScApp是一个静态链接了Sciter，不依赖额外模块的可执行程序。
16 |scapp.exe可以不指定参数运行，也可以指定一个扩展名为.htm、.tis、.scapp的文件名参数:
> scapp.exe18 |
或
19 |> scapp.exe tetris.scapp20 |
如果启动时未指定参数，则它会尝试在当前目录下寻找main.htm、main.tis或main.scapp文件。
如果指定了.htm[l]文件，则将创建Sciter窗口，并加载这个htm[l]文件。
22 |.scapp文件是一个在根目录下包含/main.tis的zip文件。这个main.tis文件中需要有创建窗口和调用Sciter.run();的代码 – GUI消息泵循环:
// create first window, it may call Sciter.requestQuit(0) to exit from the loop below
24 | var window = View.window { ... };
25 | // run message pump loop of the application
26 | return Sciter.run();
27 |
28 | 本质上，它和tiscript.exe使用同样的方式运行脚本。
29 |Sciter v.3中的HTML解析器支持属性短格式写法，比较下面两种等同的声明格式:
15 |紧凑型:
16 |17 | <input|currency(itemPrice) value=1000> 18 |19 |
标准型:
20 |21 | <input type="currency" name="itemPrice" value=1000> 22 |23 |
正如你所看到的，第一种格式更简短，且可读性更好(当然是主观上啦)。
24 |这里是所有支持的属性短格式写法列表:
25 |#name – id, 属性名称以‘#’字符开始，将解析为 id=”name”.name – class, 等同于class="name"。元素可以有多个“点属性”，它们组合成一个class属性。所以，<div.container.collapsed>等同于: <div class=”container collapsed”>。|name – type, 属性名称以‘|’字符开始，将解析为 type="name"(someName) – name, 属性名称以‘(‘和‘)’字符闭合，将解析为 name="someName"calendar是一个日期输入元素，它允许用户选择一个特定的日期。
9 |默认情况下，应用了该行为的元素有:
11 |<input type="calendar" /> - 行内日期输入元素calendar有以下4种不同的视图模式:
19 |每种模式使用一个<table>来渲染视图的内容。如果使用DOM捡拾器(inspector)就会发现每个视图的DOM结构。如果你需要重定义calandar的内容样式时，可以在CSS中直接使用这些DOM元素。
25 |该行为需要知道的属性:
27 |value="YYYY-MM-DD" - 初始化日期, ISO 8601格式的字符串。除了标准事件集(鼠标、按键、聚焦)外，该行为还生成:
31 |Date值 或 undefined, 反应当前的选择内容。
36 |N/A - 该行为没有引入任何特有的方法。
38 | 39 | -------------------------------------------------------------------------------- /core/new-TIScript-features.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |2.0.2.0添加的特性之一是支持在类中声明成员变量。
19 | 20 |通过使用this var name = value构造器，你可以定义成员(实例)变量:
这段代码:
23 | 24 |class Foo {
25 | this var one = 1, // 成员变量
26 | two = 2; // 成员变量
27 |
28 | function sum() { return this.one + this.two; }
29 | }
30 |
31 | var foo = new Foo();
32 | stdout << foo.sum() << "\n";
33 |
34 |
35 | 即使该类没有定义构造器，上面这段代码也会输出‘3’。
36 | 每个Foo类的实例都会拥有this.one和this.two变量，并且拥有它们的初始值。
如果有其他类继承了这个Foo类，它也将拥有父类声明的成员变量。
39 | 40 |这段代码:
41 | 42 |class Bar: Foo {
43 | this var three = 3; // 成员变量
44 |
45 | function sum() { return this.three + super.sum(); }
46 | }
47 |
48 | var bar = new Bar();
49 | stdout << bar.sum() << "\n";
50 |
51 |
52 | 将会输出‘6’。bar实例将会拥有this.one、this.two、this.three成员变量。
53 |可点击但不聚焦的行为。一个轻量的按钮行为(在发生MOUSE_DOWN/UP事件时生成BUTTON_CLICK事件)。
8 |默认情况下，应用了behavior:clickable行为的元素有:
10 |<toolbar><button></button></toolbar>N/A
18 |除了标准事件集(鼠标、按键、聚焦)外，behavior:clickable行为还生成:
20 |空格键时产生该事件。该事件为异步事件。空格键时产生该事件。该事件为异步事件。N/A - behavior:clickable没有引入任何特有的方法。
25 |N/A
27 |onClick事件var btn = $(button#some);
30 | btn.onClick = function() { ... 事件处理代码 ... }
31 |
32 | on()订阅var btn = $(button#some);
34 | btn.on("click", function() { ... 事件处理代码 ... });
35 | self.on("click", "button#some", function() { ... 事件处理代码 ... });
36 |
37 | include "decorators.tis"; 39 | @click @on "button#some" :: ... 事件处理代码 ...; 40 |41 | 42 | -------------------------------------------------------------------------------- /content/behaviors/date.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
日期输入元素，它包含一个下拉日历。
9 |默认情况下，应用了该行为的元素有:
11 |<input type="date" /> - 行内日期输入元素初始化该行为时会创建下面的DOM结构:
20 |<input>
21 | <caption>
22 | <span.year>
23 | <span.month>
24 | <span.day>
25 | </caption>
26 | <button>
27 | </input>
28 |
29 | 其中，<caption>拥有behavior:masked行为。<button>按钮触发弹出下拉日历。
该行为需要知道的属性:
32 |value="YYYY-MM-DD" - input元素的初始日期除了标准事件集(鼠标、按键、聚焦)外，该行为还生成:
36 |Date 或 undefined, 反应内部编辑缓存区的当前状态。
40 |Sciter 3已经正式发布
19 | 20 |参见日志文件。
21 | 22 |Windows XP上的已知问题: GDI+的线性和辐射渐变不同于Direct2D，它没有“open gradients”的概念，稍后我会尝试修复它。
31 | 32 |你应该想到，GDI+渲染的效率不能与Direct2D相比，所以应该尽量避免大范围使用动画。下面的两种媒体规则允许定义不同的绘制模式:
33 | 34 |
35 | @media graphics-layer == 1 {
36 | /* GDI+ 规则 尽量少用动画 */
37 | }
38 | @media graphics-layer == 2 {
39 | /* Direct2D WARP 模式 (软件加速)
40 | */
41 | }
42 | @media graphics-layer >= 3 {
43 | /* Direct2D 硬件加速模式，最大性能 */
44 | }
45 |
46 |
47 | 当然，大多少情况下，下面两个规则也是足够的:
48 | 49 |
50 | @media graphics-layer == 1 {
51 | /* GDI+ 规则 尽量少用动画 */
52 | }
53 | @media graphics-layer > 1 {
54 | /* Direct2D, 高性能模式 */
55 | }
56 |
57 |
58 | 在脚本中，你可以通过读取view.backend (:integer)属性来检查gfx绘制模式。
现在我正在给TIScript添加await特性。
10 |Await是一种类似JavaScript语言中的“回调/诺言”式代码的解决方案，考虑下面这样的代码:
11 |
上面的代码如果使用Await的话，可以简化成:
13 |function setupUsersMottoTask(userName)
14 | {
15 | try {
16 | var user = await request(#get, "http://example.com/user/" + userName);
17 | var userMotto = await request(#get, "http://example.com/user/" + userName + "/avatar");
18 | self.$(#user > .motto).text = userMotto;
19 | } catch (e) {
20 | self.$(#user > .motto).text = "motto unavailable";
21 | }
22 | }
23 | setupUsersMottoTask("monster"); // runs asynchronously as it is a Task function.
24 | 如果没有await，则上面的代码就会变成上面那样的梯形调用方式。
基本上，await使异步代码线性化成正常顺序的代码执行。
在Sciter的脚本中，任何内部使用了`await`的换上都会自动声明成一个task函数。调用这样的函数将会立即启动一个task并且立即返回。这个函数返回一个诺言(promise),所以它的调用也可以用在其他的await中。
27 |我们可以构建元素集合并使用花括号将它们包含在 SSX {} 当中.
下面，我们使用 map() 函数循环遍历 numbers 数组. 为每个项目返回一个 <li> 元素. 最后，我们将生成的元素数组分配给 listItems:
const numbers = [1, 2, 3, 4, 5];
4 | const listItems = numbers.map((number) =>
5 | <li>{number}</li>
6 | );然后我们将整个 listItems 数组包含在一个 <ul> 元素中, 并将其渲染到 DOM:
$(body).content(<ul>{listItems}</ul>);
7 | 上面的代码, 我们用 Element.content(vnodes) 将有效地用于函数呈现的静态 list.
但是，如果我们计划使用 Element.merge() 更新 list, 我们需要为 list 元素添加 keys. 在这种情况下 merge() 可以有效地执行 DOM and its virtual representation.
使用 key 最佳方法是使用于字符串, 该字符串在其 item 中是唯一标识, 大多数情况下 key.:
const todoItems = todos.map((todo) =>
10 | <li key={todo.id} status={todo.status}>
11 | {todo.text}
12 | </li>);
13 | 注意:如果项目的顺序可能发生变化，不建议使用 key 做为索引. 这会对性能产生负面影响, 并可能导致组件状态出现问题.
14 |数组中使用的 key 需要在它们的兄弟中应该是唯一的. 但是, 它们不需要是全局唯一的.
15 |SSX 允许在花括号中嵌入任何表达式, 以便我们也可以内联 map()
function NumberList(props) {
17 | const numbers = props.numbers;
18 | return
19 | <ul>
20 | { numbers.map((number) => <li key={number.toString()} />) }
21 | </ul>;
22 | }
23 |
--------------------------------------------------------------------------------
/core/IAccessible and UI automation testing.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 | Sciter3实现了与传统浏览器兼容的IAccessible接口，所以基于IAccessible的UI自动化工具对Sciter也是有效的。
13 |为了简化UI测试脚本，进行了下面这些扩展:
14 |HRESULT IAccessible::get_accChild(VARIANT varChild, IDispatch **ppdispChild);VARIANT(VT_BSTR,str)接受字符串。这个字符串被解释层一个选择器，如果找到了匹配的元素，则ppdispChild参数将返回该元素的IAccessible的封装对象。这个方法等价于脚本中的Element.select(selector)方法。HRESULT IAccessible::get_accValue(VARIANT varChild, BSTR *pszValue);varChild参数时一个负数值(VT_I4)，则它被解释成一个属性的索引，这个方法返回对应属性的值。-1-第一个属性、-2-第二个属性等等。如果varChild参数是一个字符串(VT_BSTR)，则它被解释成一个属性的名称，该方法返回对应属性的值。HRESULT IAccessible::get_accName(VARIANT varChild, BSTR *pszValue);varChild参数时一个负数值(VT_I4)，则它被解释成一个属性的索引，这个方法返回对应属性的名称。-1-第一个属性、-2-第二个属性等等。HRESULT IAccessible::get_accState( VARIANT varChild, VARIANT *pvarState);varChild参数时-1(VT_I4)，则该方法返回元素上定义的属性数量，值为VARIANT(VT_I4,nAttributes)。标准参数值和其他IAccessible方法如何工作请阅读定义的IAccessible文档。
24 | 25 | 26 | -------------------------------------------------------------------------------- /core/DOM-Inspector-how-remove-border-from-input.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |经常有新的用户问我“怎么移除输入元素的边框”
。
15 | 也有问“下拉选择按钮”
、“日历单元格”
、“上下文菜单”
的“边框”相关问题的。
在这篇文章中，我想解释解决这类问题的同样方法，而不是回答“定义以下……”等语句。
17 |Sciter中的输入元素要么是一个纯DOM元素，要么是多个纯DOM元素组成的复合元素。
18 |输入元素(不支持输入元素)可以从Sciter内部的“master.css”样式表中获取它们的“原始”样式模型。要查找某个组成元素的样式，可以在Sciter.exe中启动DOM检视器，然后在该元素的图标上点击。
19 |要使某元素高亮显示，只需在该元素上按住CTRL+SHIFT按键的同时点击鼠标，或者在检视器窗口中从DOM树中选择该元素:
20 |
检视器可以显示应用到该元素上的样式规则，已经它的最终(使用)样式。
22 |正如你所看到的，<input>元素是没有边框的，而是通过
23 | background-image: url(theme:edit-normal); background-repeat:stretch;背景图像拉伸铺满元素区域来实现边框效果。
theme:....是一种虚拟图像 – 它们的渲染委托给了宿主操作系统的UI主题服务。因此<input>元素的边框是由宿主操作系统绘制的。
最后，这里给出“怎么移除输入元素的边框”的答案。
26 |要抑制边框和任何背景的绘制，可以声明以下内容:
27 |
28 | input#my {
29 | border: none; /* 移除任何边框 */
30 | background: none; /* 移除任何(默认)背景 */
31 | }
32 |
33 | 代表持久性存储。
9 | 10 |( file-name [, autocommit] ) returns: storage | null
27 |静态方法。打开file-name文件存储对象，并返回该存储对象的实例。
28 | autocommit指定storage关联的对象是否自动提交到存储器中。默认为true。
关闭底层的存储对象。如果autocommit为true，则将提交所有数据。
()
38 |提交所有关联对象到存储器器中。
创建一个类型为type的index对象，并返回该Index对象。Index是唯一还是可重复的依赖于unique参数。unique默认为true。支持的类型: #integer、#float、#date、#string。
高分辨率的显示器终于来了。也许在不久的未来，你会添加一个台式机或笔记本。如果是这样的话，你就会有多个不同显示器，它们有着不同的分辨率。一个是标准的96 dpi，另一个是也许是250 dpi。
14 |现在， Windows(v 8.1 及以上) 运行设置不同的监视器有不同的DPI设置。
15 |如果你的台式机共享多个显示器，你将有可能将某个应用程序窗口从一个屏幕移动到另一个屏幕。但是如果这两个屏幕拥有不同的DIP设置，则你的应用程序在两个屏幕间移动时需要支持动态DPI改变。
16 |Sciter引擎从V3.0.2.0版本开始已经支持这种动态DIP设置了。在sdk/samples/basics/test-system-font-and-dip.htm这里可以看到这个示例，当将该Sciter示例窗口在不同DPI监视器间移动时，你将看到:
17 |
为了使你的HTML/CSS UI能漂亮地演示这个特性，你需要在你的设计中使用逻辑长度单位: dip (设备独立像素, 1/96 每英尺), pt, mm, in, cm等等。注意，在Sciter中，1px是一个物理单位 – 它总是指一个物理像素。在某些情况中(例如，边框宽度)，你如果将尺寸/大小依然设置为物理像素，这有可能会产生一个异常。当你需要动态调整窗口尺寸时，你需要布局动态调整，使用弹力单位总是最好的选择。
19 |注意，上面的动画中，Sciter加载的文档有三个方框: 100px, 100dip and 100dip。最后一个方框的边框也定义为dip – 当窗口移动到左边的监视器(使用125%缩放比例)，这些具有变成了不同的大小。所以后面两个也自动适应了的窗口尺寸。
20 |标准的单选框按钮行为。 可以应用到任何一组具有相同的名称来实现一组选择(checked)功能的元素。
9 |默认情况下，应用了该行为的元素有:
11 |<input type="radio"> - 标准的HTML行内单选按钮;<button type="radio"> - Windows外观的单选按钮, 请这样使用它<button|radio(group)>first</button> <button|radio(group)>second</button>.该行为需要知道的属性:
21 |checked - 如果提供了该属性，则将会初始化元素的运行期状态添加checked标志。name="groupname" - 标准的name属性，但它有特殊的含义:拥有相同名称的复选框为一组。value="..." - 标准的value属性(用于behavior:form)。除了标准事件集(鼠标、按键、聚焦)外，该行为还生成:
27 |空格键时产生该事件。该事件为异步事件。true/false, 反映按钮的当前状态是否包含:checked标志。
注意: behavior:form行为将一组中的所有单选框元素认为是一个值。
33 | 34 | -------------------------------------------------------------------------------- /core/ccs-map.html: -------------------------------------------------------------------------------- 1 |值为以逗号分隔的列表值，列表中每项为以下值之一:
9 | 10 |示例:
19 | 20 |body {
21 | font-family: "Gill Sans Extrabold", Helvetica, sans-serif;
22 | }
23 | 字体的大小, 可以指定以下值之一:
30 | 31 |示例:
48 | 49 |/* <length> values */
50 | font-size: 12px;
51 | font-size: 0.8em;
52 |
53 | /* <percentage> values */
54 | font-size: 80%;
55 | 一个浮点数, 后面跟着一个绝对单位(cm, mm, in, pt, pc, px) 或相对单位 (em, ex)。关于支持的长度单位的更多信息, 参见CSS长度单位。
61 | -------------------------------------------------------------------------------- /content/behaviors/hyperlink.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |标准的超链接行为。它可以应用到任何有href属性的DOM元素上。
默认情况下，应用了behavior:hyperlink行为的元素有:
10 |<a href="url">...</a>该行为需要知道的属性:
18 |href="url" - 超链接URL;target="ID" - 加载URL内容的frame元素的ID。除了标准事件集(鼠标、按键、聚焦)外，behavior:hyperlink行为还生成:
23 |空格键时产生该事件。该事件为异步事件。如果这个事件用户没有处理掉，则最接近该链接的文档将会处理加载该URL。
26 |N/A - behavior:hyperlink没有引入任何特有的方法。
28 |N/A.
30 |onClick 事件var btn = $(a#some);
33 | btn.onClick = function() { 事件处理代码 ...;
34 | return true; /*标明事件以被处理*/ }
35 |
36 | on() 订阅var btn = $(a#some);
38 | btn.on("click", function() { ... 事件处理代码 ... });
39 | self.on("click", "button#some", function() { ... 事件处理代码 ... });
40 |
41 | include "decorators.tis"; 43 | @click @on "a#some" :: ... 事件处理代码 ...; 44 |45 | 46 | -------------------------------------------------------------------------------- /content/behaviors/time.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
时间输入元素。
9 |默认情况下，应用了该行为的元素有:
11 |<input type="time" /> - 行内时间输入元素初始化该行为时会创建下面的DOM结构:
20 |<input>
21 | <caption>
22 | <span.hour>
23 | <span.minute>
24 | <span.second>
25 | <span.ampm>
26 | </caption>
27 | <button.plus>
28 | <button.minus>
29 | </input>
30 |
31 | <span.ampm>是可选的 - 它只出现在当前区域(语言)需要它时。
<caption>拥有behavior:masked行为。
33 | <button.plus>和<button.minus>触发对当前的子字段的递增/减。
该行为需要知道的属性:
36 |value="HH:MM:SS" - time, 输入元素的初始化值。ISO 8601格式的时间部分。除了标准事件集(鼠标、按键、聚焦)外，该行为还生成:
40 |Date 或 undefined, 反应内部编辑缓存区的当前状态。Date只有时间部分是有效的。
44 |N/A - 该行为没有引入任何特有的方法，不过<caption>子元素有behavior:masked行为的特有方法。
Reactor 只有这三个特性:
4 |Element.merge(velement) 就是这个 .class Reactor.Component 是由 sciter:reactor.tis 实现. 你可以在这看到源代码 here.最小的 Sciter's Reactor 示例:
12 |$(body).content( <h1>Hello, world!</h1> );13 |
如您所料，执行此行将生成以下 DOM 结构:
14 | 15 | 16 | 17 |<body> 18 | <h1>Hello, world!</h1> 19 | </body>20 | 21 |
脚本表达式 <h1>Hello, world!</h1> 是一个 SSX 原语.
注意：您不需要任何外部预编译器来运行此代码 - SSX 是 Sciter 脚本的一个组成部分，从 sciter4.4.0.0 开始支持。解析、DOM 更新和协调也是原生实现的，不需要任何额外的库。
23 |这意味着, 就象上面的例子一样, 你在不引用 ReactJS 的时候, 就能使用这些特性.
24 |例如，JSX 可用于需要填充现有 DOM 的情况, 你可以使用Element.create() or Element.append()
并且你可以使用 Element.merge() 来从虚拟 dom 定义中来更新真实 DOM , 你可以使用这个例子用于需要比例和合并二个真实 dom 树的时候.
Sciter's Reactor 使用了大体上类似 ReactJS 的语法与想法.
28 |Facebook::ReactJS 是一个 JavaScript 库, Sciter::Reactor 是原生实现了这二个事情 : SSX 与 Element.merge().
29 | -------------------------------------------------------------------------------- /core/construction-mean-TIScript.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |在一个邮件中曾提到这个问题…
15 |它是TIScript中声明匿名函数的格式之一，称为单语句lambda(希腊字母的第11个字)函数:
16 |':' [参数-列表] ':' <语句>;17 |
比如说，我们有这样的JavaScript代码:
18 |var counter = 0;
19 | var inc = function() { counter++; }
20 | 当我们每次调用inc(), 计数器counter就会加1。
在TIScript中除了这种写法，可有一种声明匿名函数的轻量级语法:
22 |var counter = 0; 23 | var inc = :: counter++;24 |
其中，第一个“:”等同于JS声明中的“function(”，而第二个“:”等同于JS声明中的“)”。
当然，你也可以在TIScript中使用JS的标准方式来声明匿名函数, 我只是认为有时更短的格式使用更方便。像这里:
26 |var accounts = [...]; // 账户列表 27 | accounts.sort( :a,b: a.balance - b.balance );28 |
声明的这种写法是不是比下面这种写法更简洁:
29 |accounts.sort( function(a,b){ return a.balance - b.balance });
30 | Ruby也有一种类似的轻量级声明方式:
31 |[1,2,3,4,5].each {|i| print "#{i} "}
32 | 对应的JS如下:
33 |[1,2,3,4,5].each(function(i){ println("#",i);});
34 | 标准的复选框行为。它可以应用到任何需要切换:checked状态的DOM元素上。
9 |默认情况下，应用了该行为的元素有:
11 |<input type="checkbox"> - 标准的HTML行内复选按钮;<button type="checkbox"> - Windows外观的复选按钮, 请这样使用它<button type=checkbox>caption</button>.该行为需要知道的属性:
22 |checked - 如果提供了该属性，则将会初始化元素的运行期状态添加checked标志。mixed - 如果提供了该属性，则该元素将有三种状态：选中(true)、未选中(undefined)、部分选中(undefined)。name="name" - 标准的name属性 - from表单上一个input元素的名称。value="..." - 标准的value属性(用于behavior:form)。除了标准事件集(鼠标、按键、聚焦)外，该行为还生成:
29 |空格键时产生该事件。该事件为异步事件。true/false, 反映按钮的当前状态是否包含:checked标志。
N/A - 该行为没有引入任何特有的方法。
36 | 37 | 38 | -------------------------------------------------------------------------------- /content/script/Angle.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 |表示一个角度值。
9 |角度值使用全局的rad(float)或deg(integer)函数构建一个角度值。
Angle字面值是数字和角度单位的组合。下面的表达式将为true:
12 |360deg instanceof Angle; 13 | 360deg == Math.PI * 2 * 1rad; 14 | 360deg == 400grad; 15 | 360deg == 1turn; 16 | 1turn / 2 == 180deg; 17 |18 |
TIScript支持CSS定义的所有单位值:
19 |deg - 度, 在一个完整圆中有360度;rad - 弧度, 在一个完整圆中有2*π弧度;grad - 梯度(Gradians)。一个圆共400梯度。90deg = 100grad = 0.25turn ≈ 1.570796326794897rad;turn - 转、圈(Turns)。1圈等同于360度 - 一个完整的圆;(s: string) : angle
34 |静态方法, 根据CSS规则解析字符串为角度对象。
() : float
38 |将角度转换为弧度值。
() : integer
42 |将角度转换成角度值。
() : string
46 |返回"NNNrad"格式的字符串，其中NNN是一个弧度值。
( from : angle, to:angle, ratio: float ) : angle
50 |根据后面的公式计算平均值: (to - from) * ratio + from。
collapsed(折叠)/expanded(展开)概念在UI中使用的是非常广泛的， 所以我解决的将他们添加到Sciter的内核中。
13 |所以在脚本中可以读写这两个通用的UI状态标识:
14 |element.state.collapsed = true /*or false*/; 15 | element.state.expanded = true /*or false*/;16 |
这两状态是相互关联的 – 元素可以是collapsed或expanded状态, 但不可能同时处于这两种状态，即当element.state.expanded = true;时，则element.state.collapsed将被设置为false, 反之亦然。默认情况下，元素的这两种状态都为false – 非collapsed也非expanded。
在CSS中，有两个伪类反应这两种状态:
18 |element:collapsed { ... }
19 | element:expanded { ... }
20 | 在不同的场景中，collapsed和expanded状态表示不同的含义。在某些场景中，折叠的元素意味着元素是隐藏/不可见的，它的CSS定义如下:
21 |element:collapsed { visibility:none; }
22 | 而在另外一些场景中, 比如有标题区和内容区的section, 折叠状态意味着“隐藏内容区，但总是显示标题区”
23 |<section.collapsible> 24 | <header>标题</header> 25 | <div> 26 | ... 内容 ... 27 | </div> 28 | </section>29 |
在这种场景中，CSS可能包含这样的visibility规则:
30 |section.collapsible:collapsed > div { visibility:none; }
31 | 所以当section处于折叠状态时，它的内容div是完全隐藏的。并且它可能在标题区定义了可见的折叠状态, 比如 +/-图标等。
32 |在脚本中，你可以很容易触发它的expands/collapse的状态:
33 |self.on("click", "section.collapsible > header", function(evt) {
34 | // 在标题区上点击
35 | var section = this.parent;
36 | // 切换collapsed状态:
37 | section.state.collapsed = !section.state.collapsed;
38 | });
39 | 在Sciter 3.2.0.3中，我为内建的like操作符和switch/like语句添加了所谓的'对象匹配'特性。
设想我们有一个类似下面的对象/数据列表:
12 | var shoppingCartData = [
13 | { product:"苹果", price: 0.95, calories:52 },
14 | { product:"橘子", price: 0.75, calories:47 },
15 | { product:"牙刷", price: 1.75 },
16 | "deleted",
17 | { product:"Pear", price: 1.25, calories:57 },
18 | { product:"肥皂", price: 2.75 },
19 | ];
20 |
21 | 我们要将其中的事务于其他物品分离开，若使用新的switch/like特性，语句如下:
22 |for( var item in shoppingCartData )
23 | switch(item)
24 | {
25 | like { price: Float, calories: Integer } :
26 | // 一个食物项
27 | ...
28 | break;
29 | like { price: Float } :
30 | // 不是食物项
31 | ...
32 | break;
33 | case "deleted" :
34 | // 被删除项，跳过它
35 | break;
36 | default:
37 | // 未知项，这是一个彩蛋?
38 | break;
39 | }
40 |
41 |
42 | 为like添加的模式匹配表达式:
if( item like { product: String, price: Float } )
44 | stdout.println( item, "is a pricey product" );
45 |
46 | 希望这个新特性会为你们的工作带来便利。
47 |标准按钮行为。它可以应用到任何DOM元素上，并使该元素可聚焦和可点击(clickable，即可以接收到BUTTON_CLICK事件)。
8 |默认情况下，应用了behavior:button行为的元素有:
10 |<button></button><input type=button><input type=reset><input type=submit>该行为需要知道的属性:
21 |value="string" - 按钮的标题，即<input type=button>按钮上应该出现的文字。name="name" - 标准的name属性 - from表单上一个input元素的名称。除了标准事件集(鼠标、按键、聚焦)外，behavior:button行为还生成:
26 |空格键时产生该事件。该事件为异步事件。空格键时产生该事件。该事件为异步事件。N/A - behavior:button没有引入任何特有的方法。
31 |valuetrue/false - 只读, 反映按钮是否按下的状态值。
33 |onClick事件var btn = $(button#some);
36 | btn.onClick = function() { ... 事件处理代码 ... }
37 |
38 | on()订阅var btn = $(button#some);
40 | btn.on("click", function() { ... 事件处理代码 ... });
41 | self.on("click", "button#some", function() { ... 事件处理代码 ... });
42 |
43 | include "decorators.tis"; 45 | @click @on "button#some" :: ... 事件处理代码 ...; 46 |47 | 48 | -------------------------------------------------------------------------------- /core/js-dart-tis_files/shBrushJScript.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SyntaxHighlighter 3 | * http://alexgorbatchev.com/SyntaxHighlighter 4 | * 5 | * SyntaxHighlighter is donationware. If you are using it, please donate. 6 | * http://alexgorbatchev.com/SyntaxHighlighter/donate.html 7 | * 8 | * @version 9 | * 3.0.83 (July 02 2010) 10 | * 11 | * @copyright 12 | * Copyright (C) 2004-2010 Alex Gorbatchev. 13 | * 14 | * @license 15 | * Dual licensed under the MIT and GPL licenses. 16 | */ 17 | ;(function() 18 | { 19 | // CommonJS 20 | typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null; 21 | 22 | function Brush() 23 | { 24 | var keywords = 'break case catch continue ' + 25 | 'default delete do else false ' + 26 | 'for function if in instanceof ' + 27 | 'new null return super switch ' + 28 | 'this throw true try typeof var while with finally class namespace' 29 | ; 30 | 31 | var r = SyntaxHighlighter.regexLib; 32 | 33 | this.regexList = [ 34 | { regex: r.multiLineDoubleQuotedString, css: 'string' }, // double quoted strings 35 | { regex: r.multiLineSingleQuotedString, css: 'string' }, // single quoted strings 36 | { regex: r.singleLineCComments, css: 'comments' }, // one line comments 37 | { regex: r.multiLineCComments, css: 'comments' }, // multiline comments 38 | { regex: /\s*#.*/gm, css: 'preprocessor' }, // preprocessor tags like #region and #endregion 39 | { regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' } // keywords 40 | ]; 41 | 42 | this.forHtmlScript(r.scriptScriptTags); 43 | }; 44 | 45 | Brush.prototype = new SyntaxHighlighter.Highlighter(); 46 | Brush.aliases = ['js', 'jscript', 'javascript']; 47 | 48 | SyntaxHighlighter.brushes.JScript = Brush; 49 | 50 | // CommonJS 51 | typeof(exports) != 'undefined' ? exports.Brush = Brush : null; 52 | })(); 53 | -------------------------------------------------------------------------------- /content/css/Components_React.js_style.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
我正在考虑添加一种类似React.js的@component特性。
参考下面这样的结构:
17 |@component Toggler {
18 |
19 | :root { flow: stack; }
20 |
21 | :root > option:nth-child(1) { ... }
22 | :root > option:nth-child(2) { ... }
23 |
24 | :root[on][off] :
25 |
26 | <option>{ attributes.on }</option>
27 | <option>{ attributes.off }</option>
28 |
29 | :root[on][off][mixed] :
30 |
31 | <option>{ attributes.on }</option>
32 | <option>{ attributes.off }</option>
33 | <option.mixed>{ attributes.mixed }</option>
34 |
35 | // event handler
36 | on :root click(evt) {
37 | ...
38 | }
39 | // event handler on child element
40 | on option mousedown(evt) {
41 | ...
42 | }
43 |
44 | // method
45 | function foo() { ... }
46 |
47 | // property
48 | property bar(v) { ... }
49 |
50 | }
51 |
52 | @component本质上和@set很类似，不过它不仅包含样式声明，还包含可选的组件HTML标记代码，等价于：
class Toggler:Behavior {
54 |
55 | function attached() {
56 | this.$content(...);
57 | }
58 |
59 | function foo() { ... }
60 | property bar(v) { ... }
61 | }
62 | 因此，如果你将得到这样的标记:
63 |<html> 64 | <head> 65 | <link rel="components" href="components/"> 66 | </head> 67 | <body> 68 | <toggler on="yey" off="ney"> 69 | </body> 70 | </html>71 |
将将看到组件的实例化和DOM的初始化。
72 |通过使用Process类, 你的程序可以允许另外一个程序作为子进程, 并且可以接收来自该子进程的stdout和stderr的输出，以及通过stdin流向它传递数据。
9 |静态方法, 创建一个新的子进程代理对象，并根据指定的进程路径和命令行参数(可选)启动进程。
18 |默认情况下，启动的新进场属于相同的进程组 - 它将会在本进程关闭时结束。但是如果设置了#detached参数，则子进程4父进程结束。
订阅以下进程事件的回调函数:
23 |function(text:string), 子进程打印到stdout流中的文本;function(text:string), 子进程打印到stderr流中的文本;function(status: integer), 子进程被终止，status是终止的状态码;这些事件名称可以包含".namespace"部分，它可以被用在.off()调用中。
通过事件名或回调函数取消该事件的订阅。
32 |这些事件名称可以包含名称空间(namespace)部分。因此: socket.off(".namespace") 将取消该名称空间的所有事件处理器。
该方法向子进程的stdin流中发送数据。
尝试终止子进程的运行。
这个行为提供了对历史页面导航的支持, 类似于点击浏览器中的"前进"和"后退"按钮。
8 |<frame history> - 标准的frame元素，只是多了一个history属性。
这个行为可以被应用到任何包含frame的元素上。比如，如果需要可以应用到<frameset>。
12 |behavior:history没有使用任何特别的属性。
14 |N/A
26 |这个行为会生成以下事件:
28 |这个行为反应了以下事件:
32 |N/A
41 |onControlEvent处理器：
43 | var edit = $(input#some);
44 | edit.onControlEvent = function(evt)
45 | {
46 | switch(evt.type) {
47 | case Event.HISTORY_STATE_CHANGED:
48 | /* evt.target为该元素 */
49 | break;
50 | }
51 | }
52 |
53 | include "decorators.tis";
55 |
56 | @when Event.HISTORY_STATE_CHANGED @on "frame#content"
57 | function() {
58 | ... 事件处理代码 ...;
59 | }
60 |
61 |
62 |
--------------------------------------------------------------------------------
/content/behaviors/frame-set.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 该行为处理<frameset>元素的扩展功能 - 由所谓的"分隔线(splitters)"分隔的"块面板"容器，它允许调整容器中面板的尺寸。
8 |该行为可以应用到任何块级容器上，如<div>、<section>等。
9 |默认情况下，应用了该行为的元素有:
11 |<frameset> - 面板容器。在Sciter中，<frameset>元素可以包含<frame>元素，也可以包含其他块级元素(如 <div>、<section>等)来作为一个面板。
25 |面板可以被<splitter>元素(可以指定splitter的特有样式)分隔。
26 |示例, 一个典型的帮助窗口布局:
27 |<frameset cols="120px,*"> 28 | <div id="help-index"> 29 | <a href="first-topic.htm" target="help-content">主题1</a> 30 | </div> 31 | <splitter/> 32 | <frame id="help-content">主题1的内容</frame> 33 | </frameset> 34 |35 |
第一个面板是一个<div>元素，它用于静态的内容。<frame>是选择的主题元素的容器。<splitter>用于交互式的调整面板的尺寸。
36 |该行为需要知道的属性:
38 |cols="宽度列表" - 声明列布局，指定<frameset>中的列的初始宽度;rows="高度列表" - 声明行布局，指定<frameset>中的行的初始高度;cols或rows属性必须定义其中一个，宽度/高度列表是一个以逗号分隔的Sciter长度单位: dips、px、mm等, 包括弹力单位(*)。
N/A - 该行为没有特有事件。
44 |uiState方法用于持久化frameset的UI状态。
52 |N/A
54 | 55 | -------------------------------------------------------------------------------- /core/frame-content-style.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |Sciter中，<frame>元素可以定义content-style属性。
19 | content-style属性定义src属性中的URL指定的文档的顶层样式表:
20 |
<frame src="some-child.htm" content-style="content.css" />22 |
23 | 如果这个some-child.htm文档的末尾定义了<link rel="stylesheet" type="text/css" href="content.css">，则content.css文档将会附加到some-child.htm样式表的末尾:
24 |
<html> 26 | <head> 27 | <style> 28 | ... 本地样式 ... 29 | </style> 30 | </head> 31 | <body> 32 | ... 本地内容 ... 33 | </body> 34 | <link rel="stylesheet" type="text/css" href="content.css" /> 35 | </html>36 |
39 | 所以当宿主文档想: 40 |
41 |50 | 它可以指定自己的content.css文件，而无需修改那些子文档。 51 |
52 |53 | Sciter SDK 内建的文档浏览器就是一个content-style属性的使用示例: 54 |
55 |
56 |
57 | {sciter-sdk]/doc/main.htm
58 |
59 | 定义的内容frame为:
60 |
<frame #content src="content/preface.htm" content-style="styles/content.css"/>62 |
63 | 因此，每个加载到frame中的子文档都会应用
64 | {sciter-sdk}/doc/styles/content.css
65 | 样式到它的内容区域。
66 |
它是WebSocket协议的基本实现。
9 |( url: string [, timeout: duration] ) : WebSocket
15 |WebSocket的静态构造函数。websocket接受的URL结构: "ws://domain/path"。返回一个新的处于INITIAL状态的socket。timeout是连接的超时时间。当连接超时将产生一个错误。
( event: string, callback: function ) : this
19 |绑定callback回调函数到socket事件上:
20 |这些事件名可以包含".namespace"名称空间部分，它可以用在.off()函数中。
( event: string, callback: function ) : this
30 |类似于on()，但是该方法绑定的callback只会执行一次(事件处理器绘制第一层调用后自动移除)。
( event: string | callback: function ) : this
34 |根据事件名或回调函数来解除事件绑定。
35 |事件名可以只包含名称空间部分。所以这样的代码socket.off(".namespace") 将会解除所以设置了该名称空间的事件绑定。
( data: string | Bytes )
39 |该方法发送文本或二进制帧消息到WebSocket服务器。
( )
43 |发生关闭连接请求道服务端，并且关闭socket。
现在，我们使用过很多URL, 但是并不是所有人都明白URL到底是什么。
12 |在这篇文章里，我将尝试解释它们的结构，以及Sciter/HTMLayout怎么处理它们的。
13 | 请注意这是一张非正式解释，我这里讲的“URL”，实际上更正确的名称应该是“URI”。
URL由5个主要部分组成:
15 |16 | <模式/协议> : [//] <资源唯一标识> [ ? <查询> ] [ # <片段/书签> ] 17 |18 |
其中:
19 |模式/协议 – 原则是是一个名称token – URL的协议名称。 如: “file:”, “http:”等。// 部分 – 如果有的话，它的含义是接下来的 “资源唯一标识”部分采用层次化的命名约定，并且以‘/’作为分隔符。资源唯一标识 – 如果它之前有‘//’，则它是由‘/’分隔的路径名，否则它是一个“平”名称。查询 部分原则上只对“动态客户端/服务端”场景有意义。 它是客户端为服务端提供的资源的一些参数说明。片段/书签 – 是一个名称，或者是资源中某一个位置或部分的ID。考虑下这种场景，当你在3个不同的位置上有一些相同的test-file.html文件:
27 |我们假设这个文档中包含一个有一个相对路径的图片:
33 |34 | <html> 35 | <img src="image.png"> 36 | </html> 37 |38 |
在加载这个文档时，Sciter将会按照以下步骤来处理“image.png”这个名称的路径:
39 |原则上，你的Sciter应用程序可以定义你自己的URL协议。你只需要觉得它是分层的还是“平”的。
45 |例如，如果你调用SciterLoadHtml(html, "app://module/main.htm");，则文档中的所有相对链接
46 | 将会把app://module/当做基地址。所以在你的SCN_LOAD_DATA处理事件中，你将会收到: “app://module/images/img1.png”, “app://module/styles.css” 等等。
但是，如果你计划将你的所有文件都放到你的应用程序的资源文件中时，你应该使用一种类似 “res:”的“平”协议。
48 |最后需要注意的是: 如果你在SciterLoadHtml和SciterLoadFile中使用了层次URL，则这些URL必须是绝对定位，否则Sciter将不知道怎么处理它们。
49 |这个path是一个url，它使用自定义的path:{commands}协议，它可以在<path d="{commands}" />中直接使用SVG的path命令 )。
因此任何已存在的SVG WYSIWYG编辑工具和SVG图片都可以直接使用 - 仅需从SVG中复制d属性的内容到CSS或HTML中(比如<img>或<picture>的src属性)即可。
Sciter支持支持全部的"d 命令": MmLlHhVvCcSsQqTtAaZz.
11 |示例, 请看下面的样式:
12 |div {
13 | background-image: url( path:M0,0 L50,100 L100,0z );
14 | background-size: 100% 100%;
15 | background-repeat: no-repeat;
16 | fill: red;
17 | stroke: blue;
18 | }
19 |
20 | 将会在元素的背景的(0,0), (50,100) and (100,0)位置上显示一个三角形。
21 |为了可以绘制路径，Sciter未它添加了以下属性支持:
23 |这些属性与SVG中的含义相同。
32 |我们有时需要一些可扩展的矢量图像，它们可以根据给定的尺寸自动调整大小。
34 |为了支持这样的图像，d-命令做了以下扩展：
35 |大写的d-命令( MLHVCSQTA )可以接受绝对坐标值，现在它可以使用负坐标值了(包括负零)。
37 |这时，负坐标意味着它们是图像矩形相对于右下角的偏移值。因此:
38 |background-image: url( path:M0,0 L-0,-0 ); 39 | stroke: blue;41 |
stroke-width: 3px; 40 |
将会在元素背景区域绘制一条从左上角到右下角的宽度为3px的斜线。
42 |你也可以根据图像的渲染位置的比例定义坐标。比例坐标值是一个后面跟着'*'好的0.0 ... 1.0直接的数字。比如:
44 |background-image: url( path:M0,0 L1*,1* ); 45 | stroke: red;47 |
stroke-width: 3px; 46 |
也将会在元素背景区域绘制一条从左上角到右下角的宽度为3px的斜线。
48 |比例坐标也可以是负值 - 将图像的右下角作为锚点进行渲染。
49 | 50 | -------------------------------------------------------------------------------- /content/css/css-extensions.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |@const规则可以定义一些命名常量，以便在接下来的样式声明中将这些常量作为样式的属性值。
const常量声明示例(CSS+):
18 |19 | 20 |/* 常量的声明: */
@const BASE_COLOR: #00FF00;
/* 在样式声明中使用常量: */
#myelement { border: 1px solid @BASE_COLOR; }
声明的代码中，第一行定义了一个BASE_COLOR常量，在第二行中使用该常量作为一个样式属性的值。
21 |@const规则使用下面的语句:
22 |23 |24 | 25 |@const name [, name1 [, name2 ... ]] : values ;
':'号后面的值列表将会赋值到':'号左边的常量上。 26 | values是一个CSS可接受的属性值序列。它可以是单个值(如上面的#00FF00)，也可以是一个定义复合属性(短格式)的值集合。例如，下面定义了一个常量，它是background属性的一个值集。
27 |28 |29 | 30 |@const MY_BACKGROUND: yelllow repeat url(hatch.png);
#myelement { background: @MY_BACKGROUND; }
常量的插入点的标记方法：在'@'字符后边跟着用@const声明的对应常量名称。
31 |@const的作用域:
32 |这种行为提供了滑块功能。
10 |默认情况下，应用了该行为的元素有:
12 |<input|hslider> - 水平滑块;<input|vslider> - 垂直滑块。注意: 要使创建的slider支持浮点范围，元素必须至少定义min和max属性，且它们的值必须是浮点数，例如:
22 | <input|hslider min="0.0" max="1.0" step="0.01">
该行为初始化时会生成下面的DOM元素结构:
25 |<input type=hslider> 26 | <button.slider /> 27 | </input> 28 |29 |
其中，<button.slider>是滑块中的"旋钮"。
该行为需要知道的属性:
32 |integer|float, 滑块的当前值，返回在[ min ... max ]之间。
59 | 60 | -------------------------------------------------------------------------------- /content/reactor/mounting-point.htm: -------------------------------------------------------------------------------- 1 |考虑这个 HTML 文档:
3 | 4 |<html>
5 | <head>
6 | <script type="text/tiscript">
7 | var items = ["Veni","Vidi","Vici"];
8 | </script>
9 | </head>
10 | <body>
11 | <reactor(ol)>
12 | {items.map((item) => <li>{item}</li>)}
13 | </reactor>
14 | </body>
15 | </html>你要注意这 <reactor> 元素在这 . 这个 <reactor> 元素是调用 Reactor's 的 mount 点.
当这个<reactor> 元素出现在 DOM 中，它作为包进 SSX 的脚本进行运算, 该 html 的最终结果如下:
<html> 18 | <body> 19 | <ol> 20 | <li>Veni</li> 21 | <li>Vidi</li> 22 | <li>Vici</li> 23 | </ol> 24 | </body> 25 | </html>26 |
The <reactor>元素, 会解释输入的两种 DOM 属性:
type - string, 接受以下内容:src - url. 当 name 定义 Reactor 的组件 (case #2 above). 如果 src 它是提供了的话引擎将尝试从 url 加载的脚本文件中加载组件.例如这个 document:
36 |<html>
37 | <head>
38 | <script type="text/tiscript">
39 | var name = "World";
40 | </script>
41 | </head>
42 | <reactor|body>
43 | <h1>Hello {name}</h1>
44 | </reactor>
45 | </html>
46 |
47 | 加载后会变成如下:
48 |<html> 49 | <head> 50 | <script type="text/tiscript"> 51 | var name = "World"; 52 | </script> 53 | </head> 54 | <body> 55 | <h1>Hello world</h1> 56 | </body> 57 | </html>58 | 59 | -------------------------------------------------------------------------------- /content/reactor/rendering.htm: -------------------------------------------------------------------------------- 1 |
注意：本文档是按 ReactJS/Rendering-Elements 风格来写的 以高亮的地方是与 ReactJS 的差异.
2 |Reactor 的虚拟 DOM 元素是由真实 DOM 元素来定义. 在某些时候, 将使用虚拟元素作为原型来创建真实的 DOM 元素.
4 | 5 |const velement = <h1>Hello, world</h1>;6 |
与物理 DOM 元素不同, Reactor 元素是简单的 tuples 元组, 并且创建成本低. 专用 Sciter 的 DOM 方法 负责更新 DOM 以匹配此类虚拟元素.
7 |您的 HTML 文件中有一个<div> :
<div id="root"></div>11 |
让我们称其为 "root" DOM node - 其中的所有内容都将由 Reactor 管理.
12 |使用 Reactor 的应用程序可以将多个独立的根 DOM 节点作为单个根 DOM 节点 - 无论你需要什么. 并且您可以将 Reactor 管理的元素与通过其他方式管理的元素混合, e.g. scripting behavioral classes.
13 |要将 Reactor 元素渲染到 root DOM node, 调用 element.merge(velement) 方法:
const velement = <div id="root"><h1>Hello, world</h1></div>; 17 | $(div#root).merge(velement);18 |
上面的内容将在该<h1> 元素内显示"Hello, world"文本.
要更新已经渲染的元素, 我们只需调用 element.merge(velement) 来再次更新 velement. 这个 Element.merge() 原生函数将通过新的 velement 定义修改现有的 DOM 元素 定义.
考虑这个滴答时钟示例:
22 |function tick() {
23 | const velement =
24 | <div id="root">
25 | <h1>Hello, world!</h1>
26 | <h2>It is {new Date().toLocaleString(#time)}.</h2>
27 | </div>;
28 | $(div#root).merge(velement);
29 | return true; // to keep timer running
30 | }
31 |
32 | self.timer(1s, tick);
33 | 上面的代码将每秒调用 tick() 函数. 这个 tick 会更新这个元素的 <div>.
使用 sciter.exe 查看样例 {sdk}/samples/+reactor/doc-samples/rendering/clock.htm.
35 |这个 Element.merge() 函数将元素及其子元素与前一个元素进行比较, 并且仅应用使 DOM 达到所需状态所需的 DOM 更新.
管我们在每个刻度上创建了一个描述整个 UI 树的元素, 但只有内容已更改的文本节点会更新 Element.merge().
因此 Reactor (特别是merge()方法) 允许在每一个给定的时刻重新定义 UI 的部分节点, 而不是随时间改变所有.
我在SDK中添加了新的示例: /sdk/demos/ui-framework。
12 | 这个示例演示了“Sciter UI及它的应用架构”文章中描述的设计原则。
这个示例演示了怎么定义一个本地函数(view.execTask() -> window::exec_task())，以及如何从工作线程中调用UI方法(通过回调)。
15 |我已经在这篇文章中解释了如何在工作线程中调用UI，不过在这个示例里，我使用了一种稍微不同的机制。
16 |gui_exec函数看起来类似这样的:
17 |// 这个函数被工作线程调用，用于执行GUI线程中gui_block
18 | inline void gui_exec( std::function<void()> gui_block )
19 | {
20 | sciter::sync::event evt;
21 | PostThreadMessage(gGUIThreadId, WM_EXEC, WPARAM(&evt),LPARAM(&gui_block));
22 | evt.wait(); // 暂停工作线程，直到GUI线程执行完毕gui_block。
23 | }
24 |
25 | 它将消息post到GUI线程的消息队列中，WM_EXEC消息的接收者是是Windows的WH_GETMESSAGE的hook函数:
26 |// message hook to handle WM_EXEC in GUI thread
27 | static LRESULT CALLBACK gui_exec_hook_GetMsgProc(int code, WPARAM wParam, LPARAM lParam )
28 | {
29 | MSG* pmsg = reinterpret_cast<MSG*>(lParam);
30 | if(pmsg->message == WM_EXEC)
31 | {
32 | sciter::sync::event* pe = reinterpret_cast<sciter::sync::event*>(pmsg->wParam);
33 | gui_block* pf = reinterpret_cast<gui_block*>(pmsg->lParam);
34 | (*pf)(); // execute the block in this GUI thread
35 | pe->signal(); // signal that we've done with it
36 | // this will resume execution of worker thread.
37 | }
38 | return CallNextHookEx(0,code, wParam,lParam);
39 | }
40 | Using hooks allows this mechanism to work reliably even when application is running modal dialog loops.
41 |浮点值是这个类的"对象"。
10 | 11 |( ) : float
28 |简单的返回浮点值。
( ) : int
33 |将浮点值转换成整数。
返回浮点数的字符串形式。
() : string
43 |返回转义了html规则的字符串。是toString()方法的别名。
() : string
48 |返回转义了url规则的字符串。是toString()方法的别名。
简单的返回浮点值本身。
( ... ) : float
58 |静态方法 - 返回参数中的最小值。如Float.min(1.0, 2.0, 3.0)将会返回1.0。
( ... ) : float
63 |静态方法 - 返回参数中的最大值。如Float.min(1.0, 2.0, 3.0)将会返回3.0。
如果该浮点值无法表示为数字，则返回true。
如果该浮点数是一个无穷大数字，则返回true。
( from, to, ratio ) : float
78 |使用后面的公式计算平均值: (to - from) * ratio + from;
所有的整数值都是这个类的"对象"。
10 | 11 |( ) : float
28 |架构整个转换成浮点数。
( ) : int
33 |简单的返回整数值。
返回整数的字符串型，radix参数指定进制，取值10(默认)、8、16。
( [radix: int] ) : string
43 |返回转义了html规则的字符串。是toString()方法的别名。
( [radix: int] ) : string
48 |返回转义了url规则的字符串。是toString()方法的别名。
简单的返回整数值本身。
( ... ) : int
58 |静态方法 - 返回参数中的最小值。如Integer.min(1, 2, 3)将会返回1。
( ... ) : int
63 |静态方法 - 返回参数中的最大值。如Integer.min(1, 2, 3)将会返回3。
( min:int, max:int ) : int
68 |该函数的实现代码如下:
69 |function Integer.limit(min, max)
70 | {
71 | if( this < min ) return min;
72 | if( this > max ) return max;
73 | return this;
74 | }
75 | JavaScript和TIScript中的每个函数都有一个隐含的this参数。
所以当你调用一个对象的方法时，比如 foo.bar(1) 方法， foo 对象会命名为this来作为函数的第一个参数来传递给 bar(param) 函数。
对于使用过JS, Python, Ruby等语言的人来说，‘this’变量应该是很熟悉的。
14 | 但是当一个内部函数想访问它外部函数的‘this’值时，你该怎么做呢? 在JavaScript中，唯一的办法是定义一个变量，并且将外部函数的 ‘this’赋值给它: var that = this; 。
为了处理这种情况，我在TIScript中引入了“super this”概念, 所以在任何一个函数中，都有以下几个隐含变量:
16 | this – 标准的this变量; this super – 外部函数的标准this变量; this super super – 外部函数的外部函数的this变量; 下面的示例，将在标准输出上输出“6”:
23 |
24 | class Test {
25 | function this(data) {
26 | // 构造器
27 | this.data = data;
28 | // 实例字段
29 | }
30 |
31 | function Outer(arg1) {
32 | // this - 隐藏参数, 局部变量
33 | // arg1 - 参数, 局部变量
34 | function Inner(arg2) {
35 | // this - 隐藏参数, 局部变量
36 | // arg2 - 参数, 局部变量
37 | // arg1 - 外部变量 - 外部参数
38 | // this super - 外部变量 - 外部的'this'参数
39 | return (this super).data // 1
40 | + arg1 // 2
41 | + arg2 // 3
42 | }
43 | return Inner;
44 | }
45 | }
46 |
47 | var test = new Test(1);
48 | var innerFunc = test.Outer(2);
49 | stdout.println( innerFunc(3) );
50 |
51 | 我在Sciter 3.3.1.4增加了将HTML/CSS直接渲染到DirectX窗口的能力。
13 |基本概念:
14 |SciterCreateOnDirectXWindow API function.SciterRenderOnDirectXWindow API function to render content when it is appropriate. With the function following rendering modes are supported:
17 | 
Sciter’s DirectX API also contains SciterRenderOnDirectXTexture API function. It is used to render HTML/CSS content on DirectX 2D textures.
If your setup requires DOM layers then it makes sense to consider adding native behavior to DOM element on front layer that will establish view on 3D scene. Such a behavior will catch mouse and keyboard events and reroute them to view/model manipulations.
27 |Scripts can also be used to manipulate 3D view/model variables. Check {sciter-sdk}/demos.win/sciter-directx/ demo project – it demonstrates all this.
28 |格式化的输出行为。该行为可以被应用到任何文本容器上，如<span>、<em>等。
9 |默认情况下，应用了该行为的元素有:
11 |<output type=..> - 只读输出元素;<(name)> - Sciter特有的短格式语法，相当于<output name="name">.注意：在Sciter中你可以使用output的短格式语句。所以下面3个声明是等价的:
15 |<output name="first" type="text" /> 16 | <output|text(first)/> 17 | <(first)|text> 18 |19 |
type - 格式化的类型，可以为以下值之一:"text" - 输出纯文本, value值等同于toString()后的呈现;"integer" - 输出整数;"decimal" - 输出浮点数，值的格式基于当前地区(语言)的规则;"currency" - 输出金额， 值的格式基于当前地区(语言)的规则;"date" - 输出日期，值为UTC日期值，格式基于当前地区(语言)的规则;"date-local" - 输出日期，值为当前时区的日期值，格式基于当前地区(语言)的规则;"time" - 输出时间，值为UTC时间值，格式基于当前地区(语言)的规则;"time-local" - 输出时间，值为当前时区的的时间值，格式基于当前地区(语言)的规则;name="name" - 标准的name属性 - from表单上一个input元素的名称。value="..." - 标准的value属性。该值的的显示格式基于type属性的定义。novalue="no value text" - 当output没有输出内容时显示的文本。如果value无法转换为声明的类型，则该元素会被设置:invalid状态标志;
如果value是数字类型，且是一个负数，则该元素会有一个negative属性，这样你可以通过该属性改变该元素的样式，如output[negative] { color:red; }
N/A - 该行为没有特有的事件。
44 |any value, 该值应该匹配type属性声明的类型。
N/A - 该行为没有引入任何特有的方法。
48 | 49 | -------------------------------------------------------------------------------- /content/behaviors/select-multiple.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |多选列表(<select multiple>)的行为(当按照ctrl键时可以进行多选)。原则上它可以被应用到任何元素上。
8 |默认情况下，应用了该行为的元素有:
10 |<select size="2...N" multiple></select><select|list multiple></select>于behavior:select行为相同。
28 |被选择项被设置了:checked状态标志，因此可以在CSS中使用:checked伪类来设置选择状态项的样式:
select > option:checked { background-image: url(my-checkmark.png); }
30 |
31 | 该行为需要知道的属性:
33 |size=integer - 列表中可见元素的数量。注意：select元素的高度可以被CSS覆盖掉。name="name" - 标准的name属性 - from表单上一个input元素的名称。novalue="text" -如果select中没有使用<option selected>初始化它，则将会使用该显示该文本。除了标准事件集(鼠标、按键、聚焦)外，该行为还生成:
39 |N/A - 该行为没有引入任何特有的方法。
44 |value数组, 读/写属性, 选择项的列表。
46 |onValueChanged事件var btn = $(select#some);
49 | btn.onValueChanged = function() { var v = this.value; ... }
50 |
51 | on() 订阅var btn = $(select#some);
53 | btn.on("change", function() { ... 事件处理代码 ... });
54 | self.on("change", "select#some", function() { ... 事件处理代码 ... });
55 |
56 | include "decorators.tis"; 58 | @change @on "select#some" :: ... 事件处理代码 ...; 59 |60 | 61 | -------------------------------------------------------------------------------- /content/behaviors/menu-bar.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
该行为提供了一个横向菜单栏 —— 弹出菜单的顶层容器。
10 |引擎的默认样式系统没有提供菜单栏的默认样式。如果你的应用程序需要菜单栏，请使用{sdk}/samples/menu/std-menu.css作为原型。
11 |默认没有元素应用该行为。{sdk}/samples/menu/std-menu.css是假设<ul id="menu-bar">元素定义了顶层菜单。
Sciter中，菜单的声明示例:
15 |<ul id="menu-bar"> 16 | <li> 17 | <caption>文件</caption> 18 | <menu> 19 | <li id="file-open">打开<span.accesskey>Ctrl+O</span></li> 20 | <hr> 21 | <li id="file-save">保存<span.accesskey>Ctrl+S</span></li> 22 | <li id="file-save-as">另存为...<span.accesskey>Ctrl+Shift+S</span></li> 23 | </menu> 24 | <li> 25 | ... 26 | </ul> 27 |28 |
该行为没有引入特有的属性。
30 |没有特有的方法。
33 |:owns-popup 当菜单显示时，菜单拥有者(上面的menuOwnerElement)会设置该状态标志;:popup - 当<menu>显示时，该菜单会设置该状态标志。菜单项事件的传播采用所谓的菜单树顺序，菜单的拥有者元素会接收它拥有的菜单的所有的MENU_ITEM_CLICK事件。
N/A
45 |onControlEvent事件var edit = $(input#some);
48 | edit.onControlEvent = function(evt)
49 | {
50 | switch(evt.type) {
51 | case Event.MENU_ITEM_CLICK: /* evt.target是点击的菜单项 */ break;
52 | }
53 | }
54 |
55 | on()订阅var edit = $(input#some);
57 | edit.on("click", "li#file-open", function(evt) {
58 | // 'this'这里是li#file-open元素
59 | });
60 |
61 | include "decorators.tis"; 63 | @click @on "li#file-open" :: ... 事件处理代码 ...; 64 |65 | 66 | -------------------------------------------------------------------------------- /main.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 |
持久化的storage对象中的Index对象。
10 | 11 |( key, val [, replace: true|false ] ) : true|false
37 |将val对象插入到Index中，并且将它与key键值关联。replace参数指定当对象已经存在时是否替换它。
从index中根据key移除obj对象。如果成功则返回true，否则返回false。
43 | 如果Index是唯一的, 则obj参数时可选的。
( min-key, max-key [, ascent [, start-inclusive [, end-inclusive]]] ) returns: selection object.
48 |返回Index中的selection对象。该对象基于 min-key、max-key、ascent或descent顺序、start-inclusive、end-inclusive条件。默认值为:
49 |示例:
54 | var sel = index.select(minVal, maxVal, true);
55 | for( var obj in sel ) { ... }
从index对象中移除所有项。
一次又一次地当我需要在脚本中定义一些CSS时，我感觉到我自己不是很舒服的。 – CSS和JavaScript/TIScript使用不同的语法。
15 |考虑下JavaScript中的这样的代码:
16 |
17 | function switchState()
18 | {
19 | element.style.backgroundColor = "rgb(126,0,0)";
20 | element.style.transform = "rotate(45deg) translate(10px,10px)";
21 | }
22 |
23 | 这样的代码不是很美观，而且解析起来也不是很有效。
24 |而且，如果你想从样式中获取当前的旋转角度, 然后对它增加一些值，然后再回写它，则你需要先解析这个样式值中的CSS规则，计算后又转换成字符串设置回去。
25 |我已经研究过许多JS框架是如何与CSS协同工作 – 在它们的代码里大部分是在解析CSS代码。
26 |然而浏览器已经解析过CSS，并且已经创建好了内部数据结构用于展示CSS值。 这样的代码以及在这里了，为什么我们不复用它们?
27 |处理这个问题的方法之一是将CSS内部数据使用所谓的CSSOM模型暴露出来。但是这是需要很多工作量，而且结果依然不是很简洁。
28 |理想的方式应该是这样的:
29 |
30 | function switchState()
31 | {
32 | element.style.set {
33 | background-color: rgb(126,0,0),
34 | transform: rotate(45deg) translate(10px,10px)
35 | }
36 | }
37 |
38 | 而且原则上，JS语法可以扩展支持这样的创建方式，而且不会与已存在的代码冲突:
39 |background-color。45deg、10px这样的单位。这需要在JS中添加新的数据类型，不过这对他们来说是得心应手的。rotate(45deg)不是一个函数调用，而是一个元组(有名称的数据结构)。在TIScript中它可以写成[rotate:45deg] – 一个包含‘rotate’标签的元素元组。
45 | { transform: rotate(45deg) translate(10px,10px) }
46 |
47 | 将等价于:
48 |
49 | { transform:[rotate(45deg), translate(10px,10px)] }
50 |
51 | 这样写是不是非常棒？
实际上，CSS语法(有时候看起来可能非常乱)确实是使用两种类型的列表和一个tuple<2> (优先顺序):
54 |background: url(1.png),url(2.png);background: no-repeat url(1.png);font: 12pt 10pt/14pt "arial";不过，这些都是下一阶段要做的事，目前我将尝试为值添加单位，以及空白符分隔的列表...
60 |该行为处理<frame|pager>和<frame type=pager>元素的相关功能。
9 |pager实现了打印和打印预览功能。
10 |该行为可以被应用到任何块元素上。
11 |默认情况下，拥有behavior:pager行为的元素有:
13 |<frame|pager> - 页面打印预览的容器;在文档加载完成后，<frame|pager>元素将会有一些<pagebox>子元素，它们的数量由cols和rows属性定义:
<frame|pager cols=2> 18 | <pagebox/> 19 | <pagebox/> 20 | </frame> 21 |22 |
每个<pagebox/>元素渲染它自己要打印的页面的模板实例。
23 |<frame>元素中有特定含义的属性:
25 |src="url" - 可选, 加载到frame中的文档URL;page-template="url" - 可选, 页面模板文档的URL;cols="number" 和 rows="number" - 者两个属性定义打印预览时的<pagebox>(页面盒)的数量。"paginationstart" 事件 - 在分页时的第一步触发事件。这时要打印的文档刚加载完成;"paginationpage" 事件 - 在打印每个页面时触发该事件。event.reason是页号 - 1...N;"paginationend" 事件 - 在分页时的最后一步触发事件。这时待打印页数已经知道，并且通过event.reason字段来报告。N/A
55 |var pager = $(frame#pager);
57 |
58 | pager.on("paginationstart", function() {...});
59 | pager.on("paginationend", function(evt) { var npages = evt.reason; ...});
60 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/content/behaviors/select-checkmarks.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 有复选状态的<select multiple>列表。原则上它可以被应用到任何元素上。
8 |默认情况下，应用了该行为的元素有:
10 |<select size="2...N" multiple="checkmarks"></select><select|list multiple="checkmarks"></select>与behavior:select行为相同。
28 |被选择项被设置了:checked状态标志，因此可以在CSS中使用:checked伪类来设置选择状态项的样式:
select > option:checked { background-image: url(my-checkmark.png); }
30 |
31 | 当用户在选择option元素的标记(foreground-image)上点击时behavior:select-checkmarks行为切换option的:checked状态。
32 |该行为需要知道的属性:
34 |size=integer - 列表中可见元素的数量。注意：select元素的高度可以被CSS覆盖掉。name="name" - 标准的name属性 - from表单上一个input元素的名称。novalue="text" - 如果select中没有使用<option selected>初始化它，则将会使用该显示该文本。除了标准事件集(鼠标、按键、聚焦)外，该行为还生成:
40 |N/A - 该行为没有引入任何特有的方法。
45 |value数组, 读/写属性, 选择项的列表。
47 |onValueChanged事件var btn = $(select#some);
50 | btn.onValueChanged = function() { var v = this.value; ... }
51 |
52 | on()订阅var btn = $(select#some);
54 | btn.on("change", function() { ... 事件处理代码 ... });
55 | self.on("change", "select#some", function() { ... 事件处理代码 ... });
56 |
57 | include "decorators.tis"; 59 | @change @on "select#some" :: ... 事件处理代码 ...; 60 |61 | 62 | -------------------------------------------------------------------------------- /scripts/toc.tis: -------------------------------------------------------------------------------- 1 | var last_tree; 2 | 3 | function makeToc( content, list ) 4 | { 5 | //stdout.$n(toc!); 6 | function makeTree() 7 | { 8 | var tree = []; 9 | var sect = null; 10 | function sc(el) 11 | { 12 | //stdout.$n(tag {el.tag}); 13 | if(el.tag == "h2") { if(sect) tree.push(sect); sect = {caption: el.text, target: el, items:[] }; } 14 | else if(sect) { sect.items.push({ caption: el.text, target: el }); } 15 | } 16 | //stdout.$n(content.select); 17 | content.select(sc, "h2, td:first-child em, dt"); 18 | if(sect) tree.push(sect); 19 | return tree; 20 | } 21 | 22 | function onItemClick() 23 | { 24 | this.target.attributes#highlighted = true; 25 | this.target.scrollToView(true); 26 | } 27 | 28 | function showTree(tree) 29 | { 30 | last_tree = tree; 31 | 32 | list.clear(); 33 | for(var sect in tree) 34 | { 35 | if( !sect.items ) continue; 36 | var s = new Element("ul"); list.insert(s); 37 | var cap = new Element("caption", sect.caption); s.insert(cap); cap.target = sect.target; cap.onClick = onItemClick; 38 | sect.items.sort( :i1,i2: i1.caption < i2.caption? -1:1 ); 39 | for(var item in sect.items) 40 | { 41 | var li = new Element("li", item.caption ); 42 | s.insert(li); 43 | li.target = item.target; 44 | li.onClick = onItemClick; 45 | } 46 | } 47 | } 48 | showTree(makeTree()); 49 | 50 | /* function saveTree() 51 | { 52 | var sect_id; 53 | for(var sect in last_tree) 54 | { 55 | if( !sect.items ) continue; 56 | //var s = new Element("ul"); list.insert(s); 57 | //var cap = new Element("caption", sect.caption); s.insert(cap); cap.target = sect.target; cap.onClick = onItemClick; 58 | //sect.items.sort( :i1,i2: i1.caption < i2.caption? -1:1 ); 59 | 60 | sect_id = sect.caption; 61 | 62 | for(var item in sect.items) 63 | { 64 | var id = sect_id + "-" + item.caption; 65 | var cn; 66 | if(var content = item.target.next) 67 | cn = content.html; 68 | stdout.println(id,cn); 69 | } 70 | } 71 | } 72 | saveTree(last_tree);*/ 73 | } 74 | 75 | function goTocSection(section) 76 | { 77 | for(var sect in last_tree) 78 | { 79 | if( !sect.items ) continue; 80 | 81 | for(var obj_subsect in sect.items) 82 | { 83 | if(obj_subsect.caption==section) 84 | { 85 | obj_subsect.target.attributes#highlighted = true; 86 | obj_subsect.target.scrollToView(true); 87 | return; 88 | } 89 | } 90 | } 91 | } -------------------------------------------------------------------------------- /content/sciter/Attributes.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
代表DOM 元素 的属性。
8 |为了访问元素的属性集合，请使用它的attributes属性：element.attributes。
9 |元素属性的循环执行体。name遍历是属性的名称。
返回索引在index位置上的属性名称。Index基于0。
清除元素的所有属性。
从属性集合中移除attr属性。Attr参数这里可以是字符串 (属性的名称)也可以是整数(基于0的属性索引)。
在属性集合中如果存在attr则返回true。Attr参数这里可以是字符串 (属性的名称)也可以是整数(基于0的属性索引)。
为元素的class属性添加className1..classNameN类名称。
从元素的class属性中移除className1..classNameN类名称。
添加或移除class属性。如果on被设置true则是添加class，如果on被设置false则是移除class。如果on参数未提供时，没有className则添加，否则移除。
如果该元素已经定义了className，则返回true。
来自AngularJS文档 :
12 |13 |在高层次上, 指令是DOM元素上的一个标记(比如一个属性、元素名、注释或CSS类), 它指示AngularJS的HTML编译器($compile)以在该DOM元素上添加特定的行为(比如事件监听器), 或改变DOM元素和它的子元素。
下面是一个典型的AngularJS指令的实现:
14 |app.directive('myCustomer', function() {
15 | return {
16 | template: 'Name: {{name}} Address: {{address}}', // 内容
17 | scope: { name:"", address:"" }, // 内部数据模型
18 | link: function(scope, elem, attrs) { // 初始化
19 | elem.bind('click', function() { ... });
20 | elem.bind('dblclick', function() { ... });
21 | }
22 | };
23 | });
24 | 它的含义是：每个<my-customer>元素都将拥有
Name: ... Address: ... 内容;在Sciter中，声明从代码到元素的绑定是通过CSS中的prototype属性来完成的:
my-customer {
33 | prototype: MyCustomer url(my-customer.tis);
34 | display: block;
35 | ...
36 | }
37 | 有了上面的声明后，在HTML文本中的所有<my-customer>元素都将渲染成块元素，并且将MyCustomer类绑定到元素上。这个类将从my-customer.tis文件中加载(如果它尚未加载的话):
class MyCustomer : Element
39 | {
40 | function attached() // 当元素绑定到这个类时被调用 - 相当于Angular中的"link"
41 | {
42 | // 内容初始化:
43 | this.$content(Name: <output.name/> Address: <output.address/>);
44 | }
45 | // 事件处理器:
46 | event click { ... /* 这里的'this'指绑定的dom元素 */ }
47 | event dblclick { ... }
48 | }
49 | 因为行为是通过CSS赋值的，所以你可以使用任意的CSS选择器来将类绑定到DOM元素上。
50 |另一种绑定代码到元素上的方式是使用所谓的切面(aspect). 切面(Aspect)在这里是一个脚本函数，它在CSS选择器第一次匹配到元素时被执行:
52 |[collapsible] { aspect: Collapsible url(my-aspects.tis); }
53 | [collapsible]:collapsed > :last-child { display:none; } // 当折叠后，最后一个子元素将不可见
54 | 其中，Collapsible是一个普通的函数，它处理元素的点击事件以及触发:collapsed状态标志的切换:
function Collapsible() {
56 | this << event click {
57 | if( this.state.collapsed ) this.state.expanded = true;
58 | else this.state.collapsed = true;
59 | }
60 | }
61 | 有了上面的声明后，我们可以定义可折叠的元素:
62 |<div collapsible> 63 | click here to see content 64 | <p>Content</p> 65 | </div>66 |
这样你就可以在你的代码中可以有多个可折叠节，而你仅需要在它之上添加“collapsible”属性即可。
67 | 68 | -------------------------------------------------------------------------------- /core/csss!-calc-function.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |calc(<表达式>)函数可以用在接受长度值的任何位置。括号中的表达式会计算为em长度单位。在h-smile中calc()中的表达式将会被CSSS!求值引擎解释，它可以使用CSSS!特性的一个限制子集。在表达式中你可以访问DOM属性和元素的状态，请使用下面的语句:
10 |self.attribute - 访问元素的DOM属性。self:state-flag - 访问DOM元素的运行期状态标志: hover、active、focus等。其中，self是调用calc()函数的元素引用。
下面是为calc()函数中的CSSS!定义的方法集:
[element.]children() - integer, 返回元素的子元素数量。[element.]child(n:integer) - DOM元素, 返回在n位置的子元素。n是一个范围在1..children()间的正数。[element.]next() - DOM元素, 返回当前元素的下一个兄弟元素。[element.]previous() - DOM元素, 返回当前元素的上一个兄弟元素。[element.]parent() - DOM元素, 返回当前元素的父元素。element.$( selector ) - 返回满足选择的元素集合。这个返回只会检索element的子元素。selector中的:root伪类匹配element元素。示例: self.$(:root > li):expanded = true将仅会为self的直接li子元素设置expanded状态。element.$1( selector ) - 同上，区别是仅返回一个满足选择器的元素。element.$p( selector ) - 返回匹配selector的element元素的父元素集。selector中的:root是全局的DOM根元素。element.$1p( selector ) - 返回匹配selector的最近父元素。selector中的:root是全局的DOM根元素。[element.]text-width("string") - 返回当前样式下的element元素的string字符串的像素宽度。[element.]min-intrinsic-width(), [element.]max-intrinsic-width() - 元素的内在宽度。[element.]min-intrinsic-height(), [element.]max-intrinsic-height() - 元素的内在高度。[element.]system-scrollbar-width(),[element.]system-scrollbar-height() - 系统中垂直/水平滚动条的宽度/高度。[element.]system-border-width() - 系统形状的输入元素的边框宽度。[element.]system-small-icon-width(),[element.]system-small-icon-height() - 宿主系统使用的小图标尺寸。[element.]foreground-image-width(),[element.]foreground-image-height() - 为element元素定义的前景图像(如果存在)的物理尺寸。[element.]background-image-width(),[element.]background-image-height() - 为element元素定义的背景图像(如果存在)的物理尺寸。代表非元素DOM节点：文本 或 注释。
8 |创建一个文本DOM节点。
创建一个注释DOM节点。
创建一个元素节点。等价于new Element(...)。
返回节点的文本表示形式的字符串。
返回一个该节点的拷贝。新节点不与DOM连接。
将node节点插入到DOM中该元素之前。
将node节点插入到DOM中该元素之后。
从它的父节点容器中移除该节点。调用该方法后，该节点的parent将会变成null。
从它的父节点容器中移除该节点。调用该方法后，该节点的parent将会变成null。
返回this与other节点的公共父节点。
该对象可用于对请求添加其他处理。注意它是可以"then able"的类似promise的对象，即它也可以使用await。
Request.requestedDataType属性的返回值
view.request()产生的请求是这个类型;view.request()方法的output参数。当做从服务端返回的数据来履行请求。
当做服务端返回数据失败来拒绝请求。
订阅这个请求上的success、failure事件。
54 |其中:
55 | 56 |function onSuccess(data, status) - 接收响应数据和状态码;function onFailure(err) - 失败时返回一个Error对象实例。两个方法被调用时，this被设置为该请求对象。
61 |订阅failure的回调函数。
66 |订阅completion事件的回调函数，即不管请求处理成功或失败都会调用它。
该文章在Sciter2以上的behavior:richtext行为中有效。
15 | behavior:richtext行为时Sciter中<richtext>元素和Web浏览器中的<div contenteditable>的背后行为。
Sciter1中的behavior:richtext使用“flat”DOM模型: div:element, paragraph:element, 这个默写与Windows中的RichTextBox类似。
17 | 不过在Sciter2中，新的behavior:richtext行为使用标准的DOM模型，它的HTML内容为: element:node, text:node, comment:node。
18 | 这个变化导致我需要重新思考插入位置的概念。
考虑下面的标记代码:
20 |<p>12<b>34</b><i>56</i></p> 21 |22 |
它的渲染结果如下:
23 |123456
24 |问题来了: 在这个段落中有多少个插入位置?
25 |所有已知的内如可编辑实现都会给出这里有7个插入位置: 1前, 1和2之间, … 7后。所以他们都遵循了如Word或其他的所见即所得编辑工具的规范。
26 |现在，考虑下这个任务, 将"AB"文本插入到段落中‘4’和‘5’之间，这时结果可能有以下几种:
27 |<b>内部: 1234AB56, 12<b>34AB</b><i>56</i>;<i>内部: 1234AB56 12<b>34</b><i>AB56</i><p>;<b>和<i>之间: 1234AB56 12<b>34</b>AB<i>56</i>;问题正如我们所见: 一个(视觉)插入位置实际上最起码有3个(物理)DOM插入位置。
33 |这是所见即所得编辑器实现的典型问题。在flat模型中，文本只是一个"样式化字符"的序列，所以这个问题不是一个主要问题。不过在HTML的所见即所得编辑器中，这个问题必须要想办法解决。
34 |在Sciter1中，我使用了"有方向"的插入位置 – 物理插入位置取决于当前光标到达该插入位置的方向:
35 |<b>3|4|</b><i>5|6|</i><b>|3|4</b><i>|5|6</i>这种处理方式覆盖了上面的问题#1和#2，但是问题#3依然没有覆盖。所以还需要想想办法。
40 |其实这个问题不仅仅是字符内部和跨文本才会出现，下面的这种情况也类似:
41 |<ul> 42 | <li>一</li> 43 | <li>二</li> 44 | </ul> 45 | <pre>一些代码</pre> 46 |47 |
这种情况下，如果你需要在列表的文本和<pre>块之间插入段落，你会怎么做:
48 |<ul> 49 | <li>一</li> 50 | <li>二</li> 51 | </ul> 52 | <p>一些文本</p> 53 | <pre>一些代码</pre> 54 |55 |
你可以在你的浏览器中试一下:
56 |一些代码62 |
从一开始，Sciter就支持将一个声明的脚本类附加到DOM元素上。
15 |如果你想使你的文档中的所有div.some-widget元素都拥有一些特别的行为(子类化), 你需要:
16 |1. 在脚本中声明
17 |class SomeWidget : Behavior {
18 | function attached() { ... } // 该方法中的'this'为子类化的DOM元素
19 | function detached() { ... }
20 | // ... SomeWidget特有的方法在这里指定
21 | }
22 | 2. 在CSS中声明
23 |div.some-widget { behavior:SomeWidget; }
24 | /* 或者，如果SomeWidget的声明在其他文件中: */
25 | div.some-widget { SomeWidget url(some-widget.tis); }
26 | 在上面的声明中，所有的有class=”some-widget”的div都将被附加了SomeWidget类。这个机制我已经在8年前讲过了。
27 |这个机制是很可靠的，也是非常方便的。
28 |behaviors/prototypes的唯一问题是 – 在给定时刻，一个DOM元素只能有一个脚本类。JavaScript和TIScript都不支持多层继承。
29 |设想一下，在脚本中，你有多个函数要为某些DOM元素指定一些特定的功能。
30 | 或者说，每个这样的函数添加到被调用的DOM元素自己的aspect (部分功能)。类似下面:
function addClickHandlerFor(element) {
32 | // 通过html中的"click"元素的属性添加onClick处理器
33 | element.on("click", function() {
34 | var attrClick = element.attributes["click"];
35 | element.eval(attrClick); // 对表达式进行求值
36 | });
37 | }
38 | 你可以有一个这样的函数集来配置不同的元素/行为的aspect。
39 |上面的流程是原则上的，不过你可能需要为你需要这样配置的元素显示的调用这些函数，同时不用忘了为动态创建的内容调用它们。
40 |考虑上面的这些情况，我为Sciter引入了特有的CSS属性——‘aspect’。
41 |aspect CSS property它的声明为
43 |44 | aspect: "函数名" [ url(of-function-implementation-file) ]; 45 |46 |
其中，"函数名"是一个“aspect”函数的全名，指为DOM元素配置/装载额外功能的函数。 其中的url()是定义该函数的文件名。
aspect处理原则:
48 |“aspect”函数时一个普通的tiscript脚本函数。
49 |this变量指向满足CSS规则的DOM元素。同时, aspect属性使用非标准的继承性 – 如果元素有多个CSS匹配规则中都定义了aspect，则该元素所使用的aspect是所有这些规则定义的aspect列表。因此，如果你有下面的规则 (来自Plus引擎的示例):
54 |[click] { aspect:"Plus.Click"; }
55 | [dblclick] { aspect:"Plus.DblClick"; }
56 |
57 | 同时，元素在html标志中的定义如下：
58 |<b id="clickable" click="..." dblclick="...">text</b>59 |
它将拥有两个调用函数 – Plus.Click() 和 Plus.DblClick()。等同于下面的CSS定义:
#clickable { aspect:"Plus.Click" "Plus.DblClick"; }
61 |
62 | 这个aspect机制在Sciter SDK中的Plus ( /samples/+plus/ ) 和 Lang ( /samples/+lang/ )引擎中已经在使用了。
63 | Plus提供了类似AngularJS的声明式数据绑定功能。Lang提供了对i18n的支持。
该行为处理<frame>/<iframe>(宿主文档中的子文档容器)元素的扩展功能。
8 |该行为可以应用到任何块级元素上, 如：<div>、<section>。
9 |默认情况下，应用了该行为的元素有:
11 |<frame> - 块级文档容器;<iframe> - 行内块文档容器。Sciter中, <frame>是一个普通的DOM元素，它可以出现在任何其他块元素可出现的地方，而不仅仅是作为<frameset>的子元素。
<frame>元素初始时可以有任何子元素，这方面<frame>和<div>、<section>没有什么区别。
17 |<frame> 18 | <p>Select document to load</p> 19 | </frame> 20 |21 |
在<frame>加载完子文档(由于src的处理 或 调用了.load()方法)后，frame将只有一个子元素 —— 加载文档根元素, 如<html>。
<frame>和加载的文档:
23 |<frame> 24 | <html> 25 | <head>...</head> 26 | <body>...</body> 27 | </html> 28 | </form> 29 |30 |
若脚本需要访问子文档，可以使用frame[0]来获取frame的第一个根元素 - 子文档的根元素:
31 |var frm = $(frame#main);
32 | var childDoc = frm[0];
33 | var someBtn = childDoc.$("button#some");
34 | ...
35 |
36 | 该行为需要知道的属性:
38 |src="url" - 可选, 加载到frame的文档的URL;content-style="url" - 可选, 应用到加载文档的.css文件的URL。 该属性用于宿主文档需要给子文档应用一些特定样式时。:busy - 该标志表示文档正在加载。它可用于设置"文档加载中..."的样式。N/A
62 |var frame = $(frame#some);
64 | btn.onControlEvent = function(evt)
65 | {
66 | switch(evt.type) {
67 | case Event.DOCUMENT_CREATED: /* evt.target 是一个文档 */ break;
68 | case Event.DOCUMENT_COMPLETE: /* evt.target 是一个文档 */ break;
69 | }
70 | }
71 |
72 | event complete $(frame#some) { ... 事件处理代码 ... }
74 |
75 |
76 |
--------------------------------------------------------------------------------
/core/Drag-and-Drop.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 据我所知，有两种不同的拖拽(drag-n-drop)机制:
11 |我已经为Sciter添加支持了后一种拖拽操作 – DOM元素的局部拖拽。详细内容见这里。
16 |请考虑下的这个任务:
17 |下面的两个select元素:
18 |<select id="source" size="5"> 19 | <option>一<</option> 20 | <option>二<</option> 21 | <option>三<</option> 22 | </select> 23 | <select id="destination" size="5"></select>24 |
如果我们要让它们支持将<option>元素从#source中拖拽到#destination，对于htmlayout或the Sciter(都是基于h-smile core)，可以写下以下代码:
25 |
26 | select#source > option
27 | {
28 | dragging: only-move; /* 这里我们只能移动option元素 */
29 | }
30 | select#destination
31 | {
32 | accept-drag: selector( select#source > option );
33 | /* 我们只接受select#source中的option元素 */
34 | drop: append;
35 | /* option的顺序不是相关联的，新元素总是添加到最后 */
36 | }
37 |
38 | 这样就可以讲option元素从第一个<select>中拖拽到第二个。
39 |但是一个好的UI设计的主要原则是什么 – “discoverability”? 当拖拽时应该有一个视觉线索: 用户什么时候以及哪里可以进行拖拽。下面的伪类将会帮助我们处理这种情况:
40 |
41 | option:moving /* 正在移动(拖拽)的option */
42 | {
43 | background:blue; color:white;
44 | opacity:0.5;
45 | }
46 |
47 | select:drop-target /* 当前激活的拖拽目标元素 */
48 | {
49 | background: yellow;
50 | /* 在拖拽(D&D)操作开始后，所有可用的拖拽目标元素将会高亮显示成黄色 */
51 | }
52 |
53 | select:drag-over /* 拖拽项当前悬停的拖拽目标元素*/
54 | {
55 | outline: 1px solid green;
56 | /* 在当前鼠标位置的拖拽目标元素显示绿色的轮廓
57 | 被拖拽元素可以放置在这个目标元素上 */
58 | }
59 |
60 |
61 | 以上是在我们的程序中添加拖拽功能所要做的所有事情。
62 |哦, 还有一条: 如果需要进行双向拖拽，那我们要怎么做 – 从#destination拖拽到#source? 方法是一样的:
63 |
64 |
65 | select#destination > option
66 | {
67 | dragging: only-move;
68 | }
69 |
70 | select#source
71 | {
72 | accept-drag: selector( select#destination > option );
73 | drop: append;
74 | }
75 |
76 | 还有一小块内容: 若将声明了drop:recycle的元素作为拖拽目标，则放置在它声明的元素都将会被删除掉。
DataSocket使用命名管道(windows)或TCP/IP协议Socket在相同机器("localhost"地址)或线连接的两个Sciter进程间进行双向数据交互。DataSocket支持服务端监听(DataSocket.listen())和客户端Socket(DataSocket.connect())。
DataSocket发送/接收的数据为序列化的二进制格式 - 通过socket.send(data)发送数据，以及通过socket.on("receive", function(data) {})在其他端接收数据。所以可能需要额外的"字符串化/解析"处理。
(name: string [, port: integer] ) : DataSocket
16 |客户端DataSocket的创建方法。返回一个新的处于连接状态的socket。如果指定了port参数，则name被认为是通过TCP/IP连接时的域名或地址，否则name被认为是命名管道的名称(或局域网socket)。
( acceptor: function, name: string [, port: integer] ) : DataSocket
20 |服务端DataSocket的创建方法。返回一个新的处于监听状态的socket。如果指定了port参数，则name被认为是通过TCP/IP连接时的域名或地址。
21 |acceptor函数在每个新连接请求到达服务端是调用。该函数的签名:
22 |function acceptor( connectionSocket: DataSocket ) : true | false23 |
其中：connectionSocket是用于与远程通信的另一个DataSocket示例。
24 |若要接受和使用这个连接，你必须返回true。
( event: string, callback: function ) : this
28 |将下面的Socket事件之一绑定到callback回调函数:
29 |function(), socket连接到主机;function(data:any), 已经接收到数据;function(), 上一次send()操作完成;function(err: Error), 发生错误, 错误对象会传递给该回调函数;function(), socket被关闭;这些事件名称可以包含".namespace"名称空间。它被用在.off()函数中。
( event: string | callback: function ) : this
39 |根据事件名或回调函数来解除事件绑定。
40 |事件名可以只包含名称空间部分。所以这样的代码socket.off(".namespace") 将会解除所以设置了该名称空间的事件绑定。
( data: any )
44 |该方法用于将数据发送到远程端。data可以为任何可序列化的数据类型(对象、数字、字符串、数组等)。
( )
48 |关闭socket。
我正在使用libuv库来重构现在的异步I/O代码，这将包括修改现有功能以及添加新功能。
12 |它包含:
14 |新增的函数:
24 |变更的函数:
46 |移除的函数:
50 |该行为提供视频播放功能。
10 |默认情况下，应用了behavior:button行为的元素有:
12 |<video> - video元素;该行为需要知道的属性:
16 |除了标准事件集(鼠标、按键、聚焦)外，该行为还生成以下事件(这些事件会传递到onControlEvent回调函数中):
59 |N/A, 该行为没有实现value值。
67 | 68 | -------------------------------------------------------------------------------- /core/visibility-none-article.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |在基于HTML/CSS的UI中，我们经常需要在运行期隐藏/显示一些元素。
8 |最普遍的可能(也是最差的)的解决方法是以编程方式设置CSS属性display:none。
这个方法乍一看好像非常简单，但实际上它只解决了一半的问题——隐藏元素——从视图树上移除这个元素。但是，当你需要显示之前隐藏的元素时，你又该怎么做呢? 设置它为display:block不是一个正确的方法。在HTML中不是所有的元素都是display:block模型。 <img>、<input>//<select>、<textarea>等是display:inline-block模型。 <table>和它的所有子元素都是特殊的display:table**** 模型。设置它们为display:block将会导致出现非常奇怪的结果。
因此，为了在运行期使用display:none，你需要知道这个元素的display原始值，这不是很方便且不易维护。设想当你的web设计器打算通过声明display: table-cell来摆放一些元素时，如果你是通过 display: none <-> block开关来控制元素的隐藏/显示时，这时你会遇到问题。
例如，为了克服这样的问题，jQuery通过将display值存储在一个名为"olddisplay"的属性方式实现了它的hide()方法(参见: http://robflaherty.github.io/jquery-annotated-source/docs/13-effects.html#section-6 )，当你需要重新显示这个元素时，jQuery从这个属性恢复display值。因某些很明显的原因，这个方法也不是很理想。
更好的办法是使用"hidden"属性。所以当你需要隐藏元素时，不是设置CSS属性element.style.display，而是为元素添加DOM属性"hidden"，当需要显示元素时，移除"hidden"属性。为了使这个属性有效，你只需在你的样式表中添加一个简单的规则:
14 |[hidden] { display:none !important; }
15 |
16 | 如果某些元素需要默认隐藏，你需要在你的标记代码中添加hidden属性，如:
<button id="ok-button" hidden>OK</button> 18 |19 |
在Sciter中，你可以为所有的DOM元素定义一些虚拟的属性, 如"shown":
20 |/* 要保证下面的代码有效，CSS中必须有[hidden] { display:none } 规则 */
21 | property Element.shown(v)
22 | {
23 | get return this.style#display != "none";
24 | set this.attributes["hidden"] = v ? undefined : true;
25 | }
26 |
27 | 并且这样使用它：
28 |var someEl = ...30 |
someEl.shown = true; // 显示
someEl.shown = false; // 隐藏 29 |
这个解决办法有个不明显的缺点:
31 |[hidden] { display:none; }规则;从Sciter 3.1.0.15版本开始，你可以在你的CSS中使用visibility:none;来排除某个元素的渲染。它与display:none;有相同的效果。
visibility属性可以使你不用使用dsiplay属性，安全地设置"none"和"visible"值来达到显示/隐藏元素的效果。
37 |因此, Sciter中，visibility属性可以接受以下值:
38 |下面是上面定义的脚本属性shown的修改版本:
44 |property Element.shown(v)
45 | {
46 | get return this.isVisible;
47 | set this.style#visibility = v ? "visible" : "none";
48 | }
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/content/behaviors/decimal.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 浮点(float)数字输入元素行为。该行为可以被应用到任何合适的元素。
9 |默认情况下，应用了该行为的元素有:
11 |<input type="decimal" /> - 行内浮点(float)类型输入元素初始化该行为时会创建下面的DOM结构:
20 |<input>
21 | <caption>
22 | <button.plus>
23 | <button.minus>
24 | </input>
25 |
26 | 其中，<caption>将拥有相应过滤器的behavior:edit行为。如果input定义了step属性，则将会创建<button.plus>/<button.minus>子元素。
所有的子元素将拥有:synthetic状态标志。
该行为需要知道的属性:
30 |value=float - 元素的初始值。min=float - 允许的最小值，注：Sciter并不会限制输入的大小，当value小于min时，输入框会处于:invalid状态。max=float - 允许的最大值，注：Sciter并不会限制输入的大小，当value小于min时，输入框会处于:invalid状态。step=float - 递增/减的步长。如果该属性被定义，该行为将会创建 -/+ 按钮。novalue="text" - 当输入框为空时显示的文本。你可以使用CSS选择器:empty来设置这个状态时的样式。readonly - 声明该元素是只读的。除了标准事件集(鼠标、按键、聚焦)外，该行为还生成:
39 |float or undefined, 反应内部输入缓冲区的当前状态。
53 |dir属性时，这个组合键用来在dir="ltr"和切换dir="rtl"间切换。N/A - 该行为没有引入任何特有的方法，但是<caption>子元素拥有behavior:edit行为的特有方法。
69 |整数(integer)数字输入元素行为。该行为可以被应用到任何合适的元素。
9 |默认情况下，应用了该行为的元素有:
11 |<input type="integer" /> - 行内整数(integer)类型输入元素初始化该行为时会创建下面的DOM结构:
20 |<input>
21 | <caption>
22 | <button.plus>
23 | <button.minus>
24 | </input>
25 |
26 | 其中，<caption>将拥有相应过滤器的behavior:edit行为。如果input定义了step属性，则将会创建<button.plus>/<button.minus>子元素。
所有的子元素将拥有:synthetic状态标志。
该行为需要知道的属性:
30 |value=integer - 元素的初始值。min=integer - 允许的最小值，注：Sciter并不会限制输入的大小，当value小于min时，输入框会处于:invalid状态。max=integer - 允许的最大值，注：Sciter并不会限制输入的大小，当value大于max时，输入框会处于:invalid状态。step=integer - 递增/减的步长。如果该属性被定义，该行为将会创建 -/+ 按钮。novalue="text" - 当输入框为空时显示的文本。你可以使用CSS选择器:empty来设置这个状态时的样式。readonly - 声明该元素是只读的。除了标准事件集(鼠标、按键、聚焦)外，该行为还生成:
39 |integer or undefined, 反应内部输入缓冲区的当前状态。
53 |dir属性时，这个组合键用来在dir="ltr"和切换dir="rtl"间切换。N/A - 该行为没有引入任何特有的方法，但是<caption>子元素拥有behavior:edit行为的特有方法。
69 |现在，有很多JavaScript框架提供了数据绑定工具(如Knockout、AngularJS等)。
11 |它们基于一种MVC概念: 你有一些数据(M)(结构、模型), 视图(V)展示html中的数据，在模型和视图间还有一些名为控制器(C)的代码来控制它们间的交互。
12 |基于上面所说的概念设计的那些框架确实是挺成功/方便的，不过，对我来说它们又是太侵入性了。在一些视图/页面上使用MVC是可以理解的，但是在一些其他的解决方案里MVC看起来太丑陋了。
13 |不管怎样，这里给出了另一种可选方案…
14 |我们不是将数据结构和它的视图分离，而是创建一个新的东西，它既是数据模型也是它的视图。
15 |我将这个东西名称成Formation。Formation本质上是一个DOM元素的树形容器，这个容器可以复制数据的结构 (你也可以称它为模型)。Formation的值是JSON数据结构。
16 |考虑这个示例
17 |这里你可以看到input和子项的集合(顶部)。
18 | 在右下脚，你可以看到<section#inputs>创建的Formation树。
左边，你可以看到Formation的动态数据(可编辑的textarea)。这个这些数据会将它们反应到对应的DOM元素的状态上。同样，修改这些DOM元素也会反应到这些动态数据上。
20 |Formation的实现主要做了两件事情:
21 |formations支持两组自定义元素的关键字:
26 |当formation看到自定义DOM元素(Tag标签中包含‘-‘的任何DOM元素)，它尝试从jQuery插件的注册表中找到该元素的初始化器(著名的$.fn集合)，如果找到了则调用它。你可以检查js/jquery.list-input.js - 这是一个正常的jQuery插件，该插件匹配名称为“INPUT-LIST”的自定义元素。
27 |为了创建/获取一些容器的formation，你可以调用：
28 |[window.] formation( domel_or_$_wrapper ) 函数， 或$(selector).formation() 插件。你可以将创建的formation存储到一些变量中，并且通过它来访问DOM元素，这是一个非常有效的手段:
33 |var inputs = $("section#inputs").formation();
34 | $(inputs.firstName).on("change", function(){...});
35 |
36 | 直接访问formation的成员比通过jQuery选择器访问它们的速度更快，因为formation的成员直接是该元素的一个引用。
37 |你可以从这里下载完整示例来演示看看。
38 |Formation的未来计划: 实现所谓的repeatable formations, 这时，如果你有下面的标记代码:
39 |<ul repeatable name="stockItems"> 41 | <li><output name="name"> <output name="price" type="price"></li> 42 | </ul> 43 |44 |
则你可以通过下面的数据来反馈它(通过formation):
45 |[
46 | {name:"Apple", price: 1.05 },
47 | {name:"Orange", price: 0.52 }
48 | ]
49 |
50 | 它将会在ul列表中生成两个<li>元素。
51 |有另一种不鼓励的想法：将有class开关的作为一个Formation元素，请看下面的class声明:
52 |<div class="{someSwitch:collapsed|expanded}" >...</div>
53 |
54 | 将会是对应的formation有一个名称为“someSwitch”元素，该元素的值可以被设置false/true或0/1来改变class为<div class=”collapsed”>或<div class=”expanded”>。
55 |更新: 请看jQuery论坛的相关讨论: forum.jquery.com/topic/mvc-or-not-mvc-the-formation-engine
56 |整数(integer)或浮点(float)数字输入元素行为。该行为可以被应用到任何合适的元素。
9 |默认情况下，应用了该行为的元素有:
11 |<input type="number" /> - 行内整数(integer)或浮点(float)类型输入元素初始化该行为时会创建下面的DOM结构:
20 |<input>
21 | <caption>
22 | <button.plus>
23 | <button.minus>
24 | </input>
25 |
26 | 其中，<caption>将拥有相应过滤器的behavior:edit行为。如果input定义了step属性，则将会创建<button.plus>/<button.minus>子元素。
所有的子元素将拥有:synthetic状态标志。
该行为需要知道的属性:
30 |value=numeric - 元素的初始值。min=numeric - 允许的最小值，注：Sciter并不会限制输入的大小，当value小于min时，输入框会处于:invalid状态。max=numeric - 允许的最大值，注：Sciter并不会限制输入的大小，当value大于max时，输入框会处于:invalid状态。step=numeric - 递增/减的步长。如果该属性被定义，该行为将会创建 -/+ 按钮。novalue="text" - 当输入框为空时显示的文本。你可以使用CSS选择器:empty来设置这个状态时的样式。readonly - 声明该元素是只读的。除了标准事件集(鼠标、按键、聚焦)外，该行为还生成:
39 |float or integer or undefined, 反应内部输入缓冲区的当前状态。
53 |dir属性时，这个组合键用来在dir="ltr"和切换dir="rtl"间切换。N/A - 该行为没有引入任何特有的方法，但是<caption>子元素拥有behavior:edit行为的特有方法。
69 |Bytes是一个字节数组。
8 |( numBytes: integer )
24 |Bytes类型对象的构造函数 —— numBytes为Bytes的长度。
( [encoding:string] ) returns: string
28 |如果encoding未指定或是"base64"时，返回字节数组的base64编码格式的字符串。否则如果编码是IANA字符集列表http://www.iana.org/assignments/character-sets支持的一种，则返回对应的编码格式字符串。
29 |示例： var str = bytes.toString("UTF-8"); 返回UTF-8编码的字符串。
( str: string[, encoding:string] ) returns: Bytes
33 |静态方法, 从str字符串根据encoding编码创建一个Bytes对象(字节数组)。
34 |如果encoding未指定或是"base64"时，则认为是"base64"。否则如果编码是IANA字符集列表http://www.iana.org/assignments/character-sets支持的一种，则返回对应的编码格式字符串。
35 |示例：var bytes = Bytes.fromString("Привет, мир!", "utf-8"); 返回UTF-8编码的字符串。
( ) returns: string
39 |返回表示该字节数组的MD5的32个字符的字符串。
( ) returns: integer
43 |返回该字节数组的CRC32技术结果的整数值。
44 |比较两个Bytes对象的内容是否相等, 返回-1,0或1，其中当两个对象的内容相等时返回0。
保存字节数组到文件。如果文件已经存在，则覆盖。
静态方法。创建一个新的Bytes对象，并将filename文件加载到它，并返回该对象。
创建一个新的Bytes对象 - 原始字节数组的压缩版本。
创建一个新的Bytes对象, 恢复先前压缩的字节数组。如果数组之前为压缩则返回null。
Socket使用命名管道(windows)或TCP/IP协议Socket在相同机器("localhost"地址)或线连接的两个Sciter进程间进行双向数据交互。Socket支持服务端监听(Socket.listen())和客户端Socket(Socket.connect())。
Socket发送/接收的数据为序列化的二进制格式 - 你可以通过socket.send(data)发送数据，以及通过socket.on("receive", function(data) {})在其他端接收数据。
(name: string [, port: integer] ) : DataSocket
20 |客户端DataSocket的创建方法。返回一个新的处于连接状态的socket。如果指定了port参数，则name被认为是通过TCP/IP连接时的域名或地址，否则name被认为是命名管道的名称(或局域网socket)。
( acceptor: function, name: string [, port: integer] ) : DataSocket
24 |服务端DataSocket的创建方法。返回一个新的处于监听状态的socket。如果指定了port参数，则name被认为是通过TCP/IP连接时的域名或地址。
25 |acceptor函数在每个新连接请求到达服务端是调用。该函数的签名:
26 |function acceptor( connectionSocket: DataSocket ) : true | false27 |
其中：connectionSocket是用于与远程通信的另一个DataSocket示例。
28 |若要接受和使用这个连接，你必须返回true。
( event: string, callback: function ) : this
32 |将下面的Socket事件之一绑定到callback回调函数:
33 |function(), socket连接到主机;function(data:string), 已经接收到数据;function(), 上一次send()操作完成;function(err: Error), 发生错误, 错误对象会传递给该回调函数;function(), socket被关闭;这些事件名称可以包含".namespace"名称空间。它被用在.off()函数中。
( event: string | callback: function ) : this
43 |根据事件名或回调函数来解除事件绑定。
44 |事件名可以只包含名称空间部分。所以这样的代码socket.off(".namespace") 将会解除所以设置了该名称空间的事件绑定。
( event: string, callback: function ) : this
48 |与on()功能相同，但是订阅的回调函数只会执行一次( 回调函数将会在第一次调用只会被移除)。
( data: any )
52 |该方法用于将数据发送到远程端。data可以为任何可序列化的数据类型(对象、数字、字符串、数组等)。
( )
56 |关闭socket。
下面是一个九宫格图像的示例, 这个图片如下:
9 |
该图片扩展或作为下面的div元素的背景:
11 |
九宫格图像是一张位图图像，如png、jpeg 或 gif。Sciter为标准的background-repeat属性扩展了新值，用于声明九宫格图像，。同时可以通过background-position属性来定义原图像中的每一节如何渲染。
13 |正式的定义:
14 |background-repeat: expand [stretch-top] [stretch-bottom] [stretch-middle] [stretch-left] [stretch-right]; 15 | background-position: top right bottom left; 16 |17 |
其中:
18 |top、right、bottom、left是一个数字(图像像素数)，将图像分拆成9个区域，它们定义了图像拆分的这9个区域的宽度/高度外边距。这些区域将会被复制、平铺或者拉伸到目标区域上(见下面的说明);stretch-top、stretch-bottom、stretch-middle、stretch-left、stretch-right这几个值用于定义对应区域如何复制到目标部分上。例如，如果没有stretch-top, 则原图像顶部区域将被平铺到目标区域的该部分。而如果定义了stretch-top值，则原图像的顶部区域将被拉伸到目标区域的该部分。注意: background-repeat:expand图像将铺满元素的内边距内的所有区域。因此我们可以重用background-position属性来定义图像的每一部分如何渲染。
22 |下面是一个示例，它用于说明声明的图片如何扩展到<div>元素的目标区域。CSS定义如下:
24 | div
25 | {
26 | background-image:url(back.png);
27 | background-repeat:expand;
28 | background-position:14 14 14 14; /* 这个图像的所有"边框"部分都是14px宽 */
29 | padding:14px;
30 | height:100px;
31 | }
32 |
33 | 
这个示例使用的文档的所有HTML源代码为:
35 |<html>
36 | <head>
37 | <style>
38 | body { background-color: white white bisque bisque; margin:0; padding:20px; }
39 | div
40 | {
41 | background-image:url(back.png);
42 | background-repeat:expand;
43 | background-position:14 14 14 14;
44 | padding:14px;
45 | height:100px;
46 | }
47 | </style>
48 | </head>
49 | <body>
50 | <div>Hello world!</div>
51 | </body>
52 | </html>
53 |
54 | 这里有另一张图像，我们需要使它在水平方向上平铺，而在垂直方向上拉伸。源图像为:
56 |
该图像的渲染效果示例:
58 |
上面的效果的所有HTML文档源码为:
60 |<html>
61 | <head>
62 | <style>
63 | body { background-color: white white bisque bisque; margin:0; padding:20px; }
64 | button
65 | {
66 | background-image:url(back-stretch.png);
67 | background-repeat:expand stretch-left stretch-middle stretch-right;
68 | background-position:8 8 8 8;
69 | padding:10px;
70 | }
71 | </style>
72 | </head>
73 | <body>
74 | Buttons with custom shapes:
75 | <button>Small</button>,
76 | <button>Fairly big with<br/>multiline text</button> and
77 | <button>Even bigger<br/>because it has three<br/>lines of text</button>
78 | </body>
79 | </html>
80 |
81 |
82 |
--------------------------------------------------------------------------------
/content/script/Task.htm:
--------------------------------------------------------------------------------
1 |
2 |
3 | Task对象表示一个Task - 协同例程 - 一个可以在函数执行未完成之前中断并返回一个值的函数。当这个协同例程被再次调用时, 它将继续从上次的中断点处继续执行，且它的执行上下文环境保持不变。
9 |在Sciter中，有两种类型的协同例程:
10 |yield语句的普通的函数。await语句的普通函数。要创建一个生成器或异步任务，你可以在定义函数体时使用yield 或 await语句:
15 |异步任务:
16 |async function getRemoteData(url) { // 异步任务
17 | try {
18 | var data = await self.request(#get, url);
19 | return data;
20 | } catch (e) {
21 | return null;
22 | }
23 | }
24 |
25 | 生成器:
26 |function* listItemsBackward(list) { // 生成器任务
27 | for(var i = list.length - 1; i >= 0; --i)
28 | yield list[i];
29 | }
30 | // 使用生成器:
31 | var list = [0,1,2,3];
32 | for(var item in listItemsBackward(list))
33 | stdout.println(item);
34 |
35 | 要启动一个生成器或异步任务，你只需将它当做普通函数一样调用即可。它们与普通函数的唯一区别时：这些函数会立即完成并返回，但这不代表这个函数已经指向完成，而且它返回的是一个Task对象。
38 |返回的这个Task对象内部存储了这个函数，以及它的状态和'未来值' - 即这个值只有当await语句完成(异步任务)或再次调用它的next()方法时才有意义。
39 |异步Task对象有一个then()方法，它和Promise/A+规范一致，所以它可以被当做一个promise。例如，下面函数也是一个异步任务，它并行启动了两个task，并且等待它们的完成:
function getRemoteDataItems()
42 | {
43 | // 等待这两个请求处理完成:
44 | var items = promise.when( getRemoteData("http://example.com/api/v2/item1" ),
45 | getRemoteData("http://example.com/api/v2/item2" ));
46 | stdout.println(items[0],items[1]);
47 | }
48 |
49 | 添加onFulfilled和onRejected回调函数到task的回调列表。在task完成时会调用onFulfilled(result)或onRejected(error)。
59 |then()方法可以被异步任务例程调用
添加onRejected回调函数到task回调列表中。onRejected(error)将在task抛出错误时被调用。
catch()方法仅在异步task例程中被调用。
65 |等价于调用task.then(null, onRejected);。
添加onComplete回调函数到task回调列表中。onComplete(result | error)将在任务完成时被调用。
70 |finally()方法仅在异步task例程中被调用。
71 |等价于调用task.then(onComplete, onComplete);。
调用生成器函数，并且返回函数中yield语句的返回值。
76 |next()方法尽可以被生成器例程调用。
“静态”的意思是你提前知道你的UI语言，并且在运行期不会发生改变。
8 |假设你有下面这样的文档:
9 |<html>
10 | <head>
11 | <include src="lang:words.htm"/>
12 | </head>
13 | <body>
14 | <p>&hello; &world; !</p>
15 | </body>
16 | </html>并且还有两个entity表文件, words-en.htm :
18 |<!ENTITY hello "Hello">
19 | <!ENTITY world "World">和 words-zh.htm :
21 |<!ENTITY hello "你好">
22 | <!ENTITY world "世界">那么当加载这个主HTML文档时，你将在SCN_LOAD_DATA中接收到“lang:words.htm”的URL请求(见上面的<include>中的声明)。
24 | 对于这个请求的响应，你可以根据你的应用程序的需要觉得是返回“words-en.htm”或“words-zh.htm”的内容。
假设你有下面这样的文档:
27 |<html>
28 | <body>
29 | <p>
30 | <include src="lang:fragment:hello-world">Hello World</include>
31 | </p>
32 | </body>
33 | </html>
34 | 它使用<include>来请求HTML片段。正常情况下在这里你将只会看到“Hello World”。不过当你的
36 | 应用程序一旦处理SCN_LOAD_DATA / “lang:fragment:hello-world” 请求, 则你的响应内容将会自动替换<include>...</include>中的内容。
“动态”的意思是可以动态加载UI的翻译内容 – 即运行期可切换语言。
39 |假设你有下面这样的文档:
40 |<html lang="en">
41 | <head>
42 | <style>
43 | @import url(lang.css);
44 | </style>
45 | </head>
46 | <body>
47 | <p>
48 | <span class="hello-world">Hello World</span>
49 | </p>
50 | </body>
51 | </html>以及下面这样的lang.css内容
53 |span.hello-world:lang(en) { content:"Hello World"; }
54 | ...
55 | span.hello-world:lang(zh) { content:"你好，世界"; }
56 | ...那么当你切换<html lang=...>中lang属性的值时(在加载时或运行期)，你将看到span.hello-world中的内容会自动切换不同的语言。
dk/samples/+lang/目录中提供了一种脚本切换语言的脚本实现。 它使用了CSS aspect特性 – 为特定的DOM元素声明和绑定脚本代码。
60 |除了支持简单的文本翻译和替换，它还支持语言智能排版和多元化(pluralization)。
61 |原则上，你也可以混合使用上面说的所有方法。
63 |同时, 在某些情况下，你也可以考虑使用某种本地代码或脚本的预处理器。
64 |比如，像下面这样的文档:
65 |<html>
66 | <body>
67 | <p>%HELLO% %WORLD% !</p>
68 | </body>
69 | </html>这是一张很简单的预处理方式：通过本地代码在将内容提交给Sciter引擎之前，查找所有类似%HELLO%这样的字符串，并替换它。
在脚本中，你可以使用内置的预处理特性，比如像下面这样的代码:
72 |<html>
73 | <body>
74 | <p><% =words.hello %> <% =words.world %> !</p>
75 | </body>
76 | </html>预处理方式有一个共同的问题: 当需要替换html内容时，你需要替换整个html内容。而如果你使用实体(上面讲的第一种方式)时，你只需要下面这样的代码即可:
78 |el.html = "&hello; &world";
79 | 使用哪种方式取决于你的选择。第一种和第二种方式是最有效的，通常它们可以一起使用。
82 | 因为动态填充和切换语言这种场景并不是很普遍，即使遇到这种情况也可以通过特定的函数来处理。
树状结构的<select>列表行为。该行为可以被应用到任何块级容器元素上。
8 |默认情况下，应用了该行为的元素有:
10 |<select|tree></select>该行为识别两种类型的<option>:
30 |<option> 34 | <caption>Node标题</caption> 35 | <option>Leaf 1</option> 36 | <option>Leaf 2</option> 37 | </option> 38 |39 |
被选择项会被设置:current状态标志。
节点<option>在运行期会被设置:node标志(在CSS中可以使用:node伪类)。因此下面的CSS选择器:
option:node - 匹配所有节点option;option:not(:node) - 匹配所有的叶option.option:node在响应UI事件(鼠标和键盘事件)时可能包含:expanded或:collapsed运行时状态标志。
该行为支持"虚拟树"模式。初始时，该树的所有节点option可能都是折叠的，并且是空的。这些节点option只有当接收到ELEMENT_EXPANDED事件时才填充。并且在ELEMENT_COLLAPSED事件中清除以便用最小的内存展示树。见sdk/samples/ideas/virtual-tree/示例。
46 |expanded属性 - <option expanded>将会为该元素默认设置:expanded状态。除了标准事件集(鼠标、按键、聚焦)外，该行为还生成:
51 |N/A - 该行为没有引入任何特有的方法。
58 |any, 读/写属性。被选择项(option)的值。选择项(option)的值(value)。option的值是它的value属性或它的文本内容(如果未定义value属性时)。
60 |onControlEvent事件var btn = $(select#some);
63 | btn.onControlEvent = function(evt)
64 | {
65 | switch(evt.type) {
66 | case Event.SELECT_SELECTION_CHANGED: /* 当前option被改变 */ break;
67 | case Event.ELEMENT_EXPANDED: /* evt.target 为展开的元素 */ break;
68 | case Event.ELEMENT_COLLAPSED: /* evt.target 为折叠的元素 */ break;
}
69 | }
70 |
71 | on()订阅var sel = $(select#some);
73 | sel.on("change", function() { ... 事件处理代码 ... });
74 | sel.on("expand", "option", function() { ... 事件处理代码 ... });
75 | sel.on("collapse", "option", function() { ... 事件处理代码 ... });
76 |
77 | include "decorators.tis"; 79 | @when Event.ELEMENT_EXPANDED @on "select#some" :: ... 事件处理代码 ...; 80 | @when Event.ELEMENT_COLLAPSED @on "select#some" :: ... 事件处理代码 ...; 81 |82 | 83 | -------------------------------------------------------------------------------- /content/script/Function.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
脚本函数对象。
10 | 11 |([arg1:string [, arg2:string [, ... argN:string]],] functionBody:string)
39 |构造器, 编译函数体并创建它的函数对象。arg1... argN是该函数的正式参数名称，每个值必须是对应的有效的JavaScript标识符的字符串。
( thisObj: object [, p0:value, ... pN:value] ) : value
44 |调用设置到thisObj的this上下文中的该函数。
( thisObj: object [,p0:value, ... pN:value] [, argv:array] ) : value
49 |调用设置到thisObj的this上下文中的该函数。调用该函数的参数由p0 ... pN和argv数组的成员组成。因此实际的调用参数列表为: p0, ..., pN, argv[0], ... argv[N]。
检查tag属性是否存在。如果deep == true，则进行深查找——查找函数本身和它的子类链。
移除函数的tag(又名name)属性。
根据tag参数检索该对象中的成员/属性。它等价于obj.tag构造函数。
密封。锁定对象的结构——调用该方法后任何对该对象属性的新增或移除操作都将会抛出一个异常。已经存在的属性可以被修改。如果strict参数为true，则当访问未知属性是将会抛出一个异常。
如果对象被密封则返回true。如果strict为true则只有seal(true)时才返回true。
冻结。锁定对象 - 使该对象不可改变 - 该对象的任何的新增、移除和修改值操作都将会抛出一个异常。返回该对象本身。如果strict参数为true，则当访问未知属性是将会抛出一个异常。
如果对象被冻结则返回true。如果strict为true则只有freeze(true)时才返回true。
Sciter没有使用W3C DOM的DOM模型，因为我们发现它太复杂了(76个不同的类，真的！)。
9 |Sciter在脚本中提供了下面的DOM和Window相关的8个特定类：
11 |Sciter中View对象代表最顶层窗口。Sciter.exe程序的主窗口或者X-Sciter.dll沙箱窗口的客户区域就是视图(view)。对话框窗口也有视图对象与其关联。
24 |每个视图都有一个root 属性 - 指被加载的文档的根元素。在Sciter中，根元素是被加载文档的<html>元素，没有专门的文档(Document)类。 整个文档实际是一个元素树——<html>元素和它的子元素。
25 |框架和框架集也是普通的DOM元素。<frame>只有一个子元素——加载到它里面的文档的<html>元素。加载到frame中的文档的根元素的parent属性指向这个<frame>元素。这看起来很简单吧。
27 |在Sciter中，框架(<frame>)可以出现在HTML中的任何部分(不仅是在<frameset>)，所以在Sciter中<frame>和<iframe>没有区别。而且任何块元素(如<div>)都可以被当做<frame>来使用，只需要为它声明style="behavior:frame"。
28 |Element对象有load方法，该方法允许向内容区(重新)加载任何元素和使用<frame>指定的外部源——url或流(包括动态内存流)。所以在Sciter中块元素(如<div>)与框架没有多大区别。当你需要在同一屏幕中隔离不同的样式系统或脚本时可以考虑使用框架。
29 |相同的使用方法——<frameset>也是一个纯DOM元素，且可以出现在任何可接受块元素的地方。 <frameset>不仅可以包含<frame>元素，而且也可以任何块元素。因此在Sciter中，<frameset>是定义包含splitters的容器的一个便捷途径。而且任何块元素都可以变换成框架集，只需要在它的样式声明中指定behavior:frameset行为。
30 |Sciter只能解析tiscript脚本片段和文件。若要在文档中包含脚本块，需要使用下面的元素：
32 |<script type="text/tiscript" src="脚本文件的url" />33 |
或者内联的脚本块:
34 |<script type="text/tiscript"> 35 | // 脚本语句.. 36 | </script> 37 |38 |
文档会为脚本的执行建立名称空间。所有的类和函数定义方式如下：
40 |<script type="text/tiscript">
41 | function foo() { ... }
42 | </script>
43 |
44 | 这样定义出来的类和函数属于全局文档名称空间。self和view全局变量是这个名称空间的成员。
45 |Sciter将执行脚本作为文档加载的最后一步——在</html>标签解析完成后。所以当脚本执行时，DOM已经建立好，脚本可以直接引用它。
52 |引擎中脚本的执行有三个主要步骤：
53 |当文档需要从视图中卸载(如Sciter窗口从用户那接收到关闭窗口的请求)时, 引擎会调用self.closing()方法(如果它在脚本中声明了的话)。如果该方法返回false，则终止卸载。使用这种方式可以拦截文档的卸载。