Home

Package to build multiplatform apps with Go, HTML and CSS.

Table of Contents

1. How it works?
   • Components
   • Contexts
   • Example
2. Package structure
3. Resources
   • In HTML markup
   • In Go code
   • CSS
   • Sass
   • Javascript
4. Packagers

How it works?

The idea is to write components which describe UI and mount them into contexts like a window.

Components

A component is a struct that represents a graphic element. It implements the app.Componer interface.

type Componer interface {
	Render() string
}

The Render method returns an HTML markup that describes the graphic interface. Components are displayed by being mounted into contexts.

See how to implement a component.

Contexts

Contexts are application elements which display graphical user interface. They can be a window, a menu, a dock, etc...

They implement the interface app.Contexter which defines their available interactions.

Example

// Component.
type Hello struct {
}

func (h *Hello) Render() string {
	return `<div>Hello World</div>`
}

// Create a window and mounts the Hello Component.
func main() {
	app.OnLaunch = func() {
		win := app.NewWindow(app.Window{
			Title:          "Hello World",
			Width:          1280,
			Height:         720,
		})

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

	app.Run()
}

Package structure

Packages creating executables should have this structure:

package/            # Your package.
    resources/      # Root for resources.
        css/        # All the .css files.
        scss/       # All the .scss files (optional).
        js/         # All the .js files (optional).
    main.go         # Your main.
    *.go            # Other .go files.

Resources

All app resources, css, images, etc... should be located into the resources directory.

In HTML markup

Filenames are relative to the resources directory.

type ProfilePicture struct {
}

func (p *ProfilePicture) Render() string {
    return `
<div>
    <img src="profile-pictures/myimage.png" />
</div>
    `
}

myimage.png location would be [your package]/resources/profile-pictures/myimage.png

In Go code

Unlike in HTML, resources directory is not the root directory by default. It should be accessed by app.Resources.

app.Resources()                          // The resources dir.
app.Resources().Path()                   // The path of the resources dir.
app.Resources().Join("css", "hello.css") // Will append the args to the resources dir.
                                         //   -> [your package]/resources/css/hello.css

The reason of this is when go build is called within the package in development, executable and resources directory will be in the same location.

[your package]/[exec]
[your package]/resources

When an app will be packaged, the resources directory might be in another location. It is the case on MacOS:

[app name].app/Contents/MacOS/[exec] # The exec location.
[app name].app/Contents/Resources    # The resources location.

app.Resources() allows to deal with the location of the resources directory without you getting worries of its current location.

CSS

.css files should be located in resources/css. They will be automatically included to the contexts with CSS support. eg windows.

Sass

.scss files should be located in resources/scss.

Require to install Sass.

Then use a packager like macpack with the option -sass.

macpack -sass

This will launch Sass with --watch mode on resources/scss with resources/css as target. All the .sass file will be transpiled to .css when modifications occurs.

Javascript

.js files should be located in resources/js. They will be automatically included to the contexts with Javascript support. eg windows.

Javascript should not be used. Nevertheless, it is allowed in case there is a problem that this framework could not solve yet.

Packagers

Packagers are command line tools to build and package the app.

• MacOS: macpack
• IOS: iospack - Not implemented
• Android: andropack - Not implemented
• Windows: winpack - Not implemented