Changing display attributes of RibbonBar and RibbonGroup

[dbscott525]

I would like to change the style various components of RibbonBar and RibbonGroup to match the style of my application.

I have tried the following:

[B]public[/B] [B]class[/B] TestLayout [B]extends[/B] VStack {
    [B]public[/B] TestLayout() {
 
        setWidth100();
        RibbonBar ribbonBar = [B]new[/B] RibbonBar();
        ribbonBar.setLeft(0);
        ribbonBar.setTop(75);
        ribbonBar.setWidth100();
        ribbonBar.setBackgroundColor("white");
        ribbonBar.setGroupLabelStyleName("login-label");
        ribbonBar.setGroupLabelBackgroundColor("blue");
        addMember(ribbonBar);
 
        RibbonGroup ribbonGroup = [B]new[/B] RibbonGroup();
        ribbonGroup.setTitle("Add");
        ribbonGroup.setGroupLabelBackgroundColor("blue");
        ribbonGroup.setBackgroundColor("red");
        ribbonGroup.setTitleStyle("login-label");
        ribbonBar.addMember(ribbonGroup);
    }
}

These style API calls have no effect.

What are the correct calls to change styles of various components of RibbonBar and RibbonGroup?

I’m interested in changing:

1. Font of the title of a RibbonGroup
2. Backgroud color of the title of a RibbonGroup
3. Background color of the control area in a Ribbon group
4. Border settings for all components.

[Isomorphic]

setGroupLabelBackgroundColor() is inherited from Canvas and controls an unrelated feature - see the doc for Canvas.getIsGroup().

These APIs will allow you to use CSS classes for all your requirements, including borders:

ribbonBar/ribbonGroup.setStyleName() - sets the CSS class for the bar or group
ribbonGroup.setTitleStyle() - sets the CSS class for the group's title Label

IconButton.setBaseStyle() - could be used to set the border of buttons via CSS

For more control, you could also use group.setAutoChildProperties("label", {Label instance}) to provide defaults for the autoChild "label" widget. See the doc for the AutoChild system if you aren't familiar with it.

[dbscott525]

ribbonGroup.setTitleStyle() - sets the CSS class for the group's title Label

I tried ribbonGroup.setTitleStyle() with the following code:

[B]public[/B] [B]class[/B] RibbonBarStyle [B]extends[/B] VStack {
 
    [B]public[/B] RibbonBarStyle() {
        Label label = [B]new[/B] Label("Hello World");
        label.setStyleName("RibbonGroupTitle");
        addMember(label);
 
        RibbonBar ribbonBar = [B]new[/B] RibbonBar();
        ribbonBar.setWidth100();
        addMember(ribbonBar);
 
        RibbonGroup ribbonGroup = [B]new[/B] RibbonGroup();
        ribbonGroup.setTitle("Add");
        ribbonGroup.setTitleStyle("RibbonGroupTitle");
        ribbonBar.addMember(ribbonGroup);
    }
 
}

Here’s the CSS class:

[I].RibbonGroupTitle[/I] {
      font-size: [I]30px[/I];
}

I have attached an image of the result. From the image you can see that they font size of the group’s title label did not change and is still the default. However, the label containing “Hello World” does have the appropriate font size based on the CSS class RibbonGroupTitle.

For more control, you could also use group.setAutoChildProperties("label", {Label instance}) to provide defaults for the autoChild "label" widget. See the doc for the AutoChild system if you aren't familiar with it.

I read the document and I can see how to change the default settings for a child component. In the document it says to look at the JavaDoc for AutoChild documentation. I the JavaDoc for RibbonGroup there is not list of AutoChilds belong to RibbonGroup. How, do I find the names of the AutoChildren of RibbonGroup?

[dbscott525]

For more control, you could also use group.setAutoChildProperties("label", {Label instance}) to provide defaults for the autoChild "label" widget. See the doc for the AutoChild system if you aren't familiar with it.

I read the document and I can see how to change the default settings for a child component. In the document it says to look at the JavaDoc for AutoChild documentation. I the JavaDoc for RibbonGroup there is not list of AutoChilds belong to RibbonGroup. How, do I find the names of the AutoChildren of RibbonGroup?

[Isomorphic]

The styling issue is an order of operations thing, which we will look into - in the meantime, you just need to call setTitleStyle() *before* calling setTitle().

Note also that you are still using ribbonBar.addMember() - this should be addGroup().

On AutoChildren - you can just open the JavaDoc for a class and scan for the word "AutoChild".

[dbscott525]

The styling issue is an order of operations thing, which we will look into - in the meantime, you just need to call setTitleStyle() *before* calling setTitle().

I made progress doing what is suggested.

Here is my current test code:

[B]public[/B] [B]class[/B] RibbonBarStyle [B]extends[/B] VStack {
 
    [B]public[/B] RibbonBarStyle() {
        Label label = [B]new[/B] Label("Hello World");
        label.setStyleName("RibbonGroupTitle");
        addMember(label);
 
        RibbonBar ribbonBar = [B]new[/B] RibbonBar();
        ribbonBar.setWidth(1);
        addMember(ribbonBar);
 
        RibbonGroup ribbonGroup = [B]new[/B] RibbonGroup();
        ribbonGroup.setTitleStyle("RibbonGroupTitle");
        ribbonGroup.setStyleName("RibbonGroup");
        ribbonGroup.setTitle("Add");
        ribbonGroup.setNumRows(2);
        ribbonBar.addGroup(ribbonGroup);
 
        [B]for[/B] (Image image : [B]new[/B] Image[] { Image.[B][I]TopicGroup[/I][/B], Image.[B][I]Topic[/I][/B], Image.[B][I]Option[/I][/B] }) {
            IconButton button = [B]new[/B] IconButton();
            button.setShowButtonTitle([B]false[/B]);
            button.setIcon(image.getFileName());
            ribbonGroup.addControl(button);
        }
    }
 
}

I’ve attached an image of the result.

Now I’m trying to get rid of the margin around the title label. To do this I have changed the CSS as follows:

[I].RibbonGroupTitle[/I] {
      font-size: [I]12px[/I];
      background: [I]white[/I];
    padding: [I]0px[/I];
    margin: [I]0px[/I];
}
 
[I].RibbonGroup[/I] {
    font-size: [I]12px[/I];
    background: [I]rgb(076,[/I] [I]177,[/I] [I]228)[/I];
    padding: [I]0px[/I];
    margin: [I]0px[/I];
}

This has no effect. How can I get rid of the margins around the title label.

On AutoChildren - you can just open the JavaDoc for a class and scan for the word "AutoChild".

I did a search on the JavaDoc for RibbonBar and RibbonGroup. In these two documents I could not find a list of the names of the AutoChild.

My understanding on using AutoChild is that you need to know the name of the AutoChild in order to change its properties. To do this don’t I need to be able to find a list of the names of the AutoChild? How can a get a list of the AutoChild names?

[Isomorphic]

You can use standard Canvas/Layout APIs - in this case, group.setLayoutMargin(0).

For AutoChildren, we don't currently generate a list of AutoChildren into the JavaDoc - you can detect the autoChildren supported on a class by scanning the class JavaDoc for the word "AutoChild". There are getters for public autoChildren, and the name to use in calls to setAutoChildProperties() is the camelCased name of the getter, without the "get" prefix. The docs link to the AutoChild topic.

In your case, RibbonBar and RibbonGroup are simple extensions of ToolStrip and ToolStripGroup - you'll find inherited autoChildren documented there, although their getters are listed on the Ribbon classes - getLabel(), in this case.

[dbscott525]

Searching ToolStripGroup Javadoc for AutoChild I found the following methods:

• getBody
• getLabel
• getTitleProperties

I’m trying to change the border around the region of a RibbonGroup that contains the title label and the area that holds the controls (button icons).

So apparently these are the canvases that are available to change display properties. The only one that applies to what I’m trying to do is getBody.

So I tried to following code:

[B]public[/B] [B]class[/B] RibbonGroupBorder [B]extends[/B] RibbonBar {
 
    [B]static[/B] String[]    [I]imageFiles[/I] = [B]new[/B] String[] {
                                          "ConversationGuide/AlertIcon.png",
                                          "ConversationGuide/Recorder/qualification-badge-o-blue.png",
                                          "ConversationGuide/ContiguousSlider.png",
                                          "ConversationGuide/DateChooser.png",
                                          "ConversationGuide/DiscreteSlider.png",
                                          "ConversationGuide/Recorder/document.png", };
    [B]private[/B] [B]static[/B] [B]int[/B] [I]imageIndex[/I];
 
    [B]public[/B] RibbonGroupBorder() {
        [I]imageIndex[/I] = 0;
        addGroup([B]new[/B] ImageGroup(1, 1));
        addGroup([B]new[/B] ImageGroup(2, 1));
        addGroup([B]new[/B] ImageGroup(3, 2));
    }
 
    [B]private[/B] [B]static[/B] [B]class[/B] ImageGroup [B]extends[/B] RibbonGroup {
 
        /**
         * If this is set to true it will draw a border just around the
         * IconButtons, but not around the entire body.
         */
        [B]private[/B] [B]static[/B] [B]final[/B] [B]boolean[/B] [B][I]SET_GROUP_BODY_BORDER[/I][/B] = [B]true[/B];
 
        /**
         * If this is set to true it will cause the display to go into an
         * infinite redrawing loop where the size of the RibbonGroup gets larger
         * and larger.
         */
        [B]private[/B] [B]static[/B] [B]final[/B] [B]boolean[/B] [B][I]SET_GROUP_BORDER[/I][/B]      = [B]false[/B];
 
        [B]public[/B] ImageGroup([B]int[/B] numberOfImages, [B]int[/B] numberOfRows) {
            setNumRows(numberOfRows);
            setTitle("Has " + numberOfImages + " Images");
            ULog.[I]info[/I]([B]this[/B], "numberOfImages=" + numberOfImages);
            [B]for[/B] ([B]int[/B] i = 0; i < numberOfImages; i++) {
                String imageFileName = [I]imageFiles[/I][[I]imageIndex[/I]++];
                IconButton iconButton = [B]new[/B] IconButton();
                iconButton.setIcon(imageFileName);
                iconButton.setShowButtonTitle([B]false[/B]);
                iconButton.setShowFocused([B]false[/B]);
                addControl(iconButton);
            }
 
            [B]if[/B] ([B][I]SET_GROUP_BODY_BORDER[/I][/B]) {
                getBody().setBorder("2px solid red");
            }
 
            [B]if[/B] ([B][I]SET_GROUP_BORDER[/I][/B]) {
                setBorder("2px solid blue");
            }
        }
 
    }
}

In this code I tried the following:

• getBody().setBorder – This results in a border around the button icons only.
• setBorder – This results in an infinite display loop where the RibbonGroups are drawn larger and larger eventually causing Firefox browser to freeze.

In addition to this, we have noticed that since we started using RibbonBar, that Firefox will sporadically freeze. We suspect there is potentially an infinite display bug.