/app

Package to create apps with GO, HTML and CSS.

Primary LanguageGoMIT LicenseMIT

app

app

Build Status Go Report Card Coverage Status GoDoc

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:

  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

hello

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

More examples