Please download the ZIP file by clicking on 「GET URUSHI」 below.
You can download directly from github by accessing the link below.
https://github.com/future-architect/urushi/releases
Unzip the downloaded file and place the folders in HTTP server as shown below. You can view the demo top page by accessing the [HTTP path of the folder above]test/ from the browser. From the top page, you can access any of the Web Component provided.
test and util folders are only needed for demo. Feel free to delete test and util folders, if you do not require the demo. If you are already using requirejs, make sure to add Urushi module path in your configuration file.
Finally, embed Urushi in your website.
Three steps are needed to use Urushi in your website.
First, add script tag in HTML to use Urushi.
Next, add source code in JavaScript to startup Urushi template.
With this, Urushi is ready to be used.
To use Urushi, add Urushi Web Component as attributes of HTML tags.
Before that, create the HTML file to use Urushi.
Referring to the folder directory below, create a new index.html file.
With this, we can finally proceed to the first step.
Add two script tags within the head tag. Urushi uses requirejs, therefore it is necessary to add the config JavaScript file (requireConfig.js) in the script tag. Next, describe the script tag to read requirejs and to load the JavaScript file(main.js) after the initialization of requirejs.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<link href="./urushi/material/style/material.css" rel="stylesheet">
<script src="./config/requireConfig.js"></script>
<script src="./lib/js/require.js" data-main="./main"></script>
</head>
<body>
</body>
</html>
Add the JavaScript to startup Urushi by creating main.js
and placing it in the same folder as index.html.
Execute main.js after the initialization of requirejs.
Please add the following source code in main.js.
The template engine will analyze the Document Tree specified by the first argument and start the process of replacing tags with Urushi Web Components.
// main.js
require.config(requireConfig);
require(['templateEngine', 'templateConfig'], function (templateEngine, templateConfig) {
templateEngine.renderDocument(document.body, templateConfig);
});
Urushi Web Components can be used by describing data-urushi-type attributes in HTML tags and adding the Web Component names.
By doing only that, you can use Urushi Web Components.
In addition to that, you can specify the constructor argument of Web Components by adding data-urushi-options attributes.
Please wait while we prepare the list of usage for Web Components.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<link href="./urushi/material/style/material.css" rel="stylesheet">
<script src="./config/requireConfig.js"></script>
<script src="./lib/js/require.js" data-main="./main"></script>
</head>
<body>
<div data-urushi-type="panel" data-urushi-options='{"header" : "Header title"}'>
<button data-urushi-type="button">CLICK ME</button>
Toggle <input data-urushi-type="togglebutton" checked>
<input data-urushi-type="checkbox"> Check me!
</div>
</body>
</html>
Let's create the following preview! You will be able to view the following preview if the installation process has been successful.