Adds new doc site (#124)
* Adds base template for new docs site * Adds Apis to docs * add some css from rn * Fix right side sidebar functionality * Basic docs * adds old docs * Cleans up unnecessary files * Chane links * Adds docusaurus v2 * Styling fixes * adds wip and new assets * adds code image * Add FAQ link * Adds analytics * adds cname * cleanup blogs
This commit is contained in:
Atul R
GitHub
@@ -0,0 +1,48 @@
|
||||
# Contributor's guide
|
||||
|
||||
This guide is for everyone who want's to contribute to the development of NodeGui.
|
||||
|
||||
Please make sure you have read the [User's guides](/) before reading this guide.
|
||||
|
||||
- [Setting up the NodeGui Contributor's Environment](development/setting-up.md)
|
||||
- [Setting up macOS](development/setting-up.md#macosx)
|
||||
- [Setting up Windows](development/setting-up.md#windows)
|
||||
- [Setting up Linux](development/setting-up.md#linux)
|
||||
- [Getting started](development/getting-started.md)
|
||||
- [Code Structure](development/getting-started.md#Code-Structure)
|
||||
- [Wrapping a widget: TLDR version](development/getting-started.md#Wrapping-a-widget)
|
||||
- [Learning Materials](development/getting-started.md#Learning-Materials)
|
||||
- [Styling](development/styling.md)
|
||||
- [Painting](development/styling.md#painting)
|
||||
- [Layout](development/styling.md#layout)
|
||||
- [Signal and Event Handling](development/signal_and_event_handling.md)
|
||||
- [Debugging](development/debugging.md)
|
||||
- [Common Errors](development/common_errors.md)
|
||||
- [Wrapping a Widget: Detailed](development/wrapping_widgets.md)
|
||||
- [Getting Support](tutorial/support.md)
|
||||
|
||||
|
||||
# Where to start or How can you help?
|
||||
|
||||
You can follow the contributors guide above to get a gist.
|
||||
|
||||
It is fairly straightforward to get started. I would start with a project of my own and start adding missing functionalities.
|
||||
|
||||
Or simply put I would recommend you start by adding an unexported method to an existing widget.
|
||||
|
||||
**For example:**
|
||||
|
||||
You could add the corresponding Qt method to QProgressbar
|
||||
https://doc.qt.io/qt-5/qprogressbar.html#textVisible-prop to get a grip on it.
|
||||
|
||||
This PR can be used as a guide
|
||||
|
||||
https://github.com/nodegui/nodegui/issues/36
|
||||
|
||||
https://github.com/nodegui/nodegui/pull/39
|
||||
|
||||
You can also take a look at few bugs or the issue board here to know what you can pick up if you are out of ideas.
|
||||
|
||||
https://github.com/nodegui/nodegui/projects/
|
||||
|
||||
https://github.com/nodegui/react-nodegui/projects/
|
||||
@@ -0,0 +1,7 @@
|
||||
# Common errors
|
||||
|
||||
1. **Segmentation fault:** Segmentation fault occurs when you access a Pointer that is pointing to an invalid memory address. One major reason for this can be that JS garbage collector would have garbage collected the addon generated value and you try accessing it after a while. This is mostly the case if you see seg fault happening randomly after some time of startup.
|
||||
|
||||
2. **Widget not visible in Flex layout** Widget might have gotten zero height/width. This can occur if yoga was not able to get the default height/width of the widget. Make sure you have implemented
|
||||
`YGNodeSetMeasureFunc(this->instance->getFlexNode(), &extrautils::measureQtWidget);`
|
||||
if its a leaf node widget(doesnt contain any children).
|
||||
@@ -0,0 +1,11 @@
|
||||
# debugging
|
||||
|
||||
## Debugging JS
|
||||
|
||||
// TODO
|
||||
|
||||
## Debugging C++
|
||||
|
||||
https://medium.com/@atulanand94/debugging-nodejs-c-addons-using-vs-code-27e9940fc3ad
|
||||
|
||||
https://medium.com/cameron-nokes/how-to-debug-native-node-addons-in-mac-osx-66f69f81afcb
|
||||
@@ -0,0 +1,113 @@
|
||||
## Getting started
|
||||
|
||||
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.
|
||||
|
||||
The library depends on `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 `qode your_file.js` instead of `node your_file.js`.
|
||||
|
||||
Qode is inspired by this post by [Cheng Zhao](https://github.com/zcbenz): https://electronjs.org/blog/electron-internals-node-integration
|
||||
|
||||
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.
|
||||
|
||||
## Code Structure
|
||||
|
||||
```
|
||||
.
|
||||
├── binding.gyp
|
||||
├── config
|
||||
├── demo.ts
|
||||
├── package.json
|
||||
├── src
|
||||
│ ├── cpp <-- C++ source code
|
||||
│ └── lib <-- Typescript source code
|
||||
├── tsconfig.json
|
||||
└── yarn.lock
|
||||
```
|
||||
|
||||
The main folder is `src`. It contains
|
||||
|
||||
- `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.
|
||||
- `lib` : This folder contains all the Typescript code of the library. This is used to add additonal helper methods and types to exported addon.
|
||||
|
||||
**Detailed version:**
|
||||
|
||||
```
|
||||
.
|
||||
├── binding.gyp
|
||||
├── config
|
||||
│ ├── application.gypi
|
||||
│ ├── common.gypi
|
||||
│ └── yoga.gypi
|
||||
├── demo.ts
|
||||
├── package.json
|
||||
├── src
|
||||
│ ├── cpp
|
||||
│ │ ├── Extras
|
||||
│ │ ├── QtGui <------ All exported classes found inside Qts Gui dynamic library
|
||||
│ │ ├── QtWidgets <------ All exported classes found inside Qts Widgets dynamic library
|
||||
│ │ ├── core
|
||||
│ │ └── main.cpp
|
||||
│ └── lib
|
||||
│ ├── QtGui
|
||||
│ ├── QtWidgets
|
||||
│ └── core
|
||||
├── tsconfig.json
|
||||
└── yarn.lock
|
||||
|
||||
```
|
||||
|
||||
First step to seeing how everything works is to take a look at `demo.ts` file. This file is basically like a Kitchen application showcasing all the exported widgets currently with the library.
|
||||
|
||||
Make sure you have read how to write native NodeJS Addons blog first. https://medium.com/@atulanand94/beginners-guide-to-writing-nodejs-addons-using-c-and-n-api-node-addon-api-9b3b718a9a7f
|
||||
|
||||
Once you have done that check out `src/cpp/main.cpp` and `config/application.gypi` to see the list of exported C++ classes.
|
||||
|
||||
Then maybe you can take a look at `src/cpp/QtWidgets/QLabel/qlabel_wrap.h`. This will show you how to wrap a simple Qt Widget.
|
||||
Check the corresponding JS file for the addon here `src/lib/QtWidgets/QLabel/index.ts`.
|
||||
|
||||
## Wrapping a widget
|
||||
|
||||
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.
|
||||
|
||||
Taking the example of QLabel, if you look inside the directory `src/cpp/QtWidgets/QLabel`, you should see:
|
||||
|
||||
```
|
||||
├── QLabel
|
||||
│ ├── nlabel.cpp
|
||||
│ ├── nlabel.h <---- Extended QLabel
|
||||
│ ├── nlabel_moc.cpp <--- Autogenerated file by qt moc.
|
||||
│ ├── qlabel_wrap.cpp
|
||||
│ └── qlabel_wrap.h <--- Wrapper file
|
||||
```
|
||||
|
||||
The idea is :
|
||||
|
||||
1. We will first extend QLabel class to form NLabel. NLabel is basically QLabel with some extra methods and variables. More on it below.
|
||||
2. Then we will use NLabel and wrap it using NAPI and export it to JS side. This is what qlabel_wrap does.
|
||||
|
||||
**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.
|
||||
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'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
|
||||
|
||||
```
|
||||
moc headername.h -o headername_moc.cpp --include <any_include_file_which_contains_macro> // example : ../../core/YogaWidget/yogawidget.h
|
||||
```
|
||||
|
||||
So for nlabel I would run it as:
|
||||
|
||||
```
|
||||
moc nlabel.h -o nlabel_moc.cpp --include ../../core/YogaWidget/yogawidget.h
|
||||
```
|
||||
|
||||
This will run moc on `headername.h` and generate `headername_moc.cpp`. We will include `headername_moc.cpp` in `config/moc.gypi`. If you dont do this. Then it will give a symbol not found error.
|
||||
|
||||
I hope QLabel's example is enough for now. For more examples and inspirations we can take a look at other wrapped widgets.
|
||||
|
||||
## Learning Materials
|
||||
|
||||
1. Beginners guide to NodeJS Addon - https://medium.com/@atulanand94/beginners-guide-to-writing-nodejs-addons-using-c-and-n-api-node-addon-api-9b3b718a9a7f
|
||||
2. First read this: N-API in nodejs docs
|
||||
3. https://www.youtube.com/watch?v=-Oniup60Afs&feature=youtu.be
|
||||
4. See samples at https://github.com/nodejs/abi-stable-node-addon-examples/
|
||||
4.1. You can see the readme of https://github.com/nodejs/node-addon-api.git/
|
||||
5. See node-qt implementation. It is implemented in Nan (explained in video).
|
||||
6. Now try to match the implementation in node-qt and convert to N-API using examples from samples.
|
||||
7. Implementations not in node-qt need to be done with effort.
|
||||
@@ -0,0 +1,55 @@
|
||||
# Setup project for development
|
||||
|
||||
## Development setup and getting started
|
||||
|
||||
Make sure you follow the setup guide of [Qode][qode_setup] so that you have a build environment ready for Qode.
|
||||
|
||||
### MacOSX:
|
||||
|
||||
**Requirements**
|
||||
|
||||
1. Node version: > 11
|
||||
2. CMake 3.1 and up (Installation instructions can be found here: https://cmake.org/install/)
|
||||
3. Make, GCC v7
|
||||
4. Qt (_Optional_): Make sure you followed the setup instructions from [Qode][qode_setup]
|
||||
|
||||
### Windows:
|
||||
|
||||
**Requirements**
|
||||
|
||||
1. Node version: > 11
|
||||
2. CMake 3.1 and up (Installation instructions can be found here: https://cmake.org/install/)
|
||||
3. Visual Studio Community 2017
|
||||
4. Powershell
|
||||
5. Qt (_Optional_): Make sure you followed the setup instructions from [Qode][qode_setup]
|
||||
|
||||
### Linux:
|
||||
|
||||
Supported versions: Ubuntu 17.10 and up
|
||||
|
||||
**Requirements**
|
||||
|
||||
1. Node version: > 11
|
||||
2. CMake 3.1 and up (Installation instructions can be found here: https://cmake.org/install/)
|
||||
3. Make, GCC v7, pkg-config
|
||||
4. Qt (_Optional_): Make sure you followed the setup instructions from [Qode][qode_setup]
|
||||
|
||||
On Ubuntu: `$ sudo apt-get install pkg-config build-essentials` should install everything except Qt5.
|
||||
|
||||
Note: If you are using your own version of Qt make sure to
|
||||
|
||||
`export PKG_CONFIG_PATH="<path to qt installation>/5.13.0/gcc_64/lib/pkgconfig"`
|
||||
|
||||
### Common:
|
||||
|
||||
1. Once you have setup the platform specific stuff as mentioned above, follow these:
|
||||
2. `git clone` this repo.
|
||||
3. `yarn install`
|
||||
4. `yarn build:addon`
|
||||
5. `yarn dev`
|
||||
|
||||
If you want to run with your own version of Qt make sure to pass qt_home_dir variable when building addon.
|
||||
|
||||
`npm run rebuild:addon [--qt_home_dir=/path/to/qt]`
|
||||
|
||||
[qode_setup]: https://github.com/nodegui/qode
|
||||
@@ -0,0 +1,150 @@
|
||||
# Event handling
|
||||
|
||||
In Qt you can respond to an external event like a key press via event handling. Events always are processed by the event loop. Alongside events Qt also has a concept of Signals/Slots. Signals and slots are used to primarily communicate between widgets (more precisely QObjects). So the most common way of interacting between Qt Widgets is done through signals/slots. (More details here: https://doc.qt.io/qt-5/signalsandslots.html). Hence we would be implementing support for both events and signals.
|
||||
|
||||
**Technicals:**
|
||||
|
||||
> An event is a message encapsulated in a class (QEvent) which is processed in an event loop and dispatched to a recipient that can either accept the message or pass it along to others to process. They are usually created in response to external system events like mouse clicks.
|
||||
> Signals and Slots are a convenient way for QObjects to communicate with one another and are more similar to callback functions. In most circumstances, when a "signal" is emitted, any slot function connected to it is called directly. The exception is when signals and slots cross thread boundaries. In this case, the signal will essentially be converted into an event.
|
||||
|
||||
# Implementing Signal handling
|
||||
|
||||
In Qt signals and slots are used to communicate between different qt widgets. So they can be used to implement things like
|
||||
onClick, onHover etc.
|
||||
|
||||
The way Qt Signals work is explained here:
|
||||
|
||||
https://doc.qt.io/qt-5/signalsandslots.html
|
||||
|
||||
The way you use them in Qt for a PushButton is explained here:
|
||||
https://wiki.qt.io/How_to_Use_QPushButton#Signals
|
||||
|
||||
# Adding signal/event handling support to a NodeWidget
|
||||
|
||||
We will take the example of PushButton
|
||||
|
||||
**Javascript**
|
||||
|
||||
Steps:
|
||||
|
||||
The widget should inherit from `NodeWidget`. NodeWidget inherits from EventWidget internally. EventWidget constructor needs native object while initialising. So arrange your code such that native object gets initialised before calling `super(native)`.
|
||||
|
||||
EventWidget adds `addEventListener` method to the widget which can be called
|
||||
like this:
|
||||
|
||||
```js
|
||||
button.addEventListener("clicked", () => {
|
||||
console.log("clicked");
|
||||
});
|
||||
```
|
||||
|
||||
To help the user know what all signals/events are supported, export an enum like `QPushButtonEvents` as shown below.
|
||||
|
||||
So the user can then use it as below:
|
||||
|
||||
```js
|
||||
button.addEventListener(QPushButtonEvents.clicked, () => {
|
||||
console.log("clicked");
|
||||
});
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
import addon from "../../core/addon";
|
||||
import { NodeWidget } from "../../QtGui/QWidget";
|
||||
import { BaseWidgetEvents } from "../../core/EventWidget";
|
||||
|
||||
export const QPushButtonEvents = Object.freeze({
|
||||
...BaseWidgetEvents,
|
||||
clicked: "clicked",
|
||||
pressed: "pressed",
|
||||
released: "released",
|
||||
toggled: "toggled"
|
||||
});
|
||||
|
||||
export class QPushButton extends NodeWidget {
|
||||
native: NativeElement;
|
||||
constructor(parent?: NodeWidget) {
|
||||
let native;
|
||||
if (parent) {
|
||||
native = new addon.QPushButton(parent.native);
|
||||
} else {
|
||||
native = new addon.QPushButton();
|
||||
}
|
||||
super(native);
|
||||
this.parent = parent;
|
||||
this.native = native;
|
||||
// bind member functions
|
||||
this.setText.bind(this);
|
||||
}
|
||||
|
||||
setText(text: string | number) {
|
||||
this.native.setText(`${text}`);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**C++**
|
||||
|
||||
Steps:
|
||||
|
||||
1. `NPushButton`
|
||||
|
||||
Inherit from both QPushButton and NodeWidget. Make sure you have added NODEWIDGET_IMPLEMENTATIONS macro. This adds a crucial method for events support. It will override `event(QEvent *)` method of QPushbutton so that nodejs can listen to the events of this widget. This makes sure we convert all the QEvent's of this widget to an event for the nodejs event emitter.
|
||||
|
||||
Also make sure to connect all the signals of the widgets to the event emitter instance from NodeJS. This way we kindof convert the signal to a simple nodejs event.
|
||||
|
||||
```cpp
|
||||
#pragma once
|
||||
|
||||
#include <QPushButton>
|
||||
#include "src/cpp/core/NodeWidget/nodewidget.h"
|
||||
#include "napi.h"
|
||||
|
||||
class NPushButton: public QPushButton, public NodeWidget
|
||||
{
|
||||
NODEWIDGET_IMPLEMENTATIONS(QPushButton)
|
||||
public:
|
||||
using QPushButton::QPushButton; //inherit all constructors of QPushButton
|
||||
|
||||
// override this method and implement all signals here
|
||||
void connectWidgetSignalsToEventEmitter() {
|
||||
// Qt Connects: Implement all signal connects here
|
||||
QObject::connect(this, &QPushButton::clicked, [=](bool checked) {
|
||||
Napi::Env env = this->emitOnNode.Env();
|
||||
Napi::HandleScope scope(env);
|
||||
this->emitOnNode.Call({ Napi::String::New(env, "clicked"), Napi::Value::From(env, checked) });
|
||||
});
|
||||
QObject::connect(this, &QPushButton::released, [=]() {
|
||||
Napi::Env env = this->emitOnNode.Env();
|
||||
Napi::HandleScope scope(env);
|
||||
this->emitOnNode.Call({ Napi::String::New(env, "released") });
|
||||
});
|
||||
QObject::connect(this, &QPushButton::pressed, [=]() {
|
||||
Napi::Env env = this->emitOnNode.Env();
|
||||
Napi::HandleScope scope(env);
|
||||
this->emitOnNode.Call({ Napi::String::New(env, "pressed") });
|
||||
});
|
||||
QObject::connect(this, &QPushButton::toggled, [=](bool checked) {
|
||||
Napi::Env env = this->emitOnNode.Env();
|
||||
Napi::HandleScope scope(env);
|
||||
this->emitOnNode.Call({ Napi::String::New(env, "toggled"), Napi::Value::From(env, checked) });
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
**Additional**
|
||||
|
||||
Make sure `npushbutton.h` is added to `config/moc.json`.
|
||||
And run `npm run automoc` before running `npm run build:addon`
|
||||
|
||||
We need to run Qt's MOC (Meta Object Compiler) on the file whenever we use Q_OBJECT in a class or use QObject::connect. This is so that Qt can expand the macros and add necessary implementations to our class.
|
||||
|
||||
# How does it work ?
|
||||
|
||||
1. On JS side for each widget instance we create an instance of NodeJS's Event Emitter. This is done by the class `EventWidget` from which `NodeWidget` inherits
|
||||
2. We send this event emiiter's `emit` function to the C++ side by calling `initNodeEventEmitter` method and store a pointer to the event emitter's emit function using `emitOnNode`. initNodeEventEmitter function is added by a macro from EventWidget (c++). You can find the initNodeEventEmitter method with the event widget macros.
|
||||
3. We setup Qt's connect method for all the signals that we want to listen to and call the emitOnNode (which is actually emit from Event emitter) whenever a signal arrives. This is done manually on every widget by overriding the method `connectWidgetSignalsToEventEmitter`. Check `npushbutton.h` for details. This takes care of all the signals of the widgets. Now to export all qt events of the widget, we had overriden the widgets `event(Event*)` method to listen to events received by the widget and send it to the event emitter. This is done inside the EVENTWIDGET_IMPLEMENTATIONS macro
|
||||
@@ -0,0 +1,100 @@
|
||||
# How styling works?
|
||||
|
||||
There are two parts to styling.
|
||||
|
||||
1. Layout
|
||||
2. Painting : Colors, text color, etc
|
||||
|
||||
## Painting
|
||||
|
||||
The regular styles such as text color, font-size, font weight etc are achieved using Qt's stylesheet.
|
||||
We just call Qt's setStyleSheet method on the native widget and pass in the styles as a string.
|
||||
|
||||
This method is implemented as part of `QWIDGET_WRAPPED_METHODS_DECLARATION` in `qwidget_macro.h`.
|
||||
So all widgets using this macro will get the setStyleSheet method.
|
||||
|
||||
## Layout
|
||||
|
||||
Layouting is basically positioning widgets on the screen. It takes into account everything from margins, paddings, positions etc. Our main focus will be Flex layouting. For flex layout we are using yoga library from facebook. This is the same library used by React Native. Before looking at flaxlayout in this libarary I recommend browsing Yoga's C API doc here: `deps/yoga/doc.md`
|
||||
|
||||
In case `nodegui`. I have implemented a custom Qt layout by extending `QLayout`, hence Qt is able to take over automagically when window is resized or any other layouting event occurs.
|
||||
You can find the implementation at `src/cpp/core/FlexLayout/flexlayout.h`.
|
||||
|
||||
The c++ api provided by this custom layout looks like this:
|
||||
|
||||
```cpp
|
||||
// FlexLayout is a custom Layout built for QT. This layout will be used to layout qt widgets using facebook's yoga library.
|
||||
// Thus giving ability to layout Qt Widgets using Flexbox.
|
||||
// Usage:
|
||||
QWidget *container = new QWidget();
|
||||
YGNodeRef root = YGNodeNew();
|
||||
YGNodeRef child1 = YGNodeNew();
|
||||
YGNodeRef child2 = YGNodeNew();
|
||||
FlexLayout * flayout = new FlexLayout(container,root);
|
||||
// or FlexLayout * flayout = new FlexLayout(container);
|
||||
// or FlexLayout *flayout = new FlexLayout();
|
||||
|
||||
flayout->addWidget(btn1, child1);
|
||||
flayout->addWidget(btn2, child2);
|
||||
|
||||
```
|
||||
|
||||
This layout is exported to Javascript side via `src/cpp/core/FlexLayout/flexlayout_wrap.h`
|
||||
|
||||
The JS Api looks like this:
|
||||
|
||||
```js
|
||||
const view = new QWidget(rootView);
|
||||
|
||||
const flayout = new FlexLayout(); // Create layout
|
||||
flayout.setFlexNode(view.getFlexNode()); // Set widget's flex as layout's flex node.
|
||||
|
||||
view.setLayout(flayout); // set layout as view's layout
|
||||
|
||||
const label = new QLabel(view);
|
||||
label.setText("Hello12321");
|
||||
|
||||
const label2 = new QLabel(view);
|
||||
label2.setText("SECOND LABEL");
|
||||
|
||||
flayout.addWidget(label2, label2.getFlexNode()); // Add child to layout
|
||||
flayout.addWidget(label, label.getFlexNode()); // Add child to layout
|
||||
```
|
||||
|
||||
### Implementation
|
||||
|
||||
1. Every widget that wants to use flex layout should extend from `flexItem` found at `src/cpp/core/FlexLayout/flexitem.h`.
|
||||
For example, see `nlabel.h` at `src/cpp/QtWidgets/QLabel/nlabel.h`
|
||||
|
||||
NLabel inherits from `NodeWidget` which inherits from `YogaWidget` which inturn inherits from `FlexItem`
|
||||
|
||||
- `FlexItem` adds a YogaNode to every widget.
|
||||
- `YogaWidget` adds Yoga specific q-properties to the widget, which is useful to assign yoga properties via qstylesheet. More on this below.
|
||||
- `NodeWidget` adds layout support via `YogaWidget` and event handling support via `EventWidget`
|
||||
|
||||
### FlexItem
|
||||
|
||||
FlexItem : `src/cpp/core/FlexLayout/flexitem.h` add flexnode to each widget.
|
||||
FlexItem adds methods like getFlexNode.
|
||||
|
||||
### YogaWidget
|
||||
|
||||
Qt StyleSheet allows you to specify style properties just like in web. You could specify font-size, margin, padding, etc. Qt StyleSheet also allows custom style properties via Qt's q-property system.
|
||||
|
||||
So in order to enable yoga based properties like alignItems, justifyContent, flex, etc via qt's stylesheet we
|
||||
declare and define q properties for each of those custom properties we want.
|
||||
This allows us to use something like:
|
||||
|
||||
```js
|
||||
view.setStyleSheet(`
|
||||
background-color:green;
|
||||
qproperty-flex: 1;
|
||||
qproperty-alignItems: 'center';
|
||||
`);
|
||||
```
|
||||
|
||||
Notice `qproperty-` prefix? These are the custom q-properties we defined in `YogaWidget.h`. We do not need to prefix `qproperty-` if a stylehsheet string is passed through `StyleSheet.create()`. StyleSheet.create has an autoprefixer which will do the right thing.
|
||||
|
||||
### NodeWidget
|
||||
|
||||
Every widget we implement should inherit from NodeWidget. This helps us add all the properties we want in the widgets via a single class. NodeWidget is the class that contains properties and methods shared by all widgets. This class allows us to add features to all widgets easily.
|
||||
@@ -0,0 +1,3 @@
|
||||
# Exporting a new method from a widget
|
||||
|
||||
# Exporting a new widget from scratch
|
||||
Reference in New Issue
Block a user