Panels

What's a Panel?

Panels are the highest level UI component of the workbench and are organized in perspectives. In UberFire we have two types of Panels: Screens and Editors.

The main difference between a Screen and an Editor is the fact that an Editor is associated with a resource to be manipulated and can be associated with a resource name or extension.

Pluggable Architecture

One of the biggest advantage of UberFire workbench is its pluggable architecture, which allows us create an application just by composing panel.

This pluggable architecture is only possible because of Errai - a project that brings all the power of CDI to client side application development (in fact Errai is more than that, it's features are best described in it's website).

And to avoid a tight coupled code between panels that are somehow related, we use CDI events to decouple the communication between them.

A good example of an user interface composed by two decoupled panels wired by CDI events, is the following Markdown editor (part of our widgets library and available on UberFire showcase application):

The above screenshot presents a simple text editor and a Markdown preview. The following code is related to Markdown editor, note that the loadContent method is in fact a CDI event observer:

@Dependent
@WorkbenchScreen(identifier = "MarkdownLiveViewer")
public class MarkdownLivePresenter {

    public interface View
            extends
            IsWidget {

        void setContent(final String htmlContent);
    }

    @Inject
    public View view;

    @WorkbenchPartTitle
    public String getTitle() {
        return "Markdown Live Viewer";
    }

    @WorkbenchPartView
    public IsWidget getWidget() {
        return view;
    }

    //here we listen for MarkdownTextContent CDI event
    public void loadContent(@Observes MarkdownTextContent content) {
        view.setContent(content.getContent());
    }

}

And here is the text editor code, the panel responsible to produce the CDI event (the event is produced in three different events: keydown, keyup and onChange):

public class MarkdownLiveEditorView extends Composite
        implements
        RequiresResize,
        MarkdownLiveEditorPresenter.View {

    interface MarkdownLiveEditorViewBinder
            extends
            UiBinder<ResizeLayoutPanel, MarkdownLiveEditorView> {

    }

    private static MarkdownLiveEditorViewBinder uiBinder = GWT.create(MarkdownLiveEditorViewBinder.class);

    @UiField
    protected ResizableTextArea fileContent;

    @Inject
    protected Event<MarkdownTextContent> event;

    @PostConstruct
    public void init() {
        initWidget(uiBinder.createAndBindUi(this));

        fileContent.addKeyDownHandler(new KeyDownHandler() {
            @Override
            public void onKeyDown(final KeyDownEvent changeEvent) {
                //fire cdi event
                event.fire(new MarkdownTextContent(fileContent.getText()));
            }
        });

        fileContent.addKeyUpHandler(new KeyUpHandler() {
            @Override
            public void onKeyUp(final KeyUpEvent changeEvent) {
                //fire cdi event
                event.fire(new MarkdownTextContent(fileContent.getText()));
            }
        });

        fileContent.addChangeHandler(new ChangeHandler() {
            public void onChange(ChangeEvent changeEvent) {
                //fire cdi event
                event.fire(new MarkdownTextContent(fileContent.getText()));
            }
        });
    }

}

In order to undertand better the above code and to start building your own Panels, we recommend to you read the How to create your first panel tutorial.