sap.ui.define(
['sap/ui/core/Control'],
function(Control) {
return Control.extend("dalrae.ui.containers.ShadowBox",{
metadata: {
properties: {},
aggregations: {},
},
renderer: function(oRm,oControl){
//to do: render the control
},
onAfterRendering: function() {
//if I need to do any post render actions, it will happen here
if(sap.ui.core.Control.prototype.onAfterRendering) {
sap.ui.core.Control.prototype.onAfterRendering.apply(this,arguments); //run the super class's method first
}
},
});
}
);
sap.ui.define(
['sap/ui/core/Control'],
function(Control) {
return Control.extend("dalrae.ui.containers.ShadowBox",{
metadata: {
properties: {},
aggregations: {},
},
renderer: function(oRm,oControl){
oRm.write("<span>HELLO WORLD</span>"); //output some html so we can see the control is working!
},
onAfterRendering: function() {
//if I need to do any post render actions, it will happen here
if(sap.ui.core.Control.prototype.onAfterRendering) {
sap.ui.core.Control.prototype.onAfterRendering.apply(this,arguments); //run the super class's method first
}
},
});
}
);
<mvc:View xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:dalraeContainers="dalrae.ui.containers"
xmlns:core="sap.ui.core"
controllerName="dalrae.doco.Page">
<Page title="D'Alrae UI5 Library" enableScrolling="true">
<headerContent>
</headerContent>
<content>
<dalraeContainers:ShadowBox />
</content>
</Page>
</mvc:View>
sap.ui.define(
['sap/ui/core/Control'],
function(Control) {
return Control.extend("dalrae.ui.containers.ShadowBox",{
metadata: {
properties: {},
aggregations: {
content: {
type: "sap.ui.core.Control"
}
},
defaultAggregation: "content",
},
renderer: function(oRm,oControl){
//first up, render a div for the ShadowBox
oRm.write("<div");
//next, render the control information, this handles your sId (you must do this for your control to be properly tracked by ui5).
oRm.writeControlData(oControl);
oRm.write(">");
//next, iterate over the content aggregation, and call the renderer for each control
$(oControl.getContent()).each(function(){
oRm.renderControl(this);
});
//and obviously, close off our div
oRm.write("</div>")
},
onAfterRendering: function() {
if(sap.ui.core.Control.prototype.onAfterRendering) {
sap.ui.core.Control.prototype.onAfterRendering.apply(this,arguments);
}
},
});
}
);
<dalraeContainers:ShadowBox>
<Label text="Well well well" />
<Input value="we have a container" />
</dalraeContainers:ShadowBox>
sap.ui.define(
['sap/ui/core/Control'],
function(Control) {
return Control.extend("dalrae.ui.containers.ShadowBox",{
metadata: {
properties: {
width: {
type: "sap.ui.core.CSSSize", //this is optional, but it helps prevent errors in your code by enforcing a type
defaultValue: "100%" //this is also optional, but recommended, as it prevents your properties being null
},
height: {
type: "sap.ui.core.CSSSize",
defaultValue: "auto"
}
},
aggregations: {
content: {
type: "sap.ui.core.Control"
}
},
defaultAggregation: "content",
},
renderer: function(oRm,oControl){
//first up, render a div for the ShadowBox
oRm.write("<div");
//render width & height properties
oRm.write(" style=\"width: " + oControl.getWidth() + "; height: " + oControl.getHeight() + ";\"");
//next, render the control information, this handles your sId (you must do this for your control to be properly tracked by ui5).
oRm.writeControlData(oControl);
oRm.write(">");
//next, iterate over the content aggregation, and call the renderer for each control
$(oControl.getContent()).each(function(){
oRm.renderControl(this);
});
//and obviously, close off our div
oRm.write("</div>")
},
onAfterRendering: function() {
if(sap.ui.core.Control.prototype.onAfterRendering) {
sap.ui.core.Control.prototype.onAfterRendering.apply(this,arguments);
}
},
});
}
);
<dalraeContainers:ShadowBox
width="200px"
>
<Label text="Well well well" />
<Input value="we have a container" />
</dalraeContainers:ShadowBox>
.dalrShadowBox {
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
border-radius: 4px;
padding: 4px;
}
sap.ui.define(
['sap/ui/core/Control'],
function(Control) {
return Control.extend("dalrae.ui.containers.ShadowBox",{
metadata: {
properties: {
width: {
type: "sap.ui.core.CSSSize", //this is optional, but it helps prevent errors in your code by enforcing a type
defaultValue: "100%" //this is also optional, but recommended, as it prevents your properties being null
},
height: {
type: "sap.ui.core.CSSSize",
defaultValue: "auto"
}
},
aggregations: {
content: {
type: "sap.ui.core.Control"
}
},
defaultAggregation: "content",
},
init: function() {
//initialisation code, in this case, ensure css is imported
var libraryPath = jQuery.sap.getModulePath("dalrae.ui"); //get the server location of the ui library
jQuery.sap.includeStyleSheet(libraryPath + "/../css/dalrae.css"); //specify the css path relative from the ui folder
},
renderer: function(oRm,oControl){
//first up, render a div for the ShadowBox
oRm.write("<div");
//add this controls style class (plus any additional ones the developer has specified)
oRm.addClass("dalrShadowBox");
oRm.writeClasses(oControl);
//render width & height properties
oRm.write(" style=\"width: " + oControl.getWidth() + "; height: " + oControl.getHeight() + ";\"");
//next, render the control information, this handles your sId (you must do this for your control to be properly tracked by ui5).
oRm.writeControlData(oControl);
oRm.write(">");
//next, iterate over the content aggregation, and call the renderer for each control
$(oControl.getContent()).each(function(){
oRm.renderControl(this);
});
//and obviously, close off our div
oRm.write("</div>")
},
onAfterRendering: function() {
if(sap.ui.core.Control.prototype.onAfterRendering) {
sap.ui.core.Control.prototype.onAfterRendering.apply(this,arguments);
}
},
});
}
);
sap.ui.define(
['sap/ui/core/Control'],
function(Control) {
return Control.extend("dalrae.ui.containers.ShadowBox",{
metadata: {
properties: {
width: {
type: "sap.ui.core.CSSSize", //this is optional, but it helps prevent errors in your code by enforcing a type
defaultValue: "auto" //this is also optional, but recommended, as it prevents your properties being null
},
height: {
type: "sap.ui.core.CSSSize",
defaultValue: "auto"
},
background: {
type: "sap.ui.core.CSSColor",
defaultValue: "#ffffff"
},
margin: {
type: "sap.ui.core.CSSSize",
defaultValue: "5px"
}
},
aggregations: {
content: {
type: "sap.ui.core.Control"
}
},
defaultAggregation: "content",
},
init: function() {
//initialisation code, in this case, ensure css is imported
var libraryPath = jQuery.sap.getModulePath("dalrae.ui"); //get the server location of the ui library
jQuery.sap.includeStyleSheet(libraryPath + "/../css/dalrae.css"); //specify the css path relative from the ui folder
},
renderer: function(oRm,oControl){
//first up, render a div for the ShadowBox
oRm.write("<div");
//add this controls style class (plus any additional ones the developer has specified)
oRm.addClass("dalrShadowBox");
oRm.writeClasses(oControl);
//render width & height & background properties
oRm.write(" style=\"width: " + oControl.getWidth()
+ "; height: " + oControl.getHeight()
+ "; background-color: " + oControl.getBackground()
+ "; margin: " + oControl.getMargin()
+ "\"");
//next, render the control information, this handles your sId (you must do this for your control to be properly tracked by ui5).
oRm.writeControlData(oControl);
oRm.write(">");
//next, iterate over the content aggregation, and call the renderer for each control
$(oControl.getContent()).each(function(){
oRm.renderControl(this);
});
//and obviously, close off our div
oRm.write("</div>")
},
onAfterRendering: function() {
if(sap.ui.core.Control.prototype.onAfterRendering) {
sap.ui.core.Control.prototype.onAfterRendering.apply(this,arguments);
}
},
});
}
);
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
36 | |
8 | |
7 | |
5 | |
5 | |
4 | |
4 | |
4 | |
3 | |
3 |