OpenWrt Web界面修改及功能实现实例说明
2012-04-21 00:10
513 查看
通过上篇文章的介绍,我们应该了解了Lua语言在OpenWrt Web配置页面的基本对应功能设计方法。本文将以一个页面为例,来说明Lua语言如何实现页面控件以及怎么使输入或操作的选项在系统中生效。
页面如图所示:
首先,我们要在System栏下建立分页"Test by Wayne",使用cbi模块实现,修改目录lua\luci\controller\admin下的system.lua文件。
在function index()中添加语句:
entry({"admin", "system", "test"}, cbi("admin_system/test"), "Test by Wayne", 30).dependent=false
接下来就需要在lua\luci\model\cbi\admin_system中创建test.lua文件并完成控件元素编辑。
上一篇文章中已经说过,所有的控件都由Map开始,在这里我测试的是网络设置,语句如下:
m = Map("network", translate("Test Page by Wayne (~_~)"), translate("On this page we can learn how the .lua works."))
然后需要创建分块”Network Configuration”。创建section之前,需要在etc/config目录下的network文件中添加一个配置,就取名叫netset吧,network文件如下:
config 'interface' 'loopback'
option 'ifname' 'lo'
option 'proto' 'static'
……
config 'interface' 'lan'
option 'ifname' 'eth0'
option 'type' 'bridge'
option 'proto' 'static'
……
config 'netset'
修改好配置文件后,使用如下语句创建section:
s = m:section(TypedSection, "netset", translate("Network Configuration"))
第一个控件”address”属于cbi类型的Value类型,并且定义输入类型为ip4addr,实现如下:
ipaddr1 = s:taboption("wan1", Value, "ipaddr1", translate("address"))
ipaddr1.datatype = "ip4addr"
控件”netmask”在这里其实是ListValue的效果,但是此处为了拥有custom自定义的选项,设置的类型为Value,实现如下:
netmask1 = s:taboption("wan1", Value, "netmask1", translate("netmask"))
netmask1.datatype = "ip4addr"
netmask1:value("255.255.255.0")
netmask1:value("255.255.0.0")
netmask1:value("255.0.0.0")
到这里,控件都已经可以添加并显示了,剩下的工作就是输入的值如IP地址和网关信息怎么获取生效了。
在进行编辑Save & Apply后,再打开etc/config/network文件,发现文件内容如下:
config 'interface' 'loopback'
option 'ifname' 'lo'
option 'proto' 'static'
……
config 'interface' 'lan'
option 'ifname' 'eth0'
option 'type' 'bridge'
option 'proto' 'static'
……
config 'netset'
option 'ipaddr1' '192.168.1.30'
option 'netmask1' '255.255.255.0'
option 'gateway1' '192.168.1.5'
即所操作的内容都在配置文件中自动保存,而配置文件中的值获取方式就很多了,我们可以使用uci命令得到。
Usage: uci [<options>] <command> [<arguments>]
Commands:
batch
export [<config>]
import [<config>]
changes [<config>]
commit [<config>]
add <config> <section-type>
add_list <config>.<section>.<option>=<string>
show [<config>[.<section>[.<option>]]]
get <config>.<section>[.<option>]
set <config>.<section>[.<option>]=<value>
delete <config>[.<section[.<option>]]
rename <config>.<section>[.<option>]=<name>
revert <config>[.<section>[.<option>]]
reorder <config>.<section>=<position>
这样,一个页面的定制和功能的实现过程就完成了。
页面如图所示:
首先,我们要在System栏下建立分页"Test by Wayne",使用cbi模块实现,修改目录lua\luci\controller\admin下的system.lua文件。
在function index()中添加语句:
entry({"admin", "system", "test"}, cbi("admin_system/test"), "Test by Wayne", 30).dependent=false
接下来就需要在lua\luci\model\cbi\admin_system中创建test.lua文件并完成控件元素编辑。
上一篇文章中已经说过,所有的控件都由Map开始,在这里我测试的是网络设置,语句如下:
m = Map("network", translate("Test Page by Wayne (~_~)"), translate("On this page we can learn how the .lua works."))
然后需要创建分块”Network Configuration”。创建section之前,需要在etc/config目录下的network文件中添加一个配置,就取名叫netset吧,network文件如下:
config 'interface' 'loopback'
option 'ifname' 'lo'
option 'proto' 'static'
……
config 'interface' 'lan'
option 'ifname' 'eth0'
option 'type' 'bridge'
option 'proto' 'static'
……
config 'netset'
修改好配置文件后,使用如下语句创建section:
s = m:section(TypedSection, "netset", translate("Network Configuration"))
第一个控件”address”属于cbi类型的Value类型,并且定义输入类型为ip4addr,实现如下:
ipaddr1 = s:taboption("wan1", Value, "ipaddr1", translate("address"))
ipaddr1.datatype = "ip4addr"
控件”netmask”在这里其实是ListValue的效果,但是此处为了拥有custom自定义的选项,设置的类型为Value,实现如下:
netmask1 = s:taboption("wan1", Value, "netmask1", translate("netmask"))
netmask1.datatype = "ip4addr"
netmask1:value("255.255.255.0")
netmask1:value("255.255.0.0")
netmask1:value("255.0.0.0")
到这里,控件都已经可以添加并显示了,剩下的工作就是输入的值如IP地址和网关信息怎么获取生效了。
在进行编辑Save & Apply后,再打开etc/config/network文件,发现文件内容如下:
config 'interface' 'loopback'
option 'ifname' 'lo'
option 'proto' 'static'
……
config 'interface' 'lan'
option 'ifname' 'eth0'
option 'type' 'bridge'
option 'proto' 'static'
……
config 'netset'
option 'ipaddr1' '192.168.1.30'
option 'netmask1' '255.255.255.0'
option 'gateway1' '192.168.1.5'
即所操作的内容都在配置文件中自动保存,而配置文件中的值获取方式就很多了,我们可以使用uci命令得到。
Usage: uci [<options>] <command> [<arguments>]
Commands:
batch
export [<config>]
import [<config>]
changes [<config>]
commit [<config>]
add <config> <section-type>
add_list <config>.<section>.<option>=<string>
show [<config>[.<section>[.<option>]]]
get <config>.<section>[.<option>]
set <config>.<section>[.<option>]=<value>
delete <config>[.<section[.<option>]]
rename <config>.<section>[.<option>]=<name>
revert <config>[.<section>[.<option>]]
reorder <config>.<section>=<position>
这样,一个页面的定制和功能的实现过程就完成了。
相关文章推荐
- OpenWrt Web界面修改及功能实现实例说明
- OpenWrt Web界面修改及功能实现实例说明
- OpenWrt Web界面修改及功能实现实例说明
- openwrt web管理luci界面修改
- openwrt web管理luci界面修改
- openwrt web管理luci界面修改
- openwrt web管理luci界面修改
- Android常用实例——实现修改用户头像功能
- JavaWeb中struts2实现文件上传下载功能实例解析
- webuploader 实现图片批量上传功能附实例代码
- Android - TabHost 选项卡功能用法详解&&TabWidget切换卡的实现应用&&实例说明
- 基于Flask实现文件的上传功能的多实例Web服务
- [Android实例] webview 实现翻页功能
- Java与WebUploader相结合实现文件上传功能(实例代码)
- JSP+Servlet+Tomcat+Mysql实现用户注册、登陆、修改、添加、查看详情、分页实例之---说明
- JavaWeb中使用JavaMail实现发送邮件功能实例详解
- Android实现登录界面和功能实例
- Android实现点击WebView界面中图片滑动浏览与保存图片功能
- Android中Webview与原生界面交互及二维码扫描功能实现
- Android中Xposed框架篇---修改系统位置信息实现自身隐藏功能实例