 A few days ago I created a video about creating your very first Qt application using the Qt designer and using Python and in particular a Python library called PyQt. And what I wanted to do is I wanted to revisit that topic today to clarify something about Qt designer and the UI files that it creates. So let me switch over to my desktop and very quickly I'm going to rehash a little bit of what I did on camera the other day. So I'm going to open the Qt designer and I'm going to reopen that UI file that I created the other day using the Qt designer. I just threw all these widgets in a window, right? All these buttons. I created this kind of fictional DTOS welcome application for my fictional Linux distribution that doesn't really exist, DTOS, right? And what happens is when you save this, Qt designer saves this as a dot UI file, which is essentially an XML file. So once that is saved, if I open a terminal and I CD into actually where I have the source code for this, if I wanted to take a look at that UI file, I could actually open that particular file dot UI in an editor, such as Vim in this case. And you can see it's just nothing but XML, right? This is not legit code, right? XML is not a real programming language, right? It's syntax, but it's not a real programming language or scripting language the way that Python is a real language. So what I did is I converted the dot UI file because if you have the PyCute libraries installed on your system, what PyCute can do is you can run PyUIC5 because we're working with a Qt5 application here, version five, and then give it the location to a dot UI file and then dash O for output and then what it should output to. And in this case, I'm going to convert the Qt-01.UI file that I saved and convert it to Qt-01.py. And once I run that, all I need to do is now I can actually open the Qt-01.py file and it converts that XML file over to actual legit Python code that you can then actually work with. And I actually did that. I converted that XML file to this Python file and then I edited the actual Python code in this file. I went here, I added spaces, I rearranged things, you know, I fixed some of the syntax and I even added some different things. I added some transparency to certain widgets, you know, I doctored this file up quite a bit and I had some people tell me that that was not the legit way to actually use Qt Designer and these UI files and I wanted to clarify that because you actually can do it the way I just did because that's typically the way I do these things. This is the way I've always done with these kinds of WYSIWYG editors, WYSIWYG designers, WYSIWYG programmers, or WYSIWYG by the way stands for what you see is what you get. It's basically a program that allows you to graphically, you know, create things, you know, like these buttons and widgets and things without actually being a programmer and it automatically generates some basic code for you. Now I don't typically like working with these things, I prefer actually just writing the code myself because in a lot of ways I actually understand this and I get exactly what I want out of the code from just doing it myself rather than having something automatically generated in a WYSIWYG editor because so often those WYSIWYG editors, they actually add some extra syntax and code. Sometimes you have unwanted side effects by using those things so I typically don't use them. I did several videos a few months back creating GTK applications and in those I used the Haskell programming language to write those things and I just sat down in Emacs and I just wrote straight Haskell, you know, no WYSIWYG editors for that even though GTK has a designer kind of program called Glade that's very similar to the Qt Designer. Glade of course is designed to actually design GTK applications. I wanted to create a new application here and I get this window here and I can start searching for widgets and creating top level containers and you get your boxes and all of that for GTK but this is not a GTK video and I don't know how to use Glade because I purposely kind of avoided Glade for that but I wanted to do something a little different for Acute because a lot of people did want to see how to use these WYSIWYG designers. So let me actually show you how to use the designer to create the UI file and then actually import the UI file directly into a Python program or Python script without the need to actually edit the or convert the UI file to Python the way I did. So let's create a new application and once again I'll create something really simple here in the Qt Designer. I'm going to go ahead and create a new program here so I'm going to choose template form main window and create and we get a new main window at the central widget here it's got a label here I actually don't need the label I'm going to go over here into the central widget which has these two child widgets the menu bar and the status bar the menu bar would be you know file edit view you know this stuff here in a window I'm not going to add that to this because we're going to do something really simple here so I'm going to right click and I remove the menu bar I really don't need the status bar either so we'll remove that so this is just a basic main window which has a central widget which it always has a central widget and then we're just going to add something really simple to this. Let's add a horizontal layout and we'll make this this size here resize the window as well and let's just add three buttons just make this really simple of course being a horizontal layout the buttons will appear side by side and let's label these buttons one two and three and we should also change the object name this is something I didn't do on the last video I just left the object names as their default values typically though when you're creating these widgets and GTK or in Q which we're working in today you actually want to give them nice descriptive object names that way you know exactly which button you're working with for example this button here label three is called push button the object name that's not very descriptive two is push button two that's not very descriptive either this is push button three so typically what you want to do is you want to make sure that it's obvious what the button is that you're working in so the object name for one will be one underscore BTN so I'll give it the actual label underscore button I think that makes sense so if this button said exit it would be exit underscore button I think that kind of naming scheme makes sense this one I'll name two underscore BTN and this one I'll label three underscore BTN these will be object names that I'll be able to remember later because I'll need these object names when I add actions to these buttons here in a second so let's get a preview of this window so if I go to the menu and go to form and go to preview we get a preview window I resize the window the buttons don't expand so that's one thing I can correct here so what it is the horizontal layout it expands but it can only expand if the parent widget can expand and I right-click on the main window main window go to layout and change the layout to horizontal for the main window and what it does is actually changes the central widget layout to horizontal and now if I go to form preview and now resize the window you can see the buttons shrink and expand as you would expect and I think that's all I'm gonna do for this UI file here because the point is not to create something complex I just want to show you how you can use these UI files and import them and actually source the UI file in a Python script that you create so let's go ahead and save this UI file I'm gonna navigate to a directory where I store the source code for my GTK and Qt applications that I sometimes play with I'm gonna call this test-01.ui and save that UI file I'll get out of Qt Designer let me go ahead and open a terminal I'm gonna cd into that source directory and in Vim I'm going to open test-01.ui just to verify that it created that file correctly and there again you can see the XML so let's go ahead and get out of that now what I'm gonna do is instead of converting test-01.ui over to a Python file I'm gonna create a empty Python script so I'm going to Vim test-01.ui and this is just an empty document here and the way this works is to load that UI file what you need to do is you need to do an import you need to do from let me zoom in a little bit just make sure you guys can read this from PyQt5 and make sure the capitalization is appropriate so capital P capital Q PyQt5.uic import the following module load UI with the capital U lowercase I load UI what this does is it allows you to load a UI file it allows PyQt what it does it takes that XML file and it in the background converts the XML over to Python that can be sourced by this script that we're writing now how cool is that now other than that import we're gonna need some other basic imports I know for sure I'm gonna need import sys and I know I'm gonna need some more stuff from PyQt5 as well so from PyQt5.QWidgets sure the spelling is correct there yeah import Q application with a capital QA and also import Q main window make sure the capitalization is correct on that capital Q capital M capital W on that and now if I just paste this little template block here this is just a very basic template of a Qt application so we've got our imports and then we've got class main UI Q main window because remember when we did the Qt designer the template I used was a main window template and then in this class block the most important thing is load UI remember we imported load UI and load UI what is it loading it's loading this particular UI file test-01.ui so it's sourcing all the information from that UI file so it knows about those three buttons that we created those three widgets and it will know their object names remember the object names I created in the Qt designer and then after that we have the little main block here where we have app equals Q application remember we imported Q application so that's why we needed that sys.orgv sys that is one we need to do import sys here and then UI equals main UI the main UI of course it's the main window and then UI.show show the main window app.exeq execute all of this and if I did this correctly which I'm not positive I did but let's give it a run and see so I'm going to CD back into that source directory clear the screen and let's chmod plus X so turn on the executable flag for test-01.pi because if it's not executable I can't run it right so we have to make the script executable before it can be executed and now let's run Python space test-01.pi and there is our Qt application that we created with buttons one two and three which don't do anything because there is no action associated with them now to give them an action you actually have to add the action into our test-01.pi script that we created here and just as an example of how to create a button action here a widget action I'm going to do self dot one underscore button dot clicked remember one underscore button is the very first button that I labeled one and dot clicked dot connect because we're going to connect an action in parentheses here in the parentheses I'm going to do self dot and then some action that I will create in a minute I'm going to call the action one underscore button underscore action because I think that name makes sense and then we actually need to define that particular action so here I would have to do a def one underscore button underscore action self in parentheses colon and then what do I want the action of that button to be well I could tell it to print hello so when I hit the button if I launched the program from the terminal and I hit the button in that Qt application that says one it should print hello to the terminal now I have Windows swallowing turned on here inside X mode had so I actually won't have a terminal available when I run the Qt application even if I launch it from the terminal the terminal gets hidden I would have to change my X Monad config to prevent that from happening so I'm actually going to add a second action other than the print hello because we're not going to see the print hello I'm going to do a sub process dot run so we're actually just going to have it run a command inside parentheses and then inside the brackets here as well we have to give it two values here so I'm going to do XDG dash open this is a standard Linux shell command XDG open it means whatever file I give you whatever file type that happens to be open it with the default program that's designed to open that particular file type and in this case I'll give it a URL so I'll give it the location to my website distro.tube so what it's going to do is it's going to with the default web browser it's going to open that URL let me write that and then let me go back to the terminal window that I had opened before and let's rerun test-01.py and see if we get a button that is clickable so the button was the one button and let's see if I click it does it actually do anything it says no there is a error sub process is not defined and I like to keep all the errors in my videos because I like to you guys to see me make mistakes and figure these out because all you have to do is look at the terminal look at the output it told us sub process not found right so kind of like I told you we had to import sys for sys and Q application and Q main window for Q application and Q main window and we now have to import sub process so let me go back in here and import sub process I hope that's the right library I'm not a Pythonista I don't work with Python that much but I think that is the module we need so now that I've written that let me go back to the terminal and rerun test-01.py and now get our window and let's see if clicking one does something and it does you guys didn't see that because I have my terminal off camera so I've opened the brave browser here once again I'm gonna click the one button watch what happens it opens the URL click it again it will open a new tab click it again it'll open a new tab how cool is that so that is how you do this right so you create a separate Python file that sources your UI file that you created in Qt Designer and I can go back to Qt Designer and I can actually edit that UI file it's why open Qt Designer and go to recent go to test-01 you know I could go in here and if I wanted to I could add more stuff I could add you know more buttons or whatever it is I could add images and labels let's add a label the text label somewhere if I actually save this and now let me open a terminal and CD back into the source directory and rerun test-01.py you can see our changes from from the UI file are sourced and our Python script right and still the one button that we gave the action to by click it it does launch that web page that I specified over on this other monitor you guys can't see so that is really cool that now you can actually edit the UI file in Qt Designer and it will not affect that script that you've worked on so you really have two different ways you can work with this thing you can use the Qt Designer and you can maintain that UI file that you can source then into your Python program that you then write from scratch or you can just do everything from the start just using Python and just forget Qt Designer in the UI file which is kind of the route I typically take because for me it's simpler going that route for other people I understand why it's not especially if you're not familiar with programming maybe you're not familiar with Python at all which I'm not really familiar that familiar with Python it's not a programming language that I work in that much what I would probably do I would probably find a comfortable middle ground where I go into Qt Designer and I do as much as I can setting up a UI for program and get all of that as as fleshed out as possible and then I would probably convert the UI over to a Python file and then work with the Python from then on out never going back to Qt Designer that's probably the route I'll end up taking going forward now before I go I need to thank a few special people I need to thank the producers of this episode and of course I'm talking about Gabe James Matt Paul Royal West Armored Dragon Commander Angry George Lee Meadows Nader Yon Paul Peace Archimvedor realities for us Red Prophet Roland Soul Astrey Tools Devler Warden to an Ubuntu and Willie these guys they're my high-steered patrons over on Patreon without these guys this little tutorial on pie Qt and the Qt Designer would not have been possible the show is also brought to you by each and every one of these fine ladies and gentlemen all these names you're seeing on the screen right now these are all my supporters over on Patreon I don't have any corporate sponsors I'm sponsored by you guys the community if you like my work want to see more videos about free and open source software like Qt swear I have to distro tube over on Patreon these guys I thought it's cool but I miss working in Haskell