Tutorial 12

Write some static content.

Example

// Copyright (c) 2025 worldiety GmbH
//
// This file is part of the NAGO Low-Code Platform.
// Licensed under the terms specified in the LICENSE file.
//
// SPDX-License-Identifier: Custom-License

package main

import (
	"fmt"
	"strings"
	"time"

	"go.wdy.de/nago/application"
	"go.wdy.de/nago/presentation/core"
	heroOutline "go.wdy.de/nago/presentation/icons/hero/outline"
	. "go.wdy.de/nago/presentation/ui"
	"go.wdy.de/nago/presentation/ui/alert"
	"go.wdy.de/nago/web/vuejs"
)

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

		cfg.RootView(".", func(wnd core.Window) core.View {
			firstname := core.AutoState[string](wnd)
			basicInput := core.AutoState[string](wnd)
			secret := core.AutoState[string](wnd)
			showAlert := core.AutoState[bool](wnd)
			myIntState := core.AutoState[int64](wnd)
			myFloatState := core.AutoState[float64](wnd)

			// add artificial latency
			time.Sleep(time.Millisecond * 500)

			return VStack(
				VStack(
					alert.Dialog("Achtung", Text(fmt.Sprintf("Deine Eingabe: %v\nsecret: %v\n int-field: %v\n float-field: %v", firstname, secret, myIntState, myFloatState)), showAlert, alert.Ok()),

					// ================================================================ //

					TextField("hello world", firstname.Get()).
						InputValue(firstname).
						Placeholder("Placeholder blib").
						Leading(ImageIcon(heroOutline.UserCircle)).
						FullWidth(),

					TextField("hello world", firstname.Get()).
						InputValue(firstname).
						Placeholder("Placeholder blab").
						Optional(true).
						Leading(ImageIcon(heroOutline.UserCircle)).
						Trailing(ImageIcon(heroOutline.UserCircle)).
						FullWidth(),

					TextField("hello world", firstname.Get()).
						InputValue(firstname).
						Placeholder("Placeholder blub").
						Leading(ImageIcon(heroOutline.UserCircle)).
						Trailing(ImageIcon(heroOutline.UserCircle)).
						ErrorText("this is an error").
						FullWidth(),

					TextField("hello world", firstname.Get()).
						InputValue(firstname).
						Leading(ImageIcon(heroOutline.UserCircle)).
						Trailing(ImageIcon(heroOutline.UserCircle)).
						Disabled(true).
						FullWidth(),

					TextField("filled field", firstname.Get()).
						InputValue(firstname).
						Placeholder("Placeholder blib").
						Trailing(ImageIcon(heroOutline.UserCircle)).
						Style(TextFieldFilled).
						FullWidth(),

					TextField("filled field (disabled)", firstname.Get()).
						InputValue(firstname).
						Placeholder("Placeholder blib").
						Trailing(ImageIcon(heroOutline.UserCircle)).
						Style(TextFieldFilled).
						FullWidth().
						Disabled(true),

					// ================================================================ //

					// you can re-use the state, but be careful of the effects
					TextField("just numbers", numsOf(firstname.Get())).
						InputValue(firstname).
						KeyboardType(KeyboardInteger).
						Style(TextFieldReduced).
						FullWidth(),

					FloatField("just numbers (float)", myFloatState.Get(), myFloatState).
						KeyboardType(KeyboardFloat).
						Style(TextFieldReduced).
						FullWidth(),

					TextField("just numbers", numsOf(firstname.Get())).
						InputValue(firstname).
						KeyboardType(KeyboardInteger).
						Style(TextFieldReduced).
						ErrorText("this is an error").
						FullWidth(),

					TextField("just numbers", numsOf(firstname.Get())).
						InputValue(firstname).
						KeyboardType(KeyboardInteger).
						Style(TextFieldReduced).
						Disabled(true).
						FullWidth(),

					// ================================================================ //

					TextField("basic text field", basicInput.Get()).
						InputValue(basicInput).
						Style(TextFieldBasic).
						FullWidth(),

					TextField("basic text field", basicInput.Get()).
						InputValue(basicInput).
						Style(TextFieldBasic).
						ErrorText("this is an error").
						FullWidth(),

					TextField("basic text field", basicInput.Get()).
						InputValue(basicInput).
						Style(TextFieldBasic).
						Disabled(true).
						FullWidth(),

					// ================================================================ //

					// learn task: take your time to understand what
					// the difference between value and input value is
					IntField("int-field", 42, myIntState).FullWidth(),
					FloatField("float-field", 42.5, myFloatState).FullWidth(),

					TextField("text area", "hello\nworld").Lines(3).FullWidth(),
					TextField("text area filled", "hello\nworld").Lines(3).FullWidth().Style(TextFieldFilled),
					TextField("text area", "hello\nworld").Lines(3).Disabled(true).FullWidth(),
					TextField("text area", "hello\nworld").Lines(3).ErrorText("this is an error").FullWidth(),
					PrimaryButton(func() {
						showAlert.Set(true)
					}).Title("Check"),

					PasswordField("your secret", secret.Get()).InputValue(secret).FullWidth(),
					PasswordField("your secret filled", secret.Get()).InputValue(secret).FullWidth().Style(TextFieldFilled),
				).
					Gap(L16).
					Padding(Padding{}.Vertical(L32)).
					Frame(Frame{MaxWidth: L880}),
			).
				Frame(Frame{}.MatchScreen())
		})
	}).Run()
}

func numsOf(s string) string {
	var sb strings.Builder
	for _, r := range s {
		if r >= '0' && r <= '9' {
			sb.WriteRune(r)
		}
	}

	return sb.String()
}

Info

More static content.

Image