Openwrt LuCI之CBI控件

一、CBI控件类型汇总

CBI模型是描述UCI配置文件结构的Lua文件，并且CBI解析器将lua文件转为HTML呈现给用户。
所有 CBI 模型文件必须返回类型为 luci.cbi.Map 的对象。
CBI 模型文件的范围由 luci.cbi 模块的内容和 luci.i18n 的转换函数自动扩展。

名称	描述	继承自	模板
NamedSection	A fixed configuration section defined by its name	NamedSection = class(AbstractSection)	cbi/nsection
TypedSection	A (set of) configuration section(s) defined by the type	TypedSection = class(AbstractSection)	cbi/tsection
Node	Node pseudo abstract class	Node = class()	cbi/node
Template	A simple template element	Template = class(Node)
Map	A map describing a configuration file	Map = class(Node)	cbi/map
Compound	Container	Compound = class(Node)	cbi/compound
Delegator	Node controller	Delegator = class(Node)	cbi/delegator
SimpleForm	A Simple non-UCI form	SimpleForm = class(Node)	cbi/simpleform
Form		Form = class(SimpleForm)
AbstractSection		AbstractSection = class(Node)
SimpleSection		SimpleSection = class(AbstractSection)	cbi/nullsection
Table		Table = class(AbstractSection)	cbi/tblsection
AbstractValue	An abstract Value Type	AbstractValue = class(Node)
Value	A one-line value	Value = class(AbstractValue)	cbi/value
DummyValue	This does nothing except being there	DummyValue = class(AbstractValue)	cbi/dvalue
Flag	A flag being enabled or disabled	Flag = class(AbstractValue)	cbi/fvalue
ListValue	A one-line value predefined in a list	ListValue = class(AbstractValue)	cbi/lvalue
MultiValue	Multiple delimited values	MultiValue = class(AbstractValue)	cbi/mvalue
StaticList		StaticList = class(MultiValue)
DynamicList		DynamicList = class(AbstractValue)	cbi/dynlist
TextValue	A multi-line value	TextValue = class(AbstractValue)	cbi/tvalue
Button		Button = class(AbstractValue)	cbi/button
FileUpload		FileUpload = class(AbstractValue)	cbi/upload
FileBrowser		FileBrowser = class(AbstractValue)	cbi/browser
Page	A simple node	Page = class(Node)

二、CBI常用控件用法详解

1、class Map (config, title, description)

参数说明：

config: /etc/config/目录下的UCI文件名
title: 页面显示名称
description: 页面显示详细描述

方法说明：

function :section(sectionclass, …)

补充说明：

section(TypedSection, type, title, description)
section(NamedSection, name, type, title, description)

section 对象有一些属性如下：

template： html 模板，默认为"cbi/tsection"
addremove：是否可以增加和删除，默认为 false
anonymous：是否为匿名 section，默认为 false

网页图例：

2、class NamedSection(name, type, title, description)

An object describing an UCI section selected by the name. //根据name来解析一个UCI section
To instantiate use: Map:section(NamedSection, "name", "type", "title", "description")

参数说明：

name: UCI section名字, config type section
type: UCI section类型, config type section
title: 页面显示名称
description: 页面显示详细描述

对象属性：

property.addremove = false

Allows the user to remove and recreate the configuration section. //允许用户删除并重新创建配置section。

property.anonymous = true

true 页面不显示section名字
false 页面显示section名字

property.dynamic = false

ture 将section 标记为动态
Dynamic sections can contain an undefinded number of completely userdefined options. //将此部分标记为动态。动态section可以包含未找到的完全用户定义的选项数。

property.optional = true

解析可选的options

3、class TypedSection (type, title, description)

An object describing a group of UCI sections selected by their type. // 通过类型type选择来描述一组 UCI section的对象。
To instantiate use: Map:section(TypedSection, "type", "title", "description")

参数说明：

type: UCI section类型, config type section
title: 页面显示名称
description: 页面显示详细描述

对象属性:

property.addremove = false

此section是否允许删除或创建
为true时，页面会显示删除和创建按钮

property.anonymous = true

页面不显示此secion名字

property.template = "cbi/template"

设置此section页面模板

方法说明:

function :depends(key, value)

仅当另一个选项键在同一section中设置为值时，才显示此选项字段。如果多次调用此函数，则依赖项将链接为 [或]

function .filter(self, section) -abstract-

您可以重写此函数以筛选某些不会解析的部分。对于应分析的每个section，将调用筛选器函数，对于应筛选的section，将返回 nil。对于所有其他section，它应返回第二个参数中给出的section名称。

function :option(optionclass, …)

4、class Value (option, title, description)

An object describing an option in a section of a UCI File. Creates a standard text field in the formular.//描述 UCI 文件部分中的选项的对象。在公式中创建标准文本框。(单行文本框)
To instantiate use: NamedSection:option(Value, "option", "title", "description") or TypedSection:option(Value, "option", "title", "description")

参数说明：

option: UCI option name
title: 页面显示名称
description: 页面显示详细描述

对象属性：

property .default = nil 文本框中缺省的值
property .maxlength = nil

The maximum input length (of chars) of the value //值的最大输入长度（字符）

property .optional = false

Marks this option as optional, implies .rmempty = true //将此选项标记为可选， .rmempty = true

property .rmempty = true

Removes this option from the configuration file when the user enters an empty value //当用户输入空值时，从配置文件中删除此选项

property .size = nil

The maximum number of chars displayed by form field //窗体字段显示的最大字符数

property .password = false

密码输入框

方法说明：

function :depends(key, value)
function :value(key, value)

Convert this text field into a combobox if possible and add a selection option. //如果可能，将此文本字段转换为组合框，并添加选择选项。

图片示例：

5、class ListValue (option, title, description)

An object describing an option in a section of a UCI File.Creates a list box or list of radio (for selecting one of many choices) in the formular. //描述 UCI File 部分中选项的对象。在公式中创建一个列表框或单选列表（用于选择多种选项之一）（即下拉列表）。
To instantiate use: NamedSection:option(ListValue, "option", "title", "description") or TypedSection:option(ListValue, "option", "title", "description")

参数说明:

option: UCI option name
title: 页面显示名称
description: 页面显示详细描述

属性说明：

property .widget = "select"

select shows a selection list, radio shows a list of radio buttons inside form。 //select 显示选择列表，radio 显示表单内单选按钮的列表

property .default = nil

The default value 文本框中缺省的值

property .optional = false
property .rmempty = true
property .size = nil

方法说明：

function :value(key, value)

Adds an entry to the selection list

网页图例：

6、class Flag (option, title, description)

An object describing an option with two possible values in a section of a UCI File. Creates a checkbox field in the formular. //描述在 UCI 文件部分中具有两个可能值的选项的对象。在公式中创建复选框。
To instantiate use: NamedSection:option(Flag, "option", "title", "description") or TypedSection:option(Flag, "option", "title", "description")

参数说明：

option: UCI option name
title: 页面显示名称
description: 页面显示详细描述

对象属性：

property .default = nil The default value
property .disabled = 0

the value that should be set if the checkbox is unchecked //取消选中复选框时应设置的值

property .enabled = 1

the value that should be set if the checkbox is checked //选中复选框时应设置的值

方法说明：

function :depends (key, value)

网页图例：

7、class MultiValue (option, title, description)

An object describing an option in a section of a UCI File.Creates a list of checkboxed or a multiselectable list as form fields. //描述 UCI 文件部分中的选项的对象。创建复选框列表或多选列表（非下拉列表）。
To instantiate use: NamedSection:option(MultiValue, “option”, “title”, “description”) or TypedSection:option(MultiValue, “option”, “title”, “description”)

参数说明：

对象属性：

property .widget = “checkbox”

select shows a selection list, checkbox shows a list of checkboxes inside form //选中显示选择列表，复选框显示表单内的复选框列表

property .delimiter = " "

The string which will be used to delimit the values inside stored option //用于分隔存储选项内的值的字符串

property .default = nil
property .optional = false
property .rmempty = true
property .size = nil

The size of the form field (only used if property .widget = “select”) //窗体字段的大小（仅当属性 .widget = "select"时才使用）

方法说明：

function :depends (key, value)
function :value(key, value)

Adds an entry to the list

网页图例：

8、class StaticList (option, title, description)

Similar to the MultiValue, but stores selected Values into a UCI list instead of a character-separated option. //与MultiValue类似，但将所选值存储到 UCI list中，而不是字符分隔option中。
(这里可能会有疑问，请看下面操作，当在网页对StaticList和MultiValue 选中四个选项时，保存并应用，查看UCI 中配置文件就可以明白。MultiValue 对应的值存储在option,而StaticList对应的值分别存储在list中)

网页图例：

9、class DynamicList (option, title, description)

A extensible list of user-defined values. Stores Values into a UCI list //用户定义值的可扩展列表。将值存储到 UCI list中

网页图例：

10、class DummyValue (option, title, description)

Creates a readonly text in the form. It writes no data to UCI!//在窗体中创建只读文本。它不写入任何数据到UCI！
To instantiate use: NamedSection:option(DummyValue, "option", "title", "description") or TypedSection:option(DummyValue, "option", "title", "description")

参数说明：

option: UCI option name
title: 页面显示名称
description: 页面显示详细描述

方法说明：

function :depends (key, value)

网页说明：

11、class TextValue (option, title, description)

An object describing a multi-line textbox in a section in a non-UCI form.// 描述非 UCI 窗体中节中多行文本框的对象。
注：与Value的区别就是TextValue可以多行显示，而Value只能单行显示。

网页图例：

12、class Button (option, title, description)

An object describing a Button in a section in a non-UCI form.//描述非 UCI 窗体中节中的按钮的对象。

属性说明：

同Value。.inputstyle = nil 按钮样式 apply, reset

方法说明：

同Value

网页图例：

13、class tab(tabname, title)

调用 section 的 tab 函数创建一个名称为 tabname，标题为 title 的 Tab 标签。
对应的 option 则使用 taboption
s:taboption(tabname, type, name, title)
在指定的 tabname 下创建一个 option。
s为section 对象，与之前的控件不同，一个section里面如果有tab控件，会将其他（如Value）控件覆盖掉，所以，要想创建tab选项，必须另外再创建section。

b = m:section(TypedSection, "typedsection2_title", "typedsection2 description")
b:tab("tab1", "Tab1");
b:tab("tab2", "Tab2");
b1=b:taboption("tab1", Value, "tab1_option1", "tab1 Option1");
b2=b:taboption("tab2", Value, "tab2_option2", "tab2 Option2");

网页图例：

三、实例操作

1、示例

（1）网页整体图例

（2） lua 文件中CBI控件代码

m = Map("test_file","map title" ,translate("map descrption")) -- cbi_file is the config file in /etc/config

a = m:section(TypedSection, "typedsection1_title", "typedsection1 description")  -- info is the section called info in cbi_file

a1 = a:option(Value, "Value_option_name","Value option title", translate("Value option description"));

a2 = a:option(TextValue, "TextValue_option_name","TextValue option title", "TextValue option description");

a3 = a:option(MultiValue , "MultiValue_option_name","MultiValue  option title", "MultiValue  option description");
a3:value("0", translate("value0"));
a3:value("1", translate("value1"));
a3:value("2", translate("value2"));
a3:value("3", translate("value3"));

a4 = a:option(DummyValue , "DummyValue_option_name","DummyValue option title", "DummyValue option description");

a5 = a:option(ListValue, "Listvalue_option_name","ListValue option title", "ListValue option description");
a5:value("0", translate("value0"));
a5:value("1", translate("value1"));
a5:value("2", translate("value2"));
a5:value("3", translate("value3"));

a6 = a:option(DynamicList, "DynamicList_option_name","Dynamiclist option title", "DynamicList option description");

a7 = a:option(StaticList, "StaticList_option_name","StaticList option title", "StaticList option description");
a7:value("0", translate("value0"));
a7:value("1", translate("value1"));
a7:value("2", translate("value2"));
a7:value("3", translate("value3"));

a8 = a:option(Flag, "Flag_option_name","Flag option title", "Flag option description");

a9 = a:option(Button, "Button_option_name","Button option title", "Button option description");
 
b = m:section(TypedSection, "typedsection2_title", "typedsection2 description")
b:tab("tab1", "Tab1");
b:tab("tab2", "Tab2");
b1=b:taboption("tab1", Value, "tab1_option1", "tab1 Option1");
b2=b:taboption("tab2", Value, "tab2_option2", "tab2 Option2");

return m

（3）UCI 文件中配置信息

config typedsection1_title 'typedsection1'
        option Value_option_name 'Value'
        option TextValue_option_name 'TextValue'
        option DummyValue_option_name 'DummyValue'
        option Listvalue_option_name '1'
        list DynamicList_option_name 'DynamicList'
        list DynamicList_option_name '123123'
        option Flag_option_name '1'
        option MultiValue_option_name '0 1 2 3'
        list StaticList_option_name '0'
        list StaticList_option_name '1'
        list StaticList_option_name '2'
        list StaticList_option_name '3'

config typedsection2_title 'typedsection2'
        option tab1_option1 '1'
        option tab2_option2 '2'

2、网上实例参考

例程详情参考 https://github.com/openwrt/luci/wiki/ModulesHowTo

m = Map("network", "Network") -- We want to edit the uci config file /etc/config/network 
s = m:section(TypedSection, "interface", "Interfaces") -- Especially the "interface"-sections
s.addremove = true -- Allow the user to create and remove the interfaces
function s:filter(value)  
     return value ~= "loopback" and value -- Don't touch loopback
end s:depends("proto", "static") -- Only show thosewith"static"
s:depends("proto", "dhcp") -- or "dhcp" as protocol and leave PPPoE and PPTP alone 

p = s:option(ListValue, "proto", "Protocol") -- Creates an element list (select box)
p:value("static", "static") -- Key and value pairs
p:value("dhcp", "DHCP")
p.default = "static" 

s:option(Value, "ifname", "interface", "the physical interface to be used") -- This will give a simple textbox 

s:option(Value, "ipaddr", translate("IP Address")) -- Ja, das ist eine i18n-Funktion ;-) 

s:option(Value, "netmask", "Netmask"):depends("proto", "static") -- You may remember this "depends" function from above 

mtu = s:option(Value, "mtu", "MTU")
mtu.optional = true -- This one is very optional 
dns = s:option(Value, "dns", "DNS-Server")
dns:depends("proto", "static")
dns.optional = true
function dns:validate(value) -- Now, that's nifty, eh?
    return value:match("[0-9]+\.[0-9]+\.[0-9]+\.[0-9]+") -- Returns nil if it doesn't match otherwise returns match
end 

gw = s:option(Value, "gateway", "Gateway")
gw:depends("proto", "static")
gw.rmempty = true -- Remove entry if it is empty 

return m -- Returns the map

四、结尾

1、总结

2、资料参考

文档参考：https://github.com/openwrt/luci/wiki/CBI
博客参考：https://blog.csdn.net/qq_21949217/article/details/44340261

posted @ 2021-09-14 18:59 狮子是lion 阅读(572) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

狮子是lion

Openwrt LuCI之CBI控件

Openwrt LuCI之CBI控件

一、CBI控件类型汇总

二、CBI常用控件用法详解

1、class Map (config, title, description)

2、class NamedSection(name, type, title, description)

3、class TypedSection (type, title, description)

4、class Value (option, title, description)

5、class ListValue (option, title, description)

6、class Flag (option, title, description)

7、class MultiValue (option, title, description)

8、class StaticList (option, title, description)

9、class DynamicList (option, title, description)

10、class DummyValue (option, title, description)

11、class TextValue (option, title, description)

12、class Button (option, title, description)

13、class tab(tabname, title)

三、实例操作

1、示例

（1）网页整体图例

（2） lua 文件中CBI控件代码

（3）UCI 文件中配置信息

2、网上实例参考

四、结尾

1、总结

2、资料参考

公告