simonkrauter / NiGui

Cross-platform desktop GUI toolkit written in Nim
MIT License
724 stars 49 forks source link

change the order of controls inside a container #151

Open shoaib-mi opened 2 years ago

shoaib-mi commented 2 years ago

I already asked this question on stackoverflow link. How can I change order of controls inside a container without rebuilding entire layout with new order? since that controls are saved inside a seq, I think we should be able to manipulate the order of them.

and two more question, is there Grid layout in NiGui? has NiGui written in pure Nim? and if not, why not?

Thank you

simonkrauter commented 2 years ago

Reordering of widgets is not yet supported other than rebuilding the list. There is no grid layout. You can use multiple horizontal and vertical containers. NiGui is written in Nim only, but it needs to call into WinAPI/Gtk libraries to make windows/widgets.

shoaib-mi commented 2 years ago

Thank you for your response. I tried to create a grid layout containing TextBoxes. The problem is it takes 2.5 seconds to run. I think if there was a binding to Gtk.Grid it would run much faster. Here is the code:

import nigui, times

var start_time, end_time: DateTime
start_time = now()

type
    Table = ref object of LayoutContainer
        all_widgets*: seq[seq[TextBox]]

proc newTableContainer(num_rows,num_cols: int): Table =
    result = new Table
    result.init()
    result.layout = Layout_Vertical
    var 
        hlayout: LayoutContainer
        widget: TextBox
    for i in 0..num_rows-1:
        hlayout = newLayoutContainer(Layout_Horizontal)
        result.add(hlayout)
        result.all_widgets.add(@[])
        for j in 0..num_cols-1:
            widget = newTextBox()
            #widget.canvas.areaColor = rgb(255, 255, 255)
            result.all_widgets[i].add( widget )
            hlayout.add( widget )

app.init()

var 
    window = newWindow("table Example")
    container = newLayoutContainer(Layout_Vertical)
    table = newTableContainer(5,8)
    btn1 = newButton("change second row")
    btn2 = newButton("exchange second and third rows")

btn1.onClick = proc(event: ClickEvent) =
    var row = table.all_widgets[1]
    for control in row:
        control.text = "hello"

btn2.onClick = proc(event: ClickEvent) =
    var 
        row1 = table.all_widgets[1]
        row2 = table.all_widgets[2]
        tmp: string 
    for i in 0..row1.len - 1:
        tmp = row1[i].text
        row1[i].text = row2[i].text
        row2[i].text = tmp

container.add(table)
container.add(btn1)
container.add(btn2)
window.add(container)

window.show()

end_time = now()
echo end_time - start_time

app.run()

This code can only change properties of widgets inside parent layout, and do not change the whole widget. In line 23 of the code I tried to change background color of the widgets, but it gives error. I overcome this problem using one of your examples, but I think it would be better if all widgets (buttons, labels, ...) have a property background, that by only changing this property, we could change background of that widget. It can be done in Gtk with single line of code, and even through css code. May I ask something more? since Gtk already supports grid layout, changing widgets (into different types) inside a layout and sorting ability for grids (and tables) which is equivalent to reordering controls inside a layout, could you please add these abilities to this module. I looked up other Nim Gui libraries, and I found none of them as fast, light and easy-to-use as NiGui. NiGui has a brilliant easy-to-use structure, and I think if it is comprehensive, none of other libraries could compete with it. Thank you again