jfxtras / jfxtras-styles Goto Github PK
View Code? Open in Web Editor NEWJava, JavaFX themes or look and feels. Currently contains JMetro theme.
Home Page: https://pixelduke.com/java-javafx-theme-jmetro/
Java, JavaFX themes or look and feels. Currently contains JMetro theme.
Home Page: https://pixelduke.com/java-javafx-theme-jmetro/
I'm using this theme to make my B4J apps look prettier and so far it's awesome. However, I have noticed that the TabPane still has the Modena style.
What are the chances that you'll at least make the Tabs look Metro-ish?
TreeTableView appears unaffected by JMetro theme.
Hi, it's more kind a doubt than a issue, i'm sorry if i'm posting this in the wrong place, but i need a little help. I have a project in JavaFX wich i'm using your fantastic lib, but i only import the JAR to the program. And there's a lot of things that are being missed, cause now i realized that i have to use a stylesheet. The problem is, i'm starting coding and i don't know what i have to download to make the styleesheet work, so if you can tell me i'll be so so glad. Thanks and sorry for my bad english.
When run new JMetro(JMetro.Style.DARK).applyTheme(parent);
java.lang.NoClassDefFoundError: com/sun/javafx/scene/control/skin/TextFieldSkin
java.lang.NoClassDefFoundError: com/sun/javafx/scene/control/skin/ButtonSkin
Hi again @dukke bro! I changed button colors for dark and light themes to semi-fully fluent specifications.
Please, review changes and it issue, and if you like it changes - commit it.
JMetroBase.css code:
Replace old .button:default:pressed
block to next code:
.button:default:pressed {
-fx-background-color: border_pressed_default_color;
-fx-border-color: background_pressed_default_color;
}
Replace old .toggle-button:selected:pressed
block to next code:
.toggle-button:selected:pressed {
-fx-background-color: border_pressed_default_color;
-fx-border-color: background_pressed_default_color;
}
JMetroLightTheme.css code:
Replace old .button, .toggle-button
block to next code:
.button, .toggle-button {
background_color: #ccc;
background_pressed_color: #999;
background_pressed_default_color: #999;
border_pressed_default_color: #999;
border_hover_default_color: #004881;
border_hover_selected_color: #004881;
border_hover_color: #7a7a7a;
text_color: #111;
default_button_text_color: white;
focus_ring_border_color: white;
}
JMetroDarkTheme.css code:
Replace old .button, .toggle-button
block to next code:
.button, .toggle-button {
background_color: #333;
background_pressed_color: #666;
background_pressed_default_color: #666;
border_pressed_default_color: #666;
border_hover_default_color: #66AEE7;
border_hover_selected_color: #66AEE7;
border_hover_color: #858585;
text_color: white;
default_button_text_color: white;
focus_ring_border_color: white;
}
I used maven to download the jar from bintray and found that both versions 4.2 and 4.4 are invalid jar files. When I run jar tf
on it there is an error. Also trying to unzip the jar using a generic zip program I get an error about the jar not being a valid zip file. If I use version 4.0 everything works fine.
Text kerning on Button changes when Button shrinks (after it's pressed). I think this might be because JavaFX tries to preserve the same font size on a smaller space.
Maybe changing the font size when the Button shrinks could be a solution.
http://jfxtras.org/ states that
JFXtras and JFXtras Labs are licensed under the New BSD License
but this repository is missing any license information and it is unclear if it's part of "JFXtras and JFXtras Labs". Could you please add a license to this repo or at least confirm that any content here is licensed under the New BSD License?
It would be great if the project would publish artifacts to Maven Central. I'm a big fan of Bintray however JCenter is not accessible at my current location (filtered by IT staff) and only Maven Central is allowed.
I can help setup the required bits in terms of Gradle configuration however the last step (Sonatype username & password) must behandled by @dukke.
I want to use JMetro theme in my javafx application. Problem is it renders the texts with bigger font size, especially the TableView cell text. How to reduce the font size?
My java version is 8 u181.
Since JMetro is as of now a regular author stylesheet, unlike Modena, it will overwrite any styling set in code, including FXML (which is code).
If JMetro starts being an user agent stylesheet it will behave just like Modena.
This might be a considerable work, we need to add every Modena defined style that's not currently being defined in JMetro to the JMetro CSS stylesheet.
Users of JMetro are advised, for the time being, to do all the styling in CSS. Add they're own stylesheets that overwrite JMetro CSS after applying JMetro.
If anyone wants to step in and do this they're much welcome. I won't be doing this in the foreseeable future as there are several things currently on my plate.
When using a javafx.scene.control.TextArea in my application, I received the following warnings:
Nov 07, 2018 3:52:39 PM javafx.scene.CssStyleHelper calculateValue
WARNING: Could not resolve 'border' while resolving lookups for '-fx-background-color' from rule '.text-input' in stylesheet jar:file:/C:/Users/adam/.m2/repository/org/jfxtras/jmetro/4.6/jmetro-4.6.jar!/jfxtras/styles/jmetro8/JMetroLightTheme.css
Nov 07, 2018 3:52:39 PM javafx.scene.CssStyleHelper calculateValue
WARNING: Could not resolve 'highlight' while resolving lookups for '-fx-highlight-fill' from rule '.text-input' in stylesheet jar:file:/C:/Users/adam/.m2/repository/org/jfxtras/jmetro/4.6/jmetro-4.6.jar!/jfxtras/styles/jmetro8/JMetroLightTheme.css
Nov 07, 2018 3:52:39 PM javafx.scene.CssStyleHelper calculateValue
WARNING: Could not resolve 'highlight_text' while resolving lookups for '-fx-highlight-text-fill' from rule '.text-input' in stylesheet jar:file:/C:/Users/adam/.m2/repository/org/jfxtras/jmetro/4.6/jmetro-4.6.jar!/jfxtras/styles/jmetro8/JMetroLightTheme.css
Nov 07, 2018 3:52:39 PM javafx.scene.CssStyleHelper calculateValue
WARNING: Could not resolve 'prompt_text' while resolving lookups for '-fx-prompt-text-fill' from rule '.text-input' in stylesheet jar:file:/C:/Users/adam/.m2/repository/org/jfxtras/jmetro/4.6/jmetro-4.6.jar!/jfxtras/styles/jmetro8/JMetroLightTheme.css
I am using JDK 1.8_172 if that is helpful.
When attempting to build the following types of errors are generated:
Task :jmetro:compileJava
/Users/wbeebe/Git/jfxtras-styles/jmetro/src/main/java/impl/jfxtras/styles/jmetro8/TextFieldWithButtonSkin.java:31: error: cannot find symbol
import com.sun.javafx.scene.control.skin.TextFieldSkin;
Investigation shows that according to JEP 253 that:
The intention is to move many JavaFX control skins into the appropriate public package, most probably javafx.scene.control.skin. There is no intent to also move the related behavior classes.
(see http://openjdk.java.net/jeps/253)
It is my intention to
I make no guarantees this will be straightforward, or that I will succeed. But someone needs to try.
Add constants for common accent colors so programmers can easily choose a nice accent color, like this:
.root {
accent_color: JMETRO_NAVY_BLUE;
}
(This would be defined in a new style sheet added after applying JMetro)
Windows has a list of pre defined accent colors that one can choose from. If you right click the desktop background - select Personalize - select Colors.
Dark theme for tooltip not correctly. I think, dark colors for you tooltip not correct.
Also not correctly border width, i changed from 2px to 1px, but you can commit with 2px, as you liked.
I improve dark theme for tooltip, please review it, it looks better and looks like tooltip in fluent.
JMetroBase.css: (Summary screen)
Removed lines:
-fx-background-color: #f2f2f2;
-fx-text-fill: #111;
Changed lines:
old: -fx-border-width: 2px; new: -fx-border-width: 1px;
JMetroLightTheme.css (Added .tooltip block (after .tab-pane))
JMetroDarkTheme.css: (Added .tooltip block (after .tab-pane)
Result: (Left - Edited css, Right - Original fluent design)
Hi again @dukke! I try to compile your lib, ok, lib is compiled, but i can't start samples, how i can run it?
Sorry, i never work with gradle, and maybe i stupid in it.
Add Accordion styles based on TitledPane style
@dukke Consider the changes, if everything suits you - I make PR, I think it turned out beautifully :), and if you make background #333333
, then in general chocolate :D
p.s all colors by windows explorer scrollbar. (you can self see it on latest windows 10 build)
Create sample app for looking how all controls fit together:
Sometimes you need to click more than once for a row to get selected on a TreeTableView.
I'm not sure whether this is a JMetro bug or a JavaFX bug. And if it is the latter whether we can do a workaround to fix it.
hi
i use RatingControl, but my problem is when hover on button, the button that is hover and its previous buttons should also change its color.
i mean if the mouse is hover on third star so should hover the first and second star without change the rating value. can i do that using rating control?.
thanks
Hi, i am using your theme in my javafx test playground, and when i apply tablefilter from controlsfx on table, and try to right click on column name, i do get sorting options but i also get crash in application. i can copy paste error that i get , but its null pointer exception related to textfieldSkin. When i disable your theme and just try vanila javafx everything is ok.
I love the what you've built. But is there a plan on rewriting JMetro for the new Fluent Design Guidelines?
I only wanna to use your great "ToggleSwitch"-class (and necessary files to use this switch control) in a small JavaFX project with some settings.
Therefore I looked up your licence definition. Your refer to an article which is generally about BSD licences. On this page I cannot recognice if you mean with "new" the 4-clause , the 3-clause or the 2-clause BSD licence?
Please help me in this lincene problem. I would appreciate using your software.
It appears somehow he has made his way, contributing a txt file in 2013, which makes no sense, with just a small text message saying the project was his.
Possibly an exploit of a bug in Github back in 2013.
I created styles for titled-pane light and dark. Please, review my adds on titled-pane, maybe you like it :)
Also please, check css code style, i newbie in kotlin and css, i can be produce mistakes, but i try not-make mistakes :D
Changes in JMetroBase.css: (Summary screen)
Code of changes in JMetroBase.css:
/*******************************************************************************
* *
* TitledPane (Expanded and unexpanded) *
* *
******************************************************************************/
/* titled pane expanded & unexpanded disabled */
.titled-pane:disabled {
-fx-opacity: 0.7;
}
/* titled pane expanded & unexpanded */
.titled-pane:expanded, .titled-pane .title {
-fx-border-width: 1;
-fx-border-color: accent_color;
}
/* titled pane expanded & unexpanded header */
.titled-pane:expanded .title, .titled-pane .title {
-fx-background-color: accent_color;
-fx-border-color: accent_color;
}
/* titled pane expanded & unexpanded header text */
.titled-pane:expanded .title .text, .titled-pane .title .text {
-fx-font-family: "Segoe UI";
-fx-font-size: 1.166667em; /* 14 */
}
/* titled pane expanded & unexpanded header arrow */
.titled-pane:expanded .title .arrow-button .arrow,
.titled-pane .title .arrow-button .arrow {
-fx-shape: "M 4.21875 10.78125 L 2.78125 12.21875 L 15.28125 24.71875 L 16 25.40625 L 16.71875 24.71875 L 29.21875 12.21875 L 27.78125 10.78125 L 16 22.5625 Z";
}
Changes in JMetroDarkTheme.css: (Summary screen)
Code of changes in JMetroDarkTheme.css:
/*******************************************************************************
* *
* TitledPane (Expanded and unexpanded) *
* *
******************************************************************************/
/* titled pane expanded & unexpanded header text */
.titled-pane:expanded .title .text, .titled-pane .title .text {
-fx-fill: #fff;
}
/* titled pane expanded & unexpanded header arrow */
.titled-pane:expanded .title .arrow-button .arrow, .titled-pane .title .arrow-button .arrow {
-fx-background-color: #fff;
}
/* titled pane expanded & unexpanded content */
.titled-pane:expanded .content {
-fx-background-color: #2B2B2B;
-fx-border-color: #2B2B2B;
}
Changes in JMetroLightTheme.css: (Summary screen)
Code of changes in JMetroLightTheme.css:
/*******************************************************************************
* *
* TitledPane (Expanded and unexpanded) *
* *
******************************************************************************/
/* titled pane expanded & unexpanded header text */
.titled-pane:expanded .title .text, .titled-pane .title .text {
-fx-fill: #fff;
}
/* titled pane expanded & unexpanded header arrow */
.titled-pane:expanded .title .arrow-button .arrow, .titled-pane .title .arrow-button .arrow {
-fx-background-color: #fff;
}
/* titled pane expanded & unexpanded content */
.titled-pane:expanded .content {
-fx-background-color: #fff;
-fx-border-color: #fff;
}
Improve the way the focus ring dotted line looks where lines meet.
I noticed the following mismatch:
Size: Different controls seem to have different default sizes (see different height of Button vs ChoiceBox).
Font: Different controls seem to have different default fonts (see the size and color of Label vs Checkbox vs ChoiceBox).
Background Color: Some panes have back color in DARK mode, but not all (see the black TitlePane vs. white HBox).
Maybe some of these mismatch are intentional. If so, an explanation would be useful.
If I try to use JMetro in a modular project I get the following error:
Exception in Application start method
Exception in thread "JavaFX Application Thread" java.lang.NoClassDefFoundError: com/sun/javafx/scene/control/skin/ButtonSkin
Seems like JMetro (or jfxtras) are using an old path for the ButtonSkin. It shouldnt be com/sun/javafx/scene/control/skin/ButtonSkin. It must be javafx/scene/control/skin/ButtonSkin in a modular project
Hello! I re-write it text 3 times! Because google crash it page! It so not cool!
Please, review it issue and commit changes, i change dark and light colors of slider to FD style and fixed slider line focus.
Bug (Not-Excepted behavior of slider line):
Excepted behavior of slider line:
Code for JMetroBase.css file: view
Code for JMetroLightTheme.css file: view
Code for JMetroDarkTheme.css file: view
Dark and light theme for disabled menu-item not correctly. It must be fully disabled without changing background \ hover color and just it UX rules :)
Maybe i improve it, and i set it not-hovering and without changing background if menu-item disabled.
JMetroBase.css: (Added to end of file)
/* disabled */
.menu-item:disabled:hover,
.menu-item:disabled:focused,
.menu-item:disabled:pressed {
-fx-background-color: background_color;
}
Result: (I hover on disabled menu-item, but it hard to see :D)
Dark theme not correctly. I think, dark colors for you textbox not correct.
I improve dark theme for textbox, please review it, it looks better and looks like textbox in fluent.
JMetroBase.css: (left green line - changed line)
JMetroDarkTheme.css: (left cyan line - changed line)
Result: (Left - Edited css, Right - Original fluent design)
For instance TableView dark style background is darker than TreeTableView. Selected row color is also not identical.
- Just. When i add your library to my project, my application is crash.
- Add your library file to project folder "lib".
- Project Structure > Libraries > Add to classes your library.
- Project Structure > Artifacts > Add copy of "Extracted Library" your library.
- It not only with TextField skin, it with anyway controls. See full StackTrace.
- JMetro version: [5.0.0]
- System: [Windows 10 1803 x64]
- Java Runtime Environment: [1.8.0_171] and [10.0.2]
- JavaFx GUI framework: [TornadoFx]
Exception in thread "JavaFX Application Thread" java.lang.NullPointerException
at com.sun.javafx.scene.control.skin.BehaviorSkinBase$2.handle(BehaviorSkinBase.java:107)
at com.sun.javafx.scene.control.skin.BehaviorSkinBase$2.handle(BehaviorSkinBase.java:105)
at com.sun.javafx.event.CompositeEventHandler$NormalEventHandlerRecord.handleBubblingEvent(CompositeEventHandler.java:218)
at com.sun.javafx.event.CompositeEventHandler.dispatchBubblingEvent(CompositeEventHandler.java:80)
at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:238)
at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:191)
at com.sun.javafx.event.CompositeEventDispatcher.dispatchBubblingEvent(CompositeEventDispatcher.java:59)
at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:58)
at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)
at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)
at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
at com.sun.javafx.event.EventUtil.fireEventImpl(EventUtil.java:74)
at com.sun.javafx.event.EventUtil.fireEvent(EventUtil.java:54)
at javafx.event.Event.fireEvent(Event.java:198)
at javafx.scene.Scene.processMenuEvent(Scene.java:1802)
at javafx.scene.Scene.access$4500(Scene.java:159)
at javafx.scene.Scene$ScenePeerListener.menuEvent(Scene.java:2516)
at com.sun.javafx.tk.quantum.GlassViewEventHandler.lambda$null$354(GlassViewEventHandler.java:466)
at java.security.AccessController.doPrivileged(Native Method)
at com.sun.javafx.tk.quantum.GlassViewEventHandler.lambda$handleMenuEvent$355(GlassViewEventHandler.java:449)
at com.sun.javafx.tk.quantum.QuantumToolkit.runWithoutRenderLock(QuantumToolkit.java:389)
at com.sun.javafx.tk.quantum.GlassViewEventHandler.handleMenuEvent(GlassViewEventHandler.java:448)
at com.sun.glass.ui.View.handleMenuEvent(View.java:563)
at com.sun.glass.ui.View.notifyMenu(View.java:889)
at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
at com.sun.glass.ui.win.WinApplication.lambda$null$147(WinApplication.java:177)
at java.lang.Thread.run(Thread.java:748)
I already done style for menu-button, please see screenshots, it as button.
If you need menu-button style i can do PR. ๐ @dukke
When just press on empty cell pressed color changed - it not true behavior
When just click on empty cell before selecting any filled cell - give npe
exception
java.lang.NullPointerException
at bin.AddContentToTreeView$Companion$addContent$1.handle(AddContentToTreeView.kt:28)
at bin.AddContentToTreeView$Companion$addContent$1.handle(AddContentToTreeView.kt:9)
at com.sun.javafx.event.CompositeEventHandler.dispatchBubblingEvent(CompositeEventHandler.java:86)
at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:238)
at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:191)
at com.sun.javafx.event.CompositeEventDispatcher.dispatchBubblingEvent(CompositeEventDispatcher.java:59)
at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:58)
at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)
at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)
at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
at com.sun.javafx.event.EventUtil.fireEventImpl(EventUtil.java:74)
at com.sun.javafx.event.EventUtil.fireEvent(EventUtil.java:54)
at javafx.event.Event.fireEvent(Event.java:198)
at javafx.scene.Scene$ClickGenerator.postProcess(Scene.java:3470)
at javafx.scene.Scene$ClickGenerator.access$8100(Scene.java:3398)
at javafx.scene.Scene$MouseHandler.process(Scene.java:3766)
at javafx.scene.Scene$MouseHandler.access$1500(Scene.java:3485)
at javafx.scene.Scene.impl_processMouseEvent(Scene.java:1762)
at javafx.scene.Scene$ScenePeerListener.mouseEvent(Scene.java:2494)
at com.sun.javafx.tk.quantum.GlassViewEventHandler$MouseEventNotification.run(GlassViewEventHandler.java:394)
at com.sun.javafx.tk.quantum.GlassViewEventHandler$MouseEventNotification.run(GlassViewEventHandler.java:295)
at java.security.AccessController.doPrivileged(Native Method)
at com.sun.javafx.tk.quantum.GlassViewEventHandler.lambda$handleMouseEvent$353(GlassViewEventHandler.java:432)
at com.sun.javafx.tk.quantum.QuantumToolkit.runWithoutRenderLock(QuantumToolkit.java:389)
at com.sun.javafx.tk.quantum.GlassViewEventHandler.handleMouseEvent(GlassViewEventHandler.java:431)
at com.sun.glass.ui.View.handleMouseEvent(View.java:555)
at com.sun.glass.ui.View.notifyMouse(View.java:937)
at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
at com.sun.glass.ui.win.WinApplication.lambda$null$147(WinApplication.java:177)
at java.lang.Thread.run(Unknown Source)
Not sure, but probably we should add a click animation to the MenuButton. The same animation that Button has (shrinks when pressed).
- Incorrect color change behavior when hovering over RadioButton when it was turned off after being turned on.
- Add radio-button to your scene.
- Set Focus Traversable to true.
- Click on or check radio-button.
- Uncheck your radio-button.
- Now. Hover on radio-button and see issue.
- JMetro version: [5.0.0]
- System: [Windows 10 1803 x64]
- Java Runtime Environment: [1.8.0_171]
Move TableView core CSS declaration to JMetroBase.css
Dark theme:
After adding background style property:
I think it needed to do automatically, right? Because, new people who want to use your lib and themes, want what all controls be themed, right? Then need it do automatically, it no hard, just add background prop to it elements. just then theme applied to all controls needed, i think you understand me :)
additional ui elements needed to automatically background color: [ "Pane", "Anchor Pane", "Scroll Pane", "Scroll Pane Empty", "ToolBar"]
It needed for any users of JMetro library, currently i do it.
Love the work being done with JMetro. It's a bummer it does not seem to work with TableView. It would be nice if that could be supported and look like the native XAML W8 table control like as shown below
https://blogs.telerik.com/images/default-source/jesseliberty/image_thumb10022D9F8D8B6.png
- Incorrect color change text of text-box in date-picker when happens lost focus.
- Add date-picker to your scene.
- Put data in date-picker text-box or just select date.
- Cause lost focus of it object, or focus on other ui element.
- Again focus on out added date-picked ui element.
- Now see issue, and read great it text :D.
- JMetro version: [Source Based]
- System: [Windows 10 1809 x64]
- Java Runtime Environment: [1.8.0_171]
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.