embgui

package module
v0.5.9 Latest Latest
Warning

This package is not in the latest version of its module.

Go to latest
Published: Nov 20, 2021 License: MIT Imports: 6 Imported by: 0

README

EmbGUI - embedded GUI for Go apps.

Instant admin panels for Go apps. Turn plain Go code into HTML+CSS admin panel with a collection of common components and a predefined layout.

screenshot

Use case

  • EmbGUI is aimed primarily at microservices and APIs, that need to expose some stats or basic maintenance panel via HTTP HTML interface
  • it has all the assets embedded, it's very convenient when shipping a single binary with no external dependencies
  • it doesn't require to do any:
    • HTML
    • CSS
    • JS
    • layouts
    • resource embedding

Non-use cases

  • advanced admin panels and websites
  • JavaScript apps (there's no JS, just plain old server-side rendering)
  • unique, custom styled panels (this lib is highly opinionated and styling is very limited)
package main

import (
	"net/http"
	"github.com/gsiehien/embgui"
)

var ui *embgui.EmbGUI

// sample page
func index(w http.ResponseWriter, r *http.Request) {
	page := ui.NewRoot("Hello") // "Hello" option will be active on navbar
	page.H1("Hello!")
	page.P("Lorem...")
	form := page.Form("/newuser")
	form.FormInput("First Name", "first_name")
	form.FormButton("Send")
	table := page.GenTableBody([]string{"name", "surname", "action"})
	row := table.Tr()
	row.Td("hello")
	row.Td("world")
	row.Td("").LinkButton("Inspect", "#")
	html, _ := page.RenderPage() // skipping errors for a concise example
	w.Write([]byte(html))
}

// another page that shares ui template with index
func world(w http.ResponseWriter, r *http.Request) {
	page := ui.NewRoot("World") // "World" option will be active on the navbar
	page.H1("World!")
	page.GenTiles(embgui.Tile{Title: "7", Subtitle: "new users"},
		embgui.Tile{Title: "71", Subtitle: "new sales"},
		embgui.Tile{Title: "90", Subtitle: "CPU usage"},
		embgui.Tile{Title: "71", Subtitle: "disk free"})	
	tagWithUnsafeContent := page.P("<strong>hello!</strong>")
	tagWithUnsafeContent.Unsafe = true
	page.RawHTML("<p><i>hello world</i></p>")
	html, _ := page.RenderPage()
	w.Write([]byte(html))
}

// return embedded CSS data
// this will return gzipped bulma.io CSS that is embedded into embgui sources
func css(w http.ResponseWriter, r *http.Request) {
	w.Header().Set("Content-Type", "text/css")
	w.Header().Set("Content-Encoding", "gzip")
	w.Write([]byte(ui.CSS)) 
}

func main() {
	// template, shared among all views
	// remember, that you need to pass a link to CSS assets
	ui, _ = embgui.New("DEMO", "/app.css", []embgui.MenuItem{
		{Name: "Hello", Link: "/"},
		{Name: "World", Link: "/world"},
	})
	http.HandleFunc("/", index)
	http.HandleFunc("/world", world)
	// CSS assets used by embgui.New()
	http.HandleFunc("/app.css", css)
	if err := http.ListenAndServe(":8080", nil); err != nil {
		panic(err)
	}
}

This is still WIP! Things may change before it reaches 1.0.0!

Developent goals

  • keep the ease of use, it always has to be from 0 to GUI in minutes
  • no JavaScript, CSS only, keep everything server-side
  • don't introduce any external dependencies like web-fonts or APIs (it should work in environments with no public Internet access)
  • maintain compatibility with text-based browsers
  • add charts (server side rendered)
  • more components and elements!

Bulma

EmbGUI uses wonderful Bulma framework for layout and styling. It's gzipped and base64 encoded and will be compiled with your app. Don't worry, it's just 30kb. Bulma Framework is released at https://github.com/jgthms/bulma on MIT License (see css_file.go)

Documentation

Index

Constants

This section is empty.

Variables

This section is empty.

Functions

This section is empty.

Types

type EmbGUI

type EmbGUI struct {
	CSS        string
	Size       string
	NavTheme   string
	NavLink    string
	CustomHead string
	// contains filtered or unexported fields
}

EmbGUI is a HTML page, with one root EmbNode with many children

func New

func New(title string, cssLink string, menu []MenuItem) (*EmbGUI, error)

New creates a new page with a tile and a side menu usually it's defined once as a project-wide template you may customize NavTheme and NavLink after creation NavTheme uses bulma's colors (see https://bulma.io/documentation/elements/button/#colors) NavLink is a URL for navbar's title

func (*EmbGUI) NewRoot

func (gui *EmbGUI) NewRoot(menuOption string) *EmbNode

NewRoot creates a new EmbNode root node that belongs to a EmbGUI Page it's injected into template, so usually you need to create one root per view menuOption will be made active on navbar

type EmbNode

type EmbNode struct {
	Text        string
	Href        string
	Action      string
	Method      string
	HTMLTag     string
	Type        string
	Class       string
	Style       string
	Name        string
	ID          string
	Enctype     string
	Placeholder string
	Value       string
	Rows        int
	Unsafe      bool
	Root        bool

	GUIConfig *EmbGUI
	Children  []*EmbNode
	// contains filtered or unexported fields
}

EmbNode is a HTML element

func NewHandle added in v0.5.1

func NewHandle() *EmbNode

NewHandle generates an empty handle to generate headless partials

func (*EmbNode) A

func (n *EmbNode) A(text string, href string) *EmbNode

A generates a link

func (*EmbNode) ActionButton

func (n *EmbNode) ActionButton(text string, action string) *EmbNode

ActionButton generates POST button wrapped into a hidden form It's like LinkButton, but uses POST instead of GET

func (*EmbNode) Box

func (n *EmbNode) Box() *EmbNode

Box generates div-box element

func (*EmbNode) Buttons

func (n *EmbNode) Buttons() *EmbNode

Buttons generates <div> for button group

func (*EmbNode) CustomTag added in v0.5.1

func (n *EmbNode) CustomTag(tag string, id string, class string) *EmbNode

CustomTag generates a custom tag with id

func (*EmbNode) DelButton

func (n *EmbNode) DelButton(text string, action string) *EmbNode

DelButton generates DEL button wrapped into a hidden form your framework should support hidden _method tag

func (*EmbNode) Div

func (n *EmbNode) Div(id string, style string, text string) *EmbNode

Div generates <div> with custom id and styling

func (*EmbNode) Em added in v0.5.9

func (n *EmbNode) Em(text string) *EmbNode

Em generates <em> tag

func (*EmbNode) FileUpload added in v0.5.1

func (n *EmbNode) FileUpload(action string, label string, name string) *EmbNode

FileUpload generates a file upload form

func (*EmbNode) Form

func (n *EmbNode) Form(action string, method string) *EmbNode

Form generates simple form

func (*EmbNode) FormButton

func (n *EmbNode) FormButton(text string) *EmbNode

FormButton generates a submit button inside a form

func (*EmbNode) FormCheckbox added in v0.5.1

func (n *EmbNode) FormCheckbox(label string, name string) *EmbNode

FormCheckbox generates a checkbox inside form

func (*EmbNode) FormInput

func (n *EmbNode) FormInput(label string, hideLabel bool, name string, value string) *EmbNode

FormInput generates a text input inside form

func (*EmbNode) FormRadio added in v0.5.1

func (n *EmbNode) FormRadio(label string, name string) *EmbNode

FormRadio generates radio wrapper inside form Use with FormRadioOption

func (*EmbNode) FormRadioOption added in v0.5.1

func (n *EmbNode) FormRadioOption(label string, name string) *EmbNode

FormRadioOption add radio option inside radio wrapper

func (*EmbNode) FormSelect added in v0.5.1

func (n *EmbNode) FormSelect(label string, name string) *EmbNode

FormSelect generates select inside form Use with FormSelectOption

func (*EmbNode) FormSelectOption added in v0.5.1

func (n *EmbNode) FormSelectOption(value string, text string) *EmbNode

FormSelectOption add option inside select html tag

func (*EmbNode) FormTextArea

func (n *EmbNode) FormTextArea(name string, rows int, text string) *EmbNode

FormTextArea generates a textarea inside a form

func (*EmbNode) GenTableBody

func (n *EmbNode) GenTableBody(header []string) *EmbNode

GenTableBody helps generate html table it returns tbody from inside the table, not the table itself, so you can add Tr/Td to it

tbody := page.GenTableBody([]string{"id", "name", "surname"})
row := tbody.Tr()
row.Td("1")
row.Td("john")
row.Td("smith")

func (*EmbNode) GenTiles

func (n *EmbNode) GenTiles(data ...Tile) *EmbNode

GenTiles generates set of tiles

page.GenTiles(embgui.Tile{Title: "7", Subtitle: "new users"},
embgui.Tile{Title: "71", Subtitle: "new sales"},
embgui.Tile{Title: "90%", Subtitle: "CPU usage"},
embgui.Tile{Title: "71%", Subtitle: "disk free"})

func (*EmbNode) H1

func (n *EmbNode) H1(text string) *EmbNode

H1 generates <h1> tag

func (*EmbNode) H2

func (n *EmbNode) H2(text string) *EmbNode

H2 generates <h2> tag

func (*EmbNode) H3

func (n *EmbNode) H3(text string) *EmbNode

H3 generates <h3> tag

func (*EmbNode) H4

func (n *EmbNode) H4(text string) *EmbNode

H4 generates <h4> tag

func (*EmbNode) H5

func (n *EmbNode) H5(text string) *EmbNode

H5 generates <h5> tag

func (*EmbNode) HeadlessRender added in v0.5.1

func (n *EmbNode) HeadlessRender() string

HeadlessRender HTML element and its child nodes if you don't want to escape text inside the tag, set Unsafe to true

func (*EmbNode) Hr

func (n *EmbNode) Hr() *EmbNode

Hr generates a horizontal rule

func (*EmbNode) Li

func (n *EmbNode) Li(text string) *EmbNode

Li adds element to list

func (*EmbNode) LinkButton

func (n *EmbNode) LinkButton(text string, href string) *EmbNode

LinkButton generates a link styled as button

func (*EmbNode) Message

func (n *EmbNode) Message(text string, color string) *EmbNode

Message generates pre-styled message/tip div - alerts etc color can be one of bulma's colors (see https://bulma.io/documentation/elements/button/#colors)

func (*EmbNode) MiniActionButton

func (n *EmbNode) MiniActionButton(text string, action string) *EmbNode

MiniActionButton generates POST button wrapped into a hidden form it's good for buttons inside tables

func (*EmbNode) MiniDelButton

func (n *EmbNode) MiniDelButton(text string, action string) *EmbNode

MiniDelButton generates DEL button wrapped into a hidden form it's good for buttons inside tables your framework should support hidden _method tag

func (*EmbNode) MiniLinkButton

func (n *EmbNode) MiniLinkButton(text string, href string) *EmbNode

MiniLinkButton generates a link styled as button, just like LinkButton(), but smaller it's good for links inside tables

func (*EmbNode) P

func (n *EmbNode) P(text string) *EmbNode

P generates <p> tag

func (*EmbNode) Pre

func (n *EmbNode) Pre(text string, class string) *EmbNode

Pre generates <pre><code> tags

func (*EmbNode) RawHTML

func (n *EmbNode) RawHTML(html string) *EmbNode

RawHTML generates a div with unsafe HTML

func (*EmbNode) RenderPage

func (n *EmbNode) RenderPage() (string, error)

RenderPage renders template with top-menu, root EmbNode element and its children

func (*EmbNode) SearchForm

func (n *EmbNode) SearchForm(action string, value string) *EmbNode

SearchForm generates predefined search form action is a URL we use to do a GET request with a "search" param

func (*EmbNode) Strong added in v0.5.9

func (n *EmbNode) Strong(text string) *EmbNode

Strong generates <strong> tag

func (*EmbNode) Td

func (n *EmbNode) Td(text string) *EmbNode

Td table element

func (*EmbNode) Tr

func (n *EmbNode) Tr() *EmbNode

Tr table element

func (*EmbNode) TwoColumns

func (n *EmbNode) TwoColumns() (*EmbNode, *EmbNode)

TwoColumns generates 2 column layout and returns 2 EmbNode pointers

col1, col2 := TwoColumns()
col1.H1("hello")
col2.H2("world")

func (*EmbNode) Ul

func (n *EmbNode) Ul() *EmbNode

Ul starts a list

type MenuItem struct {
	Name string
	Link string
}

MenuItem is an singe item in the top menu

type Tile

type Tile struct {
	Title    string
	Subtitle string
}

Tile represents single tile https://bulma.io/documentation/layout/tiles/ see GenTiles()

Directories

Path Synopsis
examples

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL