RibbonBar autosizing

[kintishk]

I am using SmartClient Version: v11.1p_2018-02-21/PowerEdition Deployment (built 2018-02-21). I have a RibbonBar containing three RibbonGroups. Each RibbonGroup has numRows() set to 1. Together, the three RibbonGroups take up most of the screen width. Users have mentioned that when they make the browser window smaller, the RibbonGroups are clipped. Is there a way I can set things up so that the number of rows is modified such that the contents of the groups will always be visible?

Thanks,
Ken

[Isomorphic]

The RibbonBar doesn't currently support autosizing like what you describe. You could implement an override of Canvas.parentResized() that updates the numRow of each RibbonGroup and then reflows it, based on the available width in the parent. To see such an approach in action, update the existing SmartGWT LGPL Showcase RibbonGroup sample with the following code:

 public Canvas getViewPanel() {
        ResponsiveRibbonBar ribbonBar = new ResponsiveRibbonBar();
        ribbonBar.setMultiRowThreshold(800);
        ribbonBar.setLeft(0);
        ribbonBar.setTop(75);

        Menu menu = new Menu();

        menu.addItem(new MenuItem("Document", "icons/16/document_plain_new.png", "Ctrl+D"));
        menu.addItem(new MenuItem("Picture", "icons/16/folder_out.png", "Ctrl+P"));
        menu.addItem(new MenuItem("Email", "icons/16/disk_blue.png", "Ctrl+E"));

        RibbonGroup editGroup = new RibbonGroup();
        editGroup.setTitle("Edit");
        editGroup.addControl(getIconButton("Edit", "piece_blue", false));
        editGroup.addControl(getIconButton("Copy", "pawn_green", false));
        editGroup.addControl(getIconButton("Paste", "cube_yellow", false));
        editGroup.addControl(getIconMenuButton("Undo", null, menu, false));
        editGroup.addControl(getIconMenuButton("Redo", null, menu, false));


        RibbonGroup insertGroup = new RibbonGroup();
        insertGroup.setTitle("Insert");
        insertGroup.addControl(getIconMenuButton("Picture", null, menu, false));
        insertGroup.addControl(getIconButton("Link", "pawn_white", false));
        insertGroup.addControl(getIconButton("Document", "star_yellow", false));
        insertGroup.addControl(getIconButton("Video", "piece_red", false));

        ribbonBar.addMember(editGroup);
        ribbonBar.addMember(insertGroup);

        return ribbonBar;

    }

    static class ResponsiveRibbonBar extends RibbonBar {

        private int multiRowThreshold;

        public void setMultiRowThreshold(int threshold) {
            multiRowThreshold = threshold;
        }

        protected void parentResized() {
            super.parentResized();

            if (!isDrawn()) return;

            Canvas[] members = getMembers();
            Canvas parent = getParentCanvas();

            int newNumRows = parent.getInnerContentWidth() < multiRowThreshold ? 3 : 1;
            int oldNumRows = ((RibbonGroup)members[0]).getNumRows();

            if (oldNumRows == newNumRows) return;

            for (int i = 0; i < members.length; i++) {
                RibbonGroup member = (RibbonGroup) members[i];
                member.setNumRows(newNumRows);
                member.reflowControls();
            }            
        }
    }

That's just a proof of concept. If you wanted to do a Feature Sponsorship for this, we'd probably make internal changes to RibbonGroup to leverage our existing FlowLayout class.

[kintishk]

Thanks for the response! I implemented something similar to what is described above.