On 2014.02.18., at 20:20, Keve Nagy <[email protected]> wrote:
> Good Evening Everyone,
> I am trying to change the background colour of a window, from the default
> gray to white.
> This is only needed in one particular window, so theming would be an
> overkill. I just did the obvious:
>
> var whiteWin = new qx.ui.window.Window("Window with white BG");
> whiteWin.setBackgroundColor("white");
> whiteWin.setWidth(200);
> whiteWin.setHeight(155);
> whiteWin.open();
> this.getRoot().add(whiteWin, {left:25, top:10});
>
> The script loads without error, the window shows up, but it still has the
> default gray background colour instead of the expected white.
> When I place a translucent PNG image inside the window and I change the
> background colour of the image, that works fine.
> Also, when I add a container and set its background colour, that works too.
> But this method leaves a few pixels wide gray frame between the container and
> the border of the window.
>
> I am missing something, and I am open to suggestions.
>
> Regards,
> Keve Nagy * Debrecen * Hungary
The good news is I believe I found what I was missing.
The background colour of the window DOES CHANGE to the expected colour when set
with win.setBackgroundColor(), but it will not be visible because the
StatusBar, Header, and the content area gets drown over it. So the background
color I set is there, some layers below the visible topmost layer of the
window. I recognised this by noticing a very small discolouring at the four
corners of the window. If I do a win.setBackgroundColor("red"), then 2-3 red
pixels show up in each rounded corner. Hardly visible, but they are there. If I
do a win.setBackgroundColor("green"), then those pixels in the corners turn to
green. :-)
I have also made progress with the workaround of adding a container and
changing the colour of that container. By setting the contentPadding value of
the window to zero, the unwanted gray gap between the window border and my
white container gets eliminated. This may soon lead to an acceptable solution,
I just need some more time fiddling with it.
Another (and better) way to approach would be to change the colour of the main
layout of the window. As setting background colour for a container in the
window had visible effect, this should also apply for the main container.
However, at this point that main layout is a nameless object, hence I found no
way of calling it's setBackgroundColor method.
var whiteWin = new qx.ui.window.Window("Window with white
content-area");
whiteWin.setBackgroundColor("red"); // this works just fine, but …
// ... has no visible effect (except for a few pixels in the
corners) as gets …
// … overlapped by higher-layer objects like statusbar, window
header and title, contents-area.
whiteWin.set( { width: 200, height: 150, showStatusbar: true,
contentPadding: 0 );
whiteWin.setLayout( new qx.ui.layout.VBox(2) ); // This is the
nameless Layout I plan to reference later.
var mycanvas = new qx.ui.container.Composite( new qx.ui.layout.Canvas()
);
mycanvas.set( { backgroundColor: "white", height: 40, width:
whiteWin.getWidth() } );
whiteWin.add( mycanvas );
whiteWin.open();
this.getRoot().add(whiteWin, {left:25, top:10});
The above gets me the window with mycanvas being nice white, spanning the
entire width of the window and NO gray gap between the window border and
mycanvas.
What I would rather do is set the background colour of the nameless VBox()
layout (and obviously replace that with a Canvas layout instead of the VBox),
but I need to find a way to reference that nameless Layout object. Something
like
whiteWin.getLayout().setBackgroundColor("red");
Unfortunately, that generates a
'undefined' is not a function (evaluating
'whiteWin.getLayout().setBackgroundColor("red")')
Any hint on how to pursue this approach and refer to the nameless Layout is
much appreciated!
Regards,
Keve Nagy * Debrecen * Hungary
------------------------------------------------------------------------------
Managing the Performance of Cloud-Based Applications
Take advantage of what the Cloud has to offer - Avoid Common Pitfalls.
Read the Whitepaper.
http://pubads.g.doubleclick.net/gampad/clk?id=121054471&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
