English | 中文 | Русский | Français

共 497 篇文章

共 3,037 篇文章及评论

使用Moblin开发程序——Clutter之UI描述语言

作者： 方亮 (Intel) (24 篇文章) 日期： 六月 26, 2009 在 4:17 下午

在说Clutter的UI描述语言之前，先说说一般情况下UI设计团队与开发团队的合作模式。通常，UI设计团队将UI设计图交给开发团队后，开发团队就开始埋头coding了。假如一切都是如此理想，那自然再好不过了。可是，光明的前途常常伴随着曲折的道路，项目中的变化是难免的。冷不防的就冒出个人来，讲客户对UI的要求不是这样这样滴，而是那样那样滴。改呗，UI团队改图，开发团队改代码，带来的工作量可不小。如果UI设计完后能自动产生UI的代码就好了。

有人就提出了UI描述语言。让UI设计人员学习这种十分简单的描述语言，将UI设计用这种语言来描述，然后通过工具就可以自动生成代码，假如UI设计发生了变化，重新生成代码也很方便。

Clutter就提供了一种UI描述语言。它的语法基于JSON——JavaScript Objective Notation。语言所描述的每一个UI元素我们都称之为”Object”——对象。每个对象至少拥有2个属性——ID和Type。UI描述语言支持的对象类型十分广泛，不仅包括所有的Actor和Container，还支持Behaviour。开发人员在程序中如何使用呢？如果UI描述保存在文件里的话，先通过clutter_script_load_from_file()读取描述，然后使用clutter_script_get_object()函数通过对象的ID来获取对象。

看个简单的例子吧，定义一个100x100的红色矩形。

{

  "id"     : "red-button",

  "type"   : "ClutterRectangle",

  "width"  : 100,

  "height" : 100,

  "color"  : "#ff0000ff"

}

程序里可以这样来访问：

ClutterActor *red_button;

red_button = CLUTTER_ACTOR (clutter_script_get_object (script, "red-button"));

Behaviour也可以通过UI描述语言来定义。

{

  "id"          : "rotate-behaviour",

  "type"        : "ClutterBehaviourRotate",

  "angle-start" : 0.0,

  "angle-end"   : 360.0,

  "axis"        : "z-axis",

  "alpha"       : {

    "timeline" : { "duration" : 4000, "fps" : 60, "loop" : true },

    "function" : "sine"

  }

}

已定义的Behaviour可以在定义Actor时应用到Actor上。

{

  "id" : "my-rotating-actor",

  "type" : "ClutterTexture",

  ...

  "behaviours" : [ "rotate-behaviour" ]

}

Actor的Signal同样可以被定义。

...

"signals" : [

  { "name" : "button-press-event", "handler" : "on_button_press" },

  {

    "name" : "foo-signal",

    "handler" : "after_foo",

    "after" : true

  },

],

...

最后声明一下，以上例子都是从Clutter的Reference Manual里抄来的，大家可以直接看http://www.clutter-project.org/docs/clutter/0.8/ClutterScript.html的描述部分，写的很详细。

分类： 移动技术

 评论 (13)

 引用 (0)

 写评论  

姓名 (必填)*

电子邮件 (必填，不在本页面显示)*

您的 URL (可选)


评论*