Class sap.ui.commons.ResponsiveContainerModule: sap/ui/commons/ResponsiveContainer

extends Control

Is used to provide a container, which can show different content depending on its current width. It fires an event, whenever a new range is reached. In addition the content of the new range is automatically shown, if it is set.

Deprecated API:Since version 1.38.

Constructor Summary
new sap.ui.commons.ResponsiveContainer(sId?, mSettings?)Constructor for a new ResponsiveContainer.
Event Summary
rangeSwitch(oControlEvent)The event is fired the width of the container reaches a new range.
Events borrowed from class sap.ui.core.Control
Method Summary
sap.ui.commons.ResponsiveContainer.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.ui.commons.ResponsiveContainer with name sClassName and enriches it with the information contained in oClassInfo.
sap.ui.commons.ResponsiveContainer.getMetadata()Returns a metadata object for class sap.ui.commons.ResponsiveContainer.
addRange(oRange)Adds some range to the aggregation ranges.
attachRangeSwitch(oData?, fnFunction, oListener?)Attaches event handler fnFunction to the rangeSwitch event of this sap.ui.commons.ResponsiveContainer.
destroyRanges()Destroys all the ranges in the aggregation ranges.
detachRangeSwitch(fnFunction, oListener)Detaches event handler fnFunction from the rangeSwitch event of this sap.ui.commons.ResponsiveContainer.
fireRangeSwitch(mArguments?)Fires event rangeSwitch to attached listeners.
getDefaultContent()ID of the element which is the current target of the association defaultContent, or null.
getHeight()Gets current value of property height.
getRanges()Gets content of aggregation ranges.
getWidth()Gets current value of property width.
indexOfRange(oRange)Checks for the provided sap.ui.commons.ResponsiveContainerRange in the aggregation ranges.
insertRange(oRange, iIndex)Inserts a range into the aggregation ranges.
removeAllRanges()Removes all the controls from the aggregation ranges.
removeRange(vRange)Removes a range from the aggregation ranges.
setDefaultContent(oDefaultContent)Sets the associated defaultContent.
setHeight(sHeight)Sets a new value for property height.
setWidth(sWidth)Sets a new value for property width.
Constructor Detail
new sap.ui.commons.ResponsiveContainer(sId?, mSettings?)
Constructor for a new ResponsiveContainer.

Accepts an object literal mSettings that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject for a general description of the syntax of the settings object.

The supported settings are:

  • Properties
    • width : sap.ui.core.CSSSize (default: 100%)
    • height : sap.ui.core.CSSSize (default: 100%)
  • Aggregations
    • ranges : sap.ui.commons.ResponsiveContainerRange[]
  • Events
    • rangeSwitch : fnListenerFunction or [fnListenerFunction, oListenerObject] or [oData, fnListenerFunction, oListenerObject]

In addition, all settings applicable to the base type sap.ui.core.Control can be used as well.

Parameters:
{string}sId? id for the new control, generated automatically if no id is given
{object}mSettings? initial settings for the new control
Deprecated:
Since version 1.38.
Event Detail
rangeSwitch(oControlEvent)
The event is fired the width of the container reaches a new range.
Parameters:
{sap.ui.base.Event}oControlEvent
{sap.ui.base.EventProvider}oControlEvent.getSource
{object}oControlEvent.getParameters
{sap.ui.commons.ResponsiveContainerRange}oControlEvent.getParameters.currentRange The current range
Method Detail
sap.ui.commons.ResponsiveContainer.extend(sClassName, oClassInfo?, FNMetaImpl?): function
Creates a new subclass of class sap.ui.commons.ResponsiveContainer with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

Parameters:
{string}sClassName Name of the class being created
{object}oClassInfo? Object literal with information about the class
{function}FNMetaImpl? Constructor function for the metadata object; if not given, it defaults to sap.ui.core.ElementMetadata
Returns:
{function} Created class / constructor function
sap.ui.commons.ResponsiveContainer.getMetadata(): sap.ui.base.Metadata
Returns a metadata object for class sap.ui.commons.ResponsiveContainer.
Returns:
{sap.ui.base.Metadata} Metadata object describing this class
Adds some range to the aggregation ranges.
Parameters:
{sap.ui.commons.ResponsiveContainerRange}oRange the range to add; if empty, nothing is inserted
Returns:
{sap.ui.commons.ResponsiveContainer} Reference to this in order to allow method chaining
attachRangeSwitch(oData?, fnFunction, oListener?): sap.ui.commons.ResponsiveContainer
Attaches event handler fnFunction to the rangeSwitch event of this sap.ui.commons.ResponsiveContainer.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.ui.commons.ResponsiveContainer itself.

The event is fired the width of the container reaches a new range.

Parameters:
{object}oData? An application-specific payload object that will be passed to the event handler along with the event object when firing the event
{function}fnFunction The function to be called when the event occurs
{object}oListener? Context object to call the event handler with. Defaults to this sap.ui.commons.ResponsiveContainer itself
Returns:
{sap.ui.commons.ResponsiveContainer} Reference to this in order to allow method chaining
Destroys all the ranges in the aggregation ranges.
Returns:
{sap.ui.commons.ResponsiveContainer} Reference to this in order to allow method chaining
detachRangeSwitch(fnFunction, oListener): sap.ui.commons.ResponsiveContainer
Detaches event handler fnFunction from the rangeSwitch event of this sap.ui.commons.ResponsiveContainer.

The passed function and listener object must match the ones used for event registration.

Parameters:
{function}fnFunction The function to be called, when the event occurs
{object}oListener Context object on which the given function had to be called
Returns:
{sap.ui.commons.ResponsiveContainer} Reference to this in order to allow method chaining
fireRangeSwitch(mArguments?): sap.ui.commons.ResponsiveContainer
Fires event rangeSwitch to attached listeners.

Expects the following event parameters:

  • currentRange of type sap.ui.commons.ResponsiveContainerRangeThe current range
Parameters:
{Map}mArguments? The arguments to pass along with the event
Returns:
{sap.ui.commons.ResponsiveContainer} Reference to this in order to allow method chaining
getDefaultContent(): sap.ui.core.Control
ID of the element which is the current target of the association defaultContent, or null.
Returns:
{sap.ui.core.Control}
getHeight(): sap.ui.core.CSSSize
Gets current value of property height.

The width of the responsive container.

Default value is 100%.

Returns:
{sap.ui.core.CSSSize} Value of property height
Gets content of aggregation ranges.

The ranges defined for this container

Returns:
{sap.ui.commons.ResponsiveContainerRange[]}
getWidth(): sap.ui.core.CSSSize
Gets current value of property width.

The width of the responsive container.

Default value is 100%.

Returns:
{sap.ui.core.CSSSize} Value of property width
indexOfRange(oRange): int
Checks for the provided sap.ui.commons.ResponsiveContainerRange in the aggregation ranges. and returns its index if found or -1 otherwise.
Parameters:
{sap.ui.commons.ResponsiveContainerRange}oRange The range whose index is looked for
Returns:
{int} The index of the provided control in the aggregation if found, or -1 otherwise
insertRange(oRange, iIndex): sap.ui.commons.ResponsiveContainer
Inserts a range into the aggregation ranges.
Parameters:
{sap.ui.commons.ResponsiveContainerRange}oRange the range to insert; if empty, nothing is inserted
{int}iIndex the 0-based index the range should be inserted at; for a negative value of iIndex, the range is inserted at position 0; for a value greater than the current size of the aggregation, the range is inserted at the last position
Returns:
{sap.ui.commons.ResponsiveContainer} Reference to this in order to allow method chaining
Removes all the controls from the aggregation ranges.

Additionally, it unregisters them from the hosting UIArea.

Returns:
{sap.ui.commons.ResponsiveContainerRange[]} An array of the removed elements (might be empty)
Removes a range from the aggregation ranges.
Parameters:
{int|string|sap.ui.commons.ResponsiveContainerRange}vRange The rangeto remove or its index or id
Returns:
{sap.ui.commons.ResponsiveContainerRange} The removed range or null
setDefaultContent(oDefaultContent): sap.ui.commons.ResponsiveContainer
Sets the associated defaultContent.
Parameters:
{sap.ui.core.Control}oDefaultContent Id of an element which becomes the new target of this defaultContent association; alternatively, an element instance may be given
Returns:
{sap.ui.commons.ResponsiveContainer} Reference to this in order to allow method chaining
Sets a new value for property height.

The width of the responsive container.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 100%.

Parameters:
{sap.ui.core.CSSSize}sHeight New value for property height
Returns:
{sap.ui.commons.ResponsiveContainer} Reference to this in order to allow method chaining
Sets a new value for property width.

The width of the responsive container.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 100%.

Parameters:
{sap.ui.core.CSSSize}sWidth New value for property width
Returns:
{sap.ui.commons.ResponsiveContainer} Reference to this in order to allow method chaining