On 2014.02.19., at 21:13, Keve Nagy <k...@safe-mail.net> wrote:
>
> On 2014.02.18., at 20:20, Keve Nagy <k...@safe-mail.net> 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
It appears that the "better" approach was all wrong, as it was based on my
incorrect understanding of some qx internals.
The workaround however, proved to be working exactly as my original goal
expected, so it is no longer a workaround but it is THE solution.
At the risk of talking to myself here (yes, I do that in the bath, kitchen, and
apparently on the qx-dev-list too now), the answers are as follows:
The "undefined …" error mentioned above was triggered by the fact that qooxdoo
"layouts" (e.g. Canvas) have no setBackgroundColor method as that comes with
qx.ui.core.LayoutItem objects, but Canvas is (and all other Layouts) a
qx.ui.layout.xxx object.
Here is the solution of how to paint the background of the contents-area of a
window:
var whiteWin = new qx.ui.window.Window("Window with white
contents-area");
whiteWin.set( { width: 200, height: 150, showStatusbar: true,
contentPadding: 0 ); // contentPadding=0 eliminates the gap between window
border and container.
whiteWin.setLayout( new qx.ui.layout.Canvas() ); // A "Canvas" type
"main" layout will allow me stretching the inner container covering the whole
contents-area.
var mycanvas = new qx.ui.container.Composite( new qx.ui.layout.Canvas()
);
mycanvas.setBackgroundColor("white"); // set the background colour of
the container.
whiteWin.add( mycanvas, { left:0, top:0, right:0, bottom:0 } ); // add
the container to the window and stretch it to all four edges of the
contents-area.
whiteWin.open();
this.getRoot().add(whiteWin, {left:25, top:10});
Problem solved. Issue closed.
Now, all of you who were losing sleep over this can go to sleep relaxed. :-)
Best 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
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
