From df7a0ab565e094efdb2606bd7ccd005069b20698 Mon Sep 17 00:00:00 2001 From: Atul R Date: Wed, 7 Aug 2019 20:05:38 +0200 Subject: [PATCH] Adds common layout methods and adds basic react docs --- docs/README.md | 5 + docs/_coverpage.md | 15 ++- docs/index.html | 7 +- docs/react/README.md | 61 +++++++++ docs/react/about.md | 23 ++++ docs/react/first-app.md | 116 ++++++++++++++++++ docs/tutorial/about.md | 2 +- src/cpp/QtGui/QWidget/nwidget.h | 2 +- .../QGridLayout/qgridlayout_wrap.cpp | 3 +- .../QtWidgets/QGridLayout/qgridlayout_wrap.h | 6 +- src/cpp/QtWidgets/QLayout/qlayout_macro.h | 46 +++++++ src/cpp/QtWidgets/QLayout/qlayout_wrap.cpp | 3 +- src/cpp/QtWidgets/QLayout/qlayout_wrap.h | 9 +- src/cpp/core/FlexLayout/flexlayout_wrap.cpp | 3 +- src/cpp/core/FlexLayout/flexlayout_wrap.h | 6 +- src/lib/QtWidgets/QLayout/index.ts | 9 ++ 16 files changed, 290 insertions(+), 26 deletions(-) create mode 100644 docs/react/README.md create mode 100644 docs/react/about.md create mode 100644 docs/react/first-app.md create mode 100644 src/cpp/QtWidgets/QLayout/qlayout_macro.h diff --git a/docs/README.md b/docs/README.md index bd0383a52..6bf3ea78d 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,6 +1,11 @@ +# main doc + +> Looking for React Desktop docs? [React Desktop docs](react/README.md) + # Guides and Tutorials - [About NodeGui](tutorial/about.md) +- [React Desktop](react/README.md) - [Examples](https://github.com/master-atul/nodegui/tree/master/examples) - [FAQ](faq.md) - [Setting up the Development Environment](tutorial/development-environment.md) diff --git a/docs/_coverpage.md b/docs/_coverpage.md index 664d60b46..bf264cc3a 100644 --- a/docs/_coverpage.md +++ b/docs/_coverpage.md @@ -1,12 +1,11 @@
- -

NodeGui

+ +

NodeGui / React Desktop

-

An open source library for building cross-platform desktop applications with JavaScript and CSS like styling.

- +

An open source library for building cross-platform native desktop applications with JavaScript and CSS like styling.

+

+NodeGui is based on Qt5 and NOT chromium, hence it is memory and cpu efficient. React Desktop is a React renderer for NodeGui. +

demo -

-NodeGui is based on Qt5 and NOT chromium, hence it is memory and cpu efficient. -

-

↓

 +

↓

 diff --git a/docs/index.html b/docs/index.html index 60b8ea0f5..f3d4fea76 100644 --- a/docs/index.html +++ b/docs/index.html @@ -28,6 +28,11 @@ --heading-h2-color: hsl(204, 90%, 45%); --cover-background-color: white; } + h1#main-doc { + height: 0; + opacity: 0; + z-index: -2; + } @@ -36,7 +41,7 @@ window.$docsify = { name: "NodeGui", repo: "https://github.com/nodegui/nodegui", - coverpage: true, + coverpage: ["/", "/react/"], themeable: { readyTransition: true, // default responsiveTables: true // default diff --git a/docs/react/README.md b/docs/react/README.md new file mode 100644 index 000000000..0d2aeb316 --- /dev/null +++ b/docs/react/README.md @@ -0,0 +1,61 @@ +# React Desktop + +- [About React Desktop](react/about.md) +- [Examples](https://github.com/master-atul/react-desktop/tree/master/examples) +- [Setting up the Development Environment](tutorial/development-environment.md) +- [Creating your First App](react/first-app.md) + - [Hello World](react/first-app.md#Hello-World) + - [React Desktop Development in a Nutshell](react/first-app.md#react-desktop-development-in-a-nutshell) + - [Running Your App](react/first-app.md#running-your-app) + // TODO from here +- [Application Architecture](react/application-architecture.md) + - [Qode](tutorial/application-architecture.md#qode) + - [Using NodeGui's APIs](tutorial/application-architecture.md#using-NodeGui-apis) + - [Using Node.js APIs](tutorial/application-architecture.md#using-nodejs-apis) + - [Using Native Node.js Modules](tutorial/using-native-node-modules.md) +- [Testing and Debugging](tutorial/debugging-app.md) + - [Debugging Qode/NodeGui Process](tutorial/debugging-qode-process.md) + - [Debugging a NodeGui app with Visual Studio Code](tutorial/debugging-app-vscode.md) +- [Distribution](tutorial/application-distribution.md) + - [Supported Platforms](tutorial/support.md#supported-platforms) + - [Code Signing](tutorial/code-signing.md) + - [Mac App Store](tutorial/mac-app-store-submission-guide.md) + - [Windows Store](tutorial/windows-store-guide.md) + - [Snapcraft](tutorial/snapcraft.md) +- [Getting Support](tutorial/support.md) + +## API References + +- [Synopsis](api/synopsis.md) +- [Process Object](api/process.md) + +### Modules from NodeGui: + +- [QMainWindow (Window)](api/QMainWindow.md) +- [QWidget (View)](api/QWidget.md) +- [QLabel (Text/Image)](api/QLabel.md) +- [QPushButton (Button)](api/QPushButton.md) +- [QRadioButton (RadioButton)](api/QRadioButton.md) +- [QCheckBox (CheckBox)](api/QCheckBox.md) +- [QLineEdit (LineEdit)](api/QLineEdit.md) +- [QProgressBar (ProgressBar)](api/QProgressBar.md) +- [FlexLayout](api/FlexLayout.md) +- [QPixmap](api/QPixmap.md) +- [Qt Enums](api/QtEnums.md) + +### Internal Modules + +- [NodeWidget](api/NodeWidget.md) +- [NodeLayout](api/NodeLayout.md) +- [EventWidget](api/EventWidget.md) +- [Component](api/Component.md) +- [YogaWidget](api/YogaWidget.md) + +## Usage + +- [Events usage](todo) +- [Yoga properties using stylesheet usage](todo) + +## Development/Contributor's Guide + +See [development](development/README.md) diff --git a/docs/react/about.md b/docs/react/about.md new file mode 100644 index 000000000..cf414d152 --- /dev/null +++ b/docs/react/about.md @@ -0,0 +1,23 @@ +# About React Desktop + +[React Desktop](https://github.com/master-atul/react-desktop) is an open source library for building cross-platform desktop applications with React and CSS like styling. React Desktop is a custom react renderer for [NodeGui](https://github.com/master-atul/nodegui). React Desktop combines the power and flexibility of React with ease of NodeJs and maturity of Qt5. With React desktop you can build native desktop applications which are underneath Qt applications. This means you could in theory use all of Qt's Gui APIs in Javascript. + +As React Native was an improvement over Cordova based applications in Mobile app development with web technologies, React Desktop aims to achieve the same with respect to Electron and other chromium based cross platform Gui solutions. React Desktop wants to incorporate everything that is good about Electron: The ease of development, freedom of styling, Native APIs, great documentation, etc. At the same time it aims to be memory and CPU efficient. + +Also, React Desktop (like NodeGui) is built with Typescript which means you get autocomplete and strong typechecking support from the IDE even when used in a Javascript project. + +Get started building with React Desktop in the [First React Desktop app](react/first-app.md). + +### Updating Dependencies + +As soon as a new version of NodeGui is released a corresponding version of React Desktop will be released simultaneously. This makes sure that both NodeGui and React Desktop releases go out in sync. NodeGui an React Desktop will be released as separate packages in order keep everything easily maintainable. + +### Versioning + +NodeGui/React Desktop follows [`semver`](https://semver.org). +For most applications, and using any recent version of npm, +running `$ npm install @nodegui/react-desktop` will do the right thing. + +## Core Philosophy + +[See core philosophy of NodeGui](tutorial/about?id=core-philosophy) diff --git a/docs/react/first-app.md b/docs/react/first-app.md new file mode 100644 index 000000000..bdf32ce96 --- /dev/null +++ b/docs/react/first-app.md @@ -0,0 +1,116 @@ +# Writing Your First React Desktop App + +React Desktop enables you to create desktop applications with JavaScript (React). React Desktop is a react renderer for NodeGui. This makes it extrememly memory and CPU efficient as compared to other popular Javascript Desktop GUI solutions. + +## Hello World + +Clone and run the code in this tutorial by using the +[`nodegui/react-desktop-starter`][quick-start] repository. + +**Note**: Running this requires [Git](https://git-scm.com) and [npm](https://www.npmjs.com/). + +```sh +# Clone the repository +$ git clone https://github.com/nodegui/react-desktop-starter +# Go into the repository +$ cd react-desktop-starter +# Install dependencies +$ npm install +# Run the app +$ npm start +``` + +As far as development is concerned, an React Desktop application is essentially a +Node.js application. The starting point is a `package.json` that is identical +to that of a Node.js module. A most basic React Desktop app would have the following +folder structure: + +```text +your-app/ +├── package.json +├── index.js +``` + +## React Desktop Development in a Nutshell + +React Desktop apps are developed in JavaScript using the same principles and methods +found in React Native development. React Desktop exposes native widgets in the form of React components. Also, since we are now not running inside a browser, there is no DOM. Hence browser based APIs are NOT available. But you do have access to complete NodeJs APIs along with some exported Qt Apis.All APIs related to React Desktop are found in `@nodegui/react-desktop` module. Additionally you can also access APIs and features from NodeGui via +the `@nodegui/nodegui` module. These can be required like any other Node.js module: + +```javascript +require("@nodegui/nodegui"); +require("@nodegui/react-desktop"); +``` + +A simple `main.js`. + +```javascript +import { Renderer, View, Text, Button, Window } from "@nodegui/react-desktop"; +import React, { useState } from "react"; + +const App = () => { + const [time, setTime] = useState(new Date()); + return ( + + +