gowd

package module
v0.0.0-...-4271bc0 Latest Latest
Warning

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

 Go to latest Published: Aug 7, 2022 License: MIT Imports: 12 Imported by: 16

README

gowd

Build cross platform GUI apps with GO and HTML/JS/CSS (powered by nwjs)

CircleCI Go Report Card GoDoc

How to use this library:
  1. Download and install nwjs
  2. Install this library go get github.com/dtylman/gowd
  3. Clone this repo.
  4. Place package.json, index.html, main.go and main.js from template in a new folder.
  5. go build
  6. Edit main.js and set goBinary to your your executable name: 
    var goBinary = "./template"; //or template.exe
  7. Run nw ., the hello world template should appear: hello-world
Usage

Simplest "hello world":


import "github.com/dtylman/gowd"

func main() {
	body, err := gowd.ParseElement("<h1>Hello world</h1>", nil)
	if err != nil {
		panic(err)
	}
	gowd.Run(body)
}

Adding a button:


import (
	"github.com/dtylman/gowd"
)

func main() {
	body, err := gowd.ParseElement("<h1>Hello world</h1>", nil)
	if err != nil {
		panic(err)
	}
	p := body.AddElement(gowd.NewElement("p"))
	btn := p.AddElement(gowd.NewElement("button"))
	btn.SetText("Click me")
	btn.OnEvent(gowd.OnClick, btnClicked)
	gowd.Run(body)
}

func btnClicked(sender *gowd.Element, event *gowd.EventElement) {
	sender.SetText("Clicked!")
}

Creating and binding from HTML:

import (
	"github.com/dtylman/gowd"
	"fmt"
)

func main() {
	body, err := gowd.ParseElement("<h1>Hello world</h1>", nil)
	if err != nil {
		panic(err)
	}
	p := body.AddElement(gowd.NewElement("p"))
	em := gowd.NewElementMap()
	p.AddHtml(`<select id="select1">
		<option value="" disabled="disabled" selected="selected">Please select a name</option>
		<option value="1">One</option>
		<option value="2">Two</option>
		</select>`, em)
	em["select1"].OnEvent(gowd.OnChange, btnClicked)
	em["select1"].Object = body
	gowd.Run(body)
}

func btnClicked(sender *gowd.Element, event *gowd.EventElement) {
	body := sender.Object.(*gowd.Element)
	body.AddElement(gowd.NewStyledText(fmt.Sprintf("Selected %s", event.GetValue()), gowd.BoldText))
	body.AddElement(gowd.NewElement("br"))
}

Using bootstrap:

'gowd' supports creating bootstrap elements using the bootstrap package.

First, add bootsrap css and js to your index.html file:

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

Then you can create bootsrap items:


import (
	"github.com/dtylman/gowd"

	"github.com/dtylman/gowd/bootstrap"
	"time"
	"fmt"
)

var body *gowd.Element

func main() {
	//creates a new bootstrap fluid container
	body = bootstrap.NewContainer(false)
	// add some elements using the object model
	div := bootstrap.NewElement("div", "well")
	row := bootstrap.NewRow(bootstrap.NewColumn(bootstrap.ColumnLarge, 6, div))
	body.AddElement(row)
	// add some other elements from HTML
	div.AddHTML(`<div class="dropdown">
	<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
	<span class="caret"></span></button>
	<ul class="dropdown-menu" id="dropdown-menu">
	<li><a href="#">HTML</a></li>
	<li><a href="#">CSS</a></li>
	<li><a href="#">JavaScript</a></li>
	</ul>
	</div>`, nil)
	// add a button to show a progress bar
	btn := bootstrap.NewButton(bootstrap.ButtonPrimary, "Start")
	btn.OnEvent(gowd.OnClick, btnClicked)
	row.AddElement(bootstrap.NewColumn(bootstrap.ColumnLarge, 4, bootstrap.NewElement("div", "well", btn)))

	//start the ui loop
	gowd.Run(body)
}

// happens when the 'start' button is clicked
func btnClicked(sender *gowd.Element, event *gowd.EventElement) {
	// adds a text and progress bar to the body 
	text := body.AddElement(gowd.NewStyledText("Working...", gowd.BoldText))
	progressBar := bootstrap.NewProgressBar()
	body.AddElement(progressBar.Element)
	
	// makes the body stop responding to user events
	body.Disable()
	
	// clean up - remove the added elements
	defer func() {
		body.RemoveElement(text)
		body.RemoveElement(progressBar.Element)
		body.Enable()
	}()

	// render the progress bar
	for i := 0; i <= 123; i++ {
		progressBar.SetValue(i, 123)
		text.SetText(fmt.Sprintf("Working %v", i))
		time.Sleep(time.Millisecond * 20)
		// this will cause the body to be refreshed
		body.Render()
	}

}

This will yield the following app:

Simple

More a more advanced usage, see the Todo sample

TodoMVC

Documentation

Index

Constants

View Source 
const (
	//OnClick onclick event
	OnClick = "onclick"
	//OnChange onchange event
	OnChange = "onchange"
	//OnKeyPress onkeypress event
	OnKeyPress = "onkeypress"
)
View Source 
const (
	//BoldText <b>
	BoldText = "b"
	//StrongText <strong>
	StrongText = "strong"
	//ItalicText <i>
	ItalicText = "i"
	//EmphasizedText <em>
	EmphasizedText = "em"
	//MarkedText <mark>
	MarkedText = "mark"
	//SmallText <small>
	SmallText = "small"
	//DeletedText <del>
	DeletedText = "del"
	//InsertedText <ins>
	InsertedText = "ins"
	//SubscriptText <sub>
	SubscriptText = "sub"
	//SuperscriptText <sup>
	SuperscriptText = "sup"
	//TitleText <title>
	TitleText = "title"
	//Paragraph <p>
	Paragraph = "p"
	//Heading1 <h1>
	Heading1 = "h1"
	//Heading2 <h2>
	Heading2 = "h2"
	//Heading3 <h3>
	Heading3 = "h3"
	//Heading4 <h4>
	Heading4 = "h4"
	//Heading5 <h5>
	Heading5 = "h5"
	//Heading6 <h6>
	Heading6 = "h6"
)

Variables

View Source 
var (
	//Order counts the number of elements rendered (for generating auto-ids)
	Order int
	//Output output render target (configurable for unit-tests)
	Output io.Writer = os.Stdout
)

Functions

func Alert 

func Alert(text string)

Alert calls javascript alert now

func ExecJS 

func ExecJS(js string)

ExecJS executes JS code after a DOM update from gowd

func ExecJSNow 

func ExecJSNow(js string)

ExecJSNow Executes JS code in NWJS without waiting for a DOM update to be finished.

func Run 

func Run(body *Element) error

Run starts the message loop with body as the root element. This function never exits.

Types

type Element 

type Element struct {
	//Parent the parent element
	Parent *Element

	//Kids child elements
	Kids []*Element
	//Attributes element attributes...
	Attributes []html.Attribute
	//Object arbitrary user object that can be associated with element.
	Object interface{}

	//Hidden if true the element will not be rendered
	Hidden bool
	// contains filtered or unexported fields
}

Element represents a DOM element and its state.

func NewElement 

func NewElement(tag string) *Element

NewElement creates a new HTML element

func NewElementFromNode 

func NewElementFromNode(node *html.Node, em ElementsMap) *Element

NewElementFromNode creates an element from existing node

func NewStyledText 

func NewStyledText(text string, style string) *Element

NewStyledText creates new text element using a specific style

func NewText 

func NewText(text string) *Element

NewText creates new text node (without HTML tag)

func ParseElement 

func ParseElement(innerHTML string, em ElementsMap) (*Element, error)

ParseElement parses an html with only one root tag, returns the root element.

func ParseElementFromFile 

func ParseElementFromFile(fileName string, em ElementsMap) (*Element, error)

ParseElementFromFile like ParseElement, but reads input from a file

func ParseElements 

func ParseElements(r io.Reader, em ElementsMap) ([]*Element, error)

ParseElements parse an html fragment and return a list of elements

func (*Element) AddElement 

func (e *Element) AddElement(elem *Element) *Element

AddElement adds a child element

func (*Element) AddHTML 

func (e *Element) AddHTML(innerHTML string, em ElementsMap) ([]*Element, error)

AddHTML parses the provided element and adds it to the current element. Returns a list of root elements from `html`. If em is not nil, for each HTML tag that has the `id` attribute set the corresponding element will be stored in the given ElementMap.

func (*Element) AutoFocus 

func (e *Element) AutoFocus()

AutoFocus adds the auto-focus atribute to the element

func (*Element) Disable 

func (e *Element) Disable()

Disable sets the `disabled` attribute

func (*Element) Enable 

func (e *Element) Enable()

Enable unsets the `disabled` attribute

func (*Element) Find 

func (e *Element) Find(id string) *Element

Find returns the kid, or offspring with a specific `id` attribute value.

func (*Element) GetAttribute 

func (e *Element) GetAttribute(key string) (string, bool)

GetAttribute returns value for attribute

func (*Element) GetID 

func (e *Element) GetID() string

GetID returns the value of the `id` attribute

func (*Element) GetValue 

func (e *Element) GetValue() string

GetValue returns the value of the `value` attribute

func (*Element) Hide 

func (e *Element) Hide()

Hide if set, will not render the element.

func (*Element) OnEvent 

func (e *Element) OnEvent(event string, handler EventHandler)

OnEvent register an DOM element event.

func (*Element) OnKeyPressEvent 

func (e *Element) OnKeyPressEvent(event string, keyCode int, handler EventHandler)

OnKeyPressEvent register handler as an OnKeyPressed event.

func (*Element) ProcessEvent 

func (e *Element) ProcessEvent(event *Event)

ProcessEvent fires the event provided

func (*Element) RemoveAttribute 

func (e *Element) RemoveAttribute(key string)

RemoveAttribute removes the provided attribute by name

func (*Element) RemoveElement 

func (e *Element) RemoveElement(elem *Element)

RemoveElement remove a specific kid

func (*Element) RemoveElements 

func (e *Element) RemoveElements()

RemoveElements remove all kids.

func (*Element) Render 

func (e *Element) Render() error

Render renders the element.

func (*Element) SetAttribute 

func (e *Element) SetAttribute(key, val string)

SetAttribute adds or set the attribute

func (*Element) SetAttributes 

func (e *Element) SetAttributes(event *EventElement)

SetAttributes sets attributes from an event element.

func (*Element) SetClass 

func (e *Element) SetClass(class string)

SetClass adds the given class name to the class attribute.

func (*Element) SetElement 

func (e *Element) SetElement(elem *Element) *Element

SetElement removes all child elemens and adds elem as first child

func (*Element) SetID 

func (e *Element) SetID(id string)

SetID sets the `id` attribute

func (*Element) SetText 

func (e *Element) SetText(text string)

SetText Sets the element to hold ONLY the provided text

func (*Element) SetValue 

func (e *Element) SetValue(val string)

SetValue sets the 'value' attribute

func (*Element) Show 

func (e *Element) Show()

Show if set, will render the element.

func (*Element) UnsetClass 

func (e *Element) UnsetClass(class string)

UnsetClass removes the given class name from the class attribute

type ElementsMap 

type ElementsMap map[string]*Element

ElementsMap maps Elements by their `id` attributes

func NewElementMap 

func NewElementMap() ElementsMap

NewElementMap creates a new ElementMap

type Event 

type Event struct {
	Name   string         `json:"name"`
	Sender EventElement   `json:"sender"`
	Inputs []EventElement `json:"inputs"`
}

Event represents a DOM event

type EventElement 

type EventElement struct {
	Properties map[string]string `json:"properties"`
}

EventElement represents the DOM element sending an event

func (*EventElement) GetID 

func (e *EventElement) GetID() string

GetID get the id of the event sender.

func (*EventElement) GetValue 

func (e *EventElement) GetValue() string

GetValue gets the value of the event sender.

type EventHandler 

type EventHandler func(sender *Element, event *EventElement)

EventHandler handler for DOM event.

Source Files

View all Source files

Directories

Path Synopsis
cmd
sampleapp
template
todomvc

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.