57 lines
72 KiB
HTML
57 lines
72 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width">
|
|
<script type="text/javascript">/*<![CDATA[*/window.__chunkMapping={"main":["/main.f66713773e9ba37b90fe.css","/main.df23129c6a8dca8ab908.js"],"component---site-src-pages-index-jsc-4-f-f99":["/component---site-src-pages-index-jsc-4-f-f99.71bf8f44fd9ac59b6a50.css","/component---site-src-pages-index-jsc-4-f-f99.438c47f7e14d781ed211.js"],"component---theme-blog-post-pageccc-cab":["/component---theme-blog-post-pageccc-cab.a03708177ba1c62de77f.js"],"content---blog-welcome-286-e55":["/content---blog-welcome-286-e55.1a36c0cf0942373a67a1.js"],"metadata---blog-welcome-27-a-91f":["/metadata---blog-welcome-27-a-91f.63baecf308a43e211599.js"],"component---theme-blog-list-pagea-6-a-7ba":["/component---theme-blog-list-pagea-6-a-7ba.3eec87adfad0d6553692.js"],"content---blogaf-1-856":["/content---blogaf-1-856.d9776ce013f7485dcbe5.js"],"metadata---blog-83-c-2b0":["/metadata---blog-83-c-2b0.b5c7fafcf69c0c7eb46c.js"],"component---theme-doc-legacy-page-9-e-7-ca5":["/component---theme-doc-legacy-page-9-e-7-ca5.3c38a2f40a51efdd72a0.css","/component---theme-doc-legacy-page-9-e-7-ca5.f5d90ad6613508f9bb4b.js"],"docsMetadata---docs-150-2d6":["/docsMetadata---docs-150-2d6.dbac39bfa2e3d6968559.js"],"component---theme-doc-legacy-item-031-769":["/component---theme-doc-legacy-item-031-769.1f1ce10374de019f5d3a.css","/component---theme-doc-legacy-item-031-769.89c72f3cd114f0722210.js"],"content---docs-faq-048-db5":["/content---docs-faq-048-db5.5525c687cb63aa66b087.js"],"metadata---docs-faq-59-d-2b9":["/metadata---docs-faq-59-d-2b9.fac6dd94ae51c2c0aa28.js"],"content---docs-doc-1-b-2-f-e80":["/content---docs-doc-1-b-2-f-e80.155f26d0e2515ddecad7.js"],"metadata---docs-doc-12-a-3-5a1":["/metadata---docs-doc-12-a-3-5a1.f3b9bb0d78acf6a22788.js"],"content---docs-development-common-errorsf-15-a5b":["/content---docs-development-common-errorsf-15-a5b.3c446456ebcde11f2e0c.js"],"metadata---docs-development-common-errors-402-ef4":["/metadata---docs-development-common-errors-402-ef4.2278b16151ee83b70d42.js"],"content---docs-development-readme-149-437":["/content---docs-development-readme-149-437.88d3682f8536e933a815.js"],"metadata---docs-development-readm-ec-6-c-332":["/metadata---docs-development-readm-ec-6-c-332.89a6ec882abd5a9d2dbf.js"],"content---docs-development-debuggingb-54-9ed":["/content---docs-development-debuggingb-54-9ed.d76308cc2f9733de248d.js"],"metadata---docs-development-debuggingc-36-26a":["/metadata---docs-development-debuggingc-36-26a.ece7f5fe52e59a94edc7.js"],"content---docs-development-getting-started-139-387":["/content---docs-development-getting-started-139-387.9789bece43bb79d98058.js"],"metadata---docs-development-getting-started-89-b-c7a":["/metadata---docs-development-getting-started-89-b-c7a.7cb9980eac431c87f351.js"],"content---docs-development-setting-up-28-c-666":["/content---docs-development-setting-up-28-c-666.93469fbea5d970326d62.js"],"metadata---docs-development-setting-up-979-75f":["/metadata---docs-development-setting-up-979-75f.2dc3a735cddac97a14cc.js"],"content---docs-development-signal-and-event-handling-7-d-4-f3f":["/content---docs-development-signal-and-event-handling-7-d-4-f3f.8f1478c9222a4363963f.js"],"metadata---docs-development-signal-and-event-handling-0-b-5-692":["/metadata---docs-development-signal-and-event-handling-0-b-5-692.96786c0bf5b413a0c737.js"],"content---docs-development-wrapping-widgets-84-b-538":["/content---docs-development-wrapping-widgets-84-b-538.d89aa40f77ccea2817e5.js"],"metadata---docs-development-wrapping-widgets-303-fb8":["/metadata---docs-development-wrapping-widgets-303-fb8.7de59ea4ff29a4f9f36c.js"],"content---docs-development-styling-293-cad":["/content---docs-development-styling-293-cad.7a035f4c17a4f8b41e6d.js"],"metadata---docs-development-styling-1-c-2-0d6":["/metadata---docs-development-styling-1-c-2-0d6.8829c5502955ccec4576.js"],"content---docs-api-component-4-ef-195":["/content---docs-api-component-4-ef-195.ac86aa3082e629a0fd98.js"],"metadata---docs-api-component-3-e-5-43d":["/metadata---docs-api-component-3-e-5-43d.9b39404632ecfdb50982.js"],"content---docs-api-flex-layout-3-dc-a16":["/content---docs-api-flex-layout-3-dc-a16.e9a291d5978a978e915d.js"],"metadata---docs-api-flex-layoutecf-540":["/metadata---docs-api-flex-layoutecf-540.ca6234a76603a3721091.js"],"content---docs-api-event-widgetac-6-11b":["/content---docs-api-event-widgetac-6-11b.ea7e99ed29f9723e18e6.js"],"metadata---docs-api-event-widget-39-a-9ea":["/metadata---docs-api-event-widget-39-a-9ea.3983b253515b2f468440.js"],"content---docs-api-node-widget-080-a39":["/content---docs-api-node-widget-080-a39.fdf17f177a4ce4b722a9.js"],"metadata---docs-api-node-widgeta-92-a4f":["/metadata---docs-api-node-widgeta-92-a4f.15d6f9a9b198fb1c83f8.js"],"content---docs-api-node-layoutd-28-11a":["/content---docs-api-node-layoutd-28-11a.847e9d4d8496c50cdba3.js"],"metadata---docs-api-node-layout-1-e-9-c15":["/metadata---docs-api-node-layout-1-e-9-c15.9cc3a52940035afa4a55.js"],"content---docs-api-q-abstract-slider-3-e-0-54d":["/content---docs-api-q-abstract-slider-3-e-0-54d.8809abfe357004f7d063.js"],"metadata---docs-api-q-abstract-sliderdfa-ab7":["/metadata---docs-api-q-abstract-sliderdfa-ab7.d238f455e58818870dd6.js"],"content---docs-api-q-applicationd-3-e-0a3":["/content---docs-api-q-applicationd-3-e-0a3.5ba1fb22df7f78d91cfe.js"],"metadata---docs-api-q-applicationc-1-d-8a4":["/metadata---docs-api-q-applicationc-1-d-8a4.0d8cd2b346473211ab17.js"],"content---docs-api-q-check-boxd-9-b-c95":["/content---docs-api-q-check-boxd-9-b-c95.f20de1581af2b72e6825.js"],"metadata---docs-api-q-check-box-132-293":["/metadata---docs-api-q-check-box-132-293.f6f40baaa756bcf823f3.js"],"content---docs-api-q-action-051-425":["/content---docs-api-q-action-051-425.4498dbda0355b4f799f6.js"],"metadata---docs-api-q-actioncfb-cfc":["/metadata---docs-api-q-actioncfb-cfc.8280c5c7e256edca447e.js"],"content---docs-api-q-abstract-scroll-area-3-e-6-d7f":["/content---docs-api-q-abstract-scroll-area-3-e-6-d7f.11049cd8c56d47f16e47.js"],"metadata---docs-api-q-abstract-scroll-area-59-d-279":["/metadata---docs-api-q-abstract-scroll-area-59-d-279.c37831b751e416067786.js"],"content---docs-api-q-clipboard-69-d-2ef":["/content---docs-api-q-clipboard-69-d-2ef.37d806252ceae9ce9066.js"],"metadata---docs-api-q-clipboard-486-b21":["/metadata---docs-api-q-clipboard-486-b21.0d081407e4731ac1d902.js"],"content---docs-api-q-dial-80-b-99a":["/content---docs-api-q-dial-80-b-99a.4f88543f01722ffa22a9.js"],"metadata---docs-api-q-dialbfb-aef":["/metadata---docs-api-q-dialbfb-aef.14cf6fc384352f5e906c.js"],"content---docs-api-q-grid-layouta-4-e-552":["/content---docs-api-q-grid-layouta-4-e-552.18fc004232075bb70ff7.js"],"metadata---docs-api-q-grid-layout-7-db-030":["/metadata---docs-api-q-grid-layout-7-db-030.1b4418c30294e7920975.js"],"content---docs-api-q-cursor-362-d51":["/content---docs-api-q-cursor-362-d51.a8951173d79cc5b6743b.js"],"metadata---docs-api-q-cursor-887-11e":["/metadata---docs-api-q-cursor-887-11e.155beb474ce4b9a123a3.js"],"content---docs-api-q-label-2-f-9-04b":["/content---docs-api-q-label-2-f-9-04b.36c3d2c55db21788f964.js"],"metadata---docs-api-q-label-165-210":["/metadata---docs-api-q-label-165-210.5f49e6eaa464f0e20e46.js"],"content---docs-api-q-key-sequence-6-b-2-ebe":["/content---docs-api-q-key-sequence-6-b-2-ebe.030be1701aa851096d50.js"],"metadata---docs-api-q-key-sequence-623-1a1":["/metadata---docs-api-q-key-sequence-623-1a1.4368978c57564e220a16.js"],"content---docs-api-q-line-editea-0-53d":["/content---docs-api-q-line-editea-0-53d.fefd53f666fefaddd62a.js"],"metadata---docs-api-q-line-edit-13-f-b8a":["/metadata---docs-api-q-line-edit-13-f-b8a.6ff72d32eab993d3ae53.js"],"content---docs-api-q-icone-5-f-b0d":["/content---docs-api-q-icone-5-f-b0d.ba5e99f7546b1f2ecbd6.js"],"metadata---docs-api-q-icone-6-d-093":["/metadata---docs-api-q-icone-6-d-093.475fb513784156ad8449.js"],"content---docs-api-q-menu-39-e-ecd":["/content---docs-api-q-menu-39-e-ecd.923b1cbe5c188c45d9eb.js"],"metadata---docs-api-q-menuc-6-b-9ab":["/metadata---docs-api-q-menuc-6-b-9ab.dd1782d6fb79d439483f.js"],"content---docs-api-q-pixmap-8-dd-cb2":["/content---docs-api-q-pixmap-8-dd-cb2.9c5d57a238adc65ab809.js"],"metadata---docs-api-q-pixmapfdf-820":["/metadata---docs-api-q-pixmapfdf-820.72c507a3c613398100d9.js"],"content---docs-api-q-main-window-0-e-7-299":["/content---docs-api-q-main-window-0-e-7-299.e0854f14e4725b528b19.js"],"metadata---docs-api-q-main-window-04-f-efb":["/metadata---docs-api-q-main-window-04-f-efb.0591632b4db762f30099.js"],"content---docs-api-q-menu-bar-8-d-2-872":["/content---docs-api-q-menu-bar-8-d-2-872.fdf8987a4bf88fc8901e.js"],"metadata---docs-api-q-menu-bare-25-882":["/metadata---docs-api-q-menu-bare-25-882.1fa4c845b8584b483b86.js"],"content---docs-api-q-plain-text-edit-7-c-8-081":["/content---docs-api-q-plain-text-edit-7-c-8-081.9db7524cdd62d2a47a9f.js"],"metadata---docs-api-q-plain-text-edit-161-ecc":["/metadata---docs-api-q-plain-text-edit-161-ecc.7cdd26f1914f8ca77d53.js"],"content---docs-api-q-push-button-06-c-73e":["/content---docs-api-q-push-button-06-c-73e.658e7b21e29049ac304b.js"],"metadata---docs-api-q-push-button-96-d-c92":["/metadata---docs-api-q-push-button-96-d-c92.cec82aa08fc0493ebc84.js"],"content---docs-api-q-progress-barc-46-afe":["/content---docs-api-q-progress-barc-46-afe.40cb24422798867a7abd.js"],"metadata---docs-api-q-progress-bar-43-d-07e":["/metadata---docs-api-q-progress-bar-43-d-07e.e9ed6760ad1f932febd4.js"],"content---docs-api-q-radio-buttone-54-746":["/content---docs-api-q-radio-buttone-54-746.a6bc25d8a8096f9cf66c.js"],"metadata---docs-api-q-radio-button-367-f7c":["/metadata---docs-api-q-radio-button-367-f7c.b3daca0385d4d56b5349.js"],"content---docs-api-q-scroll-area-8-c-4-3fd":["/content---docs-api-q-scroll-area-8-c-4-3fd.a89daa731969b2d3f2a5.js"],"metadata---docs-api-q-scroll-area-46-a-96e":["/metadata---docs-api-q-scroll-area-46-a-96e.04a812277402d3a8e819.js"],"content---docs-api-q-shortcut-271-2d3":["/content---docs-api-q-shortcut-271-2d3.a23160cb2c5ac65e7c60.js"],"metadata---docs-api-q-shortcut-5-e-7-1aa":["/metadata---docs-api-q-shortcut-5-e-7-1aa.88762d3d7fb8ccc3c204.js"],"content---docs-api-q-tab-widget-508-95e":["/content---docs-api-q-tab-widget-508-95e.5ece3d8e00fddb1469c1.js"],"metadata---docs-api-q-tab-widgetebc-5aa":["/metadata---docs-api-q-tab-widgetebc-5aa.1c2702d1aaedf58cadb0.js"],"content---docs-api-q-system-tray-icon-4-b-8-4c7":["/content---docs-api-q-system-tray-icon-4-b-8-4c7.c1c846e0aa1550a71fed.js"],"metadata---docs-api-q-system-tray-icon-711-f90":["/metadata---docs-api-q-system-tray-icon-711-f90.0b37c5f9af3987644ba9.js"],"content---docs-api-q-widget-04-a-59f":["/content---docs-api-q-widget-04-a-59f.b622c9de949ee036de5d.js"],"metadata---docs-api-q-widget-287-e6c":["/metadata---docs-api-q-widget-287-e6c.5cbf78a727e1cde95092.js"],"content---docs-api-q-spin-box-1-ce-bfd":["/content---docs-api-q-spin-box-1-ce-bfd.722df01f421031412fb8.js"],"metadata---docs-api-q-spin-box-809-ae0":["/metadata---docs-api-q-spin-box-809-ae0.69bd6d9dfa703ffe4d2c.js"],"content---docs-api-yoga-widgeta-42-cc7":["/content---docs-api-yoga-widgeta-42-cc7.b1a320dbb203d69d51cd.js"],"metadata---docs-api-yoga-widget-95-c-f8b":["/metadata---docs-api-yoga-widget-95-c-f8b.4288592a965b2478e365.js"],"content---docs-api-qt-enumsfd-7-cf3":["/content---docs-api-qt-enumsfd-7-cf3.e7202e3e187c517ff19b.js"],"metadata---docs-api-qt-enums-423-cf9":["/metadata---docs-api-qt-enums-423-cf9.799ad4b2f7ae2ad9e3e5.js"],"content---docs-api-process-5-ec-b1e":["/content---docs-api-process-5-ec-b1e.0e51f069220cb4cdb517.js"],"metadata---docs-api-process-32-d-09e":["/metadata---docs-api-process-32-d-09e.eba5fff2f66bf0bc66c9.js"],"content---docs-api-synopsis-7-bb-e1c":["/content---docs-api-synopsis-7-bb-e1c.fd9a9dedb6493fbec889.js"],"metadata---docs-api-synopsis-21-f-a62":["/metadata---docs-api-synopsis-21-f-a62.6465165dff9d1055905a.js"],"content---docs-guides-getting-startedc-9-e-20f":["/content---docs-guides-getting-startedc-9-e-20f.ab2cfcda0993e1d7f4aa.js"],"metadata---docs-guides-getting-started-2-b-7-1a4":["/metadata---docs-guides-getting-started-2-b-7-1a4.e5d14670e71cc0a6374f.js"],"content---docs-guides-debuggingf-3-f-cf5":["/content---docs-guides-debuggingf-3-f-cf5.0e5e6363c35844ddb164.js"],"metadata---docs-guides-debugging-970-fb8":["/metadata---docs-guides-debugging-970-fb8.6d5daf600011c2bbb3d0.js"],"content---docs-guides-debugging-in-vscodebd-7-cec":["/content---docs-guides-debugging-in-vscodebd-7-cec.216a1ec2b1810da330e8.js"],"metadata---docs-guides-debugging-in-vscodebf-8-5b0":["/metadata---docs-guides-debugging-in-vscodebf-8-5b0.391f49f7fdbdeb652131.js"],"content---docs-guides-custom-nodegui-native-plugin-632-9db":["/content---docs-guides-custom-nodegui-native-plugin-632-9db.95323b60cd95d318e46d.js"],"metadata---docs-guides-custom-nodegui-native-plugin-92-b-12f":["/metadata---docs-guides-custom-nodegui-native-plugin-92-b-12f.111c69f6181f9610cd3a.js"],"content---docs-guides-images-991-065":["/content---docs-guides-images-991-065.51a08c5cfcb7493ad2c0.js"],"metadata---docs-guides-images-915-5ee":["/metadata---docs-guides-images-915-5ee.73d32cbb57e807926c33.js"],"content---docs-guides-handle-events-160-4b0":["/content---docs-guides-handle-events-160-4b0.fe5fb2010d2e8cadf3a1.js"],"metadata---docs-guides-handle-events-5-eb-540":["/metadata---docs-guides-handle-events-5-eb-540.b339e07967c7ac77fa33.js"],"content---docs-guides-layoutdf-5-a64":["/content---docs-guides-layoutdf-5-a64.4934a0cf62b893749063.js"],"metadata---docs-guides-layoutf-65-d7d":["/metadata---docs-guides-layoutf-65-d7d.2ce91fdc2faeac2302fc.js"],"content---docs-guides-scroll-view-76-e-87c":["/content---docs-guides-scroll-view-76-e-87c.fda5184f1e490846605b.js"],"metadata---docs-guides-scroll-view-9-a-9-2ac":["/metadata---docs-guides-scroll-view-9-a-9-2ac.e6132cbe30a884a62018.js"],"content---docs-guides-tutoriale-53-6ab":["/content---docs-guides-tutoriale-53-6ab.b35f6bf3928554740dad.js"],"metadata---docs-guides-tutorial-1-f-1-23b":["/metadata---docs-guides-tutorial-1-f-1-23b.ffe199dc74b1462b11cb.js"],"content---docs-guides-networking-374-03e":["/content---docs-guides-networking-374-03e.6d1bafa13a89dae0bc95.js"],"metadata---docs-guides-networkingdfd-ce0":["/metadata---docs-guides-networkingdfd-ce0.368b614be03a050c631f.js"],"content---docs-guides-nodegui-architecture-262-19e":["/content---docs-guides-nodegui-architecture-262-19e.47eba35fe493ed03e2c7.js"],"metadata---docs-guides-nodegui-architecture-550-b82":["/metadata---docs-guides-nodegui-architecture-550-b82.b594e6687cc37be69cb8.js"],"content---docs-guides-stylingfec-977":["/content---docs-guides-stylingfec-977.63a50b46dba99c94a4ed.js"],"metadata---docs-guides-styling-9-ea-213":["/metadata---docs-guides-styling-9-ea-213.818c1fa17aa62a091b0a.js"],"content---docs-guides-using-native-node-modules-3-ab-104":["/content---docs-guides-using-native-node-modules-3-ab-104.1efbefcc3ddc283d0c81.js"],"metadata---docs-guides-using-native-node-modules-31-f-551":["/metadata---docs-guides-using-native-node-modules-31-f-551.ec0eb319d94123d20db5.js"],"content---docs-mdxce-3-7d1":["/content---docs-mdxce-3-7d1.4f1fe676030f8efe010c.js"],"metadata---docs-mdx-786-f56":["/metadata---docs-mdx-786-f56.61861d41ff50cfd8c9e4.js"],"component---theme-blog-tags-posts-page-687-b6c":["/component---theme-blog-tags-posts-page-687-b6c.ef5908bc39eb09e95ce4.js"],"metadata---blog-tags-nodegui-632-d46":["/metadata---blog-tags-nodegui-632-d46.900f615f420a5e1fa2ba.js"],"metadata---blog-tags-hellob-02-3e8":["/metadata---blog-tags-hellob-02-3e8.94799fd06d2ac9e5f2fc.js"],"component---theme-blog-tags-list-page-01-a-d0b":["/component---theme-blog-tags-list-page-01-a-d0b.3c076102240034124342.js"],"tags---blog-tags-8-d-7-36d":["/tags---blog-tags-8-d-7-36d.b0b8e5864a4a247d36f9.js"]};/*]]>*/</script>
|
|
|
|
<title data-react-helmet="true">signal_and_event_handling</title>
|
|
|
|
<meta data-react-helmet="true" charset="utf-8"/><meta data-react-helmet="true" http-equiv="x-ua-compatible" content="ie=edge"/><meta data-react-helmet="true" name="viewport" content="width=device-width"/><meta data-react-helmet="true" property="og:title" content="signal_and_event_handling"/><meta data-react-helmet="true" name="description" content="# Event handling"/><meta data-react-helmet="true" property="og:description" content="# Event handling"/><meta data-react-helmet="true" property="og:url" content="https://nodegui.org/docs/development/signal_and_event_handling"/><meta data-react-helmet="true" name="twitter:card" content="summary"/>
|
|
|
|
<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"/>
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/main.f66713773e9ba37b90fe.css" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="/1.196ce05925ea6d776920.css" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="/2.702de9bbb01fe4f46fa1.css" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="/component---theme-doc-legacy-page-9-e-7-ca5.3c38a2f40a51efdd72a0.css" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="/component---theme-doc-legacy-item-031-769.1f1ce10374de019f5d3a.css" />
|
|
|
|
</head>
|
|
<body >
|
|
<div id="__docusaurus">
|
|
<nav class="navbar navbar--light navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a aria-current="page" class="navbar__brand active" href="/"><img class="navbar__logo" src="/img/logo-circle.png" alt="NodeGui Logo"/><strong>NodeGui</strong></a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" label="Docs" position="right" href="/docs/guides/getting-started">Docs</a><a class="navbar__item navbar__link" label="API" position="right" href="/docs/api/QApplication">API</a><a class="navbar__item navbar__link" label="Blog" position="right" href="/blog">Blog</a><a class="navbar__item navbar__link" href="https://github.com/nodegui/nodegui" label="GitHub" position="right" target="_blank" rel="noopener noreferrer">GitHub</a><div class="react-toggle displayOnlyInLargeViewport_1gtM"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_16vC moon_1N64"></span></div><div class="react-toggle-track-x"><span class="toggle_16vC sun_3CZP"></span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"/></div></div></div><div role="presentation" class="navbar__sidebar__backdrop"></div><div class="navbar__sidebar"><div class="navbar__sidebar__brand"><a aria-current="page" class="navbar__brand active" href="/"><img class="navbar__logo" src="/img/logo-circle.png" alt="NodeGui Logo"/><strong>NodeGui</strong></a></div><div class="navbar__sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" label="Docs" position="right" href="/docs/guides/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" label="API" position="right" href="/docs/api/QApplication">API</a></li><li class="menu__list-item"><a class="menu__link" label="Blog" position="right" href="/blog">Blog</a></li><li class="menu__list-item"><a class="menu__link" href="https://github.com/nodegui/nodegui" label="GitHub" position="right" target="_blank" rel="noopener noreferrer">GitHub</a></li></ul></div></div></div></nav><div class="container container--fluid"><div class="row"><div class="col col--3"></div><main class="col"><div><div class="padding-vert--lg"><div class="row"><div class="col"><div class="docItemContainer_3Gws"><header><h1 class="margin-bottom--lg">signal_and_event_handling</h1></header><article><div class="markdown"><h1><a aria-hidden="true" class="anchor" id="event-handling"></a><a aria-hidden="true" class="hash-link" href="#event-handling">#</a>Event handling</h1><p>In Qt you can respond to an external event like a key press via event handling. Events always are processed by the event loop. Alongside events Qt also has a concept of Signals/Slots. Signals and slots are used to primarily communicate between widgets (more precisely QObjects). So the most common way of interacting between Qt Widgets is done through signals/slots. (More details here: <a href="https://doc.qt.io/qt-5/signalsandslots.html">https://doc.qt.io/qt-5/signalsandslots.html</a>). Hence we would be implementing support for both events and signals.</p><p><strong>Technicals:</strong></p><blockquote><p>An event is a message encapsulated in a class (QEvent) which is processed in an event loop and dispatched to a recipient that can either accept the message or pass it along to others to process. They are usually created in response to external system events like mouse clicks.
|
|
Signals and Slots are a convenient way for QObjects to communicate with one another and are more similar to callback functions. In most circumstances, when a "signal" is emitted, any slot function connected to it is called directly. The exception is when signals and slots cross thread boundaries. In this case, the signal will essentially be converted into an event.</p></blockquote><h1><a aria-hidden="true" class="anchor" id="implementing-signal-handling"></a><a aria-hidden="true" class="hash-link" href="#implementing-signal-handling">#</a>Implementing Signal handling</h1><p>In Qt signals and slots are used to communicate between different qt widgets. So they can be used to implement things like
|
|
onClick, onHover etc.</p><p>The way Qt Signals work is explained here:</p><p><a href="https://doc.qt.io/qt-5/signalsandslots.html">https://doc.qt.io/qt-5/signalsandslots.html</a></p><p>The way you use them in Qt for a PushButton is explained here:
|
|
<a href="https://wiki.qt.io/How_to_Use_QPushButton#Signals">https://wiki.qt.io/How_to_Use_QPushButton#Signals</a></p><h1><a aria-hidden="true" class="anchor" id="adding-signalevent-handling-support-to-a-nodewidget"></a><a aria-hidden="true" class="hash-link" href="#adding-signalevent-handling-support-to-a-nodewidget">#</a>Adding signal/event handling support to a NodeWidget</h1><p>We will take the example of PushButton</p><p><strong>Javascript</strong></p><p>Steps:</p><p>The widget should inherit from <code>NodeWidget</code>. NodeWidget inherits from EventWidget internally. EventWidget constructor needs native object while initialising. So arrange your code such that native object gets initialised before calling <code>super(native)</code>.</p><p>EventWidget adds <code>addEventListener</code> method to the widget which can be called
|
|
like this:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-js codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">addEventListener</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">"clicked"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:rgb(127, 219, 202)">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">"clicked"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>To help the user know what all signals/events are supported, export an enum like <code>QPushButtonEvents</code> as shown below.</p><p>So the user can then use it as below:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-js codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">addEventListener</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token maybe-class-name">QPushButtonEvents</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">clicked</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:rgb(127, 219, 202)">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token console class-name" style="color:rgb(255, 203, 139)">console</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">log</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">"clicked"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>Example:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-js codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token keyword module" style="color:rgb(127, 219, 202)">import</span><span class="token plain"> addon </span><span class="token keyword module" style="color:rgb(127, 219, 202)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"../../core/addon"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword module" style="color:rgb(127, 219, 202)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> </span><span class="token maybe-class-name">NodeWidget</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(127, 219, 202)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"../../QtGui/QWidget"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword module" style="color:rgb(127, 219, 202)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> </span><span class="token maybe-class-name">BaseWidgetEvents</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(127, 219, 202)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"../../core/EventWidget"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword module" style="color:rgb(127, 219, 202)">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> </span><span class="token maybe-class-name">QPushButtonEvents</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:rgb(255, 203, 139)">Object</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">freeze</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token spread operator" style="color:rgb(127, 219, 202)">...</span><span class="token maybe-class-name">BaseWidgetEvents</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> clicked</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"clicked"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> pressed</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"pressed"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> released</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"released"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> toggled</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"toggled"</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword module" style="color:rgb(127, 219, 202)">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">class</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">QPushButton</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">extends</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">NodeWidget</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> native</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token maybe-class-name">NativeElement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">constructor</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token parameter">parent</span><span class="token parameter operator" style="color:rgb(127, 219, 202)">?</span><span class="token parameter punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token parameter"> NodeWidget</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">let</span><span class="token plain"> native</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">if</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">parent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> native </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">addon</span><span class="token class-name punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token class-name" style="color:rgb(255, 203, 139)">QPushButton</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">parent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">native</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">else</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> native </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">addon</span><span class="token class-name punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token class-name" style="color:rgb(255, 203, 139)">QPushButton</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">super</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">native</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">this</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">parent</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> parent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">this</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">native</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> native</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// bind member functions</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">this</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">setText</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">bind</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword" style="color:rgb(127, 219, 202)">this</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">setText</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token parameter">text</span><span class="token parameter punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token parameter"> string </span><span class="token parameter operator" style="color:rgb(127, 219, 202)">|</span><span class="token parameter"> number</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">this</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">native</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">setText</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token template-string string" style="color:rgb(173, 219, 103)">`</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">${</span><span class="token template-string interpolation">text</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token template-string string" style="color:rgb(173, 219, 103)">`</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p><strong>C++</strong></p><p>Steps:</p><ol><li><code>NPushButton</code></li></ol><p>Inherit from both QPushButton and NodeWidget. Make sure you have added NODEWIDGET_IMPLEMENTATIONS macro. This adds a crucial method for events support. It will override <code>event(QEvent *)</code> method of QPushbutton so that nodejs can listen to the events of this widget. This makes sure we convert all the QEvent's of this widget to an event for the nodejs event emitter.</p><p>Also make sure to connect all the signals of the widgets to the event emitter instance from NodeJS. This way we kindof convert the signal to a simple nodejs event.</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-cpp codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token macro property" style="color:rgb(128, 203, 196)">#</span><span class="token macro property directive keyword" style="color:rgb(127, 219, 202)">pragma</span><span class="token macro property" style="color:rgb(128, 203, 196)"> once</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token macro property" style="color:rgb(128, 203, 196)">#</span><span class="token macro property directive keyword" style="color:rgb(127, 219, 202)">include</span><span class="token macro property" style="color:rgb(128, 203, 196)"> </span><span class="token macro property string" style="color:rgb(173, 219, 103)"><QPushButton></span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token macro property" style="color:rgb(128, 203, 196)">#</span><span class="token macro property directive keyword" style="color:rgb(127, 219, 202)">include</span><span class="token macro property" style="color:rgb(128, 203, 196)"> </span><span class="token macro property string" style="color:rgb(173, 219, 103)">"src/cpp/core/NodeWidget/nodewidget.h"</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token macro property" style="color:rgb(128, 203, 196)">#</span><span class="token macro property directive keyword" style="color:rgb(127, 219, 202)">include</span><span class="token macro property" style="color:rgb(128, 203, 196)"> </span><span class="token macro property string" style="color:rgb(173, 219, 103)">"napi.h"</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">class</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 139)">NPushButton</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">public</span><span class="token plain"> QPushButton</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">public</span><span class="token plain"> NodeWidget</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">NODEWIDGET_IMPLEMENTATIONS</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">QPushButton</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">public</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">using</span><span class="token plain"> QPushButton</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">QPushButton</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">//inherit all constructors of QPushButton</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// override this method and implement all signals here</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">void</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">connectWidgetSignalsToEventEmitter</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// Qt Connects: Implement all signal connects here</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> QObject</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token function" style="color:rgb(130, 170, 255)">connect</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword" style="color:rgb(127, 219, 202)">this</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">&</span><span class="token plain">QPushButton</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">clicked</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword" style="color:rgb(127, 219, 202)">bool</span><span class="token plain"> checked</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> Napi</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">Env env </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">this</span><span class="token operator" style="color:rgb(127, 219, 202)">-></span><span class="token plain">emitOnNode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">Env</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> Napi</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">HandleScope </span><span class="token function" style="color:rgb(130, 170, 255)">scope</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">env</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">this</span><span class="token operator" style="color:rgb(127, 219, 202)">-></span><span class="token plain">emitOnNode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">Call</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Napi</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">String</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token function" style="color:rgb(130, 170, 255)">New</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">env</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"clicked"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Napi</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">Value</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token function" style="color:rgb(130, 170, 255)">From</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">env</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> checked</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> QObject</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token function" style="color:rgb(130, 170, 255)">connect</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword" style="color:rgb(127, 219, 202)">this</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">&</span><span class="token plain">QPushButton</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">released</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> Napi</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">Env env </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">this</span><span class="token operator" style="color:rgb(127, 219, 202)">-></span><span class="token plain">emitOnNode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">Env</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> Napi</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">HandleScope </span><span class="token function" style="color:rgb(130, 170, 255)">scope</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">env</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">this</span><span class="token operator" style="color:rgb(127, 219, 202)">-></span><span class="token plain">emitOnNode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">Call</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Napi</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">String</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token function" style="color:rgb(130, 170, 255)">New</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">env</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"released"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> QObject</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token function" style="color:rgb(130, 170, 255)">connect</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword" style="color:rgb(127, 219, 202)">this</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">&</span><span class="token plain">QPushButton</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">pressed</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> Napi</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">Env env </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">this</span><span class="token operator" style="color:rgb(127, 219, 202)">-></span><span class="token plain">emitOnNode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">Env</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> Napi</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">HandleScope </span><span class="token function" style="color:rgb(130, 170, 255)">scope</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">env</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">this</span><span class="token operator" style="color:rgb(127, 219, 202)">-></span><span class="token plain">emitOnNode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">Call</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Napi</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">String</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token function" style="color:rgb(130, 170, 255)">New</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">env</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"pressed"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> QObject</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token function" style="color:rgb(130, 170, 255)">connect</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword" style="color:rgb(127, 219, 202)">this</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">&</span><span class="token plain">QPushButton</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">toggled</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword" style="color:rgb(127, 219, 202)">bool</span><span class="token plain"> checked</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> Napi</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">Env env </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">this</span><span class="token operator" style="color:rgb(127, 219, 202)">-></span><span class="token plain">emitOnNode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">Env</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> Napi</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">HandleScope </span><span class="token function" style="color:rgb(130, 170, 255)">scope</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">env</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">this</span><span class="token operator" style="color:rgb(127, 219, 202)">-></span><span class="token plain">emitOnNode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token function" style="color:rgb(130, 170, 255)">Call</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> Napi</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">String</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token function" style="color:rgb(130, 170, 255)">New</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">env</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"toggled"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Napi</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token plain">Value</span><span class="token operator" style="color:rgb(127, 219, 202)">::</span><span class="token function" style="color:rgb(130, 170, 255)">From</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">env</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> checked</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p><strong>Additional</strong></p><p>Make sure <code>npushbutton.h</code> is added to <code>config/moc.json</code>.
|
|
And run <code>npm run automoc</code> before running <code>npm run build:addon</code></p><p>We need to run Qt's MOC (Meta Object Compiler) on the file whenever we use Q_OBJECT in a class or use QObject::connect. This is so that Qt can expand the macros and add necessary implementations to our class.</p><h1><a aria-hidden="true" class="anchor" id="how-does-it-work-"></a><a aria-hidden="true" class="hash-link" href="#how-does-it-work-">#</a>How does it work ?</h1><ol><li>On JS side for each widget instance we create an instance of NodeJS's Event Emitter. This is done by the class <code>EventWidget</code> from which <code>NodeWidget</code> inherits</li><li>We send this event emiiter's <code>emit</code> function to the C++ side by calling <code>initNodeEventEmitter</code> method and store a pointer to the event emitter's emit function using <code>emitOnNode</code>. initNodeEventEmitter function is added by a macro from EventWidget (c++). You can find the initNodeEventEmitter method with the event widget macros.</li><li>We setup Qt's connect method for all the signals that we want to listen to and call the emitOnNode (which is actually emit from Event emitter) whenever a signal arrives. This is done manually on every widget by overriding the method <code>connectWidgetSignalsToEventEmitter</code>. Check <code>npushbutton.h</code> for details. This takes care of all the signals of the widgets. Now to export all qt events of the widget, we had overriden the widgets <code>event(Event*)</code> method to listen to events received by the widget and send it to the event emitter. This is done inside the EVENTWIDGET_IMPLEMENTATIONS macro</li></ol></div></article><div class="margin-top--xl margin-bottom--lg"><nav class="pagination-nav"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_2wxO"></div></div></div></div></div></main></div></div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="/runtime~main.ba7378f2c7d4a1c03261.js"></script>
|
|
|
|
<script type="text/javascript" src="/main.df23129c6a8dca8ab908.js"></script>
|
|
|
|
<script type="text/javascript" src="/0.137079c7c6dfa44cbb19.js"></script>
|
|
|
|
<script type="text/javascript" src="/1.b3b40754e56fe7b933e8.js"></script>
|
|
|
|
<script type="text/javascript" src="/2.4dcc84845bb42710969e.js"></script>
|
|
|
|
<script type="text/javascript" src="/component---theme-doc-legacy-page-9-e-7-ca5.f5d90ad6613508f9bb4b.js"></script>
|
|
|
|
<script type="text/javascript" src="/docsMetadata---docs-150-2d6.dbac39bfa2e3d6968559.js"></script>
|
|
|
|
<script type="text/javascript" src="/component---theme-doc-legacy-item-031-769.89c72f3cd114f0722210.js"></script>
|
|
|
|
<script type="text/javascript" src="/content---docs-development-signal-and-event-handling-7-d-4-f3f.8f1478c9222a4363963f.js"></script>
|
|
|
|
<script type="text/javascript" src="/metadata---docs-development-signal-and-event-handling-0-b-5-692.96786c0bf5b413a0c737.js"></script>
|
|
|
|
</body>
|
|
</html> |