docs

Developing Controls

You can create own content for OpenUI5. To develop controls in JavaScript, you can either extend existing controls or create new ones.

Note:

If you want to contribute to OpenUI5, you have to consider our guidelines and recommendations with regard to, for example, product standards, file names and encoding.

As a control developer, you create or modify libraries and their components, i.e. controls and types. You define the set of properties your control provides as well as events or aggregations. A major task is the implementation of a control-specific renderer, which knows how to create suitable HTML markup for a given control instance, taking its current state into account. A renderer is written in JavaScript and produces HTML output which is styled by means of CSS. Such style sheets are another important part of a library.

Custom controls can be defined within a component or application without requiring a library definition. When you want to develop several controls for reuse in different applications, we recommend creating a library containing your custom controls instead. Control libraries have additional features, such as automatic support for theming and right-to-left languages, but the implementation of the controls is the same as for controls defined directly within your app or component.

Note:

This functionality is not restricted to controls. It can also be used to create or extend arbitrary objects, such as components, that are derived from sap.ui.base.ManagedObject. For more information, see API Reference: sap.ui.base.ManagedObject.

• Development Conventions and Guidelines
  To keep the OpenUI5 code readable and maintainable, development conventions and guidelines are introduced. We strongly recommend that you follow these guidelines even if you find them violated somewhere. For files that are consistently not following these rules and for which adhering to the rules would make the code worse, follow the local style. If you want to contribute your content to OpenUI5, you have to follow these conventions and guidelines.
• The library.js File
  The library.js file is a JavaScript file that contains the JavaScript code for all enumeration types provided by the library as well as library-specific initialization code that is independent from the controls in the library.
• Creating Control and Class Modules
  Modules not only require and use functionality from other modules, they can also expose their own functionality.
• Defining the Control Metadata
  Control metadata consists of properties, events, as well as aggregations and associations.
• Adding Method Implementations
  After defining the metadata of a control, you add the method implementation to the control.
• Device-specific Behavior of Controls
  Some controls have different behaviors between running on different device types (mobile, desktop, tablet).
• Examples for Creating and Extending Controls
  Examples how to create and extend controls in OpenUI5.
• Writing a Control Renderer
  OpenUI5 provides three classes for control rendering: sap.ui.core.Control, sap.ui.core.RenderManager, and sap.ui.core.Renderer.
• Implementing Animation Modes
  Some UI elements can have animations like page transitions or dynamic buttons. There may be cases where the animation has to be suppressed, for example, for performance reasons or for specific users. As a control developer, you have to make sure that your control supports the animation modes that are offered to the users.
• Implementing Focus Handling
  OpenUI5 provides mechanisms for observing the moving focus in an application page for controls. This information is then preserved for refocusing elements after rerendering. The focus triggers event firing. However, due to the high degree of flexibility in control rendering, a functionality tailored to the respective controls is required. For this, the framework provides helper functions for the implementation of focus handling.
• Item Navigation - Supporting Keyboard Handling in List-like Controls
  The helper class sap.ui.core.delegate.ItemNavigation supports item navigation in lists.
• Right-to-Left Support in Controls
  OpenUI5 supports right-to-left directionality (RTL) in controls.
• Defining Groups for Fast Navigation
  Adjacent controls within the tab chain can be grouped. Within such a group, [F6] or [Ctrl] + [Alt/Option] + [Down] skip all controls of the group and move the focus to the first control in the tab chain of the next group. [Shift] + [F6] or [Ctrl] + [Alt/Option] + [Up] move the focus to the first control of the previous group. Adjacent tab chain elements between groups are automatically handled as one group. For nested groups, the most concrete group is used.
• Composite Controls
  Composite controls are implemented by reusing other controls.
• Accessibility Aspects
  If you are developing OpenUI5 controls, you have to be aware of the accessibility aspects. A deeper understanding is needed, so that all accessibility requirements are met.
• Writing a Control: FAQ

This site is open source. Improve this page.