Working With Qt Designer's UI Files And PyQt

a few days ago I created a video about creating your very first cute application using the cute designer and using Python and in particular a python Library called Pi cute and what I wanted to do is I wanted to revisit that topic today to clarify something about cute 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 cute designer and I'm going to reopen that UI file that I created the other day using the cute 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 cute 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 pi cute libraries installed on your system what pi cute can do is you can run Pi uic5 because we're working with a cute five 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 cute-01.ui file that I saved and convert it to q-01.com I and once I run that all I need to do is now I can actually open the acute-01 dot Pi 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 uh spaces I rearranged things you know I fixed some of the 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 cute designer and these UI files and I wanted to clarify that because there you actually can do it the way I just did because that's typically the way I do these things it's the way I've always done with these kinds of wysiwyg editors wysiwig designers wysiwyg programmers or wysiwig 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 wussy wig 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 use the Haskell programming language to write those things and I just sat down in emacs and I just wrote straight Haskell you know no wussy wig editors for that even though gtk has a designer kind of program called Glade that's very similar to the cute designer blade 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 got 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 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 once again I'll create something really simple here in the cute designer I'm going to go ahead and create a new um program here so I'm going to choose template form main window and create and we get a new main wind window got the central widget here and it's got a label here I actually don't need the label so 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 I'm going to 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 uh 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 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 if 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 going to navigate to a directory where i s store The Source Code for my gtk and queued applications that I sometimes play with I'm going to call this test-01 dot UI and save that UI file I'll get out of cute designer let me go ahead and open a terminal I'm going to CD into that Source directory and nvim I'm going to open test-01 Dot UI just to verify that it created that file correctly and there you can you can see the XML so let's go ahead and get out of that now what I'm going to do is instead of converting test-01.ui over to a python file I'm going to create a empty python script so I'm going to Vim test-01 dot hi 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 Pi Q5 make sure the capitalization is appropriate so capital P capital Q iq5 dot 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 Pi cute what it does it takes that XML file in 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 going to need import sys and I know I I'm going to need some more stuff from PI Q5 as well so from PI Q5 dot Q widgets I'm sure the spelling is correct there you import Q application with a capital Q a 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 acute application so we've got our Imports and then we've got class main UI Q main window because remember when we did the cute 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 dot 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 cute designer and then after that we have the little main block here where we have app equals Q application remember we imported queue applications so that's why we needed that sys dot org V sys that is one we need to do import assists here and then UI equals main UI the main UI of course it's the main window and then UI dot show show the mainwindow app.exec execute all of this and if I did this correctly which I'm not positive I did but let's give it a run let's see so I'm going to CD back into that Source directory I'll clear the screen and let's chmod plus X so turn on the executable flag for test-01 DOT 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 dot pi and there is our acute 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 Dash 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 diff 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 launch the program from the terminal and I hit the button in that cute application that says one it should print hello to the terminal now I have Windows swallowing turned on here inside X mode ahead so I actually won't have a terminal available when I run the queued 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 gonna 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 x d g Dash open so 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 dot 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.pi 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 oh there is an error subprocess 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 a sub process not found right so kind of like I told you we had to import CIS for sys and Q application and Q main window for queue 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 dot pi 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 going to click the one button Watch What Happens it opens the URL click it again it'll 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 cute designer and I can go back to cute designer and I can actually edit that UI file that's why I open cute designer 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 a text label somewhere if I actually save this and now let me open a terminal and CD back into the source directory and rerun just-01 dot Pi 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 if I 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 then now you can actually edit the UI file encute 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 cute 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 cute designer in the UI phone 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 I would probably find a comfortable Middle Ground where I go into a cute designer and I do as much as I can setting up a UI for a 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 cute 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 Armor Dragon Commander angry George Lee methos nadarian Paul peace action Fedor realities for Less red profit role and soul last Street tools double rewards into an Ubuntu and Willie these guys they're my highest tiered patrons over on patreon without these guys this little tutorial on Pi q and the cute 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 cute swear I have to distro tube over on patreon peace guys Python's cool but I miss working in Haskell

Channel: DistroTube

Views: 15,734

Keywords:

Id: o458Cv9ZM8I

Length: 19min 17sec (1157 seconds)

Published: Tue Jul 25 2023