Deploy website - based on bd6b127358

2021-09-20 19:53:27 +00:00
parent ac1e770078
commit 0494dd8748
1193 changed files with 9222 additions and 9144 deletions
@@ -8,17 +8,17 @@
 <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>
 <link rel="search" type="application/opensearchdescription+xml" title="NodeGui" href="/opensearch.xml"><title data-react-helmet="true">getting-started | NodeGui</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="getting-started | NodeGui"><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 data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="true"><link data-react-helmet="true" rel="canonical" href="https://nodegui.org/docs/development/getting-started"><link rel="stylesheet" href="/styles.920797bd.css">
-<link rel="preload" href="/styles.63d28092.js" as="script">
-<link rel="preload" href="/runtime~main.a97342d0.js" as="script">
-<link rel="preload" href="/main.8f481a34.js" as="script">
-<link rel="preload" href="/1.edb7cb6f.js" as="script">
-<link rel="preload" href="/2.43bcc01f.js" as="script">
-<link rel="preload" href="/3.f09e663b.js" as="script">
-<link rel="preload" href="/1be78505.9d86a6af.js" as="script">
-<link rel="preload" href="/400.1e25fc4f.js" as="script">
-<link rel="preload" href="/935f2afb.62311e6a.js" as="script">
-<link rel="preload" href="/17896441.2d7a8019.js" as="script">
-<link rel="preload" href="/13948826.60833f41.js" as="script">
+<link rel="preload" href="/styles.c64f7c7d.js" as="script">
+<link rel="preload" href="/runtime~main.a862ee9e.js" as="script">
+<link rel="preload" href="/main.d30558ed.js" as="script">
+<link rel="preload" href="/1.c3df9058.js" as="script">
+<link rel="preload" href="/2.73955132.js" as="script">
+<link rel="preload" href="/3.ab57b632.js" as="script">
+<link rel="preload" href="/1be78505.f51e3f10.js" as="script">
+<link rel="preload" href="/402.796e35e3.js" as="script">
+<link rel="preload" href="/935f2afb.3bfe93cd.js" as="script">
+<link rel="preload" href="/17896441.5cec6d39.js" as="script">
+<link rel="preload" href="/13948826.cf124ff1.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
@@ -27,16 +27,16 @@
 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 enhancedAnchor_2cZh" id="wrapping-a-widget"></a>Wrapping a widget<a aria-hidden="true" tabindex="-1" class="hash-link" href="#wrapping-a-widget" title="Direct link to heading">#</a></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><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" 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     &lt;---- Extended QLabel</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">│   ├── nlabel_moc.cpp &lt;--- 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 &lt;--- Wrapper file</span></div></div></div></div></div><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&#x27;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><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" 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 &lt;any_include_file_which_contains_macro&gt;  // example : ../../core/YogaWidget/yogawidget.h</span></div></div></div></div></div><p>So for nlabel I would run it as:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" 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></div></div></div></div><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&#x27;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 enhancedAnchor_2cZh" id="learning-materials"></a>Learning Materials<a aria-hidden="true" tabindex="-1" class="hash-link" href="#learning-materials" title="Direct link to heading">#</a></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" target="_blank" rel="noopener noreferrer">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&amp;feature=youtu.be" target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=-Oniup60Afs&amp;feature=youtu.be</a></li><li>See samples at <a href="https://github.com/nodejs/abi-stable-node-addon-examples/" target="_blank" rel="noopener noreferrer">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/" target="_blank" rel="noopener noreferrer">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--xl"><div class="row"><div class="col"><a href="https://github.com/nodegui/nodegui/edit/master/website/docs/development/getting-started.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><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_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#getting-started" class="table-of-contents__link">Getting started</a></li><li><a href="#code-structure" class="table-of-contents__link">Code Structure</a></li><li><a href="#wrapping-a-widget" class="table-of-contents__link">Wrapping a widget</a></li><li><a href="#learning-materials" class="table-of-contents__link">Learning Materials</a></li></ul></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 href="https://spectrum.chat/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Spectrum</a></li><li class="footer__item"><a href="https://nodegui.slack.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack</a></li><li class="footer__item"><a href="https://twitter.com/node_gui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://medium.com/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">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 href="https://react.nodegui.org" target="_blank" rel="noopener noreferrer" class="footer__link-item">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"><div>Copyright © 2021 NodeGui</div></div></div></footer></div>
-<script src="/styles.63d28092.js"></script>
-<script src="/runtime~main.a97342d0.js"></script>
-<script src="/main.8f481a34.js"></script>
-<script src="/1.edb7cb6f.js"></script>
-<script src="/2.43bcc01f.js"></script>
-<script src="/3.f09e663b.js"></script>
-<script src="/1be78505.9d86a6af.js"></script>
-<script src="/400.1e25fc4f.js"></script>
-<script src="/935f2afb.62311e6a.js"></script>
-<script src="/17896441.2d7a8019.js"></script>
-<script src="/13948826.60833f41.js"></script>
+<script src="/styles.c64f7c7d.js"></script>
+<script src="/runtime~main.a862ee9e.js"></script>
+<script src="/main.d30558ed.js"></script>
+<script src="/1.c3df9058.js"></script>
+<script src="/2.73955132.js"></script>
+<script src="/3.ab57b632.js"></script>
+<script src="/1be78505.f51e3f10.js"></script>
+<script src="/402.796e35e3.js"></script>
+<script src="/935f2afb.3bfe93cd.js"></script>
+<script src="/17896441.5cec6d39.js"></script>
+<script src="/13948826.cf124ff1.js"></script>
 </body>
 </html>