mgarin / weblaf

WebLaF is a fully open-source Look & Feel and component library written in pure Java for cross-platform desktop Swing applications.
http://weblookandfeel.com
GNU General Public License v3.0
1.13k stars 234 forks source link

how to set webbutton background when the MouseEnter by xml . #682

Closed wyj3531 closed 2 years ago

wyj3531 commented 2 years ago
  <style type="button" id="command-ok">
        <component>
            <foreground>white</foreground>
        </component>
        <painter>
            <decorations>
                <decoration>
                    <WebShape round="4"/>
                    <WebShadow type="outer" width="2"/>
                    <LineBorder color="87, 100, 255"/>
                    <GradientBackground>
                        <color>87, 100, 255</color>
                    </GradientBackground>
                    <ButtonLayout>
                        <ButtonIcon constraints="icon"/>
                        <ButtonText constraints="text"/>
                    </ButtonLayout>
                </decoration>
                <decoration states="focused">
                    <LineBorder color="87, 100, 255"/>
                </decoration>
                <decoration states="pressed">
                    <WebShadow type="outer" opacity="1"/>
                    <WebShadow type="inner" width="0"/>
                    <ColorBackground color="87, 100, 255"/>
                </decoration>
                <decoration states="disabled">
                    <WebShadow type="outer" opacity="0"/>
                    <LineBorder color="lightGray"/>
                    <ButtonLayout>
                        <ButtonText color="120,120,120" ignoreCustomColor="true"/>
                    </ButtonLayout>
                </decoration>
            </decorations>
        </painter>
    </style>
wyj3531 commented 2 years ago

mouse hover

mgarin commented 2 years ago

You can use hover state for that:

<decoration states="hover">
    <ColorBackground color="black"/>
</decoration>

You can also use any other background implementation there, for example GradientBackground or ImageTextureBackground.

You can also find the comprehensive list of states in DecorationState interface: https://github.com/mgarin/weblaf/blob/master/modules/ui/src/com/alee/painter/decoration/DecorationState.java It also contains some additional comments and references to painters in which those states are available.

Here is the hover state mention: https://github.com/mgarin/weblaf/blob/master/modules/ui/src/com/alee/painter/decoration/DecorationState.java#L99

wyj3531 commented 2 years ago

i add hover bg. when mouse hover button ,then press button the press color not effect

mgarin commented 2 years ago

Order of <decoration> blocks defines how they override each other, so you should have hover state one before the pressed one. Since default button style doesn't have a hover state - you can't really insert it before the pressed state if you are overriding the default button style.

So in this case I recommend to make a fully custom style for your button (you can copy-paste it from default style) and simply add hover state inbetween. Also make sure to add overwrite="true" marker for decorations block to make sure you aren't using any pre-existing decorations from the default style.

Here is an example:

    <style type="button" id="custom" padding="2,4,2,4">
        <component>
            <foreground>black</foreground>
        </component>
        <painter>
            <decorations overwrite="true">
                <decoration>
                    <WebShape round="3" />
                    <WebShadow type="outer" width="2" />
                    <LineBorder color="170,170,170" />
                    <GradientBackground>
                        <color>white</color>
                        <color>223,223,223</color>
                    </GradientBackground>
                    <ButtonLayout>
                        <ButtonIcon constraints="icon" />
                        <ButtonText constraints="text" />
                    </ButtonLayout>
                </decoration>
                <decoration states="hover">
                    <ColorBackground color="black"/>
                </decoration>
                <decoration states="focused">
                    <LineBorder color="85,130,190" />
                </decoration>
                <decoration states="pressed">
                    <WebShadow type="outer" opacity="0" />
                    <WebShadow type="inner" width="6" />
                    <ColorBackground color="210,210,210" />
                </decoration>
                <decoration states="disabled">
                    <WebShadow type="outer" opacity="0" />
                    <LineBorder color="lightGray" />
                    <ButtonLayout>
                        <ButtonText color="120,120,120" ignoreCustomColor="true" />
                    </ButtonLayout>
                </decoration>
            </decorations>
        </painter>
    </style>
wyj3531 commented 2 years ago

i want to add hover color and select color in table by xml.how to add it

wyj3531 commented 2 years ago
235, 235, 237 235, 235, 237
mgarin commented 2 years ago

Do you mean hover and select for cells? If so -

Hover isn't tracked for separate cells right now, so that will have to be implemented from the ground up in the component itself & it's painter. Can't really give any advice on this right now since this requires some investigation on how to properly implement it. I've made a separate issue for the improvement for future updates: #690

As for cell selection - you can change it by modifying the <selectionPainter> in the table style: https://github.com/mgarin/weblaf/blob/master/modules/ui/src/com/alee/skin/light/resources/table.xml#L37 That painter will only be applied to cell bounds and only when cell is selected.

wyj3531 commented 2 years ago

i just mean how to add the hover color fo the whole row

mgarin commented 2 years ago

It's the same as for cells - currently you cannot, because hover isn't tracked for separate rows/columns/cells. I've made a separate issue for the improvement for future updates: #690 Once that enhancement is implemented it will be possible via style.