sap.ui.define([
"sap/ui/core/Control",
"sap/m/Text",
"sap/m/Input"
], function (Control, Text, Input) {
"use strict";
return Control.extend("sap.ui.MyControl", {
renderer : function (oRenderManager, oControl) {
oRenderManager.write("<div");
oRenderManager.writeControlData(oControl);
oRenderManager.addClass("myClass");
oRenderManager.writeClasses();
oRenderManager.write(">");
oRenderManager.renderControl(new Text({...}));
oRenderManager.renderControl(new Input({...}));
oRenderManager.write("</div>");
}
});
});
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Text ... />
<Input ... />
</core:FragmentDefinition>
sap.ui.define([
"sap/ui/core/Control",
"sap/ui/core/Fragment"
], function(Control, Fragment) {
"use strict";
/**
* Base class for controls which use XML fragments for rendering
*
* @param {string} [width] - optional width of the control, defaults `100%`
* @param {object} [height] - optional height of the control, defaults to `auto`
*
* @public
* @extends sap.ui.core.Control
*/
var FragmentControl = Control.extend("sap.ui.FragmentControl", {
metadata: {
properties: {
/**
* Width
*/
width: {
type: "sap.ui.core.CSSSize",
defaultValue: "100%"
},
/**
* Height
*/
height: {
type: "sap.ui.core.CSSSize",
defaultValue: "auto"
}
}
},
/**
* Get a fragment control by its id
*
* @public
* @param {string} sControlId - the controls id
*
* @return {sap.ui.core.Control} - the found control (or a falsey value if not found)
*/
byId: function(sControlId) {
return Fragment.byId(this.getId(), sControlId);
}
});
return FragmentControl;
});
sap.ui.define([
"sap/ui/core/Control",
"sap/ui/core/Fragment"
], function(Control, Fragment) {
"use strict";
/**
* Base class for controls which use XML fragments for rendering
*
* @param {string} [width] - optional width of the control, defaults `100%`
* @param {object} [height] - optional height of the control, defaults to `auto`
*
* @public
* @extends sap.ui.core.Control
*/
var FragmentControl = Control.extend("sap.ui.FragmentControl", {
metadata: {
properties: {
...
/**
* Fragment controls
* @private
*/
_aFragmentControls: {
type: "sap.ui.core.Control[]",
defaultValue: null
}
}
},
/**
* Initiate the control
*
* @public
*/
init: function() {
// load fragment controls
this._aFragmentControls = this._loadFragmentControls();
// connect models / enable data binding for fragment controls
this._aFragmentControls.forEach(function(oFragmentControl) {
this.addDependent(oFragmentControl);
}, this);
},
/**
* Load fragment controls
* @private
* @returns {sap.ui.core.Control[]} fragment controls
*/
_loadFragmentControls: function() {
var vFragment = null;
var sFragmentContent = this.getFragmentContent();
if (sFragmentContent) {
// load fragment content
var oFragmentConfig = {
sId: this.getId(),
fragmentContent: sFragmentContent
};
vFragment = sap.ui.xmlfragment(oFragmentConfig, this);
} else {
// load fragment by name
vFragment = sap.ui.xmlfragment(this.getId(), this.getFragmentName(), this);
}
// ensure array
var aFragmentControls = Array.isArray(vFragment) ? vFragment : [vFragment];
return aFragmentControls;
},
/**
* Get fragment name for this control.
* The fragment name must correspond to an XML Fragment which can be loaded via the module system (fragmentName + ".fragment.xml") and which defines the Fragment.
* To provide the fragment content directly please override `getFragmentContent`.
*
* @public
* @abstract
*
* @returns {string} the fragment name, e.g. some.namespace.MyControl
*/
getFragmentName: function() {
// default: fragment for control, e.g. some/namespace/MyControl.js -> some/namespace/MyControl.fragment.xml
return this.getMetadata().getName();
},
/**
* Get the fragment content for this control as an XML string.
* Implementing this method eliminates the need to create a `MyControl.fragment.xml` file,
* so e.g. `return <core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core"><Input/></core:FragmentDefinition>`
*
* If this method returns any non falsey value `getFragmentName` will be ignored.
*
* @public
* @abstract
*
* @returns {string} XML fragment
*/
getFragmentContent: function() {
// default: undefined
return;
},
...
});
return FragmentControl;
});
sap.ui.define([
"sap/ui/core/Renderer"
], function(Renderer) {
var FragmentControlRenderer = Renderer.extend("sap.ui.FragmentControlRenderer", {
render: function(oRenderManager, oControl) {
// return immediately if control is invisible, do not render any HTML
if (!oControl.getVisible()) {
return;
}
// start opening tag
oRenderManager.write("<div");
// write control data
oRenderManager.writeControlData(oControl);
// write classes
oRenderManager.writeClasses();
// write styles
oRenderManager.addStyle("width", oControl.getWidth());
oRenderManager.addStyle("height", oControl.getHeight());
oRenderManager.writeStyles();
// end opening tag
oRenderManager.write(">");
// render fragment controls (@see sap.ui.fragment.FragmentControl.metadata.properties._aFragmentControls)
if (Array.isArray(oControl._aFragmentControls)) {
oControl._aFragmentControls.forEach(function(oFragmentControl) {
oRenderManager.renderControl(oFragmentControl);
});
}
// write closing tag
oRenderManager.write("</div>");
}
});
return FragmentControlRenderer;
});
sap.ui.define([
"sap/ui/core/Control",
"sap/ui/core/Fragment",
"sap/ui/FragmentControlRenderer"
], function(Control, Fragment, FragmentControlRenderer) {
"use strict";
/**
* Base class for controls which use XML fragments for rendering
*
* @param {string} [width] - optional width of the control, defaults `100%`
* @param {object} [height] - optional height of the control, defaults to `auto`
*
* @public
* @extends sap.ui.core.Control
*/
var FragmentControl = Control.extend("sap.ui.FragmentControl", {
metadata: {
properties: {
/**
* Renderer
*/
renderer: {
type: "sap.ui.FragmentControlRenderer",
defaultValue: FragmentControlRenderer
}
...
}
},
...
});
return FragmentControl;
});
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Text id="myText"/>
<Input change="onChange"/>
</core:FragmentDefinition>
sap.ui.define([
"sap/ui/FragmentControl"
], function(FragmentControl) {
"use strict";
/**
* My class
*
* @public
* @extends sap.ui.FragmentControl
*/
var MyControl = FragmentControl.extend("sap.ui.MyControl", {
/**
* @override
*/
getFragmentName: function() {
return "sap.ui.fragments.MyControl";
},
/**
* Handle the change event
* @param {sap.ui.base.Event} oEvent - the change event
*/
onChange: function(oEvent) {
var sValue = oEvent.getParameter("value");
var oText = this.byId("myText");
oText.setText(sValue);
}
});
return MyControl;
});
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
18 | |
12 | |
9 | |
7 | |
6 | |
6 | |
5 | |
5 | |
4 | |
4 |