Simple Container Custom Control

I have created simple container control i.e "simpleContainerCustom.container" by extending sap.ui.core.Control.I have added two controls i.e sap.m.Button and sap.m.Input under the container control.

Application Structure

View Part

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="simplecontainercustomcontrol.S1"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Creating a Simple Container Control" id="PID">
<html:style>
.p1{
border:3px solid;
display:inline-block;
color:red;
margin-left:550px;
margin-top:20px;
}
</html:style>
<content>
</content>
</Page>
</core:View>

Controller Part

sap.ui.controller("simplecontainercustomcontrol.S1", {

onInit:function(){
//call the new Control "simpleContainerCustom.container".... 
sap.ui.core.Control.extend("simpleContainerCustom.container",{
// the Control API:
metadata : {
properties : {         
},
aggregations: {
content: {singularName: "content"} // here defined aggregation....
}
},

// the part creating the HTML....
renderer : function(oRm, oControl) {
oRm.write("<div");
oRm.addClass("p1"); //added class p1 for parent div....
oRm.writeClasses();  // this call writes the above class plus enables support           
oRm.write(">");
var aChildren = oControl.getContent();
for (var i = 0; i < aChildren.length; i++) { // loop over all child Controls, 
oRm.write("<div>");
oRm.renderControl(aChildren[i]);   // render the child Control 
oRm.write("</div>"); // end of the box around the respective child
}
oRm.write("</div>"); // end of the complete Control
}});
var button = new sap.m.Button({text:'Hello World'});
var input = new sap.m.Input({value:'Enter your name'});
var container = new simpleContainerCustom.container({
content:[button,input
         ]});
// added container to page....
this.byId("PID").addContent(container);
},
});