node-webkit UI for Go
创建一个包含按钮的窗口:
&Window{
Title: "window",
Width: 800,
Height: 600,
OnExit: func() {
fmt.Println("exit")
},
Controls: []interface{}{
&Button{
ID: "btn0",
Text: "button",
OnClick: func() {
text := GetConByID("btn0").(*Button).Text
fmt.Println(text, "clicked!")
},
},
},
}
使用可以参见test文件
- 普通的窗口控件
- 普通的按钮控件
- 还没移植完成的自定义窗口控件
- 基础框架
- 自动调用
nw.js
- 更多控件
- 按钮
- 单选框
- 多选框
- 单行输入框
- 多行输入框
- 表格
- 横向框架
- 纵向框架
- more
- 默认控件和框架分离
- 更多主题
本段是为想自己写nwui控件者编写的,如果只是普通的使用可以直接无视
首先你要会一点js+css+html,以及强大的理解能力(没办法,作者写的太乱)
先上Button控件的例子:
type Button struct {
ID string
Text string
OnClick func()
sender chan EventMsg
}
func (b *Button) Init(sender chan EventMsg) Controls {
static := ConStatic{
Name: "Button",
CSS: `
.button {
border: 4px solid #304ffe;
color: white;
background: #304ffe;
padding: 6px 12px;
}
.button:hover {
background: white;
color: #304ffe;
}
.button:active {
color: #fff;
background: #304ffe;
box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.3) inset;
}`,
JavaScript: `
function ButtonSetText(id,text) {
var button = document.getElementById(id);
button.textContent = text;
}
(function() {
var buttons = document.getElementsByClassName('button');
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i]
button.onclick = function(){
send(button.id, "ButtonOnClick", "");
};
}
})();`,
}
if b.ID == "" {
b.ID = NewControlID()
}
events := make(map[string]func(v string))
b.sender = sender
html := "<button id=\"" + b.ID + "\"class=\"button\">" + b.Text + "</button>"
if b.OnClick != nil {
// 如果用户使用了OnClick事件
// 那么添加事件
events["ButtonOnClick"] = func(v string) {
b.OnClick()
}
}
return Controls{
b.ID: Control{
V: b,
HTML: html,
Static: static,
Events: events,
},
}
}
// 设置按钮文字
func (b *Button) SetText(text string) {
// 这里的判断是防止控件还没有初始化
// sender还未赋值用户就调用
if b.sender != nil {
// ButtonSetText 为需要调用的js函数
b.sender <- EventMsg{b.ID, "ButtonSetText", text}
}
b.Text = text
}
以下为nwui中的结构体定义
type Controls map[string]Control
type Control struct {
V interface{} // 控件的结构体指针,用于初始化时的处理
HTML string // 控件的HTML代码
Events map[string]func(v string) // 控件事件列表,key为事件名称
Static ConStatic // 控件的静态数据,css和js等
}
type ConStatic struct {
Name string // 控件名称,不能和其他控件重复
CSS string // 控件的css
JavaScript string // 控件的js
}
type EventMsg struct {
ID string `json:"id"` // 控件的ID
Event string `json:"event"` // 事件名称
Value string `json:"value"` // 想发送信息的内容,复杂内容推荐用json编码
}
控件必须实现一个Init(sender chan EventMsg) Controls
方法,nwui会用反射来调用并传入sender
sender
是给前端发送消息的一个chan,具体使用可以参加上面源码
因为一个控件内可能会包含其他的控件,所以返回一个Controls
而不是Control
当你编写的控件要包含其他控件时,比如写一个Group
控件
可以获取子控件的HTML
字段,然后按照需求添加到自己的HTML
字段中(比如需要特殊排列啦什么的)。然后要记得清空子控件的HTML
字段以防止重复添加(css和javascript之所以单独放在ConStatic
是因为它们都是可重复使用的。ConStatic
的Name
字段也是用于区分控件类型的,所以Name
不要随便填写)。return时记得在Controls
里加上子控件(key为控件ID)
在写控件的js和css时要注意,必须写成对所有这种控件都可用的(增加代码复用率)。具体可以看上面Button
控件的实现(根据class来选择控件啦什么的)
窗口级别的控件Init方法比较特殊,比普通控件多两个返回值
Init(sender chan EventMsg) (Controls, NWUI, chan bool)
NWUI
是nwui窗口的配置,各个字段的意义可以直接看nw.js
的package.json
当chan bool
接收到消息时,会关闭窗口
作者的表达能力有限(或者说超烂),直接看源码吧……
跪求帮忙开发,哪怕只增加注释或者增加TODO都可以
因为需要完成的控件太多所以作者一个人实在忙不过来