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
- type ElementType
- type Form
- type Gui
- 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()`
Functions ¶
func NewRouter ¶
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)
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 ¶
Button adds a button to the box. Every button can hold a action, which is called, when the button is clicked.
func (*Box) Dropdown ¶
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) Input ¶
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 ¶
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) Table ¶
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)
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 ¶
Action takes a callback function. For input fields that function is called when the value changes.
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.
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 (*Gui) ServeHTTP ¶
func (g *Gui) ServeHTTP(w http.ResponseWriter, r *http.Request)
ServeHTTP implements the http handler interface
func (*Gui) Update ¶
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 VueComponent ¶
type VueComponent struct { Name string ElementType ElementType CompFunc func(GuiTemplate) *vuetemplate.Component }
Source Files ¶
Directories ¶
Path | Synopsis |
---|---|
example
|
|
gui
|
|
Package storage defines a object, which can be exported and imported as a JSON object.
|
Package storage defines a object, which can be exported and imported as a JSON object. |
Package vuetemplate allows to serve vue.js apps over a go api.
|
Package vuetemplate allows to serve vue.js apps over a go api. |