Sample Menu

Menu Example Code

Updated: 11/8/16 by Jarek Toro

This is the menu we will be making

Lets start with the layout

 protected void init(VaadinRequest vaadinRequest) {

         @Override
            protected void init(VaadinRequest vaadinRequest) {

                setSizeFull(); // set the size of the UI to fill the screen


                ResponsiveLayout responsiveLayout = new ResponsiveLayout();
                responsiveLayout.setSizeFull();
                setContent(responsiveLayout);


					// ResponsiveLayouts have rows
					// Our first row will contain our 2 Columns
					// The Menu Column & the Main Column
                ResponsiveRow rootRow = responsiveLayout.addRow();
                rootRow.setHeight("100%");

• For a deeper div into how columns and rows work lick here *

• Or google it 😅 -

Ok back to the code

					
                    //This is a convienece constructor
                    //First Param is the size for DisplaySize.XS
                    //Second Param is the size for DisplaySize.SM
                    //Third Param is the size for DisplaySize.MD
                    //Fourth Param is the size for DisplaySize.LG

                ResponsiveColumn sideMenuCol = new ResponsiveColumn(12, 12, 2, 2);
                rootRow.addColumn(sideMenuCol);

                // Fluent API
                ResponsiveColumn mainSectionCol = rootRow.addColumn().withDisplaySize(12,12,10,10);

So now that the layout is there lets add the Menu

---

// continuing from last code blurb


					// The menu itself is just a Row
					// Oh did i mention that rows and columns are nestable - Rad

                ResponsiveRow menu = new ResponsiveRow();

					// This is the profile image we just set 12
					// because no matter what we want 12/12 spaces taken
                ResponsiveColumn profileCol = new ResponsiveColumn(12);
                profileCol.setComponent(image);

					// For the menu buttons they need to be going from top to bottom
					// while on a computer then go left to right while on tablet then
					// go back to top and bottom while on phones

					// Because Rows wrap there content
					// if each Column has a width of 12
					// they will just stack on top of each other
					// so for mobile and computers we say 12

					// For tablets we give each column 3
					// 3+3+3+3 = 12
					// 4 buttons will fit perfectly in one row

                ResponsiveColumn homeCol = new ResponsiveColumn(12, 3, 12, 12);
                homeCol.setComponent(/* button, label, etc */);

                ResponsiveColumn testersCol = new ResponsiveColumn(12, 3, 12, 12);
                testersCol.setComponent(/* button, label, etc */);

                ResponsiveColumn analyzeCol = new ResponsiveColumn(12, 3, 12, 12);
                analyzeCol.setComponent(/* button, label, etc */);

                // We can also set the visibility depending on what screen they are on
                // this hids the menu buttons when on mobile

                analyzeCol.addVisibilityRule(Column.DisplaySize.XS, false);


                menu.addColumn(profileCol);
                menu.addColumn(homeCol);
                menu.addColumn(testersCol);
                menu.addColumn(analyzeCol);

                 //Fluent API

                ResponsiveColumn reportCol = menu.addColumn()
                .withDisplaySize(12,3,12,12)
                .withVisibilityRule(DisplaySize.XS, false)
                .withComponent(/* button, label, etc */);

                sideMenuCol.setComponent(menu);

and now setting the main content

					// Here we are creating a new responsiveLayout to house the multiple rows
					// for the main content

 				ResponsiveLayout mainContentLayout = new ResponsiveLayout();

                mainContentCol.setComponent(mainContentLayout);


					// simple row with one column that takes 3/12 spaces
					// and then the row centers that column to the middle
                ResponsiveRow titleRow = new ResponsiveRow();
                titleRow.setDefaultComponentAlignment(Alignment.MIDDLE_CENTER);

                Label title = new Label("Test Subjects");
                titleRow.setMargin(true);

                
                ResponsiveColumn titleCol = new ResponsiveColumn(3);
                titleCol.setComponent(title);
                titleRow.addColumn(titleCol);

                mainSectionLayout.addRow(titleRow);


				// Here we have a new Row just for the test subjects

                ResponsiveRow testSubjectsRow = new ResponsiveRow();

                for (int x = 0; x < 10; x++) {

                // We want each column to take
                // 12/12 on mobile
                // 6/12 on tablet
                // 4/12 on computer screens
                // 3/12 on wide computer screens

                    ResponsiveColumn testerCol = new ResponsiveColumn(12, 6, 4, 3);
                    testerCol.setComponant(new Panel(/* set size full */));
                    testSubjectsRow.addColumn(testerCol);

                }

				// sets spacing between the columns and margin around the whole row

                testSubjectsRow.setHorizontalSpacing(true);
                testSubjectsRow.setVerticalSpacing(true);
                testSubjectsRow.setMargin(true);

                mainSectionLayout.addRow(testSubjectsRow);

            }
    }

Boom your done!

to look at all the code, this demo menu is located in the test folder on the master branch just run the server file and go to localhost:9998