action.Component or the more powerful
Components consist of a root node, which can be accessed by
this.$ within your component functions as in the following example.
After clicking the button of the previous example the
action module will search for the closest surrounding component with existing
hello action handler and execute it.
Get a Component Instance
If you need the instance of your component, for example in another module, you can retrieve it by calling
Tip: You can also search for a component by using
Components can be nested, which can be handy for example if you want to implement a list view with a single root componentent and multiple entries, whereas the root component could define some configurations as urls and texts or some helper actions.
humhub.modules.ui.widget.Widget class extends the
Component class and provides some additional functionality as:
- Advanced event handling
- Eager or lazy initialization
- Widget options
init function is called once the widget is created. A Widget is created either immediately within the humhub initialization phase in case the widgets root node contains a
data-ui-init flag or by lazily creating it when calling a widget action or initializing the Widget by means of calling
Note: If you load a Widget by an ajax call, make sure to apply the
ui.additionson your inserted dom nodes, otherwise the
data-ui-initbehavriour won't be recognized.
Your widgets option can be set by using
data-* attributes on your Widgets root node.
getDefaultOptions() method can be used to define default Widget options.
Note: Notice the transformation of
data-some-settingto the camelcase option name
In order to implement a Yii widget responsible for rendering your widgets markup, you can implement a PHP class derivated of
humhub\widgets\JsWidget as in the following examples.
Here are some of the available attributes of the JSWidget class:
id: the widget root id, if not provided a generated id will be used by default
init: will add the data-ui-init flag if set to true
visible: can be set to false in case the root node should be rendered hidden on startup
options: used to overwrite or set the Widgets htmlOptions
events: defines widget action events
container: defines the root node name when using the default rendering mechanism
content: defines the content of the root node when using the default rendering mechanism
getData(): returns an array of widget settings which will be transformed into
getAttributes(): returns an array of html attributes/values
getOptions(): merges the given
optionswith the result of
getAttributes()and is used as root node options in most of the cases
Default widget rendering:
The following example shows a simple JsWidget implementation without overwriting the widgets
Note: in this case the
containersetting could be omitted, since
divis the default container name.
The widget could be used within a view as follows:
which would render the following output:
Custom widget rendering:
For more complex JsWidgets, you can overwrite your widgets
run method and use the
getOptions method to merge the widgets
options with the default options provided by
getAttributes as follows.