74 lines
30 KiB
HTML
74 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width">
|
|
<meta name="generator" content="Docusaurus">
|
|
<link rel="preconnect" href="https://www.google-analytics.com">
|
|
<script>
|
|
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
|
ga('create', 'UA-145065218-1', 'auto');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
|
<script type="text/javascript">/*<![CDATA[*/window.__chunkMapping={"11792388":["/11792388.7e440284.js"],"13948826":["/13948826.92c72234.js"],"17896441":["/17896441.43c9fee9.js"],"40076401":["/40076401.7f6a5d1c.js"],"42891840":["/42891840.5131d6af.js"],"52178671":["/52178671.5ba0c45f.js"],"53055052":["/53055052.06575247.js"],"69393859":["/69393859.2591c7f7.js"],"86654962":["/86654962.96dd5f9d.js"],"88835996":["/88835996.02d0ce87.js"],"92679803":["/92679803.9e394705.js"],"main":["/main.8c2242c1.js"],"0001a473":["/0001a473.650390e5.js"],"007e03d8":["/007e03d8.e2adc5d5.js"],"00b93e19":["/00b93e19.d53b4ad7.js"],"01057faa":["/01057faa.e43c462e.js"],"0141bf08":["/0141bf08.a3ba09a1.js"],"017bdfe4":["/017bdfe4.8b835591.js"],"01a85c17":["/01a85c17.aaf708ac.js"],"02b0c0b1":["/02b0c0b1.94942ce7.js"],"037c9655":["/037c9655.fe1a58ab.js"],"0480b142":["/0480b142.6c342c50.js"],"062d0342":["/062d0342.42f42306.js"],"07e586ef":["/07e586ef.5c0fbeca.js"],"0880c4c8":["/0880c4c8.96b4ab07.js"],"089cb293":["/089cb293.c2ac581a.js"],"0936d2bb":["/0936d2bb.94d3a942.js"],"09caa999":["/09caa999.63c38eee.js"],"09ff5ec7":["/09ff5ec7.aa156d3f.js"],"0b0a8a39":["/0b0a8a39.c83360da.js"],"0b4669f6":["/0b4669f6.cedebd65.js"],"0c5e58b4":["/0c5e58b4.efb8b3f1.js"],"0cad5f00":["/0cad5f00.a493c4b9.js"],"0d44c937":["/0d44c937.d580d788.js"],"0dba35c1":["/0dba35c1.98a0b442.js"],"0f416dae":["/0f416dae.a386b908.js"],"12f78831":["/12f78831.ca9cde7d.js"],"1490091d":["/1490091d.08b8f456.js"],"149c6335":["/149c6335.4419e836.js"],"152f73ec":["/152f73ec.a9e9fd0b.js"],"1603ce96":["/1603ce96.90f8b160.js"],"1694e1f7":["/1694e1f7.4d9f0bd6.js"],"173131b7":["/173131b7.fb8d4a5c.js"],"1757fe0e":["/1757fe0e.90a5edcd.js"],"17996ea2":["/17996ea2.e70b1d14.js"],"1be78505":["/1be78505.53d87268.js"],"1d5cb24a":["/1d5cb24a.9bf00354.js"],"1e74d529":["/1e74d529.793fe56c.js"],"1ea8896b":["/1ea8896b.caa78f05.js"],"1ec36ce2":["/1ec36ce2.de152de1.js"],"1f0f1362":["/1f0f1362.6ae779d2.js"],"1f7e6144":["/1f7e6144.d51a5592.js"],"1fb6efd6":["/1fb6efd6.1ecfc6b5.js"],"20ac7829":["/20ac7829.723593de.js"],"2132b76e":["/2132b76e.40404457.js"],"223f731e":["/223f731e.00c39f52.js"],"227a5cf6":["/227a5cf6.3de94e22.js"],"22a1b1cc":["/22a1b1cc.d1e0df30.js"],"24b40189":["/24b40189.e9eec96a.js"],"24b87829":["/24b87829.ccf63881.js"],"24cd2b01":["/24cd2b01.b9996909.js"],"24ef1e8a":["/24ef1e8a.a692f5e9.js"],"2622e4c2":["/2622e4c2.b19cf739.js"],"2627f6e3":["/2627f6e3.d9d7bbf7.js"],"2868cdab":["/2868cdab.a276fff4.js"],"28c02e55":["/28c02e55.e179a515.js"],"293d2a98":["/293d2a98.d037e4a3.js"],"2a28d0ad":["/2a28d0ad.b3b151ae.js"],"2ad9a9e0":["/2ad9a9e0.81ccf8c8.js"],"2adb0cd5":["/2adb0cd5.6800bbed.js"],"2ce195d3":["/2ce195d3.ccac3d4f.js"],"2d9e3680":["/2d9e3680.a4ab0bf7.js"],"2da6cb10":["/2da6cb10.ca9e4a47.js"],"2eb139e7":["/2eb139e7.639ab3d7.js"],"2f424c58":["/2f424c58.14c18770.js"],"316396c4":["/316396c4.4557689e.js"],"354fe6c0":["/354fe6c0.bf43252f.js"],"369a3477":["/369a3477.c5bf4e57.js"],"374bc769":["/374bc769.f02a2caa.js"],"3a1a9a84":["/3a1a9a84.9630ea81.js"],"3a6eb64e":["/3a6eb64e.5fb707e3.js"],"3ab0ccbe":["/3ab0ccbe.12b5f25d.js"],"3b5c10d3":["/3b5c10d3.1d89bc22.js"],"3d33ce06":["/3d33ce06.1ededc98.js"],"3dd90d98":["/3dd90d98.2b6ca66b.js"],"3e61aaac":["/3e61aaac.53a94c30.js"],"3eaacf0c":["/3eaacf0c.f0848ff8.js"],"3ec815b7":["/3ec815b7.188f57b1.js"],"3fa4060c":["/3fa4060c.562e4d35.js"],"403d91ca":["/403d91ca.4e2646de.js"],"43d46162":["/43d46162.5ed6081c.js"],"44a5e703":["/44a5e703.459d8d0e.js"],"44d675a6":["/44d675a6.166db5e6.js"],"45d7c4d4":["/45d7c4d4.75e375f0.js"],"463039fd":["/463039fd.1257262f.js"],"48e00576":["/48e00576.b1257ba7.js"],"4ab0abc1":["/4ab0abc1.f4253992.js"],"4c7ce01c":["/4c7ce01c.ab23495c.js"],"4cdd8085":["/4cdd8085.0de16ebe.js"],"52ea576a":["/52ea576a.d8afba7e.js"],"53445d05":["/53445d05.fb58fc81.js"],"53a8fb07":["/53a8fb07.94573fa9.js"],"54f48e4b":["/54f48e4b.8bff40b2.js"],"566d9d67":["/566d9d67.25d1d733.js"],"593467ca":["/593467ca.3ad58130.js"],"59cb824d":["/59cb824d.d9287ecf.js"],"5a35b6ef":["/5a35b6ef.f9832780.js"],"5a516cc9":["/5a516cc9.da88d81c.js"],"5a76f898":["/5a76f898.17254385.js"],"5a80dcbe":["/5a80dcbe.840d79df.js"],"5b6f8408":["/5b6f8408.7c5458bc.js"],"5c49d4a1":["/5c49d4a1.c824789b.js"],"5cd1ab2d":["/5cd1ab2d.e3578bc3.js"],"5cd6db91":["/5cd6db91.2c19432e.js"],"5d8d2b34":["/5d8d2b34.894e67c3.js"],"5df6944c":["/5df6944c.121b6325.js"],"5e0d3b62":["/5e0d3b62.19b66c19.js"],"5fef40eb":["/5fef40eb.449c9108.js"],"6008ae7d":["/6008ae7d.efbf8cb1.js"],"63263d59":["/63263d59.ed7392de.js"],"647d424b":["/647d424b.9514f638.js"],"66ac7865":["/66ac7865.b09cf0f9.js"],"67bdd98f":["/67bdd98f.fef7baa8.js"],"6875c492":["/6875c492.1deab5c1.js"],"68e84ced":["/68e84ced.2868a9e4.js"],"6ac344b5":["/6ac344b5.87495ded.js"],"6c40c174":["/6c40c174.59acf98d.js"],"6c5ad629":["/6c5ad629.7dc1d85a.js"],"6cc6a74c":["/6cc6a74c.0759cdb0.js"],"6d0f34fa":["/6d0f34fa.10871392.js"],"6dbe7991":["/6dbe7991.38cd9b44.js"],"6de941e1":["/6de941e1.ff738227.js"],"6e360cd2":["/6e360cd2.4e2e9bff.js"],"6e3c7c6c":["/6e3c7c6c.5469fff5.js"],"6e81f52a":["/6e81f52a.f086350a.js"],"716fe25c":["/716fe25c.9ed47250.js"],"75bd1277":["/75bd1277.5255579f.js"],"75f3b48f":["/75f3b48f.8d31acb9.js"],"76e4d282":["/76e4d282.434e6c75.js"],"772b9cd8":["/772b9cd8.3488b284.js"],"77cc7010":["/77cc7010.13047d61.js"],"785287ec":["/785287ec.c0e0fcd9.js"],"7a220947":["/7a220947.fda0f1e8.js"],"7ca6bf62":["/7ca6bf62.b99e2887.js"],"7cac9b17":["/7cac9b17.d5a09c1d.js"],"7d47b104":["/7d47b104.4f61f5bb.js"],"7e0e023d":["/7e0e023d.ca821300.js"],"7f1dbeda":["/7f1dbeda.05ebf1cc.js"],"81d6a693":["/81d6a693.55df451b.js"],"83cb68a4":["/83cb68a4.8c2740d0.js"],"840226b4":["/840226b4.d28a4ab3.js"],"84ba09a2":["/84ba09a2.d592bdb4.js"],"84d47485":["/84d47485.36413965.js"],"85f4c856":["/85f4c856.c187e2d4.js"],"86dc5c7e":["/86dc5c7e.f70508fe.js"],"87f8b817":["/87f8b817.d793eae6.js"],"896c2a14":["/896c2a14.c4633672.js"],"897c38f4":["/897c38f4.e4373430.js"],"8aa88fe1":["/8aa88fe1.a5fee847.js"],"8be5b89e":["/8be5b89e.6183f4c5.js"],"8e549720":["/8e549720.20d564db.js"],"8f9b060e":["/8f9b060e.135389ea.js"],"927032bc":["/927032bc.fd6d8919.js"],"9432834c":["/9432834c.6648cb83.js"],"944370a7":["/944370a7.6662b256.js"],"94b701fc":["/94b701fc.e7e9efaf.js"],"95f7b09e":["/95f7b09e.3be295c2.js"],"9657b620":["/9657b620.62241ca1.js"],"96f03c14":["/96f03c14.5d6cabfa.js"],"9772735d":["/9772735d.0d8a2d6c.js"],"9785afe1":["/9785afe1.dde4aeb9.js"],"991d377f":["/991d377f.580b313a.js"],"9b77b32e":["/9b77b32e.0f8da19d.js"],"9bf47bfb":["/9bf47bfb.d81b6e73.js"],"9cc4e8d2":["/9cc4e8d2.4d4db80f.js"],"9da16797":["/9da16797.e3fce101.js"],"9fa47e07":["/9fa47e07.159399e6.js"],"a376eff9":["/a376eff9.c77ec536.js"],"a3e292e3":["/a3e292e3.be154356.js"],"a43ffa27":["/a43ffa27.5c8e57ca.js"],"a6aa9e1f":["/a6aa9e1f.10907053.js"],"a8e72361":["/a8e72361.89583e74.js"],"a9bcb9f7":["/a9bcb9f7.da192d7b.js"],"a9dfb127":["/a9dfb127.76badf3c.js"],"aa47185d":["/aa47185d.448e5060.js"],"af172acd":["/af172acd.311ec57c.js"],"b16f7101":["/b16f7101.32364ecc.js"],"b1939eb5":["/b1939eb5.a844c21f.js"],"b1c5f98c":["/b1c5f98c.a8885482.js"],"b383c38c":["/b383c38c.c2e7c3df.js"],"b540f618":["/b540f618.e38ae3da.js"],"b5abd046":["/b5abd046.d4129fa7.js"],"b66d76c8":["/b66d76c8.15c337b0.js"],"b69287bd":["/b69287bd.2871e6a8.js"],"b8761de2":["/b8761de2.7144674b.js"],"bbb4ffb5":["/bbb4ffb5.344cf769.js"],"bd7838ba":["/bd7838ba.359c915f.js"],"bd83d1d0":["/bd83d1d0.41b4c55c.js"],"bea7bc0f":["/bea7bc0f.61d27141.js"],"bf607f9e":["/bf607f9e.b9fa6c6c.js"],"c274876d":["/c274876d.2b17ceb1.js"],"c3e5fbf8":["/c3e5fbf8.34aa1397.js"],"c45f1431":["/c45f1431.68b0129a.js"],"c4f5d8e4":["/c4f5d8e4.1052b4c2.js"],"c7a2671b":["/c7a2671b.e60ce145.js"],"c9ea0dcf":["/c9ea0dcf.06c1d527.js"],"ca6b9ff5":["/ca6b9ff5.0456232c.js"],"ccc49370":["/ccc49370.e41611cf.js"],"ce40e361":["/ce40e361.e272e65d.js"],"ce893594":["/ce893594.24a4c3ac.js"],"cf238e83":["/cf238e83.7e269dd8.js"],"cf778529":["/cf778529.1cb6dc1b.js"],"cfb7294b":["/cfb7294b.cf1e8446.js"],"d2ea2e18":["/d2ea2e18.5d6751a3.js"],"d340fdaf":["/d340fdaf.3fef1e54.js"],"d4b4cd5f":["/d4b4cd5f.a6f7ec3b.js"],"d5e63a53":["/d5e63a53.5b204cf1.js"],"d64b0c42":["/d64b0c42.df9b9a77.js"],"d73dae61":["/d73dae61.b3c21a6e.js"],"d784af2a":["/d784af2a.5ef2bc5a.js"],"d7902a48":["/d7902a48.a10d0807.js"],"d81c36aa":["/d81c36aa.c877255c.js"],"d8788ddc":["/d8788ddc.ca573557.js"],"d87ea661":["/d87ea661.44a35ef7.js"],"d89dca71":["/d89dca71.786d4ccf.js"],"d952f995":["/d952f995.4072cc94.js"],"dba846ff":["/dba846ff.fef51d36.js"],"dbbcc1c2":["/dbbcc1c2.8d8396c2.js"],"dbc9718b":["/dbc9718b.d7ffafbc.js"],"dc096836":["/dc096836.11f605f9.js"],"dce407ee":["/dce407ee.16dcd070.js"],"de7718ad":["/de7718ad.3e1313d3.js"],"df51e520":["/df51e520.65e7bb02.js"],"df5def62":["/df5def62.8b4ea339.js"],"e2872654":["/e2872654.94c64f56.js"],"e2951a00":["/e2951a00.6ea444ed.js"],"e3d531ce":["/e3d531ce.ddab528e.js"],"e443650a":["/e443650a.df8fcc34.js"],"e4a9c19f":["/e4a9c19f.7e7708e2.js"],"e53e6ac1":["/e53e6ac1.ff9af82e.js"],"e69fe3e4":["/e69fe3e4.00db9707.js"],"e6a2ac3f":["/e6a2ac3f.2faa1ae7.js"],"e71e4b1b":["/e71e4b1b.41ae5677.js"],"e7fb9b42":["/e7fb9b42.86ddf4bf.js"],"e8b1b4a5":["/e8b1b4a5.1a6cbded.js"],"ea13bcd2":["/ea13bcd2.1966ea0c.js"],"ebfacae9":["/ebfacae9.7e2fd920.js"],"ec7aedb5":["/ec7aedb5.3c0e6b0c.js"],"ec8ca3b5":["/ec8ca3b5.d7294d76.js"],"ee501839":["/ee501839.f54c7230.js"],"f15638f7":["/f15638f7.4dbae1f1.js"],"f35cbe23":["/f35cbe23.f73aec39.js"],"f37486e1":["/f37486e1.176cc6c4.js"],"f3f9be1d":["/f3f9be1d.d9952d06.js"],"f548ffdb":["/f548ffdb.4e225cb0.js"],"f5d9c3e0":["/f5d9c3e0.1bf75d82.js"],"f6bcfd73":["/f6bcfd73.a5ca5994.js"],"f7d024b7":["/f7d024b7.660f92d1.js"],"f95c76fe":["/f95c76fe.f9d18e4f.js"],"f9a01c6a":["/f9a01c6a.aa7578c1.js"],"fa39d049":["/fa39d049.f6ace158.js"],"fb0a9752":["/fb0a9752.ad2ba3bc.js"],"fba90ec7":["/fba90ec7.471ac091.js"],"fbe5889e":["/fbe5889e.d4ff16b6.js"],"fd15bc77":["/fd15bc77.fe4d5ce1.js"],"fdb000f9":["/fdb000f9.c20082b2.js"],"fde550ef":["/fde550ef.e0559fe6.js"],"fe10da09":["/fe10da09.16282b85.js"],"fe70a45e":["/fe70a45e.13e841e5.js"],"fece615a":["/fece615a.10442413.js"],"ff5560e0":["/ff5560e0.9150b3a4.js"],"fffa2ffc":["/fffa2ffc.c12dd1bd.js"]};/*]]>*/</script>
|
|
|
|
<title data-react-helmet="true">getting-started</title>
|
|
|
|
<meta data-react-helmet="true" http-equiv="x-ua-compatible" content="ie=edge"/><meta data-react-helmet="true" property="og:title" content="NodeGui · Build performant, native, cross platform desktop apps with JavaScript and CSS 🚀"/><meta data-react-helmet="true" name="twitter:card" content="summary"/><meta data-react-helmet="true" name="description" content="## Getting started"/><meta data-react-helmet="true" property="og:description" content="## Getting started"/><meta data-react-helmet="true" property="og:url" content="https://nodegui.org/docs/development/getting-started"/>
|
|
|
|
<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"/>
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/styles.9a608fff.css" />
|
|
|
|
</head>
|
|
<body >
|
|
<script type="text/javascript">(function() {
|
|
function setDataThemeAttribute(theme) {
|
|
document.querySelector('html').setAttribute('data-theme', theme);
|
|
}
|
|
|
|
var preferDarkQuery = '(prefers-color-scheme: dark)';
|
|
var mql = window.matchMedia(preferDarkQuery);
|
|
var supportsColorSchemeQuery = mql.media === preferDarkQuery;
|
|
var localStorageTheme = null;
|
|
try {
|
|
localStorageTheme = localStorage.getItem('theme');
|
|
} catch (err) {}
|
|
var localStorageExists = localStorageTheme !== null;
|
|
|
|
if (localStorageExists) {
|
|
setDataThemeAttribute(localStorageTheme);
|
|
} else if (supportsColorSchemeQuery && mql.matches) {
|
|
setDataThemeAttribute('dark');
|
|
}
|
|
})();</script>
|
|
<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 class="">NodeGui</strong></a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/guides/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/api/manual/synopsis">API</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a class="navbar__item navbar__link" target="_blank" rel="noopener noreferrer" href="https://github.com/nodegui/nodegui">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_1gtM"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_keGJ moon_1gwN"></span></div><div class="react-toggle-track-x"><span class="toggle_keGJ sun_3CPA"></span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" 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" href="/docs/guides/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/api/manual/synopsis">API</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a class="menu__link" target="_blank" rel="noopener noreferrer" href="https://github.com/nodegui/nodegui">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_1kjD"><main class="docMainContainer_FFX1"><div class="padding-vert--lg"><div class="container"><div class="row"><div class="col"><div class="docItemContainer_2cwg"><article><header><h1 class="docTitle_1vWb">getting-started</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="getting-started"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#getting-started" title="Direct link to heading">#</a>Getting started</h2><p>This library aims to be a nodejs addon which can export Qt Widgets to the Javascript world. By doing so one can develop fully fledged cross platform native GUI applications using only Javascript.</p><p>The library depends on <code>qode</code> which is a lightly modified version of NodeJS. The slight modification was needed to make it work with this addon. In essense, we will do <code>qode your_file.js</code> instead of <code>node your_file.js</code>.</p><p>Qode is inspired by this post by <a href="https://github.com/zcbenz">Cheng Zhao</a>: <a href="https://electronjs.org/blog/electron-internals-node-integration">https://electronjs.org/blog/electron-internals-node-integration</a></p><p>This library does not modify Qt in any way and only use it as it is. This library also dynamically links to Qt. So it needs Qt libs to be installed in your system to work (This is done to keep in compliance with open source LGPL license of Qt). We can think of exporting the required libs later.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="code-structure"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#code-structure" title="Direct link to heading">#</a>Code Structure</h2><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-undefined codeBlock_19pQ" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── binding.gyp</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── config</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── demo.ts</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── package.json</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── src</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ ├── cpp <-- C++ source code</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ └── lib <-- Typescript source code</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── tsconfig.json</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">└── yarn.lock</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>The main folder is <code>src</code>. It contains</p><ul><li><code>cpp</code> : This folder contains all the C++ source code. Basically all the wrapper code using NAPI to export Qt Widgets and other helper functions to Javascript.</li><li><code>lib</code> : This folder contains all the Typescript code of the library. This is used to add additonal helper methods and types to exported addon.</li></ul><p><strong>Detailed version:</strong></p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-undefined codeBlock_19pQ" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── binding.gyp</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── config</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ ├── application.gypi</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ ├── common.gypi</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ └── yoga.gypi</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── demo.ts</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── package.json</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── src</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ ├── cpp</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ │ ├── Extras</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ │ ├── QtGui <------ All exported classes found inside Qts Gui dynamic library</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ │ ├── QtWidgets <------ All exported classes found inside Qts Widgets dynamic library</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ │ ├── core</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ │ └── main.cpp</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ └── lib</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ ├── QtGui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ ├── QtWidgets</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ └── core</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── tsconfig.json</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">└── yarn.lock</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>First step to seeing how everything works is to take a look at <code>demo.ts</code> file. This file is basically like a Kitchen application showcasing all the exported widgets currently with the library.</p><p>Make sure you have read how to write native NodeJS Addons blog first. <a href="https://medium.com/@atulanand94/beginners-guide-to-writing-nodejs-addons-using-c-and-n-api-node-addon-api-9b3b718a9a7f">https://medium.com/@atulanand94/beginners-guide-to-writing-nodejs-addons-using-c-and-n-api-node-addon-api-9b3b718a9a7f</a></p><p>Once you have done that check out <code>src/cpp/main.cpp</code> and <code>config/application.gypi</code> to see the list of exported C++ classes.</p><p>Then maybe you can take a look at <code>src/cpp/QtWidgets/QLabel/qlabel_wrap.h</code>. This will show you how to wrap a simple Qt Widget.
|
|
Check the corresponding JS file for the addon here <code>src/lib/QtWidgets/QLabel/index.ts</code>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="wrapping-a-widget"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#wrapping-a-widget" title="Direct link to heading">#</a>Wrapping a widget</h2><p>Create wrappers for each and every Qt class that you will use with N-API (using node-addon-api since it is c++) and export it onto JS side.</p><p>Taking the example of QLabel, if you look inside the directory <code>src/cpp/QtWidgets/QLabel</code>, you should see:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-undefined codeBlock_19pQ" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── QLabel</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ ├── nlabel.cpp</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ ├── nlabel.h <---- Extended QLabel</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ ├── nlabel_moc.cpp <--- Autogenerated file by qt moc.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ ├── qlabel_wrap.cpp</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│ └── qlabel_wrap.h <--- Wrapper file</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>The idea is :</p><ol><li>We will first extend QLabel class to form NLabel. NLabel is basically QLabel with some extra methods and variables. More on it below.</li><li>Then we will use NLabel and wrap it using NAPI and export it to JS side. This is what qlabel_wrap does.</li></ol><p><strong>NLabel</strong>: Since NLabel has inherited from QLabel we can treat is as QLabel with extra methods and properties. Primary reason to extend QLabel to create NLabel is to add support for Event listeners and CSS styling using Flex.
|
|
So if you take a look at NLabel you will see, it inherits from QLabel and NodeWidget. NodeWidget inturn inherits from YogaWidget and EventWidget. Event widget adds event handling support. YogaWidget is a class that contains the magic that enables a regular Qt Widget to have Yoga node. A Yoga node is an instance used by yoga library to calculate a widgets position on the screen. Yoga is a library that will layout the widget on the screen. To do so we will specify the flex properties like alignitems, justify content, margin, paddings etc on the Yoga node of the widget. Apart from adding yoga node, YogaWidget adds support for specifying those yoga properties via Qt's stylesheet. (This is done by using Q_PROPERTY). To make this work we need to use something called as Q_OBJECT inside the class which is a C++ macro. Q_OBJECT will be expanded to relevant code by the compiler. In Qt whenever we add Q_OBJECT to a header file, we need to use a pre compiler called Qt MOC (Meta Object Compiler). The way we use it is</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-undefined codeBlock_19pQ" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">moc headername.h -o headername_moc.cpp --include <any_include_file_which_contains_macro> // example : ../../core/YogaWidget/yogawidget.h</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>So for nlabel I would run it as:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-undefined codeBlock_19pQ" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">moc nlabel.h -o nlabel_moc.cpp --include ../../core/YogaWidget/yogawidget.h</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>This will run moc on <code>headername.h</code> and generate <code>headername_moc.cpp</code>. We will include <code>headername_moc.cpp</code> in <code>config/moc.gypi</code>. If you dont do this. Then it will give a symbol not found error.</p><p>I hope QLabel's example is enough for now. For more examples and inspirations we can take a look at other wrapped widgets.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="learning-materials"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#learning-materials" title="Direct link to heading">#</a>Learning Materials</h2><ol><li>Beginners guide to NodeJS Addon - <a href="https://medium.com/@atulanand94/beginners-guide-to-writing-nodejs-addons-using-c-and-n-api-node-addon-api-9b3b718a9a7f">https://medium.com/@atulanand94/beginners-guide-to-writing-nodejs-addons-using-c-and-n-api-node-addon-api-9b3b718a9a7f</a></li><li>First read this: N-API in nodejs docs</li><li><a href="https://www.youtube.com/watch?v=-Oniup60Afs&feature=youtu.be">https://www.youtube.com/watch?v=-Oniup60Afs&feature=youtu.be</a></li><li>See samples at <a href="https://github.com/nodejs/abi-stable-node-addon-examples/">https://github.com/nodejs/abi-stable-node-addon-examples/</a>
|
|
4.1. You can see the readme of <a href="https://github.com/nodejs/node-addon-api.git/">https://github.com/nodejs/node-addon-api.git/</a></li><li>See node-qt implementation. It is implemented in Nan (explained in video).</li><li>Now try to match the implementation in node-qt and convert to N-API using examples from samples.</li><li>Implementations not in node-qt need to be done with effort.</li></ol></div></article><div class="margin-vert--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_TbNY"><ul class="contents contents__left-border"><li><a href="#getting-started" class="contents__link">Getting started</a></li><li><a href="#code-structure" class="contents__link">Code Structure</a></li><li><a href="#wrapping-a-widget" class="contents__link">Wrapping a widget</a></li><li><a href="#learning-materials" class="contents__link">Learning Materials</a></li></ul></div></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/guides/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/api/manual/synopsis">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://spectrum.chat/nodegui">Spectrum</a></li><li class="footer__item"><a class="footer__link-item" to="https://twitter.com/node_gui" href="https://twitter.com/node_gui">Twitter</a></li><li class="footer__item"><a class="footer__link-item" to="https://medium.com/nodegui" href="https://medium.com/nodegui">Medium</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a class="footer__link-item" to="https://react.nodegui.org" href="https://react.nodegui.org">React NodeGui</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/faq">FAQ</a></li></ul></div></div><div class="text--center">Copyright © 2020 NodeGui</div></div></footer>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="/styles.76a9b4e3.js"></script>
|
|
|
|
<script type="text/javascript" src="/runtime~main.df8ddab1.js"></script>
|
|
|
|
<script type="text/javascript" src="/main.8c2242c1.js"></script>
|
|
|
|
<script type="text/javascript" src="/1.7a2d70bd.js"></script>
|
|
|
|
<script type="text/javascript" src="/2.a5f88f3e.js"></script>
|
|
|
|
<script type="text/javascript" src="/1be78505.53d87268.js"></script>
|
|
|
|
<script type="text/javascript" src="/20ac7829.723593de.js"></script>
|
|
|
|
<script type="text/javascript" src="/17896441.43c9fee9.js"></script>
|
|
|
|
<script type="text/javascript" src="/13948826.92c72234.js"></script>
|
|
|
|
|
|
</body>
|
|
</html> |