Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/go-nwui/nwui
node-webkit UI for Go
https://github.com/go-nwui/nwui
Last synced: 3 months ago
JSON representation
node-webkit UI for Go
- Host: GitHub
- URL: https://github.com/go-nwui/nwui
- Owner: go-nwui
- License: apache-2.0
- Created: 2015-01-28T06:10:59.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-02-11T15:01:38.000Z (over 9 years ago)
- Last Synced: 2024-01-17T20:35:38.945Z (5 months ago)
- Language: Go
- Size: 292 KB
- Stars: 109
- Watchers: 16
- Forks: 13
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-stars - nwui - node-webkit UI for Go (Go)
README
# nwui
[](https://gitter.im/go-nwui/nwui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [](https://gowalker.org/github.com/go-nwui/nwui) [](http://godoc.org/github.com/go-nwui/nwui)
node-webkit UI for Go
## Screenshot
## Example
创建一个包含按钮的窗口：
```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文件
## 自带控件列表
* 普通的窗口控件
* 普通的按钮控件
* 还没移植完成的自定义窗口控件
## TODO
- [x] 基础框架
- [ ] 自动调用`nw.js`
- [ ] 更多控件
- [x] 按钮
- [ ] 单选框
- [ ] 多选框
- [ ] 单行输入框
- [ ] 多行输入框
- [ ] 表格
- [ ] 横向框架
- [ ] 纵向框架
- [ ] more
- [ ] 默认控件和框架分离
- [ ] 更多主题
## 控件编写指南
**本段是为想自己写nwui控件者编写的，如果只是普通的使用可以直接无视**
首先你要会一点js+css+html，以及强大的理解能力（没办法，作者写的太乱）
先上Button控件的例子：
```go
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 := "" + b.Text + ""
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中的结构体定义
```go
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方法比较特殊，比普通控件多两个返回值
```go
Init(sender chan EventMsg) (Controls, NWUI, chan bool)
```
`NWUI`是nwui窗口的配置，各个字段的意义可以直接看`nw.js`的`package.json`
当`chan bool`接收到消息时，会关闭窗口
### 看不懂？
作者的表达能力有限（或者说超烂），直接看源码吧……
## 参与开发
跪求帮忙开发，哪怕只增加注释或者增加TODO都可以
因为需要完成的控件太多所以作者一个人实在忙不过来