Skip to Content
0
May 30, 2016 at 05:22 AM

Horizontal Layout inside a Vertical Layout

632 Views

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;

}

});