HelloWorldController

Hello World Stimulus Controller

This controller demonstrates the Stimulus.js pattern used in KMP plugins. Stimulus controllers provide interactive behavior for frontend components without requiring a full JavaScript framework.

Key Concepts:

  • Targets: DOM elements the controller interacts with
  • Values: Properties that can be set from HTML attributes
  • Actions: Event handlers triggered by user interaction
  • Outlets: Connections to other Stimulus controllers

Usage in HTML:

Constructor

new HelloWorldController()

Source

Methods

clear()

Clear action - Clear the output Triggered by: data-action="click->hello-world#clear"

Source

clear()

Clear action - Clear the output Triggered by: data-action="click->hello-world#clear"

Source

connect()

Connect the controller to the DOM Called when the controller is connected to the DOM

Source

connect()

Connect the controller to the DOM Called when the controller is connected to the DOM

Source

countValueChanged()

Value changed callback - Called when count value changes Automatically called when countValue is updated

Source

countValueChanged()

Value changed callback - Called when count value changes Automatically called when countValue is updated

Source

disconnect()

Disconnect the controller from the DOM Called when the controller is disconnected from the DOM Use for cleanup (removing event listeners, timers, etc.)

Source

disconnect()

Disconnect the controller from the DOM Called when the controller is disconnected from the DOM Use for cleanup (removing event listeners, timers, etc.)

Source

(async) fetchData()

Example of an async method - fetch data from server

Source

(async) fetchData()

Example of an async method - fetch data from server

Source

greet()

Greet action - Display a greeting message Triggered by: data-action="click->hello-world#greet"

Source

greet()

Greet action - Display a greeting message Triggered by: data-action="click->hello-world#greet"

Source

initialize()

Initialize the controller Called once when the controller is first instantiated

Source

initialize()

Initialize the controller Called once when the controller is first instantiated

Source

messageValueChanged()

Value changed callback - Called when message value changes Automatically called when messageValue is updated

Source

messageValueChanged()

Value changed callback - Called when message value changes Automatically called when messageValue is updated

Source

showMessage()

Example of a method that could be called from other controllers or JavaScript code

Source

showMessage()

Example of a method that could be called from other controllers or JavaScript code

Source

updateCounter()

Update the counter display

Source

updateCounter()

Update the counter display

Source

HelloWorldController

Hello World Stimulus Controller

This controller demonstrates the Stimulus.js pattern used in KMP plugins. Stimulus controllers provide interactive behavior for frontend components without requiring a full JavaScript framework.

Key Concepts:

  • Targets: DOM elements the controller interacts with
  • Values: Properties that can be set from HTML attributes
  • Actions: Event handlers triggered by user interaction
  • Outlets: Connections to other Stimulus controllers

Usage in HTML:

Constructor

new HelloWorldController()

Source

Methods

clear()

Clear action - Clear the output Triggered by: data-action="click->hello-world#clear"

Source

clear()

Clear action - Clear the output Triggered by: data-action="click->hello-world#clear"

Source

connect()

Connect the controller to the DOM Called when the controller is connected to the DOM

Source

connect()

Connect the controller to the DOM Called when the controller is connected to the DOM

Source

countValueChanged()

Value changed callback - Called when count value changes Automatically called when countValue is updated

Source

countValueChanged()

Value changed callback - Called when count value changes Automatically called when countValue is updated

Source

disconnect()

Disconnect the controller from the DOM Called when the controller is disconnected from the DOM Use for cleanup (removing event listeners, timers, etc.)

Source

disconnect()

Disconnect the controller from the DOM Called when the controller is disconnected from the DOM Use for cleanup (removing event listeners, timers, etc.)

Source

(async) fetchData()

Example of an async method - fetch data from server

Source

(async) fetchData()

Example of an async method - fetch data from server

Source

greet()

Greet action - Display a greeting message Triggered by: data-action="click->hello-world#greet"

Source

greet()

Greet action - Display a greeting message Triggered by: data-action="click->hello-world#greet"

Source

initialize()

Initialize the controller Called once when the controller is first instantiated

Source

initialize()

Initialize the controller Called once when the controller is first instantiated

Source

messageValueChanged()

Value changed callback - Called when message value changes Automatically called when messageValue is updated

Source

messageValueChanged()

Value changed callback - Called when message value changes Automatically called when messageValue is updated

Source

showMessage()

Example of a method that could be called from other controllers or JavaScript code

Source

showMessage()

Example of a method that could be called from other controllers or JavaScript code

Source

updateCounter()

Update the counter display

Source

updateCounter()

Update the counter display

Source