5. Tutorial ‐ Hello World (Creating UI)

In this small introduction we will learn how to use the software to create a hello world application.

Step - 1 | Launch

• Launch Custom Tkinter Builder.

Step - 2 | Create a new project

Everything you do in Custom Tkinter Builder, you do within the context of a project. The project is a folder with a json file (which contains all the information of your project and the UI) and an assets folder (Contains all the images and icons you have used in your app).

First and foremost

• Click on New Project
• Type HelloWorld as the name
• Choose the folder destination
• Choose the default theme as blue
• Then double click on the project from the given list

This should open up the editor window.

Step - 3 | Creating Hello World UI

Currently Custom Tkinter Builder only supports pack. But pack is quite powerful. It allows you to apps which works with any kind of screen resolution.

Fun fact: Most part of Custom Tkinter Builder uses pack manager and the welcome window is designed using Custom Tkinter Builder 😄

Adding Frame

• Add a frame to the viewport
• Click on the newly added frame in the viewport.
• Change the option expand to True in the Layout Menu from the Properties Panel

You should get something like this

Adding Label

• Add label to the newly added frame
• Click on the label in the viewport.
• Change the option text to Hello World in the Geometry & Content Menu from the Properties Panel
• Change the option Font Size to 30 in the Styles Menu from the Properties Panel

Adding Button

• Add button to the newly added frame
• Click on the button in the viewport.
• Change the option text to Click Me in the Geometry & Content Menu from the Properties Panel

Changing Frame Properties

• Click on the frame
• Change the option Pack Propagate to True in the Layout Menu from the Properties Panel
• Change the option FG Color to Transparent (Click on the checkbox) in the Styles Menu from the Properties Panel

Step - 4 | Run Code

• Click on Run Code to preview your design

Result:

Well Done 👍 You have created your first UI in Custom Tkinter Builder