go web ui,目前实现了布局,效果如何?

go代码为:

package main

import (
    "fmt"
    "os"
    . "webui"
)

func main() {
    w := Window{
        Width:  180,
        Height: 220,
        Sub: []Formatter{
            &Container{
                Common: Common{"ct", "", 10, 10, 160, 200},
                Sub: []Formatter{
                    &Text{Common: Common{"tx", "0", 0, 0, 160, 40}},
                    &Button{Common: Common{"n7", "7", 0, 40, 40, 40}},
                    &Button{Common: Common{"n8", "8", 40, 40, 40, 40}},
                    &Button{Common: Common{"n9", "9", 80, 40, 40, 40}},
                    &Button{Common: Common{"o1", "+", 120, 40, 40, 40}},
                    &Button{Common: Common{"n4", "4", 0, 80, 40, 40}},
                    &Button{Common: Common{"n5", "5", 40, 80, 40, 40}},
                    &Button{Common: Common{"n6", "6", 80, 80, 40, 40}},
                    &Button{Common: Common{"o2", "-", 120, 80, 40, 40}},
                    &Button{Common: Common{"n1", "1", 0, 120, 40, 40}},
                    &Button{Common: Common{"n2", "2", 40, 120, 40, 40}},
                    &Button{Common: Common{"n3", "3", 80, 120, 40, 40}},
                    &Button{Common: Common{"o3", "*", 120, 120, 40, 40}},
                    &Button{Common: Common{"n0", "0", 0, 160, 40, 40}},
                    &Button{Common: Common{"pt", ".", 40, 160, 40, 40}},
                    &Button{Common: Common{"o4", "=", 80, 160, 40, 40}},
                    &Button{Common: Common{"o4", "/", 120, 160, 40, 40}},
                },
            },
        },
    }
    file, _ := os.Create("f.htm")
    file.WriteString("<html>\n<head></head>\n<body>\n")
    fmt.Fprint(file, w.String())
    file.WriteString("</body>\n</html>")
    file.Close()
}

生成的html代码为:

<html>
<head></head>
<body>
<form>
<div style="position:relative; margin:auto; width:180; height:220; border-style:solid; border-width:1px; border-color:#000">
<div id="ct" value="" style="position:absolute; left:10; top:10; width:160; height:200">
<input type="text" id="tx" value="0" style="position:absolute; left:0; top:0; width:160; height:40" />
<input type="button" id="n7" value="7" style="position:absolute; left:0; top:40; width:40; height:40" />
<input type="button" id="n8" value="8" style="position:absolute; left:40; top:40; width:40; height:40" />
<input type="button" id="n9" value="9" style="position:absolute; left:80; top:40; width:40; height:40" />
<input type="button" id="o1" value="+" style="position:absolute; left:120; top:40; width:40; height:40" />
<input type="button" id="n4" value="4" style="position:absolute; left:0; top:80; width:40; height:40" />
<input type="button" id="n5" value="5" style="position:absolute; left:40; top:80; width:40; height:40" />
<input type="button" id="n6" value="6" style="position:absolute; left:80; top:80; width:40; height:40" />
<input type="button" id="o2" value="-" style="position:absolute; left:120; top:80; width:40; height:40" />
<input type="button" id="n1" value="1" style="position:absolute; left:0; top:120; width:40; height:40" />
<input type="button" id="n2" value="2" style="position:absolute; left:40; top:120; width:40; height:40" />
<input type="button" id="n3" value="3" style="position:absolute; left:80; top:120; width:40; height:40" />
<input type="button" id="o3" value="*" style="position:absolute; left:120; top:120; width:40; height:40" />
<input type="button" id="n0" value="0" style="position:absolute; left:0; top:160; width:40; height:40" />
<input type="button" id="pt" value="." style="position:absolute; left:40; top:160; width:40; height:40" />
<input type="button" id="o4" value="=" style="position:absolute; left:80; top:160; width:40; height:40" />
<input type="button" id="o4" value="/" style="position:absolute; left:120; top:160; width:40; height:40" />
</div>
</div>
</form>
</body>
</html>

共 6 个回复


Bluek404

说实话感觉还不如直接写HTML……

# 0

facat

生成html不难,难的是怎么用go渲染出来。

# 2

snake117

@facat 在浏览器里看,用websocket和go程序交互。

# 3

captain

这。。我觉得有兴趣玩玩可以,实际项目不会用这样的。

# 4

snake117

@captain 这个么,本来就是给程序员自己用的,目的是方便一些调试之类的。

目前已经算是完工了(毕竟不追求高大上),如下代码:

package main

import (
    "github.com/hydra13142/webui"
    "net/http"
    "time"
)

func main() {
    w := &webui.Window{
        Width:  200,
        Height: 50,
        Sub: []webui.Object{
            &webui.Timer{Common: webui.Common{Id: "clock", Do: func(c *webui.Context) {
                c.Ans["text"] = time.Now().Format("2006/01/02 15:04:05.00 -0700")
            }}, Ms: 50},
            &webui.Text{Common: webui.Common{"text", "", 5, 5, 190, 40, nil}, Readonly: true},
        },
    }
    http.ListenAndServe(":9999", webui.NewHandler(w, "clock.htm", nil))
}

就会在http://127.0.0.1:9999/页面生成一个时钟。

github.com/hydra13142/webui包里还有个例子,可以生成一个计算器。

# 5