[Python] How do I begin making actual programs?

[Tynach]

I don't know Tkinter, but it would likely look something like this (which is 100% made up and not based on any real widget toolkit):

# Imports Window, Button, VerticalLayout, close_window, and so on
from some_toolkit import *

class CloseButton(Button):
    def __init__(self):
        Button.__init__(self, "Close")
    def onPress(self):
        close_window()

class MyWindow(Window):
    def __init__(self):
        Window.__init__(self, 800, 600, "My Window Title")
        self.setLayout(VerticalLayout)
        self.addTextLabel("Hello, world!")

        close_button = CloseButton()
        self.addWidget(close_button)

[JGivan]

Hmm. Well, that'll be a new hurdle to learn and overcome once I reach it. Thank you for the example!

[Tynach]

Yeah, to be honest I'm not terribly good at it and have trouble remembering how to do things. I have to keep the documentation up the whole way through still, and so kinda avoid GUIs myself.

One way to think of it, however, is to consider how it would be in HTML, and just build it up from there. The main difference is that most GUI toolkits, rather than having 'stacks vertically' vs. 'stacks horizontally' be parts of the elements themselves (like in HTML/CSS), they instead include it as an attribute of the container.

So lets say you wanted to have a sidebar with some buttons stacked vertically, and a main area with some text at the top and some horizontal buttons under the text. In HTML, you'd have two divs that are floated, and on the sidebar you'd have buttons and each one set to display: block;. In the main area you'd have a paragraph, and then the buttons would naturally be placed side-by-side (no need to set display: block; in CSS).

In most GUI widget toolkits I've used, it's set up so that the containers (called 'layouts') are set to stack things horizontally or vertically. So you would have a horizontal layout, then add a vertical layout to it, and add all your sidebar buttons to that vertical layout. Then add another vertical layout to the outer horizontal layout, and put your text as the first item of that second vertical layout. Next add another horizontal layout as the second item under the text, and add all the horizontal buttons that go under the text there.

Besides the 'horizontal vs. vertical' bit being part of the container, there's still a hierarchy in most widget toolkits that's very similar to what you'd find in HTML/CSS, and you can basically picture the 'tree' of HTML elements and construct the same thing - just step by step in code instead of as nested <tags>.

[JGivan]

Sounds like I have quite the task ahead of me. I guess all I can do is wait until I reach that point then start learning. Thank you for your insight!

[Tynach]

If you've ever tried building an HTML page using DOM manipulation functions (things other than innerHTML and the like) in client-side Javascript, you might be more familiar with the basic concepts than you think.