At the moment, there is no set of practices/concepts that guide the way UI controls are coded. The general process to add one seems to be:
- Add controller action that echo's HTML via a template.
- In the template, add JavaScript to add behavior.
- Sometimes, the JavaScript is moved to a separate file and the template just invokes a function in that file.
This works, but results in messy, unclear code and does not make reusing controls easy. I think a better way to organize code (across both JavaScript & PHP) is to architect UI controls like this:
- Create a class for the control server side that derives from a UIControl base (which in turn derives from Piwik\View).
- Define properties (as are done currently for ViewDataTable) to allow PHP code to configure the UIControl & create a template that uses those properties.
- Create a controller action that echos the control.
- Create a JavaScript class that derives from a JavaScript UIControl class. This class will handle generic behavior such as asset cleanup, element resize detection, automatic initialization after ajax and anything else that comes up.
At the moment, there is no set of practices/concepts that guide the way UI controls are coded. The general process to add one seems to be:
This works, but results in messy, unclear code and does not make reusing controls easy. I think a better way to organize code (across both JavaScript & PHP) is to architect UI controls like this: