QSlider
I have been avoiding QSlider for sometime now. Sliding the QSlider would have been straightforward if the code was correct :). You need this teeny weeny patch against 4.3 (If you are using a week old 4.3 snapshot, you are good). Comments inline.


QSlider::groove:horizontal {
border: 1px solid #999999;
height: 8px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
}
QSlider::handle:horizontal {
background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
border: 1px solid #5c5c5c;
width: 18px;
margin: -2px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
border-radius: 3px;
}

Here’s how it looks:

If you require more control, play around with something like this (note that this is a vertical slider):
QSlider::groove:vertical {
background: red;
position: absolute; /* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too... */
left: 4px; right: 4px;
}
QSlider::handle:vertical {
height: 10px;
background: green;
margin: 0 -4px; /* expand outside the groove */
}
QSlider::add-page:vertical {
background: white;
}
QSlider::sub-page:vertical {
background: pink;
}

QHeaderView
I thought I will have a go at something that looks like the header view in this plasmoid and show some advanced usage of the new pseudo states but I gotta run (and this posts been sitting as a draft for way too long).

QHeaderView::section {
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #616161, stop: 0.5 #505050, stop: 0.6 #434343, stop:1 #656565);
color: white;
padding-left: 4px;
border: 1px solid #6c6c6c;
}

Here’s how it looks:

I’m trying to get my presentations for Saturday’s Akademy conference ready, which is going really well. Let me rephrase - it’s not going well, but I tremendously enjoy pressure and cookies. The latter having, unfortunately nothing to do with any of this blog. I’ll be talking about graphics and linguistics and want to show some neat things I’ve been working on lately. Assuming I’ll finally get those things to work the way I want them to. Which would be really good for the purposes of demos. Otherwise we’ll enjoy some quiet time or start exchanging childhood stories. I’ve got a few good ones.
Speaking of horrifying experiences today was a sad day. If I had any feelings I’d be very sad. There could be serious tearing. Donald Carr, who’s been one of the coolest people here at Trolltech, resigned and is leaving to the USA tomorrow. Together with Donald we formed the “Ghetto Trolls” interest group, in which we spent our time arguing over who’s living in worse conditions. I slept on the floor and couldn’t eat anything, he didn’t have electricity. Tough call. Hopefully I taught him a little bit about graphics and he made me realize that buying two bottles of orange juice and milk in Norway is equivalent to half a sheep in South Africa and sheeps are a rare and precious commodity. Now, why would anyone want half a sheep, I don’t know. I’m assuming it must be because I’m not South African. I guess it depends which half of the sheep we’re talking about.

Anyway, here’s a picture of the “Ghetto Trolls” and if you’re coming to Akademy hopefully I will make it worth your time.

It is quiet some time ago, since we announced here on the blog that three brave Trolls are on their way of porting Qt to the Windows Embedded World. We think it is time to provide you some updates on this topic.

We have just released our preview release “Kicker”. Compared to the last blog entry (QtCore/QtGui/ActiveQt), we have added QtNetwork, QtXml, QtSvg and the biggest step: We migrated to Qt 4.3 as a basis for our work.

Using 4.3 gained us a lot, especially performance-wise. We gained around a 110% speedup in the anti-aliased painting. That is a huge improvement as mobile devices usually have a slower hardware configuration than a desktop machine. Also the changes to the fileengine (using native handles on Windows) helped a lot to improve the general I/O performance and stability.

You might recognize the style from previous blog entries

The networking part took some effort. As some of you might know, Windows CE uses only a subset of the native win32 API and network wise it lacks most of the asynchronous functionality. As Trolltech provides the same quality and efficiency for each platform we support, the decision was clear to make everything also working for the Qt/CE port. So take a look at the following screenshot showing the ftp example on a Windows CE 5 emulator(x86).

Although OpenSSL is not officially supported for Windows Mobile 5, it is possible to build the libraries on your own and in that case you can use OpenSSL inside of Qt/CE. It is fully supported!

It always differs from developer to developer, what he actually uses of Qt. The remaining parts just stay untouched. While on a desktop this usually does not matter, on mobile devices it does. Space is always a big criteria during development and because of that we have decided to apply the Qfeatures system for Qt/CE. This allows you to build up your custom configuration of which classes should be build inside the separate Qt modules.

Developers, who are familiar with Windows CE, might have recognized a lot of issues when they want to communicate with the device outside of Visual Studio. Especially starting an application remotely or having file I/O inside of the terminal. We fell over this situation and decided to have some additions to the Qtest library. Internally we use a small application which is responsible for deployment, execution and result display of auto-tests.

For those of you, who are already using Windows CE 6 or Windows Mobile 6, we can just say, feel free to. We do support all these platforms also. Just take a look here:

This looks pretty much like the same screenshot we had posted before, right? But it is Windows CE 6 on ARM, believe us

Did we mention, that you can use Qt/CE also on Windows Vista? Well now we did.

Writing some words on Windows Vista. Currently we do have some minor issues as ActiveSync (the application behind the Remote API for Windows CE) is not supported anymore for Vista. Microsoft exchanged it with the “Windows Mobile Device Center”, which has the same options for regular users, but does less for developers. We are investigating on this and will find a solution for the auto test system.

I hope, we could get you up to date and you’re even more interested on our Qt/CE port. In case you cannot wait until the first tech preview is out and you want to try out the “Kicker” preview package right now, feel free to contact us at sales@trolltech.com to join the preview program.

I added a new example to what will become Qt 4.3.1 today: Secure Socket Client. We didn’t have time for 4.3.0, unfortunately. But never the less, here it is. Hopefully this will make it easier for you all to start using QSslSocket and the other SSL classes in Qt 4.3.

Enjoy!

It has been difficult to not talk about this, but Trolltech has finally announced one of the pet projects I have worked on…

the Greenphone Innovation Program!!

If you are a developer and have wanted a Greenphone (for free!), and have a great idea for an application that you will develop, this is your chance for getting a free Greenphone!

Today we will look at the styling of one of the most complex widgets (when it comes to styling) in Qt - The QTabWidget. Fasten your seat belts so you don’t get blown away

Comments inline.

QTabWidget::pane { /* The tab widget frame */
border-top: 2px solid #C2C7CB;
}
QTabWidget::tab-bar {
left: 5px; /* move to the right by 5px */
}
/* Style the tab using the tab sub-control. Note that it reads QTabBar _not_ QTabWidget */
QTabBar::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #E1E1E1, stop: 0.4 #DDDDDD, stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border: 2px solid #C4C4C3;
border-bottom-color: #C2C7CB; /* same as the pane color */
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #fafafa, stop: 0.4 #f4f4f4, stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
QTabBar::tab:selected {
border-color: #9B9B9B;
border-bottom-color: #C2C7CB; /* same as pane color */
}
QTabBar::tab:!selected {
margin-top: 2px; /* make non-selected tabs look smaller */
}

This is how it looks:

“But but but… I want overlapping tabs!”. Negative margins to the rescue. Add this to the style sheet above.
/* IMPORTANT: 8< Add the code above here 8< */
QTabBar::tab:selected {
/* expand/overlap to the left and right by 4px */
margin-left: -4px;
margin-right: -4px;
}
QTabBar::tab:first:selected {
margin-left: 0; /* the first selected tab has nothing to overlap with on the left */
}
QTabBar::tab:last:selected {
margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
}
QTabBar::tab:only-one {
margin: 0; /* if there is only one tab, we don't want overlapping margins */
}

Here’s how it looks:

You can also play around with fonts and colors. For example,
QTabBar::tab:selected { font: bold; color: green; }

You can move the tab bar to the center and adjust the pane using something like,
/* 8< remove the tab-bar rule and the margin-top rule in the first stylesheet */
QTabWidget::tab-bar { alignment: center; }
QTabWidget::pane { position: absolute; top: -0.5em; }

Note that the above style sheets style assumes the tab bar to be at the top. You can use the :left, :right, :top, :bottom pseudo states for the position of the tab bar. There is also, :next-selected to indicate the next tab is selected, :previous-selected to indicate the previous tab is selected, :middle for a tab that is not the first or the last (same as :!first:!last). With some creative use of the above pseudo states, you can “merge” adjacent tab borders like in Plastique. And of course, you can use border-images to have the tabs curve in to the tab pane.

I had the privilege of attending Apple’s World Wide Developer Conference (WWDC) again this year. This is Apple’s annual developer get-together in San Francisco where you can find out about Apple’s future plans for Mac OS X, chat with fellow developers, and avail yourself of all the Apple engineers on-site. This was my fourth year there and I think I’ve gotten the hang of it. This year, however, I (and Trolltech) was in for a nasty surprise.

The previous year, Apple announced what its plans were for Mac OS X 10.5 (or Leopard). One of the new features was that Leopard was going to be 64-bit the entire way through. People keeping score at home should note that the C and C++ libraries were 64-bit in Tiger, but none of the GUI libraries like Carbon or Cocoa. Naturally, we knew that there were lots of people who use Qt to write scientific, visualization, and video applications so it seemed like a good idea to make sure that when Leopard was going to be released in “Spring 2007″ Qt was there to run in 64-bit. We were in pretty fair shape, having already been on the new Carbon technologies introduced in 10.2, but there were still some things that had to be fixed up, and we had to modify the build system, but that’s doable. There were also many bugs in the 64-bit Carbon that we filed bugs against the ones we could get reproducible test cases for. At the end, Qt 4.3.0 was released with the ability to build on Leopard in 32-bit and 64-bit. If you felt plucky enough you could build it all “universal” and have a truly fat binary with versions for PPC, i386, PPC64, and x86_64. This would have been even more impressive, if there was a Leopard that was publicly available so people could take advantage of it.

So, here it was June 2007, we had released Qt 4.3.0, but Apple had delayed Leopard to October. Then, at WWDC, Apple announced that they would not be including HIView and Carbon windows, and other GUI parts of Carbon in 64-bit in their final version of Leopard. This basically contradicts what they said the previous year and makes a fair bit of the work that we did for 64-bit in Qt useless—leaving Qt with a hole for 64-bit support on Mac OS X.

Now, getting news like this hurts on several levels. First, there’s the personal level where there’s the work you’ve put in, re-writing classes, adding all the version branches to make things work (writing an #ifdef 64-bit, 10.4, and 10.3 is a interesting exercise), and getting the build system to work. Then there’s the fact that there’s lots of people who use your library to write amazing applications (I got to see some at WWDC and they were impressive). What can you do for them? Needless to say, it wasn’t the most pleasant information to hear.

The rest of the conference, between attending sessions and talking to Apple engineers, I encountered a lot of Qt developers (either in person or via email). This was really positive. I knew that there were quite a few developers out there using Qt on the Mac, but getting a chance to talk them in person is always great. The big question that most people asked was, “what is Trolltech going to do about 64-bit?” As a developer, I couldn’t really give a definitive answer other than, “I would be surprised if we don’t have some sort of 64-bit solution.” This seemed to ease the fear for these developers and they also seemed to indicate that they were willing to wait a bit for the solution to materialize. As a developer, I can appreciate that response.

Now that I’ve been back in Oslo, I’ve actually had a chance to talk to product management and it seems that we will indeed have that 64-bit solution. The official statement is here. It also includes some Q&A that should cover most concerns.

So, in the future you can expect to see a 64-bit version of Qt using Cocoa under the covers. That is, of course, assuming we still have something like HITheme available to draw our controls. Unfortunately, even now I don’t know what that answer will be (hopefully yes). When we know what APIs are actually available to us, we can start actually making some sort of schedule. Right now, it’s a bit unnerving. If we do get Carbon back in 64-bit, we are in much better shape of course

If you feel strongly about this, please don’t hesitate to get ahold of your local Apple contact (whether via WWDR or through the contact information in the link above). We already have, but to Apple, Trolltech is but a pebble in the water, but if all Qt/Mac developers let their voice be heard we are a much stronger force.

Among the many changes happening for Qtopia 4.3, is a really nice new default theme look.

Have a look! What do you think?

The problem in brief: Trolltech invented signals & slots, Boost implemented the concept using plain templates, and ironically you couldn’t easily combine both libraries because of a relatively simple name clash. Trolltech used macro keywords and Boost loved our naming so much that they picked the same terms => clash. Off topic, I like that they took our naming, it’s a bit of a pity recent implementations done by other parties call the very same concept events and delegates.

Anyway, with “CONFIG += no_keywords” we have solved the name clash in Qt 4.1, released in December 2005.

Scott Collins now let me know, that the May update of the Boost libraries has an updated Boost.Signals FAQ with respect to Qt that describes the technique. Have a look at http://boost.org/doc/html/signals/s04.html. It explains how to use Boost signals & slots in Qt applications, and also references Scott’s own article, “A Deeper Look at Signals and Slots”.

Update Monday, 30 June 2008: The links appear to be dead by now. No alternative links known to me, sorry, but way back can help: http://web.archive.org/web/20070703100120/http://scottcollins.net/articles/a-deeper-look-at-signals-and-slots.html

Qt 4.3 Style Sheets, as you most likely know, introduces styling of most widgets. The documentation is a quite silent when it comes to providing “style templates” - templates that you can just copy/paste and get started with styling the widget. Today, I started creating templates for QProgressBar and QScrollBar. All this will become a part of 4.3.1 Style Sheet documentation.

QProgressBar
QProgressBar:horizontal {
border: 1px solid gray;
border-radius: 3px;
background: white;
padding: 1px;
}
QProgressBar::chunk:horizontal {
background: qlineargradient(x1: 0, y1: 0.5, x2: 1, y2: 0.5, stop: 0 green, stop: 1 white);
}

Here’s what you get:

You say “Oh sweet, but I want WindowsXP like progress bars. And the label needs to be outside since its easier to read”. Yeah, sure.
QProgressBar:horizontal {
border: 1px solid gray;
border-radius: 3px;
background: white;
padding: 1px;
text-align: right;
margin-right: 4ex;
}
QProgressBar::chunk:horizontal {
background: qlineargradient(x1: 0, y1: 0.5, x2: 1, y2: 0.5, stop: 0 green, stop: 1 white);
margin-right: 2px; /* space */
width: 10px;
}

Note that you need set the height for vertical progress bars. You can use “:indeterminate” for indeterminate progress bars. And there’s a small bug which breaks text alignment (fixed in 4.3.1).

QScrollBar

QScrollBar:horizontal {
border: 2px solid green;
background: cyan;
height: 15px;
margin: 0px 20px 0 20px;
}
QScrollBar::handle:horizontal {
background: gray;
min-width: 20px;
}
QScrollBar::add-line:horizontal {
background: blue;
width: 20px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal {
background: white;
width: 20px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
width: 3px;
height: 3px;
background: pink;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
background: none;
}

Here’s the awful but didactic screenshot:

Style sheets are so powerful that you can actually place those add-line, remove-line button anywhere!
QScrollBar:horizontal {
border: 2px solid green;
background: cyan;
height: 15px;
margin: 0px 40px 0 0px;
}
QScrollBar::handle:horizontal {
background: gray;
min-width: 20px;
}
QScrollBar::add-line:horizontal {
background: blue;
width: 16px;
subcontrol-position: right;
subcontrol-origin: margin;
border: 2px solid black;
}
QScrollBar::sub-line:horizontal {
background: magenta;
width: 16px;
subcontrol-position: top right;
subcontrol-origin: margin;
border: 2px solid black;
position: absolute;
right: 20px;
}
QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
width: 3px;
height: 3px;
background: pink;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
background: none;
}

For vertical scroll bars, you will need to replace width with height and use up-arrow and down-arrow. That said, remove those boring borders, slap in a few border-images, gradients and background color and it’s simple to create beautiful custom scroll bars.