Adds documentation for all internal widgets.

This commit is contained in:
Atul R 2019-08-02 22:46:03 +02:00
parent 8ee0b9ad51
commit 255d0eef91
10 changed files with 193 additions and 7 deletions

View File

@ -13,4 +13,4 @@
"../src/cpp/autogen/nradiobutton_moc.cpp"
]
}
}
}

View File

@ -36,9 +36,15 @@
- [QMainWindow (Window)](api/QMainWindow.md)
- [QWidget (View)](api/QWidget.md)
- [FlexLayout](api/FlexLayout.md)
### Internal Modules
- [NodeWidget](api/NodeWidget.md)
- [NodeLayout](api/NodeLayout.md)
- [FlexLayout](api/FlexLayout.md)
- [EventWidget](api/EventWidget.md)
- [Component](api/Component.md)
- [YogaWidget](api/YogaWidget.md)
## Development

23
docs/api/Component.md Normal file
View File

@ -0,0 +1,23 @@
## Class: Component
> Abstract class that is root most base class for all widgets and layouts in the NodeGui World.
**This class is used to add core properties to all widgets, layouts etc in NodeGui world. Currently it helps us maintain references to the native C++ instance of the widget or layout. It also helps in preventing gc of child elements of a layout or widget**
`Component` is an abstract class and hence no instances of the same should be created. It exists so that we can add core functionalities to all widgets and layouts easily. This is an internal class.
**Component is the base class for YogaWidget and NodeLayout which means all widgets and layouts inherit it aswell. Its the root base class in NodeGui world**
To get a clearer picture you can take a look at the Component source code here: `src/lib/core/Component/index.ts`
### Static Methods
There are no public static methods for Component.
### Instance Properties
There are no public instance properties for Component.
### Instance Methods
There are no public instance methods for Component.

60
docs/api/EventWidget.md Normal file
View File

@ -0,0 +1,60 @@
## Class: EventWidget
> Abstract class that adds event handling support to all widgets.
**This class implements an event emitter and merges it with Qt's event and signal system. It allows us to register and unregister event and signal listener at will from javascript**
`EventWidget` is an abstract class and hence no instances of the same should be created. It exists so that we can add event handling functionalities to all widget's easily. This is an internal class.
**EventWidget is the base class for NodeWidget which means all widgets inherit it aswell. It inherits from another abstract class [YogaWidget](api/YogaWidget.md)**
### Example
```javascript
const { QWidget, QWidgetEvents } = require("@nodegui/nodegui");
const view = new QWidget();
// addEventListener is a method from EventWidget
view.addEventListener("MouseMove", () => {
console.log("mouse moved");
});
or;
// addEventListener is a method from EventWidget
view.addEventListener(QWidgetEvents.MouseMove, () => {
console.log("mouse moved");
});
```
EventWidget will contain all methods and properties that are useful to handle events and signals of widgets in the NodeGui world.
### Static Methods
EventWidget can access all the static methods defined in [YogaWidget](api/YogaWidget.md)
### Instance Properties
EventWidget can access all the instance properties defined in [YogaWidget](api/YogaWidget.md)
### Instance Methods
EventWidget can access all the instance methods defined in [YogaWidget](api/YogaWidget.md)
Additionally it also has the following instance methods:
#### `widget.addEventListener()`
Adds an event listener to the widget to listen to events that occur on a widget.
- `eventType` string - The event or signal you wish to listen to for the widget. Every widget exports its own enum of all possible events and signal types it can take. For example: `QWidget` exports `QWidgetEvents`, `QPushButton` exports `QPushButtonEvents`.
- `callback` (payload?: NativeEvent | any) => void - A callback function to invoke when an event occurs. Usually you receive a nativeEvent or a string as argument.
#### `widget.removeEventListener()`
Removes the specified event listener from the widget.
- `eventType` string - The event or signal for which you wish to remove the listener.
- `callback` Function (_Optional_) - If specified the removeEventListener will remove the specified listener only, otherwise all eventlisteners of the eventType on the widget will be removed.

View File

@ -0,0 +1,59 @@
## Class: NodeLayout
> Abstract class to add functionalities common to all Layout.
**This class implements all methods, properties of Qt's [QLayout class](https://doc.qt.io/qt-5/qlayout.html) so that it can be inherited by all layouts**
`NodeLayout` is an abstract class and hence no instances of the same should be created. It exists so that we can add similar functionalities to all layout's easily. Additionally it helps in typechecking process.
**NodeLayout is the base class for all layouts. It inherits from another abstract class [Component](api/Component.md)**
### Example
```javascript
const {
NodeLayout,
NodeWidget,
FlexLayout,
GridLayout,
QPushButton,
QWidget
} = require("@nodegui/nodegui");
// addChildToLayout can accept any layout since it expects NodeLayout
const addChildToLayout = (layout: NodeLayout, widget: NodeWidget) => {
layout.addWidget(widget);
};
addChildToLayout(new FlexLayout(), new QPushButton());
addChildToLayout(new GridLayout(), new QWidget());
```
NodeLayout will list all methods and properties that are common to all layouts in the NodeGui world.
### Static Methods
NodeLayout can access all the static methods defined in [Component](api/Component.md)
### Instance Properties
NodeLayout can access all the instance properties defined in [Component](api/Component.md)
Additionally it also has the following instance properties:
#### `layout.type`
This will return the string `layout` for all layouts.
### Instance Methods
NodeLayout can access all the instance methods defined in [Component](api/Component.md)
Additionally it also has the following instance methods:
#### `layout.addWidget()`
This is an abstract method in NodeLayout class. All Layouts inheriting from NodeLayout should implement this method.
- `childWidget` NodeWidget - Any widget in the NodeGui world.
- `...args` any[] - Additional params as required by the layout.

View File

@ -4,7 +4,7 @@
**This class implements all methods, properties of Qt's [QWidget class](https://doc.qt.io/qt-5/qwidget.html) so that it can be inherited by all widgets**
`NodeWidget` is an abstract class and hence no instances of the same should be created. It exists so that we can add similar functionalities to all widget's easily. Additionally it helps in typechecking process.
`NodeWidget` is an abstract class and hence no instances of the same should be created. It exists so that we can add similar functionalities to all widget's easily. Additionally it helps in typechecking process. If you wish to create a `div` like widget use [QWidget](api/QWidget.md) instead.
**NodeWidget is the base class for all widgets. It inherits from another abstract class [EventWidget](api/EventWidget.md)**
@ -68,6 +68,7 @@ Resizes the widget. It calls the native method [QWidget: resize](https://doc.qt.
#### `widget.close()`
Closes this widget. It calls the native method [QWidget: close](https://doc.qt.io/qt-5/qwidget.html#close).
Returns true if the widget was closed; otherwise returns false.
#### `widget.setLayout()`

37
docs/api/YogaWidget.md Normal file
View File

@ -0,0 +1,37 @@
## Class: YogaWidget
> Abstract class to add common functionality related to Flex layout to all Widgets.
**This class implements methods related to flex layout required to be present in all widgets**
`YogaWidget` is an abstract class and hence no instances of the same should be created. It exists so that we can add similar functionalities related to flex layout to all widget's easily. We implement flex layout using a library called [Yoga](https://github.com/facebook/yoga). As part of yoga every widget needs to store its own flex properties such as alignItems, flexDirection etc. This is done with the help of YogaWidget.
**YogaWidget is the base class for EventWidget which means all widgets inherit it aswell. It inherits from another abstract class [Component](api/Component.md)**
```javascript
const { QWidget } = require("@nodegui/nodegui");
const view = new QWidget();
// getFlexNode is a method from YogaWidget
const flexNode = view.getFlexNode();
```
YogaWidget helps in storing all flex properties of a widget.
### Static Methods
YogaWidget can access all the static methods defined in [Component](api/Component.md)
### Instance Properties
YogaWidget can access all the instance properties defined in [Component](api/Component.md)
### Instance Methods
YogaWidget can access all the instance methods defined in [Component](api/Component.md)
Additionally it also has the following instance methods:
#### `widget.getFlexNode()`
Returns a native reference to the flex node used in c++ instance for the widget. This is not a regular javascript object and hence no methods or properties can be accessed from it. It exists so that we pass around a widgets flex node to layouts, etc.

View File

@ -34,8 +34,8 @@ Napi::Value resize(const Napi::CallbackInfo& info) { \
Napi::Value close(const Napi::CallbackInfo& info) { \
Napi::Env env = info.Env(); \
Napi::HandleScope scope(env); \
this->instance->close(); \
return env.Null(); \
bool hasClosed = this->instance->close(); \
return Napi::Boolean::New(env, hasClosed); \
} \
\
Napi::Value setLayout(const Napi::CallbackInfo& info){ \

View File

@ -16,7 +16,7 @@ export abstract class NodeWidget extends EventWidget {
this.native.resize(width, height);
};
close = () => {
this.native.close();
return this.native.close();
};
setLayout = (parentLayout: NodeLayout) => {
const flexLayout = parentLayout as FlexLayout;

View File

@ -1,6 +1,6 @@
export type NativeElement = any;
export abstract class Component {
protected children = new Set<Component>(); //TODO if react stub these as react will manage the instances from beings gc'ed better.
protected children = new Set<Component>();
protected parent?: Component;
abstract native: NativeElement;
}