- Notifications
You must be signed in to change notification settings - Fork42
Build cross platform GUI apps with GO and HTML/JS/CSS (powered by nwjs)
License
NotificationsYou must be signed in to change notification settings
dtylman/gowd
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Build cross platform GUI apps with GO and HTML/JS/CSS (powered bynwjs)
- Download and installnwjs
- Install this library
go get github.com/dtylman/gowd - Clone this repo.
- Place
package.json,index.html,main.goandmain.jsfromtemplate in a new folder. go build- Edit
main.jsand setgoBinaryto your your executable name:vargoBinary="./template";//or template.exe
- Run
nw ., the hello world template should appear:
Simplest "hello world":
import"github.com/dtylman/gowd"funcmain() {body,err:=gowd.ParseElement("<h1>Hello world</h1>",nil)iferr!=nil {panic(err)}gowd.Run(body)}
Adding a button:
import ("github.com/dtylman/gowd")funcmain() {body,err:=gowd.ParseElement("<h1>Hello world</h1>",nil)iferr!=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)}funcbtnClicked(sender*gowd.Element,event*gowd.EventElement) {sender.SetText("Clicked!")}
Creating and binding from HTML:
import ("github.com/dtylman/gowd""fmt")funcmain() {body,err:=gowd.ParseElement("<h1>Hello world</h1>",nil)iferr!=nil {panic(err)}p:=body.AddElement(gowd.NewElement("p"))em:=gowd.NewElementMap()p.AddHtml(`<select><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=bodygowd.Run(body)}funcbtnClicked(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 thebootstrap package.
First, add bootsrap css and js to yourindex.html file:
<scripttype="text/javascript"src="js/jquery.min.js"></script><linkrel="stylesheet"type="text/css"href="css/bootstrap.min.css"/><scripttype="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")varbody*gowd.Elementfuncmain() {//creates a new bootstrap fluid containerbody=bootstrap.NewContainer(false)// add some elements using the object modeldiv:=bootstrap.NewElement("div","well")row:=bootstrap.NewRow(bootstrap.NewColumn(bootstrap.ColumnLarge,6,div))body.AddElement(row)// add some other elements from HTMLdiv.AddHTML(`<div><button type="button" data-toggle="dropdown">Dropdown Example<span></span></button><ul><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 barbtn:=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 loopgowd.Run(body)}// happens when the 'start' button is clickedfuncbtnClicked(sender*gowd.Element,event*gowd.EventElement) {// adds a text and progress bar to the bodytext:=body.AddElement(gowd.NewStyledText("Working...",gowd.BoldText))progressBar:=bootstrap.NewProgressBar()body.AddElement(progressBar.Element)// makes the body stop responding to user eventsbody.Disable()// clean up - remove the added elementsdeferfunc() {body.RemoveElement(text)body.RemoveElement(progressBar.Element)body.Enable()}()// render the progress barfori:=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 refreshedbody.Render()}}
This will yield the following app:
More a more advanced usage, see theTodo sample
