Still need help: Best way to have application "skins"?

[codeslicer]

What's the best way to have different "skins" for an application each with different effects and slightly different buttons. Is reimplementing the main class a solution? Or Can the QUILoader be used? (I'm afraid it might be a bit slow, and might not support multiple-inheritance)

Anyways, if anyone could help out, that would be great

Thanks in advance ~codeslicer

[jpn]

See Style Sheet Example.

[codeslicer]

In one of my "skins", which is currently just a dialog, I use setMask and in the end have an irregulary shaped window. I have different event handlers which draw buttons which fade in and out when the mouse hovers over them. Then I want a plain skin which uses the system's window manager to do all the work. Does the QStyle class support this situation? Thanks so far though

[THRESHE]

I have different event handlers which draw buttons which fade in and out when the mouse hovers over them. Then I want a plain skin which uses the system's window manager to do all the work. Does the QStyle class support this situation? Thanks so far though

That's possible for hovering you should use styles like this

QPushButton
{
	background-image: url(:/images/Buttons_Styles/b_butt_free.png);
	border: none;
}
QPushButton:hover 
{				
	background-image: url(:/images/Buttons_Styles/b_butt_over.png);
	border: none;
}
QPushButton:pressed 
{				
	background-image: url(:/images/Buttons_Styles/b_butt_down.png);
	border: none;
}
QPushButton:disabled
{
	background-image: url(:/images/Buttons_Styles/b_butt_disabled.png);
	border: none;
}

QPushButton
{
	background-image: url(:/images/Buttons_Styles/b_butt_free.png);
	border: none;
}
QPushButton:hover 
{				
	background-image: url(:/images/Buttons_Styles/b_butt_over.png);
	border: none;
}
QPushButton:pressed 
{				
	background-image: url(:/images/Buttons_Styles/b_butt_down.png);
	border: none;
}
QPushButton:disabled
{
	background-image: url(:/images/Buttons_Styles/b_butt_disabled.png);
	border: none;
}

To copy to clipboard, switch view to plain text mode 

And then use QWidget::setStyleSheet

[codeslicer]

Ok, how would I designate certain parts of the qlabel to react to hover? For example, if I have this image:

====
- [] x
====

And it's one big QLabel, how would I set different images depending on where the button was using Style Sheets? I want to do it like the HTML image maps.
Thanks in advance for any help

No help yet?

[codeslicer]

*bump*
Anyone?

[wysota]

What exactly is the effect you want to achieve?

[codeslicer]

Having different "skins" and forms in general. This is the situation:

I have an app which has a custom titlebar, buttons, and even a custom shape using QWidget::setMask(), but for platforms on which this wouldn't really fit in (IE Mac), I want the user to be able to "turn off" the skin and load a form which doesn't use any effects/custom titlebars and uses the default window decorations. Should I create two seperate QWidget classes, ie myApp() and myAppWithCoolSkin(), and check what option the user picked by checking QSettings before the widget is even initialized? That looks like it would involve copy and paste of the same code.

Any help will be appreciated. Thanks in advance, again

[wysota]

As for everything but custom window shapes you can use a custom QStyle subclass and simply replace one style with another upon demand. As for custom shapes that you want to obtain through setMask() unfortunately you need to do the masking manually, thus you need to come up with a system of reading shapes from some configuration files and applying them to your widgets.

[codeslicer]

Well, I don't really want a whole skin manager, just let the user pick between the stylish one and the plain one. I don't need to have different skin files and such, just let the user chose between the one with setMask() and buttons with effects, etc, and one which will try to fit as best as possible with the native platform.

Can I use different classes then? With the same code?

[wysota]

You can use the same classes. Just have a component which will be able to style other components.

[codeslicer]

Ok, but if I have 2 seperate .ui files, how would I declare them in the same class? All of my buttons, boxes, etc will still have the same object names, so I guess I don't really need to change the "core" of my program. Maybe, in the constructor, I should have an if() tag which should check QSettings if the app should load the new/old skin, and somehow load a different ui file based on that?

But I have a question. If I use the QUILoader class, is it slow? And does it support multiple inheritance? Thanks

Oh, and when are style sheets going to be supported on Qt/Mac?

[THRESHE]

Oh, and when are style sheets going to be supported on Qt/Mac?

They are already supported

[codeslicer]

Ok, that's good!

But how do I use 2 seperate ui files in the same class? QUILoader? Sounds slow and looks like it doesn't support multiple inheritance...

[THRESHE]

Ok, that's good!

But how do I use 2 seperate ui files in the same class? QUILoader? Sounds slow and looks like it doesn't support multiple inheritance...

I don't really understand what do you want to do. If you want to set style sheet to a widget in ui form just press right mouse button on it and select change style sheet and change it like on the screenshot

[jpn]

But how do I use 2 seperate ui files in the same class?

What do you intend to do? It makes no sense to load two different .ui's on a single widget, does it? You can use direct approach if you have two different widgets for which you want to load different forms. But by using direct approach you also lose a lot of flexibility. Then why not just wrap those two widgets as separate classes which both use single or multiple inheritance approach...

[codeslicer]

Thanks for trying to help me. A lot. Maybe I explained myself wrong.

I have this form with style sheets and custom buttons, setMask() enabled on some parts, etc. Then, I have a second form which doesn't use any of that, and uses the Operating System's Style. Now, at first, the "fancy" form is used for the program, but what if the user doesn't like it? Or what if somehow it doesn't work on his/her system? I want the user to be able to chose between using the "fancy" form and the "plain" one.

If I want to have two different forms, with the "fancy" one containing different functions which would be used for setting effects, and the core functions, while the "plain" one will just have the core functions(functions which perform what the program is going to do, ie download and read a file), how would I approach that. Can I have two seperate classes, one which would use the form with the effects, then a seperate one which wouldn't use any effects at all?

Is this possible?

[jpn]

Wouldn't it be only a matter of removing style sheets, custom styles and/or masks (which ever you end up using)?

[codeslicer]

Well, it's not as simple as myApp->removeStyle() or something like that.

The "fancy" design is completely different, the only things that are the same are the object names...

[jpn]

The "fancy" design is completely different, the only things that are the same are the object names...

You mean like the form layout is completely different? I suppose you could use single inheritance approach and have two different ui members:

#include "ui_plainwidget.h"
#include "ui_fancywidget.h"
 
class MyFancyWidget : public QWidget
{
    ...
private:
    Ui::FancyWidget fancyUi;
    Ui::PlainWidget plainUi;
};
 
void MyFancyWidget::setFancyMode()
{
    saveFormState(); // you might want to store contents if you let user to change mode on the fly
    qDeleteAll(children()); // or something like this to clear everything, it is important to delete layout()
    fancyUi.setupUi(this);
    restoreFormState(); // restore contents
}
 
void MyFancyWidget::setPlainMode()
{
    ...
    plainUi.setupUi(this);
    ...
}

#include "ui_plainwidget.h"
#include "ui_fancywidget.h"

class MyFancyWidget : public QWidget
{
    ...
private:
    Ui::FancyWidget fancyUi;
    Ui::PlainWidget plainUi;
};

void MyFancyWidget::setFancyMode()
{
    saveFormState(); // you might want to store contents if you let user to change mode on the fly
    qDeleteAll(children()); // or something like this to clear everything, it is important to delete layout()
    fancyUi.setupUi(this);
    restoreFormState(); // restore contents
}

void MyFancyWidget::setPlainMode()
{
    ...
    plainUi.setupUi(this);
    ...
}

To copy to clipboard, switch view to plain text mode