Skip to content
Combining Views

Combining Views

Combines images, texts and stacks into a simple profile page. The images are embedded into the binary and served with cfg.Resource. The test file shows how to benchmark the rendering of a view.

Combining Views

main.go

package main

import (
	_ "embed"
	"go.wdy.de/nago/application"
	"go.wdy.de/nago/presentation/core"
	. "go.wdy.de/nago/presentation/ui"
	"go.wdy.de/nago/web/vuejs"
)

//go:embed hummel.jpg
var hummelData application.StaticBytes

//go:embed gras.jpg
var grasData application.StaticBytes

func main() {
	application.Configure(func(cfg *application.Configurator) {
		cfg.SetApplicationID("de.worldiety.tutorial")
		cfg.Serve(vuejs.Dist())

		hummelUri := cfg.Resource(hummelData)
		grasUri := cfg.Resource(grasData)

		cfg.RootView(".", func(wnd core.Window) core.View {
			return VStack(
				Image().
					URI(grasUri).
					Frame(Frame{}.Size("", L320)),

				CircleImage(hummelUri).
					AccessibilityLabel("Hummel an Lavendel").
					Padding(Padding{Top: L160.Negate()}),

				VStack(
					Text("Hummel").
						Font(Title),

					HStack(
						Text("WZO Terrasse"),
						Spacer(),
						Text("Oldenburg"),
					).Font(Font{Size: L12}).
						Frame(Frame{}.FullWidth()),

					HLine(),
					Text("Es gibt auch").Font(Title),
					Text("Andere Viecher"),
				).Alignment(Leading).
					Frame(Frame{Width: L320}),
			).
				Frame(Frame{Height: ViewportHeight, Width: Full})

		})

	}).Run()
}

func CircleImage(data core.URI) DecoredView {
	return Image().
		URI(data).
		Border(Border{}.
			Shadow(L8).
			Color("#ffffff").
			Width(L4).
			Circle()).
		Frame(Frame{}.Size(L320, L320))

}

main_test.go

package main

import (
	"bytes"
	"fmt"
	"go.wdy.de/nago/presentation/core"
	"go.wdy.de/nago/presentation/proto"
	. "go.wdy.de/nago/presentation/ui"
	"testing"
	"time"
)

func BenchmarkCircleImage(b *testing.B) {
	b.ReportAllocs()
	for i := 0; i < b.N; i++ {
		render()
	}
}

func TestCircleImage(t *testing.T) {
	start := time.Now()
	const max = 100_000
	for i := 0; i < max; i++ {
		render()
	}

	elapsed := time.Since(start)
	fmt.Println("elapsed:", elapsed)
	fmt.Println("per render cycle:", elapsed/max)
}

func render() {
	var view core.View
	view = VStack(
		Image().
			URI("asdf").
			Frame(Frame{}.Size("", L320)),

		CircleImage("asdf").
			AccessibilityLabel("Hummel an Lavendel").
			Padding(Padding{Top: L160.Negate()}),

		VStack(
			Text("Hummel").
				Font(Title),

			HStack(
				Text("WZO Terrasse"),
				Spacer(),
				Text("Oldenburg"),
			).Font(Font{Size: L12}).
				Frame(Frame{}.FullWidth()),

			HLine(),
			Text("Es gibt auch").Font(Title),
			Text("Andere Viecher"),
		).Alignment(Leading).
			Frame(Frame{Width: L320}),
	).
		Frame(Frame{Height: ViewportHeight, Width: Full})

	node := view.Render(dummyCtx{})
	var buf bytes.Buffer
	w := proto.NewBinaryWriter(&buf)
	if err := proto.Marshal(w, node); err != nil {
		panic(err)
	}
}

type dummyCtx struct {
}

func (d dummyCtx) Window() core.Window {
	return nil
}

func (d dummyCtx) MountCallback(f func()) proto.Ptr {
	return 1
}

func (d dummyCtx) Handle(bytes []byte) (hnd proto.Ptr, created bool) {
	return 1, true
}

View on GitHub ↗ · run it with go run go.wdy.de/nago/example/cmd/tutorial-02-combining-views@latest