In-pane preview of Qt UI files with KUIViewer coming up

The “Live Preview” plugin for the editors/IDEs Kate & KDevelop (see introduction) makes use of KParts plugins to support different file formats. Thus it can also pick up the range of existing KParts implementations out there right from the start.

A perfect user experience with the “Live Preview” plugin means:

  • automatic updates of the preview while one edits the sources, without a reset of the preview settings (scroll position, zoom state, etc.)
  • not going through the file system to push changes in the sources to the preview

For that usually some more work needs to be done to the existing KParts plugins.

Editing in the Qt UI file worlds

One of those plugins, where I also have personal interest in and thus giving priority, is the KParts plugin from the KUIViewer, a tool to display and check Qt user interface (*.ui) files. Because in the recent time I have edited Qt UI files quite often and started to do this manually directly in the XML-based sources instead of in Qt Designer, as it became quicker to do for me the more I had learned the syntax. But for checking the current state I still had to save the file and load it separately in Designer or KUIViewer.

So the KUIViewer KParts plugin and the “Live Preview” plugin for KDevelop have started to improve my developer life 🙂

“Containers” for the rescue, once more

Besides some pain points though: if you used KUIViewer yourself before, you might remember that its code was operating straight forward. For one it instantiated any UI file as-is, e.g. showed a QMainWindow-based UI also as normal separate window in the workspace, so not embedded in the window of KUIViewer itself. Which comes at least as surprise, if not as something unhandy. Especially for the use with the “Live Preview” plugin, where the automatic update of the preview and thus the reloading of the UI file in the KUIViewer code means windows coming and going all the time.
Then normal widgets were shown as main widget of the KUIViewer window, which for very big or very small widgets result in according changes to the window and broken display in the “Live Preview” plugin.

Too much pain, and then I was looking at the sources anyway. So while extending the KUIViewer KParts plugin to implement the streaming API and restoring/keeping the view state on reloading from the same URL, I also reached out for the class QMdiArea for the rescue and changed KUIViewer to show the object defined by a UI file as a subwindow instead. And that way allowing widgets to have any sizes, but also taming QMainWindow-based UI to not escape the KUIViewer scene:

This change will be coming to everyone as part of KDE Applications 17.12.

And thanks to the respective code being in the KUIViewer KParts plugin, without any further changes we get the same tamed behaviour in the “Live Preview” plugin:

Improve your favourite KParts plugin for the “Live Preview”

If you edit some other sources often and want to be supported by the “Live Preview” plugin, get and build the plugin quickly yourself, the current state works good enough.
Then see if there is a matching KParts plugin you then can improve as needed.

The “Live Preview” plugin is currently planned to be released as official part of KDE Applications 17.12 and later as well, possibly as part of the Kate repo. So a few months left to shape up your favourite KParts plugin. Go for it now to be done in time 🙂


13 thoughts on “In-pane preview of Qt UI files with KUIViewer coming up

  1. This is still a preview of the .ui, right? I mean you can’t directly put widgets and stuff like qtdesigner, you have to edit the ui and preview what is looks like if I am correct.

    It would be super handy to be able to create and edit windows, buttons etc like qtdesigner from within KDevelop. A plugin maybe could do the job.

    • Good to see! Every journey starts with some small steps. congrats to have your first done 🙂

      Myself have lots on stuff on my plate, but might see to look at this perhaps around End of Year.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.