Flexbox - like layout API

[fyne-io]

Flexbox - like layout API

[ohir]

@andydotxyz

The long term plan was to use Cassowary [...]
[Flexbox] why it wouldn’t be appropriate?

Because of the technical debt to pay in years to come. Fyne is still a newborn and currently has no 'default layout engine'. Any that will come will hook up all user base. So if Flexbox will come first, the incentives to keep it will be strong. Assuming Cassowary will be next, Flexbox — even as a wrapper — still will call for maintenance.

Thinking of layout in Constraint terms, while needs a bit of mental switch from other layouting methods, has already proven its merits and advantages both on iOS and Android. I can not asses whether implementing it in Fyne will take twice as much effort as Flex, but even if thrice, it should be well amortized over the first or second maintenance cycle.

Everything that can be done with Flexbox cassowary computed layout can do. But not vice versa. Esp. with layouts where the same message needs to be shown in 40 glyphs of Icelandic or in four of Chinese.
$ 0.02

P.S. With constraints layout engine Fyne might leech on an Android Studio / Xcode allowing Fyne to get on board also designers.

[steveoc64]

Stage 2 would then be to apply struct tags to the original struct to then enable an auto-builder to create the UI, and do 2way binding to the underlying struct.

type Account struct {
  Name string  `flex: gridcols=6,label="Name",span=1"
  Address string `flex: label="Address",span=2,onchange=ChangeAddress`
 Comments string `flex: label="Account Comments",span=5,rows=4`
}

func (m *Account) ChangeAddress(old, new string) error {
  fmt.Println("Address was", old, "is now", new)
  return nil
}

myAccount := &Account{}

// then
myForm := NewFlexGrid().Build(myAccount)  // uses struct tags to auto-build the elements, and 2-way bind them to the model
// can now inject myForm into a dialog, or other widget, etc

[andydotxyz]

Sounds pretty handy. One challenge will be that with the current container setup there will be duplication as the user has to pass items into the layout and the container. Perhaps we can improve that too?

[tv42]

Drive-by note: it's probably worth looking into whether to copy ideas from Flexbox or CSS Grids, or both.

[ohir]

As Fyne is fully scallable I think it would be better to implement constraints based layout (Cassowary), and then steer toward having it as the only layout engine. While its (constraints layout) concepts are somewhat new to the web developers base, its code and algorithms are solid rock. Both Flexbox and CSS Grids layouts have proved to be hard and/or resource hungry if applied in i18n/l10n demanding apps.
$ 0.02

[andydotxyz]

The long term plan was to use Cassowary and rebuild others as helpful wrappers. But if people think flex box would be helpful then it could still work. All of the layout maths in Fyne is scaled dynamically so I can’t see a reason why it wouldn’t be appropriate?

[andydotxyz]

After our conversation yesterday I wondered if adding hints (inspired by the options at the top of this post) to a standard grid layout may meet most use-cases for this request. By adding rowspan or colspan you could easily set up more complicated grids. By keeping it an underlying grid layout you end up with something like the bootstrap grid - define the number of columns and the space will be split equally, with cells filling the defined space.

I feel better about this simple approach than trying to aim for flex-box - I worry that we will fail to meet expectations in so many ways if we try to match the web layouts people are currenly working with.