November 14, 2008

Simple LightBox GWT Dialog with background

Sorry, guys, I'm not a fun of JavaSript world, and even there is a lot of good stuff in libraries, such as Sriptools, jquery, Dojo ...  i'm trying to avoid them, if it is possible.
Since GWT was released, they make a possible for me to be in Javascript world, using my favorite language Java.
And now, when i need to get something simple, for example the light box effect, i found at internet several wrappers of JavaScript libraries, who does it for me. And ... to use them, i need to add to my project several kilobytes of JavaSript code ... :(
Since i'm trying to avoid this, i did simple example how to do the background effect with GWT without a dependencies from other libraries... Plain GWT ;)


 


There is a sources snapshot, as well, you can get sources from: gwtFuse
 --- Sponsor Links


/**
* LightBox dialog provide an example of using 'Background Screen' behind dialogs
*
* @author Viktor Zaprudnev
*
* More information here:
* http://gwtfuse.blogspot.com/
* Source code can be found here:
* http://code.google.com/p/gwtfuse
*
*/

public class LightBoxDialog extends DialogBox {

protected String backgroundScreenHtmlTemplate =
"< div style= ' "
        +" background-color: navy; "
        +"/*needs to be BELOW popup*//*z-index: 3;*/ "
        +" filter: alpha(opacity=20); opacity:0.2;"
        +" height: DIV_HEIGHTpx; width: DIV_WIDTHpx; "
        +" position: absolute; "
        +" top: 0px; left: 0px; "
        +"'>

";


protected HTML backgroundScreen ;

@Override
  protected void onLoad() {
  super.onLoad();
  attachBackgroundScreenToRootPanel();
}

private void attachBackgroundScreenToRootPanel() {
  if (backgroundScreen == null) {
    String html = backgroundScreenHtmlTemplate.replaceAll("DIV_WIDTH", ""+RootPanel.get().getOffsetWidth());
    html = html.replaceAll("DIV_HEIGHT", ""+RootPanel.get().getOffsetHeight());
    backgroundScreen = new HTML(html);

  }

if ( RootPanel.get().getWidgetIndex(backgroundScreen) > 0) {
    // background already attached
  } else {
  backgroundScreen.setVisible( false );
  RootPanel.get().add( backgroundScreen );
  }
}

/**********************************

* Constructors

**********************************/

public LightBoxDialog() {
  super();
}


public LightBoxDialog(boolean autoHide) {
  super(autoHide);
}


/**
* accept custom HTML template for the background:
* @param backgroundScreenHTMLTemplate
*/

public LightBoxDialog(String backgroundScreenHTMLTemplate) {
  this();
  this.backgroundScreenHtmlTemplate = backgroundScreenHTMLTemplate;
}


/**
* accept custom HTML template for the background:
* @param backgroundScreenHTMLTemplate
*/

public LightBoxDialog(String backgroundScreenHTMLTemplate, boolean autoHide) {
  this(autoHide);
  this.backgroundScreenHtmlTemplate = backgroundScreenHTMLTemplate;
}


/***********************************************************
* Overriden methods, for supporting an background fading
***********************************************************/

@Override
public void show() {
  super.show();
  backgroundScreen.setVisible( true );
}

@Override
  public void hide() {
  super.hide();
  backgroundScreen.setVisible( false );
}

@Override
public void hide(boolean autoClosed) {
  super.hide(autoClosed);
  backgroundScreen.setVisible( false );
}
}



Enjoy! This approach can be used not only for a Dialogs, but everywhere you want ;)

4 comments:

Erick Audet said...

Hi,

Thanks for this sweet piece of code. I'm trying it with my login dialogue and the first time I call it, it works but when I logout and log back in, the entire screen because disabled (even my Login dialog box). My Login dialog box extends your class. Any ideas on how to solve this?

Erick

Erick Audet said...

Here is the solution. Context is a client side singleton.

private void attachBackgroundScreenToRootPanel() {
backgroundScreen = Context.getInstance().getBackgroundScreen();

if (backgroundScreen == null) {
String html = backgroundScreenHtmlTemplate.replaceAll("DIV_WIDTH",
"" + RootPanel.get().getOffsetWidth());
html = html.replaceAll("DIV_HEIGHT", ""
+ RootPanel.get().getOffsetHeight());
backgroundScreen = new HTML(html);

Context.getInstance().setBackgroundScreen(backgroundScreen);
backgroundScreen.setVisible(false);
RootPanel.get().add(backgroundScreen);
} else {
String html = backgroundScreenHtmlTemplate.replaceAll("DIV_WIDTH",
"" + RootPanel.get().getOffsetWidth());
html = html.replaceAll("DIV_HEIGHT", ""
+ RootPanel.get().getOffsetHeight());
backgroundScreen.setHTML(html);
}
}

kash said...

try the gwt-incubator. Its got a GlassPanel that does the same thing. Very simple to use and its probably going to get rolled into the GWT standard widget set at some point.

Viktor Zaprudnev said...

Thanks for suggestions, i'll check incubator. But still it is nice to know how it works from inside ;)