2011
07.22

PwnEd : about UI coding

Progress is very slow on my code editor. As suggested by Mingos, it’s now named PwnEd, because the names I had in mind, Jed or Zed, are already used by editors. I’m currently using wxWidgets and Scintilla.

I’ve spent the last two weeks trying to figure out how to create a combo box (textbox + popup listbox) that looks the same on windows and Linux. I also need to have small icons in the listbox. Well it’s a lot harder than I thought.

Vanilla wxWidgets provides a native look by using directly the native controls. That’s generally what you’re looking for when you write an UI intensive application because it makes it blend smoothly in the OS. The inconvenient is that the same application has not the exact same look and feel from one OS to another. This is generally not an issue because most of the users use a single OS.

In my case, I intend to use PwnEd on Windows and Linux and I’d like to have the exact same experience on both OSes. It starts with the look :

If I use the native controls, I have to maintain 2 titlebar pictures because the textbox has not the same height on Linux. I’m not even mentioning the various GTK skins that will probably screw my layout. There’s probably the same issue on windows when you go from XP to Win7. Anyways, what I need is to be able to control the look almost at the pixel level so that this screenshot is the same on windows and Linux.

I’ve spent days sweating on wxWidgets and wxUniversal, a port that emulate the native look without using native controls and I still didn’t manage to control the way the combo looks. I eventually fell back to using a simple textbox with the idea to re-implement the dropdown button and the listbox by hand. Not sure I’ll succeed.

I’m also a bit annoyed by the size of wxWidgets. Even if I disable the features I don’t need, recompile it and compress the DLLs with UPX, I still have 6-8 MB of dll for a 500k code editor that barely uses any widgets.

At this point I started to look for a more modern, lightweight widget toolkit and I found the amazing Juce project. It contains an incredible amount of features in a pair of .h/.cpp files that you can embed in your project.  Sadly, the maintainers of this project show a religious hatred against mingw. I don’t really blame them. Most tech savvy guys end with some sort of religious hatred against some technology or company. And I won’t say mingw is the best compiler. It’s simply the only free compiler, as far as I know, that makes it possible to build win32 native applications with no dependency. Both cygwin and Visual Studio require a runtime.

The idea of dropping wxWidgets and using scintilla alone is slowly crawling in my mind. Scintilla contains Wingdi and GTK low level renderers that might make it possible to reimplement the combo from scratch, using scintilla itself for the text input.

Speaking of the editor itself, you might have noticed that I dropped two widgets universally used in text editors : the vertical scrollbar and the tabs. I’m not using PndEd enough to be sure that my replacements will be better (it’s been quite buggy theses days and I’m using pspad again), but I think they could work.

The vertical scrollbar is replaced by an horizontal scrollbar that shows the functions in the current document with alternating colors. When you move the mouse over it, you see the name of the corresponding function. The idea is that once you work on a project for some time, you get used to seeing the white/blue signatures of the files and you can instinctively navigate to a function with a single click.

The tabs are replaced by the combo. Of course, you can open the list of document and select the one you want to switch to, but the preferred way is to press ESC to move the focus to the textbox, and start to type a part of the document title. It gets auto suggested and you press ENTER to switch. That should provide fast and mouse-free document switching.

The textbox has a lot of other usages. For example, it can also suggest to open a file from one of the project directories, or navigate to a function in the current document.

 

2 comments so far

Add Your Comment
  1. I suggest using libtcod. Heard it’s very cool. ;D

  2. Not cool enough to support non monotype fonts… 🙂