Adds common layout methods and adds basic react docs
This commit is contained in:
Atul R
parent
c58a5a6237
commit
df7a0ab565
@ -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)
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
<div style="display: flex; align-items:center;justify-content:center;margin-left:-120px;">
|
||||
<img src="images/nodegui.svg" style="height:100px; margin-right:20px;" />
|
||||
<h1 style="display:inline;"> NodeGui </h1>
|
||||
<img src="images/nodegui.svg" style="height:90px; margin-right:10px;" />
|
||||
<h1 style="display:inline;"> NodeGui / React Desktop </h1>
|
||||
</div>
|
||||
<p style="font-weight:400; font-size:1.5em;">An open source library for building cross-platform desktop applications with JavaScript and CSS like styling.</p>
|
||||
|
||||
<p style="font-weight:300; font-size:1.5em; margin: 0;">An open source library for building cross-platform native desktop applications with JavaScript and CSS like styling.</p>
|
||||
<p style="font-weight:500; font-size:1em;">
|
||||
NodeGui is based on Qt5 and <strong><i>NOT</i></strong> chromium, hence it is memory and cpu efficient. <strong>React Desktop</strong> is a React renderer for NodeGui.
|
||||
</p>
|
||||
<img src="images/demo.png" alt="demo" style="width: 100%;"/>
|
||||
|
||||
<p style="font-weight:500; font-size:1em;">
|
||||
NodeGui is based on Qt5 and <strong><i>NOT</i></strong> chromium, hence it is memory and cpu efficient.
|
||||
</p>
|
||||
<a href="#/?id=guides-and-tutorials"><p style="font-size: 1.3em;">↓</p></a>
|
||||
<a href="#/?id=main-doc"><p style="font-size: 1.3em;">↓</p></a>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -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
|
||||
|
||||
61
docs/react/README.md
Normal file
61
docs/react/README.md
Normal file
@ -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)
|
||||
23
docs/react/about.md
Normal file
23
docs/react/about.md
Normal file
@ -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)
|
||||
116
docs/react/first-app.md
Normal file
116
docs/react/first-app.md
Normal file
@ -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 (
|
||||
<Window minSize={{ width: 500, height: 200 }} styleSheet={styleSheet}>
|
||||
<View id="container">
|
||||
<Button
|
||||
text="Update Time"
|
||||
on={{
|
||||
clicked: () => setTime(new Date())
|
||||
}}
|
||||
/>
|
||||
<Text id="result">{`${time}`}</Text>
|
||||
<Text id="result">{`Time in epoc: ${time.getTime()}`}</Text>
|
||||
</View>
|
||||
</Window>
|
||||
);
|
||||
};
|
||||
|
||||
const styleSheet = `
|
||||
#container {
|
||||
qproperty-flex: 1;
|
||||
qproperty-flexDirection: column;
|
||||
qproperty-minHeight: '100%';
|
||||
qproperty-alignItems: 'center';
|
||||
qproperty-justifyContent: 'center';
|
||||
}
|
||||
#opBtn {
|
||||
font-size: 20px;
|
||||
}
|
||||
#result {
|
||||
font-size: 12px;
|
||||
qproperty-flex: 1;
|
||||
color: cyan;
|
||||
}
|
||||
`;
|
||||
|
||||
Renderer.render(<App />, () => {});
|
||||
```
|
||||
|
||||
The `index.js` should create windows and handle all the system events your
|
||||
application might encounter.
|
||||
|
||||
## Running Your App
|
||||
|
||||
You can try your app by running `npm start` from your application's
|
||||
directory.
|
||||
|
||||
## Trying this Example
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
[quick-start]: https://github.com/nodegui/react-desktop-starter
|
||||
@ -6,7 +6,7 @@ NodeGui began in 2019 as part of frustrations related to Electron and other chro
|
||||
|
||||
Also, 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 NodeGui in the [First NodeGui app](first-app.md).
|
||||
Get started building with NodeGui in the [First NodeGui app](tutorial/first-app.md).
|
||||
|
||||
### Updating Dependencies
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ class NWidget: public QWidget, public NodeWidget
|
||||
{
|
||||
NODEWIDGET_IMPLEMENTATIONS
|
||||
public:
|
||||
using QWidget::QWidget; //inherit all constructors of QWidget
|
||||
using QWidget::QWidget;
|
||||
// https://doc.qt.io/qt-5/stylesheet-reference.html
|
||||
void paintEvent(QPaintEvent *)
|
||||
{
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
#include "qgridlayout_wrap.h"
|
||||
#include "src/cpp/QtGui/QWidget/qwidget_wrap.h"
|
||||
#include "src/cpp/Extras/Utils/nutils.h"
|
||||
#include "src/cpp/core/Component/component_macro.h"
|
||||
|
||||
Napi::FunctionReference QGridLayoutWrap::constructor;
|
||||
|
||||
@ -10,7 +9,7 @@ Napi::Object QGridLayoutWrap::init(Napi::Env env, Napi::Object exports) {
|
||||
char CLASSNAME[] = "QGridLayout";
|
||||
Napi::Function func = DefineClass(env, CLASSNAME, {
|
||||
InstanceMethod("addWidget", &QGridLayoutWrap::addWidget),
|
||||
COMPONENT_WRAPPED_METHODS_EXPORT_DEFINE
|
||||
QLAYOUT_WRAPPED_METHODS_EXPORT_DEFINE(QGridLayoutWrap)
|
||||
});
|
||||
constructor = Napi::Persistent(func);
|
||||
exports.Set(CLASSNAME, func);
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
#ifndef QGRIDLAYOUT_WRAP_H
|
||||
#define QGRIDLAYOUT_WRAP_H
|
||||
#pragma once
|
||||
|
||||
#include <napi.h>
|
||||
#include <QGridLayout>
|
||||
#include "src/cpp/QtWidgets/QLayout/qlayout_macro.h"
|
||||
|
||||
class QGridLayoutWrap : public Napi::ObjectWrap<QGridLayoutWrap>{
|
||||
private:
|
||||
@ -17,6 +17,6 @@ class QGridLayoutWrap : public Napi::ObjectWrap<QGridLayoutWrap>{
|
||||
static Napi::FunctionReference constructor;
|
||||
//wrapped methods
|
||||
Napi::Value addWidget(const Napi::CallbackInfo& info);
|
||||
QLAYOUT_WRAPPED_METHODS_DECLARATION
|
||||
};
|
||||
|
||||
#endif
|
||||
46
src/cpp/QtWidgets/QLayout/qlayout_macro.h
Normal file
46
src/cpp/QtWidgets/QLayout/qlayout_macro.h
Normal file
@ -0,0 +1,46 @@
|
||||
#pragma once
|
||||
|
||||
#include "src/cpp/core/Component/component_macro.h"
|
||||
#include <QSize>
|
||||
/*
|
||||
|
||||
This macro adds common QLayout exported methods
|
||||
The exported methods are taken into this macro to avoid writing them in each and every layout we export.
|
||||
*/
|
||||
|
||||
#ifndef QLAYOUT_WRAPPED_METHODS_DECLARATION
|
||||
#define QLAYOUT_WRAPPED_METHODS_DECLARATION \
|
||||
\
|
||||
Napi::Value activate(const Napi::CallbackInfo& info) { \
|
||||
Napi::Env env = info.Env(); \
|
||||
Napi::HandleScope scope(env); \
|
||||
bool wasRedone = this->instance->activate(); \
|
||||
return Napi::Boolean::New(env, wasRedone); \
|
||||
} \
|
||||
Napi::Value invalidate(const Napi::CallbackInfo& info) { \
|
||||
Napi::Env env = info.Env(); \
|
||||
Napi::HandleScope scope(env); \
|
||||
this->instance->invalidate(); \
|
||||
return env.Null(); \
|
||||
} \
|
||||
Napi::Value update(const Napi::CallbackInfo& info) { \
|
||||
Napi::Env env = info.Env(); \
|
||||
Napi::HandleScope scope(env); \
|
||||
this->instance->update(); \
|
||||
return env.Null(); \
|
||||
} \
|
||||
|
||||
#endif //QLAYOUT_WRAPPED_METHODS_DECLARATION
|
||||
|
||||
#ifndef QLAYOUT_WRAPPED_METHODS_EXPORT_DEFINE
|
||||
#define QLAYOUT_WRAPPED_METHODS_EXPORT_DEFINE(LayoutWrapName) \
|
||||
\
|
||||
COMPONENT_WRAPPED_METHODS_EXPORT_DEFINE \
|
||||
InstanceMethod("activate", &LayoutWrapName::activate), \
|
||||
InstanceMethod("invalidate", &LayoutWrapName::invalidate), \
|
||||
InstanceMethod("update", &LayoutWrapName::update), \
|
||||
|
||||
#endif // QLAYOUT_WRAPPED_METHODS_EXPORT_DEFINE
|
||||
|
||||
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
#include "qlayout_wrap.h"
|
||||
#include "src/cpp/core/Component/component_macro.h"
|
||||
|
||||
Napi::FunctionReference QLayoutWrap::constructor;
|
||||
|
||||
void QLayoutWrap::init(Napi::Env env) {
|
||||
char CLASSNAME[] = "QLayout";
|
||||
Napi::Function func = DefineClass(env, CLASSNAME, {
|
||||
COMPONENT_WRAPPED_METHODS_EXPORT_DEFINE
|
||||
QLAYOUT_WRAPPED_METHODS_EXPORT_DEFINE(QLayoutWrap)
|
||||
});
|
||||
constructor = Napi::Persistent(func);
|
||||
}
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
#ifndef QLAYOUT_WRAP_H
|
||||
#define QLAYOUT_WRAP_H
|
||||
#pragma once
|
||||
|
||||
#include <napi.h>
|
||||
#include <QLayout>
|
||||
|
||||
#include "src/cpp/QtWidgets/QLayout/qlayout_macro.h"
|
||||
|
||||
//ABSTRACT CLASS
|
||||
class QLayoutWrap : public Napi::ObjectWrap<QLayoutWrap>{
|
||||
private:
|
||||
@ -14,6 +16,7 @@ class QLayoutWrap : public Napi::ObjectWrap<QLayoutWrap>{
|
||||
QLayout* getInternalInstance();
|
||||
//class constructor
|
||||
static Napi::FunctionReference constructor;
|
||||
//wrapped methods
|
||||
QLAYOUT_WRAPPED_METHODS_DECLARATION
|
||||
};
|
||||
|
||||
#endif
|
||||
@ -1,7 +1,6 @@
|
||||
#include "flexlayout_wrap.h"
|
||||
#include "src/cpp/QtGui/QWidget/qwidget_wrap.h"
|
||||
#include "src/cpp/Extras/Utils/nutils.h"
|
||||
#include "src/cpp/core/Component/component_macro.h"
|
||||
|
||||
Napi::FunctionReference FlexLayoutWrap::constructor;
|
||||
|
||||
@ -13,7 +12,7 @@ Napi::Object FlexLayoutWrap::init(Napi::Env env, Napi::Object exports) {
|
||||
InstanceMethod("insertChildBefore", &FlexLayoutWrap::insertChildBefore),
|
||||
InstanceMethod("removeWidget", &FlexLayoutWrap::removeWidget),
|
||||
InstanceMethod("setFlexNode", &FlexLayoutWrap::setFlexNode),
|
||||
COMPONENT_WRAPPED_METHODS_EXPORT_DEFINE
|
||||
QLAYOUT_WRAPPED_METHODS_EXPORT_DEFINE(FlexLayoutWrap)
|
||||
});
|
||||
constructor = Napi::Persistent(func);
|
||||
exports.Set(CLASSNAME, func);
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
#ifndef FLEXLAYOUT_WRAP_H
|
||||
#define FLEXLAYOUT_WRAP_H
|
||||
#pragma once
|
||||
|
||||
#include <napi.h>
|
||||
#include "flexlayout.h"
|
||||
#include "src/cpp/QtWidgets/QLayout/qlayout_macro.h"
|
||||
|
||||
class FlexLayoutWrap : public Napi::ObjectWrap<FlexLayoutWrap>{
|
||||
private:
|
||||
@ -20,6 +20,6 @@ class FlexLayoutWrap : public Napi::ObjectWrap<FlexLayoutWrap>{
|
||||
Napi::Value insertChildBefore(const Napi::CallbackInfo& info);
|
||||
Napi::Value removeWidget(const Napi::CallbackInfo& info);
|
||||
Napi::Value setFlexNode(const Napi::CallbackInfo& info);
|
||||
QLAYOUT_WRAPPED_METHODS_DECLARATION
|
||||
};
|
||||
|
||||
#endif //FLEXLAYOUT_WRAP_H
|
||||
@ -5,6 +5,15 @@ import { NodeWidget } from "../../QtGui/QWidget";
|
||||
export abstract class NodeLayout extends Component {
|
||||
type: string = "layout";
|
||||
abstract addWidget: (childWidget: NodeWidget, ...args: any[]) => void;
|
||||
activate = (): boolean => {
|
||||
return this.native.activate();
|
||||
};
|
||||
invalidate = () => {
|
||||
this.native.invalidate();
|
||||
};
|
||||
update = () => {
|
||||
this.native.update();
|
||||
};
|
||||
}
|
||||
|
||||
// export class QLayout extends NodeLayout { //Dont need QLayout for now
|
||||
|
||||
Loading…
Reference in New Issue
Block a user