Widget

In Cedro, a widget forms the foundation of every component you use to design intuitive and functional user interfaces. All UI components provided by Cedro inherit from the widget class, ensuring seamless integration and a consistent development experience. In other words, every component in Cedro is a widget.

Properties

id: string → Unique code that identifies each widget.
subscribers: Map<string, WUICallback> → Map containing the list of events associated with the widget.
padding: number → The padding space on all sides of an widget.
left: number → X coordinate where the widget is positioned relative to its parent widget.
top: number → Y coordinate where the widget is positioned relative to its parent widget.
width: number → Width of the widget.
height: number → Height of the widget.
type: WidgetTypes → Indicates the behavior of the widget relative to its parent widget. Possible values are CUSTOM, FILL & FREE.
- CUSTOM: The widget controls how and where it is positioned within its parent widget, allowing for complete customization of its layout.
- FILL: The widget will occupy all available space within the parent, ensuring efficient use of available space.
- FREE: Indicates that the widget will not assume or attempt to modify the properties left, top, width, height, bottom, or right of its body or its children.
fixedSize: number → The fixedSize property indicates that the widget has a fixed size that cannot be modified by its parent. If the parent has a vertical orientation, fixedSize determines the height of the widget. If the parent has a horizontal orientation, fixedSize determines the width of the widget.
align: WidgetAlignTypes → Indicates how the child widgets will be aligned within the widget. Its value can be HORIZONTAL or VERTICAL.
visible: boolean → Indicates whether the widget is visible or not.
parent: Widget → Parent widget.
childs: Array<Widget> → Array containing the collection of child elements of the widget.
body: HTMLElement → HTML body of the widget where all components that make up the widget are created.
bodyTagName: string → HTML tag that defines the body.

Public Methods

Add a callback to connect the widget to a specific event.

Parameters

Parameter	Type	Required	Description
cb	WUICallback	yes	The callback: Consists of the event name and an arrow function with routines associated with the event.

Returns Value

void

Example

src/main.ts
//Using class syntax
myWidget.subscribe({
    event: "click",
    then: (e: Event, w: Widget) => {
        console.log("You have clicked on the widget");
    },
});

src/main.tsx
//Using TSX/JSX syntax
const handleClick = (e: Event, _w: Widget | null) => {
    console.log("You have clicked on the widget");
};
<AnyWidget id="my-widget" onClick={handleClick} />;

unscribe

unsubscribe: (event: WUIEvent) → Delete a specific callback.

warning

The unsubscribe method has not been implemented.

run

run(eventId: WUIEvent) → Execute all callbacks associated with a specific event.

dispose

dispose() → Free the memory used by the widget.

warning

The dispose method has not been implemented.

setPadding

Set the widget padding in pixels.

Parameters

Parameter	Type	Required	Description
p	number	yes	The padding.

Returns Value

void

Example

src/main.ts
//Using class syntax
myWidget.setPadding(4);

src/main.tsx
//Using TSX/JSX syntax
<AnyWidget id="my-widget" padding={4} />

setX

Set the x coordinate of the widget.

Parameters

Parameter	Type	Required	Description
x	number	yes	The x coordinate in pixels.

Returns Value

void

Example

src/main.ts
myWidget.setX(150);

setY

Set the y coordinate of the widget.

Parameters

Parameter	Type	Required	Description
y	number	yes	The y coordinate in pixels.

Returns Value

void

Example

src/main.ts
myWidget.setY(50);

setW

Set the width of the widget.

Parameters

Parameter	Type	Required	Description
w	number	yes	The width of the widget.

Returns Value

void

Example

src/main.ts
//Using class syntax
myWidget.setW(300);

src/main.tsx
//Using TSX/JSX syntax
<AnyWidget id="my-widget" width={300} />

warning

When using TSX syntax, not all widgets accept the width property.

setH

Set the height of the widget.

Parameters

Parameter	Type	Required	Description
h	number	yes	The height of the widget.

Returns Value

void

Example

src/main.ts
//Using class syntax
myWidget.setH(500);

src/main.tsx
//Using TSX/JSX syntax
<AnyWidget id="my-widget" height={500} />

warning

When using TSX syntax, not all widgets accept the height property.

setWH

Set the width and height of the widget.

Parameters

Parameter	Type	Required	Description
w	number	yes	The width of the widget.
h	number	yes	The height of the widget.

Returns Value

void

Example

src/main.ts
//Using class syntax
myWidget.setWH(200, 500);

src/main.tsx
//Using TSX/JSX syntax
<AnyWidget id="my-widget" width={200} height={500} />

warning

When using TSX syntax, not all widgets accept the width or height property.

setFixedSize

Set the fixedSize of the widget so that it cannot be modified by the parent.

Parameters

Parameter	Type	Required	Description
s	number	yes	The fixed size of the widget.

Returns Value

void

Example

src/main.ts
//Using class syntax
myWidget.setFixedSize(120);

src/main.tsx
//Using TSX/JSX syntax
<AnyWidget id="my-widget" fixedSize={120} />

setType

Set type of the widgets.

Parameters

Parameter	Type	Required	Description
type	WidgetTypes	yes	The type of the widget. Can be CUSTOM, FREE or FILL.

Returns Value

void

Example

src/main.ts
//Using class syntax
myWidget.setType(WidgetTypes.FILL);

src/main.tsx
//Using TSX/JSX syntax
<AnyWidget id="my-widget" type={WidgetTypes.FILL} />

setAlign

Set align of the widget.

Parameters

Parameter	Type	Required	Description
align	WidgetAlignTypes	yes	The type of the widget. Can be CUSTOM, FREE or FILL.

Returns Value

void

Example

src/main.ts
//Using class syntax
myWidget.setAlign(WidgetAlignTypes.HORIZONTAL);

src/main.tsx
//Using TSX/JSX syntax
<AnyWidget id="my-widget" align={WidgetAlignTypes.VERTICAL} />

setVisible

Set the visibility of the widget.

Parameters

Parameter	Type	Required	Description
visible	boolean	yes	The visibility of the widget.

Returns Value

void

Example

src/main.ts
myWidget.setVisible(true);

setParent

Set the parent of the widget.

Parameters

Parameter	Type	Required	Description
parent	Widget	yes	The parent of the widget.

Returns Value

void

Example

src/main.ts
myWidget.setParent(otherWidget);

addClass

Add a CSS styling class to the widget's body.

Parameters

Parameter	Type	Required	Description
cssClass	string	yes	The class to add.

Returns Value

void

Example

src/main.ts
myWidget.addClass("css-class");

deleteClass

Delete a CSS styling class to the widget's body.

Parameters

Parameter	Type	Required	Description
cssClass	string	yes	The class to delete.

Returns Value

void

Example

src/main.ts
myWidget.deleteClass("css-class");

deleteAllClasses

Delete all the CSS styling class to the widget's body.

Parameters

void

Returns Value

void

Example

src/main.ts
myWidget.deleteAllClass();

getPadding

Get the padding of the widget.

Parameters

void

Returns Value

A number that represents the padding of the widgets in pixels.

Example

src/main.ts
const padding: number = myWidget.getPadding();

getX

Get the x coordinate of the widget.

Parameters

Parameter	Type	Required	Description
recursive	boolean	no	If true, it returns the x-coordinate as an absolute value. If false, it returns the x-coordinate as a relative value. The default is false.

Returns Value

A number that represents the X coordinate of the widgets in pixels.

Example

src/main.ts
const absoluteX: number = myWidget.getX(true);

getY

Get the y coordinate of the widget.

Parameters

Parameter	Type	Required	Description
recursive	boolean	no	If true, it returns the y-coordinate as an absolute value. If false, it returns the y-coordinate as a relative value. The default is false.

Returns Value

A number that represents the Y coordinate of the widgets in pixels.

Example

src/main.ts
const absoluteY: number = myWidget.getY(true);

getW

Get the width of the widget.

Parameters

void

Returns Value

A number that represents the width of the widget in pixels.

Example

src/main.ts
const width: number = myWidget.getW();

getH

Get the height of the widget.

Parameters

void

Returns Value

A number that represents the height of the widget in pixels.

Example

src/main.ts
const height: number = myWidget.getH();

getPosition

Get the x and y of the widget.

Parameters

Parameter	Type	Required	Description
scroll	boolean	no	Indicates whether to account for scrolling in the position calculation. Defaults to false.

Returns Value

An object with X and Y properties representing the position of the widget.

Example

src/main.ts
const position: Vector2D = myWidget.getPosition();

getFixedSize

Get the fixedSize property of the widget.

Parameters

void

Returns Value

A number that represents the fixed width or height of the widget in pixels.

Example

src/main.ts
const fixedSize: number = myWidget.getFixedSize();

getType

Get the type property of the widget.

Parameters

void

Returns Value

A WidgetTypes that can be FILL, CUSTOM or FREE.

Example

src/main.ts
const widgetType: WidgetTypes = myWidget.getType();

getAlign

Get the align property of the widget.

Parameters

void

Returns Value

A WidgetAlignTypes that can be HORIZONTAL or VERTICAL.

Example

src/main.ts
const widgetAlign: WidgetAlignTypes = myWidget.getAlign();

getParent

Get the parent of the widget.

Parameters

void

Returns Value

The parent Widget of the current widget.

Example

src/main.ts
const myParentWidget: Widget = myWidget.getParent();

getBody

Get the body of the widget.

Parameters

void

Returns HTMLElement

The body (HTMLElement) of the current widget.

Example

src/main.ts
const myBody: HTMLElement = myWidget.getBody();

getChilds

Get the collection of child elements of the widget.

Parameters

void

Returns HTMLElement

A Widget array containing a collection of all child widgets.

Example

src/main.ts
const childs: Array<Widget> = myWidget.getChilds();

addChild

Add a child to the current widget.

Parameters

Parameter	Type	Required	Description
widget	Widget	yes	The widget to add as child of the current widget.

Returns Value

void

Example

src/main.ts
myWidget.addChild(otherWidget);

disableSelection

Disable mouse pointer selection on the current widget.

Parameters

void

Returns Value

void

Example

src/main.ts
myWidget.disableSelection();

enableSelection

Enable mouse pointer selection on the current widget.

Parameters

void

Returns Value

void

Example

src/main.ts
//Using class syntax
myWidget.enableSelection();

display

Display the widget.

Parameters

void

Returns Value

void

Example

src/main.ts
myWidget.display();

hide

Hide the widget.

Parameters

void

Returns Value

void

Example

src/main.ts
myWidget.hide();

toggle

Toggle visibility of the widget.

Parameters

void

Returns Value

void

Example

src/main.ts
myWidget.toggle();

render

Build the widget within its own body.

Parameters

void

Returns Value

void

Example

src/main.ts
myWidget.render();

resize

Resize the widget along with all its child elements.

Parameters

void

Returns Value

void

Example

src/main.ts
myWidget.resize();

setZIndex

Set the zIndex property of the widget.

Parameters

Parameter	Type	Required	Description
zIndex	number	yes	The zIndex of the widget.

Returns Value

void

Example

src/main.ts
myWidget.setZIndex(2);

raiseTop

Bring the widget to the front by modifying its zIndex property.

Parameters

void

Returns Value

void

Example

src/main.ts
myWidget.raiseTop();

raiseBottom

Send the widget to the back by modifying its zIndex property.

Parameters

void

Returns Value

void

Example

src/main.ts
myWidget.raiseBottom();

attachWidget

Add a single widget as a child to the current widget.

Parameters

Parameter	Type	Required	Description
guest	Widget	yes	The widget to attach.

Returns Value

void

Example

src/main.ts
myWidget.attachWidget(otherWidget);

removeAllChilds

Remove all child widgets.

Parameters

void

Returns Value

void

Example

src/main.ts
myWidget.removeAllChilds();

Properties​

Public Methods​

subscribe​

unscribe​

run​

dispose​

setPadding​

setX​

setY​

setW​

setH​

setWH​

setFixedSize​

setType​

setAlign​

setVisible​

setParent​

addClass​

deleteClass​

deleteAllClasses​

getPadding​

getX​

getY​

getW​

getH​

getPosition​

getFixedSize​

getType​

getAlign​

getParent​

getBody​

getChilds​

addChild​

disableSelection​

enableSelection​

display​

hide​

toggle​

render​

resize​

setZIndex​

raiseTop​

raiseBottom​

attachWidget​

removeAllChilds​

Properties

Public Methods

subscribe

unscribe

run

dispose

setPadding

setX

setY

setW

setH

setWH

setFixedSize

setType

setAlign

setVisible

setParent

addClass

deleteClass

deleteAllClasses

getPadding

getX

getY

getW

getH

getPosition

getFixedSize

getType

getAlign

getParent

getBody

getChilds

addChild

disableSelection

enableSelection

display

hide

toggle

render

resize

setZIndex

raiseTop

raiseBottom

attachWidget

removeAllChilds