Custom controls are created using the [handle/body idiom](@ref handle-body-idiom) used in DALi.
-![ ](../assets/img/creating-custom-controls/control-handle-body.png)
![ ](creating-custom-controls/control-handle-body.png)
Namespaces are important
### General Guidelines:
+ Try to avoid adding C++ APIs as they become difficult to maintain.
+ Use **properties** as much as possible as Controls should be data driven.
- + These controls will be used through JavaScript and JSON files so need to be compatible.
+ + These controls will be used through JSON files so need to be compatible.
+ Bear in mind that the Control can be updated when the properties change (e.g. style change)
+ Ensure control deals with these property changes gracefully
+ Not just the first time they are set
Controls should be as generic as possible so the recommendation is to re-use visuals to create the content required as described in the [Visuals](@ref visuals) section.
Currently, this is devel-api though, so is subject to change.
-![ ](../assets/img/creating-custom-controls/rendering.png)
![ ](creating-custom-controls/rendering.png)
To add a visual to a control, first create a Property for the visual of type MAP, and ensure the name has a suffix of "_VISUAL". Then the visual is normally defined in the stylesheet, and the definition sent via SetProperty(), where you would then create the visual:
| Normal Style | Customized Style |
|:------------:|:----------------:|
-|![ ](../assets/img/creating-custom-controls/popup-normal.png) ![ ](creating-custom-controls/popup-normal.png) | ![ ](../assets/img/creating-custom-controls/popup-styled.png) ![ ](creating-custom-controls/popup-styled.png)|
+|![ ](creating-custom-controls/popup-normal.png) | ![ ](creating-custom-controls/popup-styled.png)|
More information regarding styling can be found in the [Styling](@ref styling) section.
___________________________________________________________________________________________________
___________________________________________________________________________________________________
-@class _Guide_Creating_UI_Controls
*/