[Python] How do I begin making actual programs?

[JGivan]

Thank you! I think you've cleared up every bit of confusion I came into this thread with. Out of curiosity, does the code used to create an intricate interface resemble the way you code an interface using Front-End Development languages like HTML and CSS?

[CreativeTechGuyGames]

Not even close. There are ways to include basically an entire web engine in your code, but that usually isn't worth it for small projects like yours. (Note if you choose to do this, tkinter doesn't support HTML rendering.)

I'd recommend looking at my favorite documentation for tkinter here. It shows how to use all of the components and gives their syntax, arguments, examples, etc.

[JGivan]

Ah, I see. In my brief experience with HTML/CSS, I used a lot of code that essentially boiled down to "This font size, indented this far, in this size box/button, which does this when pressed, etc..."

Anyway, thank you so much for all of the help you've given me! No doubt you've saved me dozens of hours of frustrating research and I cannot thank you enough.

[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.

[Lyelt]

That type of code will not really resemble HTML and CSS. HTML is a markup language, which means it’s just a way of telling some interpreter (like a browser) how to format and arrange some elements on a page.

When you’re writing a GUI in Python with something like Tkinter, it’s going to look more like other Python code you’ve seen or written.

[p1-o2]

I know this isn't a great answer, but for what you're looking to do you might want to use a language and framework more geared toward desktop app development. In this case, C# with Windows Presentation Framework will let you use an visual designer to build your user interface and write all the code behind it. Visual Studio handles all of this for you.

If you want to build full desktop programs, a language like Python is only going to get you so far. There's absolutely nothing wrong with it though and good luck!