Best Practices for a Workflow-like series of screens

[PaulWaldo]

I have an application that displays a number of thumbnail photos on a photo sharing site. When the user taps a card, I show a larger version of the image and other data such as comments. Any of the information on this page can be selected then spawn a new detail view for the selected information. I envision this being many layers deep.

I'm currently supporting this by

1. creating the new child UI
2. setting the content of the main window to that UI

The problem comes in when you want to get back to a previous view or the main card view. Putting the card view back as the content of the window seems hacky and prone to a spaghetti mess. I'm thinking the mobile application paradigm of placing each view on a stack would work well here. The displayed view is the one at the top of the stack and "going back" means simply popping the current view off the stack.

I could implement this, but I don't want to reinvent the wheel. Is there a more straightforward way to implement this type of flow in an application?

[dweymouth]

There is no "standard"/builtin way to do this. What you describe will work, and there are a few apps out there, including mine, that have built something similar.

[PaulWaldo]

That makes a lot of sense Drew; I think I will move down that route. BTW, Supersonic is really nice!

[andydotxyz]

I would use the Window.Overlays API - that way each "deeper" context goes on top of the one before and can easily be taken "back" by removing the top item.

[PaulWaldo]

Both overlays are created with NewStack. The second overlay does not fully hide the first; it peeks through around the edges. Also, resizing the window is very laggy in redrawing.

[andydotxyz]

A laggy redraw is probably down to the content not the overlay - it does have to resize more layers but only a slow content would make a noticeable difference.

I'm not sure what the stack issue would be as the calculations on every layer would be the same.

[PaulWaldo]

Thanks Andy. I'll work on an example to solidify it my head. If you think it is useful, I'll create an additional tutorial for fyne_demo. Just out of curiosity I don't see a "Pop" or similar method on OverlayStack. I can probably derive it from the existing functions. Maybe I'm missing it?

[PaulWaldo]

I guess each overlay receives some events like Resize even if they are not at the top?

[andydotxyz]

All layers have to resize simultaneously because there is no requirement that each is fully opaque...

[PaulWaldo]

The conundrum is that I'm not grokking the opacity and sizing of a new overlay. Using this code

package main

import (
	"fmt"
	"image/color"
	"math/rand"

	"fyne.io/fyne/v2"
	"fyne.io/fyne/v2/app"
	"fyne.io/fyne/v2/canvas"
	"fyne.io/fyne/v2/container"
	"fyne.io/fyne/v2/widget"
)

func AddView(win fyne.Window) {
	col := color.RGBA{
		R: uint8(rand.Intn(256)),
		G: uint8(rand.Intn(256)),
		B: uint8(rand.Intn(256)),
		A: 255,
	}
	l := len(win.Canvas().Overlays().List())
	title := fmt.Sprintf("View %d", l+1)
	label := widget.NewLabel(title)

	homeButton := widget.NewButton("Home", func() {})
	homeButton.Disable()
	backButton := widget.NewButton("Back", func() {})
	backButton.Disable()
	addButton := widget.NewButton("Add", func() {
		AddView(win)
	})
	buttons := container.NewHBox(homeButton, backButton, addButton)

	content := container.NewBorder(label, buttons, nil, nil, canvas.NewCircle(col))
	win.Canvas().Overlays().Add(content)
}

func main() {
	app := app.New()
	win := app.NewWindow("Hello World")
	win.Resize(fyne.NewSize(400, 400))
	AddView(win)
	win.ShowAndRun()
}

I see that when a new overlay is added, it is not sized to fit the window. Additionally, see the label in the upper left; that shows that the new overlay is not fully opaque. What might I be missing?

[andydotxyz]

It does seem there may be a bug where the overlay does not resize your content initially - not sure how that could be true maybe we accidentally worked around that in other usage.

The opacity is absolutely correct - there is no solid colour applied between layers unless you add it - that is by design.

[PaulWaldo]

So I would have to add a layer in between each view that is a solid rectangle? If so, it seems that maybe the OverlayStack is not a good fit for my particular need. I appreciate you bearing with me Andy!

[dweymouth]

You probably do want something similar to my "BrowsingPane" component then, linked above. The idea is to have a container (could be just a simple Stack layout) where you swap out the "active" view and refresh, while keeping track of a stack (or list if you support Fwd/Back navigation) of the previous views, so you can restore them as needed. I have an optimization where I'm not saving the "screen" itself in the "history" but just the info needed to re-create it, so that if the browsing history gets arbitrarily deep, as it can in my app, it doesn't consume large amounts of memory.

[PaulWaldo]

I have this simplistic implementation that I think will work for me. My needs are not complicated as your's, Drew, so hopefully this will do the trick.

package main

import (
	"errors"

	"fyne.io/fyne/v2"
)

// ViewStack represents a stack data structure
type ViewStack struct {
	elements []*fyne.Container
	window   fyne.Window
}

// NewViewStack creates a new stack
func NewViewStack(window fyne.Window) *ViewStack {
	return &ViewStack{
		elements: []*fyne.Container{},
		window:   window,
	}
}

// First removes all elements from the stack except the first and displays it
// It does nothing if the stack is empty
func (v *ViewStack) First() {
	if !v.IsEmpty() {
		v.window.SetContent(v.elements[0])
	}
}

// Pop removes and returns the top element of the stack
// It returns an error if the stack is empty
func (v *ViewStack) Push(view *fyne.Container) {
	v.elements = append(v.elements, view)
	v.window.SetContent(view)
}

// Pop removes the top element of the stack, displays it in the window, and returns the element
// It returns an error if the stack is empty
func (v *ViewStack) Pop() (*fyne.Container, error) {
	if v.IsEmpty() {
		return nil, errors.New("stack is empty")
	}
	// Get the last element
	index := len(v.elements) - 1
	// Remove the last element
	v.elements = v.elements[:index]

	// Show the new top element
	element := v.elements[index-1]
	v.window.SetContent(element)
	return element, nil
}

// IsEmpty checks if the stack is empty
func (v *ViewStack) IsEmpty() bool {
	return len(v.elements) == 0
}

[andydotxyz]

You can put a background on your overlay using a stack container and a canvas.Rectangle