Tải bản đầy đủ - 0 (trang)
Step 6 – modifying the index.html demo file

Step 6 – modifying the index.html demo file

Tải bản đầy đủ - 0trang

Chapter 4



Step 7 – generating distribution files using

Grunt



In this step, we need to call the transpiler which will generate the CSS and JS file

from the red-message.html file. A Grunt task watcher can watch the changes in the

red-message.html file and generate the red-message.css and red-message.js

files. A Grunt task watcher can be executed using the grunt demo command.

The following screenshot shows the terminal with Grunt watcher in execution:



[ 145 ]



Exploring Bosonic Tools for Web Component Development



After successful execution of the Grunt compiler, it generates the red-message.js

and red-message.css files in the dist directory and copies a set of these files to the

demo directory. The following screenshot shows the generated files after compilation:



Any changes to the red-message.html file will be picked up by the Grunt task

watcher and also made to the corresponding CSS and JS files. The following

screenshot displays the Grunt task watcher logs in the terminal:



[ 146 ]



Chapter 4



The following code has the content of the red-message.js file which is generated by

the Grunt transpiler:

(function () {

var RedMessagePrototype = Object.create(HTMLElement.prototype,

{

createdCallback: {

enumerable: true,

value: function () {

this.appendChild(this.template.content.

cloneNode(true));

}

}

});

window.RedMessage = document.registerElement('red-message', {

prototype: RedMessagePrototype });

Object.defineProperty(RedMessagePrototype, 'template', {

get: function () {

var fragment = document.createDocumentFragment();

var div =

fragment.appendChild(document.createElement('div'));

div.innerHTML = '

Welcome to Bosonic

framework.

';

while (child = div.firstChild) {

fragment.insertBefore(child, div);

}

fragment.removeChild(div);

return { content: fragment };

}

});

}());



The details of the preceding code are listed as follows:

• A new object prototype RedMessagePrototype is created using the

Object.createElement method

• It uses the Object.defineProperty method to create a property

for the RedMessagePrototype object

• It registers the element with DOM as red-message using the

document.registerElement method



[ 147 ]



Exploring Bosonic Tools for Web Component Development



Step 8 – running the index.html file



We can see the use of the custom element by running the

index.html file. The following screenshot shows the output of index.html,

which shows the text message in the color red:



Bosonic lifecycle



A Bosonic element goes through different states during its lifecycle. Bosonic provides

callback methods for each state to override with our own code. The lifecycle callback

methods are listed as follows:

• createdCallback: This callback method is for handling the created

state. An element is in the created state when it is instantiated at first.

• attachedCallback: This callback method is for handling the DOM

attached state. An attached state represents the element when it is

attached to DOM tree.

• detachedCallback: This callback method is for handling the DOM

detached state. A detached state represents the element when it is

removed from the DOM.

• attributeChangedCallback: This callback method is for handling the

changes in attributes.



[ 148 ]



Chapter 4



Example of lifecycle



In this section, we will develop a custom element demonstrating the

lifecycle callback method. A skeleton for creating a custom element can

be generated using the previously explained steps. The following screenshot shows

the terminal with the previous steps in execution:



After the directory and file structure is generated, we can start the Grunt task, which

will watch over the modified element and generate the dist directory containing

the respective CSS and JS files. The say-hello.html file present in the src directory

has the code definition for the element. The following code shows the

definition of the element: