Greying out the background behind a popup?

[darkflame]

I notice this has been asked before;
http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/695a1b9ac18b3733/f5b63ce95c8bd1f1?lnk=gst&q=grey#f5b63ce95c8bd1f1

But no solution.

Has anyone got any ideas how this could be achieved?

I had two ideas;

a) At first I thought just a big grey semitransparent PNG image set in
front of everything except the popup.
But this would exclude IE users.

b) Loop over all the widgets on the page and disable them. I'm not
exactly sure how "greyed out" this would make them look, however.
Perhaps combined with setting a style? (but then Id have the pain of
loading the correct style back into them after).
Also, I'm not sure that all widgets can universally be disabled. (I
assume they cant, looking at functions I can apply to a generic widget
object).


Anyone got any ideas on either of these, or another suggestion?
Fading the background would be quite a useful bit of code for a lot of
people I think.

[Fred Sauer]

You can drop in a full page glass panel from the incubator:
  http://code.google.com/p/google-web-toolkit-incubator/wiki/GlassPanel

with something like this:

  // Create a glass panel with `autoHide = true`
  
GlassPanel glassPanel = new GlassPanel
(true);

  // Attach (display) the glass panel
  RootPanel
.get().add(new GlassPanel
(true), 0, 0
);

fr...@allen-sauer.com

[darkflame]

That looks perfect, allthough I'm still a bit of a newbie, as I have
only been using my own/default class's so far.

How do I add incubator to an eclipse project?
Do I dump the "gwt-incubator.jar" file into the GWT directory and add
something to the models xml file? (the one with the inherits?).

On Jan 23, 3:44 pm, "Fred Sauer" <f...@allen-sauer.com> wrote:
> You can drop in a full page glass panel from the incubator:
>  http://code.google.com/p/google-web-toolkit-incubator/wiki/GlassPanel
>
> with something like this:
>
>   // Create a glass panel with `autoHide = true`
>   GlassPanel glassPanel = new GlassPanel(true);
>
>   // Attach (display) the glass panel
>   RootPanel.get().add(new GlassPanel(true), 0, 0);
>

> On Jan 23, 2008 8:27 AM, darkflame <darkfl...@gmail.com> wrote:
>
>
>
>
>
> > I notice this has been asked before;
>

> >http://groups.google.com/group/Google-Web-Toolkit/browse_thread/threa...

>
> > But no solution.
>
> > Has anyone got any ideas how this could be achieved?
>
> > I had two ideas;
>
> > a) At first I thought just a big grey semitransparent PNG image set in
> > front of everything except the popup.
> > But this would exclude IE users.
>
> > b) Loop over all the widgets on the page and disable them. I'm not
> > exactly sure how "greyed out" this would make them look, however.
> > Perhaps combined with setting a style? (but then Id have the pain of
> > loading the correct style back into them after).
> > Also, I'm not sure that all widgets can universally be disabled. (I
> > assume they cant, looking at functions I can apply to a generic widget
> > object).
>
> > Anyone got any ideas on either of these, or another suggestion?
> > Fading the background would be quite a useful bit of code for a lot of
> > people I think.
>

> --
> Fred Sauer
> f...@allen-sauer.com

[Fred Sauer]

Exactly.

I updated the wiki with a section called "Adding GlassPanel to Your Project":
  http://code.google.com/p/google-web-toolkit-incubator/wiki/GlassPanel

HTH
Fred

On Jan 23, 2008 10:33 AM, darkflame <dark...@gmail.com> wrote:

That looks perfect, allthough I'm still a bit of a newbie, as I have
only been using my own/default class's so far.

How do I add incubator to an eclipse project?
Do I dump the "gwt-incubator.jar " file into the GWT directory and add
something to the models xml file? (the one with the inherits?).

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

[darkflame]

Arr...that works a treat, cheers.

On Jan 23, 7:39 pm, "Fred Sauer" <f...@allen-sauer.com> wrote:
> Exactly.
>
> I updated the wiki with a section called "Adding GlassPanel to Your
> Project":
>  http://code.google.com/p/google-web-toolkit-incubator/wiki/GlassPanel
>
> HTH
> Fred
>

> f...@allen-sauer.com

[GreenGary]

For gwt-ext users reading this: Use Ext.get(gwtId).mask("foo"); and
Ext.get(gwtId).unmask()

[rusty]

There is also a LightboxPanel widget in the gwt widget library, which
works well:
http://sourceforge.net/projects/gwt-widget

something like:
new LightBoxPanel(yourPopup).show();

[Ian Bambury]

Hi DarkFlame,

 

One of the problems you get with some of these (and I haven't looked at all of them) is that the scrollbar is left incovered so that you can scroll away from the grey area, and sometimes resizing the browser will leave you with faded and unfaded areas.

 

There's a tutorial which walks through creating a popup after fading the existing background (including scrollbars) here http://www.examples.roughian.com/#Tutorials~Panel_Fade  if you are interested.

 

Ian

[Fred Sauer]

Ian's right that this is where a lot of implementations break down. One must also deal with HTML margins (i.e. the parent of the BODY element), differences between quirks and standards mode rendering, differences by browser/platform and whether or not content is absolutely positioned, and whether or not the content size exceeds or does not exceed the window area, and more.

I think you will find that the GlassPanel in the incubator does all of these, with the exception of negative margins (which is left as an exercise to the reader :). If it fails in any of the scenarios listed here, then that's a bug, and I'll do my best to fix it.

I should note that I have not tried these other implementations (recently), so they may also work quite well, or they may even work better. Actually, I'd like to hear from people who have tried different ones, to hear what they think.

Fred

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

[darkflame]

Yes, thank you everyone for your help.

After trying a few things GlassPanel seems to work perfectly for what
I need.
Cheers

On Jan 24, 4:10 pm, "Fred Sauer" <f...@allen-sauer.com> wrote:
> Ian's right that this is where a lot of implementations break down. One must
> also deal with HTML margins (i.e. the parent of the BODY element),
> differences between quirks and standards mode rendering, differences by
> browser/platform and whether or not content is absolutely positioned, and
> whether or not the content size exceeds or does not exceed the window area,
> and more.
>
> I think you will find that the GlassPanel in the incubator does all of
> these, with the exception of negative margins (which is left as an exercise
> to the reader :). If it fails in any of the scenarios listed here, then
> that's a bug, and I'll do my best to fix it.
>
> I should note that I have not tried these other implementations (recently),
> so they may also work quite well, or they may even work better. Actually,
> I'd like to hear from people who have tried different ones, to hear what
> they think.
>
> Fred
>

> On Jan 24, 2008 8:54 AM, Ian Bambury <ianbamb...@gmail.com> wrote:
>
>
>
> > Hi DarkFlame,
>
> > One of the problems you get with some of these (and I haven't looked at
> > all of them) is that the scrollbar is left incovered so that you can scroll
> > away from the grey area, and sometimes resizing the browser will leave you
> > with faded and unfaded areas.
>
> > There's a tutorial which walks through creating a popup after fading the
> > existing background (including scrollbars) herehttp://www.examples.roughian.com/#Tutorials~Panel_Fade

> > <http://www.examples.roughian.com/#Tutorials%7EPanel_Fade> if you are

> > interested.
>
> > Ian
>
> --
> Fred Sauer

> f...@allen-sauer.com

[NextOne]

Hi Fred,
I was going thru your example but I am kinda lost.

the source code of the demo has the code to generate the popup but how
and where is the RootPanel.get() method invoked?

is it inside the HTML

I am still a newbie, can u please help me out.

Thank you, I really appreciate your help.

On Jan 23, 10:44 am, "Fred Sauer" <f...@allen-sauer.com> wrote:
> You can drop in a full page glass panel from the incubator:
>  http://code.google.com/p/google-web-toolkit-incubator/wiki/GlassPanel
>
> with something like this:
>
>   // Create a glass panel with `autoHide = true`
>   GlassPanel glassPanel = new GlassPanel(true);
>
>   // Attach (display) the glass panel
>   RootPanel.get().add(new GlassPanel(true), 0, 0);
>

> On Jan 23, 2008 8:27 AM, darkflame <darkfl...@gmail.com> wrote:
>
>
>
>
>
>
>
> > I notice this has been asked before;
>

> >http://groups.google.com/group/Google-Web-Toolkit/browse_thread/threa...

>
> > But no solution.
>
> > Has anyone got any ideas how this could be achieved?
>
> > I had two ideas;
>
> > a) At first I thought just a big grey semitransparent PNG image set in
> > front of everything except the popup.
> > But this would exclude IE users.
>
> > b) Loop over all the widgets on the page and disable them. I'm not
> > exactly sure how "greyed out" this would make them look, however.
> > Perhaps combined with setting a style? (but then Id have the pain of
> > loading the correct style back into them after).
> > Also, I'm not sure that all widgets can universally be disabled. (I
> > assume they cant, looking at functions I can apply to a generic widget
> > object).
>
> > Anyone got any ideas on either of these, or another suggestion?
> > Fading the background would be quite a useful bit of code for a lot of
> > people I think.
>

> --
> Fred Sauer
> f...@allen-sauer.com- Hide quoted text -
>
> - Show quoted text -

[Fred Sauer]

Call it just before you create the popup if you like.

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

[Chinmay Bajikar]

I had read and implemented another idea for doing the greying out here
at the forums.
It said to create a popup of 100, 100 dimensions (which will take the
whole screen)
and have the background color to grey.
And on the top of it have another popup(modal) which will hold your
actual message/gif which
indicates Loading/Retrieving Data, etc.

I dont know if using GlassPanel is more efficient then this idea.

Thanks,
-Chinmay

[Fred Sauer]

Chinmay,

A popup which is sized to 100% x 100% will in most cases not actually fill the browser window.

Scenarios that GlassPanel deals with are:

1. Every GWT supported browser/platform
2. Quirks (BackCompat) and Strict mode (CSS1Compat)
3. Each combination of above states: BODY size; HTML size; document scrolling enabled
4. Varying sizes of margins/borders on both HTML and BODY element, possibly with the exception of negative margins which are not yet fully supported
5. Attached to the document BODY (RootPanel.get()), various HTML elements (RootPanel.get(String id)), instances of AbsolutePanel
6. With the browser window either smaller or larger than the document body

HTH,
Fred

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

[Chris]

Fred,

First off, THANKS for contributing the GlassPanel - its AWESOME, and
does exactly what I need it too; not to mention it took me a grand
total of about 15 minutes to download it, read the directions, and
have it working. Again, thanks.

I do notice that my Dropdown lists in IE still show through the glass
window, which I know is a known vulnerability of IE, but in reading
through all the GlassPanel doc I must have missed whether the
GlassPanel object is intended to address this or not. If it is, then
obviously I am missing something or doing something wrong.

Actually, I don't mind at all having to do the disable-all-of-the-
listboxes-on-the-screen thing (all one of them, for me) to make IE
happy, but if it is as simple as me missing a setting on GlassPanel or
something like that, then I'd rather do it right instead of jockey
around IE unnecessarily.

Your Thoughts?

- Chris

[Fred Sauer]

Thanks, Chris.

There's no specific attempt by the current GlassPanel to cover "heavy" UI widgets. You might use CSS to simply set 'visibility: hidden' (which keeps the size of the widgets, as opposed to 'display: none'). Better yet, try using an IFRAME shim under the GlassPanel DIV, possibly with 'width:100%; height:100%; position: absolute; left: 0px; top: 0px'. For an example of this, see:
  http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/client/ui/impl/PopupImplIE6.java

If you get it working, it would be nice if you could contribute your updates back to the incubator :-).

Fred

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

[Chris]

Fred,

Thanks for your response. For now, I'll probably just set my one
listbox to "disabled", since this is really the only offending object
I need to worry about. However, after I get my current release
deployed and have a little more time, I'll see if I can experiment a
but with the IFRAME shim approach to handle the heavy objects, and of
course, contribute the code back inot the incubator if I get something
working.

Best Regards,

Chris