• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Custom Events
2
3
4Custom components support custom events, whose **action** is **proxy** and name is specified by **method**. A service widget page that uses a custom component can register an event callback corresponding to the custom event name. When the custom event in the custom component is triggered, the registered callback will be invoked.
5
6
7>  **NOTE**
8>
9>  The event name cannot contain uppercase letters.
10
11
12## Example of the **comp** Subcomponent
13
14
15```html
16<!-- comp.hml -->
17<div class="container">
18    <div class="row-3" if="true">
19        <button onclick="buttonClicked" value="click"></button>
20    </div>
21</div>
22```
23
24
25
26```css
27/* comp.css */
28.container {
29    flex-direction:column;
30    background-color: green;
31    width: 100%;
32    height: 100%;
33}
34
35.row-3 {
36    width: 100%;
37    height: 50px;
38    background-color: orange;
39    font-size:15px;
40}
41```
42
43
44
45```json
46{
47    "data": {
48    },
49    "actions": {
50        "buttonClicked": {
51            "action": "proxy",
52            "method":"event_1"
53        }
54    }
55}
56```
57
58
59## Example of the Service Widget Page
60
61
62```html
63<!-- xxx.hml -->
64<element name='comp' src='../../common/customComponent/customComponent.hml'></element>
65
66<div class="container">
67    <comp @event_1="click"></comp>
68    <button value="parentClick" @click="buttonClick"></button>
69</div>
70```
71
72
73
74```css
75/* xxx.css */
76.container {
77  background-color: red;
78  height: 500px;
79  width: 500px;
80}
81```
82
83
84
85```json
86{
87  "data": {
88  },
89  "actions": {
90    "click": {
91      "action": "message",
92      "params": {
93        "message": "click event"
94      }
95    },
96    "buttonClick": {
97      "action": "message",
98      "params": {
99        "message": "click event 2"
100      }
101    }
102  }
103}
104```
105