cancel
Showing results for 
Search instead for 
Did you mean: 

Horizontal Layout inside a Vertical Layout

former_member222346
Participant
0 Kudos

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;

  }

});

Accepted Solutions (1)

Accepted Solutions (1)

former_member197888
Participant
0 Kudos

Is there any error on console?

former_member222346
Participant
0 Kudos

NO..Console is empty

mantrishekar
Active Participant
0 Kudos

Hello Sindhuja,

You have made a very small mistake in last lines of your code

replace

new sap.ui.layout.HorizontalLayout("Layout2" ,{Content: [oCarousel,oTree]})

with

new sap.ui.layout.HorizontalLayout("Layout2" ,{content: [oCarousel,oTree]})

former_member222346
Participant
0 Kudos

Hi Shekar,

Slight difference..Tree is shown but Carousel is not showing..NOne of the images are displaying

mantrishekar
Active Participant
0 Kudos

Could you please show the mock screen how the content should be displayed.

content:[oAppHeader,

                                                                              oLabel,

                                                                              oCarousel,

                                                                              new sap.ui.layout.HorizontalLayout("Layout2" ,{allowWrapping :false,content: [oTree]})

        ]});

It is working fine if you place carousel as i placed.Still images are not displayed to me

Share your whole project here.It might be some path or location of images you are passing wrong.

saivellanki
Active Contributor
0 Kudos

Hi Sindhuja,

You have to mention width and height for carousel, when you're wrapping into layout.


//creating the Carousel

var oCarousel = new sap.ui.commons.Carousel({width:"400px", height:"400px"});

Regards,

Sai Vellanki.

former_member222346
Participant
0 Kudos

Thank you..Got the output

Answers (0)