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

• An Altetnative to GWT Java-only AJAX framework. Server side. Very straightforward coding. www.desisoft.com/jaxcent/gwt.html

• Professional GWT Training In depth hands on lab sessions Demystifying GWT www.maartenvolders.co

 --- 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 ;)

How To Integrate GWT (GWT-EXT) and JasperReports

First part, why reports?


You are enthusiastic researcher of new technologies, freelancer and now you are developing an corporate solution, based on Google Web Toolkit (GWT). And once, your lovely customer call to you at one at night, and asking you about new features he wants – reports and asking you to meet tomorrow morning and discuss about it! Op… Ok, he is also promising to you free coffee and inviting you to the private party … so you agreed

You are angry, what the f… it is… reports? Why? There is so nice gwt-ext panel, buttons, windows …. But, you always following the style of customer friendly behavior, so, you are deciding to make client happy

So, let’s start with a task definition.

Task Definition

We have a goal to create a prototype of report generation, viewing and exporting to the different file formats. Task is not so hard, but as well requires knowledge and some tricks to do it well.

Requirements to accomplish task

To make an complete solution, you need to get and install next tools:

1. Eclipse IDE - http://www.eclipse.org/downloads/
2. Google Web Toolkit - http://code.google.com/webtoolkit/gettingstarted.html
3. JasperReports - http://www.jaspersoft.com/
4. iReport - http://ireport.sourceforge.net/
5. Tomcat 5.x/6 - http://tomcat.apache.org/
6. Ant - http://ant.apache.org/
7. Gwt (Gwt-Ext) application:)

Some facts about JasperReports


JasperReports is one of the most popular Open Source libraries for a report generation. It has a good possibilities for integration with java applications.



Reports definitions is a plain XML files, so it allows in the future to create new reports, using a velocity template engine(http://velocity.apache.org/), Jelly (http://commons.apache.org/jelly/) or other template tools. Report definition files has an extension: *.jrxml.

After you are created a definition, it compiles and you are getting a *.jasper files.

JasperCompileManager.compileReportToFile("WebappReport.jrxml");

Some cases it is convenient, since it allows to hide definitions from customer, by giving him an compiled report, but not the sources.

After compilation is done, you should execute report using JasperFillManager.fillReport() to get JasperPrint object (you can then store it to the file).

Actually, you already got an report and can use it! You can use a wide collection of exporters to export it to any format you like: JexcelApiExporter, JexcelApiExporterNature, JexcelApiExporterParameter, JRCsvExporter, JRGraphics2Dexporter, JRHtmlExporter, JRPdfExporter, JRPrintServiceExporter, JRRtfExporter, JRTextExporter, JRXlsExporter, JRXmlExporter.

Application prototype

For a prototype of an application I took GWT-Ext Showcase2 and changed it, to accomplish the customer needs.

When you are clicking “Logined users”, information is opened in new tab, showing a details. Everything is clear, isn’t? So, continue step by step.

Step One

So, let’s start with Jasper and create report.

• We have jasperreports-3.1.2-project.zip, extract it to C:\demo\jasper. And at folder “demo\samples\webapp” we should to find report WebappReport.jrxml (great example for report running under the web)


• Than, using iReport changing report, making it looks nice: put logo of company, change a title and configuring JDBC DataSource and Report Query.

• Necessary changes in servlets
  “demo\samples\webapp\WEB-INF\classes\servlets” – making possible to start a report using parameter ‘reportfile’:
  String rp = req.getParameter(“reportfile”);
  String reportFileName = context.getRealPath("/reports/”+rp+”.jasper");
  “demo\samples\webapp” for testing – in HTML all links changing to “?reportfile=WebappReport”;
  

• At root folder “ demo\samples\webapp” we need to run ANT.

After we need a little bit to configure Tomcat, coping content “demo\samples\webapp” to the Tomcat ”webapps\jasper” and run it.

Than easy step: open a browser and go to url: (be careful, your port number can be different)
http://localhost:8887/jasper/


It should be like above. Great job, it works!

Second step

So, we have a working report, and now we want to run it using gwt application. The sample application should be like this:

Let’s integrate GWT and Jasper together!

Creating an simplest ReportManager class with static methods:
public class ReportManager {
public static String getExportReportURL(String report, String exptype){
return "http://localhost:8887/jasper/servlets/"+exptype+"?reportfile=" + report;
};

}

Than, we should to create an Panel:

Panel centerPanel = new Panel();
centerPanel.setLayout(new BorderLayout());
centerPanel.setTitle("Sessions");
…

String rep_url = ReportManager.getExportReportURL("WebappReport","html");
final Frame frame = new Frame(rep_url);
centerPanel.add(frame, new BorderLayoutData(RegionPosition.CENTER));

Toolbar toolbar = new Toolbar();
toolbar.addFill();
ToolbarButton toolbarButton = new ToolbarButton("PDF", new ButtonListenerAdapter() {
public void onClick(Button button, EventObject e) {
frame.setUrl(ReportManager.getExportReportURL("WebappReport","pdf"));
}
});
…

Run a project in Host Mode, clicking to the button “Logined users” and .... Oppa!

If you want to see it in pdf, just click to the button export to “PDF”


So, everything you need now… sleep, meet with a client and with cup of tea share with him great perspectives of his business :)

How to make GWT stack panel (Outlook Style)

Today i decided to publish Outlook Style GWT stack panel.
Why i decided to design Outlook Style GWT stack panel?
First of all, i wanted to do a simple stack panel, that works like Outlook.
I mean, not looks like, but works.
I was surprised, that GWT StackPanel doesn't support simple StackPanel algorithm,
that not moving tabs and content. It is really annoying, to see, how is moving your content, and trying to catch it. Can you imagine, how it looks, if you have 10 tabs? So, to find a content of last tab, you need to scroll to the end of page.

OutlookStackPanel has new element: header.
Evry time, you clicked a button, header display current title and content display the necessary content. Buttons stays at place and not moving.

There is some screen shots:
(since my english not so good, it is easier to see, to understand, what i'm talking about)



One more picture, to see how it works.




It is implemented using a GWT DockPanel.

There is my sponsor:
An Altetnative to GWT

Java-only AJAX framework. Server side. Very straightforward coding.

www.desisoft.com/jaxcent/gwt.html

Professional GWT Training

In depth hands on lab sessions Demystifying GWT

www.maartenvolders.co

 

There is code samples:

/**
* Creates an empty stack panel.
*/
public OutlookStackPanel() {
content.setAnimationEnabled(true);
content.setWidth(DEFAULT_WIDTH);

container.setStyleName(DEFAULT_STYLE);
header.setSize(DEFAULT_WIDTH, DEFAULT_HEADER_HIGHT);
footer.setSize(DEFAULT_WIDTH, "");

ScrollPanel scroller = new ScrollPanel();
scroller.setAlwaysShowScrollBars(false);
scroller.add(content);

container.setVerticalAlignment(HasVerticalAlignment.ALIGN_TOP);
container.add(header);
container.add(scroller);

container.setVerticalAlignment(HasVerticalAlignment.ALIGN_BOTTOM);
container.add(footer);

content.setAnimationEnabled(true);

header.setStyleName(DEFAULT_HEADER_STYLE);

initWidget(container);

sinkEvents(Event.ONCLICK);
sinkEvents(Event.ONMOUSEOVER);
sinkEvents(Event.ONMOUSEOUT);

}


Code example, to show necessary content.


@Override
public void onBrowserEvent(Event event) {

Element target = event.getTarget();
if (DOM.eventGetType(event) == Event.ONCLICK) {
for (Widget widget : buttons) {
if (widget.getElement() == target) {
buttons.get(header.getVisibleWidget()).removeStyleDependentName("selected");
widget.addStyleDependentName("selected");

int index = buttons.indexOf(widget);
if (index >= 0) {
header.showWidget(index);
content.showWidget(index);
}
}
}
} else if (DOM.eventGetType(event) == Event.ONMOUSEOVER) {
...
...
} else if (DOM.eventGetType(event) == Event.ONMOUSEOUT) {
...
...
}


You can get sources -= outlook stack panel source code =- !
In the future, i'm planning to put GWT application starter here (gwtfuse).

If somebody did it other way, or improved it, please share with me your ideas :)
Have a nice day!

How to make nice buttons with GWT

GWT is a perfect tool for web application designing. I like it! Just one thing piss me off... GET doesn't have a lot of nice components, like, for example GWT-EXT or ExtGWT.
This issue is easy to resolve, but who wants to include a lot of other third party javascript code in project? And if you need only few nice components? Do you want to be dependent of all others JS libraries? Sure, not.
Recently, working at some GWT project, we need to add nice looking buttons. We did it, and i liked how easy it is. I would like to share my experience with this approach.
First of all, we decided to use Hyperlinks instead Buttons. It implements ClickListener, so ... we have everything we need.
Thise is a picture, how HyperlinkButton looks:



If you are master with CSS, using the approach, described in sources, you can do any fancy button, you want!

I didn't found a way, how to put a working example directly to the blog, so, i put there a link for a compiled version (if you are lazy to setup eclipse to do it) and you can as well get a HyperlinkButton sources

If you have other ideas, how to do it better, please, give me to know!

How to develop GWT without server

In the last project, i worked, we did GWT client connected with server using RESTfull API.
So, we have completly separate server and client. It has some benefits, if for example you have an server API, which is reusable with other clients, not like GWT.

So, the main problem is how to connect GWT with Server from configuration point of view.
create some bash file, like noserver.sh

#!/bin/sh
APPDIR=`dirname $0`;
GWT_HOME='/usr/local/tools/gwt-linux-1.5.2/'
java -Xmx256M -cp "$APPDIR/src/lib/gwt-log-2.5.2.jar:$APPDIR/src:$APPDIR/bin:/usr/local/tools/gwt-linux-1.5.2/gwt-user.jar:$GWT_HOME/gwt-dev-linux.jar" com.google.gwt.dev.GWTShell -out "$APPDIR/www" -noserver -port 8080 "$@" com.example.Main/Main.html;


then you need to setup some server: jboss, tomcat, jetty to serve statically a folder
inside your gwt projects, something like www.

after you did it, run your server.

Then run the nserver.sh to run GWT.