Step 3 Create A New Page

On the left side of the Eclipse window, you can see a tree view called Project Explorer. This can be used to navigate between different sources of applications in the workspace. Open the tree structure as below.

FirstApp/Java Resources/src/main/java/com.company

Right-click on com.company.page → New → Class

The following window will pop up:

In this window, type “MyPage” in the Name line, type  com.jbstrap.ui.BasePage in the Superclass line, check the Constructors from superclass and click the Finish button. This is how you create a new source file called MyPage.java . This will include your window. The new file is automatically opened by Eclipse.

Now you’ve got the right class, but its content is not what you want. Modify the method in the following way.

1. Create the required components

   1. Create an input field where the user can enter their name:

      final TextItem name = new TextItem("name", "Enter your name");

      Here, you create an input field named TextItem. Its name will be “name ” and its corresponding entry will be “Enter your name ”.

   2. Create a button that the user can click on:

      final Button welcomeBtn = new Button(Icon.FLASH, "Welcome", ButtonType.PRIMARY);

      Here, you create a PRIMARY type green button with the text "Welcome" and a lightning icon next to it.

   3. Create a blank label in which the welcome text will appear and set its background color to transparent:

      final Header welcomeMessage = new Header(2, "").setBackgroundColor(Color.TRANSPARENT);

      With this line, you create a blank label on the screen. This is not visible, but you will use it later.

2. Create the event handler that runs when the user presses the button:

   welcomeBtn.addClickHandler(event -> {     welcomeMessage.setText("Welcome <b>" + name.getValueAsString() + "</b> in my application.");     });

   With this code, you have created the click event management method. The event will be triggered when the user clicks the Welcome button. If the event handler runs, it will modify the originally blank label by displaying the greeting sign that already contains the name specified by the user.

3. Add the components to the page:

   addComponents(name, welcomeBtn, welcomeMessage);

   With these lines, you added all the previously created components to your page. You created a Container component that does not have a visual appearance, but it is necessary for the page to display correctly. The container will have a small space on each side of the page. Components can be added to the side of the page if you do not want to leave margins.

You added the input field, the button and the welcome text to the container. As a result, the three components will be displayed one after the other. Then you added a container to the page.

Your source file should now look like this:

Save the code. You have finished creating your first window in JBStrap.