Layout: Windows, Java and “Others”
99% of visual application developers use some tool to draw/drag/resize or even dock/anchor their child widgets visually.
One of the first tools I used myself is Resource Workshop from Borland:
Yes, the Win16 version:)
Anyway, it’s a visual WYSIWYG editor. Just like the current Microsoft tools from .NET (now they are integrated in the development environment). One difference is that instead of editing a simple .res/.rc file, now they edit a partial C# class)
Why partial? because initially it was editing your class. And since the code generated was awful, you had to scroll down (or collapse) entire pages of code before getting at your stuff.
Here’s how some of the ‘partial’ code looks:
this.label1 = new System.Windows.Forms.Label(); this.textBox1 = new System.Windows.Forms.TextBox(); this.button1 = new System.Windows.Forms.Button(); this.SuspendLayout(); // // label1 // this.label1.AutoSize = true; this.label1.Location = new System.Drawing.Point(46, 14); this.label1.Name = "label1"; this.label1.Size = new System.Drawing.Size(46, 13); this.label1.TabIndex = 0; this.label1.Text = "User ID:"; // // textBox1 // this.textBox1.Location = new System.Drawing.Point(98, 12); this.textBox1.Name = "textBox1"; this.textBox1.Size = new System.Drawing.Size(51, 20); this.textBox1.TabIndex = 1; // // button1 // this.button1.Location = new System.Drawing.Point(66, 65); this.button1.Name = "button1"; this.button1.Size = new System.Drawing.Size(75, 23); this.button1.TabIndex = 2; this.button1.Text = "&OK"; this.button1.UseVisualStyleBackColor = true; // // Form1 // this.AcceptButton = this.button1; this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F); this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font; this.ClientSize = new System.Drawing.Size(206, 104); this.Controls.Add(this.button1); this.Controls.Add(this.textBox1); this.Controls.Add(this.label1); this.Name = "Form1"; this.Text = "Login Please"; this.ResumeLayout(false); this.PerformLayout();
Notice the number of integer literals used to represent screen coordintates: it can get better, if you use anchors, but still the default layout is ‘absolute’. And this is not resize-friendly (actually these kinds of dialogs always have resize disabled;))To make up for the DPI change in today’s monitors/resolutions, .NET provides a property named “AutoScale” for dialogs, with values “Font” or “DPI”. That is, keep your design absolute at this font/dpi and I will compute for you another size at the client’s font/dpi settings…
Java got further and reckon’d the need of relative layouts: the choices are many, BoxLayout, GridLayout, SpringLayout, FlowLayout and last but not least, GridBagLayout. None of them was usable for any serious stuff (oh, I forgot the ‘null’ layout) but GridBagLayout.
This layout is so complex that maybe one may think that nested GridBagLayouts approach the Turing-completeness of PostScript/PDF (they don’t). Here’s an example of parameters one must specify to add a component to a container that has the GridBagLayout:
public GridBagConstraints(int gridx, int gridy, int gridwidth, int gridheight, double weightx, double weighty, int anchor, int fill, Insets insets, int ipadx, int ipady)
Oh well. You have to call that constructor for each child add..Actually it does not resemble PS/PDF in any way, on second thought: it is HTML table layout or CSS layout (whichever, they are equally stupid).Ok, what did Others?
Well, others are (at least):
- wxWidgets (sortof)
- Mozilla XUL
They proved that any layout can be expressed with only three simple constructs: VBox, HBox and Grid!
VBox is for laying childs vertically, HBox is for laying them horizontally, and, if you ever need something like “two HBox’s in a VBox” and you need each child of a HBox to be aligned with the same child in the other HBox, then you actually need a two-row Grid;)
Don’t believe it? just look at the source of the XUL Mozilla Amazon Browser (does it contain any integer literals?)