NodeUI
Create WinForm easily with the power of NodeUI module
NodeUI is designed to be the simplest way possible to make lightweight WinForms in NodeJS.
📑
Table of contentsUpdates
- 24/03/22 :
- Added a ProgressBar Control
- Added and modified 47 times the ReadMe to get it finally working
- Added a new default icon for news UI
Installation
Prerequisite
- Windows
- NodeJS
$npm i NodeUI
Example Code
const NodeUI = require("NodeUI");
Creating a new WinForm with some properties
var UI = new NodeUI({
visible: true,
backColor: "#FFFFFF",
title: "New Form",
width: 750,
icon: "./icon.ico",
});
Creating a new label on the UI
var newLabel = UI.Label({
text: "Hey, i am new label !",
x: 20,
y: 10,
width: 60
});
Working with events
UI.on('ready', () => {
newLabel.text = "UI SEEMS READY !";
UI.eval(`return "ALIVE"`); // Evaluate a string as C# code
});
newLabel.on('click', () => {
UI.title = "newLabel has been clicked !";
})
// Evaluation result from the previous UI Function call (Returned: "ALIVE")
UI.on('evalResult', function(response) {
console.log(response);
});
WinForm creation and proprieties
const NodeUI = require("NodeUI");
// A control can be a Button, a Label, a TextBox, a CheckBox etc..
// UI is the constructor, holding all main events and is able to create new controls
var UI = new NodeUI();
Properties [GETTER/SETTER]
GET | SET | DESCRIPTION |
---|---|---|
UI.x | UI.x = int | WinForm x position relative to the current screen |
UI.y | UI.y = int | WinForm y position relative to the current screen |
UI.tag | NONE | Identifier that is unique to each form |
UI.icon | UI.icon = string | WinForm icon (C:/.../image.png | ./image.png ) |
UI.width | UI.width = int | WinForm width |
UI.title | UI.title = string | WinForm title |
UI.height | UI.height = int | WinForm height |
UI.closed | NONE | Check if the WinForm has been closed |
UI.topMost | UI.topMost = bool | WinForm position on top or not of all window |
UI.enabled | UI.enabled = bool | WinForm being interactible with |
UI.visible | UI.visible = bool | WinForm visibility |
UI.foreColor | UI.foreColor = string e.g "#FF0000" | WinForm elements color (Has to be HEX with # | Transparent is #FF000000) |
UI.backColor | UI.backColor = string e.g "#FF0000" | WinForm background color (Has to be HEX with # | Transparent is #FF000000) |
UI.backImage | UI.backImage = string e.g "./image.png" | WinForm background image (C:/.../image.png | ./image.png ) |
UI Getters, Setters and Functions Examples
get tag() {return this.#config.tag}
notify(notification){this.#applyConfig({notify: notification})}
eval(evalString) {this.#applyConfig({evalString: evalString})}
get visible() {return this.#config.visible}
set visible(visible) {this.#applyConfig({visible: visible})}
get title() {return this.#config.title}
set title(title) {this.#applyConfig({title: title})}
get closed() {return this.#config.closed}
close() {this.#applyConfig({close: true})}
get foreColor() {return this.#config.foreColor}
set foreColor(foreColor) {this.#applyConfig({foreColor: foreColor})}
get backColor() {return this.#config.backColor}
set backColor(backColor) {this.#applyConfig({backColor: backColor})}
get enabled() {return this.#config.enabled}
set enabled(enabled) {this.#applyConfig({enabled: enabled})}
get backImage() {return this.#config.backImage}
set backImage(backImage) {this.#applyConfig({backImage: backImage})}
get topMost() {return this.#config.topMost}
set topMost(topMost) {this.#applyConfig({topMost: topMost})}
get x() {return this.#config.xPos}
set x(xPos) {this.#applyConfig({x: xPos })}
get y() {return this.#config.y }
set y(yPos) {this.#applyConfig({y: yPo })};
get width() {return this.#config.width}
set width(width) {this.#applyConfig({width: width})}
get height() {return this.#config.height}
set height(height) {this.#applyConfig({height: height})}
get icon() {return this.#config.icon}
set icon(icon) {this.#applyConfig({icon: icon})}
get consoleVisible() {return this.#config.consoleVisible};
set consoleVisible(consoleVisible) {this.#applyConfig({consoleVisible: consoleVisiblel})}
UI Function
List of Functions for UI
// MessageBox that will be shown
UI.notify("MessageBox !")
// Function that will make able the user to execute C# on the fly
// NOTE: You need to provide a return
// NOTE: Returned content (can be custom) will be transmited trought the UI event 'evalResult' (See Bottom)
// NOTE: Executed code is not linked to the main form, anything executed is being ran inside a [CodeDomProvider](https://docs.microsoft.com/en-us/dotnet/api/system.codedom.compiler.codedomprovider?view=dotnet-plat-ext-6.0)
UI.eval(` /
MessageBox.Show("C# Evaluated Code");
return 0.ToString();
`)
// Close the WinForm (Not required)
UI.close();
UI Events
UI and all of the futurely created controls have dedicated events.
List of events for UI
UI.on('ready', () => { }); // Can be used when UI is ready
UI.on('warning', function(warning) { }); // Warnings are not critical but interesting to look at for potential fix
UI.on('error', function(error) { }); // Errors are critical and need to be A. Looked at or B. Reported to us
UI.on('click', () => { }); // WinForm is being clicked on
UI.on('mouseEnter', () => { }); // Mouse enter the WinForm
UI.on('mouseLeave', () => { }); // Mouse leave the WinForm
UI.on('mouseMove', function(x, y) { }); // Mouse move over the WinForm
UI.on('uiClose', () => { }); // When the WinForm is being resized
UI.on('notificationClosed', () => { }); // When a notification from UI.notify has been closed
UI.on('evalResult', function(result) { }); // Returned content from the function UI.eval
Controls Examples
New UI Label
var newLabel = UI.Label({ [PROPRIETIES] });
Listing Getters, Setters and Functions
get parent() {return this.#labelConfig.parent}
get tag() {return this.#labelConfig.tag}
get text() {return this.#labelConfig.text}
set text(text) {this.#applyConfig({text: text})}
get x() {return this.#labelConfig.xPos}
set x(xPos) {this.#applyConfig({x: xPos})}
get y() {return this.#labelConfig.y}
set y(yPos) {this.#applyConfig({y: yPos})};
get width() {return this.#labelConfig.width}
set width(width) {this.#applyConfig({width: width})}
get height() {return this.#labelConfig.height}
set height(height) {this.#applyConfig({height: height})};
get visible() {return this.#labelConfig.visible}
set visible(visible) {this.#applyConfig({visible: visible})}
get deleted() {return this.#labelConfig.deleted}
delete() {this.#applyConfig({delete: true})}
get foreColor() {return this.#labelConfig.foreColor}
set foreColor(foreColor) {this.#applyConfig({foreColor: foreColor})}
get backColor() {return this.#labelConfig.backColor}
set backColor(backColor) {this.#applyConfig({backColor: backColor})}
bringToFront() {this.#applyConfig({bringToFront: true})}
Event Lists:
newLabel.on('click', () => { });
newLabel.on('mouseEnter', () => { });
newLabel.on('mouseLeave', () => { });
newLabel.on('mouseMove', function(x, y) { });
New UI Button
var newButton = UI.Button({ [PROPRIETIES] })
Listing Getters, Setters and Functions
get parent() {return this.#buttonConfig.parent}
get tag() {return this.#buttonConfig.tag}
get text() {return this.#buttonConfig.text}
set text(text) {this.#applyConfig({text: text})}
get x() {return this.#buttonConfig.xPos}
set x(xPos) {this.#applyConfig({x: xPos})}
get y() {return this.#buttonConfig.y}
set y(yPos) {this.#applyConfig({y: yPos})};
get width() {return this.#buttonConfig.width}
set width(width) {this.#applyConfig({width: width})}
get height() {return this.#buttonConfig.height}
set height(height) {this.#applyConfig({height: height})};
get visible() {return this.#buttonConfig.visible}
set visible(visible) {this.#applyConfig({visible: visible})}
get deleted() {return this.#buttonConfig.deleted}
delete() {this.#applyConfig({delete: true})}
get backImage() {return this.#config.backImage}
set backImage(backImage) {this.#applyConfig({backImage: backImage})}
get foreColor() {return this.#buttonConfig.foreColor}
set foreColor(foreColor) {this.#applyConfig({foreColor: foreColor})}
get backColor() {return this.#buttonConfig.backColor}
set backColor(backColor) {this.#applyConfig({backColor: backColor})}
get enabled() {return this.#buttonConfig.enabled}
set enabled(enabled) {this.#applyConfig({enabled: enabled})}
bringToFront() {this.#applyConfig({bringToFront: true})}
Event Lists:
newButton.on('click', () => { });
newButton.on('mouseEnter', () => { });
newButton.on('mouseLeave', () => { });
newButton.on('mouseMove', function(x, y) { });
New UI Checkbox
var newCheckBox = new UI.checkBox({ [PROPRIETIES] })
Listing Getters, Setters and Functions
get parent() {return this.#checkBoxConfig.parent}
get tag() {return this.#checkBoxConfig.tag}
get checked() {return this.#checkBoxConfig.checked}
set checked(checked) {this.#applyConfig({checked: checked})}
get x() {return this.#checkBoxConfig.xPos}
set x(xPos) {this.#applyConfig({x: xPos})}
get y() {return this.#checkBoxConfig.y}
set y(yPos) {this.#applyConfig({y: yPos})};
get width() {return this.#checkBoxConfig.width}
set width(width) {this.#applyConfig({width: width})}
get height() {return this.#checkBoxConfig.height }
set height(height) {this.#applyConfig({height: height})};
get visible() {return this.#checkBoxConfig.visible}
set visible(visible) {this.#applyConfig({visible: visible})}
get deleted() {return this.#checkBoxConfig.deleted}
delete() {this.#applyConfig({delete: true})}
get foreColor() {return this.#checkBoxConfig.foreColor}
set foreColor(foreColor) {this.#applyConfig({foreColor: foreColor})}
get backColor() {return this.#checkBoxConfig.backColor}
set backColor(backColor) {this.#applyConfig({backColor: backColor})}
get enabled() {return this.#checkBoxConfig.enabled }
set enabled(enabled) {this.#applyConfig({enabled: enabled}) }
bringToFront() {this.#applyConfig({bringToFront: true})}
Event Lists:
newCheckBox.on('mouseClick', () => { });
newCheckBox.on('mouseEnter', () => { });
newCheckBox.on('mouseLeave', () => { });
newCheckBox.on('mouseMove', function(x, y) { });
newCheckBox.on('checkChanged', function(true) { });
Note: checkChanged has one argument that is either true or false.
New UI PictureBox
var newPictureBox = UI.PictureBox({ [PROPRIETIES] });
Listing Getters, Setters and Functions
get parent() {return this.#pictureBoxConfig.parent}
get tag() {return this.#pictureBoxConfig.tag}
get x() {return this.#pictureBoxConfig.xPos}
set x(xPos) {this.#applyConfig({x: xPos})}
get y() {return this.#pictureBoxConfig.y}
set y(yPos) {this.#applyConfig({y: yPos})};
get width() {return this.#pictureBoxConfig.width}
set width(width) {this.#applyConfig({width: width})}
get height() {return this.#pictureBoxConfig.height}
set height(height) {this.#applyConfig({height: height})};
get height() {return this.#pictureBoxConfig.height}
set height(height) {this.#applyConfig({height: height})};
get visible() {return this.#pictureBoxConfig.visible}
set visible(visible) {this.#applyConfig({visible: visible})}
get deleted() {return this.#pictureBoxConfig.deleted}
delete() {this.#applyConfig({delete: true})}
get backColor() {return this.#pictureBoxConfig.backColor}
set backColor(backColor) {this.#applyConfig({backColor: backColor})}
get image() {return this.#pictureBoxConfig.image}
set image(image) {this.#applyConfig({image: image})}
bringToFront() {this.#applyConfig({bringToFront: true})}
Event Lists:
newPictureBox.on('mouseClick', () => { });
newPictureBox.on('mouseEnter', () => { });
newPictureBox.on('mouseLeave', () => { });
newPictureBox.on('mouseMove', function(x, y) { });
New UI TextBox
var newTextBox = UI.TextBox({ [PROPRIETIES] });
Listing Getters, Setters and Functions
get parent() {return this.#textBoxConfig.parent}
get tag() {return this.#textBoxConfig.tag}
get text() {return this.#textBoxConfig.text}
set text(text) {this.#applyConfig({text: text})}
get x() {return this.#textBoxConfig.xPos}
set x(xPos) {this.#applyConfig({x: xPos})}
get y() {return this.#textBoxConfig.y}
set y(yPos) {this.#applyConfig({y: yPos})};
get width() {return this.#textBoxConfig.width}
set width(width) {this.#applyConfig({width: width})}
get height() {return this.#textBoxConfig.height}
set height(height) {this.#applyConfig({height: height})};
get visible() {return this.#textBoxConfig.visible}
set visible(visible) {this.#applyConfig({visible: visible})}
get deleted() {return this.#textBoxConfig.deleted}
delete() {this.#applyConfig({delete: true})}
get foreColor() {return this.#textBoxConfig.foreColor}
set foreColor(foreColor) {this.#applyConfig({foreColor: foreColor})}
get backColor() {return this.#textBoxConfig.backColor }
set backColor(backColor) {this.#applyConfig({backColor: backColor})}
bringToFront() {this.#applyConfig({bringToFront: true})}
Event Lists:
newTextBox.on('mouseClick', () => { });
newTextBox.on('mouseEnter', () => { });
newTextBox.on('mouseLeave', () => { });
newTextBox.on('mouseMove', function(x, y) { });
newTextBox.on('textChanged', function(newText) { });
New UI TextBox
var newProgressBar = UI.ProgressBar({ [PROPRIETIES] });
Listing Getters, Setters and Functions
get parent() {return this.#textBoxConfig.parent}
get tag() {return this.#textBoxConfig.tag}
get x() {return this.#textBoxConfig.xPos}
set x(xPos) {this.#applyConfig({x: xPos})}
get y() {return this.#textBoxConfig.y}
set y(yPos) {this.#applyConfig({y: yPos})};
get width() {return this.#textBoxConfig.width}
set width(width) {this.#applyConfig({width: width})}
get height() {return this.#textBoxConfig.height}
set height(height) {this.#applyConfig({height: height})};
get visible() {return this.#textBoxConfig.visible}
set visible(visible) {this.#applyConfig({visible: visible})}
get deleted() {return this.#textBoxConfig.deleted}
delete() {this.#applyConfig({delete: true})}
get value() {return this.#textBoxConfig.value}
set value(value) {this.#applyConfig({value: value})}
bringToFront() {this.#applyConfig({bringToFront: true})}
Event Lists:
newProgressBar.on('mouseClick', () => { });
newProgressBar.on('mouseEnter', () => { });
newProgressBar.on('mouseLeave', () => { });
newProgressBar.on('mouseMove', function(x, y) { });