Overview

The traditional way to check that your development environment is functioning is to make a "Hello, World!" application.

Key Concepts

• basic functionality

Design Steps

1. Launch the designer or if already running use 'File' to start a 'New' project.
2. Go to Components Palette > Containers, double-click tk.Tk item. A blue box should appear in the preview.
3. With the "Tk" item selected in the Project Tree, navigate to Properties Panel > Appearance, locate the minsize property and set its value to width 320 and height 240. Then locate the title property and set it to "Hello App".
4. Whenever a top-level widget is used, it is recommended to have a main frame that will group the other widgets and provide more configuration options. So, go to Components Palette > Containers, double-click ttk.Frame item.
5. With Frame selected in the Project Tree, go to Properties Panel > Layout tab and click on it. This is the Layout panel. Set property expand to true and fill "both". This will expand the frame using all the space.
6. Next go to Components Palette > Control and Display, double-click ttk.Label widget. In the preview pane, you should now see 'label1'.
7. In the properties pane, locate the text property.
8. Replace 'label1' with 'Hello, World!'.
9. Locate the font property and set the value to: "Helvetica" 26 bold.
10. Locate the foreground property and set the value to "#0000b8"
11. With the label selected in the Project Tree, got to Properties Panel > Layout tab. Set property expand to true. This will show the label centered in the preview.
12. Before proceeding, ensure that your screen looks as follows.

debian 13 screen-shot of pygubu-designer v0.43

Preview Steps

1. Click 'Preview' in the top menu bar of the designer.
2. Select 'Preview in Toplevel'.
3. Observe the following somewhere on your screen, and then close it.

debian 13 screen-shot of pygubu-designer v0.43

Generating the python application

For this, first you need to save the ui file.

1. Create a directory or project folder using your favorite file manager. In your Home folder, create the directory ~/projects/helloapp

2. Back to Pygubu Designer, go to File > Save. Choose the created folder and enter the filename "helloapp.ui" to save the UI definition.

3. Go to Project > Settings. The Project Settings dialog is shown.

4. In General section, configure name to "Hello App" and description to "A simple hello program"

5. Go to Code tab. Here we will use the classic app method using pygubu builder and the *.ui interface file.

6. In template select Application that uses UI file

7. For main widget select tk1

8. Leave module namespace empty.

9. Set module name to "helloapp"

10. Set class name to "HelloApp"

11. Leave output directory empty.

    

12. Click Ok button.

13. Go to File > Save, to save current changes.

14. Go to Project > Generate code.

15. In your folder, you should see two python files generated.

     user@mylaptop:~/Projects$ tree helloapp/
     helloapp/
     ├── helloapp.py
     ├── helloapp.ui
     └── helloappui.py
     1 directory, 3 files
    

16. In a command terminal run the following:

     python3 helloapp.py
    

17. The hello world app is shown.