mgarin/weblaf

WebLaF - Java Look and Feel library for cross-platform Swing applications

Mikle

@mgarin

I recommend reading styling introduction article on the wiki:
https://github.com/mgarin/weblaf/wiki/Styling-introduction

Once you have the general idea about how to use styling - you can look at default light style for JProgressBar here : progressbar.xml
You can adjust any parts of it in your custom skin or skin extension.

Htet Aung Khant

@htetaungkhant

I can’t truely understand yet. How can I create custom skin xml for ProgressBar and how to set that custom xml to my progressbar. If you can, show me complete example.

Mikle

@mgarin

The wiki guide explains the general idea on how skins and styles can be created. You need to do two things:

Make a custom skin XML that includes existing default skin - it is shown in this section

Add a custom default style for JProgressBar that would adjust the background:

 <!-- Progress bar -->
 <style type="progressbar">
     <painter>

         <!-- Progress line -->
         <progressPainter>
             <decorations>
                 <decoration states="progress">
                     <GradientBackground>
                         <color>233,233,233</color>
                         <color>223,223,223</color>
                     </GradientBackground>
                 </decoration>
             </decorations>
         </progressPainter>

     </painter>
 </style>

The background part can be changed to any IBackground implementation usage there (you can check them in the library). In the example above I've left the default GradientBackground use.

Htet Aung Khant

@htetaungkhant

I created customProgressbar.xml like that.

<skin xmlns="http://weblookandfeel.com/XmlSkin">
    <!-- com.alee.laf.progressbar.WebProgressBar -->
    <id>progressbar.skin</id>
    <class>com.alee.laf.progressbar.WebProgressBar</class>
    <supportedSystems>all</supportedSystems>

    <include nearClass= "com.alee.laf.progressbar.WebProgressBar">
        <!-- Progress bar -->
        <style type="progressbar" id="customProgressbarSkin">
            <painter>    
                <!-- Progress line -->
                <progressPainter>
                    <decorations>
                        <decoration states="progress">
                            <GradientBackground>
                                <color>16,194,20</color>
                                <color>16,194,20</color>
                            </GradientBackground>
                        </decoration>
                    </decorations>
                </progressPainter>    
            </painter>
        </style>
    </include>

</skin>

And I created progressBarSkin.java like that.

package external_classes;

import com.alee.api.resource.ClassResource;
import com.alee.managers.style.XmlSkin;

public class ProgressBarSkin extends XmlSkin{
        public ProgressBarSkin() {
                super(new ClassResource(ProgressBarSkin.class, "customProgressbar.xml"));
        }
}

And I use like that

WebLookAndFeel.install(ProgressBarSkin.class);
WebProgressBar progressBar = new WebProgressBar(StyleId.of("customProgressbarSkin"));

And I got this error.

SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".
SLF4J: Defaulting to no-operation (NOP) logger implementation
SLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further details.

And nothing changes.

kovadam69

@kovadam69

You have to add your custom XML files when initializing the WebLaf. Like this

StyleManager.addExtensions(
                    new XmlSkinExtension(new ClassResource(Main.class, "/styling/customSkins.xml")),
                    new XmlSkinExtension(new ClassResource(Main.class, "/styling/customSkins-dark.xml")));

but I don't think you need that PrograssBarSkin class you created.

just add with StyleManager your custom skin xml, and you can use it with the StyleId.of("")

Mikle

@mgarin

@kovadam69
You're a bit wrong though, he is creating skin, not an extensions, so he needs XmlSkin not XmlSkinExtension.

@htetaungkhant
As for what the issue is - you have put the style inside the include tag - why? All include does is it imports all styles from another XML skin file. For your case - you want to include the default light skin so you don't have to define all styles for all components. The include you need is:

    <!-- Including WebLaF default skin, will use its style as a base -->
    <include nearClass="com.alee.skin.light.WebLightSkin">resources/web-light-skin.xml</include>

(copy-pasted straight from example)

And simply place your custom progressbar style nearby, you can look at some other skin/extension files available in the project if you aren't sure, like this one: demo-light-extension.xml

The error you see in the log is happening because you have no SLF4J implementation included in your project. It doesn't come with WebLaF by default because everyone have their own logging implementations in their projects and WebLaF uses SLF4J simply as an API for logging, it stil needs the actual implementation. You can read about SLF4J here: http://www.slf4j.org/

The most simple option - use SLF4J simple logger implementation, you can find it on Maven: https://search.maven.org/search?q=g:org.slf4j
Or you can use any other implementation available, for instance Log4j one if you're using it in your project for logging.

Once you have any implementation for SLF4J in your project - you will see the actual errors that occur in the styling with your example.

In WebLaF demo application I'm using SLF4J simple implementation:

<dependency>
    <groupId>org.slf4j</groupId>
    <artifactId>slf4j-simple</artifactId>
    <version>1.7.27</version>
</dependency>

Htet Aung Khant

@htetaungkhant

no error when adding that dependency.

Mikle

@mgarin

Well, if you adjusted your XML with the fixes* I mentioned - there shouldn't be one :)

Also, if you're providing a style identifier like this:

<style type="progressbar" id="customProgressbarSkin">

You're creating a custom style based on default style and you will have to apply it manually to each specific progress bar you want to use that style on.

And if you remove the identifier - you will be adjusting the default style and it will apply to all newly created progress bars.

Htet Aung Khant

@htetaungkhant

<skin xmlns="http://weblookandfeel.com/XmlSkin">
    <!-- com.alee.laf.progressbar.WebProgressBar -->
    <id>progressbar.skin</id>
    <class>com.alee.skin</class>
    <supportedSystems>all</supportedSystems>

     <include nearClass="com.alee.skin.light.WebLightSkin">resources/web-light-skin.xml</include>
        <!-- Progress bar -->
        <style type="progressbar">
            <painter>    
                <!-- Progress line -->
                <progressPainter>
                    <decorations>
                        <decoration states="progress">
                            <GradientBackground>
                                <color>16,194,20</color>
                                <color>16,194,20</color>
                            </GradientBackground>
                        </decoration>
                    </decorations>
                </progressPainter>    
            </painter>
        </style>

</skin>

like that?

Mikle

@mgarin

Yep

All that is explained in the wiki article though

I'll probably add another one with some step-by-step instructions for creating skin & skin extension later for customizing some component as an example

Htet Aung Khant

@htetaungkhant

Good. :-) :-P

My Progressbar still not changes UI when I create like this.

WebLookAndFeel.install ();
WebLookAndFeel.install(ProgressBarSkin.class);
JProgressBar jpb = new JProgressBar();

Mikle

@mgarin

Why are you calling install twice though?
Second one obviously does nothing because L&F is already installed.
Just remove the first install call and it should work correctly.

Htet Aung Khant

@htetaungkhant

Wow. Nice. Now, work. Thanks again, Mr. Mikle.

I installed two because I thought first is installing whole WebLaf and second is installing ProgressBarSkin.

Mikle

@mgarin

Nah, it does both. But if you don't specify a custom skin - it simply installs the default one as there always should be an active skin.

Htet Aung Khant

@htetaungkhant

Ok, I know. Today, my project completely finishes. :-)

So, no more give you trouble. :-P

Abu-Abdullah

@Abu-Abdullah

Hi @mgarin, any hint when the next update will be available in maven v1.2.13

Mikle

@mgarin

Hi, unfortunately I've been at home ill since the last Thursday so the update is getting delayed a bit. I'll publish it myself by the end of this week if i'll be back in shape, otherwise I'll aks my colleague to do so (there are still a few minor touches to add before the release).

Abu-Abdullah

@Abu-Abdullah

thank you. I wish you a quick recovery

Abu-Abdullah

@Abu-Abdullah

Hi @mgarin , JScrollPane is not working as expected when defining the policy e.g.
new JScrollPane(JEditorPane, JScrollPane.VERTICAL_SCROLLBAR_AS_NEEDED, JScrollPane.HORIZONTAL_SCROLLBAR_NEVER)
Im expecting this will wrape the text but it did not.

Mikle

@mgarin

Did you try this without WebLaF to see if the result is the same?
I can say for sure that it might not behave as you'd expect with text components and that might be the default behavior.

Abu-Abdullah

@Abu-Abdullah

yes, it is working as expected in older version of the app where it was pure swing base

Mikle

@mgarin

Can you provide a small code example where the issue can be reproduced?

Abu-Abdullah

@Abu-Abdullah

i will look more into forcing text wrape

ok i will try to put sample code

Abu-Abdullah

@Abu-Abdullah

ok, i did very quick test and it seems i was wrong. this issue is from swing and only for other languages than latin. following is a sample. normal English text will work correctly. Arabic is not. but it is not related to webLaF. it is a bug in the backend swing

import com.alee.laf.WebLookAndFeel;

import javax.swing.*;

public class Test extends JFrame
{
    Test()
    {
        JEditorPane p = new JEditorPane();
        p.setText(
                //"sdfsdfsdf sdfsdfsdf sssss s ss s s s s s s s s s ssssssssssssssssssssssss s s ss s sssssssssssssssssssss"
                "للهِ تَعالى- لِتَعْمِيمِ النَّفْع بتِلْكَ الجُهُود المُبارَكة فِي هَذا المَيدَان العَظِيم باشَر القِسْمُ العِلْمِيُّ بِمُؤسَّسةِ الشَّيخِ محُمَّد بنِ صالِحٍ العُثَيمِين الخَيريَّةِ واجِباتِه فِي شَرَفِ الإِعْدادِ والتَّجْهِيز للطِّباعةِ والنَّشْر لإِخْراجِ ذَلِكَ التُّراث العِلمِي؛ إنفاذًا للقَواعِدِ والضَّوابِط والتَّوْجِيهاتِ الَّتِي قَرَّرها فَضيلةُ الشَّيخِ رَحِمَهُ اللهُ تَعالى في هَذا الشَّأْنِ.\n" +
                        "نَسْأل اللهَ تعالى أنْ يَجْعلَ هَذا العَمَلَ خالصًا لِوجهِه الكَريمِ؛ نافِعًا لعِبادِه، وأنْ يَجزِيَ فَضِيلةَ شيخِنا عَنِ الإسلامِ والمسلمِينَ خَيرَ الجزَاء، ويُضَاعِفَ لهُ المثُوبَةَ والأَجْرَ، ويُعليَ دَرَجَتَهُ في المَهْدِيِّينَ، إِنَّه سَمِيعٌ قَرِيبٌ مجُيبٌ."
        );
        WebLookAndFeel.setLeftToRightOrientation(true);
        getContentPane().add(new JScrollPane(p, JScrollPane.VERTICAL_SCROLLBAR_AS_NEEDED, JScrollPane.HORIZONTAL_SCROLLBAR_NEVER));
        setSize(150, 100);
        setVisible(true);
    }

    public static void main(String[] args)
    {
        WebLookAndFeel.install();
        new Test();
    }
}

it was working in older version for some reason. i will check it thoroughly

Mikle

@mgarin

Well, there are a few things with the wrapping - if you try the English variant it will also not wrap once you increase the size of the window and then shrink it, but that's a specific of how text layouting works within text areas, it is really hard to workaround that properly.

But yes, Arabic text doesn't seem to be wrapped at all on newest WebLaF version or with Metal with any Java version.

I'd say if it ever was wrapped before with WebLaF - that was probably at the time when we changed scrollpane layout implementation and there were still some issues floating around it, so the behavior wasn't consistent with default Swing behavior.

Abu-Abdullah

@Abu-Abdullah

Hi @mgarin
Another question. i have this code

searchTree.addCheckStateChangeListener(new CheckStateChangeListener<DefaultMutableTreeNode>()
{
    @Override
    public void checkStateChanged(WebCheckBoxTree<DefaultMutableTreeNode> searchTree, List<CheckStateChange<DefaultMutableTreeNode>> checkStateChanges)
    {
        final java.util.List<DefaultMutableTreeNode> checkedNodes = searchTree.getNodes(CheckState.checked);
        ....

it throws the following exceptio:

java.lang.NullPointerException
    at com.alee.extended.tree.NodesPositionComparator.compare(NodesPositionComparator.java:90)
    at com.alee.extended.tree.NodesPositionComparator.compare(NodesPositionComparator.java:36)
    at java.base/java.util.TimSort.countRunAndMakeAscending(TimSort.java:356)
    at java.base/java.util.TimSort.sort(TimSort.java:220)
    at java.base/java.util.Arrays.sort(Arrays.java:1306)
    at java.base/java.util.ArrayList.sort(ArrayList.java:1720)
    at java.base/java.util.Collections.sort(Collections.java:179)
    at com.alee.extended.tree.DefaultTreeCheckingModel.getNodes(DefaultTreeCheckingModel.java:137)
    at com.alee.extended.tree.WebCheckBoxTree.getNodes(WebCheckBoxTree.java:454)
    at com.alee.extended.tree.WebCheckBoxTree.getNodes(WebCheckBoxTree.java:441)
    at com.myapp.Indexer$2.checkStateChanged(Indexer.java:489)
    at com.alee.extended.tree.DefaultTreeCheckingModel.fireCheckStateChanged(DefaultTreeCheckingModel.java:683)
    at com.alee.extended.tree.DefaultTreeCheckingModel.setChecked(DefaultTreeCheckingModel.java:167)
    at com.alee.extended.tree.WebCheckBoxTree.setChecked(WebCheckBoxTree.java:467)
    at com.myapp.Indexer$22.actionPerformed(Indexer.java:3448)
    at java.desktop/javax.swing.AbstractButton.fireActionPerformed(AbstractButton.java:1967)
    at java.desktop/javax.swing.AbstractButton$Handler.actionPerformed(AbstractButton.java:2308)
    at java.desktop/javax.swing.DefaultButtonModel.fireActionPerformed(DefaultButtonModel.java:405)
    at java.desktop/javax.swing.DefaultButtonModel.setPressed(DefaultButtonModel.java:262)
    at java.desktop/javax.swing.AbstractButton.doClick(AbstractButton.java:369)
    at java.desktop/javax.swing.AbstractButton.doClick(AbstractButton.java:349)
    at com.myapp.Indexer$8$1.run(Indexer.java:1799)

any hint is appreciated. i cannot build a sample case. it is a bit complicated. but the point is that getNodes(CheckState.checked) throws internal NullPointerException

Mikle

@mgarin

Do you have null nodes in your tree?
Because that's the only reason why that part could throw a NPE

Abu-Abdullah

@Abu-Abdullah

thank you, the exception happens when deleting the nodes. for some reason it is solved by replacing:

WebCheckBoxTree<DefaultMutableTreeNode> searchTree = new WebCheckBoxTree<>(searchRoot);

with

WebCheckBoxTree<DefaultMutableTreeNode> searchTree = new WebCheckBoxTree<>(new DefaultTreeModel(searchRoot));

really no clue what is happening (and i do not recall if the old code was working with swing laf or not) . so please just ignore this case and thank you

Where communities thrive

People

Repo info

Activity