./Blog

QSKM Devblog #1 - Early Prototype

Hello there! Since my last announcement to rewrite SKM, I have dedicated some time to research the possibility of porting SKM to Python. It turns out to be quite easy with PyQt, a Python wrapper for Qt framework. After learning some PyQt basics (shout out to Jan Bodnar for this great tutorial), I attempted to recreate the old Java implementation in Qt Designer. The result? Quite satisfying!

《QSKM Devblog #1 - Early Prototype》

Screenshot of Qt Designer with early prototype UI

I was pleased by all that different kinds of ready-made widgets and a wealth of options I can tinker (which means… less code!) with Qt Designer and Qt framework itself. Since I am already familiar with how layout works in applications and have worked with various layout designers in the past, Qt Designer feels quite familiar to me. Most components can be added by drag-and-drop, then they can be fine tweaked with their property sheets in the right. It appears that I can also add event handling in the Designer, by utilizing Signal/Slot Editor in the lower right.  (Qt uses an unique communication protocol called Signals and Slots).

The best thing about using Qt Designer is I can set up UI parts in just a few minutes. I came up with a design (shown above) that roughly resembles the old JavaFX implementation (shown below) in less than 20 minutes. I can also get a pretty good idea about how the program actually gonna look like without even compiling the code. All that convenience was unthinkable back when I was developing in JavaFX (FXML might alleviate some of the problem but I never got to the point to start using it).

《QSKM Devblog #1 - Early Prototype》

Original SKM implementation in JavaFX

Now I have the design, how do I import it to my Python project? Turns out it’s surprisingly easy. The PyQt package came with a command line tool pyuic that automatically translates .ui (XML) files generated by Qt Designer into Python code. Simply run

pyuic5 ui/MainWindow.ui -o ui/MainWindow.py

and my MainWindow design is already in Python!

So here’s what it looks like at present. I know it looks ugly, but keep in mind it is designed in short amount of time, and haven’t been tweaked at all. With Qt Designer and PyQt, I can finally focus on the logic of the program, without worrying much about the layout.

《QSKM Devblog #1 - Early Prototype》

What it looks like… for now

Thank you for your reading. Stay tuned for more updates!

点赞

2
说点什么

avatar
10000
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
LinPPPPPH Recent comment authors

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

  Subscribe  
最新 最旧 得票最多
订阅
PPPPPH
游客
PPPPPH

给立立打call!(不会代码的我哭哭