-
|
I'm attempting to rewrite a golang web application to use cogertcore for the UI. Old / current UI:
Cogentcore UI rework:
As evidenced by the pictures above, the old UI has links in a table with individual pages containing data that the user may want to look at. An example of one linked page:
Cogentcore is basically optimized for a single page application - unless one uses "cogentcore.org/core/content" The "cogentcore.org/core/content" import may not be suitable for my purposes as the data being looked at is not static, but generated daily, and updated or recalculated hourly. I've been looking at different potential alternatives in order to make the data accessible in the single page application context, but I can't seem to figure out how to include any widget or button inside the table. I'm not sure it's possible, currently. I think the best options are as follows, to display the data shown in the third image:
It should be possible to have a link in the table to show the data on a new page, but this is generally a navigational challenge and I'm not sure how to integrate that with the cogentcore app. For example if I link to Also, how can I get the table or tab content to take up the whole vertical space? It's cut off halfway down the page. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 15 replies
-
|
I've worked around the need for buttons in the table, and I found the solution to the larger navigational issue using pages - which are actually not well documented. However, the sign-in tutorial demonstrates it's usage. After that, it's been both easy and fast to get the general layout and behavior as desired. |
Beta Was this translation helpful? Give feedback.
-
|
@0pcom As you figured out, You can define a type, such as type DateButton struct {
core.Button
}
func (db *DateButton) WidgetValue() any { return &db.Text }
func (db *DateButton) Init() {
db.Button.Init()
db.SetType(core.ButtonTonal)
db.OnClick(func(e events.Event) {
// open the other page you want
})
}Then, the key step is to, in an If this doesn't work for you, please let me know and I can help figure it out; it should definitely be possible. I will document this process soon. |
Beta Was this translation helpful? Give feedback.
-
|
Actually you can already call type DateLink struct {
core.Text
Date string
}
func (dl *DateLink) WidgetValue() any { return &dl.Date }
func (dl *DateLink) Init() {
dl.Text.Init()
dl.Updater(func() {
dl.SetText("<a>"+dl.Date+"</a>")
})
dl.HandleTextClick(func(tl *paint.TextLink) {
// open the other page you want
})
}Please let me know if either of those approaches works for you. |
Beta Was this translation helpful? Give feedback.
-
Help figuring it out would be great. I feel a bit stuck on this without a more complete or specific example. However, I've worked around this being a breaking issue for the current code I'm writing. I'm more interested in the finer points of updating the UI to display the latest data, and also configuring this on the server end as well. If I can manage to compose a coherent question I'll post another discussion about it. |
Beta Was this translation helpful? Give feedback.
-
|
@0pcom Okay, here is a full example for how this can work. This code makes a table with buttons for the dates, and then clicking on one of those buttons takes you to a page with more details for that date (using package main
import (
"cogentcore.org/core/core"
"cogentcore.org/core/events"
"cogentcore.org/core/icons"
)
var pg *core.Pages
var currentEntry int
func init() {
core.AddValueType[Date, DateButton]()
}
type Entry struct {
Date Date
Info string
}
type Date string
type DateButton struct {
core.Button
}
func (db *DateButton) WidgetValue() any { return &db.Text }
func (db *DateButton) Init() {
db.Button.Init()
db.SetType(core.ButtonTonal)
db.SetTooltip("Click to view details")
db.OnClick(func(e events.Event) {
currentEntry = db.Property(core.ListRowProperty).(int)
pg.Open("details")
})
}
func main() {
b := core.NewBody()
entries := []*Entry{
{Date: "2023-01-01", Info: "Something happened"},
{Date: "2024-06-03", Info: "Something else happened"},
}
pg = core.NewPages(b)
pg.AddPage("entries", func(pg *core.Pages) {
tb := core.NewTable(pg).SetSlice(&entries)
tb.SetReadOnly(true)
})
pg.AddPage("details", func(pg *core.Pages) {
entry := entries[currentEntry]
core.NewText(pg).SetType(core.TextHeadlineSmall).SetText("Details for " + string(entry.Date))
core.NewText(pg).SetText(entry.Info)
back := core.NewButton(pg).SetType(core.ButtonTonal).SetText("Back").SetIcon(icons.ArrowBack)
back.OnClick(func(e events.Event) {
pg.Open("entries")
})
})
b.RunMainWindow()
} |
Beta Was this translation helpful? Give feedback.
-
|
@0pcom If you set the data for the table to be a pointer to a slice of the data from the server, you can update that data slice whenever the server data changes and then just call You may be asking about things more like #1295 though, which I still need to get back to you on; apologies for the delay on that. Once we get #1457 merged, hopefully within a week or two, then I will have time to add more documentation pages and get through the issue backlog. Thank you for your patience, and definitely feel free to ping me on any issues that I forget about. |
Beta Was this translation helpful? Give feedback.
-
I've tested the example and it does indeed work, but I'm not getting the same results on further integration with my existing code, the relevant parts of which look like this: and json that looks like this, for the main table: my previous logic for making the buttons / pages with the right content but outside the table looks like this: I do sincerely appreciate your assistance. I've actually just gone live with this UI today. Unfortunately it's not working on the main domain due to server complications - not cogentcore's fault but it might be worth your having a look at what it's doing here in any case: fiber.skywire.dev basically that server that domain points at is set up to forward over the dmsg network to the real server. And actually when I reverse proxy it over dmsg here locally it works, but not at that domain. It may be worth it to determine, as a fallback behavior for web, that the resources just aren't going to load in a timely manner / at all and the static preview should just be displayed. Just a thought. it is working much faster at haltingstate.net |
Beta Was this translation helpful? Give feedback.
-
|
@0pcom For the button in the table, it is necessary to make the relevant field be of a custom type that you register with type reward struct {
Date Date `json:"date"` // This is the only change
Pool1 float64 `json:"1"`
Pool2 float64 `json:"2"`
Sent string `json:"sent"`
}
var rewards []reward
//date button in table
var pg *core.Pages
var currentEntry intIf I am misunderstanding something about what you are trying to do, please let me know. Using the |
Beta Was this translation helpful? Give feedback.
-
|
@0pcom For your server issue, if you look at the browser inspector, it seems like the main problem is just that the mimetypes of the resources are not being set correctly by the server:
Both of those errors are because all of the files seem to be served as plaintext ( |
Beta Was this translation helpful? Give feedback.
@0pcom Okay, here is a full example for how this can work. This code makes a table with buttons for the dates, and then clicking on one of those buttons takes you to a page with more details for that date (using
core.Pages). Please let me know if you have any questions; I can give an example with links instead of buttons if you want. I will add this example to the website soon. I will respond to your questions about updating next.