Add container to side menu (and have it fit properly)

[Gareth Murfin]

I want to use the cool slide out side menu with a container Ive built (basically something like your gorgeous sidemenu tutorial but with a container ive built). But I have a couple of issues:

So I have made the menu using

Toolbar tb = f.getToolbar();

tb.setHidden(true); // i want to use my own custom made top bar so hide default one

Container IncludeSideBar = (Container) createContainer(r, "IncludeSideBar");

tb.addComponentToSideMenu(IncludeSideBar);

So far so good, but when I open the menu it appears very strange, see screenshot. It only shows 3 entries (I can scroll down to see others) and doesnt fill the full height of the screen (leaving gaps at top and bottom) and leaves a gap on the left too. How can I make it appear more like the design I have shown in my screenshot? 

https://www.dropbox.com/s/jxrcu9q7gl8pfsl/Snap%202019-01-14%20at%2023.56.21.png?dl=0

[Gareth Murfin]

So I started a fresh project to test this out, completely fresh, the only code I use is

 Toolbar tb = f.getToolbar();

     Container IncludeSideBar = (Container) createContainer(r, "SIDEA");        

     tb.addComponentToSideMenu(IncludeSideBar);

still 2 issues,

1-when menu comes out it does not push the screen behind along the x coordinate, so you cant see the hamburger button anymore (in your tutorial you can see it) - is this meant to happen?

2- when you add a container it doesnt seem to respect the height of the screen, so if I use a gridlayout (3,3) and add 9 buttons, in the editor they fill the available space, but on the simulator they do not, they are all at the top of the screen, this happens even if I use this code to try get it to use all the space:

 IncludeSideBar.setWidth(Display.getInstance().getDisplayWidth()/2);

         IncludeSideBar.setHeight((Display.getInstance().getDisplayHeight()));

Screenshot shows both problems: https://www.dropbox.com/s/2f9i6kl1fb287qh/Snap%202019-01-15%20at%2001.44.38.png?dl=0

I then tried your demo project from here https://github.com/codenameone/ToolbarSidemenu

this doesnt open as a cn1 project so wont compile. Same happens with the kitchen sink demo. Im just looking for a demo somewhere that uses a container on the side menu and slides out and works (ie screen behind moves along x axis as it should, and containers layout & height are respected). 

Any help would be much appreciated, making a nice side menu should be very easy these days. When following your tutorial through and doing it by code etc, it does work as expected (form behind scrolls along x and menu looks good) BUT this is done by code, I want to add a container from gui builder, OR failing that do my layout in code but it needs to respect the height of the container, since as you can see in my screenshot the client wants 8 buttons which take up equal space and fill the entire height of the screen... is this possible?

I guess my main issue is this:

For example, why does the container "gaz" here not get its height set to 600? here when I add it to the toolbar:

Container gaz = new Container();

        GridLayout grid = new GridLayout(3,3);        

        gaz.setLayout(grid);

        gaz.setHeight(600);

        gaz.add(new Button("TEST"));

         gaz.add(new Button("TEST"));

          gaz.add(new Button("TEST"));

           gaz.add(new Button("TEST"));

            gaz.add(new Button("TEST"));

             gaz.add(new Button("TEST"));

              gaz.add(new Button("TEST"));

               gaz.add(new Button("TEST"));

                gaz.add(new Button("TEST"));

                tb.addComponentToSideMenu(gaz);

Thanks... I hope it can do this or client will have to change their designs.

[Gareth Murfin]

OK this seems to work even thought it uses a depreciated method (is there anything better than setPrefferedHeight?), BUT still the form in the background does not move along X, why is that?

Toolbar tb = f.getToolbar();

        int height=Display.getInstance().getDisplayHeight()/8;

        

        Container gaz = new Container();

        GridLayout grid = new GridLayout(8,2);        

        gaz.setLayout(grid);

        for (int i=0; i<16; i++)

        {

             Button test = new Button("ZZZZZ");

             test.setPreferredH(height);

             gaz.add(test);

        }

       tb.addComponentToSideMenu(gaz);

And still when I move this to my main project my initial problem returns, gaps to left, right, top and buttom.... must be theme related? Sorry for all the posts here Ive been posting as I go along!..

https://www.dropbox.com/s/yamvq1wgoer4zfo/Untitled-5%20copy.jpg?dl=0

[Shai Almog]

I would suggest styling the side menu UIID's to have no padding/margin.

[Gareth Murfin]

thanks Shai, was unable to get it working unfortunately, but ive managed to salvage a project where it does work and start my project again using that, theres some mystery in there I dont understand.  One thing I go know is that if you call tb.setHidden(true); then when the side menu comes out it will simply take over the whole screen and not leave the one behind it. 

My main problem right now is, how do you add things to the topbar? the thing with the hamburger menu in it, I cant get components to appear in there, I need to add labels and some more buttons, how do you do that ?

 tb.add(BorderLayout.NORTH,new Label("arse")); // doesnt show up in the topbar...

[Gareth Murfin]

And failing that i just want to hide the topbar thing, which works until you open the side menu a second time, and then it takes over the whole screen and you cant get out... any ideas why that is? 

I think this side menu stuff is the hardest thing about cn1, same with my previous projects, ive had to tell people they cant use one at times.

so this works BUT if you open menu again (second time) it takes over whole screen and youre stuck, this is killing me

tb.setVisible(false);

       tb.setHidden(true);

[Gareth Murfin]

please see video here at 25 secs, first open works, second open takes over screen, this is when i use tb.setHidden(true);

why?

[Gareth Murfin]

given up on trying to make my own topbar, my new question is simply, why does nothing appear when I add to the built in one.. 

this adds absolutely nothing somehow!!

  tb.add(BorderLayout.NORTH,new Button("HELLO"));

         tb.add(BorderLayout.EAST,new Label("HELLO"));

         tb.invalidate();

i saw you added a search textfield on our website, but how????

[Gareth Murfin]

OK ive given up on trying to use:

Toolbar.setOnTopSideMenu(false);

My conclusion is that it has bugs, one of which being the menu will take over the screen on second use (making it useless). Things work OK without it (after days of hair tearing, and im already going bald :) )... ironically I rechecked the specification document and they do not want the form behind to scroll anyway...  

I really think the sidemenu is very confusing, but its working for now... thanks for all the help..  now back to my project!!! 

[Gareth Murfin]

OK my last post on this, I got it all working and then Toolbar.setOnTopSideMenu(false); did start working... so no idea what was going wrong to be honest, but thankfully my sidemenu is now perfect.. PHEW....