You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: website/docs/guides/handle-events.md
+182-1Lines changed: 182 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -3,4 +3,185 @@ sidebar_label: Handle Events
3
3
title: Handle Events
4
4
---
5
5
6
-
WIP
6
+
React NodeGui allows you to listen to various events that might originate from the underlying Qt widgets. These events can either be a simple button click or a text change on a lineedit or even something like window being hidden and shown.
7
+
8
+
In order to do this we need to attach an event listener to the respective widget.
9
+
10
+
Technically, the event listener is a NodeJs [EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter) instance that listens to events from the underlying Qt widget. The native Qt widget would send all the events to the event emitter in React NodeGui world and the user can essentially subscribe to it.
11
+
12
+
Lets see an example to see how this looks in practice.
13
+
14
+
## Event handling
15
+
16
+
The following example demonstrates how to add a clicked event listener to a button widget.
The `on` prop accepts a simple object map with event type as key and a handler function as callback for the event. You can register multiple event handlers by passing multiple events as keys and their handlers as values.
42
+
43
+
Internally, Qt widgets in nodegui has two types of events.:
44
+
45
+
- Signals: In short these are basically different for different widgets. So a button maybe have `clicked`, `pressed` signal, while a linedit may have `textChanged` signal.
46
+
- QEvents: These are common set of events for all the widgets/qobjects in NodeGui world. These are also helpful at times but typically you would end up using signals more than these common events.
47
+
48
+
In React NodeGui you can listen to both Signals and QEvents using the same `on` prop.
49
+
50
+
### useEventHandler hook and typescript support
51
+
52
+
Although you can pass in an object with event handlers to the `on` prop, its not the most efficient way. This is because everytime the render is called the `on` prop will get a new object meaning the widget will re-render every time. To solve for this we have `useEventHandler` hook.
In a nutshell, the above code uses the `useEventHandler` hook which is a wrapper over `useMemo`.
91
+
This means, the buttonHandler remains same on every render call and hence the `on` prop to Button doesnt change.
92
+
93
+
Here `objectNameChanged` is a QEvent while `clicked` and `pressed` are signals. As an app developer it really doesnt mean much but internally they are both two different things in Qt and React NodeGui allows you to use both of them using a single familar `on` prop.
94
+
95
+
Also, another point you see in this typescript code is the QPushButtonSignals. The QPushButtonSignals is a type that allows autocompletion of event handlers as you type them.
96
+
97
+
### How do I know which events are supported ?
98
+
99
+
In order to find all the supported events for a widget you can take a look at
The value you receive in the callback depends on the signal. Refer to respective signal docs for more details. All the handlers are also typed. So if you are using typescript you should get correct autocomplete for it.
139
+
140
+
#### All common QEvents for the widgets
141
+
142
+
In nodegui all these common QEvents are represented under an enum type: [WidgetEventTypes](https://docs.nodegui.org/docs/api/generated/enums/widgeteventtypes)
Note here that every QEvent handler gives a reference to native QEvent in the handler callback.
185
+
Not all native QEvent wrappers are implemented yet and we might need your help regarding those. Feel free to jump in and contribute to the nodegui core.
186
+
187
+
Also you can specify the QEvent type as a regular `MouseMove` string or use it directly from the enum `WidgetEventTypes.MouseMove`. They both achieve same things.
Copy file name to clipboardExpand all lines: website/docs/guides/networking.md
+26-1Lines changed: 26 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -3,4 +3,29 @@ sidebar_label: Networking
3
3
title: Networking
4
4
---
5
5
6
-
WIP
6
+
Many apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server.
7
+
8
+
Remember that NodeGui apps do not run in a browser and hence do not have access to browser apis. NodeGui app is essentially a Node.js app.
9
+
10
+
And in a typical Node.js application you would use a third party library like [axios](https://github.com/axios/axios), [node-fetch](https://github.com/node-fetch/node-fetch) or [frisbee](https://github.com/niftylettuce/frisbee) for achieving this functionality.
11
+
12
+
## Using Node Fetch
13
+
14
+
[Node Fetch](https://github.com/node-fetch/node-fetch) is a light-weight module that brings window.fetch to Node.js.
15
+
16
+
An example usage would look like this:
17
+
18
+
```js
19
+
constfetch=require("node-fetch");
20
+
asyncfunctiongetData() {
21
+
try {
22
+
let response =awaitfetch("https://somewebsite.com/some.json");
23
+
let responseJson =awaitresponse.json();
24
+
returnresponseJson.somecontent;
25
+
} catch (error) {
26
+
console.error(error);
27
+
}
28
+
}
29
+
```
30
+
31
+
Take a look at the [Node Fetch docs](https://github.com/node-fetch/node-fetch) for a full list of properties.
0 commit comments