app

Build multiplatform apps with Go, HTML and CSS.

Table of Contents

1. Requirements
2. Install
3. Getting started
4. Documentation

Requirements:

• MacOS: 10.12 (Sierra) and the latest version of Xcode (mandatory for Apple frameworks).

Install

1. Install Golang:

   • golang.org
   • Homebrew (MacOS)

2. Get a driver:

   • MacOS: go get -u github.com/murlokswarm/mac
   • Windows: In progress
   • Linux: (Please contribute)
   • IOS: (Please contribute)
   • Android: (Please contribute)

Getting started

Import a driver

import (
	_ "github.com/murlokswarm/mac"
)

Create a component

type Hello struct {
	Greeting string
}

func (h *Hello) Render() string {
	return `
<div class="WindowLayout">    
    <div class="HelloBox">
        <h1>
            Hello,
            <span>{{if .Greeting}}{{html .Greeting}}{{else}}World{{end}}</span>
        </h1>
        <input type="text" placeholder="What is your name?" onchange="OnInputChange" />
    </div>
</div>
    `
}

func (h *Hello) OnInputChange(arg app.ChangeArg) {
	h.Greeting = arg.Value
	app.Render(h)
}

func init() {
	app.RegisterComponent(&Hello{})
}

Write the main

func main() {
	app.OnLaunch = func() {
		win := app.NewWindow(app.Window{
			Title:          "Hello World",
			Width:          1280,
			Height:         720,
			TitlebarHidden: true,
		})

		hello := &Hello{}
		win.Mount(hello)
	}

	app.Run()
}

Style your component

Create a CSS file in [PACKAGE PATH]/resources/css/ and write your styles.

resources/css/hello.css:

body {
    background-image: url("../bg1.jpg");
    background-size: cover;
    background-position: center;
    color: white;
    overflow: hidden;
}

.WindowLayout {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.HelloBox {
    padding: 20pt;
}

h1 {
    font-weight: 300;
}

input {
    width: 100%;
    padding: 5pt;
    border: 0;
    border-left: 2px solid silver;
    outline: none;
    font-size: 14px;
    background: transparent;
    color: white;
}

input:focus {
    border-left-color: deepskyblue;
}

Try it by cloning the full example.

Go to the cloned directory and type:

go build
./hello

Documentation

• Wiki
• GoDoc

More examples

• Jubiz