Your first GUI app with Python and Py. Qt Python For Engineers. Introduction. Many people struggle with learning how to build a GUI app. The most common reason is, they dont even know where to start. Emulators for Hewlett Packard calculators as part of the HP Calculator Archive. How to download this calculator. While in your browser window, go to File Save As. and save this page to your computer. Make sure to select HTML only when saving. Most tutorials are purely text based, and its hard to learn GUI development using text, since GUIs are mainly a visual medium. We will get around that by building a simple GUI app, and show you how easy it is to get started. Once you understand the basics, its easy to add advanced stuff. This is what we will be building A simple GUI app that takes in a price, a tax rate and calculates the final price. Most tutorials on GUI apps try to layout the GUI blocks using code, but that is very painful to do. Calculator Program In GuilfordWe will be using the superb QT Designer tool to layout our app So no struggling laying out the design by hand. Everything will be done graphically. All the source code is here. Pre requisites. If you followed my advice and installed Anaconda, you will already have Py. Qt. 4. If not, you will need to get it from here. You also need Qt Designer. Update As Steve points out in the comments, Anaconda comes with qt designer, so you dont need to download anything It is in Anaconda. Librarybin and is called designer qt. I recommend you download the whole QT suite, as there are some other useful tools in there too. Getting Started. Note You can click on any image below to see the full size, in case you want more detail. Start QT Designer. In the window that comes up, choose Main Window, as it will give is a blank canvas The next thing to do is to select the Text Edit box on the left Drag Text Edit to the main window, to get a box like See the right side, where I have clumsily red circled a box That is where the name of the object is. The name is the way this object will be called from our Python code, so call it something sensible. Im calling it pricebox, as we will enter the price into this box. The next thing we will do is attach a label to the box, to make it clear to the user what this box is for. Above, I have circled the label. Drag it across to the main window. It gets the default text of Text. Label. Double click it and change it to Price. You can also make the text large and bold, as seen here For the tax box, we are going to use something different. See the spin box The circle on the left is a spin box. This limits the values you can enter. We dont need a spinbox, its just good to see how you can use different widgets that QT Creator provides. Drag the spin box to the window. The first thing we do is change the object. Name to something sensible, taxrate in our case. Remember, this is how this object will be called from Python. We can choose a default value for our spinbox. Im choosing 2. 0 If you look at the image above, you can also set the minimum and maximum limits. We will keep them to what they are. We will also add another label called Tax Rate, same as we did before. Also look at the circled Push Button we will be using next Now, select the Push Button box and drag it to our window. The button just says Push. Button, which isnt very helpful. By now, you should know how to change this. But before that, we change the name of the button and not the text to calctaxbutton. Next,  we change the actual text Drag another Text Edit box on to the window. You dont need to label it, as we will print the output in here. Do change its name to resultswindow not shown below, but you should know how to do it by now. If you want, you can add a header. This is a simple label box with the font increased And save your work This file will be used in the next part when we write the code, so store it somewhere you can access it. This file that we  created is just a XML file. Open it in a text editor, if you want, and you will find something like this Writing the code. Qts code is object oriented, and in  a manner that is easy to follow. Each of the widgets we added is an object, with its own functions like to. Plain. Text to read the value in a box. This makes it quite easy to use. Im sure the official documentation mentions this somewhere, but you have to do some setup before you can use the code. I couldnt find this setup anywhere, so I worked back from the official examples as well as other online tutorials to find the smallest program you need to initialize the class. I have checked this function in as pyqtskeleton. This is useful, as everytime you start a new Py. Qt project, use this skeleton to start off, and add your code. The code is. from Py. Qt. 4 import Qt. Core, Qt. Gui, uic. qt. Creator. File Enter file here. UiMain. Window, Qt. Base. Class uic. Ui. Typeqt. Creator. File. class My. AppQt. Gui. QMain. Window, UiMain. Window. def initself. Qt. Gui. QMain. Window. initself. UiMain. Window. initself. Uiself. if name main. Qt. Gui. QApplicationsys. My. App. window. Py. Qt. 4 import Qt. Core,Qt. Gui,uicqt. Creator. File Enter file here. UiMain. Window,Qt. Base. Classuic. load. Ui. Typeqt. Creator. Fileclass. My. AppQt. Gui. QMain. Window,UiMain. Window    def initself        Qt. Gui. QMain. Window. initself        UiMain. Window. initself        self. Uiselfifnamemain    appQt. Gui. QApplicationsys. My. App    window. The main thing to note is line 3. Creator. File Enter file here. Creator. File Enter file here. This is where you add the file you created earlier. It is loaded using the inbuilt function. UiMain. Window, Qt. Base. Class uic. Ui. Typeqt. Creator. File1. UiMain. Window,Qt. Base. Classuic. load. Ui. Typeqt. Creator. FileLets take a quick look at the code. Qt. Gui. QApplicationsys. My. App. window. Qt. Gui. QApplicationsys. My. App    window. The main code creates a new Qt Gui application. Passing in sys. argv is required, as QT can be configured from the command line. We wont be doing that. Finally, we create a class called My. App, which inherits from Qt libraries and initializes the parent classes. My. AppQt. Gui. QMain. Window, UiMain. Window. Qt. Gui. QMain. Window. initself. UiMain. Window. initself. Uiselfclass. My. AppQt. Gui. QMain. Window,UiMain. Window    def initself        Qt. Gui. QMain. Window. initself        UiMain. Window. initself        self. UiselfYou dont need to know the details of this code. Just use the skeleton and work on that. Take this file, pyqtskeleton. Thats because we dont want to edit the original file. The first thing to do is add our XML file, the one that contains our GUI, to the code. Replace this line. Creator. File Enter file here. Creator. File Enter file here. Creator. File taxcalc. Creator. File  taxcalc. This will load our GUI file into memory. Now, the key widget in our GUI was the button. Once you press the button, something happens. What We need to tell our code what to do when the user presses the Calculate Tax button. In the init function, add this line. Calculate. Tax1self. Calculate. TaxWhat does this doRemember we called our button calctaxbutton This was the name of the object, not the text that was displayed on it. clicked is an internal function that is called when surprise someone clicks on the button. All QT widgets have specific functions, which you can find our by Googling. The last part of the code says connectself. Calculate. Tax. This says that connect this button to a function called self. Calculate. Tax, so that everytime the user presses this button, that function is called. Java Programming for Kids. After creating lots of code samples producing outputs to the system console, its time for creating a nice looking Graphic User Interface GUI. Were accustomed to programs that open windows with buttons, text fields, menus and other GUI components. Java has an older library of GUI components called Swing, and the new one called Java. FX. Well use only Java. FX in this book. Java. FX is also a library thats included with JDK, and you can write your GUI programs using familiar Java language. On the other hand, Java. FX allows you to create and arrange GUI components in a special FXML format, while writing application logic in Java. In this chapter Ill explain the basics of GUI programming with Java. FX. Youll learn how to create GUI containers and arrange GUI components inside them. In the next chapter youll learn how to write code that reacts on users actions a. By the end of this chapter you should be ready to work on the following assignment Create the GUI for a calculator that will look similar to this one Figure 5. The Calculator. 7. Introduction to Java. FXWith Java. FX you can create Graphic User Interface in two ways By writing the code in Java as you did in previous chapters. With the help of the visual layout tool called Scene Builder, where youll be dragging and dropping components on the window and saving the design in the FXML format in a file with extension. Then the Java program will load this. Ill show you both ways, but lets start with some basics of development with Java. FX. Lets set the stage Java. FX uses theater terminology. Intelli. J IDEA will help you to get started quickly. Just create a new project the menu File New Project, select Java. FX application as the project type and give it a name. In a second new project will be created with two Java classes Main and Controller and a file named sample. Figure 5. 1. The newly generated IDEA project. The Main class of a Java. FX application extends Application and is an entry point of your application. Java. FX classes are located in the packages whose names start with javafx e. The main method invokes the method launch from Application, which creates a stage by calling its method start, which was was declared as abstract. Hence, we must override start in our Main class. When the method start is invoked, itll receive a reference to the Stage object this is where your GUI components will live and perform. Pretend that youre a play director and need to set up one or more scenes views on stage. But if in a real scene youd expect to see some chairs, tables and other pieces of furniture, each Java. FX scene consists of GUI containers and components. In Java. FX youll create components, add them to the scene and then add a scene to the stage. When the stage is ready, open the curtain by calling the method show. All GUI components are subclasses of the class javafx. Node, and when Ill be using the word node just think of a GUI component. Now you have a choice create these nodes using Java classes or load the pre created design from the. IDEA. The method start loads the file sample. Scene 3. 00 by 2. The content of the generated sample. Insets lt Grid. Pane lt Button lt Label lt Grid. Panefx controllersample. Controllerxmlns fxhttp javafx. Grid. Pane FXML is a markup language based on XML a popular data presentation format. The idea is to separate the creation of the GUI in a declarative language FXML from the application logic Java. If we didnt use IDEA, the FXML would be generated by the Scene Builder itself. In FXML the GUI is represented by tags in angle brackets, e. Grid. Pane. Each tag has a matching closing tag that starts with a forward slash, e. Grid. Pane and may have attributes e. The lt Grid. Pane tag corresponds to the Java class Grind. Pane, which is one of the Java. FX layouts Ill explain them very shortly. Every FXML tag has a corresponding Java class behind it. The generated Java class Controller has just the pair of curly braces at this point, but in the next chapter well be writing the application logic there. Later on youll connect the generated FXML views with the Java code of the Controller. Run the Main program and itll show an empty window shown next Figure 5. Running the generated application. Brief Overview of Java. FX Layouts. Users of your application can have computer monitors of different screen sizes and resolutions. Java. FX comes with layouts that help with arranging GUI controls on the scene and keeping the arrangement for different stage sizes think window sizes. There are following layout container Java classes and similarly named FXML tags HBox. VBox. Flow. Pane. Grid. Pane. Border. Pane. Stack. Pane. Tile. Pane. Anchor. Pane. The HBox class the horizontal box places controls in a row next to each other. The vertical box VBox places controls vertically. The Flow. Pane places the nodes in a row and then wraps to the next row if there is no room left in the current one. The Grid. Pane allows to arrange UI controls in rows and columns and assign constraints properties to each cell. The Border. Pane splits the scene into five regions, which are called left, top, right, bottom, and center. The Tile. Pane layout is similar to the Flow. Pane, but it places each GUI components in a cell of the same size similarly to tiles on the wall. Say, you need to display several images in a tile layout. Adding the Image. View components to the Tile. Pane will shows them as tiles next to each other. The Stack. Pane layout works as a deck of playing cards only one child node will be shown at a time covering the other nodes. The Anchor. Pane lets you to anchor nodes at left, top, right, and bottom of the scene. Imagine a music player application with the buttons Rewind on the left and the Fast Forward on the right. For example, the Ancor. Pane allows you to force the Rewind button to always remain at 2. For that you can use the left. Anchor and bottom. Anchor properties. For example,Anchor. Pane. set. Left. Anchorrewind. Btn,2. 0 Anchor. Pane. set. Bottom. Anchorrewind. Btn,1. Components that are located in a container are considered children of this container. Accordingly, a container is called a parent of these components. If youd be writing the code manually in Java, youd be going through the following steps with any layout Create instances of child nodes to be used within the layout container. Create an instance of the selected layout class e. HBox. This instance will serve as a container and a layout manager for all child nodes that youll add to it. Add the child nodes to the container using either the method add or add. All. If this layout instance needs to be used inside another layout e. HBox can be placed inside the Border. Pane add the instance created in Step 1 to the parent container by using the method add. In this chapter well use only some of the Java. FX layouts, but for detailed coverage of layouts visit Oracle tutorial at http docs. Its easier to create layouts and components using a visual tool, and this is what well do next. Getting Started With Scene Builder. Scene Builder 2. 0 is a visual layout tool for Java. FX applications by Oracle. Download it from http goo. Ose. 6. Follow the installation instructions for your operational system and install Scene Builder on your computer.