3.4. LogTab

In GWT, client side log messages may be sent to the server or log them in the client itself. LogTab composite displays log messages on the client side.

Add LogTab.java and LogTab.ui.xml to in.fins.client.content package. Please note that content related classes are placed in in.fins.client.content whereas custom widgets are placed in in.fins.client.widget.

in.fins.client.content/LogTab.ui.xml

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:g="urn:import:com.google.gwt.user.client.ui">

    <g:ScrollPanel>
        <g:VerticalPanel ui:field="logArea">
            <g:Label text="Client Log" styleName="fins-ContentHeader-Label" />
        </g:VerticalPanel>
    </g:ScrollPanel>

</ui:UiBinder>

in.fins.client.content/LogTab.java

package in.fins.client.content;

import java.util.logging.Logger;

import com.google.gwt.core.client.GWT;
import com.google.gwt.logging.client.HasWidgetsLogHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;

public class LogTab extends Composite {

    private static final Logger log = Logger.getLogger("");

    interface LogTabBinder extends UiBinder<Widget, LogTab> {
    }

    private static UiBinder<Widget, LogTab> binder = GWT
            .create(LogTabBinder.class);

    @UiField
    VerticalPanel logArea;

    public LogTab() {
        initWidget(binder.createAndBindUi(this));
        log.addHandler(new HasWidgetsLogHandler(logArea));
    }

}

UiBinder returns a VerticalPanel which is used to create HasWidgetLogHandler which is a handler that can send log to any widget that extends the HasWidgets interface. Handler is attached to the root logger returned by Logger.getLogger(""). With this, VerticalPanel displays all log messages.

Add style fins-ContentHeader-Label, used for header label, to Fins.css

in.fins.public/Fins.css

.fins-ContentHeader-Label {
 color: cornflowerblue;
 padding: 10px 0px 10px 10px;
 font-size: 16px;
 font-family: sans-serif;
 font-weight: bold;
 vertical-align: middle;
 text-align: left;
}

Visual CSS Editor

So far, we have not used GWT Designer. It is a good tool to play around with panels and widgets while learning GWT but, once we get on with actual development its utility wane off as we like to tweak the widgets either through their methods or declaratively in ui template files. However, Designer’s Visual CSS Editor is quite useful to add stylesheet items visually.

Now add the LogTab to content area of FinsShell.

in.fins.client.content/FinsShell.java

....

public FinsShell() {
 initWidget(binder.createAndBindUi(this));

 if (!GWT.isProdMode()) {
   contentPanel.addTab("Log", new LogTab());
 }

....

GWT.isProdMode() method checks whether app is running in production or development mode and LogTab is added if it is development mode. We have to inherit logging module in gwt.xml to enable logging. Modify Fins.gwt.xml.

in.fins.client/fins.gwt.xml

....

<inherits name="com.google.gwt.logging.Logging" />

<!-- Enable log -->
<set-property name="gwt.logging.logLevel" value="INFO" />
<set-property name="gwt.logging.enabled" value="TRUE" />
<set-property name="gwt.logging.popupHandler" value="DISABLED" />

....

Inherits element adds com.google.gwt.logging.Logging module and set-property enables logging and set log level. By default PopupHandler, pops up a window to show logs and it has to be disabled as we are using HasWidgetLogHandler.

Add a log statement in onModuleLoad() method in Fins.java to test LogTab.

in.fins.client/Fins.java

....

import java.util.logging.Logger;

....

private static final Logger log = Logger.getLogger(Fins.class.getName());

@Override
public void onModuleLoad() {
  RootLayoutPanel rp = RootLayoutPanel.get();
  FinsShell finsShell = new FinsShell();
  rp.add(finsShell);

  log.info("Module loaded. BaseURL - " + GWT.getModuleBaseURL());
}

....

Now, in addition to Home tab, content area has a tab to show log messages. With basic content area in place, we move on to design menu bar in the next chapter.

Forward Pointers

Custom Widgets - To know more about custom widgets refer Creating Custom Widgets .

UiBinder - To know more about UiBinder refer Developer’s Guide - Declarative Layout with UiBinder .

Logging - To get know the GWT logging framework refer Developer’s Guide - Logging .