Reusing components - Learn JBStrap

Creating custom components using existing components

The next step is to create a new component using previously created or built-in components. Use this solution if you want to separate a set of complex components or if you want to use components in multiple places. Your application's source code becomes more transparent. This might be the case, if you want to create an editable list that appears as a list on the interface but switches to a form while you are editing the data. The user can edit the data in the form, then, if saved, the list (or a card component displaying data) will appear again.

Such components are usually based on some kind of container component. In most cases, this container component is the Div component, which has no event handling and is not visible on the interface and it only collects components. If your custom component needs event handling, one or more of the interfaces listed in the previous section must be placed into the created component, thus enabling event handling.

Implementation

In this example, we will create a card component that displays user data. The component will handle click, mouse, and drag and drop events. The card component must be given a user ID used to query the required data from the database and display the card on the interface. It will also display the user's picture, name, email address, and user name.

The component will extend the Div container component, which will be provided with the events mentioned above. When creating a component, build its structure and also assign an invisible component to it. If the user data is not available, this text will appear on the card instead of the user data.

  Source code of a card component:  
        
package com.example.employee.components;

import com.jbstrap.core.JBStrap;
import com.jbstrap.core.dao.DataRecord;
import com.jbstrap.core.dao.base.JpaDaoAPI;
import com.jbstrap.ui.Clickable;
import com.jbstrap.ui.Draggable;
import com.jbstrap.ui.HandleMouseEvents;
import com.jbstrap.ui.bootstrap.ImageStyle;
import com.jbstrap.ui.components.Div;
import com.jbstrap.ui.components.Image;
import com.jbstrap.ui.components.Paragraph;
import com.jbstrap.ui.components.Row;
import com.jbstrap.ui.components.layout.Column;

public class UserCard extends Div implements Clickable<UserCard>, HandleMouseEvents<UserCard>, Draggable<UserCard> {
    private Paragraph message = new Paragraph("Not found");
    private Paragraph userName = new Paragraph();
    private Paragraph fullName = new Paragraph();
    private Paragraph email = new Paragraph();
    private Image image = new Image("noUser.jpg", "100px", "100px", ImageStyle.CIRCLE);
    private Div userInfo;
    private Long userId;

    /**
     * Create empty user card component
     */
    public UserCard() {
        super();
        addStyleClass("user-card");
        userInfo = new Div();
        userInfo.addComponents(new Row(new Column().addComponent(image), new Column().addComponent(new Div(fullName.addStyleClass("name"), userName, email).addStyleClass("user-info-container"))));

        addComponents(message, userInfo.setVisible(false));
    }

    /**
     * Set user ID and query data from the database
     */
    public UserCard setUserId(Long userId) {
        this.userId = userId;
        fetchData();
        return this;
    }

    /**
     * Get user displayed user ID
     */
    public Long getUserId() {
        return this.userId;
    }

    /**
    * Query data from the database. If user ID is null or user data not found in the database
    * clear component data
    */
    private UserCard fetchData() {
      if (this.userId == null) {
          clear();
      } else {
          try {
            DataRecord user = JpaDaoAPI.findById(JBStrap.getDataDescriptor("userDS").getClass(), this.userId);
            if (user == null) {
                clear();
            } else {
                image.setUrl(user.getValueAsString("imageUrl"));
                userName.setText(user.getValueAsString("username"));
                fullName.setText(user.getValueAsString("fullName"));
                email.setText(user.getValueAsString("email"));
                message.setVisible(false);
                userInfo.setVisible(true);
            }
          } catch (Exception e) {
            clear();
          }
        }
        return this;
    }

    /**
     * Clear any user information data and show 'not found' message on the card
     */
    private UserCard clear() {
        userInfo.setVisible(false);
        message.setVisible(true);
		return this;
    }

    /**
     * Getting current displayed user name
     */
    public String getUserName() {
        return userInfo.isVisible() ? userName.getText() : null;
    }

    /**
     * Getting current displayed user email address
     */
    public String getEmail() {
        return userInfo.isVisible() ? email.getText() : null;
    }

    /**
    * Getting current displayed user full name
    */
    public String getFullName() {
        return userInfo.isVisible() ? fullName.getText() : null;
    }
}

We created the card component with the above code, now let's see how to place it on a page:

  Placing the UserCard component on a page:  
        
public class UserCardTestPage extends BasePage {
    @Override
	public void build() {
        for (Long i = 1; i < 11; i++) {
            addComponent(new UserCard().setUserId(i).addClickHandler event -> openUser(i));
        }
    }
    private openUser(Long userId) {
        getClient().navigateTo("userEditorPage", new Parameters().add("userId", userId));
    }
}

The above source code displays 10 cards on the interface with user data with a unique ID between 1-10. In addition, a click event handler has been added to each UserCard component, which causes the application to navigate to the corresponding user data editing page when the user clicks on one of the card components.