Fun 语言怎么做界面 ..

作者: 一了 <1liao3@funlang.org>
日期: 2018-09-19

先看一个简单的例子, 下图是一个密码生成器, 有一个按钮, 点击生成一个新的随机密码. 鼠标移到密码上, 会自动全选, 并且将窗口标题改成当前密码. 为了方便, 给按钮配上了一组快捷键.





源代码如下:


var q = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789~!@#$%^&*-_+=<>?';
fun get_password()
  result = '';
  for i = 0 * 0.random() to 8 + 8.random() do
    result &= q.substr(q.length().random(), 1);
  end do;
end fun;

use 'lib-ui.fun';
use 'lib-bind.fun';

class PwdForm = Form()
  autoEvent    = true;
  var databind = Bind(this, []);

  var P = get_password();
  fun Get(e)
    P = get_password();
  end fun;

  fun Body()
    return `
<table><tr><td>
 <input fun:data="P,r" onmousemove="javacript:this.select();Fun.call('SetCaption', this.value);">
</td><td>
 <button fun:click="Get" fun:key="Ctrl-R, &R, R, Ctrl-5, F5">下一个(<u>R</u>)</button>
</td></tr></table>
`;
  end fun;

  fun Style()
    return 'table{width:100%;height:100%}';
  end fun;
end class;

PwdForm('随机密码', 360, 80).Show();
Run();



先一段一段简要介绍一下:

第一段是个密码生成器函数, 没什么好介绍的.

接下来是引用两个库, 分别是 lib-ui.fun 和 lib-bind.fun, 然后声明一个类, 继承自 Form 基类, 这个基类是 lib-ui.fun 里定义好了的. autoEvent 表明是自动响应事件, Bind 函数的作用是将 DOM 和 Fun 变量做双向绑定. 然后是声明了一个类对象属性变量 P, 以及一个成员函数 Get, 接下来会介绍怎么用.

关键的地方来了, PwdForm 重载了基类的 Body 和 Style 成员函数, Style 函数就是写了一点样式表, 重点在 Body 函数. Body 函数定义了窗口的所有内容, 以及相应的数据绑定和事件响应. Fun 语言是用 HTML 作为界面描述语言, 支持标准的 CSS 和 Javascript. Fun 语言给 HTML 增加了少量标签属性, 皆以 fun: 开头表示, 最重要的是 fun:data, fun:click 和 fun:key.

fun:data 定义的是数据绑定, 内容格式如下:
  varName=propName,r,w,load:methodLoad;save=methodSave
varName 是 Fun 窗口对象的属性变量名, propName 是 DOM 属性名, 默认是 value, r/w 表示读写, load 和 save 是自定义读写函数. 举例如下:
  url=value,r,w,load:UrlLoad;save=UrlSave

fun:click 定义的是 Fun 窗口对象类的成员函数, 当按钮点击时触发.

fun:key 是快捷键定义, 当触发快捷键时, 调用 fun:click 定义的函数. 快捷键支持多个, 以逗号分隔, 支持 Ctrl-, Alt (&), Fn, 等.

Fun 语言支持和 js 双向互调, 本例中 onmousemove 时 js 调用 fun 语言函数 SetCaption, 传入了 this.value 作为参数.

上述例子的中文版源代码如下:


变量 甲 = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789~!@#$%^&*-_+=<>?';
函数 生成()
  @ = '';
  设 乙 = 0 * 0.random() 到 8 + 8.random() 执行
    @ &= 甲.substr(甲.length().random(), 1);
  结束 执行;
结束 函数;

引用 'lib-ui.fun';
引用 'lib-bind.fun';

类 密码窗 = Form()
  autoEvent    = 真;
  变量 databind = Bind(this, []);

  变量 P = 生成();
  函数 取()
    P = 生成();
  结束 函数;

  函数 Body() # fun:data 目前只能解析英文变量
    返回 `
<table><tr><td>
 <input fun:data="P,r" onmousemove="javacript:this.select();Fun.call('SetCaption', this.value);">
</td><td>
 <button fun:click="取" fun:key="Ctrl-R, &R, R, Ctrl-5, F5">下一个(<u>R</u>)</button>
</td></tr></table>
`;
  结束 函数;

  函数 Style()
    返回 'table{width:100%;height:100%}';
  结束 函数;
结束 类;

密码窗('随机密码', 360, 80).Show();
Run();