I can feel your pain. Our app has a LOT of very specific layouts on multiple pages, and I struggled mightily to find a technique that I could use to get consistently good results on all browsers. The problem ISN'T Pyjamas (or Python) it's simply life in the Browser (i.e. HTML+CSS) world. You get tangled up deciding things like tables vs. divs, inline styles vs. sheets, etc.etc.. Fortunately, I had a lot of help from C. Anthony Risinger (CSS hero) to shine a light on my dark path and help me figure out what to do.
My UI had to scale nicely to all sizes - I wanted it to grow/shrink in a very specific way, and I initially tried to do that by using all absolutely positioned DIVs (AbsolutePanels) with a bunch of layout computational code hooked into resize evvents. It worked - kind of - but my advice DON'T EVER EVER EVER take this lame approach except for the simplest of layouts :) Instead, my layout - or at least the resizeable bits - are all done with tables (Horizontal/VerticalPanels). I won't kid you and say getting the right behaviour was easy - there were a few CSS tricks and such to get consistent results on all browsers - but I was able to do everything I wanted with no event-driven computational BS. So all that useless lecturing aside, LK is right, you should try to get the look you want with static HTML/CSS because anything you can do there, you can build dynamically with Javascript+CSS, which means you can do it with Pyjamas+CSS. Except for animation, events, etc., if you can't do it with HTML+CSS you can't do it with anything. Rich On Thu, Mar 15, 2012 at 5:49 PM, lkcl luke <[email protected]> wrote: > 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.
