Nitrogen 学习过程实录（12）

7、Nitrogen 的元件（elements）

元件是构成Nitrogen动态网页的代码片断。元件由Erlang的记录（record）和支持模块（.erl文件）组成，用以告知编译器（rendering engine，直译是“渲染机”，感觉不符合汉语习惯），如何翻译成HTML内容。

许多Erlang元件有HTML的同等对应。例如，元件#span直接译成<span>。

(1) Nitrogen元件的标准属性

id – 元件的名字。

actions – 元件的行为。后面会讲述。

show_if – 值为true或false以显示或隐藏该元件。

class – 元件的CSS类名称。

style – 元件的CSS风格。

大多数元件还有其他特别属性。例如，元件#panel创建HTML标签div，其中就有属性body。元件#checkbox，创建HTML标签checkbox，其中包含着另一个元件text，用以管理checkbox中的文字。

(2) 元件树


元件可以组合成列表，或者嵌套构成复合结构。例如：

Body = #body { body=[

#panel { body=[

#label { text="This is a label." },

#label { id=label1, text="This is another label with a name." },

#button { id=button1, class=mybutton, text="Push Me" }

]}

]}

(3) 直接使用HTML正文

Nitrogen允许你在动态网页中，在元件外部直接书写HTML正文。例如：

Body = #body { body=[

#panel { body=[

#label { text="This is a label." },

"This is some <b>plain</b> HTML.",

#label { text="This is another label." },

"

This is some more HTML. Erlang allows for multiline strings

as long as you escape your double-quotes like this (/").

"

]}

]}

(4) 创建自定义元件

这十分简单。

首先，定义记录如下：

-record(myelement, {?ELEMENT_BASE, attr1, attr2}).

然后，创建名为element_myelement的支持模块。你的模块应该导出函数render(ControlID, Record)，由其返回编译后的HTML正文。

render(ControlID, Record)

ControlID – 元件在HTML正文中的id。

Record – 类型为myelement的记录，其中的参数用以创建自定义控件。