custom menu for mobile

[Developer12145]

Hi Isomorphic,

I'm developing the mobile-version of our web-application. We want to give our customers an mobile application, that has a good look and fell in the mobile-sense.

Setup:
SmartClient Version: v11.1p_2018-05-30/PowerEdition Deployment (built 2018-05-30)
Browser: Cordova WebView for Android and iOS

So I made a custom menu like the following:



And here is the code for these items:

JAVA:

public class MainMenuButtonVLayout extends VLayout {

    MainAreaMobile parent;
    Label listName;
    Label listCount;
    Label button;
    Label overdueLabel;
    Label totalLabel;
    HLayout upperBar;
    HLayout lowerBar;
    public MainMenuButtonVLayout(MainAreaMobile parent) {
        this.parent = parent;

    }

    public VLayout getMainMenuButtonVLayout(Boolean myLeads, String title, String overdue, String count, String iconURL) {

        setAutoWidth();
        setAutoHeight();
        setAlign(Alignment.RIGHT);

        button = new MenuLabel(iconURL);
        button.setMargin(10);
        button.setBaseStyle("customMainMenu");
        button.setAlign(Alignment.CENTER);
        button.addClickHandler(new ClickHandler() {

            public void onClick(ClickEvent event) {

            }
        });

        listName = new Label(title);
        listName.setWidth("50%");
        listName.setStyleName("customMainMenuCaption");
        listName.setAlign(Alignment.CENTER);

      upperBar = new HLayout();
      upperBar.setAlign(Alignment.CENTER);
      upperBar.setPadding(5);
      upperBar.setAutoHeight();

      lowerBar = new HLayout();
        lowerBar.setAlign(Alignment.CENTER);
        lowerBar.setMembers(listName);
        lowerBar.setHeight(10);
        lowerBar.setAlign(VerticalAlignment.TOP);

        totalLabel = new totalLabel(count);
        if (myLeads == true) {
            totalLabel.setBaseStyle("customMainMenuTotalWithNotification");
            Label notification = new NotificationLabel(overdue);
            notification.setBaseStyle("customMainMenuNotification");
            button.addChild(notification);
            button.addChild(totalLabel);

        } else {
            totalLabel.setBaseStyle("customMainMenuTotal");
            button.addChild(totalLabel);
        }
        upperBar.setMembers(button);
        this.setMembers(upperBar, lowerBar);
        return this;
    }

    private class MenuLabel extends Label {
        public MenuLabel(String url) {
            setIconSize(60);
            setIcon(url);
            setHeight(120);
            setWidth(120);
        }
    }

    private class NotificationLabel extends Label {
        public NotificationLabel(String overdue) {
            setContents(overdue);
            setAlign(Alignment.CENTER);
            setHeight(26);
            setWidth(26);
        }
    }

    private class totalLabel extends Label {
        public totalLabel(String count) {
            setContents(count);
            setAlign(Alignment.CENTER);
            setHeight(26);
            setWidth(26);
        }
    }
}

CSS:

.customMainMenu
{

    border-radius:15%;
    background-color: #d1d3d4;
     border-right: 1px solid black ;
    border-bottom: 1px solid black;
    border-left: 1px solid black ;
    border-top: 1px solid black ; 


}

.customMainMenuNotification
{  
     border-radius: 13px 13px 13px 0px;
    background-color: red;
    position: relative;
      left: 80px; 
      bottom: 5px;
      color: white;
}

.customMainMenuTotal
{ 
      border-radius: 0px 13px 13px 13px;
    background-color: black;
     position: relative;
       left: 80px;
      top: 80px; 
      color: white;
}
.customMainMenuTotalWithNotification
{
     border-radius: 0px 13px 13px 13px;
    background-color: black;
     position: relative;
      left: 80px;
      top: 80px; 
      color: white;
}

.customMainMenuCaption
{
     font-weight: bold;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
}

Could there be any problem with this approach, regarding the used CSS?

Kind Regards

[Isomorphic]

It's not valid to set position:relative or use left/top coordinates in CSS styles applied as Canvas.styleName - you must use setPosition(), setLeft() etc instead. But there doesn't appear to be any reason to be doing this, as you could achieve the same position easily with the snapTo system.

[Developer12145]

Thanks for your quick response! I'm struggeling a little bit. I removed the css-attributes and tried your suggestions but with no luck.

First I tried this:

public class MainMenuButtonVLayout extends VLayout {

    MainAreaMobile parent;
    Label listName;
    Label buttonContainer;
    Label button;
    HLayout upperBar;
    HLayout lowerBar;

    public MainMenuButtonVLayout(MainAreaMobile parent) {
        this.parent = parent;

    }

    public VLayout getMainMenuButtonVLayout(Boolean hasNotification, String title, String overdue, String count, String iconURL,
            Boolean hasAttachedLabels) {

        setAutoWidth();
        setAutoHeight();
        setAlign(Alignment.RIGHT);

        buttonContainer = new MenuLabel("", 108, 0);
        buttonContainer.setBaseStyle("customMainMenuContainer");
        buttonContainer.setBackgroundColor("YELLOW");

        button = new MenuLabel(iconURL, 100, 60);
        button.setBaseStyle("customMainMenu");
        button.setAlign(Alignment.CENTER);
        button.setValign(VerticalAlignment.CENTER);
        button.addClickHandler(new ClickHandler() {

            public void onClick(ClickEvent event) {
                SC.say("Hello");
            }
        });

        buttonContainer.addChild(button);

        listName = new Label(title);
        listName.setWidth("50%");
        listName.setStyleName("customMainMenuCaption");
        listName.setAlign(Alignment.CENTER);

        upperBar = new HLayout();
        upperBar.setAlign(Alignment.CENTER);
        upperBar.setPadding(5);
        upperBar.setAutoHeight();

        lowerBar = new HLayout();
        lowerBar.setAlign(Alignment.CENTER);
        lowerBar.setMembers(listName);
        lowerBar.setHeight(10);
        lowerBar.setAlign(VerticalAlignment.TOP);

        if (hasAttachedLabels == true) {
            Label totalLabel = new totalLabel(count);
            if (hasNotification == true) {

                totalLabel.setBaseStyle("customMainMenuTotalWithNotification");
                totalLabel.setSnapTo("BR");

                Label notification = new NotificationLabel(overdue);
                notification.setBaseStyle("customMainMenuNotification");
                notification.setSnapTo("TR");

                buttonContainer.addChild(notification);
                buttonContainer.addChild(totalLabel);

            } else {

                totalLabel.setBaseStyle("customMainMenuTotal");
                totalLabel.setSnapTo("BR");

                buttonContainer.addChild(totalLabel);
            }
        }
        upperBar.setMembers(buttonContainer);
        this.setMembers(upperBar, lowerBar);
        return this;
    }

    private class MenuLabel extends Label {
        public MenuLabel(String url, int size, int iconsize) {
            setIconSize(iconsize);
            setIcon(url);
            setHeight(size);
            setWidth(size);
        }
    }

    private class NotificationLabel extends Label {
        public NotificationLabel(String overdue) {
            setContents(overdue);
            setAlign(Alignment.CENTER);
            setHeight(26);
            setWidth(26);
        }
    }

    private class totalLabel extends Label {
        public totalLabel(String count) {
            setContents(count);
            setAlign(Alignment.CENTER);
            setHeight(26);
            setWidth(26);
        }
    }

}

and then this:

public class MainMenuButtonVLayout extends VLayout {

    MainAreaMobile parent;
    Label listName;
    Label button;
    HLayout upperBar;
    HLayout lowerBar;

    public MainMenuButtonVLayout(MainAreaMobile parent) {
        this.parent = parent;

    }

    public VLayout getMainMenuButtonVLayout(Boolean hasNotification, String title, String overdue, String count, String iconURL,
            Boolean hasAttachedLabels) {

        setAutoWidth();
        setAutoHeight();
        setAlign(Alignment.RIGHT);

        button = new MenuLabel(iconURL, 100, 60);
        button.setBaseStyle("customMainMenu");
        button.setAlign(Alignment.CENTER);
        button.setValign(VerticalAlignment.CENTER);
        button.addClickHandler(new ClickHandler() {

            public void onClick(ClickEvent event) {
                SC.say("Hello");
            }
        });

        listName = new Label(title);
        listName.setWidth("50%");
        listName.setStyleName("customMainMenuCaption");
        listName.setAlign(Alignment.CENTER);

        upperBar = new HLayout();
        upperBar.setAlign(Alignment.CENTER);
        upperBar.setPadding(5);
        upperBar.setAutoHeight();

        lowerBar = new HLayout();
        lowerBar.setAlign(Alignment.CENTER);
        lowerBar.setMembers(listName);
        lowerBar.setHeight(10);
        lowerBar.setAlign(VerticalAlignment.TOP);

        if (hasAttachedLabels == true) {
            Label totalLabel = new totalLabel(count);
            if (hasNotification == true) {

                totalLabel.setBaseStyle("customMainMenuTotalWithNotification");
                totalLabel.setSnapTo("BR");

                Label notification = new NotificationLabel(overdue);
                notification.setBaseStyle("customMainMenuNotification");
                notification.setSnapTo("TR");

                button.addChild(notification);
                button.addChild(totalLabel);

            } else {

                totalLabel.setBaseStyle("customMainMenuTotal");
                totalLabel.setSnapTo("BR");

                button.addChild(totalLabel);
            }
        }
        upperBar.setMembers(button);
        this.setMembers(upperBar, lowerBar);
        return this;
    }

    private class MenuLabel extends Label {
        public MenuLabel(String url, int size, int iconsize) {
            setIconSize(iconsize);
            setIcon(url);
            setHeight(size);
            setWidth(size);
        }
    }

    private class NotificationLabel extends Label {
        public NotificationLabel(String overdue) {
            setContents(overdue);
            setAlign(Alignment.CENTER);
            setHeight(26);
            setWidth(26);
        }
    }

    private class totalLabel extends Label {
        public totalLabel(String count) {
            setContents(count);
            setAlign(Alignment.CENTER);
            setHeight(26);
            setWidth(26);
        }
    }

}

It is necessary for us, that the notification-Label and the total-Label overlap the button-Label. So in the first scenario I did it almoust, but there is no possibility to center an object vertically and horizontally within a Label, right?
In the second scenario, it seems that you can't go further than the parents border. Or is it possible?

Thanks in advance

[Blama]

Hi,

please see this sample. Perhaps SnapTo->Center for the gray item in the 1st screenshot?

Best regards
Blama

[Developer12145]

Thanks, thats what I was looking for! Now it works.