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的记录，其中的参数用以创建自定义控件。