Styles with SelectItem

[dbscott525]

I am trying to inject CSS styles into a SelectItem.

Here is my desired results:

1. The pick list has three styles: a) regular row, b) alternate row, c) row with cursor over it.
2. Once an item is picked the style in the text box area is the same as regular row above.

I have been following the example in the Showcase entitled “Styled ComboBox”

Here is my sample program:

[B]public[/B] [B]class[/B] ComboBoxStyleEntry [B]implements[/B] EntryPoint {
    @Override
    [B]public[/B] [B]void[/B] onModuleLoad() {
        form().draw();
    }
 
    [B]private[/B] DynamicForm form() {
        [B]return[/B] [B]new[/B] DynamicForm() {
            {
                setBorder("1px solid black");
                setAutoWidth();
                setAutoHeight();
                setItems(comboBox());
            }
        };
    }
 
    [B]private[/B] SelectItem comboBox() {
        [B]return[/B] [B]new[/B] SelectItem() {
            {
                setValueMap(IntStream.[I]rangeClosed[/I](1, 5)
                                     .mapToObj(n -> "Row " + n)
                                     .collect(Collectors.[I]toMap[/I](x -> x, x -> styledItem(x), (x, y) -> x, LinkedHashMap::[B]new[/B])));
                setTextBoxStyle("ComboBox");
                setPickListBaseStyle("ComboBox");
                setShowTitle([B]false[/B]);
            }
 
            [B]private[/B] String styledItem(String itemName) {
                [B]return[/B] [B]new[/B] StringBuffer().append("<span style='")
                                         .append("color: rgb(255, 255, 255);")
                                         .append("font-family: \"Open Sans\", arial, helvetica, sans-serif;")
                                         .append("font-size: 120%;")
                                         .append("font-weight: 600;")
                                         .append("background: rgb(0, 144, 217);")
                                         .append("'>")
                                         .append(itemName)
                                         .append("</span>")
                                         .toString();
            }
        };
    }
}

Additionally, I am using this .css file:

[I].ComboBox[/I][B],[/B]
[I].ComboBoxDark[/I][B],[/B]
[I].ComboBoxFocused[/I][B],[/B]
[I].ComboBoxFocusedDark[/I][B],[/B]
[I].ComboBoxOver[/I][B],[/B]
[I].ComboBoxOverDark[/I][B],[/B]
[I].ComboBoxSelected[/I][B],[/B]
[I].ComboBoxSelectedDark[/I][B],[/B]
[I].ComboBoxSelectedOverDark[/I]
{
    background: [I]rgb(0,[/I] [I]144,[/I] [I]217)[/I];
}

This comes close to achieving what I would like.

Here of the deficits that I haven’t been able to find a solution for:

1. When I mouse over the pick list every other row renders with a white background but the text has the blue background.
2. On the alternative rows the background remain blue for the entire area.
3. I haven’t found a way to complete change the style with a mouse over.

I have attached a screenshot that shows where a row has blue background for the test and white background for non-text.

[Isomorphic]

Hi,
This approach of injecting raw HTML/CSS into the valueMap is probably not going to be the best way to customize the appearance for a SelectItem.

The drop-down pickList of a selectItem is a specialized subclass of ListGrid and as such you can style rows in it using the standard ListGrid cell styling customizations.

We have various samples which demonstrate customizing ListGrid cell styles which may be helpful for this:
custom cell styles
adding cssText to cell style
replacing cell styles for specific cells

You also mention alternate record styles - this can be achieved via setAlternateRecordStyles().

You can modify the base-style for the pickList cells using the SelectItem API "setPickListBaseStyle()".

For other customizations, you can use the the [url=http://www.smartclient.com/smartgwtee-release/javadoc/index.html?com/smartgwt/client/docs/AutoChildUsage.html]autoChild pattern[/ur] to customize the pickList that will be generated. Essentially you can create a template ListGrid, with the customizations you need, and have the pickList pick up properties from it by calling 'setPickListProperties()' on the SelectItem.

It sounds like you also want customization of the appearance within the text box once a value is selected. This is achievable via SelectItem.setControlStyle(), setTextBoxStyle() etc. See the FormItemStyling overview for an overview on these, and related properties.

- This should give you enough information to get the appearance and behavior you need.

As an aside - we're not entirely following your description of your desired appearance, so if you need futher assistance, please try to clarify exactly what appearance you need for each part of the pickList, the item, etc [mocking up some screenshots might help], and what specifically is failing for you.

Regards
Isomorphic Software

[dbscott525]

Thank you. Your reply is very helpful and has enabled me to make a lot of progress.

In referring to the examples in the Showcase I was unable to find where the CSS files are for those examples. Please provide a link that will show me the CSS files.

Here is the sample program that accomplishes almost everything I’m trying to accomplish.

public class ComboBoxStyleEntry implements EntryPoint {
    @Override
    public void onModuleLoad() {
        form().draw();
    }
 
    private DynamicForm form() {
        return new DynamicForm() {
            {
                setAutoHeight();
                setAutoWidth();
                setBorder("1px solid black");
                setItems(selectItem());
            }
        };
    }
 
    private SelectItem selectItem() {
        return new SelectItem() {
            {
                setValueMap(IntStream.rangeClosed(1, 5)
                                     .mapToObj(n -> "row " + n)
                                     .toArray(String[]::new));
 
                setHeight(45);
                setPickListProperties(pickListTemplate());
                setShowTitle(false);
                setTextBoxStyle("ComboBox");
            }
 
        };
    }
 
    private ListGrid pickListTemplate() {
        return new ListGrid() {
            {
                setBaseStyle("Picklist");
            }
        };
    }
}

Here is the CSS file:

.ComboBox,
.ComboBoxFocused
{
    color: rgb(255, 255, 255);
    font-family: "Open Sans", arial, helvetica, sans-serif;
    font-size: 120%;
    font-weight: 600;
    background: rgb(0, 144, 217);
    padding: 10px;
}
 
.Picklist
{
    color: rgb(255, 255, 255);
    font-family: "Open Sans", arial, helvetica, sans-serif;
    font-size: 120%;
    font-weight: 600;
    background: rgb(0, 144, 217);
    padding: 10px;
}
 
.PicklistDark
{
    color: rgb(255, 255, 255);
    font-family: "Open Sans", arial, helvetica, sans-serif;
    font-size: 120%;
    font-weight: 600;
    background: rgb(153, 217, 234);
    padding: 10px;
}
 
.PicklistOver,
.PicklistOverDark,
.PicklistSelected,
.PicklistSelectedDark,
.PicklistSelectedOver,
.PicklistSelectedOverDark
{
    color: black;
    font-family: "Open Sans", arial, helvetica, sans-serif;
    font-size: 120%;
    font-weight: 600;
    background: white;
    padding: 10px;
}

The remaining problem is that when I set the height on the SelectItem the display results in showing something that looks like a calendar icon.

I have attached a screenshot of what that looks like.

[Isomorphic]

In referring to the examples in the Showcase I was unable to find where the CSS files are for those examples. Please provide a link that will show me the CSS files.

The SmartClient (JavaScript) versions of those same samples actually show the CSS directly in the sample source. Check out the "CSS" tabs on the samples here and here.

On your second problem - the SelectItem down-array icon uses spriting to load its image. As such it is displaying a fixed-size chunk from a larger composite image, and increasing the image size will not by default scale correctly (instead you'll get more of the composite image revealed).

In SmartClient 11.1 we have a solution in progress for scaling image sprites but this is not yet publicly available. Therefore you probably want to disable spriting for this image.
Spriting is enabled for the SelectItem (and various other components) in the load_skin.js file for the Enterprise skin and other modern skins (you can search that file for "useSpriting" to see the various places where spriting is enabled).
Essentially what it does is set the pickerIcon src to "blank" and then set the baseStyle on the pickerIcon to a style which includes the clipped background image.
You can turn this off for your item by setting the pickerIconSrc back to the un-sprited image (the following string should do it: "[SKIN]/pickers/comboBoxPickerLite.png") -- and set the baseStyle on the pickerIconProperties to null (and possibly also set the pickerIconStyle to null).

Regards
Isomorphic Software

[dbscott525]

Thank you for the information. It was very helpful.

The reference to the CSS settings was very useful. Hopefully, the CSS reference can be added to the SmartGWT showcase in the future.

In the version of SmartGWT that I’m working with, the file, comboBoxPickerLite.png, does not exist. However, I did find the file comboBoxPicker.png.

Using this file and following your other guidance resulted in an acceptable display.

Here is the resulting test code:

[B]public[/B] [B]class[/B] ComboBoxStyleEntry [B]implements[/B] EntryPoint {
    @Override
    [B]public[/B] [B]void[/B] onModuleLoad() {
        form().draw();
    }
 
    [B]private[/B] DynamicForm form() {
        [B]return[/B] [B]new[/B] DynamicForm() {
            {
                setAutoHeight();
                setAutoWidth();
                setBorder("1px solid black");
                setItems(selectItem());
            }
        };
    }
 
    [B]private[/B] SelectItem selectItem() {
        [B]return[/B] [B]new[/B] SelectItem() {
            {
                setValueMap(IntStream.[I]rangeClosed[/I](1, 5)
                                     .mapToObj(n -> "row " + n)
                                     .toArray(String[]::[B]new[/B]));
 
                setHeight(45);
                setPickListProperties([B]new[/B] ListGrid() {
                    {
                        setBaseStyle("Picklist");
                    }
                });
                setShowTitle([B]false[/B]);
                setTextBoxStyle("ComboBox");
                setPickerIconSrc("[SKIN]/pickers/comboBoxPicker.png");
                setPickerIconProperties([B]new[/B] FormItemIcon() {
                    {
                        setBaseStyle([B]null[/B]);
                    }
                });
            }
 
        };
    }
}

CSS:

[I].ComboBox[/I][B],[/B]
[I].ComboBoxFocused[/I]
{
    color: [I]rgb(255,[/I] [I]255,[/I] [I]255)[/I];
    font-family: [I]"Open Sans",[/I] [I]arial,[/I] [I]helvetica,[/I] [I]sans-serif[/I];
    font-size: [I]120%[/I];
    font-weight: [I]600[/I];
    background: [I]rgb(0,[/I] [I]144,[/I] [I]217)[/I];
    padding: [I]10px[/I];
}
 
[I].Picklist[/I]
{
    color: [I]rgb(255,[/I] [I]255,[/I] [I]255)[/I];
    font-family: [I]"Open Sans",[/I] [I]arial,[/I] [I]helvetica,[/I] [I]sans-serif[/I];
    font-size: [I]120%[/I];
    font-weight: [I]600[/I];
    background: [I]rgb(0,[/I] [I]144,[/I] [I]217)[/I];
    padding: [I]10px[/I];
}
 
[I].PicklistDark[/I]
{
    color: [I]rgb(255,[/I] [I]255,[/I] [I]255)[/I];
    font-family: [I]"Open Sans",[/I] [I]arial,[/I] [I]helvetica,[/I] [I]sans-serif[/I];
    font-size: [I]120%[/I];
    font-weight: [I]600[/I];
    background: [I]rgb(153,[/I] [I]217,[/I] [I]234)[/I];
    padding: [I]10px[/I];
}
 
[I].PicklistOver[/I][B],[/B]
[I].PicklistOverDark[/I][B],[/B]
[I].PicklistSelected[/I][B],[/B]
[I].PicklistSelectedDark[/I][B],[/B]
[I].PicklistSelectedOver[/I][B],[/B]
[I].PicklistSelectedOverDark[/I]
{
    color: [I]black[/I];
    font-family: [I]"Open Sans",[/I] [I]arial,[/I] [I]helvetica,[/I] [I]sans-serif[/I];
    font-size: [I]120%[/I];
    font-weight: [I]600[/I];
    background: [I]white[/I];
    padding: [I]10px[/I];
}