• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

Openwrt LuCI之CBI控件

开发技术 开发技术 4小时前 2次浏览

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

网页图例
Openwrt  LuCI之CBI控件

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. //如果可能,将此文本字段转换为组合框,并添加选择选项。

图片示例
Openwrt  LuCI之CBI控件

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

网页图例
Openwrt  LuCI之CBI控件
Openwrt  LuCI之CBI控件

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)

网页图例:

Openwrt  LuCI之CBI控件

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

网页图例

Openwrt  LuCI之CBI控件

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中)

Openwrt  LuCI之CBI控件

网页图例

Openwrt  LuCI之CBI控件

9、class DynamicList (option, title, description)

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

网页图例

Openwrt  LuCI之CBI控件

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)

网页说明

Openwrt  LuCI之CBI控件

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只能单行显示。

网页图例:

Openwrt  LuCI之CBI控件

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

网页图例

Openwrt  LuCI之CBI控件

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");

网页图例

Openwrt  LuCI之CBI控件

三、实例操作

1、示例

(1)网页整体图例

Openwrt  LuCI之CBI控件

(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


程序员灯塔
转载请注明原文链接:Openwrt LuCI之CBI控件
喜欢 (0)