How to create your first panel

Before you begin...

Before create your first panel, we suggest you to visit the Panels page, that has a good overview about UberFire panels.

And 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.

If you have showcase application running, you can stop it - we will start it again in a few, just after create your first panel.

1. Open source code and creating a Package

Now point your favorite editor or IDE to uberfire-showcase/showcase-webapp/src/main/java and create a new package named: org.uberfire.client.editors.mypanel. If you already have worked with GWT, you can notice that we are creating a class inside the client package, that means this is a code that will be translated later to JavaScript.

If you don't have previous expirience working with GWT, you can continue with this tutorial, but we recomend you to take a look on this link.

2. Creating the Panel

Inside the new package, create a class named: MyFirstPanel.

Our panel will be really simple, composed just by a simple Label that has the traditional Hello World! message. So here is the code that you'll have:

package org.uberfire.client.screens.mypanel;

import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Label;

public class MyFirstPanel {

    private final FlowPanel panel = new FlowPanel();

    private void init() {
        final Label label = new Label();

        label.setText("Hello World!");

        panel.add(label);
    }

}

As we know this Panel will be presented inside UberFire Workbench, we know that it needs a Title (every panel on a workbench has a Title, right?). So all you need to do for now is create a method that returns a String with the title content, as follow:

public String myTitle() {
    return "My First and Cool Panel!";
}

In the next step we'll give some hints to UberFire workbench to be able to recognize our class as a valid UberFire panel.

3. Annotating the new Panel

UberFire doesn't force you to extend nor implement any interface, all you have to do is add some Annotation (metadata) and it'll work out-of-the-box in a very descriptive way.

The first annotations that we'll add is the one responsible to tell UberFire that the current class is panel: @WorkbenchScreen. This annotation has a mandatory parameter called identifier - this parameter value must be unique in your application.

@WorkbenchScreen(identifier = "MyFirstPanel")
public class MyFirstPanel {
	...
}

Then, the next annotation that we need to add... is the one that informs UberFire that our myTitle method is the one responsible to return the Panel title:

@WorkbenchPartTitle
public String myTitle() {
	...
}

At this point we already annotated everything we have in our current class. But UberFire needs one additional information... it needs to know what is the component that should be displayed, that in our case is the panel field. So here is the code that we need to provide:

@WorkbenchPartView
public IsWidget getView() {
    return this.panel;
}

That's it! You already created your first panel...

4. Adding some CDI annotations

One very powerful feature that CDI has is the ability to control a class Lifecycle - if that class should be always instantiated, if should be a singleton or if it should be instantiated only if needed. So... let's add the last semantic information to our class, annotating it with the @Dependent annotation:

@Dependent
@WorkbenchScreen(identifier = "MyFirstPanel")
public class MyFirstPanel {
	...
}

You also may have noted that we have an init method that isn't invoked... so let's fix it by using the very well know @PostConstruct java annotation. Here is the the final version of our Panel:

package org.uberfire.client.screens.mypanel;

import javax.annotation.PostConstruct;
import javax.enterprise.context.Dependent;

import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.Label;
import org.uberfire.client.annotations.WorkbenchPartTitle;
import org.uberfire.client.annotations.WorkbenchPartView;
import org.uberfire.client.annotations.WorkbenchScreen;

@Dependent
@WorkbenchScreen(identifier = "MyFirstPanel")
public class MyFirstPanel {

    private final FlowPanel panel = new FlowPanel();

    @PostConstruct
    private void init() {
        final Label label = new Label();

        label.setText("Hello World!");

        panel.add(label);
    }

    @WorkbenchPartTitle
    public String myTitle() {
        return "My First and Cool Panel!";
    }

    @WorkbenchPartView
    public IsWidget getView() {
        return panel;
    }

}

Congratulations... you're done with your first UberFire Panel! But wait... probably you want to display it from, let's say, a menu item.... so let's do it in the next step.

5. Integrating the Panel into Menu

In Showcase module, open the uberfire-showcase/showcase-webapp/src/main/java/org/uberfire/client/ShowcaseEntryPoint.java file.

This class is responsible to build the Showcase menus.

Find the following line of code:

private String[] menuItems = new String[]{ "FileExplorer", "Chart", "MiscellaneousFeatures" };

And add to it your Panel unique identifier, like this:

private String[] menuItems = new String[]{ "FileExplorer", "Chart", "MiscellaneousFeatures" , "MyFirstPanel"};

Now you're ready... all you need is open your terminal and type:

$ mvn gwt:run