-
Notifications
You must be signed in to change notification settings - Fork 119
Panels
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.
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.