Selection on a multi-column listbox

[Houdini]

According to the docs, setSelectionBrushImage() must be called for comboboxes, listboxes, and multicolumnlistboxes in order for the selection highlight to display.

Looking at the Demo7 sample setSelectionBrushImage() is set automatically using the MyListItem class. Yet if I comment out that line both comboboxes and listboxes still highlight. MultiColumnList doesn't highlight however.

Looking into it further I notice that the looknfeel file has this:

Code: Select all

<WidgetLook name="TaharezLook/ListboxItem">
        <PropertyDefinition name="TextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
        <PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
        <PropertyDefinition name="SelectionBrush" initialValue="set:TaharezLook image:ListboxSelectionBrush" redrawOnWrite="true" />
...


So this makes sense as to why the listbox still highlights without calling setSelectionBrushImage() in code, but why doesn't MultiColumnList highlight? Is there no way to specify the highlight brush in the looknfeel file for a multi-column listbox?

- Houdini

[CrazyEddie]

Ok. A few of things...

There are two separate types of Listbox. One is called 'Listbox' and uses content based off of the ListboxItem class, which is not affected in any way the the looknfeel specifications. The other type is called 'ItemListbox' and has content based off of the ItemEntry type which is Window based and does get skinned via the looknfeel.

The ComboBox uses a subclass of the basic Listbox for it's list, so inherits that widget type's use of the ListboxItem for content.

The MultiColumnList uses ListboxItem based content, so typically can not use looknfeel based definitions for it's content.

For Demo7, commenting the setSelectionBrushImage line should affect the MCL and the ComboBox, but not the ordinary Listbox (since it's an example of an TaharezLook/ItemListbox).

There is a future plan that all the list types will be replaced by new classes taking ItemEntry based content, and a desire to unify all of that within a single list widget class.

While above I have said that ListboxItem based content is not skinned, I recently wrote a hack (all client app side) that allows a ListboxItem to render itself using a looknfeel defined in XML; that's part of something I did for the Ogre SDK Trays recreation skin. I can perhaps post that if you're interested.

CE.

[Houdini]

CrazyEddie,

Thanks, that would be fantastic if you could post that code!

- Houdini

[CrazyEddie]

Ok. What I'm posting does contain references to various stuff in that Ogre skin, though you should get the general idea. The main caveat is that you can't have per-item properties (because they're not window based items), but you could have properties set on the Listbox itself, and the skin would pick those up instead, so you can set properties for the skin on a per-list basis, rather than a per-item basis - this limitation probably sounds worse than what it is

Also be aware of the c-style cast that casts away const-ness.

Here's the item class code

Code: Select all

namespace CEGUI
{

/*  This is one of CrazyEddie's Über-hacks..
 * 
 *  Basically we have a standard non-window based ListboxItem
 *  that takes a Falagard xml based widget look and uses it to
 *  render the item imagery.
 *
 *  Use this hack carefully, it's fine and powerful when used in
 *  moderation, but could just as easily blow the legs off your project
 *  if abused too heavily!
 */
class OgreTrayListItem : public ListboxItem
{
public:
    OgreTrayListItem(const String& text) :
        ListboxItem(text),
        d_widgetLook(WidgetLookManager::getSingleton().getWidgetLook("OgreTray/BasicListboxItem"))
    {
    }

    Size getPixelSize(void) const
    {
        // Casting away const, not a particularly clever thing...
        ((Window*)d_owner)->setText(getTextVisual());

        return d_widgetLook.getNamedArea("ContentSize").
            getArea().getPixelRect(*d_owner).getSize();
    }

    void draw(GeometryBuffer& buffer, const Rect& targetRect,
              float alpha, const Rect* clipper) const
    {
        // Casting away const, not a particularly clever thing...
        ((Window*)d_owner)->setText(getTextVisual());

        if (d_selected)
            d_widgetLook.getStateImagery(d_disabled ? "SelectedDisabled" : "SelectedEnabled").
                render((Window&)*d_owner, targetRect, 0, clipper);
        else
            d_widgetLook.getStateImagery(d_disabled ? "Disabled" : "Enabled").
                render((Window&)*d_owner, targetRect, 0, clipper);
    }

protected:
    const WidgetLookFeel& d_widgetLook;
};

}

And here's an example of the WidgetLook that it's referencing:

Code: Select all

<!--
:::: Basic Listbox Item.  This is the XML side of CE's Über-hack for getting the
:::: non-window based ListboxItem to render via a Falagard skin.  This is
:::: largely a clone of the skin for ItemEntry, except the text colours are not
:::: configurable; there are ways that could be done, but for this skin, perhaps
:::: it would be a hack too far ;)
-->
    <WidgetLook name="OgreTray/BasicListboxItem">
      <NamedArea name="ContentSize">
         <Area>
            <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
            <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
            <Dim type="Width" >
               <FontDim type="HorzExtent">
                        <DimOperator op="Add">
                            <ImageDim imageset="OgreTrayImages" image="MiniTextBoxL" dimension="Width" />
                        </DimOperator>
                    </FontDim>
            </Dim>
            <Dim type="Height" >
               <FontDim type="LineSpacing">
                        <DimOperator op="Add">
                            <ImageDim imageset="OgreTrayImages" image="MiniTextBoxT" dimension="Height" />
                        </DimOperator>
                    </FontDim>
            </Dim>
         </Area>
      </NamedArea>
        <ImagerySection name="main">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image type="TopLeftCorner" imageset="OgreTrayImages" image="MiniTextBoxTL" />
                <Image type="TopRightCorner" imageset="OgreTrayImages" image="MiniTextBoxTR" />
                <Image type="BottomLeftCorner" imageset="OgreTrayImages" image="MiniTextBoxBL" />
                <Image type="BottomRightCorner" imageset="OgreTrayImages" image="MiniTextBoxBR" />
                <Image type="LeftEdge" imageset="OgreTrayImages" image="MiniTextBoxL" />
                <Image type="TopEdge" imageset="OgreTrayImages" image="MiniTextBoxT" />
                <Image type="RightEdge" imageset="OgreTrayImages" image="MiniTextBoxR" />
                <Image type="BottomEdge" imageset="OgreTrayImages" image="MiniTextBoxB" />
                <Image type="Background" imageset="OgreTrayImages" image="MiniTextBoxM" />
            </FrameComponent>
        </ImagerySection>
        <ImagerySection name="selection">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image type="TopLeftCorner" imageset="OgreTrayImages" image="MiniTextBoxOverTL" />
                <Image type="TopRightCorner" imageset="OgreTrayImages" image="MiniTextBoxOverTR" />
                <Image type="BottomLeftCorner" imageset="OgreTrayImages" image="MiniTextBoxOverBL" />
                <Image type="BottomRightCorner" imageset="OgreTrayImages" image="MiniTextBoxOverBR" />
                <Image type="LeftEdge" imageset="OgreTrayImages" image="MiniTextBoxOverL" />
                <Image type="TopEdge" imageset="OgreTrayImages" image="MiniTextBoxOverT" />
                <Image type="RightEdge" imageset="OgreTrayImages" image="MiniTextBoxOverR" />
                <Image type="BottomEdge" imageset="OgreTrayImages" image="MiniTextBoxOverB" />
                <Image type="Background" imageset="OgreTrayImages" image="MiniTextBoxOverM" />
            </FrameComponent>
        </ImagerySection>
      <ImagerySection name="label">
         <TextComponent>
            <Area>
               <Dim type="TopEdge">
                        <ImageDim imageset="OgreTrayImages" image="MiniTextBoxT" dimension="Height">
                            <DimOperator op="Divide">
                                <AbsoluteDim value="2" />
                            </DimOperator>
                        </ImageDim>
                    </Dim>
               <Dim type="LeftEdge">
                        <ImageDim imageset="OgreTrayImages" image="MiniTextBoxL" dimension="Width">
                            <DimOperator op="Divide">
                                <AbsoluteDim value="2" />
                            </DimOperator>
                        </ImageDim>
               </Dim>
               <Dim type="Width">
                  <UnifiedDim scale="1" type="Width">
                            <DimOperator op="Subtract">
                                <ImageDim imageset="OgreTrayImages" image="MiniTextBoxL" dimension="Width" />
                            </DimOperator>
                        </UnifiedDim>
               </Dim>
               <Dim type="Height">
                  <UnifiedDim scale="1" type="Height">
                            <DimOperator op="Subtract">
                                <ImageDim imageset="OgreTrayImages" image="MiniTextBoxT" dimension="Width" />
                            </DimOperator>
                        </UnifiedDim>
               </Dim>
            </Area>
         </TextComponent>
      </ImagerySection>
      <StateImagery name="Enabled">
         <Layer>
            <Section section="main" />
            <Section section="label">
                    <Colours topLeft="FF000000" topRight="FF000000" bottomLeft="FF000000" bottomRight="FF000000" />
                </Section>
         </Layer>
      </StateImagery>
      <StateImagery name="Disabled">
         <Layer>
            <Section section="main" />
            <Section section="label">
                    <Colours topLeft="FF000000" topRight="FF000000" bottomLeft="FF000000" bottomRight="FF000000" />
                </Section>
         </Layer>
      </StateImagery>
      <StateImagery name="SelectedEnabled">
         <Layer>
            <Section section="selection" />
            <Section section="label">
                    <Colours topLeft="FF000000" topRight="FF000000" bottomLeft="FF000000" bottomRight="FF000000" />
                </Section>
         </Layer>
      </StateImagery>
      <StateImagery name="SelectedDisabled">
         <Layer>
            <Section section="selection" />
            <Section section="label">
                    <Colours topLeft="FF000000" topRight="FF000000" bottomLeft="FF000000" bottomRight="FF000000" />
                </Section>
         </Layer>
      </StateImagery>
    </WidgetLook>

Obviously you can't use this skin as-is since the Imageset and what have you is not released (yet). But the idea is to give an example of the kind of thing you can / might want to do yourself.

HTH

CE.