Building A Page

Everything you can see on the JBStrap interface is a component. Components are the visual building blocks of an application: they may be placed on the top of each other, removed or modified. However, some of the components (like the container component) are not visual elements; they only affect how other components are aligned. A basic property of most standard and container components is that you can place them inside each other. This is not true for a few components, such as form items.

Adding a Component

Components can be visually placed on the top of each other – in this case, they will be represented as nested components in the HTML DOM. Nested components can be moved, hidden or made visible. For example, if three button components are added to a Container component and the Container is removed, it will also make all three buttons disappear. In other words, the visibility of a parent component affects the visibility of its children. If a new component is added to a component after displaying it on the screen, the newly added component is automatically displayed.

  Adding a button to a container:  
        
exampleContainer.addComponent(new Button("button"));

Removing a Component

The same way you have added a component to another component, you can remove it. Similarly to adding a component, this affects the HTML DOM nesting and visibility on the screen. It will, however, exist in the server shadow, but as a component without a parent until it is added to a component again. If you remove a child component after the parent component was drawn, then the child component will be removed from user interface (and from the HTML DOM) automatically. The framework also allows the simultaneous removal of multiple child components (or all of the child components) from a parent component. If you remove a component, that has child components, then the child components will also be removed.

  Removing a button from the container:  
        
exampleContainer.removeComponent(exampleButton);

  Removing all components from the container:  
        
exampleContainer.removeAllComponents();

Replacing a Component

Sometimes we need to replace an existing component for a different one. JBStrap offers a ready-made solution for this problem: when a component is replaced, the specific component is removed and a new one is added. If you add a component, it will be listed as the last one among the children components. However, if you replace a component, it will retain the place of the original component.

If the component to be replaced receives a NULL value, the component will simply be added. If the new component receives a NULL value, the original component will be removed.

  Replacing a button for a label component (components are placed on a container):  
        
exampleContainer.replaceComponent(exampleButton, new Label("Label"));

Placing a Component Before a Previously Added Component

To support dynamic interface creation, JBStrap offers two possibilities to modify components’ location. Example: you want to insert a component before a previously added component. This only works if the initial component has previously been assigned to a parent. In this case the component is placed directly before the specified one in HTML DOM and inside the parent of the initial component on the interface.

  Inserting a button before a previously added one:  
        
exampleButton.insertComponentBefore(new Button("New Button"));

Placing a Component Behind a Previously Added Component

The situation is similar to the previous paragraph if you want to insert a component behind a previously inserted one. Again, it only works if the initial component has already been assigned to a parent. A component inserted with this approach will be inserted directly behind the initial one in the HTML DOM and display on the interface.

  Inserting a button after a previously added one:  
        
exampleButton.insertComponentAfter(new Button("New Button"));

Making a Component Invisible

The framework allows you to place a component on the interface, but make it invisible to the user. Once placed on the interface, it is just a matter of seconds to make them visible. Using this solution will allow you to have the component on the interface and HTML DOM, but keep it invisible on the interface.

  Hiding a component:  
        
exampleButton.setVisible(false);

  Making a component visible:  
        
exampleButton.setVisible(true);

Disabling a Component

It might be necessary in some situations to temporarily disable a component. This way, the user cannot interact with them. Example: the user clicks a button, thus triggers a task execution and we want to make it impossible for the user to click the same button again. This is where disabling and then enabling a component again comes useful. Disabled components are visible, but the user can see that the component is unusable. Such a visual marking can be fading the component, changing the mouse pointer or highlighting form item input boxes in gray. Unusable (disabled) components do not trigger events.

  Disabling a button:  
        
exampleButton.setEnabled(false);

  Enabling a button:  
        
exampleButton.setEnabled(true);