Cross-platform layout

[Andres.Pozo]

I am doing tests of my scripts in several platforms and I have found an issue with the sizing of label controls.

I am using the method Font.width(string) for measuring the width of the largest label in my dialog. Then I use this value to size all the labels in order to align them. However, in Win7 it seems to return a too small value and in Linux a too large value.

I have written an small test of this effect:

Code: [Select]

#include <pjsr/Sizer.jsh>
#include <pjsr/TextAlign.jsh>

function TestDialog()
{
   this.__base__ = Dialog;
   this.__base__();

   var labelWidth = this.font.width("Background magnitude:M");

   // ROW 1
   this.label1 = new Label(this);
   this.label1.text = "Background magnitude:";
   this.label1.textAlignment = TextAlign_Right | TextAlign_VertCenter;
   this.label1.setFixedWidth(labelWidth);

   this.edit1 = new Edit(this);
   this.edit1.text = "Test";
   this.edit1.setFixedWidth(100);

   this.row1_sizer = new HorizontalSizer;
   this.row1_sizer.spacing = 4;
   this.row1_sizer.add(this.label1);
   this.row1_sizer.add(this.edit1);
   this.row1_sizer.addStretch();

   // ROW 2
   this.label2 = new Label(this);
   this.label2.text = "Short label:";
   this.label2.textAlignment = TextAlign_Right | TextAlign_VertCenter;
   this.label2.setFixedWidth(labelWidth);

   this.edit2 = new Edit(this);
   this.edit2.text = "Test";
   this.edit2.setFixedWidth(50);

   this.row2_sizer = new HorizontalSizer;
   this.row2_sizer.spacing = 4;
   this.row2_sizer.add(this.label2);
   this.row2_sizer.add(this.edit2);
   this.row2_sizer.addStretch();

   // Stack of rows
   this.sizer = new VerticalSizer;
   this.sizer.margin = 8;
   this.sizer.spacing = 6;
   this.sizer.add(this.row1_sizer);
   this.sizer.add(this.row2_sizer);

   this.adjustToContents();
   this.setFixedSize();

}
TestDialog.prototype = new Dialog;

new TestDialog().execute();

I have run it in Win7x64, Fedora 18 and Ubuntu 12.04LTS. The result is in the attached image.

Is this an error, or should I use a different method for the layout of the dialogs?

[Juan Conejero]

Hi Andrés,

Due to the new CSS-based core styling system that I have implemented in RC4, some dialog windows may need a bit of additional work to access appearance properties such as fonts and colors. Fortunately I have anticipated these problems, so I have added a new method to PJSR to simplify this task:

void Control.restyle()

By calling this method a control can ensure that all CSS-defined properties have been fetched and applied properly. This method must be called before attempting to access any appearance related properties. Your example script works perfectly if you add a call to this method as follows:

Code: [Select]

function TestDialog()
{
   this.__base__ = Dialog;
   this.__base__();

   this.restyle(); // new in RC4

   var labelWidth = this.font.width("Background magnitude:M");

   ...

Not all dialogs need early restyling, but when these problems happen, calling this new method fixes them.

[Andres.Pozo]

Thanks Juan. It works.