All my buttons and things are too close to their boundaries so I am trying to set the default padding of Region. I found this link which describes to me the style to use, -fx-padding. I want to set this as the global instead of setting it for every single thing I make. I tried to make this css file and add it to my scene, but it didn't seem to work:
.region{
-fx-padding: 5px
}
Setting it in code:
getDerbyDisplayStage().getScene().getStylesheets().add("com/neonorb/derbypro/ui/gui/Style.css");
I didn't get any error message in the console (which does exist if I change the path).
Could there be some order of doing this? Do I have to set the style sheet before I add components and things? If this is the case, I would have to separate the scene making from the components as I am using FXML to create my Stage, Scene, and components.
Related
Could someone explain why I can't load image from field -fx-background-image inside SceneBuilder?
Images for reference:
SceneBuilder
application
I've found out that I can do that from a .css file, for example:
#base {
-fx-background-image: url("background.jpg");
-fx-background-size: 100% 100%;
-fx-background-position: center center;
}
But that doesn't update from inside SceneBuilder, while I would like it too.
You need to attach the style sheet to the fxml element for it to be applied to the FXML viewed in the SceneBuilder design view.
There is a stylesheet field in the SceneBuilder property sheet view (it is actually in the image from your question). Select the root element and click the + symbol to select the CSS style sheet to apply. The style sheet will be applied to the root and all child elements.
Or you can use Preview | Scene Style Sheets | Add Style Sheet... to apply style sheets when you use the preview view.
You don't need to (and probably should not) set the style attribute in Scene Builder if you have a CSS file. The styles will be applied from the CSS files according to their selectors. Instead sets ids and style classes in scene builder and attach the stylesheet.
Your id is base, so if the id of the node is set to base, the selector will find it. I prefer working with style classes rather than ids but ids will work too.
You are referencing the image directly by name without relative path usage. So, as long as the image is in the same location as the fxml file and the style sheet is correctly applied as outlined above, the image defined in CSS should display in SceneBuilder.
I think that SceneBuilder automatically monitors the file system for changes, so if you change the FXML or CSS file externally, it will automatically reload them (notifying you of some, but not all, errors that may occur on reload).
If things still aren't working, see the Eden guide on where to put resources in JavaFX apps and try following their recommended approach (you might already be doing that, so locating the image might not be your issue).
I am using the controlsfx library, particularly it's Notifications component, however it's default CSS styling doesn't fit my applications style at all, so I'm trying to change it.
I tried using the solution provided in this post
Is there a way to change the built-in controlfx notification popup color?
So:
String css = this.getClass().getResource("notificationpopup.css").toExternalForm();
primaryStage.getScene().getStylesheets().add(css);
Notifications.create().owner(primaryStage).(...).show();
The CSS file is being successfully loaded, there are also no errors with adding it to the styleSheets, the style of the notification remains, however, the same. I have tried loading both a whole file identical, except my changes, to the one used in the library and short css file only with what I wanted to change
My css file changes, for reference:
.notification-pane .notification-bar > .pane {
-fx-background-color: linear-gradient(to top, #3e5151, #decba4);
-fx-padding: 0 7 0 7;
}
(for now I'm just trying to change the background to a gradient of my choice)
I have also, without success tried to implement advice from questions related to other controlsfx elements, that is to add the url to styleSheeT AFTER invoking show.
(I have also tried, just to check things out, brute changing the css inside the library jar, but somehow that also failed to work, as in the css remained the same, without any errors, even though I have modified the jar and added it again).
Since the explanation provided was very scarce, I am at a loss, as to what is wrong here.
Also in my solution I have to avoid invoking .owner() and assigning the notification to a particular stage, since then it shows up inside that stage, not on the screen outside it. Maybe that can be fixed by adding the stylesheet to some other element, not primaryStage? But for now I can't achieve any css change even when confining the notification to a stage
Kinda late to answer this. But if someone having this issue, you can fix it using those two methods.
Method 01
The issue might happen because you are using multiple stylesheets for your scene. Add your notificationpopup.css css to the begining of the arraylist. I dont have hard proofs how that fix the issue. But I think that happens because of the ordering of the stylesheets. (The overriding stylesheet should be placed after the original stylesheet inside the stylesheets arraylist. There cannot be other stylesheet(s) in between them.)
String css = this.getClass().getResource("notificationpopup.css").toExternalForm();
primaryStage.getScene().getStylesheets().add(0, css);
Method 02
Put !important to css class attributes. For ex:
.notification-bar > .pane {
-fx-background-color: red !important;
-fx-padding: 10 10 10 10 !important;
}
Two possible solutions to change the css styling for a component
In your controller class, invoke the getStyle() method as such
node.getStyle("-fx-background-color: linear-gradient(to top, #3e5151, #decba4);-fx-padding: 0 7 0 7;");
with the same code you would have in your css file on that node to style it directly and override the css values.
or
Give the node a unique CSS ID in your code or fxml file by saying
node.setId("myID");
and then in your css file writing whatever you need for that tag like
#myID {
-fx-background-color: red;
}
My goal is to have a program with 3 panes. A mulitfactor Auth. The first pane will have the user type in a passphrase, while the second pain will allow the user to pick a image from a drop down list. But I want the 3rd pane to launch just to the right of the 2nd pane after the use selects a image in the same "Main" stage.
Not looking for someone to code a program just point me in the right direction to what im trying to do. My searching skills are failing, either im not explaining it right or theres another word for this.
Edit:
This is my idea of how i want it to work. Now that i look at it using a border pane probably makes since, But im still stuck with, How can I launch each section of the border at a different time, i.e when something is clicked.
I would go about it by having 3 panes side by side and just blank for the first FXML file you load in. I would then have another FXML file with the same layout that contains what you want to show up in those panes.
Then with that, you can have the controller on request (like when a user hits submit or however you are wanting these to show up) grab the content inside of the pane on the second FXML file by ID and load it into the pane.
I've done something similar with changing anchor panes and keeping the toolbar from the original so I can add more on this when I get home and should be able to supply some code that is modified to fit your issue.
Edit 1: Sorry I was in a hurry to submit that dive I had to go but I am on mobile now so I can edit but not able to add a lot, just felt I needed to say, there are different options for what you can use to do this which is why I just said a pane instead of anything specific. Just wanted to submit something so you can start looking in the right direction till I am able to update.
Edit 2: Alright now that I am home I tried this out and was able to get this working. Here is how I did it.
So I had two FXML files. One with the 3 areas that you have your items, however, only the box that you want to show when it starts is shown. Each area is enclosed by an AnchorPane. I used the AnchorPane as a container so I can swap out what is inside of it. I then had a second FXML file that had all of the boxes you want to show all of which enclosed in AnchorPanes. Here are pictures explaining what I mean.
I have the first pane named initial.fxml and the second named grabfrom.fxml. For the pane names, I just have it as pane1, pane2, and pane3. Lastly, the methods I have are show2() and show3() and call them from the FXML when the respective buttons are clicked inside of the AnchorePanes.
With initial, I just load that up as normal from the start method in my main class and that is all that is needed to be done with that. We only had it so we could display something that does not have the boxes showing before needed.
Now for the important part
With what I have in show2(), which is called when the button inside of the first pane (which is there from the start) is pressed.
public void show2() throws IOException{
AnchorPane toSetPane2=(AnchorPane) FXMLLoader.load(getClass().getResource("grabfrom.fxml"));
toSetPane2=(AnchorPane) toSetPane2.lookup("#pane2");
pane2.getChildren().setAll(toSetPane2);
}
What this is doing is loading the grabfrom.fxml into a temp var that we cast to an anchor pane. (Do note that this works since as you can see in the screenshot the whole FXML file is an anchor pane. If you're not using it that way you can take out the casting and cast to something you are using or not even cast depending on what it is.)
It then set the var we just made to just the AnchorPane we need, which is the second one since that's the one we are adding. It does this with the .lookup("#ID"); method to get just the pane we need.
Lastly, it sets everything inside of the current pane2 to toSetPane2.
This could all be compressed down into one line, however, I have left it as is for easier reading.
You should be able to use this method of loading in a portion of your application for loading in the third one and for that matter any other parts you want to in any situation.
Edit 3:
Also as #Swatarianess had said, there are stackpanes, this method will work with anything that you can set an ID to so they would work just as well. I used AnchorPanes because I have done a fair bit with them and had some code I could recycle whilst making a test for it so it was easier. All you would do if you were using those though is just cast to a StackPane instead of an AnchorPane like this:
public void show2() throws IOException{
StackPane toSetPane2=(StackPane) FXMLLoader.load(getClass().getResource("grabfrom.fxml"));
toSetPane2=(StackPane) toSetPane2.lookup("#pane2");
pane2.getChildren().setAll(toSetPane2);
}
The transition between panes could be done with a stackpane.
I have a JTextPane in my application and I prepare some styles for various words/letters. These styles are applied via setCharacterAttributes. Now I plan to style the background of some styles: If a style defines a background (say gray) and I want to soften the corners (round corners with ie. 3px).
Is there a way to add a special renderer that is used within setCharacterAttributes? Or, do you recommend HighlightPainter added via pane.getHighlighter().addHighlight(...)?
Ok, Your question is not very clear, but if I understand correctly, you intend to customize the default behaviour of the background properties on characters. You describes 2 approaches, and one is probably much easier than the other one.
1) Based on Character attributes (complex one) : You need to define your behaviour by overriding the paint method in javax.swing.text.GlyphView. Then, you will need to change the ViewFactory of your EditorKit to make it take your change into account. I would not recommend this approach.
2) Based on Highlights (easier one) : You need to define a new javax.swing.text.Highlighter.HighlightPainter that paints the round borders as you wish. Then you need to find every set of text where a background is set. You remove the background and add your custom highlighter instead. You can optimize the process, but I think you already got this part.
What is the proper way to remove the grey background that covers the entire screen, the recompile button, and the default libGDX load and/or load splash in a HTML build of my game?
Note: This answer applies only to the gdx-setup tool as of late 2022. The gdx-liftoff tool is similar but has a slightly less boneheaded configuration out of the box. Additionally, I would like to get some of libGDX's HTML backend reworked one day, as there is no point in the padding and it's applied unevenly, plus less obvious things like the way it creates a table for layout.
Grey background
The background colour can be customised by changing background: #222222 in html/webapp/styles.css to some other colour. Or apply it directly to the body in index.html and delete styles.css (plus the link to it) as it doesn't contain anything important once the superdev button has been removed.
Grey border
The border around the game can be removed by editing HtmlLauncher like so:
#Override
public GwtApplicationConfiguration getConfig () {
GwtApplicationConfiguration config = new GwtApplicationConfiguration(true);
config.padHorizontal = 0;
config.padVertical = 0;
return config;
}
Separating GwtApplicationConfiguration into a config variable brings it in line with the other launchers (desktop, Android, iOS) and setting the padding to 0 is self-explanatory. While we're here, passing true into the app config's constructor tells it to render at native resolution on high-DPI/"retina" displays instead of upscaling.
Recompile button
Or the superdev button, as I call it. Just remove the <a class="superdev"... line from html/webapp/index.html. If you need access to it during development, it's recommended you add its link to your bookmark bar. Visibility of the bookmark bar can be toggled using Ctrl+Shift+B in Chrome and Firefox.
Load/splash screen
You're probably best referring to https://libgdx.com/wiki/html5-backend-and-gwt-specifics#changing-the-load-screen-progress-bar for this (which may not have existed when the question was asked). In short, getPreloaderCallback() and adjustMeterPanel() can be overridden in HtmlLauncher. I typically just overwrite logo.png after building instead of using the recommended method for changing the logo.
Other changes
Things you might want to change before a final release:
styles.css isn't very important beyond changing the background colour, as noted earlier.
In index.html, a comma should be added to between device-width and initial-scale for it to be valid HTML.
In index.html, applying align="center" to a div is deprecated behaviour. Probably best remove that alignment. If you need it, apply via CSS instead.
In index.html, handleMouseDown() and handleMouseUp() are completely pointless, as far as I can see. I don't use them for my own projects and have had no complaints.
html/build/dist/assets/assets.txt references some files that may not be necessary. The default font (arial or lsans, depending on libGDX version) is only needed if you use it and the vertex/fragment shaders are only needed if you do 3D stuff, I believe. Removing these can remove load times ever so slightly, especially on HTTP/1.1 connections. But I don't have an automated way to remove those lines (except on Linux - head -n -8).
Setting an asset filter as seen at https://libgdx.com/wiki/html5-backend-and-gwt-specifics#speeding-up-preload-process is an easy way to reduce your load times. I return false for music files to reduce load times greatly - it ends up streaming music instead of preloading it (if using Music, not AssetManager).