Heya,
I am trying to a make a web app, or more accurately, I am trying to replace
a desktop app's GTK+ frontend with a pyjamas one.
And, with a handle now had on how to make widgets appear, how to hook them
up to listening events, etc, I've hit a major roadblock.
Layout and spacing. I probably do not understand the best way to do layout
in pyjamas, and am hoping for some help on this.
See, for example, I know that in GTK, panels are added to each other
hierarchally, and to describe each panel, you provide information about it
through python or an XML file to GTK.
And from web development, I know that in CSS (that wonderful markup
language which at times seems to be composed entirely of corner cases) to
describe each element, you provide information about it through linked,
header, or inline CSS.
In pyjamas, I'm not sure where, or to what, I'm to provide layout
information. One of Pyjamas great attributes, which also makes layout so
scary and confusing for me, is its almost fluid interaction between the
widget objects and their DOM outcome. So I realize I have a lot of
flexibility and there is no "always right" way to do layout, but I feel
like the way I've been doing it has been a spaghetti likeinefficient way.
And there is probably a way that is generally better that you guys know.
So, okay. Okay, example.
Like, I'm making an app that has some vertical panes, and in the leftmost
pane is a bunch of options. So it's a HorizontalPanel (.mainpanel) with X
widgets. The leftmost widget is a SimplePanel (naively placed to provide a
margin of sorts, as a kind of analogy to a GTK align panel), and contained
within that SimplePanel is a VerticalPanel which itself has a bunch of
widgets. So far so good. And establishing this hierarchy of enclosures is
the way I'd normally do layout in GTK. Familiar, nice.
Now, let's say, that the first two widgets in the VPanel are Labels. And I
want all of the widgets in the VPanel to be 15pixels away from the edges.
How might I go about doing this.
GTK way of doing it: doesn't work here. In GTK, I'd place the VerticalPanel
within an AlignPanel, and then indicate, through the Align, the
VerticalPanel's size and positioninng relative to Horizontal Panel. Pyjamas
allows me to set the height and width of Panels, and something called
LayoutData which I'm not sure what it does. But I don't think there's a way
to set margins. GWT I figured out has a thing called LayoutPanel, but I
don't think there's an analogue of that in Pyjamas. So I don't think I can
set margins through python.
CSS way of doing it: difficult to do here. Like, okay, so I want to set
these margins for this specific pane. So what I initially figured was
"okay, I'll do simplepanel_options.
AddStyleName('simplepanel_options'),
vpanel_options.addStyleName('vpanel_options') and then in css do: '
.simplepanel { width: 300px; height: 500px; } .vpanel_options { margin:
15px; } '," Except upon running that, I realized that SimplePanel was
displaced out of position by this, because SimplePanel is in a table cell
(at least I think that's why) and it looks like CSS has a hard time
telling, or working with, size and the boundaries of a containing table
cell.
And so really the only way to do what I want to do was to adjust the
surrounding table cell, but unlike pyjsbuild, CSS is clueless that that
table cell is "part of" that widget, and CSS doesn't allow you to select an
element through its child. So the way I've been working at it is to refer
to that specific table cell using the containing table as the origin point,
and adjust height and width from there.
Here's what my solution looks like:
.mainpanel > tbody > tr > td:first-child
{
background-color: #EEEEEE;
width: 400px;
height: 500px;
}
.simplepanel_options
{
margin: 15px;
}
.mainpanel > tbody > tr > td:2th-child
{
etc. etc.
And like, again and again throughout implementing the layout, even after
setting default 'td' width to 0px height and height, I run into these two
problems, that some portion of layout is greatly restricted based on the td
values (that is, CSS is uninterested in letting a td's child elements run
their own layout show, unlike in a div). And as well, to adjust those td
values so as to address this, css requires (using the method I've been
using) complicated selectors that seem to greatly hurt organization and
maintainability (so for example, if the editing person removes or add a
widget to a vpanel, the person needs to remember to adjust the selectors of
every widget after that; to find style attributes the editor needs to also
check whether each parent div might have a corresponding td cell selector
set up somewhere)
I'm not cheerleading for Divs in a Div vs. Table fight here. I have no beef
with Tables, some of my best friends are tables. I just feel like I must be
doing something wrong and must not know the best, most straightforward way
to lay stuff out in pyjamas. Like, there's gotta be a better, more modular,
and clean way to do layout than the way I've been doing it. I don't know
about it, and so I'm writing in to ask is there a Pyjamas way of doing it?
I've also considered using DockPanel, but that means constructing four
panels and determining their height and width through calculations, and
that becomes an especially strange choice of tool in some settings, such as
in cases when you have many small table cells/widgets/buttons and you just
want a little spacing in each, or when you really only need a margin in one
direction (eg. a left indent) Even so, might be that DockPanel might be the
typical tool of choice.
So... uh, how do you normally go about doing margins and layout spacing in
pyjamas in cases like this? Or: is GWT layoutpanel really what I should be
going for? (but I like python and pyjamas... and if that's the only way on,
should I see if I can write a layoutpanel? (a caveat: I don't know if I'll
be able to figure that part out))
Thanks,
Nick
