1 line
13 KiB
JavaScript
1 line
13 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{468:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));var a=n(0),i=n.n(a);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function d(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var s=i.a.createContext({}),c=function(e){var t=i.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=c(e.components);return i.a.createElement(s.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return i.a.createElement(i.a.Fragment,{},t)}},u=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,r=e.parentName,s=d(e,["components","mdxType","originalType","parentName"]),p=c(n),u=a,m=p["".concat(r,".").concat(u)]||p[u]||b[u]||o;return n?i.a.createElement(m,l(l({ref:t},s),{},{components:n})):i.a.createElement(m,l({ref:t},s))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,r=new Array(o);r[0]=u;var l={};for(var d in t)hasOwnProperty.call(t,d)&&(l[d]=t[d]);l.originalType=e,l.mdxType="string"==typeof e?e:a,r[1]=l;for(var s=2;s<o;s++)r[s]=n[s];return i.a.createElement.apply(null,r)}return i.a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},94:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return r})),n.d(t,"metadata",(function(){return l})),n.d(t,"rightToc",(function(){return d})),n.d(t,"default",(function(){return c}));var a=n(2),i=n(6),o=(n(0),n(468)),r={},l={unversionedId:"development/getting-started",id:"development/getting-started",isDocsHomePage:!1,title:"getting-started",description:"Getting started",source:"@site/docs/development/getting-started.md",slug:"/development/getting-started",permalink:"/docs/development/getting-started",editUrl:"https://github.com/nodegui/nodegui/edit/master/website/docs/development/getting-started.md",version:"current"},d=[{value:"Getting started",id:"getting-started",children:[]},{value:"Code Structure",id:"code-structure",children:[]},{value:"Wrapping a widget",id:"wrapping-a-widget",children:[]},{value:"Learning Materials",id:"learning-materials",children:[]}],s={rightToc:d};function c(e){var t=e.components,n=Object(i.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},s,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("h2",{id:"getting-started"},"Getting started"),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"The library depends on ",Object(o.b)("inlineCode",{parentName:"p"},"qode")," 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 ",Object(o.b)("inlineCode",{parentName:"p"},"qode your_file.js")," instead of ",Object(o.b)("inlineCode",{parentName:"p"},"node your_file.js"),"."),Object(o.b)("p",null,"Qode is inspired by this post by ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://github.com/zcbenz"}),"Cheng Zhao"),": ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://electronjs.org/blog/electron-internals-node-integration"}),"https://electronjs.org/blog/electron-internals-node-integration")),Object(o.b)("p",null,"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."),Object(o.b)("h2",{id:"code-structure"},"Code Structure"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{}),".\n\u251c\u2500\u2500 binding.gyp\n\u251c\u2500\u2500 config\n\u251c\u2500\u2500 demo.ts\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 src\n\u2502\xa0\xa0 \u251c\u2500\u2500 cpp <-- C++ source code\n\u2502\xa0\xa0 \u2514\u2500\u2500 lib <-- Typescript source code\n\u251c\u2500\u2500 tsconfig.json\n\u2514\u2500\u2500 yarn.lock\n")),Object(o.b)("p",null,"The main folder is ",Object(o.b)("inlineCode",{parentName:"p"},"src"),". It contains"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"cpp")," : 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."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"lib")," : This folder contains all the Typescript code of the library. This is used to add additonal helper methods and types to exported addon.")),Object(o.b)("p",null,Object(o.b)("strong",{parentName:"p"},"Detailed version:")),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{}),".\n\u251c\u2500\u2500 binding.gyp\n\u251c\u2500\u2500 config\n\u2502\xa0\xa0 \u251c\u2500\u2500 application.gypi\n\u2502\xa0\xa0 \u251c\u2500\u2500 common.gypi\n\u2502\xa0\xa0 \u2514\u2500\u2500 yoga.gypi\n\u251c\u2500\u2500 demo.ts\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 src\n\u2502\xa0\xa0 \u251c\u2500\u2500 cpp\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 Extras\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 QtGui <------ All exported classes found inside Qts Gui dynamic library\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 QtWidgets <------ All exported classes found inside Qts Widgets dynamic library\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u251c\u2500\u2500 core\n\u2502\xa0\xa0 \u2502\xa0\xa0 \u2514\u2500\u2500 main.cpp\n\u2502\xa0\xa0 \u2514\u2500\u2500 lib\n\u2502\xa0\xa0 \u251c\u2500\u2500 QtGui\n\u2502\xa0\xa0 \u251c\u2500\u2500 QtWidgets\n\u2502\xa0\xa0 \u2514\u2500\u2500 core\n\u251c\u2500\u2500 tsconfig.json\n\u2514\u2500\u2500 yarn.lock\n\n")),Object(o.b)("p",null,"First step to seeing how everything works is to take a look at ",Object(o.b)("inlineCode",{parentName:"p"},"demo.ts")," file. This file is basically like a Kitchen application showcasing all the exported widgets currently with the library."),Object(o.b)("p",null,"Make sure you have read how to write native NodeJS Addons blog first. ",Object(o.b)("a",Object(a.a)({parentName:"p"},{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")),Object(o.b)("p",null,"Once you have done that check out ",Object(o.b)("inlineCode",{parentName:"p"},"src/cpp/main.cpp")," and ",Object(o.b)("inlineCode",{parentName:"p"},"config/application.gypi")," to see the list of exported C++ classes."),Object(o.b)("p",null,"Then maybe you can take a look at ",Object(o.b)("inlineCode",{parentName:"p"},"src/cpp/QtWidgets/QLabel/qlabel_wrap.h"),". This will show you how to wrap a simple Qt Widget.\nCheck the corresponding JS file for the addon here ",Object(o.b)("inlineCode",{parentName:"p"},"src/lib/QtWidgets/QLabel/index.ts"),"."),Object(o.b)("h2",{id:"wrapping-a-widget"},"Wrapping a widget"),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"Taking the example of QLabel, if you look inside the directory ",Object(o.b)("inlineCode",{parentName:"p"},"src/cpp/QtWidgets/QLabel"),", you should see:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{}),"\u251c\u2500\u2500 QLabel\n\u2502\xa0\xa0 \u251c\u2500\u2500 nlabel.cpp\n\u2502\xa0\xa0 \u251c\u2500\u2500 nlabel.h <---- Extended QLabel\n\u2502\xa0\xa0 \u251c\u2500\u2500 nlabel_moc.cpp <--- Autogenerated file by qt moc.\n\u2502\xa0\xa0 \u251c\u2500\u2500 qlabel_wrap.cpp\n\u2502\xa0\xa0 \u2514\u2500\u2500 qlabel_wrap.h <--- Wrapper file\n")),Object(o.b)("p",null,"The idea is :"),Object(o.b)("ol",null,Object(o.b)("li",{parentName:"ol"},"We will first extend QLabel class to form NLabel. NLabel is basically QLabel with some extra methods and variables. More on it below."),Object(o.b)("li",{parentName:"ol"},"Then we will use NLabel and wrap it using NAPI and export it to JS side. This is what qlabel_wrap does.")),Object(o.b)("p",null,Object(o.b)("strong",{parentName:"p"},"NLabel"),": 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.\nSo if you take a look at NLabel you will see, it inherits from QLabel and QWidget. QWidget in turn 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"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{}),"moc headername.h -o headername_moc.cpp --include <any_include_file_which_contains_macro> // example : ../../core/YogaWidget/yogawidget.h\n")),Object(o.b)("p",null,"So for nlabel I would run it as:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{}),"moc nlabel.h -o nlabel_moc.cpp --include ../../core/YogaWidget/yogawidget.h\n")),Object(o.b)("p",null,"This will run moc on ",Object(o.b)("inlineCode",{parentName:"p"},"headername.h")," and generate ",Object(o.b)("inlineCode",{parentName:"p"},"headername_moc.cpp"),". We will include ",Object(o.b)("inlineCode",{parentName:"p"},"headername_moc.cpp")," in ",Object(o.b)("inlineCode",{parentName:"p"},"config/moc.gypi"),". If you dont do this. Then it will give a symbol not found error."),Object(o.b)("p",null,"I hope QLabel's example is enough for now. For more examples and inspirations we can take a look at other wrapped widgets."),Object(o.b)("h2",{id:"learning-materials"},"Learning Materials"),Object(o.b)("ol",null,Object(o.b)("li",{parentName:"ol"},"Beginners guide to NodeJS Addon - ",Object(o.b)("a",Object(a.a)({parentName:"li"},{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")),Object(o.b)("li",{parentName:"ol"},"First read this: N-API in nodejs docs"),Object(o.b)("li",{parentName:"ol"},Object(o.b)("a",Object(a.a)({parentName:"li"},{href:"https://www.youtube.com/watch?v=-Oniup60Afs&feature=youtu.be"}),"https://www.youtube.com/watch?v=-Oniup60Afs&feature=youtu.be")),Object(o.b)("li",{parentName:"ol"},"See samples at ",Object(o.b)("a",Object(a.a)({parentName:"li"},{href:"https://github.com/nodejs/abi-stable-node-addon-examples/"}),"https://github.com/nodejs/abi-stable-node-addon-examples/"),"\n4.1. You can see the readme of ",Object(o.b)("a",Object(a.a)({parentName:"li"},{href:"https://github.com/nodejs/node-addon-api.git/"}),"https://github.com/nodejs/node-addon-api.git/")),Object(o.b)("li",{parentName:"ol"},"See node-qt implementation. It is implemented in Nan (explained in video)."),Object(o.b)("li",{parentName:"ol"},"Now try to match the implementation in node-qt and convert to N-API using examples from samples."),Object(o.b)("li",{parentName:"ol"},"Implementations not in node-qt need to be done with effort.")))}c.isMDXComponent=!0}}]); |