Default JLabel tooltip should be white for HTML text #420

fjoncourt · 2016-11-07T12:44:11Z

Hi,

With release 1.28

label.setToolTipText("<html><i>Set the source port to use for sending the SPA packet</i></html>")

looks like that:

With release 1.29 the text is hidden:

But using

<html><font color=orange><i>Send the SPA packet over a randomly assigned port</i></font></html>

it displays:

Could you set the default font color for embedded html to white so that we can see the text :)

Regards,

The text was updated successfully, but these errors were encountered:

mgarin · 2016-11-10T14:13:11Z

This issue indeed exists and it didn't appear in previous versions because of the specifics of HTMLDocument creation for Swing components that use HTML.

Pretty much what happens is when component detects HTML content within its own text it generates a special View used to paint the HTML content later. Class BasicHTML is used to generate and update that View on demand and component foreground is hardcoded to be the default color property for the <body> tag there.

Previously (in v1.28 and earlier) it worked just fine because WebLaF was still using foreground color to paint labels, buttons, tooltips and other similar components text content, but since v1.2.9 that is not the case anymore. Styling system relies on its own settings provided in the styles and would only take custom foregrounds when it is provided by developer explicitly. By default it uses its own colors and, obviously, it is different for some components than their default foreground value which is still used for the HTML rendering hardcoded in BasicHTML.

I am still not sure how I will fix this problem and I am trying some different approaches right now. Either way I will have to fix it as it also affects all other components in the same manner, it is just harder to notice because default foreground for labels, buttons and some other components match with the style color for their text (black).

- BasicHTML.java - Replacement for Swing `javax.swing.plaf.basic.BasicHTML` added to decrease amount of redundant component repaints and allow customizing basic HTML foreground color [ #420 ] - AbstractTextContent.java - Now contains basic HTML `View` retrieval and check based on newly added `BasicHTML` class - Removed redundant `javax.swing.plaf.basic.BasicHTML` utility class usage from all text content implementations - AbstractTextContent.java, AbstractStyledTextContent.java - Fixed text Y coordinate calculation algorithms, all centered texts should be positioned correctly - AbstractStyledTextContent.java - Fixed possibility of additional trimmed parts appearance in text containing different styles - AbstractTextContent.java - Moved paint color setup to the main painting method - AbstractTextContent.java - Added proper checks for horizontal and vertical alignments - AbstractContent.java - Restored proper content clipping ToolTip - WebToolTipUI.java - Removed redundant HTML content updates, removed basic UI usage, added proper basic settings initialization - WToolTipUI.java, WebToolTip.java - New appropriate intermediate UI for `WebToolTip` component - tooltip.xml - Enhanced dark skin tooltip colors to emphasize it amongst other UI elements StyledLabel - StyleRanges.java - Fixed NPE for the `null` text within any component using styled text content Skins - button.xml, togglebutton.xml, splitbutton.xml, checkbox.xml, radiobutton.xml, tristatecheckbox.xml - Removed redundant copy-pasted icon definition Utilities - SwingUtils.java - Updated `isUIResource` method to accept any objects as there are multiple `UIResource` types available

mgarin · 2016-11-11T17:20:28Z

Also, generally speaking, HTML should always be your last resort as its rendering is extremely slow in Swing. For example compared to plain text - HTML could be up to 100 times slower and that is not an exaggeration.

The solution I would propose (in case you are using latest styling branch WebLaF builds) - use styled versions of components or, in case it is tooltip and you cannot explicitly set its style ID, override default style to use styled content for the text instead of a plain one. Let me explain what that means in details.

First of all, WebLaF in its current iteration has each unique component broken down into small pieces - either parts of decoration or contents. You can clearly see that in the style XML for any component, for example button ( taken from this file ):

    <style type="button" padding="2,4,2,4">
        <painter>
            <decorations>
                <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" color="black" />
                    </ButtonLayout>
                </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" />
                    </ButtonLayout>
                </decoration>
            </decorations>
        </painter>
    </style>

You can see how component is broken down into small parts for each of its state. It has everything - shape, shadow, border, background, contents and layout - specified explicitly with their own settings. You can of course control all those settings if you want to, it was described in this wiki article in details.

In the button skin file you can also find the next separate style:

    <!-- Button supporting styled text -->
    <style type="button" id="styled">
        <painter>
            <decorations>
                <decoration>
                    <ButtonLayout>
                        <ButtonIcon constraints="icon" />
                        <StyledButtonText constraints="text" color="black" />
                    </ButtonLayout>
                </decoration>
                <decoration states="disabled">
                    <ButtonLayout>
                        <StyledButtonText color="120,120,120" ignoreStyleColors="true" />
                    </ButtonLayout>
                </decoration>
            </decorations>
        </painter>
    </style>

This is exactly the styled version of the component I was talking about. As you might see from the XML - the only different thing it uses is StyledButtonText instead of plain ButtonText. By using that specific text content implementation that style enables you to use WebStyledLabel component syntax in button!

So here is a small example:

public class StyledButton
{
    public static void main ( final String[] args )
    {
        WebLookAndFeel.install ();

        final String text = "{Sample:b} {styled:c(red)} button";

        final WebButton styled = new WebButton ( StyleId.buttonStyled, text );

        final WebButton plain = new WebButton ( text );

        TestFrame.show ( 15, false, 15, styled, plain );
    }
}

And the result:

So the style attached to the button actually changes its text rendering behavior.

The same trick can be applied to the tooltips and the only problem is that you cannot explicitly set tooltip style ID and you probably don't even want to. So what you need to do is override the default tooltip style which looks like this:

    <style type="tooltip">
        <painter>
            <decorations>
                <decoration>
                    <WebShape round="2" />
                    <LineBorder color="black" />
                    <ColorBackground color="black" />
                    <ToolTipText padding="2,4,2,4" color="245,245,245" />
                </decoration>
            </decorations>
        </painter>
    </style>

With the styled version of content:

    <style type="tooltip">
        <painter>
            <decorations>
                <decoration>
                    <StyledToolTipText padding="2,4,2,4" color="245,245,245" />
                </decoration>
            </decorations>
        </painter>
    </style>

Now all of the default tooltips will support style syntax of WebStyledLabel component and you can easily do most of the common things you would use HTML for:

This is the styled text for the second example:

final String text = "{Sample:b} {styled:c(red)} button" + "\n" + "With some {hard:u} line breaks" + "\n\n" + "That easily!";

And this is the same text using HTML:

final String text = "<html><b>Sample</b> <font color='red'>styled</font> button<br>With some <u>hard</u> line breaks<br><br>That easily!</html>";

To summ up - you will need to do next steps to enable styling syntax in tooltips:

Create custom skin for WebLaF, either fully hand-crafted or extending existing one
Override the default tooltip style and provide StyledToolTipText as shown above
Setup WebLaF and use your own skin as the main application skin

That might sound as a lot to do, but it is actually not. Plus you will be able to customize or create any additional styles for any components if you want to as you would already have a custom skin.

It is important to mention that all of the examples above are only applicable to WebLaF v1.2.9 styling branch builds and later releases, it would not work with any older versions.

You can find the latest styling builds here:
https://oss.sonatype.org/content/repositories/snapshots/com/weblookandfeel/

mgarin · 2016-11-11T17:24:19Z

Also, I have pushed a fix ( 462b375 ) for HTML within the tooltips, labels, buttons and other components - it should now properly use text color specified in the skin.

That took quite a bit of effort and I had to make my own copy of BasicHTML class to change some of its behaviors. I also made a major change to how HTML View is now generated and cached within the component, more specifically - within the IContent implementation of the text part.

I will be doing some more related changes soon, but everything should be working fine with the latest build which you can here: https://oss.sonatype.org/content/repositories/snapshots/com/weblookandfeel/

fjoncourt · 2016-11-11T18:58:48Z

To summ up - you will need to do next steps to enable styling syntax in tooltips:

Create custom skin for WebLaF, either fully hand-crafted or extending existing one

Override the default tooltip style and provide StyledToolTipText as shown above

Setup WebLaF and use your own skin as the main application skin

That might sound as a lot to do, but it is actually not. Plus you will be able to customize or create any
additional styles for any components if you want to as you would already have a custom skin.

Thanks for your explanation and your quick reply/fix. It sounds great and I will definitely give it a try.

Endogen · 2016-11-11T19:54:44Z

Regarding the link https://oss.sonatype.org/content/repositories/snapshots/com/weblookandfeel/ that you referred to.
I would like to start weblaf-demo-1.2.9-20161111.173007-75.jar but i get an error kein Hauptmanifestattribut, in weblaf-demo-1.2.9-20160914.190507-71.jar. Something about a non existing manifest attribute. How do i fix that?

mgarin · 2016-11-12T13:59:33Z

@fjoncourt If you will have any questions - feel free to ask in chat or just mail me directly.

@Endogen I haven't fixed the manifest file for the maven builds of modules, so those pretty much have some default manifests without any information about the main class.

If you want to run demo - you can download the fully packed version from the site: http://weblookandfeel.com/downloads/styling/ - specifically - weblaf-demo-1.29.jar - it is an artifact built from styling branch sources with the ANT script that could be found in the project.

Be aware that builds on the site might sometimes be slightly behind the maven ones as I have to update those manually and I do not update them on every single commit to the styling branch. Generally if you want the most recent demo build - you can download the sources from styling branch and build the demo using ANT script, it has everything configured so you can run it straight away.

You can find the short guide on how to build stuff in this article on wiki.

mgarin · 2016-11-12T14:04:33Z

@Endogen I have added a separate issue #421 to make sure I will include the correct manifest information before the release. As soon as its closed - you should be able to run maven demo and ui modules artifacts as well.

fjoncourt mentioned this issue Nov 7, 2016

Default JLabel tooltip should be white for HTML text fjoncourt/jfwknop#18

Open

mgarin added bug confirmed labels Nov 10, 2016

mgarin added this to the v1.2.9 milestone Nov 10, 2016

mgarin self-assigned this Nov 10, 2016

mgarin closed this as completed Nov 11, 2016

mgarin mentioned this issue Oct 14, 2019

HTML content rendering issues #561

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Default JLabel tooltip should be white for HTML text #420

Default JLabel tooltip should be white for HTML text #420

fjoncourt commented Nov 7, 2016

mgarin commented Nov 10, 2016

mgarin commented Nov 11, 2016

mgarin commented Nov 11, 2016 •

edited

Loading

fjoncourt commented Nov 11, 2016

Endogen commented Nov 11, 2016

mgarin commented Nov 12, 2016 •

edited

Loading

mgarin commented Nov 12, 2016

Default JLabel tooltip should be white for HTML text #420

Default JLabel tooltip should be white for HTML text #420

Comments

fjoncourt commented Nov 7, 2016

mgarin commented Nov 10, 2016

mgarin commented Nov 11, 2016

mgarin commented Nov 11, 2016 • edited Loading

fjoncourt commented Nov 11, 2016

Endogen commented Nov 11, 2016

mgarin commented Nov 12, 2016 • edited Loading

mgarin commented Nov 12, 2016

mgarin commented Nov 11, 2016 •

edited

Loading

mgarin commented Nov 12, 2016 •

edited

Loading