Hi,
I want to insert a Horizontal Layout inside a Vertical Layout but my output is not showing Horizontal layout part.
Please check where Ia m doing a mistake.
My View Code
sap.ui.jsview("samplepoc.view1", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf samplepoc.view1
*/
getControllerName : function() {
return "samplepoc.view1";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf samplepoc.view1
*/
createContent : function(oController) {
//create the ApplicationHeader control
var oAppHeader = new sap.ui.commons.ApplicationHeader("appHeader");
//configure the branding area
oAppHeader.setLogoSrc("http://www.sap.com/global/images/SAPLogo.gif");
oAppHeader.setLogoText("Proof Of Concept");
//configure the welcome area
oAppHeader.setDisplayWelcome(true);
oAppHeader.setUserName("Sindhuja");
//configure the log off area
oAppHeader.setDisplayLogoff(true);
//create a label
var oLabel = new sap.ui.commons.Label("statement");
oLabel.setText("The Best relevant websites in the world");
oLabel.setDesign(sap.ui.commons.LabelDesign.Bold);
//Create a tree
var oTree = new sap.ui.commons.Tree("tree");
oTree.setTitle("Relevant Paths");
oTree.setWidth("100%");
oTree.setHeight("auto");
oTree.setShowHeaderIcons(true);
//Create tree nodes
var oNode1 = new sap.ui.commons.TreeNode("node1", {text : "Travel" , icon : "images/travel.gif" , expanded : false });
var oNode2 = new sap.ui.commons.TreeNode("node2", {text : "Food" , icon : "images/food.gif" , expanded : false });
var oNode3 = new sap.ui.commons.TreeNode("node3", {text : "Jobs" , icon : "images/job.gif" , expanded : false});
var oNode4 = new sap.ui.commons.TreeNode("node4", {text : "Education" , icon : "images/edu.gif" , expanded : false});
var oNode5 = new sap.ui.commons.TreeNode("node5", {text : "India" , icon : "images/ind.gif" , expanded : true});
var oNode6 = new sap.ui.commons.TreeNode("node6", {text : "World" , icon : "images/wor.gif" , expanded : true});
var oNode7 = new sap.ui.commons.TreeNode("node7", {text : "Indian" , icon : "images/indn.gif" , expanded : true});
var oNode8 = new sap.ui.commons.TreeNode("node8", {text : "Chinese" , icon : "images/chin.gif" , expanded : true});
var oNode9 = new sap.ui.commons.TreeNode("node9", {text : "Continental" , icon : "images/cont.gif" , expanded : true});
var oNode10 = new sap.ui.commons.TreeNode("node10", {text : "Italin" , icon : "images/ita.gif" , expanded : true});
var oNode11 = new sap.ui.commons.TreeNode("node11", {text : "IT" , icon : "images/IT.gif" , expanded : true});
var oNode12 = new sap.ui.commons.TreeNode("node12", {text : "Government" , icon : "images/gov.gif" , expanded : true});
var oNode13 = new sap.ui.commons.TreeNode("node13", {text : "others" , icon : "images/othe.gif" , expanded : true});
var oNode14 = new sap.ui.commons.TreeNode("node14", {text : "Engineering" , icon : "images/ita.gif" , expanded : true});
var oNode15 = new sap.ui.commons.TreeNode("node15", {text : "Medicine" , icon : "images/eng.gif" , expanded : true});
var oNode16 = new sap.ui.commons.TreeNode("node16", {text : "Animations" , icon : "images/ani.gif" , expanded : true});
var oNode17 = new sap.ui.commons.TreeNode("node17", {text : "Mass Communication" , icon : "images/mass.gif" , expanded : true});
var oNode18 = new sap.ui.commons.TreeNode("node18", {text : "Hotel Management" , icon : "images/hot.gif" , expanded : true});
oNode1.addNode(oNode5);
oNode1.addNode(oNode6);
oNode2.addNode(oNode7);
oNode2.addNode(oNode8);
oNode2.addNode(oNode9);
oNode2.addNode(oNode10);
oNode3.addNode(oNode11);
oNode3.addNode(oNode12);
oNode3.addNode(oNode13);
oNode4.addNode(oNode14);
oNode4.addNode(oNode15);
oNode4.addNode(oNode16);
oNode4.addNode(oNode17);
oNode4.addNode(oNode18);
oTree.addNode(oNode1);
oTree.addNode(oNode2);
oTree.addNode(oNode3);
oTree.addNode(oNode4);
//creating the Carousel
var oCarousel = new sap.ui.commons.Carousel();
//oCarousel.setWidth("100%");
oCarousel.setOrientation("horizontal");//Setting the orientation to horizontal
//Add the content to the Carousel
//Block 1(Image)
oCarousel.addContent(new sap.ui.commons.Image("IMG1",{
src : "samplepoc/images/A.jpg",
alt : "sample image",
width : "200px",
height : "150px"
}));
//Block 2 (Image)
oCarousel.addContent(new sap.ui.commons.Image("IMG2",{
src : "samplepoc/images/B.jpg",
alt : "sample image",
width : "100%",
height : "100%"
}));
//Block 3 (Image)
oCarousel.addContent(new sap.ui.commons.Image("IMG3",{
src : "samplepoc/images/C.jpg",
alt : "sample image",
width : "100%",
height : "100%"
}));
//Block 4 (Image)
oCarousel.addContent(new sap.ui.commons.Image("IMG4",{
src : "samplepoc/images/D.jpg",
alt : "sample image",
width : "100%",
height : "100%"
}));
//Block 5 (Image)
oCarousel.addContent(new sap.ui.commons.Image("IMG5",{
src : "samplepoc/images/E.jpg",
alt : "sample image",
width : "100%",
height : "100%"
}));
//Block 6 (Image)
oCarousel.addContent(new sap.ui.commons.Image("IMG6",{
src : "samplepoc/images/F.jpg",
alt : "sample image",
width : "100%",
height : "100%"
}));
//Block 7
oCarousel.addContent(new sap.ui.commons.Image("IMG7",{
src : "samplepoc/images/G.jpg",
alt : "sample image",
width : "100%",
height : "100%"
}));
//Block 8
oCarousel.addContent(new sap.ui.commons.Image("IMG8",{
src : "samplepoc/images/H.jpg",
alt : "sample image",
width : "100%",
height : "100%"
}));
//Block 9
oCarousel.addContent(new sap.ui.commons.Image("IMG9",{
src : "samplepoc/images/I.jpg",
alt : "sample image",
width : "100%",
height : "100%"
}));
//Block 10
oCarousel.addContent(new sap.ui.commons.Image("IMG10",{
src : "samplepoc/images/J.jpg",
alt : "sample image",
width : "100%",
height : "100%"
}));
//Block 11
oCarousel.addContent(new sap.ui.commons.Image("IMG11",{
src : "samplepoc/images/K.jpg",
alt : "sample image",
width : "100%",
height : "100%"
}));
var oLayout = new sap.ui.layout.VerticalLayout({width:"100%",content:[oAppHeader,
oLabel,
new sap.ui.layout.HorizontalLayout("Layout2" ,{Content: [oCarousel,oTree]})
]});
return oLayout;
}
});