58 lines
32 KiB
HTML
58 lines
32 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.3c22308242e28ead5e64.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.505b05deaa8813d82ea6.js"],"component---theme-blog-post-pageccc-cab":["/component---theme-blog-post-pageccc-cab.eaf730b8c654a212f785.js"],"content---blog-welcome-286-e55":["/content---blog-welcome-286-e55.76c213cf9ce75984ae91.js"],"metadata---blog-welcome-27-a-91f":["/metadata---blog-welcome-27-a-91f.ef07fafa6070c2acef91.js"],"component---theme-blog-list-pagea-6-a-7ba":["/component---theme-blog-list-pagea-6-a-7ba.697ec326a8cebf60b287.js"],"content---blogaf-1-856":["/content---blogaf-1-856.f79900332b57f969c09a.js"],"metadata---blog-83-c-2b0":["/metadata---blog-83-c-2b0.46c7be8f307d8da2c120.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.d31182005d6c21dd63ac.js"],"docsMetadata---docs-150-2d6":["/docsMetadata---docs-150-2d6.6e875209659be13f2970.js"],"component---theme-doc-legacy-item-031-769":["/component---theme-doc-legacy-item-031-769.1f1ce10374de019f5d3a.css","/component---theme-doc-legacy-item-031-769.6e8a6ea08d218712d94a.js"],"content---docs-doc-1-b-2-f-e80":["/content---docs-doc-1-b-2-f-e80.b11e6221286a094dd836.js"],"metadata---docs-doc-12-a-3-5a1":["/metadata---docs-doc-12-a-3-5a1.bb87820e31f222c12801.js"],"content---docs-faq-048-db5":["/content---docs-faq-048-db5.a3f7755c1443136d038e.js"],"metadata---docs-faq-59-d-2b9":["/metadata---docs-faq-59-d-2b9.985713e75ca070fdde14.js"],"content---docs-mdxce-3-7d1":["/content---docs-mdxce-3-7d1.36f8da190939bb0f0b99.js"],"metadata---docs-mdx-786-f56":["/metadata---docs-mdx-786-f56.6c0450d5f4f4bf4b0f24.js"],"content---docs-api-component-4-ef-195":["/content---docs-api-component-4-ef-195.1ebedb4f37e2304eb832.js"],"metadata---docs-api-component-3-e-5-43d":["/metadata---docs-api-component-3-e-5-43d.0893689f20edabdccdd1.js"],"content---docs-api-event-widgetac-6-11b":["/content---docs-api-event-widgetac-6-11b.b87fa94e0cd874003d59.js"],"metadata---docs-api-event-widget-39-a-9ea":["/metadata---docs-api-event-widget-39-a-9ea.34b0ce562deb2ec0ae92.js"],"content---docs-api-flex-layout-3-dc-a16":["/content---docs-api-flex-layout-3-dc-a16.d5ab9ac7b90d9ed88203.js"],"metadata---docs-api-flex-layoutecf-540":["/metadata---docs-api-flex-layoutecf-540.7db8561c2c23b0d92b67.js"],"content---docs-api-node-layoutd-28-11a":["/content---docs-api-node-layoutd-28-11a.f1324fa8676e4bf64b44.js"],"metadata---docs-api-node-layout-1-e-9-c15":["/metadata---docs-api-node-layout-1-e-9-c15.192849fc91407c883037.js"],"content---docs-api-node-widget-080-a39":["/content---docs-api-node-widget-080-a39.e39bcda58fa051ef8f58.js"],"metadata---docs-api-node-widgeta-92-a4f":["/metadata---docs-api-node-widgeta-92-a4f.dc800d76f7062b65b2ed.js"],"content---docs-api-q-abstract-scroll-area-3-e-6-d7f":["/content---docs-api-q-abstract-scroll-area-3-e-6-d7f.ce07722700328be8dfa5.js"],"metadata---docs-api-q-abstract-scroll-area-59-d-279":["/metadata---docs-api-q-abstract-scroll-area-59-d-279.378868b047b4e7fc733c.js"],"content---docs-api-q-abstract-slider-3-e-0-54d":["/content---docs-api-q-abstract-slider-3-e-0-54d.b7e761ae58b36fe089f1.js"],"metadata---docs-api-q-abstract-sliderdfa-ab7":["/metadata---docs-api-q-abstract-sliderdfa-ab7.73efd891b1be587b529b.js"],"content---docs-api-q-applicationd-3-e-0a3":["/content---docs-api-q-applicationd-3-e-0a3.039f8c83760f87eef546.js"],"metadata---docs-api-q-applicationc-1-d-8a4":["/metadata---docs-api-q-applicationc-1-d-8a4.dba24314be49483727c4.js"],"content---docs-api-q-check-boxd-9-b-c95":["/content---docs-api-q-check-boxd-9-b-c95.54af9594d82de2f1c65c.js"],"metadata---docs-api-q-check-box-132-293":["/metadata---docs-api-q-check-box-132-293.363eb2c9b2bdc95e76bb.js"],"content---docs-api-q-clipboard-69-d-2ef":["/content---docs-api-q-clipboard-69-d-2ef.2facddd2ce7d03c7d364.js"],"metadata---docs-api-q-clipboard-486-b21":["/metadata---docs-api-q-clipboard-486-b21.5efa03bad36d45e62cbe.js"],"content---docs-api-q-cursor-362-d51":["/content---docs-api-q-cursor-362-d51.72e3b873d390560e1917.js"],"metadata---docs-api-q-cursor-887-11e":["/metadata---docs-api-q-cursor-887-11e.af1b21b104f06148557b.js"],"content---docs-api-q-dial-80-b-99a":["/content---docs-api-q-dial-80-b-99a.facd48a52570d2fd7472.js"],"metadata---docs-api-q-dialbfb-aef":["/metadata---docs-api-q-dialbfb-aef.e5ded32011b7d6927cdc.js"],"content---docs-api-q-grid-layouta-4-e-552":["/content---docs-api-q-grid-layouta-4-e-552.f8384f91986e144a1e06.js"],"metadata---docs-api-q-grid-layout-7-db-030":["/metadata---docs-api-q-grid-layout-7-db-030.f3764e551a2bc1cf18a8.js"],"content---docs-api-q-icone-5-f-b0d":["/content---docs-api-q-icone-5-f-b0d.016d00e28e5a87f3cf94.js"],"metadata---docs-api-q-icone-6-d-093":["/metadata---docs-api-q-icone-6-d-093.1c4c72d6ff116744c296.js"],"content---docs-api-q-label-2-f-9-04b":["/content---docs-api-q-label-2-f-9-04b.9f8c2e203f083cedfdf8.js"],"metadata---docs-api-q-label-165-210":["/metadata---docs-api-q-label-165-210.1dba411adf86a92ae91f.js"],"content---docs-api-q-line-editea-0-53d":["/content---docs-api-q-line-editea-0-53d.f606b13ced935ec46509.js"],"metadata---docs-api-q-line-edit-13-f-b8a":["/metadata---docs-api-q-line-edit-13-f-b8a.df4fef6cc6001cbc07a7.js"],"content---docs-api-q-main-window-0-e-7-299":["/content---docs-api-q-main-window-0-e-7-299.7a1bf20062e23ed6c510.js"],"metadata---docs-api-q-main-window-04-f-efb":["/metadata---docs-api-q-main-window-04-f-efb.699f6e2eb1ac78330311.js"],"content---docs-api-q-pixmap-8-dd-cb2":["/content---docs-api-q-pixmap-8-dd-cb2.343e5d75db3125ddfa81.js"],"metadata---docs-api-q-pixmapfdf-820":["/metadata---docs-api-q-pixmapfdf-820.087e26967d50eb06140d.js"],"content---docs-api-q-plain-text-edit-7-c-8-081":["/content---docs-api-q-plain-text-edit-7-c-8-081.f6a618e75ea9b4f15f6b.js"],"metadata---docs-api-q-plain-text-edit-161-ecc":["/metadata---docs-api-q-plain-text-edit-161-ecc.e89eb96f17b29e76629e.js"],"content---docs-api-q-progress-barc-46-afe":["/content---docs-api-q-progress-barc-46-afe.2a5c874c4e33ecb7a2b8.js"],"metadata---docs-api-q-progress-bar-43-d-07e":["/metadata---docs-api-q-progress-bar-43-d-07e.a527e07318808cde454e.js"],"content---docs-api-q-push-button-06-c-73e":["/content---docs-api-q-push-button-06-c-73e.9e1e6d8a0e7c17941efd.js"],"metadata---docs-api-q-push-button-96-d-c92":["/metadata---docs-api-q-push-button-96-d-c92.b15a45966fb25f5f9917.js"],"content---docs-api-q-radio-buttone-54-746":["/content---docs-api-q-radio-buttone-54-746.0eceb96f43e589853010.js"],"metadata---docs-api-q-radio-button-367-f7c":["/metadata---docs-api-q-radio-button-367-f7c.11484c432455585a7ef3.js"],"content---docs-api-q-scroll-area-8-c-4-3fd":["/content---docs-api-q-scroll-area-8-c-4-3fd.fd580650b1d2ac9eee33.js"],"metadata---docs-api-q-scroll-area-46-a-96e":["/metadata---docs-api-q-scroll-area-46-a-96e.a5c480374e3f8b5fcea2.js"],"content---docs-api-q-spin-box-1-ce-bfd":["/content---docs-api-q-spin-box-1-ce-bfd.fc03e9106b39d9c9e23c.js"],"metadata---docs-api-q-spin-box-809-ae0":["/metadata---docs-api-q-spin-box-809-ae0.1fcda0244eebb91ff1bf.js"],"content---docs-api-q-tab-widget-508-95e":["/content---docs-api-q-tab-widget-508-95e.b35876b3da49da08bcb5.js"],"metadata---docs-api-q-tab-widgetebc-5aa":["/metadata---docs-api-q-tab-widgetebc-5aa.558f01cb9860e9184f4f.js"],"content---docs-api-q-widget-04-a-59f":["/content---docs-api-q-widget-04-a-59f.789a0ca241a0fb6ad49d.js"],"metadata---docs-api-q-widget-287-e6c":["/metadata---docs-api-q-widget-287-e6c.1a1aa4d570d756d63bb4.js"],"content---docs-api-qt-enumsfd-7-cf3":["/content---docs-api-qt-enumsfd-7-cf3.1eed426a340d4c937b0a.js"],"metadata---docs-api-qt-enums-423-cf9":["/metadata---docs-api-qt-enums-423-cf9.fb1940e1fff15d344906.js"],"content---docs-api-yoga-widgeta-42-cc7":["/content---docs-api-yoga-widgeta-42-cc7.d048cabe40533b903ea2.js"],"metadata---docs-api-yoga-widget-95-c-f8b":["/metadata---docs-api-yoga-widget-95-c-f8b.bdbc70e8a3ba6a1d1808.js"],"content---docs-api-process-5-ec-b1e":["/content---docs-api-process-5-ec-b1e.81baa4658f7e9a835392.js"],"metadata---docs-api-process-32-d-09e":["/metadata---docs-api-process-32-d-09e.9dd820231565148c88a2.js"],"content---docs-api-synopsis-7-bb-e1c":["/content---docs-api-synopsis-7-bb-e1c.2cede4e9cd42a20dcab1.js"],"metadata---docs-api-synopsis-21-f-a62":["/metadata---docs-api-synopsis-21-f-a62.a376081207def93aa340.js"],"content---docs-development-readme-149-437":["/content---docs-development-readme-149-437.115b92599d48666d0070.js"],"metadata---docs-development-readm-ec-6-c-332":["/metadata---docs-development-readm-ec-6-c-332.49158ed40eba176b8d72.js"],"content---docs-development-common-errorsf-15-a5b":["/content---docs-development-common-errorsf-15-a5b.e038ab8ec8bf334300fb.js"],"metadata---docs-development-common-errors-402-ef4":["/metadata---docs-development-common-errors-402-ef4.7ea9ca2120cf1ce1bce9.js"],"content---docs-development-debuggingb-54-9ed":["/content---docs-development-debuggingb-54-9ed.750c6b37dab541484a83.js"],"metadata---docs-development-debuggingc-36-26a":["/metadata---docs-development-debuggingc-36-26a.3bf9d58aef0157443ea5.js"],"content---docs-development-getting-started-139-387":["/content---docs-development-getting-started-139-387.91c824c53e601bdee051.js"],"metadata---docs-development-getting-started-89-b-c7a":["/metadata---docs-development-getting-started-89-b-c7a.863d1b0e22372d87282e.js"],"content---docs-development-setting-up-28-c-666":["/content---docs-development-setting-up-28-c-666.3ed03febaee8901fd048.js"],"metadata---docs-development-setting-up-979-75f":["/metadata---docs-development-setting-up-979-75f.8f9fc5a72c685e8d0e31.js"],"content---docs-development-signal-and-event-handling-7-d-4-f3f":["/content---docs-development-signal-and-event-handling-7-d-4-f3f.ce2b82a97ac1f368a896.js"],"metadata---docs-development-signal-and-event-handling-0-b-5-692":["/metadata---docs-development-signal-and-event-handling-0-b-5-692.b16a5b795c3eef3ce5dc.js"],"content---docs-development-styling-293-cad":["/content---docs-development-styling-293-cad.b3394daf132a97f6e2c2.js"],"metadata---docs-development-styling-1-c-2-0d6":["/metadata---docs-development-styling-1-c-2-0d6.c1ae40b22fc3b93cd6fc.js"],"content---docs-development-wrapping-widgets-84-b-538":["/content---docs-development-wrapping-widgets-84-b-538.8591cd36dcfe1c65b14a.js"],"metadata---docs-development-wrapping-widgets-303-fb8":["/metadata---docs-development-wrapping-widgets-303-fb8.bfc04ad3ffc9ee24e861.js"],"content---docs-guides-custom-nodegui-native-plugin-632-9db":["/content---docs-guides-custom-nodegui-native-plugin-632-9db.ae1162899d532c588845.js"],"metadata---docs-guides-custom-nodegui-native-plugin-92-b-12f":["/metadata---docs-guides-custom-nodegui-native-plugin-92-b-12f.184a7a6a1f10e05c6c54.js"],"content---docs-guides-debugging-in-vscodebd-7-cec":["/content---docs-guides-debugging-in-vscodebd-7-cec.a37b675eceeff564dcc8.js"],"metadata---docs-guides-debugging-in-vscodebf-8-5b0":["/metadata---docs-guides-debugging-in-vscodebf-8-5b0.d26c0a02667ed3c9416d.js"],"content---docs-guides-debuggingf-3-f-cf5":["/content---docs-guides-debuggingf-3-f-cf5.6a9f350b152e911795d0.js"],"metadata---docs-guides-debugging-970-fb8":["/metadata---docs-guides-debugging-970-fb8.4834f7c20eceaaaee536.js"],"content---docs-guides-getting-startedc-9-e-20f":["/content---docs-guides-getting-startedc-9-e-20f.058d1e127795274285bb.js"],"metadata---docs-guides-getting-started-2-b-7-1a4":["/metadata---docs-guides-getting-started-2-b-7-1a4.cfc3dec8bc5f547dfbb8.js"],"content---docs-guides-handle-events-160-4b0":["/content---docs-guides-handle-events-160-4b0.c02ea0616d11beafddb3.js"],"metadata---docs-guides-handle-events-5-eb-540":["/metadata---docs-guides-handle-events-5-eb-540.61bb8e8da8eeda4cc040.js"],"content---docs-guides-images-991-065":["/content---docs-guides-images-991-065.914359cdc22f4b9051ef.js"],"metadata---docs-guides-images-915-5ee":["/metadata---docs-guides-images-915-5ee.175b82933d61d3e5deb4.js"],"content---docs-guides-layoutdf-5-a64":["/content---docs-guides-layoutdf-5-a64.bbcbc44e5156b817cb02.js"],"metadata---docs-guides-layoutf-65-d7d":["/metadata---docs-guides-layoutf-65-d7d.3bdf6df942a2264f480b.js"],"content---docs-guides-networking-374-03e":["/content---docs-guides-networking-374-03e.17133e9de15be6e64aff.js"],"metadata---docs-guides-networkingdfd-ce0":["/metadata---docs-guides-networkingdfd-ce0.332c039b051021fe2724.js"],"content---docs-guides-nodegui-architecture-262-19e":["/content---docs-guides-nodegui-architecture-262-19e.245edae39f1ddac01224.js"],"metadata---docs-guides-nodegui-architecture-550-b82":["/metadata---docs-guides-nodegui-architecture-550-b82.72d9e2773d4e285ca973.js"],"content---docs-guides-scroll-view-76-e-87c":["/content---docs-guides-scroll-view-76-e-87c.73c89be82bf124b2e125.js"],"metadata---docs-guides-scroll-view-9-a-9-2ac":["/metadata---docs-guides-scroll-view-9-a-9-2ac.f6039a7dd2d1fa4c6ca6.js"],"content---docs-guides-stylingfec-977":["/content---docs-guides-stylingfec-977.c0e2691c9103260d4124.js"],"metadata---docs-guides-styling-9-ea-213":["/metadata---docs-guides-styling-9-ea-213.d5570c147002ef8e6bfe.js"],"content---docs-guides-tutoriale-53-6ab":["/content---docs-guides-tutoriale-53-6ab.3001eaf77a6eeaf068aa.js"],"metadata---docs-guides-tutorial-1-f-1-23b":["/metadata---docs-guides-tutorial-1-f-1-23b.4e417b24befa6a685ab5.js"],"content---docs-guides-using-native-node-modules-3-ab-104":["/content---docs-guides-using-native-node-modules-3-ab-104.3bc40951d03693eaff7d.js"],"metadata---docs-guides-using-native-node-modules-31-f-551":["/metadata---docs-guides-using-native-node-modules-31-f-551.0accd417ae132a661bdf.js"],"component---theme-blog-tags-posts-page-687-b6c":["/component---theme-blog-tags-posts-page-687-b6c.7cbecfb8c53ab9b2f9ba.js"],"metadata---blog-tags-nodegui-632-d46":["/metadata---blog-tags-nodegui-632-d46.73df93301c6a1152b2fe.js"],"metadata---blog-tags-hellob-02-3e8":["/metadata---blog-tags-hellob-02-3e8.cdf356c9ee24382e453e.js"],"component---theme-blog-tags-list-page-01-a-d0b":["/component---theme-blog-tags-list-page-01-a-d0b.f9af53c8c6b12587c378.js"],"tags---blog-tags-8-d-7-36d":["/tags---blog-tags-8-d-7-36d.1243f2728e886299c73e.js"]};/*]]>*/</script>
|
|
|
|
<title data-react-helmet="true">Learn the Basics</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="Learn the Basics"/><meta data-react-helmet="true" name="description" content="NodeGui uses native components instead of web based components as building blocks. So to understand the basic structure of a NodeGui app, you need to be familiar with Javascript or Typescript. This tutorial is aimed at everyone who has some web experience with web development."/><meta data-react-helmet="true" property="og:description" content="NodeGui uses native components instead of web based components as building blocks. So to understand the basic structure of a NodeGui app, you need to be familiar with Javascript or Typescript. This tutorial is aimed at everyone who has some web experience with web development."/><meta data-react-helmet="true" property="og:url" content="https://nodegui.org/docs/guides/tutorial"/><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 class="sidebar_Qb2S"><div class="menu menu--responsive"><button aria-label="Open Menu" class="button button--secondary button--sm menu__button" type="button"><svg class="sidebarMenuIcon_1uhT" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" 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></button><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="#!">The Basics</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/guides/getting-started">Getting started</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/guides/tutorial">Learn the Basics</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/styling">Styling</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/handle-events">Handle Events</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/scroll-view">Scroll View</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/images">Images</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/networking">Networking</a></li></ul></li><li class="menu__list-item"><a class="menu__link" href="#!">Guides</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/guides/nodegui-architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/debugging">Debugging</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/debugging-in-vscode">Debugging in VSCode</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/using-native-node-modules">Native Node Modules</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/guides/custom-nodegui-native-plugin">Custom NodeGui Plugin</a></li></ul></li></ul></div></div></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">Learn the Basics</h1></header><article><div class="markdown"><p>NodeGui uses native components instead of web based components as building blocks. So to understand the basic structure of a NodeGui app, you need to be familiar with Javascript or Typescript. This tutorial is aimed at everyone who has some web experience with web development.</p><h2><a aria-hidden="true" class="anchor" id="nodegui-development-in-a-nutshell"></a><a aria-hidden="true" class="hash-link" href="#nodegui-development-in-a-nutshell">#</a>NodeGui development in a nutshell</h2><p>As far as development is concerned, an NodeGui application is essentially a Node.js application. The starting point is a <code>package.json</code> that is identical to that of a Node.js module. A most basic NodeGui app would have the following
|
|
folder structure:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-text codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token plain">your-app/</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">├── package.json</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">├── index.js</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>All APIs and features found in NodeGui are accessible through the <code>@nodegui/nodegui</code> module, which can be required like any other Node.js module. Additionally you have access to all Node.js apis and node modules.</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-javascript codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token function" style="color:rgb(130, 170, 255)">require</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">"@nodegui/nodegui"</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>The <code>@nodegui/nodegui</code> module exports features in namespaces. As an example, a window can be created
|
|
using the <code>QMainWindow</code> class. A simple <code>main.js</code> file might open a window:</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-javascript codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token keyword" style="color:rgb(127, 219, 202)">const</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">QMainWindow</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 operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">require</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(173, 219, 103)">"@nodegui/nodegui"</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" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> win </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)">QMainWindow</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">win</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)">show</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">global</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">win</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> win</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">// To prevent win from being garbage collected.</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><p>The <code>index.js</code> should create windows and handle all the system events your
|
|
application might encounter.</p><h2><a aria-hidden="true" class="anchor" id="whats-going-on-here"></a><a aria-hidden="true" class="hash-link" href="#whats-going-on-here">#</a>What's going on here?</h2><p>Firstly, we are running a regular Node.js app. This means that we are not running in a browser environment. The window you see is actually a native widget created by Qt. QMainWindow is essentially a lightweight javascript wrapper over Qt's QMainWindow. Hence every method you call on QMainWindow instance is actually affecting a native window widget. This is very light weight as compared to browser based solutions and hence is more closer to the Operating system.s</p><h2><a aria-hidden="true" class="anchor" id="trying-out-the-starter-project"></a><a aria-hidden="true" class="hash-link" href="#trying-out-the-starter-project">#</a>Trying out the starter project</h2><p>Clone and run the code by using the
|
|
<a href="https://github.com/nodegui/nodegui-starter"><code>nodegui/nodegui-starter</code></a> repository.</p><p><strong>Note</strong>: Running this requires <a href="https://git-scm.com">Git</a> and <a href="https://www.npmjs.com/">npm</a>.</p><pre class="mdxCodeBlock_iHAB"><div class="codeBlockWrapper_2QGZ"><pre class="prism-code language-sh codeBlock_19pQ" style="color:#d6deeb;background-color:#011627"><div class="token-line" style="color:#d6deeb"><span class="token plain"># Clone the repository</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">$ git clone https://github.com/nodegui/nodegui-starter</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"># Go into the repository</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">$ cd nodegui-starter</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"># Install dependencies</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">$ npm install</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain"># Run the app</span></div><div class="token-line" style="color:#d6deeb"><span class="token plain">$ npm start</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button></div></pre><h2><a aria-hidden="true" class="anchor" id="what-else-other-than-a-basic-window"></a><a aria-hidden="true" class="hash-link" href="#what-else-other-than-a-basic-window">#</a>What else other than a basic window?</h2><p>NodeGui has support for basic widgets like QWidget (similar to div), QCheckBox, QPushButton and many more.
|
|
You can take a look at the list of native widgets that NodeGui currently supports here : <a href="/docs/api/QWidget">Native widgets in NodeGui</a>.
|
|
With time more widgets and APIs will be added to NodeGui. Apart from modules in NodeGui, you also have access to the entire node modules ecosystem. Thus, any node module that you can use with Node.js, can be used with NodeGui. This makes it extremely powerful.</p><p>Fine, I want something more custom and beautiful than just native looking widgets. What do I do?</p><p>To make things more beautiful, you will have to <a href="styling">learn about styling</a>. Lets take a look at that next.</p></div></article><div class="margin-top--xl margin-bottom--lg"><nav class="pagination-nav"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/guides/getting-started"><h5 class="pagination-nav__link--sublabel">Previous</h5><h4 class="pagination-nav__link--label">« <!-- -->Getting started</h4></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/guides/styling"><h5 class="pagination-nav__link--sublabel">Next</h5><h4 class="pagination-nav__link--label">Styling<!-- --> »</h4></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_2wxO"><ul class="contents contents__left-border"><li><a href="#nodegui-development-in-a-nutshell" class="contents__link">NodeGui development in a nutshell</a></li><li><a href="#whats-going-on-here" class="contents__link">What's going on here?</a></li><li><a href="#trying-out-the-starter-project" class="contents__link">Trying out the starter project</a></li><li><a href="#what-else-other-than-a-basic-window" class="contents__link">What else other than a basic window?</a></li></ul></div></div></div></div></div></main></div></div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="/runtime~main.7a412b5ea073938bd334.js"></script>
|
|
|
|
<script type="text/javascript" src="/main.3c22308242e28ead5e64.js"></script>
|
|
|
|
<script type="text/javascript" src="/0.821df7f17f7288aebb5e.js"></script>
|
|
|
|
<script type="text/javascript" src="/1.9b3d421a0f44576af60f.js"></script>
|
|
|
|
<script type="text/javascript" src="/2.27a81c22b5dfa23bfe9b.js"></script>
|
|
|
|
<script type="text/javascript" src="/component---theme-doc-legacy-page-9-e-7-ca5.d31182005d6c21dd63ac.js"></script>
|
|
|
|
<script type="text/javascript" src="/docsMetadata---docs-150-2d6.6e875209659be13f2970.js"></script>
|
|
|
|
<script type="text/javascript" src="/component---theme-doc-legacy-item-031-769.6e8a6ea08d218712d94a.js"></script>
|
|
|
|
<script type="text/javascript" src="/content---docs-guides-tutoriale-53-6ab.3001eaf77a6eeaf068aa.js"></script>
|
|
|
|
<script type="text/javascript" src="/metadata---docs-guides-tutorial-1-f-1-23b.4e417b24befa6a685ab5.js"></script>
|
|
|
|
</body>
|
|
</html> |