Cannot load font-face javafx - css

i have a little problem, i'm using Javafx and just put icon in a Text .
So i found this post which could help me :
Colored Icon Font in JavaFX
The solution given by Derek is working but when i try to put my style in a css , it is not working:
#font-face {
src: url(typeface/fontawesome-webfont.ttf);
}
#font-face {
font-family: 'Indie Flower';
src: url(http://fonts.googleapis.com/css?family=Indie+Flower);
}
#font-face {
src: url(typeface/govicons-webfont.ttf);
}
#font-face {
src: url(typeface/fontawesome-webfont.ttf);
}
#font-face {
font-family: "MaterialIcons";
src: url(typeface/MaterialIcons-Regular.ttf);
}
#i {
-fx-font-family: 'Indie Flower';
-fx-font-size: 80;
-fx-fill: forestgreen;
}
#love {
-fx-font-family: "MaterialIcons";
-fx-font-size: 60;
-fx-fill: firebrick;
}
#u {
-fx-font-family: "Indie Flower";
-fx-font-size: 80;
-fx-fill: forestgreen;
}
And then this is my java class where i call everything :
public class Test extends Application {
#Override
public void start(Stage stage) {
System.setProperty("http.proxyHost", "myProxy");
System.setProperty("https.proxyHost", "myProxy");
System.setProperty("http.proxyPort", "myPort");
System.setProperty("https.proxyPort", "myPort");
Text i = new Text("I");
Text love = new Text("\uE87D");
Text u = new Text("you");
u.setId("u");
i.setId("i");
love.setId("love");
i.getStyleClass().add("i");
love.getStyleClass().add("love");
u.getStyleClass().add("u");
TextFlow textFlow = new TextFlow(i, love, u);
textFlow.setStyle("-fx-padding: 20px; -fx-background-color: azure;");
Scene scene = new Scene(textFlow);
final File externalCSSFile = new File("resources/Style.css");
// Get style from external CSS
scene.getStylesheets().add("file:///" +
externalCSSFile.getAbsolutePath().replace("\\", "/"));
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
of courses the files called exist with the correct path .
So if you have any idea with it is not working , pls help me :)

Related

JavaFX Custom Font

How to set a custom font to JavaFX (Java 17, OpenJFX)? I tried copying files to the resources/fonts folder and importing them via #font-face in CSS. It didn't work. Also tried #import - no use.
After searching the internet for hours, finally resolved how to set the custom font in JavaFX and use it comfortably within the CSS.
The CSS File looks like this:
#font-face
{
-fx-font-family: "Quicksand Light";
src: url("../fonts/Quicksand-Light.ttf");
}
#font-face
{
-fx-font-family: "Quicksand Regular";
src: url("../fonts/Quicksand-Regular.ttf");
}
#font-face
{
-fx-font-family: "Quicksand Medium";
src: url("../fonts/Quicksand-Medium.ttf");
}
#font-face
{
-fx-font-family: "Quicksand Semi-bold";
src: url("../fonts/Quicksand-SemiBold.ttf");
}
#font-face
{
-fx-font-family: "Quicksand Bold";
src: url("../fonts/Quicksand-Bold.ttf");
}
.light
{
-fx-font-family: "Quicksand Light";
}
.regular
{
-fx-font-family: "Quicksand Regular";
}
.medium
{
-fx-font-family: "Quicksand Medium";
}
.semi
{
-fx-font-family: "Quicksand Semi-bold";
}
.bold
{
-fx-font-family: "Quicksand Bold";
}
Now, in your java class you can set the styles accordingly as below:
Label lblThin = new Label("Light");
lblThin.getStyleClass().add("light");
Label lblRegular = new Label("Regular");
lblRegular.getStyleClass().add("regular");
Label lblMedium = new Label("Medium");
lblMedium.getStyleClass().add("medium");
Label lblSemiBold = new Label("Semi Bold");
lblSemiBold.getStyleClass().add("semi");
Label lblBold = new Label("Bold");
lblBold.getStyleClass().add("bold");
Two main things to note:
The font name should be exactly as per the font file and in double
quotes
The original filename of the font should be maintained in
your resources
Attaching the resources/fonts photo to make it easy to understand:
Output:
I hope this saves someone's time.

how do i integrate CSS in javafx project?

I'm trying to integrate background and button styles in my quiz project.
But I can't reach the CSS.
I have following stylesheet(mainstyle.css):
.root{
-fx-background-image: url("/afbeeldingen/Achtergrond/background_image.jpg");
-fx-background-repeat:stretch;
-fx-background-size: 600 1000;
-fx-background-position: center center;
-fx-effect: dropshadow(three-pass-box,black,30,0.5,0,0);
}
.Button {
-fx-font-size: 48;
-fx-background-color: blue;
-fx-font-weight: bold;
-fx-border-width: 2;
-fx-border-radius: 10;
-fx-padding: 5 20 5 20;
}
.choice-box{-fx-background-color: yellow;
}
And the following implementation in de Quizapp
public class QuizApp extends Application {
#Override
public void start(Stage primaryStage) {
Lijst model = new Lijst();
QuizView view = new QuizView();
QuizPresenter presenter = new QuizPresenter(model,view);
Scene scene = new Scene(view);
scene.getStylesheets().add(this.getClass().getResource("mainStyle.css").toExternalForm());
primaryStage.setTitle("LANDENQUIZ");
primaryStage.setScene(scene);
primaryStage.setWidth(1000);
primaryStage.setHeight(600);
primaryStage.setResizable(false);
primaryStage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}
But I can't see a background image or other style...

Change the color of the Scrollbar corner in WebView

I'm working with JavaFX 8 on Windows 10. In a WebView with a dark background, I can see the light grey corner when the scrollbars are visible. WebView"manages scrolling automatically." I already tried this, as well as other selectors:
.corner {
-fx-background-color: black;
}
And also
.corner {
-fx-background-color: black;
}
.scroll-bar > .corner {
-fx-background-color: black;
}
.scroll-pane > .corner {
-fx-background-color: black;
}
.scroll-bar .corner {
-fx-background-color: black;
}
.scroll-pane .corner {
-fx-background-color: black;
}
.web-view .scroll-bar .corner {
-fx-background-color: black;
}
.web-view .scroll-pane .corner {
-fx-background-color: black;
}
But it doesn't work. So what could I do?
Example code: Main class
public class Main extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
WebView webView = new WebView();
WebEngine webEngine = webView.getEngine();
webEngine.loadContent("<html><body><pre>This is a very very very very very very long string </pre><b>test</b><p>1</p><p>2</p><p>3</p></body></html>");
webEngine.setUserStyleSheetLocation("data:,body { background: black; color: white; } ");
StackPane root = new StackPane();
root.setPadding(new Insets(5));
root.getChildren().add(webView);
webView.setStyle("-fx-background-color:black;");
root.setStyle("-fx-background-color:black;");
root.getStylesheets().add("style.css");
primaryStage.setTitle("JavaFX Test");
primaryStage.setScene(new Scene(root, 300, 150));
primaryStage.show();
}
}
style.css
.scroll-bar .track {
-fx-background-color: black;
}
.scroll-bar .thumb {
-fx-background-color: brown;
}
.corner {
-fx-background-color: black;
}
This also has an awful behavior where the scrollbars only appear when I hover with the mouse, but nevermind. This doesn't happen in my main application. I just want to change the color of the grey square in the corner.
I am unable to reproduce the effect on Mac OS X v10.13.6 with Java v1.8.0_201. Because WebView "manages scrolling automatically" and JavaFX uses WebKit, #Pagbo suggests using -webkit-scrollbar-corner, as suggested here. In another context, #DVarga suggests using -fx-background-color, as shown here. As the effect may be platform/version dependent, I've added a complete example and screenshot for reference. In particular, the lower-right corner is overlain by the vertical scrollbar's decrement button. Stretching the window to hide the vertical scrollbar reveals the horizontal scrollbar's increment button. The corner is always occupied by a scrollbar button or black.
Main.java
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class Main extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
WebView webView = new WebView();
WebEngine webEngine = webView.getEngine();
webEngine.loadContent("<html><body><pre>"
+ "This is a very very very very very very long string<br>"
+ System.getProperty("os.name") + " v"
+ System.getProperty("os.version") + "; Java v"
+ System.getProperty("java.version")
+ "</pre><b>test</b><p>1</p><p>2</p><p>3</p></body></html>");
webEngine.setUserStyleSheetLocation("data: ,body "
+ "{ background: black; color: white; } "
+ "::-webkit-scrollbar-corner { background: #0c0c0c; } ");
StackPane root = new StackPane();
root.setPadding(new Insets(5));
root.getChildren().add(webView);
webView.setStyle("-fx-background-color:black;");
root.setStyle("-fx-background-color:black;");
root.getStylesheets().add("style.css");
primaryStage.setTitle("JavaFX Test");
primaryStage.setScene(new Scene(root, 300, 150));
primaryStage.show();
}
}
style.css
.scroll-bar .track {
-fx-background-color: black;
}
.scroll-bar .thumb {
-fx-background-color: brown;
}
.corner {
-fx-background-color: black;
}

Custom CSS for JavaFX virtual keyboard will not load

In using the FXVK virtual keyboard, I would like to alter the default skin to my own whims. The css tags I found in the source code of JavaFX. These were added to a custom css and loaded as seen below.
public static void setVirtualKeyboardCSS() {
#SuppressWarnings("deprecation")
final Iterator<Window> windows = Window.impl_getWindows();
while (windows.hasNext()) {
final Window window = windows.next();
if (window instanceof PopupWindow) {
if (window.getScene() != null && window.getScene().getRoot() != null) {
Parent root = window.getScene().getRoot();
if (root.getChildrenUnmodifiable().size() > 0) {
Node popup = root.getChildrenUnmodifiable().get(0);
if (popup.lookup(".fxvk") != null) {
if (popup instanceof FXVK) {
FXVK keyboard = (FXVK)popup.lookup(".fxvk") // reference to the vk skin
ObservableList<String> sheets = keyboard.getStylesheets();
sheets.add("#customVK.css");
System.out.println("Setting keyboard stylesheet");
}
}
}
}
}
}
}
When the keyboard is expected to be shown, the call is made to this function and the output is shown that the call has been made. The CSS however does not change the layout. Using keyboard.getScene().getStyleSheets() instead of keyboard.getStyleSheets() also provides no working alternative.
Your code worked a lot for me, but, your error was that you must to call "setVirtualKeyboardCSS" function after the focus event propagates through the app and after the FXVK SubWindow is completely rendered.
public static final int TICK = 5;
public void setTimer() {
timer = new Timer();
timer.scheduleAtFixedRate(new TimerTask() {
public void run() {
Platform.runLater(() -> {
setVirtualKeyboradCss();
});
}
}, TICK, TICK);
}
public void setVirtualKeyboradCss() {
#SuppressWarnings("deprecation")
final Iterator<Window> windows = Window.impl_getWindows();
while (windows.hasNext()) {
final Window window = windows.next();
if (window instanceof Popup) {
String vars = getClass().getResource("/css/variables.css").toExternalForm();
String embed = getClass().getResource("/css/embeded.css").toExternalForm();
FXVK keyboard = (FXVK) window.getScene().getRoot().lookup(".fxvk");
if (keyboard != null) {
if (!keyboard.getStylesheets().contains(embed)) {
keyboard.getStylesheets().addAll(vars, embed);
}
}
timer.cancel();
timer = null;
}
}
}
variables.css
#font-face {
-fx-font-family: "DINPro-Bold";
src: url('/fonts/DINPro-Bold.otf');
}
* {
-color-black: #303030;
-color-white: #FFFFFF;
-color-brownish-gray: #606060;
-color-yellow: #FCB400;
}
embeded.css
.fxvk {
-fx-background-color: -color-brownish-gray;
}
.fxvk .key{
-fx-font-family: "DINPro-Bold", "sans-serif";
-fx-border-image-source: null;
-fx-border-radius: 3;
-fx-background-radius: 3;
-fx-background-color: radial-gradient(center 50% 50%, radius 60%, derive(-color-white, -65%), -color-black);
}
.fxvk .key:hover{
-fx-background-color: -color-yellow;
}
.fxvk-secondary{
}
.shift-icon {
}
.capslock-icon{
}
.shift{
-fx-fill: -color-white;
}
.special {
-fx-fill: -color-white;
}
.backspace{
-fx-fill: -color-white;
}
.enter {
-fx-fill: -color-white;
}
.hide{
-fx-fill: -color-white;
}
.multi-char-text{
-fx-fill: -color-white;
}
.key-text {
-fx-fill: -color-white;
-fx-font-family: "DINPro-Bold", "sans-serif";
}
.key-alttext{
-fx-fill: -color-white;
-fx-font-family: "DINPro-Bold", "sans-serif";
}
.key-icon {
-fx-fill: -color-white;
}
.multi-char-text{
-fx-fill: -color-white;
}

JavaFX8 CustomRowFactory ContextMenu background image not entirely visible

I've set the following custom row factory:
treeTblViewFiles.setRowFactory(new Callback<TreeTableView<FileModel>, TreeTableRow<FileModel>>() {
#Override
public TreeTableRow<FileModel> call(TreeTableView<FileModel> treeTableView) {
final TreeTableRow<FileModel> row = new TreeTableRow<>();
final ContextMenu rowMenu = new ContextMenu();
MenuItem removeItem = new MenuItem("Remove");
removeItem.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent t) {
int currentPlaylistIndex = m_playlists.indexOf(row.getTreeItem().getParent().getValue());
boolean itemRemoved = false;
if (row.getItem().getClass().equals(Song.class)) {
itemRemoved = m_playlists.get(currentPlaylistIndex).getSongs().remove(row.getItem());
m_playlists.get(currentPlaylistIndex).updatePlaylist((Song) row.getItem());
} else if (row.getItem().getClass().equals(Playlist.class)) {
itemRemoved = m_playlists.remove(row.getTreeItem().getValue());
}
TreeItem<FileModel> treeItem = row.getTreeItem();
// may need to check treeItem.getParent() is not null:
treeItem.getParent().getChildren().remove(treeItem);
treeTblViewFiles.getSelectionModel().clearSelection();
if (MyApp.DEBUG) {
System.out.println(m_playlists.size());
if (currentPlaylistIndex > -1) {
System.out.println(m_playlists.get(currentPlaylistIndex).getSongs().size());
}
}
}
});
rowMenu.getItems().add(removeItem);
row.contextMenuProperty().bind(Bindings.when(Bindings.isNotNull(row.itemProperty()))
.then(rowMenu)
.otherwise((ContextMenu) null));
return row;
}
});
and in my css I have:
/******************
* ContextMenu
******************/
.context-menu{
-fx-background-color: transparent;
}
.context-menu .menu-item{
-fx-background-image: url("styles/cm_bg.png");
-fx-background-repeat: no-repeat;
-fx-background-position: center;
-fx-background-color: transparent;
}
.context-menu .menu-item .label{
-fx-text-fill: #ababab;
-fx-font-weight: normal;
-fx-font-size: 12pt;
}
The problem is that it doesn't show the entire image(which is 220x40) but only the width that suits the 'Remove' string. The right-most part is cut.
EDIT:
Simplified version(the same result goes for a contextMenu on a Label):
ContextMenu cm = new ContextMenu();
MenuItem mi = new MenuItem("Test");
cm.getItems().addAll(mi);
lblUploader.setContextMenu(cm);
Why is that happening and how to solve it?
Thanks in advance.
Problem solved with the following .css:
.context-menu {
-fx-background-color: transparent;
-fx-min-width: <image_width>;
-fx-min-height: <image_height>;
}
Just remember to set the preferred(or min) sizes.

Resources