Scripts

The @Scripts element allows CSX interfaces to load and execute external CES scripts.

This feature enables interaction between CES logic and CSX interface components, allowing developers to extend behaviors using the CES scripting language.

---

Syntax

@Scripts myscript:
   Add: "main.ces"

---

Description

The Add property is used to include a CES script file inside the CSX project.

When loaded, the CES script becomes available during interface execution and can be used to control logic, calculations, and component interactions.

---

Example

CSX

@Scripts myscript:
   Add: "main.ces"

@Page<bgcolor:#0000 width:300 height:300 position:"center"> page:

     @Rect square:
        position:"center"
        height:90
        width:90
        bgcolor:#004aad
        Border-radius:20
        smoothEdges:true
        rotate:0

     @Rect:
        position:"center"
        height:90
        width:90
        bgcolor:#004aad
        Border-radius:20
        smoothEdges:true
        rotate:45

      @Triangle:
        position:"center"
        height:50
        width:50
        margin:
          left:10
        bgcolor:#FFF
        Border-radius:0
        smoothEdges:true
        rotate:90

---

CES Script (main.ces)

CES Script

func async animar(){
   while(true){
      Bind("square")["rotation"] += 1;
      Delay(16);
   }
}

animar();

Result

---

Accessing CSX elements

The Bind() function allows CES scripts to access CSX elements by their identifier.

Example:

Bind("square")["rotation"] += 1;

In this case:

• "square" is the CSX element name
• "rotation" is the property being modified dynamically

This allows real-time interaction between CES scripts and CSX UI components.

---

Base element binds (CSXElement)

All CSX elements inherit the following binds:

Bind	Type	Description
x	Number	Horizontal position of the element
y	Number	Vertical position of the element
width	Number	Width of the element
height	Number	Height of the element
Isclicked	Boolean	Returns whether the element is currently clicked
Ishover	Boolean	Returns whether the mouse is hovering over the element

---

Shape binds (Shape)

Elements inheriting from Shape provide additional graphical binds:

Bind	Type	Description
rotation	Number	Rotates the shape element
bgcolor	Color / Hex	Changes the background color of the shape

---

Current capabilities

Currently, CES scripts can:

• Access CSX elements using Bind()
• Modify properties dynamically
• Create loops and animations
• Execute asynchronous functions
• Control UI behavior programmatically

---

Future integration features

Planned features

Future versions of the CES/CSX integration may support direct event binding and simplified interaction syntax.

Possible future syntax examples:

@Rect square:
   hover:"OnHover"
   click:"OnClick"

CES:

func OnHover()
{
    print("hover detected")
}

func OnClick()
{
    print("clicked")
}

This will allow CES scripts to react directly to component events without requiring manual polling or update loops.

---

Notes

Experimental system

The scripting integration between CES and CSX is still evolving.

APIs, property access, and event systems may change in future versions as the framework expands.