Qt and Layouts

When I first started with graphics - I plotted pixels onto the screen by calculating a memory address and then poking the corresponding value. Times have changed since then. My murky history contains gwbasic, STOS, HiSoft Basic (compiled!), VisualBasic (numerous versions) until I found C and AES (on the Atari ST), Win16 (that is Windows 3.1) and even Presentation Manager on OS/2 (in the pre-Warp days).

Finding myself at university, I ran in to the Tru64 platform. That means Alphas and a Unix dialect that wasn't really compatible with anything that I knew. I dabbled with xlib and GTK but then some friends of mine and I set out to build KDE (the school provided FVWM). That meant building Qt along with loads of other stuff. This was a time when 64-bits was exotic - and guess what Tru64 runs on.

If our hands weren't full from just building the project, we also had to build it on a temporary drive as our accounts where too limited. That meant keeping the build times short enough to avoid the rm -rf that was run on the temporary area every night by sysop. We also had to place parts of the binaries in web directories and use symbolic links to get them into the tree spread over our home directories (there were some heated discussions when they realized what we did). The lesson for the sysop was to run quota on all disks - not just the /home tree...

Enough nostalgia, and on towards the point. Through all my previous experiences, graphics were placed at a specific pixel location. Usually relative to the upper left corner (i.e. base address of the framebuffer memory) or to the upper left corner of the current parent widget (i.e. inside a window). Windows complicated this by using dialog units, i.e. basing the locations on the font size.

Building Qt meant trying to use Qt, and this moved me beyond fixed pixel locations. I'm not claiming Qt was first, nor is best at this. As all great ideas, this must have been inspired from somewhere. In Qt (and GTK+ and most other modern toolkits) widgets (controls, elements, call them what you like) are placed in "layouts" and that is pure genious. By letting widgets hint about what size they want and then provide size policies, the layouts let the widgets negotiate for space.

Let's take an example. The very simple dialog shown at the start of this article consists of three widgets: a text editor (QLineEdit), a button (QPushButton) and a list widget (QListWidget). All of them are placed in a grid layout (QGridLayout) with the list spanning two columns.

All widgets provide a size hint, i.e. some size information to start negotiations from. The size hint is usually calculated from the contents of the widget. The interpretation of the size hint can be: don't care, I'd prefer this but can go either way, this is my absolute minimum or maximum size, or this is my final size. Also, the interpretation can be different depending on the direction (horizontal or vertical).

Returning to the example dialog, the widget easiest to understand is the list. It returns a small hint, but wants to expand as much as it can in either direction. It is happy with what it can get, but wants as much as possible. This size hint interpretation, or size policy is called Expanding and is used in both directions.

The text editor and button both return hints based on the contents. Height wise, they are both single-line widgets (in this context) so the height is Fixed. The eagle eyed reader might even notice that the text editor is not quite as high as the button and thus centered vertically.

Horizontally, the button provides a Minimum size so that its text does not get truncated while the text editor takes as much as it can (Expanding). All these policies and hints are balanced by the grid layout to provide the dialog shown.

So, what are the benefits to layouts? I can see three obvious cases:

  1. Internationalization - "Add" is "Addera" or "Lägg till" in Swedish. That requires a larger button - something that the layout can handle without requiring changes to the dialog.
  2. Screen resolution changes - i.e. larger fonts (in pixels) are handled automatically by layouts, again without needing to change the dialog.
  3. Stretchable user interfaces - if the list were to contain long file paths, the user can simply stretch the dialog to reveal the entire path and the dialog controls stretch with it. Without layouts you end up scrolling or simply missing out.
______________________

Johan Thelin is a consultant working with Qt, embedded and free
software. On-line, he is known as e8johan.

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

jklqwjlekqwe

Anonymous's picture

Wonderful.

Share a website with you ,
http://www.tnta.us

Believe you will love it.

Dear customers, thank you for your support of our company.
Here, there's good news to tell you: The company recently
launched a number of new fashion items! ! Fashionable
and welcome everyone to come buy. If necessary, please
plut: http://www.tnta.us

We need your support and trust!
╰—┘ 。 ┅★`_、
│\__╭╭╭╭╭__/│   
│ │            
│           │ 
│  ●       ● │ 
│≡    o    ≡│
│           │ 
╰——┬O◤▽◥O┬——╯
   |  o  |
   |╭---╮| ┌┬┬┬┐

Widget Layouts, Tracing Back In Time

dyek's picture

My "few" encounters with layout were:
first with Java Layout Manager,
then, GTK+'s size negotiation and allocation,
then, with the old X (or MIT) Athena widget's Geometry Management.

So, layout was there since the beginning of PC era.
The one glaring left-out was in Microsoft Windows, for whatever reason, leaving Windows programmers under-exposed to layout and the resulting poor (often close to unusable) application sizing behaviors.

I suspect that Geometry Management (layout) was first introduced to the mainstream programmer by this Project Athena and then further popularized by Java and Linux's toolkits (GTK+ and Qt).

When I wrote a more sophisticated widget (and also the application itself when appearance and size control/behavior is worth the development time), I found understanding Athena's Geometry Management to be helpful in understanding modern toolkit's layout algorithms and rational.

Correction.

dyek's picture

> The one glaring left-out was in Microsoft Windows, for whatever reason, leaving Windows programmers under-exposed to layout and the resulting poor (often close to unusable) application sizing behaviors.

I shall retract the above statement as while it should be true for quite a long time, it appears to no longer be true with .NET Framework widget toolkit.

Correction.

dyek's picture

> The one glaring left-out was in Microsoft Windows, for whatever reason, leaving Windows programmers under-exposed to layout and the resulting poor (often close to unusable) application sizing behaviors.

I shall retract the above statement as while it should be true for quite a long time, it appears to no longer be true with .NET Framework widget toolkit.

Hello! The burning hot summer

lincc268's picture

Hello! The burning hot summer arrived, this is the demonstration stature good season,
the retreat winter sincere appearance, lets lithe, the individuality, the fashion,
the sex appeal, mature you start from here! Has a good news to tell everybody: Recently,
every bought full 200 US dollars in this company, then has the present to see off,
Vietnam which buys delivers are more, please do not miss this good opportunity!!!
welcome to ::[ w w w .b i z b o y s e l l .c o m ]
(b..r..a..n..d.)s.h.o.e.s.(34u.s.d),,

==J. a .m .e )) shoes

< j o r d a n> (1-24) shoes

< j o r d a n> 2010 shoes

c.l.o.t.h.i.n.g,,j.e.a.n,,h.a.n.d.b.a.g(35u.s.d),,

==c .o. a .c .h )) handbag

(f.r.e.e)s.h.i.p.p.i.n.g

[ w w w .b i z b o y s e l l . c o m ]

Layouts.

Al's picture

I was turned off on layouts due to working with Java Swing and spending countless hours mixing and matching layouts (layouts within layouts) to make the application approximate the desired appearance. Even then resizing or maximizing the application wouldn't always be handled gracefully (yes, I said Swing and not AWT).

Aren't we to the point where we can visually design how our application should look and let the IDE manage generating the code (using layouts or whatever underlying rendering mechanism is in place) or am I getting too lazy (there are days when I don't feel like going to work so that might be the first clue)???

In the very moment you grok

Anonymous's picture

In the very moment you grok Qt you're able to see how much
Java sucks. Java is ok on the server side but for GUIs
it is crap.

You can visually design the

Anonymous's picture

You can visually design the application with Qt Designer. The design is savedto a xml file with a .ui extension. You can then bind it to an arbitrary class. It works wonderfully.

Webinar
One Click, Universal Protection: Implementing Centralized Security Policies on Linux Systems

As Linux continues to play an ever increasing role in corporate data centers and institutions, ensuring the integrity and protection of these systems must be a priority. With 60% of the world's websites and an increasing share of organization's mission-critical workloads running on Linux, failing to stop malware and other advanced threats on Linux can increasingly impact an organization's reputation and bottom line.

Learn More

Sponsored by Bit9

Webinar
Linux Backup and Recovery Webinar

Most companies incorporate backup procedures for critical data, which can be restored quickly if a loss occurs. However, fewer companies are prepared for catastrophic system failures, in which they lose all data, the entire operating system, applications, settings, patches and more, reducing their system(s) to “bare metal.” After all, before data can be restored to a system, there must be a system to restore it to.

In this one hour webinar, learn how to enhance your existing backup strategies for better disaster recovery preparedness using Storix System Backup Administrator (SBAdmin), a highly flexible bare-metal recovery solution for UNIX and Linux systems.

Learn More

Sponsored by Storix