HelloWorldController

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()

Description:

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

Source:

clear()

Description:

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

Source:

connect()

Description:

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

Source:

connect()

Description:

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

Source:

countValueChanged()

Description:

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

Source:

countValueChanged()

Description:

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

Source:

disconnect()

Description:

  • 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()

Description:

  • 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()

Description:

  • Example of an async method - fetch data from server

Source:

(async) fetchData()

Description:

  • Example of an async method - fetch data from server

Source:

greet()

Description:

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

Source:

greet()

Description:

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

Source:

initialize()

Description:

  • Initialize the controller Called once when the controller is first instantiated

Source:

initialize()

Description:

  • Initialize the controller Called once when the controller is first instantiated

Source:

messageValueChanged()

Description:

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

Source:

messageValueChanged()

Description:

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

Source:

showMessage()

Description:

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

Source:

showMessage()

Description:

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

Source:

updateCounter()

Description:

  • Update the counter display

Source:

updateCounter()

Description:

  • 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()

Description:

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

Source:

clear()

Description:

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

Source:

connect()

Description:

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

Source:

connect()

Description:

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

Source:

countValueChanged()

Description:

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

Source:

countValueChanged()

Description:

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

Source:

disconnect()

Description:

  • 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()

Description:

  • 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()

Description:

  • Example of an async method - fetch data from server

Source:

(async) fetchData()

Description:

  • Example of an async method - fetch data from server

Source:

greet()

Description:

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

Source:

greet()

Description:

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

Source:

initialize()

Description:

  • Initialize the controller Called once when the controller is first instantiated

Source:

initialize()

Description:

  • Initialize the controller Called once when the controller is first instantiated

Source:

messageValueChanged()

Description:

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

Source:

messageValueChanged()

Description:

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

Source:

showMessage()

Description:

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

Source:

showMessage()

Description:

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

Source:

updateCounter()

Description:

  • Update the counter display

Source:

updateCounter()

Description:

  • Update the counter display

Source: