How to add a simple Whitespace into a Panel?

[Sebastian]

Hi,

I want to add some Labels into a FlowPanel, seperated by whitespace. I
want to do this because otherwise the labels do not flow, they are all
written in one line if not seperated by whitespace.

For example I use the following code:

FlowPanel flow = new FlowPanel();
Label label1 = new Label("label1");
label1.setStyleAttribute("display","inline");
flow.add(label1);
... same for label2

and the result is the following html (simplified):

<div><div style="display:inline">label1</div><div
style="display:inline">label2</div></div>

but what is needed to get the correct result with a _possible_
linebreak is

<div><div style="display:inline">label1</div> <div
style="display:inline">label2</div></div>

I tried something like

flow.add(new HTML(" "));

but then I get a <div> </div> with a implicit linebreak. I think a
workaround could be to subclass Widget with a span element instead of
div, but isn't there some way to just add a little whitespace or some
other plain string instead of a widget?

Best Regards
Sebastiab Baltes

[Sebastian]

Got it!

flow.getElement().appendChild(Document.get().createTextNode(" "));

and I had to use span instead of div for the label, so I copied the
Label class and changed DOM.createDiv to DOM.createSpan inside of the
constructor, subclassing was not option because the Element taking
constructor is package-default...

[Carl Scott]

You could have also used flow.add(new HTML("&nbsp;") to get the
desired effect. That, combined with adding a style to the HTML to set
it's width to the amount of space you want. Seems a bit less painful
than what you're doing now, but if it works, it works!

--
Carl Scott
Software Developer, Solertium Corporation

On Apr 9, 8:55 am, Sebastian <sebastian.l.bal...@googlemail.com>
wrote:

[Thomas Broyer]

On 9 avr, 17:26, Carl Scott <carl.sc...@solertium.com> wrote:
> You could have also used flow.add(new HTML("&nbsp;") to get the
> desired effect. That, combined with adding a style to the HTML to set
> it's width to the amount of space you want. Seems a bit less painful
> than what you're doing now, but if it works, it works!

What's painful is that GWT uses DIVs all over the place, so FlowPanel
isn't really useful out-of-the-box (except if you only put widgets
matching existing "inline" HTML elements in there, such as Button,
TextBox, etc.)

It would be far better if at least we had the option to have SPANs
instead of DIVs, without having to code our own widget library...

[walden]

Is there any difference between using a <span> versus using a <div>
and setting display to inline for each added child? I wish I
understood this better. I've noticed it's sometimes necessary to
float the children to get them to flow. That's with the <div>-based
FlowPanel. Would it be different for a <span>-based one?

If the answer to my first question above is 'no', then it seems to me
that FlowPanel could work kinda like AbsolutePanel does today, in the
sense that in the latter the positioning attribute is set dynamically
on the child when added. IOW, widget-wise "absolute" is a trait of
the panel, while element-wise it's a trait of the positionee. Same
with inline flow...

Thanks for your thoughts,
Walden

[Fred Sauer]

You might see if whitespace related issues 1520, 960 or 314 need your vote:

  http://code.google.com/p/google-web-toolkit/issues/detail?id=1520
  white-sapce:pre broken due to IE innerHTML whitespace clobbering

  http://code.google.com/p/google-web-toolkit/issues/detail?id=960
  DOM.setInnerText inconsistent white-space translation FF/IE

  http://code.google.com/p/google-web-toolkit/issues/detail?id=314
  Label getText() in a SimplePanel does not equal value from setText() when new lines are involved


Also, see these threads:
  http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/4a53a2d2489e0293/
  http://groups.google.com/group/Google-Web-Toolkit-Contributors/browse_thread/thread/7da4ca8f5be8bdf9

--
Fred Sauer
fr...@allen-sauer.com

[Sebastian]

@Carl: flow.add(new HTML("&nbsp;")) doesn't work, the result is a
linebreak after each label.
@Walden: I tried some combinations of div with display inline/inline-
block and float before I tried span,
and was suprised because the results were different. My layout isn't
trivial, that's the point,
because with a simplified html without all the mass of gwt generated
html those differences doesn't show.
@Fred: flow.getElement().appendChild(Document.get().createTextNode("
")) works in my case with GWT 1.5 MS 2 on IE 7, IE 6 and Firefox, so I
don't have the same problems as described in the links.

Just my 50 cents: Layout is currently the biggest problem with GWT. As
soon as you build a non-trivial client you get a lot of
unexpected behaviour and you are forced to implement and discover very
complex and deep solutions to very easy problems and
end implementing your own layout system (have a look at MyGWTs layout
managers, I've implemented something similar
but not as good as that).

But I know the GWT guys are very smart and lion-hearted enough to
accept this challenge,
like the wonderful Java 1.5 emulation with GWT 1.5 shows ;-)

[ant...@gmail.com]

>   FlowPanel flow = new FlowPanel();
>   Label label1 = new Label("label1");
>   label1.setStyleAttribute("display","inline");

Y not replace last line with:

label1.setStyleName("Small_space");

where in your css

.Small_space {
padding-right: 7px;
}

[walden]

On Apr 10, 7:45 am, Sebastian <sebastian.l.bal...@googlemail.com>
wrote:

> @Walden: I tried some combinations of div with display inline/inline-
> block and float before I tried span,
> and was suprised because the results were different. My layout isn't
> trivial, that's the point,
> because with a simplified html without all the mass of gwt generated
> html those differences doesn't show.

Sebastian,

More than once I've gone from a simplified HTML prototype to an
analog* GWT implementation based on what I have learned about how GWT
implements its widgets. Can you do that? If not, what's missing on
the GWT side?

* when I say 'analog' I mean identical or nearly identical resulting
DOM structure

Thanks,

Walden

[Sebastian]

Walden,

I don't understand what you mean. If I discover a layout problem with
GWT, I often look at the generated html (I love Firebug) and try to
understand what's going on. But building a html prototype first ...
sounds like too much unnessecary work for me, and can only be done for
simple layouts. And do you realy know all the differences and tricks
for all Browsers that gwt uses when you build your prototype?

Best Regards
Sebastian

[walden]

Sebastian,

Maybe I wasn't clear. It sounded like you are saying that you can
come up with simplified HTML that does what you want (on all browsers
you care about?). Starting from there, can you referse-engineer the
HTML into GWT widgets? For instance, a <div> can be reverse-
engineered to a GWT SimplePanel. And so on. Where would that process
break down?

Maybe I'm assuming too much. If so, never mind.

walden

On Apr 10, 11:15 am, Sebastian <sebastian.l.bal...@googlemail.com>
wrote:

[Sebastian]

Thank you Walden for clarifying. I did what you suggested, but the
process broke down at two steps:

1. There is no span element widget
2. The simplified html behaved different.

Because I found a solution with the span element I didn't dig deeper
at the second point. But to explain better:

I have a Popuppanel containing a VerticalPanel containing a
VerticalSliderPanel containing a FlowPanel with "width: 150px"
containing some Labels. First I tried to make them flow by using some
styles, but that didn't work, so I used the html part including
VerticalSliderPanel - what you call prototype, simplified it and saw
that it worked in FF if there are whitespaces after each div. With
additional styles it also worked in IE. So I reverse-engeneered it to
Widgets, but it didn't worked in all browsers like the simplified
version. So I got the idea that it depends on the other containers
that I left away for the prototype. So I tried to use the whole HTML,
but that didn't worked, too much dependencies. I got the idea to try
<span> and that worked, so I stopped it there.

[Andrej]

hi,

you can create Span easily:

public class Span extends Label {
public Span() {
this("");
}

public Span(String text) {
setElement(DOM.createSpan());
sinkEvents(Event.ONCLICK | Event.MOUSEEVENTS |
Event.ONMOUSEWHEEL);
setStyleName("Span");
setText(text);
}
}


On Apr 11, 10:36 am, Sebastian <sebastian.l.bal...@googlemail.com>
wrote:

[walden]

Sebastian,

What if the GWT library contained another panel like this trivial
extension of FlowPanel:

~~~~~

/*
* Copyright 2006 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you
may not
* use this file except in compliance with the License. You may obtain
a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the
* License for the specific language governing permissions and
limitations under
* the License.
*/
package com.google.gwt.user.client.ui;

import com.google.gwt.user.client.DOM;

/**
* A panel that formats its child widgets using the default HTML
layout
* behavior of a <span> element.
*
*/
public class InlineFlowPanel extends FlowPanel {

/**
* Creates an empty flow panel.
*/
public InlineFlowPanel() {
setElement(DOM.createSpan());
}

/**
* Adds a new child widget to the panel.
*
* @param w the widget to be added
*/
public void add(Widget w) {
DOM.setStyleAttribute(w.getElement(), "display", "inline");
super.add(w, getElement());
}

/**
* Inserts a widget before the specified index.
*
* @param w the widget to be inserted
* @param beforeIndex the index before which it will be inserted
* @throws IndexOutOfBoundsException if <code>beforeIndex</code> is
out of
* range
*/
public void insert(Widget w, int beforeIndex) {
DOM.setStyleAttribute(w.getElement(), "display", "inline");
super.insert(w, getElement(), beforeIndex, true);
}
}

~~~~~

Walden


On Apr 11, 4:36 am, Sebastian <sebastian.l.bal...@googlemail.com>
wrote:

[Thomas Broyer]

On 9 avr, 17:26, Carl Scott <carl.sc...@solertium.com> wrote:

> You could have also used flow.add(new HTML("&nbsp;") to get the
> desired effect. That, combined with adding a style to the HTML to set
> it's width to the amount of space you want. Seems a bit less painful
> than what you're doing now, but if it works, it works!

FYI, this is what Google does (sort of) in the Google Documentation
Reader:
http://code.google.com/docreader/
(use firebug, Safari's Web Inspector, IE Developer Toolbar, etc. or
equivalent to look at the "GaiaBar" in the top right corner; and yes
it's a full-GWT app; based on r2265 -somewhere between 1.5-M1 and 1.5-
M2-, and they seem to use the StyleInjector from the incubator)

GaiaBar is probably a FlowPanel, and they've set a ".GaiaBar div
{ display: inline }" in their stylesheet.

[Sebastian]

@Andrej: Subclassing is not an option, in GWT 1.5 MS 2 setElement is
only allowed once, and it's called in the Label super constructor. If
google would change the element taking constructor from package
default to protected, it would be trivial.

@Walden: Not the FlowPanel needs to be <span>, the label elements I
add into it needs to be <span>..</span> + whitespace. Just setting
style options didn't work, can't say why.

@Thomas: Maybe my layout is a little monster, I tried this &nbsp;
trick but it didn't worked for me. Maybe it has to do something with
the PopupPanel or with the VerticalSlidePanel. The span + whitespace
trick works in an easy and in an more complex layout, as far as I see.

[Andrej]

hmmm, another breaking change in 1.5M2...

On Apr 11, 4:58 pm, Sebastian <sebastian.l.bal...@googlemail.com>
wrote: