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: Views and Editors.

The main difference between a View 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 panels.

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.

Here is a good example of a Panel that responds to an observed CDI event:

@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 code that produces the CDI event:

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) {
                event.fire(new MarkdownTextContent(fileContent.getText()));
            }
        });

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

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

}```

In order to undertand better the above code and annotation, and to start building your own Panels, we recomend to you read the [[How to create your own panel]] tutorial.