Could image tab button be realised?

[songge3604]

Could image tab button be realised?

My artist give me a new challenge, she give me some images, and the tab look and feel look like this:

| image1 | |image2| |image3|
------------------------------------------------------------------------
| |
| |
| table pane |
| |
| |
------------------------------------------------------------------------
does this tab control be realsed?

Hope for you answer, good man.

images are different, not tab button' background

[CrazyEddie]

Hi,

While this is possible to do, accessing the images (presumably via a property) could be a little tricky.

Basically you would have a property defined in the WidgetLook that gets applied to the buttons used for the tab button pane. This property would then be referenced within an imagery section within the same WidgetLook in order for the image to be drawn.

Ok, that's the easy bit. The difficult bit is when you come to assign the image to be used; you need to access the button widget directly, even though it's automatically created and a couple of levels deep.

This can be done in code by accessing the button widget directly by name, which is named like so:

Code: Select all

NameOfTabControl__auto_TabPane__Buttons__auto_btnNameOfPage

Then setting the image property defined in the WidgetLook.

Hope this helps a little.

CE.

[songge3604]

ah....I don't know now, though i make a image tab button, but i don't know how to add it to tab control.

when i use the tabcontrol, set the property of text, the tab auto display a tab button which label is the text. it's magic, i ' don't know how it is realised.

besides this image tabcontrol, i also has another question, i don't know the ralations of tabbutton TabContentPane, TabButtonPane and TabControl.

why write a TabButtonPane? why not use TabButton directly?

thank you, i find cegui is more and more interesting ^ _ ^

[CrazyEddie]

The TabControl has a property that you set to specify which window type is to be used for the tab buttons. This is usually set in the looknfeel for the tab control; if you look at TaharezLook.looknfeel around line 3663, you will see this is done there:

Code: Select all

<Property name="TabButtonType" value="TaharezLook/TabButton" />

The text property on the added content pages are internally wired so that any change to the text will cause the button text to update also. This is just done using the EventTextChanged - no real magic

The relationship between the various parts / 'panes' of the TabControl largely exists for one of grouping and containment. The TabControl is the overall container of the other parts and gives you your main interface to the component. TabButtonPane is basically there as a container to hold the TabButtons, having this mainly aids in layout; buttons are clipped to this area, and we can move the buttons around (from the bottom to the top, for example) by moving this one item, rather than lots of buttons. TabButton is basically just a push button, it's used to tell the TabControl when it should switch pages. TabContentPane is again a container window used to hold whatever content is added for a given tab/page.

So, anyway. Setting the TabButtonType property is the way to have your new tab button type used. If you can't get it to work, post your new tab button WidgetLook definition, and I'll try and give a working example (depending on when you post, that may take a couple of days or so).

CE.

[songge3604]

Code: Select all

    <!--
    ***************************************************
        MyGameLook/TabButton
    ***************************************************
    -->
    <WidgetLook name="MyGameLook/TabButton">
        <PropertyDefinition name="NormalImage" initialValue="" redrawOnWrite="true" />
        <PropertyDefinition name="HoverImage" initialValue="" redrawOnWrite="true" />
        <PropertyDefinition name="PushedImage" initialValue="" redrawOnWrite="true" />
        <PropertyDefinition name="SelectedImage" initialValue="" redrawOnWrite="true" />
        <PropertyDefinition name="DisabledImage" initialValue="" redrawOnWrite="true" />
        <PropertyDefinition name="VertImageFormatting" initialValue="Stretched" redrawOnWrite="true" />
        <PropertyDefinition name="HorzImageFormatting" initialValue="Stretched" redrawOnWrite="true" />
        <ImagerySection name="topNormal">
            <ImageryComponent>
                <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>
                <ImageProperty name="NormalImage" />
                <VertFormatProperty name="VertImageFormatting" />
                <HorzFormatProperty name="HorzImageFormatting" />
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="topHover">
            <ImageryComponent>
                <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>
                <ImageProperty name="HoverImage" />
                <VertFormatProperty name="VertImageFormatting" />
                <HorzFormatProperty name="HorzImageFormatting" />
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="topPushed">
            <ImageryComponent>
                <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>
                <ImageProperty name="PushedImage" />
                <VertFormatProperty name="VertImageFormatting" />
                <HorzFormatProperty name="HorzImageFormatting" />
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="topSelected">
            <ImageryComponent>
                <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>
                <ImageProperty name="SelectedImage" />
                <VertFormatProperty name="VertImageFormatting" />
                <HorzFormatProperty name="HorzImageFormatting" />
            </ImageryComponent>
        </ImagerySection>
        <StateImagery name="TopNormal">
            <Layer>
                <Section section="topNormal" />
            </Layer>
        </StateImagery>
        <StateImagery name="TopHover">
            <Layer>
                <Section section="topHover" />
            </Layer>
        </StateImagery>
        <StateImagery name="TopSelected">
            <Layer>
                <Section section="topSelected" />
            </Layer>
        </StateImagery>
        <StateImagery name="TopPushed">
            <Layer>
                <Section section="topPushed" />
            </Layer>
        </StateImagery>
        <StateImagery name="TopDisabled">
            <Layer>
                <Section section="topDisabled" />
            </Layer>
        </StateImagery>
        <StateImagery name="BottomNormal" />
        <StateImagery name="BottomHover" />
        <StateImagery name="BottomSelected" />
        <StateImagery name="BottomPushed" />
        <StateImagery name="BottomDisabled" />
    </WidgetLook>


[/code][/quote]

[songge3604]

above is my looknfeel of image tab button

if this is a radio button, by the way, i realised a image radio button, it has some image properties, as the image tab button

and your cegui layout is very good, it can config new properties, like this

SupportedProperties=NormalImage, text; SelectedImage, text; ...

so when i use my image radio button, i can config it in cegui layout

you said

Code: Select all

        <Property name="TabButtonType" value="TaharezLook/TabButton"/>


can set the type of tab button

yes, i know it.

what i don't know is that how can i config the image properties in cegui layout when the button is a child of another widget

this problem puzzles me:

how can i config a child widget properties through cegui layout

if you help me resolve this question

i can resolve another looknfeel —— image slider

[CrazyEddie]

It's possible to set properties on child windows by following what is said in Introduction To Auto Windows.

I must admit I've not tried this for the tab control, and am actually not 100% certain it will work. Having briefly looked at the parsing code, I believe that it should do, so long as you're careful. The 'golden rule' here will be that you must order the layout in the correct way; content windows must come first otherwise you'll be trying to access an auto window that does not exist.

CE.