README
¶
nwui
node-webkit UI for Go
Screenshot
Example
创建一个包含按钮的窗口：
&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文件
自带控件列表
- 普通的窗口控件
- 普通的按钮控件
- 还没移植完成的自定义窗口控件
TODO
- 基础框架
- 自动调用
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都可以
因为需要完成的控件太多所以作者一个人实在忙不过来
Documentation
¶
Index ¶
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
func GetConByID ¶
func GetConByID(id string) interface{}
Types ¶
type Button ¶
type NWUI ¶
type NWUI struct {
Name string `json:"name"`
Main string `json:"main"`
Window NWUIWindow `json:"window"`
}
Source Files