How to install Urushi

Download Urushi

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

file_downloadGET URUSHI

Check out the Demo

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.

folder_openWeb site root
folderconfig
folderurushi
foldertest
folderutil

Before using Urushi

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.

Use Urushi in your website

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.

folder_openWeb site root
folderconfig
folderurushi
foldertest
folderutil
index.html

Using Urushi

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>

Adding JavaScript to startup Urushi

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.

folder_openWeb site root
folderconfig
folderurushi
foldertest
folderutil
index.html
main.js

// main.js
require.config(requireConfig);
require(['templateEngine', 'templateConfig'], function (templateEngine, templateConfig) {
    templateEngine.renderDocument(document.body, templateConfig);
});

Adding Urushi Web Components in HTML

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>

Preview

Let's create the following preview! You will be able to view the following preview if the installation process has been successful.

Toggle Check me!