How To Use Jbstrap Pages

Creating a JBStrap page

Every page is an individual class. To create a new JBStrap page first you need to create a new (e.g. ExamplePage) class by extending the BasePage class.

You have to keep three things in mind when creating a page:

the page extends the BasePage class,
it requires a build method,
you can build the page and add a component to the page within the overridable build method.

        public class ExamplePage extends BasePage {
  
	@Override
    public void build() {
        // Create components
        final TextItem name = new TextItem("name", "Enter your name");
        final Button welcomeBtn = new Button(Icon.FLASH, "Welcome", ButtonType.PRIMARY);
         
        //Add components to the page
        addComponents(name, welcomeBtn);
    }
  
}
       

Registering a page

Pages to be used by the application need to be created first, then assigned to the framework by the JBStrap addPage() method to the Startup class (read more on this in the Application Startup chapter).

In the above code snippet we used the following parameters to create a page:

pageId: During navigation, this page ID can be used to reference the pages. These pageIds are our navigation endpoints.
ExampleUI: When creating pages, the UI where the page will be displayed must be specified. It is possible to display the page on multiple UIs. If a page is to be displayed on multiple UIs, then the page must have multiple, unique page IDs.
ExamplePage: The class that contains the page to be opened.

Creating a page with parameters

Additionally, pages can have specific parameters that will be used as their default parameters. Parameters can also be specified upon opening the pages. These parameters will be passed to the page’s constructor.

        JBStrap.addPage("pageId", ExampleUI.class, ExamplePage.class, new Parameters()
    .add("parameterName1",value1)
    .add("parameterName2",value2)
);
       

Navigation between UIs

Direct navigation between UIs is not interpreted within the JBStrap framework and it is not directly possible to do this. If you navigate between pages, with the source and target UIs separately registered, the navigation between UIs automatically takes place.

External URL

To navigate to an external URL, you only need to insert a link. Use the Link component to do this.