0

I have been coding GUI with Tkinter and it's time to try something new and I like Pyqt5 (tho Kivy is great but I think it doesn't have any designer like PyQT does cause it would save a lot of time). I'm a beginner to this QT Desginer

So we have here our PYQT5 designer right... I have noticed this has a similar feature which is the drag and drop of wdigets to Java Netbeans IDE. I have been also coding in Java and I usually use the drag & drop feature for creating GUI applications and the good thing is you can directly write code with it (just double click the widget and you will be directed to the function source code). SO the question is does QT designer have it also? Like when you put the widget you can directly code its functionalities? Just like from Netbeans IDE if you are familiar with that. If not does Kivy also have that?

QT Designer

Qt desginer

Netbeans IDE drag & drop

Netbeans

Also I am wondering cause you can save the GUI file into a .ui file and convert it into python code then run python then the GUI shows up but what if I want to make some changes so I'll open the .ui file again and start dragging some widgets then convert it again to python code but again still I need to some what copy paste the code that I've made recently from the first one I have made so I'll keep doing that in development and I think that's a waste of time... especially if the application gets bigger and more broad does anyone know a technique that could make it easy? like yes for example when updates are needed to be done.

eyllanesc
  • 235,170
  • 19
  • 170
  • 241
  • You can't add code in Qt Designer. The general approach is to design the GUI in designer, import the .ui in a separate .py file (either directly or convert it to a .py first) and add functionality in this second file. This way you can update the .ui without messing up the code you've written. – Heike Oct 01 '20 at 07:03
  • `add functionality in this second file.` You mean is the python file right? after converting it... Okay thank you! but also is there a way like once I updated the GUI from the designer of course on the old python file I have code written in there... is there a way like I could somehow merge the changes I've made into the new python file which is also has the updated GUI. Thank you! –  Oct 01 '20 at 07:19
  • No, I mean a new empty file. The converted .py file should not be edited by hand. – Heike Oct 01 '20 at 07:31
  • Well once I do design the GUI is I export it or save it to a `.ui` file then I do this command `pyuic5 -x test.ui -o test.py` that's how I convert it to a python file. So what I am saying is if I were to update the GUI again of course I'll do that command again but the functionalities and code that I've written in the previous one isn't there anymore so I'll have to copy and paste it again. So is there a way to not do that? maybe more easier way. –  Oct 01 '20 at 07:39
  • Ohh... so you mean that I can create another `.py` file then go make the functions there and just import it on the `.ui` file that has been converted into `.py` file? –  Oct 01 '20 at 07:43
  • Yes that's what I mean. The general approach is to create a class in the new file that inherits from both the ui class defined in the converted file and the base widget (i.e. `QMainWindow`). In this subclass definition you can call `self.setupUi` in `__init__` to set up the ui and add all the extra functionality you need. – Heike Oct 01 '20 at 07:48
  • Ohhhh I think I'm getting your point.... would it be okay if you could provide an example :D –  Oct 01 '20 at 07:54
  • [the official pyqt5 documentation](https://www.riverbankcomputing.com/static/Docs/PyQt5/designer.html#using-the-generated-code) has some info how to do this. – Heike Oct 01 '20 at 07:55
  • Also, the warning at the beginning of those generated files is clear: any change will always be overwritten, which implies that you should not edit them by hand as all modifications will be probably lost (and, contrary to some interpretation, it does not mean "copy it elsewhere so that you can edit it safely"). In fact, you should **never** manually modify them, for absolutely *no* reason, unless you **really** know how to do it and why, and you are certain that the modification is mandatory due to pyuic misbehavior (which is very rare, and mostly required for very advanced use). – musicamante Oct 01 '20 at 08:10
  • Thank you! I am trying to figure it out right now but I seem to get stuck.. can you help me :( –  Oct 01 '20 at 08:45
  • I managed to figure it out! THANK YOU! –  Oct 01 '20 at 08:51
  • Can I answer my own question? Thanks to @Heike with the link you provided I studies on it and I finally understand the purpose –  Oct 01 '20 at 08:52

1 Answers1

0

Alternative and Efficient way

Okaay! So some people might not know this too... especially to beginners like me so here's how I solved it and thanks to @Heike

I managed to do it by this documentation on Using the Designer Code Using QT Designer Code

I used this concept where I made a class and inherited the QMainWindow and Ui_MainWindow class (from another .py file that comes from converting the .ui file into .py file). Then I used this concept which is based on inheritance.

class MyClass(QMainWindow,Ui_MainWindow):
    def __init__(self):
        #super(MyClass, self).__init__()
        super().__init__() #python 3

        # Set up the user interface from Designer.
        self.setupUi(self)

        #I'll start making some changes here

So since it inherited both QMainWindow and Ui_MainWindow class, I can now use and call the function .setupUi(self) which comes from the Ui_MainWindow class and this class is in another .py file that is generated automatically when you convert the .ui file to .py file from the QT Designer. Now the the .setupUi(self) function takes in a QMainWindow object and since I've inherited that class so I can pass self. Basically that's it now from the object that I created from MyClass I can call .show() function that will show the window since that function comes from the class QMainWindow that I inherited.

Thank you stackoverflow community!