Tabbed Demo

TabbedDemo is the central layout exposed by commons-demo. It displays a SplitLayout that shows an add-on example on one side and, optionally, the example's source code on the other.

The layout accommodates multiple demos as tabs, so users can switch between examples for a comprehensive tour of an add-on's features. It also provides:

• Theme toggle — light vs. dark, so styles can be evaluated in both.
• Source visibility toggle — hide or show the source-code panel.
• Orientation toggle — vertical or horizontal split (automatically chosen based on screen ratio by default).

Defining a demo layout

Extend TabbedDemo and register each demo view:

@Route
@GithubLink("https://github.com/FlowingCode/CommonsDemo")
public class Demo extends TabbedDemo {
    public Demo() {
        // ...
        addDemo(SampleDemo.class, "Demo");
        addDemo(SampleDemoDefault.class);
        // ...
    }
}

@GithubLink and @GithubBranch

The @GithubLink and @GithubBranch annotations let the demo default its sources to a given branch in a public GitHub repository. @GithubLink must be configured with the HTTPS URL to the repository.

Private repositories are not supported

Private repositories would require an access token; CommonsDemo does not support that path.

Routed demo views

Different examples can be presented as routed demo views that share a TabbedDemo layout. Because each example gets its own route, users can link to a specific example by URL:

@Route(value = "demo/demo-with-source", layout = Demo.class)
@PageTitle("Demo with source")
@DemoSource
public class SampleDemoDefault extends Div {
    public SampleDemoDefault() {
        add(new Span("Demo component with defaulted @DemoSource annotation"));
    }
}

@DemoSource

A demo view can be annotated with @DemoSource to configure the URL used to fetch its source code:

• With no value and a TabbedDemo annotated with @GithubLink, the source URL is automatically computed as the location of the annotated class under src/test/java in the configured GitHub repository.
• The branch comes from @GithubBranch on the TabbedDemo or its containing package; if neither is present, it defaults to master.
• A value can be provided to point to a different location (useful when the source file is not the annotated class).

The annotation is repeatable — see Multiple sources in the Code Viewer docs.

@DemoHelper

@DemoHelper links a demo view with help content provided by a DemoHelperRenderer. How that content is presented is controlled by a DemoHelperViewer configured on the TabbedDemo. By default, the help content is rendered in a Dialog.