On Thu, Mar 15, 2012 at 9:05 PM, Nick Porter
<[email protected]> wrote:
> 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.
cool.
> 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.
well you've managed the hard part :)
> Layout and spacing. I probably do not understand the best way to do layout
> in pyjamas, and am hoping for some help on this.
fuuun.
> 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.
yyup. you can't escape from CSS.
> 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.
the SimplePanel is excessive. its purpose is to help turn widgets
that don't have certain kinds of DOM characteristics (can't accept
focus for example) to compensate for that lack. you don't need it.
> 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.
set a StyleName="panelname", then put in a css file:
.panelname {
margin: 15px;
}
that should do the trick. the alternative is to use the "Spacing"
parameter or "Padding" parameter. actually that makes the widgets
15px away from each other as well as the edge, which might be what you
want.
> 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.
sounds... complicated :)
> 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.
yep. HorizontalPanel and VerticalPanel are actually implemented as
tables. therefore, anything that you can do to or with a table, you
can also do here.
> GWT I figured out has a thing called LayoutPanel, but I
> don't think there's an analogue of that in Pyjamas.
that sounds like a GWT2ism. we haven't ported it to pyjamas: it's a
bit... heavy-duty.
> So I don't think I can set margins through python.
yes of course you can.
> 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.
yeah get rid of the simplepanel, it'll only make life difficult.
if you're really stuck, the best thing to do is to write some HTML,
work it out with that, then post it somewhere online and let's go
through it, ok?
> 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.
you _can_ set a StyleName on each widget, you know :)
> 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,
actually i use it all the time. the only thing you have to remember
with DockPanel is that you must use *both* setWidth (on the widget)
*and* setCellWidth (passing in the widget and the exact same width
value). or... yeah, if you want things to sit in the middle a bit,
set the horizontal and vertical alignment to CENTER on each cell and
then set the width of the widget to a bit less.
> 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.
i like DockPanel. i find it's great for doing web sites, because
header, footer, side bar and main page fit naturally with the
DockPanel concept.
mostly i think though, you should write some HTML and post it online
somewhere (not to the list, please).
make life easier for everyone, let's discuss concrete and full context, ok?
l.
