Home

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

Table of Contents

1. How it works?
   • Components
   • Contexts
   • Example
2. Package structure
   • CSS
   • Sass
   • Javascript
3. Storage
   • Resources in Markup
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. Should contain only files related to app functionment.
        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.

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.

Storage

Storage represents the interface to get the directories that an app could interact with.

func Storage() Storer


type Storer interface {
	// Resources returns resources directory filename.
	// Represents the root location where files related to the operation of
	// the app should be located.
	Resources() string

	// CSS returns the location where the .css files should be located.
	CSS() string

	// JS returns the location where the .js files should be located.
	JS() string

	// Storage returns the root location where common files should be stored.
	// eg db, cache, downloaded content.
	Default() string
}

Example

// Get the default storage directory name.
app.Storage().Default()

Resources in 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

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