Component can be placed on different server

How to use

Let's create index.html, index.js.

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div data-obj="obj"></div>
    <div><button data-name="sample">sample</button></div>
</body>
</html>

index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        $f.loadWebComponent(this.obj, 'http://localhost:8080/web_component', 'sample', {'key1': 'val1'})
        .then(this.success.bind(this))
        .catch(this.error.bind(this));
    }
    
    success(nodeList) {
        console.log("success");
    }
    
    error(exception) {
        alert("error");
        console.error(exception);
    }
    
}

Let's create src/js/components/sample/controller.js, src/js/components/sample/view.html.

src/js/components/sample/controller.js

export class Sample {

    constructor() {
    }

    sample1_click(event) {
        alert(this.obj.value);
    }

    sample2_click(event) {
        let str = '';
        for (const item of this.list.values()) {
            str += item.value;
        }
        alert(str);
    }

}

src/js/components/sample/view.html

<div data-text='v.key1'></div>

<div><input type='text' data-obj-web='obj' /></div>
<button data-name-web="sample1">click</button>

<div><input type='text' data-list-web='list' /></div>
<div><input type='text' data-list-web='list' /></div>
<button data-name-web="sample2">click</button>

As explained in the Build, the final product of the component is the file under js/components in distWork or dist.
Deploy the file under js/components in distWork or dist in the public directory of another server where CORS is set.
Please prepare your own web server with CORS settings.
For example, in the case of Apache, add the following in the Directory, Location, Files, VirtualHost tag of the configuration file
Header always set Access-Control-Allow-Origin http://localhost:8000
Header always set Access-Control-Allow-Credentials true
Header always set Access-Control-Allow-Headers "Accept, Content-Type, X-Requested-With"
Here, as an example, the web server with CORS set is assumed to be http://localhost:8080.
This time, create a directory named web_component directly under the public directory of the server where CORS is set, and put the sample directory under js/components generated by the build.
Let's run and click the sample button.
The component placed on the server where CORS is set is output.
Pass the Web component output destination to the first argument of loadWebComponent.
Pass the URL of the Web component storage destination as the second argument of loadWebComponent.
Pass the component name (directory name) to the third argument of loadWebComponent.
Pass the variable used in the view of the web component to the fourth argument of loadWebComponent.
If you set appendLoadWebComponent instead of loadWebComponent, the body part will be added to the body part instead of replacing it.
If you set beforeLoadWebComponent instead of loadWebComponent, the body part will be added just before the first argument instead of replacing.
If afterLoadWebComponent is used instead of loadWebComponent, the body part will be added immediately after the first argument instead of replacing it.
You can also create subdirectories under js/components. In that case, pass a string separated by period as the third argument of loadWebComponent.
The tag with the data-name-web attribute in the component's view.html is bound to the method of the component's controller.js class.
If you define a method named "data-name-web attribute value"_"event name" in the component's controller.js, this framework will automatically bind the tag with the data-name-web attribute in the component's view.html to the method in component's controller.js
The tag with the data-obj-web attribute in the component's view.html is bound to the field of the component's controller.js class.
The tag with the data-list-web attribute in the component's view.html is bound to the field of the component's controller.js class.
Web components are treated as unique component. Cannot be a single component.

Call a web component from a template, view.html of component

Example

<script data-load-only='true'>
        l.nestVal = {'key1': 'val1'};
</script>
<div data-web-component-url='http://localhost:8080/web_component' data-web-component='sample2' data-web-component-variable='l.nestVal'></div>

The data-web-component-url attribute value is the same as the second argument of loadWebComponent.
The data-web-component attribute value is the same as the third argument of loadWebComponent.
The data-web-component-variable attribute value is the same as the fourth argument of loadWebComponent.
The web component is loaded inside the tag with the data-web-component, data-web-component-url, data-web-component-variable attributes.

Next page Others

table of contents