LookNFeel Question: Creating a "grouping window".

[daves]

Attached is an image from one of the dialogs within Internet Explorer (Tools/Internet Options/Tabs/Settings):



I very much like the way that various options are grouped. Look, for example, at the group labeled "When a pop-up is encountered". I'd like to figure out how to create a corresponding look&feel for a generalized window that is a "grouping window". This window would have the textual label, and a surrounding border. The text and imagery in the top of this grouping seems like the most challenging part since the imagery (which includes the line that extends to the right of the text) is of variable width, starting just after the text.

Can someone please help to get me started with this. I'm looking for a good LookNFeel starting point to create something like this.

[CrazyEddie]

Hi,

Something along these lines is actually in the system for TaharezLook now, and will debut in an upcoming release.

If you want to see the skin for it, look at the xml around line 911:
http://crayzedsgui.svn.sourceforge.net/ ... iew=markup

Obviously ignore the content pane, unless you are into Auto window usage.

Hopefully it will give a few clues, if not ask again

CE.

[daves]

Tried that out.. and that certainly is along the lines of what I was thinking of (see image from test app below). I have a couple of questions (in blue below):





One question that came from this. I noticed that in the trunk code the scheme file included the following entry

Code: Select all



  <FalagardMapping WindowType="TaharezLook/GroupBox" TargetType="CEGUI/GroupBox" Renderer="Falagard/Default" LookNFeel="TaharezLook/GroupBox" />


I changed the TargetType to "DefaultWindow" and I got the above representation. What types of functions are associated with the "CEGUI/GroupBox"?

I have a separate question related to some of my on-going falagard experiments. If I want to create a simple colored background I can do it by referencing a background image in an image set and then "modulating the color over the background". For example using the following looknfeel def for MyLook/Button ( i would have a button that has a background image that by default is modulated with a red color). If the background image (MyBackgroundImage) is all white then I end up with a simple red rectangle. If the background image is black then the color seems to have no effect. Do I really need to reference an image in an imageset to simply define and color a rectangular area within my looknfeel?

Code: Select all

<WidgetLook name="MyLook/Button">
<PropertyDefinition name="NormalBackgroundColour" initialValue="FFFF0000" redrawOnWrite="true" />

<ImagerySection name="normal">
      <FrameComponent>
        <Area>
          ...
        </Area>
        ...
        <Image type="Background" imageset="TaharezLook" image="MyBackgroundImage" />
      </FrameComponent>
      </ImagerySection>


and

Code: Select all



   <StateImagery name="Normal">
      <Layer>
        <Section section="normal">
          <ColourProperty name="NormalBackgroundColour" />
        </Section>

      </Layer>
   
    </StateImagery>



One final question.. I tried to make the text background in the group box transparent (as opposed to black). I tweaked the initial value of the BackgroundTextColours property as follows:

Code: Select all

<PropertyDefinition name="BackgroundTextColours" initialValue="t1:33FF0000 tr:33FF0000 b1:33FF0000 br:33FF0000" redrawOnWrite="true" />


This did not seem to provide a "green semi-transparent background to the white text".. The text background was still black. What am I missing?

Thanks in advance.

[CrazyEddie]

What types of functions are associated with the "CEGUI/GroupBox"?

None really. The reason there is a sub-class is because it has a content pane as opposed to content getting added directly to the group box.

Do I really need to reference an image in an imageset to simply define and color a rectangular area within my looknfeel?

Yes, unfortunately this is required. Currently all rendering is based on the concepts of "Images" - so everything drawn has to be an Image. I thought about this a bit last evening, and am considering perhaps offering some alternative options in the future.

This did not seem to provide a "green semi-transparent background to the white text".. The text background was still black. What am I missing?

Not sure about this one at the moment, I'll have to have a look and get back to you later

CE.

[CrazyEddie]

Ok, I have had a look. The problem is that in this line:

Code: Select all

<PropertyDefinition name="BackgroundTextColours" initialValue="t1:33FF0000 tr:33FF0000 b1:33FF0000 br:33FF0000" redrawOnWrite="true" />

The ls (ells) in tl and bl are in fact 1s (ones). And yes, this is in all version in svn too

Also, the image being used is very dark, so change that to "MultiLineEditboxSelectionBrush" or something.

CE.

[daves]

Yes, unfortunately this is required. Currently all rendering is based on the concepts of "Images" - so everything drawn has to be an Image.

Wouldnt call this unfortunate. Its easy enough to have an all-white reference image should the need arise. I just wanted to make sure that I wasnt missing something within the Falagard specification.

Thanks.

[Metabug]

Sorry to resurrect an old thread but I got a couple questions regarding group box that's related to this.

I created a group box and tried to add children windows such as buttons and edit box to it in layout editor. When I try to save, none of the children windows get saved to the layout. Is this a bug?

I tried to manually add those children windows through xml, it wasn't working until I read the Intro to Auto Window and figured out I need to surround the windows with <AutoWindow> tags. What's the advantage of using auto window in group box over just making it a default window and add children windows to it directly?

[scriptkid]

Hi and welcome ,

i am not sure why the editor doesn't save children of a groupbox; i should look into this. However i do know that it's uncommon for a groupbox to be a parent. If you look at MFC or wxWidgets for example, you will notice that a groupbox is at the same level as it's 'children'. It's because of the transparent inner rectangle which makes it look like a parent.

Our "TextSample" also takes this approach.

About the Auto Windows: they should only be used when a window consists of several widgets. For example a scrollbar always has two scroll buttons. It's not meant to dynamically add windows as children. Although it will probably work, as you say

HTH.

[Jamarr]

Just thought I'd add my 2c since this thread helped me out. This is the setup I'm using for my GroupBox based on the WindowsLook scheme that doesn't currently have a GroupBox widget.

Note that it's mostly copy/pasted from TaharezLook. The difference are that it uses the 'StaticFrame' sets (instead of 'Static') for the border, 'HeaderMainBrush' (instead of 'StaticBackdrop') for the text/title background image, and I swapped the text foreground/background colors so that it is black on white.

Looknfeel

Code: Select all

    <!--
    ***************************************************
        WindowsLook/GroupBox
    ***************************************************
    -->
    <WidgetLook name="WindowsLook/GroupBox">
        <PropertyDefinition name="FrameColours" initialValue="tl:FFFFFFFF tr:FFFFFFFF bl:FFFFFFFF br:FFFFFFFF" redrawOnWrite="true" />
        <PropertyDefinition name="BackgroundColours" initialValue="tl:FFDFDFDF tr:FFDFDFDF bl:FFDFDFDF br:FFDFDFDF" redrawOnWrite="true" />

        <PropertyDefinition name="BackgroundTextColours" initialValue="tl:FFFFFFFF tr:FFFFFFFF bl:FFFFFFFF br:FFFFFFFF" redrawOnWrite="true" />

       <PropertyDefinition name="DisabledTextColour" initialValue="FF888888" redrawOnWrite="true" />
        <PropertyDefinition name="NormalTextColour" initialValue="FF000000" redrawOnWrite="true" />
        <PropertyDefinition name="TextBackground" initialValue="FFFFFFFF" redrawOnWrite="true" />

        <Child type="DefaultWindow" nameSuffix="__auto_contentpane__">
            <Area>
                <Dim type="LeftEdge">
                    <AbsoluteDim value="8" />
                </Dim>
                <Dim type="TopEdge">
                    <AbsoluteDim value="20" />
                </Dim>
                <Dim type="RightEdge">
                    <UnifiedDim scale="1" offset="0" type="RightEdge">
                        <DimOperator op="Subtract">
                            <AbsoluteDim value="8" />
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
                <Dim type="BottomEdge">
                    <UnifiedDim scale="1" offset="0" type="BottomEdge">
                        <DimOperator op="Subtract">
                            <AbsoluteDim value="8" />
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
            </Area>
        </Child>
        <ImagerySection name="label">
            <TextComponent>
                <Area>
                    <Dim type="LeftEdge">
                        <AbsoluteDim value="15" />
                    </Dim>
                    <Dim type="TopEdge">
                        <AbsoluteDim value="0" />
                    </Dim>
                    <Dim type="RightEdge">
                        <UnifiedDim scale="1" offset="0" type="RightEdge" />
                    </Dim>
                    <Dim type="BottomEdge">
                        <UnifiedDim scale="1" offset="0" type="BottomEdge" />
                    </Dim>
                </Area>
                <VertFormat type="TopAligned" />
                <HorzFormat type="LeftAligned" />
            </TextComponent>
        </ImagerySection>
        <ImagerySection name="frame">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge">
                        <AbsoluteDim value="0" />
                    </Dim>
                    <Dim type="TopEdge">
                        <AbsoluteDim value="11" />
                    </Dim>
                    <Dim type="RightEdge">
                        <UnifiedDim scale="1" offset="0" type="RightEdge" />
                    </Dim>
                    <Dim type="BottomEdge">
                        <UnifiedDim scale="1" offset="0" type="BottomEdge" />
                    </Dim>
                </Area>             
                <Image type="TopLeftCorner" imageset="WindowsLook" image="StaticFrameTopLeft" />
                <Image type="TopRightCorner" imageset="WindowsLook" image="StaticFrameTopRight" />
                <Image type="BottomLeftCorner" imageset="WindowsLook" image="StaticFrameBottomLeft" />
                <Image type="BottomRightCorner" imageset="WindowsLook" image="StaticFrameBottomRight" />
                <Image type="LeftEdge" imageset="WindowsLook" image="StaticFrameLeft" />
                <Image type="TopEdge" imageset="WindowsLook" image="StaticFrameTop" />
                <Image type="RightEdge" imageset="WindowsLook" image="StaticFrameRight" />
                <Image type="BottomEdge" imageset="WindowsLook" image="StaticFrameBottom" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </FrameComponent>
        </ImagerySection>
        <ImagerySection name="label_bg">
            <ImageryComponent>
                <Area>
                    <Dim type="LeftEdge" >
                        <AbsoluteDim value="13" />
                    </Dim>
                    <Dim type="TopEdge" >
                        <AbsoluteDim value="0" />
                    </Dim>
                    <Dim type="Width" >
                        <FontDim type="HorzExtent" padding="5" />
                    </Dim>
                    <Dim type="Height" >
                        <FontDim type="LineSpacing" />
                    </Dim>
                </Area>
                <Image imageset="WindowsLook" image="HeaderMainBrush" />
                <ColourRectProperty name="BackgroundTextColours" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
        </ImagerySection>
        <StateImagery name="Enabled">
            <Layer>
                <Section section="frame" />
                <Section section="label_bg" />
                <Section section="label">
                    <ColourProperty name="NormalTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="Disabled">
            <Layer>
                <Section section="frame" />
                    <Section section="label_bg" />
                    <Section section="label">
                    <ColourProperty name="DisabledTextColour" />
                </Section>
            </Layer>
        </StateImagery>
    </WidgetLook>


[CrazyEddie]

Great! I didn't know that we didn't have a WindowsLook skin for the GroupBox. This will probably get added to WindowsLook for the next release

CE.

[traibuidoi]

sorry all you guys for up the old topic again ! when i use the Comonweath-10 font , the groupbox seems OK :





But when i changed the font in TaharezLook.scheme file to the Times New Roman (size 10 ) font , it became :




how to resolve this problem ?

[traibuidoi]

ah yes , i has just found the resolution after 1 minutes

the resolution is : change the value

Code: Select all

<Dim type="TopEdge" > <AbsoluteDim value="0" />

to :

Code: Select all

<Dim type="TopEdge" ><AbsoluteDim value="5" />

in both ImagerySection name="label_bg" and <ImagerySection name="label"> in look 'n' feel file

when you use your font , you must change TopEdge value to the right value ( with me is 5 )


Hope this help some one