Create a sample component

Let's create a simple sample component before we go on to details to see how the component is like. We create a component that has a button under a heading and says “Hello, World!” when the button is pushed.

The full source is attached at the bottom of this page. If you are an experienced programmer, taking a look at the full source first might be helpful since it's so simple.

We create the component following these steps:

1. Decide names.
2. Create a component HTML file.
3. Create a component JS file.
4. Add settings.
5. Add an event handler.
6. Create a container HTML file.
7. Deploy files to a web server.

Before we start creating a component, we need to decide the names of materials needed for the component.

A BitsmistJS component usually consists of a Javascript file that defines the component's action and an HTML file that describes the appearance of the component. A component's HTML file can be one or more and can be switched, or none at all. If a component takes no actions, the component has no javascript files and has only an HTML file.

We need to decide names for:

• tag name
• class name
• filename

The BitsmistJS components are built on top of the custom elements in the standard Web Components technology. Each component requires its own tag name. We need to follow the custom tag naming rules. There must be one “-” in the tag name.

We name the tag “pad-hello” here.

A component needs a class if the component has actions (event handlers). BitsmistJS treat the name that removes the “-” from the tag name and capitalizes the first letter of each word as the default class name. In this project, it is “PadHello” since the tag name is “pad-hello”.

The tag name + “.js” is the default javascript file name for the component and the tag name + “.html” is the default HTML file name. Though you can use any filenames you want, we follow the defaults for simplicity.

In this project, we create one javascript file and one HTML file each name is “pad-hello.js” and “pad-hello.html”.

We create a component HTML file that is displayed on a browser. There is a button under a heading.

<h1>Hello Component</h1>
<button id="btn-greet">Greet</button>

We name the file “pad-hello.html” as we decided in the previous section.

Write only contents of <pad-hello> tag. This HTML will be inserted in the <pad-hello> tag.

If a component has some actions, you need a Javascript file that defines a class and those actions. The class must inherit the BitsmistJS component.

In BitsmistJS, we inherit one of the base components to create our custom components. As of now, BitsmistJS core offers only one base component called “Component”. You can make your own base classes by inheriting the Component class and can use it as your base component.

The base component we inherit is in BITSMIST.v1 global object, we inherit like this:

class PadHello extends BITSMIST.v1.Component
{
}

The file name is “pad-hello.js”.

Then we pair the tag name and the class we defined. Thus, a browser will use this class when it finds “pad-hello” tag in the HTML.

class PadHello extends BITSMIST.v1.Component
{
}
 
customElements.define("pad-hello", PadHello);

Next, we add component settings in “pad-hello.js”. Override _getSettings() function, and return an object that contains the settings.

class PadHello extends BITSMIST.v1.Pad
{
    _getSettings()
    {
        return {
            "settings": {
                "name": "PadHello"
            },
            "events": {
                "btn-greet": {
                    "handlers": {
                        "click": "onBtnGreet_Click"
                    }
                }
            }
        };
    }
}

We set the component name in the “settings” section here.

Also, we specified which function would run when a button is pushed in “events” section. Refer to EventOrganizer reference how to specify event handlers in detail.

Next, we create an event handler in “pad-hello.js”. Write the action taken when the button is pushed. The function name is “onBtnGreet_Click” as described in the settings we added earlier.

class PadHello extends BITSMIST.v1.Pad
{
    ...
 
    onBtnGreet_Click(sender, e, ex)
    {
        alert("Hello, world!");
    }
}

Create a container HTML file that contains a component we created. The file name is “sample.html”.

<html>
    ...
<body>
<pad-hello bm-autoload="/pad-hello.js"></pad-hello>
</body>
</html>

We put a custom tag we created and specify where the component JS file is placed in bm-autoload attribute. In this project, we are assuming all files are located right under the root path.

Finally, put these three files we created, sample.html, pad-hello.js, and pad-hello.html, directly under a web server's document root.

Once you deploy, access sample.html with your browser. Confirm a message pops up when you push the button.

These are the source files for this sample project.

sample.html

<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/bitsmist/bitsmist-js_v1@0.9.9/dist/bitsmist-js_v1.min.js"></script>
<title>BitsmisJS Sample</title>
</head>
<body>
<pad-hello bm-autoload="/pad-hello.js"></pad-hello>
</body>
</html>

pad-hello.html

<h1>Hello Component</h1>
<button id="btn-greet">Greet</button>

pad-hello.js

class PadHello extends BITSMIST.v1.Component
{
    _getSettings()
    {
        return {
            "settings": {
                "name": "PadHello"
            },
            "events": {
                "btn-greet": {
                    "handlers": {
                        "click": "onBtnGreet_Click"
                    }
                }
            }
        };
    }
 
    onBtnGreet_Click(sender, e, ex)
    {
        alert("Hello, world!");
    }
}
 
customElements.define("pad-hello", PadHello);