How to create your second panel

Before you begin...

Before you create your second panel, we assume you have already read the How to create your first panel page. If not we recommend you take a stroll there first to better familiarize yourself.

We also assume that, at this point, you already have followed the build instructions from Home page and you already have UberFire showcase up and running.

1. Skipping the preliminaries

Since this will be your second panel we assume you are comfortable working with Java in your favourite IDE.

2. Creating the Panel

The first panel was quite simple. The second panel will be no more complex but will illustrate an alternative way to define new panels or re-use your existing widgets.

If you have an existing widget that extends IsWidget you do not require a @WorkbenchView annotation.

Furthermore, why settle for a String title.

package org.uberfire.client.screens.mypanel;

import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.Image;

@WorkbenchScreen(identifier = "MySecondPanel")
public class MySecondPanel extends SimplePanel {

    public MySecondPanel() {
        setWidget( new Label("My Second Panel") );
    }

    @WorkbenchPartTitle
    public IsWidget myTitle() {
        return new Image("http://url.to.your.image");
    }

}

3. Uberfire life-cycles

Our new Panel is great! We re-use an existing widget we wrote for another project and by simply adding @WorkbenchPartTitle we can use it in Uberfire. As we saw with How to create your first panel we can hook into regular CDI life-cycles.

Uberfire also provides its own life-cycles and we can hook into these too:-

• @OnStart
• @OnReveal
• @OnFocus
• @OnLostFocus
• @OnMayClose
• @OnClose

Let's add a prompt for the user when they try to close our new panel:-

@OnMayClose
public boolean letTheUserDecideWhetherToCloseThisPanel() {
    return Window.confirm("Are you sure you want to close me?");
}

If the user clicks Cancel on the confirmation dialog the panel will not be closed.

Other life-cycles can be intercepted similarly and will be the subject of another wiki page.

4. Putting it all together

A completed class would look like below.

You should be able to paste this code into your IDE as a new class, add the panel's identifier to the start-up menu (as you did for How to create your first page) and see it in action.

package org.uberfire.client.screens.mypanel;

import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.Image;

@WorkbenchScreen(identifier = "MySecondPanel")
public class MySecondPanel extends SimplePanel {

    public MySecondPanel() {
        setWidget( new Label("My Second Panel") );
    }

    @WorkbenchPartTitle
    public IsWidget myTitle() {
        return new Image("http://url.to.your.image");
    }

    @OnMayClose
    public boolean letTheUserDecideWhetherToCloseThisPanel() {
        return Window.confirm("Are you sure you want to close me?");
    }

}