Make window scroll in Go with GXUI

Question

I am trying to add scroll bars to my application windows in Go using GXUI.

Say I have this code:

package main

import (
    "fmt"

    "github.com/google/gxui"
    "github.com/google/gxui/drivers/gl"
    "github.com/google/gxui/samples/flags"
    "github.com/google/gxui/themes/dark"
)

func appMain(driver gxui.Driver) {
    theme := dark.CreateTheme(driver)

    window := theme.CreateWindow(800, 600, "Grid")
    window.SetScale(flags.DefaultScaleFactor)
    window.OnClose(driver.Terminate)

    row := theme.CreateLinearLayout()
    row.SetDirection(gxui.LeftToRight)
    for c := 0; c < 4; c++ {
        col := theme.CreateLinearLayout()
        col.SetDirection(gxui.TopToBottom)
        for r := 0; r < 100; r++ {
            cell := theme.CreateLabel()
            cell.SetText(fmt.Sprintf("%d", r*4+c))
            col.AddChild(cell)
        }
        row.AddChild(col)
    }

    window.AddChild(row)
}

func main() {
    gl.StartDriver(appMain)
}

When I run it, I get this window:

enter image description here

How can I get the window to have a scroll bar so that I can view all of the lines?

You need [ScrollLayout](https://godoc.org/github.com/google/gxui#ScrollLayout) I think... — Alex Kroll, Jul 08 '15 at 08:59
@AlexKroll , the main problem is to move the display area together with the square-scroll. — , Jul 08 '15 at 11:14
ScrollLayout seems to be the way, but I'm getting issues with display cutting off. — Barry McNamara, Jul 17 '15 at 16:58
@BarryMcNamara , changed from 100 to 2000,everything displays as it should. — , Jul 18 '15 at 07:37
@Atomic_alarm that's disappointing. When I change 100 to 2000 it no longer displays properly. I get 0 1 on the first row, 4 5 on the second, and so on down until I hit 664 in the first column and then the second column disappears. The third and fourth columns are gone entirely. — Barry McNamara, Jul 20 '15 at 18:26
@BarryMcNamara , that's really strange. For me display so: http://s9.postimg.org/owni8v1hb/image.jpg — , Jul 20 '15 at 19:18
Well at least I know it's not my code. I guess I'll try updating and rebuilding the GXUI packages. — Barry McNamara, Jul 20 '15 at 23:21

score 2 · Answer 1 · answered Jul 11 '15 at 11:54

I wasn't able to do with help ScrollLayout, but I can propose this variant on the basis of examples from github.

package main

import (
    "fmt"
    "github.com/google/gxui"
    "github.com/google/gxui/drivers/gl"
    "github.com/google/gxui/math"
    "github.com/google/gxui/samples/flags"
    "github.com/google/gxui/themes/dark"
)

type customAdapter struct {
    gxui.AdapterBase
}

func (a *customAdapter) Count() int {
    return 1000
}

func (a *customAdapter) ItemAt(index int) gxui.AdapterItem {
    return index
}

func (a *customAdapter) ItemIndex(item gxui.AdapterItem) int {
    return item.(int)
}

func (a *customAdapter) Size(theme gxui.Theme) math.Size {
    return math.Size{W: 200, H: 25}
}

func (a *customAdapter) Create(theme gxui.Theme, index int) gxui.Control {

    layout1 := theme.CreateLinearLayout()
    layout1.SetDirection(gxui.LeftToRight)
    for c := 0; c < 4; c++ {
        col := theme.CreateLinearLayout()
        col.SetDirection(gxui.TopToBottom)
        cell := theme.CreateLabel()
        cell.SetText(fmt.Sprintf("%d", index*4+c))
        col.AddChild(cell)
        layout1.AddChild(col)
    }
    return layout1
}

func appMain(driver gxui.Driver) {
    theme := dark.CreateTheme(driver)
    window := theme.CreateWindow(600, 400, "Grid")
    window.BorderPen()
    window.SetScale(flags.DefaultScaleFactor)
    window.OnClose(driver.Terminate)
    adapter := &customAdapter{}
    list := theme.CreateList()
    list.SetAdapter(adapter)
    list.SetOrientation(gxui.Vertical)
    window.AddChild(list)
}

func main() {
    gl.StartDriver(appMain)
}

Each line is placed in the list,their number and size are specified in the overridden methods. The advantage is that in the list already have the scrollbar.

So that mostly works, but the scroll bar is awkwardly in the middle of the screen (an easy fix) and in adding it the rows got changed to some sort of selecting list. This wouldn't really work as a general solution to making any application window scroll. — Barry McNamara, Jul 17 '15 at 15:24

score 1 · Accepted Answer · answered Jul 20 '15 at 23:26

The following code uses ScrollLayout to add a scroll bar to the window. The trick is to make ScrollLayout the window's child and make the next widget (in this case a LinearLayout) a child of the ScrollLayout.

package main

import (
    "fmt"
    "github.com/google/gxui"
    "github.com/google/gxui/drivers/gl"
    "github.com/google/gxui/samples/flags"
    "github.com/google/gxui/themes/dark"
)

func appMain(driver gxui.Driver) {
    theme := dark.CreateTheme(driver)
    window := theme.CreateWindow(800, 600, "Grid")
    window.SetScale(flags.DefaultScaleFactor)
    window.OnClose(driver.Terminate)
    sl := theme.CreateScrollLayout()
    row := theme.CreateLinearLayout()
    row.SetDirection(gxui.LeftToRight)
    for c := 0; c < 4; c++ {
        col := theme.CreateLinearLayout()
        col.SetDirection(gxui.TopToBottom)
        for r := 0; r < 100; r++ {
            cell := theme.CreateLabel()
            cell.SetText(fmt.Sprintf("%d", r*4+c))
            col.AddChild(cell)
        }
        row.AddChild(col)
    }
    sl.SetChild(row)
    window.AddChild(sl)
}

func main() {
    gl.StartDriver(appMain)
}

Note that my computer gave me display issues when I increased the number of rows (the rightmost columns began to get cut off), but other people did not encounter this issue, so it is likely due to a bad installation on my end.

Make window scroll in Go with GXUI

2 Answers2