Codename One: ComponentGroupBool on Android by CSS

2
votes

Note for the readers: this question is specific for Codename One only.

The following code works perfectly on iOS:

    ComponentGroup cmpGroup = ComponentGroup.enclose(camera, gallery);
    cmpGroup.getComponentAt(0).getAllStyles().setAlignment(Component.LEFT);
    cmpGroup.getComponentAt(1).getAllStyles().setAlignment(Component.LEFT);

with this CSS:

#Constants {
    ComponentGroupBool: true;
    includeNativeBool: true;
    [...]
}

The problem is that there is no effect on Android. So, I understood that the CompontGroup UIIDs are implemented in the iOS native theme, but they are not in the Android native theme.

My question is how to make the CompontGroup working in the same way on iOS and Android, using CSS.

2
codenameone

2 Answers

1
votes

You need to add styles for GroupElementFirst, GroupElementLast, GroupElement, GroupElementOnly, ButtonGroupFirst, ButtonGroupLast, ButtonGroup, ButtonGroupOnly.

Styling ButtonGroup* would let you avoid the alignment left styling you have in your code.

We designed the round rect borders top/bottom only modes exactly for this purpose but I'm not sure if they are implemented in CSS. I'll have to check on that.

1
votes

A possible (not pixel-perfect) solution based on the Shai's answer, that produces an acceptable result like this:

enter image description here

It's not pixel-perfect because between the GroupElementFirst and the GroupElementLast there is a small space. 

/* Start of ComponentGroup CSS */

GroupElementFirst {
    border-width: 0.3mm;
    border-color: gray;
    border-style: solid;
    border-top-right-radius: 3mm;
    border-top-left-radius: 3mm;
    margin: 2mm;
    margin-bottom: 0px;
    padding: 2mm;
}

GroupElementLast{
    border-width: 0.3mm;
    border-color: gray;
    border-style: solid;
    border-bottom-right-radius: 3mm;
    border-bottom-left-radius: 3mm;
    margin: 2mm;
    margin-top: 0px;
    padding: 2mm;
}

GroupElement{
    border-width: 0.3mm;
    border-color: gray;
    border-style: solid;
    margin: 2mm;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 2mm;
}

GroupElementOnly{
    border-width: 0.3mm;
    border-color: gray;
    border-style: solid;
    border-radius: 3mm;
    margin: 2mm;
    padding: 2mm;
}

ButtonGroupFirst{
    cn1-derive: GroupElementFirst;
}

ButtonGroupLast{
    cn1-derive: GroupElementLast;
}

ButtonGroup{
    cn1-derive: GroupElement;
}

ButtonGroupOnly {
    cn1-derive: GroupElementOnly;
}

/* End of ComponentGroup */