Great Work but like to see some basic example for learning

[sk-Prime]

thanks for this great package. but i would like to see some basic example, thus i can learn from looking at the code. for example

1. a button and button callback
2. label and changing label using button click etc simple example but uses feature of specific widget. thanks again.

[khchen]

I think what you need is already in the examples folder.

1. helloworld.nim is the basic app.
2. frame.nim demonstrates the button event, label changing for wStaticText control, etc.
3. Even demo.nim is also easy to understand (except the layout part, it use the autolayout DSL).

[sk-Prime]

ok, i explore all the examples, great examples. but the problem is spending all day i hardly understand the layout management system. at least provide some guideline and details about layout. creating widgets is easy but as a beginner i found that placing them in window is the difficult part of this package. hope to see some tutorial on layout. by the way by looking at the example, wnim is the most feature rich and polish gui framework for nim.

[khchen]

wNim supports layout DSL and autolayout DSL.

Layout DSL is easy to understand. You can specify the element size or their relationships to design the layout. The only problem is that you must ensure that the relationships have a solution.

Autolayout DSL is more powerful, but it is indeed more complicated to a beginner. You can learn it from the websites that I suggested in the document (AutoLayout.js and Apple's Visual Format Language).

There are also 3 examples about the layout system (layout1~3.nim). By default they use autolayout DSL, but you can add -d:legacy to switch them to use the layout DSL. They should look the same so you can learn how to use autolayout DSL to replace layout DSL.

Furthermore, example/autolayoutEditor.nim is also a good tool to learn autolayout.

[sk-Prime]

after exploring about auto layout i got some idea about it. but i can not find how to update widget position dynamically. for example

import wNim
let app = App()
let frame = Frame(title="testing", size=(400, 300), style=wDefaultFrameStyle or wModalFrame)
frame.setLabel("testing")
let panel = Panel(frame)
let btn1 = Button(panel, label="hello")
let btn2 = Button(panel, label = "bello")
proc alayout() =
    panel.autolayout """
        H:|~[btn1,btn2(100)]~|
        V:|~[btn1(100)]~[btn2(100)]~|
    """
alayout()
frame.show()
app.mainLoop()

it is showing btn1 and btn2 at the center of the main window properly. but when i resize the main window the position of the contents are not updating.

[sk-Prime]

after exploring about auto layout i got some idea about it. but i can not find how to update widget position dynamically. for example

import wNim
let app = App()
let frame = Frame(title="testing", size=(400, 300), style=wDefaultFrameStyle or wModalFrame)
frame.setLabel("testing")
let panel = Panel(frame)
let btn1 = Button(panel, label="hello")
let btn2 = Button(panel, label = "bello")
proc alayout() =
    panel.autolayout """
        H:|~[btn1,btn2(100)]~|
        V:|~[btn1(100)]~[btn2(100)]~|
    """
alayout()
frame.show()
app.mainLoop()

it is showing btn1 and btn2 at the center of the main window properly. but when i resize the main window the position of the contents are not updating.

i thought it is something to do with the visual formatting language, then i realize that i can click a button and then call alayout again to resize everything, it works actually. then in final moment i figured out that i can even call the alayout when the window size change event occur. which ultimately solve the problem.

[sk-Prime]

i think Autolayout website has better documentation. i think you can add this to your readme.md or autolayout.html as in further reading section.

[khchen]

What you did is actually what I did in most examples, it looks like this:

panel.wEvent_Size do (): layout()

However, you find out the solution by yourself finally, well done!

BTW: The website you mentioned is the homepage of autolayout.js. There is already a link to the github page for autolayout.js in docs/layout.html. I will consider to add link to the homepage later.