Developing Your Own Controls
Sometimes, requirements go beyond the possibilities of extending standard controls. In other cases, it is necessary to implement a reusable custom control by combining existing controls. Using SAPUI5, it is also possible to implement your own customer-specific controls, so-called custom controls. In this lesson, you will learn how to implement such custom controls.
Creating Custom Controls
When you are able to extend an existing control, creating a custom control is not really that different. When you create a custom control, you simply change what the control is extending and then you have to implement the renderer fully on your own.
Watch this video to know more.
Control vs. Element
As you already know, SAPUI5 offers more than just basic controls. In addition, the SAPUI5 framework does provide more complex controls with dependencies to other controls. The framework also has visual aspects called elements. An element in SAPUI5 cannot be used by itself, it has to be used in combination with a control. They live in a parent-child dependency. The control in the relationship is the parent and the element is the child. The parent knows, for example, how to display or render the child during runtime.
The following rules are applied to elements :
sap.ui.core.Element is base class of sap.ui.core.Control
It does have an API but not a renderer.
It is not meant to be used as a standalone.
Typically, it is aggregated by a control (for example, MenuItems in a Menu).
The control does the rendering and uses the Element as data container.
An Element is the most basic building block for UI5 UIs. An Element has a state like a ManagedObject and it has a unique ID by which the framework remembers it. It can have an associated DOM, but it cannot render itself. Only Controls can render themselves and also take care of rendering Elements, which they aggregate as children. If an Element has been rendered, its related DOM gets the same ID as the Element and thereby can be retrieved through API.
Working with elements
The following figure shows you how to use elements during aggregation binding.
The code shown in the following figure shows you the implementation and relationship of a control and an element.
The code shown in the following figure shows you how to access the list of PersonItem-elements.
