govuegui

README

govuegui

A web GUI for Go

Important

This project is still in development and not production ready. You can try it and you can use it for simple internal apps or prototyping. But there are still a lot of open issues.

Target of this project

The idea to use a browser as a gui is not new. For example Electron uses the same principle. It includes a chrome browser and a node.js server. Because of that the binaries are huge. Why not use the allready installed browser? So govuegui just includes a server which is talking to the browser via a websocket connection.

The api of govuegui should be very simple that it is very easy to use.

Used projects

This package includes following great project:

• Bulma as CSS library
• Gorillatoolkit for the websocket

Documentation

Overview

Package govuegui provides a simple gui, which can be used via a http server inside the browser. There are three different elements for building the gui. Every level gets a identifier as a string.

First level is the Form. Every Form has one submit button. A form can have boxes. It depends on the implementation how the boxes are rendered.

Inside of a box the fields are defined.

The api let's you define everything on a very simple way:

  Form("abc").Box("cde").Input("name").Value("myvalue")
  Form("abc").Box("cde").Input("name").BindString(myString)
  Form("abc").Box("cde").Textarea("name2").Value("myvalue")
  Form("abc").Box("cde").Select("name2").Option("val1", "Value1")
  Form("abc").Box("cde").Select("name2").Option("val2", "Value2")
  Form("abc").Box("cde").Select("name2").Option("val3", "Value3")
  Form("abc").Box("cde").Button("Click me").Action(func(gui *govuegui.Gui){
	    // do something when the Button is clicked
    })

The gui will be show up inside the browser of the user as a webapp. The app uses vuejs with a websocket connection.

Index

• Constants
• Variables
• func NewRouter(g *Gui) *mux.Router
• func Serve(g *Gui) error
• type Box
  • func (b *Box) Button(id string) *Element
  • func (b *Box) Clear()
  • func (b *Box) Dropdown(id string) *Element
  • func (b *Box) Element(id string, inputType ElementType) *Element
  • func (b *Box) ID() string
  • func (b *Box) Input(id string) *Element
  • func (b *Box) List(id string) *Element
  • func (b *Box) Option(opt string, values ...string) *Box
  • func (b *Box) Table(id string) *Element
  • func (b *Box) Text(id string) *Element
  • func (b *Box) Textarea(id string) *Element
• type Element
  • func (e *Element) Action(f func(*Gui)) *Element
  • func (e *Element) Get() interface{}
  • func (e *Element) ID() string
  • func (e *Element) Option(opt string, values ...string) *Element
  • func (e *Element) Set(i interface{}) error
  • func (e *Element) SetLabel(l string)
  • func (e *Element) Update() *Element
• type ElementType
• type Form
  • func (f *Form) Box(id string) *Box
  • func (f *Form) ID() string
  • func (f *Form) Option(opt string, values ...string) *Form
• type Gui
  • func NewGui(t GuiTemplate) *Gui
  • func (g *Gui) Form(id string) *Form
  • func (g *Gui) Marshal() ([]byte, error)
  • func (g *Gui) ServeHTTP(w http.ResponseWriter, r *http.Request)
  • func (g *Gui) Update(dataKeys ...string) error
• type GuiTemplate
• type Option
• type VueComponent

Constants

const (
	INPUT    ElementType = "GVGINPUT"
	TEXTAREA             = "GVGTEXTAREA"
	TEXT                 = "GVGTEXT"
	TABLE                = "GVGTABLE"
	LIST                 = "GVGLIST"
	DROPDOWN             = "GVGDROPDOWN"
	BUTTON               = "GVGBUTTON"
)

Defining the allowed ElementTypes. The value of each type is used inside the vueapp.

Variables

var DefaultPathPrefix = "/govuegui"

DefaultPathPrefix defines the prefix for the all gui specific tasks

var DefaultServerPort = ":2700"

DefaultServerPort defines the port of the gui server, when using `govuegui.Serve()`

var VueComponents = []VueComponent{
	{"gvginput", INPUT, nil},
	{"gvgtextarea", TEXTAREA, nil},
	{"gvgtext", TEXT, nil},
	{"gvgtable", TABLE, nil},
	{"gvgdropdown", DROPDOWN, nil},
	{"gvglist", LIST, nil},
	{"gvgbutton", BUTTON, vuegvgbutton},
}

Functions

func NewRouter

func NewRouter(g *Gui) *mux.Router

NewRouter returns a router from the gorillatoolkit http://www.gorillatoolkit.org/pkg/mux The router already includes all the paths which are needed for the gui. It can be called like:

r := govuegui.NewRouter()
// Add you own routes
r.HandleFunc("/products/{key}", ProductHandler)

func Serve

func Serve(g *Gui) error

Serve wraps the http.ListenAndServe() function, but adds the routes for the gui.

Types

type Box

type Box struct {
	Key     string             `json:"id"`
	Options map[string]*Option `json:"options"`

	Elements []*Element `json:"elements"`
	// contains filtered or unexported fields
}

Box is the way elements are grouped. Every Element

func (*Box) Button

func (b *Box) Button(id string) *Element

Button adds a button to the box. Every button can hold a action, which is called, when the button is clicked.

func (*Box) Clear

func (b *Box) Clear()

Clear removes all elements from the box.

func (*Box) Dropdown

func (b *Box) Dropdown(id string) *Element

Dropdown adds a dropdown element to the box. All the entries of the dropdown list needs to be added via the Option() method.

dropdown := gui.Form("myForm").Box("Box1").Dropdown("MyDropdown")
dropdown.Option("key1", "Value 1")
dropdown.Option("key2", "Value 2")
dropdown.Option("key3", "Value 3")

The first argument specifies the key, which will be returned.

func (*Box) Element

func (b *Box) Element(id string, inputType ElementType) *Element

Element adds a element of ElementType to the box.

func (*Box) ID

func (b *Box) ID() string

ID returns the id of the box

func (*Box) Input

func (b *Box) Input(id string) *Element

Input adds a simple html input field to the box. The field is watched, so every change is submited from the browser and is availiable inside your go app. If you add a action to this field, the action is called everytime the field changes.

func (*Box) List

func (b *Box) List(id string) *Element

List renders a html list. That the list is correct rendered you need to pass a slice of string into it.

list := []string{"one", "two", "three"}
gui.Form("myForm").Box("Box1").List("myTable").Set(list)

func (*Box) Option

func (b *Box) Option(opt string, values ...string) *Box

func (*Box) Table

func (b *Box) Table(id string) *Element

Table adds a html table inside to the box. That the table is correct rendered you need to pass a [][]string into via the set method. The first slice will be rendered as table header.

  table := [][]string{
		{"name", "age", "country"}, // is rendered as header
		{"Andreas", "27", "Germany"},
		{"Bob", "22", "Austria"},
		}
  gui.Form("myForm").Box("Box1").Table("myTable").Set(table)

func (*Box) Text

func (b *Box) Text(id string) *Element

Text enables you to write text on the gui. HTML tags are allowed.

func (*Box) Textarea

func (b *Box) Textarea(id string) *Element

Textarea is analog like the input field, just as a html textarea. The field is watched so every change is submited.

type Element

type Element struct {
	Key     string `json:"-"`
	DataKey string `json:"id"`
	Label   string `json:"label"`
	Watch   bool   `json:"watch"`

	InputType ElementType        `json:"type"`
	Options   map[string]*Option `json:"options"`
	// contains filtered or unexported fields
}

Element represents a simple html element. The element is not defined directly. It always is initialized via a Box type.

// The element of the type INPUT is created via the Input() method of the Box type.
inputElement := gui.Form("myForm").Box("myBox").Input("Input")

func (*Element) Action

func (e *Element) Action(f func(*Gui)) *Element

Action takes a callback function. For input fields that function is called when the value changes.

func (*Element) Get

func (e *Element) Get() interface{}

Get returns a value out from the gui.

func (*Element) ID

func (e *Element) ID() string

ID returns the id of the element

func (*Element) Option

func (e *Element) Option(opt string, values ...string) *Element

Option sets the given values as option

func (*Element) Set

func (e *Element) Set(i interface{}) error

Set takes a value for rendering inside a element of the gui.

func (*Element) SetLabel

func (e *Element) SetLabel(l string)

SetLabel changes the label of the element inside the gui. The default value of the label is always the id.

func (*Element) Update

func (e *Element) Update() *Element

Update is the method to let the gui send the value from the gui server to the browser.

type ElementType

type ElementType string

ElementType defines the

type Form

type Form struct {
	Key     string             `json:"id"`
	Options map[string]*Option `json:"options"`

	Boxes []*Box
	// contains filtered or unexported fields
}

Form is the first level of grouping everything.

func (*Form) Box

func (f *Form) Box(id string) *Box

Box returns the pointer to the box with the given id. If there is no box with that id, a new one is created.

func (*Form) ID

func (f *Form) ID() string

ID returns the id of the form

func (*Form) Option

func (f *Form) Option(opt string, values ...string) *Form

type Gui

type Gui struct {
	PathPrefix string `json:"-"`
	ServerPort string `json:"-"`
	Title      string
	Forms      []*Form
	Data       *storage.Data
	UpdateData *storage.Data

	Actions map[string]func(*Gui) `json:"-"`
	// contains filtered or unexported fields
}

Gui groups different forms together.

func NewGui

func NewGui(t GuiTemplate) *Gui

NewGui returns a pointer to a new instance of a gui

func (*Gui) Form

func (g *Gui) Form(id string) *Form

Form returns the pointer to a form. If the id exists the existing Form is used.

func (*Gui) Marshal

func (g *Gui) Marshal() ([]byte, error)

Marshal wraps the json marshal method.

func (*Gui) ServeHTTP

func (g *Gui) ServeHTTP(w http.ResponseWriter, r *http.Request)

ServeHTTP implements the http handler interface

func (*Gui) Update

func (g *Gui) Update(dataKeys ...string) error

Update sends the values of the gui to the websocket. The dataKeys are defining, which field are going to be updated. It is also possible to call that function without arguments, then everything will be updated. The update of all fields has to be used carefully, because that update overwrites also user inputs, which are not submited.

type GuiTemplate

type GuiTemplate struct {
	CSSHandler  func(w http.ResponseWriter, r *http.Request)
	CustomCSS   string
	Files       map[string]func(w http.ResponseWriter, r *http.Request)
	HeadAdd     string
	Body        string
	GvgForms    string
	GvgForm     string
	GvgBox      string
	GvgElement  string
	GvgButton   string
	GvgList     string
	GvgDropdown string
	GvgTable    string
	GvgText     string
	GvgTextarea string
	GvgInput    string
}

GuiTemplate is an abstraction on everything which is design specific. To let the design of the gui be more flexible.

type Option

type Option struct {
	Option string
	Values []string
}

Option holds the one option of a element

type VueComponent

type VueComponent struct {
	Name        string
	ElementType ElementType
	CompFunc    func(GuiTemplate) *vuetemplate.Component
}