Container position BOTTOM, please help

[ioana...@gmail.com]

Hello! I have a SideMenuBar and 4 Commands. I use this for each command:

command.putClientProperty("SideComponent", myComponent);

myComponent is a Container and I want to set the last Command's Container at the bottom of the SideMenuBar. Do you know how I can do this programmatically? Thank you!!

[Shai Almog]

Hi,
can you provide an image to visualize what you are trying to achieve?

[ioana...@gmail.com]

Hi! I have a coupe of questions regarding my SideBarMenu,
I'm sending you two pictures: pic1.png is the SideMenu I've created though code and pic2.png represents what I want to achieve.
I added 4 commands to my form and for each command I've done this:

command1.putClientProperty("SideComponent", Container_1);
command2.putClientProperty("SideComponent", Container_2);
command3.putClientProperty("SideComponent", Container_3);
command4.putClientProperty("SideComponent", Container_4);

I've personalized each Container so that they look like in the image pic1.png.

My questions are:
1. How can I change the width of the SideMenuBar? I want it when it opens to be longer,  can I set its width to be a percentage of the screen's width?
2. I set in CodeNameOne Designer Theme the SideNavigationPanel background to be white, but I still get that shadow on its right side. How can I disable that, so that all the SideBarMenu would have a simple white background?
3. I want the Text from the buttons(I set them to be toggle RadioButtons) from Container_2 to appear on two rows. Now they show on one row "Fitting Room", "Wish List" etc. Is there a way to set the text from a Button programmatically on two rows?
4. The question of this Subject: How can I place the Container_4 to always stay at the bottom of the SideBarMenu/SideNavigationPanel?
5. I also want to create a small bar/line between the containers (like the one between Container_1 and Container_2, Container_2 and Container_3), is there a way to draw a small grey line programmatically?
6. And about the Hamburger picture: How can I change this Icon and/or the color of this icon? Can I make it disappear once the User clicks to open the Menu and make it appear when the User clicks elsewhere? Thanks!!

Sorry for the big post but these are all the issues I have regarding the Menu. Any answer would be very much appreciated!! Thanks!!

[Shai Almog]

I'm not sure if we have something like this builtin, I think Chen helped a customer build something like this so he might have some input here other than just set some padding to the bottom component which is probably not an ideal approach.

1. There are the following theme constants which you can use to control the side menu bar percentage. They vary between phone/tablet and landscape/portrait:
sideMenuSizeTabPortraitInt, sideMenuSizePortraitInt, sideMenuSizeTabLandscapeInt & sideMenuSizeLandscapeInt

2. Set the theme constant sideMenuShadowBool=false

3. Use SideComponent with RadioButtons. Invoke setToggleButton on the radio buttons to act like toggle button and not like a radio button.

5. This is best done thru the theme with a 9-piece border.

6. Use the sideMenuImage theme constant.

[Chen Fishbein]

The side menu layout is box layout y be default if you are would like to customize it's layout you can extend the side menu.

Try something like this:

public class MySideMenu extends SideMenuBar {

                

    public MySideMenu() {

    }

    protected Container createSideNavigationComponent(Vector commands, String placement) {

        Container cnt = super.createSideNavigationComponent(commands, placement);

        ....

        //here you can create your own container in borderLayout and place a container in the south and add the cnt Container in the center

        ....

    }

make sure to initialize your app to use your own new side menu like this:

 

UIManager.getInstance().getLookAndFeel().setMenuBarClass(MySideMenu.class);

[ioana...@gmail.com]

Thank you for the answers, they helped me! I did what Chen said, I extended the SideMenuBar class and I managed to position one container at the bottom of the Menu.

Now I have another question.. I want to change the transitions of the Menu. Right now (default settings) it appears like it is behind the main screen, and when I open it, the screen's content moves to the right and the menu can be seen. I want the screen's content(form) to stay still and only the menu to slide from the left. I also want to make the main screen(form) blurry, while the menu stays open.

Do I have to extend some other methods from SideMenuBar, or what is the right approach?

Thanks a lot!

[Chen Fishbein]

I'm afraid this won't be so simple, the SideMenuBar assumes transitions slides the main screen.

I'd recommend you to copy the SideMenuBar source and modify it to your needs.

[Ioana Echim]

Thanks Chen, I copied the SideMenuBar code and created my own class mySideMenuBar. Problem is I'm not sure where to modify the code the change the transitions when the menu opens and closes.

There are some transitions set to the menu's parent in "void openMenu()" Method

This is the code from SideMenuBar:

public void openMenu(String direction) {
        openMenu(direction, -1, getUIManager().getThemeConstant("sideMenuAnimSpeedInt", 300), true);
    }

void openMenu(String direction, int time, int dest, boolean transition) {
        if (Display.getInstance().getCurrent() == parent) {
            menu = createMenu(direction);
            //replace transtions to perform the Form shift
            out = parent.getTransitionOutAnimator();
            in = parent.getTransitionInAnimator();
            parent.setTransitionInAnimator(new MixMeSideMenu.MenuTransition(getUIManager().getThemeConstant("sideMenuAnimSpeedInt", 300), false, -1, direction));
            if(transition) {
                parent.setTransitionOutAnimator(new MixMeSideMenu.MenuTransition(dest, true, time, direction));
                menu.show();
            } else {
                parent.setTransitionOutAnimator(new MixMeSideMenu.MenuTransition(0, true, dest, direction));
                menu.show();
                parent.setTransitionOutAnimator(new MixMeSideMenu.MenuTransition(dest, true, time, direction));
            }
        }
    }


Should I create other MenuTransitions in MixMeSideMenu.MenuTransition class?
I want the parent form(my main form that has the menu) to stay fixed(and blurr it) and only the side bar menu to come from the right (a certain width) when I open it.

[Ioana Echim]

I meant create transitions in myMixMeSideMenu.MenuTransition class

[Shai Almog]

Blurring will be a problem but tinting should be easy. Blurred effect is very CPU/GPU intensive and we don't have it builtin.
You might be served better by avoiding the sidemenu altogether and just using our old menu functionality designer for feature phones. Its pretty customizable just define the command behavior as touch command and the menu will come in from the bottom.
You can then override theme constants to show the menu from the side and it will appear on top of the form without moving it.