Added dev docs
This commit is contained in:
Atul R
parent
a6bd0237ab
commit
5b1b4d496a
@ -57,6 +57,6 @@
|
||||
- [Events usage](todo)
|
||||
- [Yoga properties using stylesheet usage](todo)
|
||||
|
||||
## Development
|
||||
## Development/Contributor's Guide
|
||||
|
||||
See [development/README.md](development/README.md)
|
||||
See [development](development/README.md)
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
# 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)
|
||||
@ -1,78 +1,4 @@
|
||||
# Setup project for development
|
||||
|
||||
## Development setup and getting started
|
||||
|
||||
This guide is for setting up `nodegui` for contributors of nodegui.
|
||||
The actual getting started guide for users will be added once we reach a bit of stable level.
|
||||
|
||||
Make sure you have setup `qode` and installed it globally.
|
||||
|
||||
### MacOSX:
|
||||
|
||||
**Requirements**
|
||||
|
||||
1. Node version: > 9
|
||||
2. Python and gcc
|
||||
3. Make sure you dont have spaces inside your home path. NodeGYP has issues with spaces in the path. https://github.com/nodejs/node-gyp/issues/209
|
||||
|
||||
**Setting up**
|
||||
|
||||
1. Install latest version of Qt (5.12) via homebrew only.
|
||||
|
||||
```
|
||||
brew install qt5
|
||||
```
|
||||
|
||||
### Windows:
|
||||
|
||||
**Requirements**
|
||||
|
||||
1. Node version: > 9
|
||||
2. Python and MSVC++
|
||||
|
||||
**Setting up**
|
||||
-- Instructions will be added soon --
|
||||
|
||||
### Linux:
|
||||
|
||||
**Requirements**
|
||||
|
||||
1. Node version: > 9
|
||||
2. Python, Make, GCC, pkg-config and Qt5 <br/>
|
||||
|
||||
On Ubuntu: `$ sudo apt-get install pkg-config build-essentials` should install everything except Qt5.
|
||||
|
||||
**Setting up**
|
||||
|
||||
1. Make sure you have downloaded and installed Qt5 sdk.
|
||||
2. Before running `yard build`, do
|
||||
`export PKG_CONFIG_PATH="<path to qt installation>/5.11.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. Keep note of the install directory of qt. You should probably find it at `/usr/local/Cellar/qt/5.12.1`. Copy this path and
|
||||
edit the file `config/common.gypi`. <br/>
|
||||
Change the field
|
||||
|
||||
```
|
||||
'qt_home_dir': '<!(echo $QN_QT_HOME_DIR)',
|
||||
```
|
||||
|
||||
to
|
||||
|
||||
```
|
||||
'qt_home_dir': '/usr/local/Cellar/qt/5.12.1',
|
||||
```
|
||||
|
||||
4. `yarn install`
|
||||
5. `yarn build:addon`
|
||||
6. `yarn dev`
|
||||
|
||||
## What is this library ?
|
||||
## 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.
|
||||
|
||||
@ -138,7 +64,7 @@ Once you have done that check out `src/cpp/main.cpp` and `config/application.gyp
|
||||
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`.
|
||||
|
||||
## General Idea for Wrapping a widget.
|
||||
## 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.
|
||||
|
||||
@ -175,7 +101,7 @@ This will run moc on `headername.h` and generate `headername_moc.cpp`. We will i
|
||||
|
||||
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:
|
||||
## 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
|
||||
68
docs/development/setting-up.md
Normal file
68
docs/development/setting-up.md
Normal file
@ -0,0 +1,68 @@
|
||||
# Setup project for development
|
||||
|
||||
## Development setup and getting started
|
||||
|
||||
### MacOSX:
|
||||
|
||||
**Requirements**
|
||||
|
||||
1. Node version: > 9
|
||||
2. Python and gcc
|
||||
3. Make sure you dont have spaces inside your home path. NodeGYP has issues with spaces in the path. https://github.com/nodejs/node-gyp/issues/209
|
||||
|
||||
**Setting up**
|
||||
|
||||
1. Install latest version of Qt (5.12) via homebrew only.
|
||||
|
||||
```
|
||||
brew install qt5
|
||||
```
|
||||
|
||||
### Windows:
|
||||
|
||||
**Requirements**
|
||||
|
||||
1. Node version: > 9
|
||||
2. Python and MSVC++
|
||||
|
||||
**Setting up**
|
||||
-- Instructions will be added soon --
|
||||
|
||||
### Linux:
|
||||
|
||||
**Requirements**
|
||||
|
||||
1. Node version: > 9
|
||||
2. Python, Make, GCC, pkg-config and Qt5 <br/>
|
||||
|
||||
On Ubuntu: `$ sudo apt-get install pkg-config build-essentials` should install everything except Qt5.
|
||||
|
||||
**Setting up**
|
||||
|
||||
1. Make sure you have downloaded and installed Qt5 sdk.
|
||||
2. Before running `yard build`, do
|
||||
`export PKG_CONFIG_PATH="<path to qt installation>/5.11.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. Keep note of the install directory of qt. You should probably find it at `/usr/local/Cellar/qt/5.12.1`. Copy this path and
|
||||
edit the file `config/common.gypi`. <br/>
|
||||
Change the field
|
||||
|
||||
```
|
||||
'qt_home_dir': '<!(echo $QN_QT_HOME_DIR)',
|
||||
```
|
||||
|
||||
to
|
||||
|
||||
```
|
||||
'qt_home_dir': '/usr/local/Cellar/qt/5.12.1',
|
||||
```
|
||||
|
||||
4. `yarn install`
|
||||
5. `yarn build:addon`
|
||||
6. `yarn dev`
|
||||
@ -134,7 +134,7 @@ public:
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
```
|
||||
|
||||
**Additional**
|
||||
|
||||
@ -147,5 +147,4 @@ We need to run Qt's MOC (Meta Object Compiler) on the file whenever we use Q_OBJ
|
||||
|
||||
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
|
||||
```
|
||||
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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user