So, I've been programming an analog clock in JavaFX and have gotten the base functionality down. Now, I'm trying to add a drop-down menu when I click a custom button (triangle made with a Polygon). So far it all works fine, except the fact that the background of my StackPane is white when I try to add a ContextMenu either before or after clicking the button. So far Transparency has been fine up until now. Here's some pictures of the issue.
This is what it should look like (you can see my wallpaper because of the transparent window, as it should be.)
enter image description here
After I press the button for the drop down menu, the background changes.
enter image description here
JavaFX controls are styled by CSS. The first time you create a control, the default user agent stylesheet (modena.css) is loaded and the styles defined in it are applied to the scene graph. Other JavaFX node classes, such as shapes, image views, and layout panes, do not enforce CSS loading (this is to enhance performance for graphically-intensive applications that do not need CSS).
So it sounds as though the context menu is the first control you create: when you create and display it, it will apply the default CSS to the scene. The default background color for the root pane is a non-transparent color, so while your Scene and Stage may be transparent, once the CSS is applied the scene's content is not.
The fix is to specify transparency for the root pane:
root.setStyle("-fx-background-color: transparent;");
or the equivalent in an external stylesheet.
To answer my own question in case anyone else wants to know, it seems that when the ContextMenu is added to the scene, the Stage's initStyle(StageStyle.TRANSPARENT) gets overridden and shows the Parent's colors. Since I didn't initialize any CSS styles for the root, it just showed white. The fix would be to:
//the Parent layout Pane
parent.setStyle("-fx-background-color: rgba(0, 0, 0, 0.0)");
Related
I had a hard time figuring out why my transparent stage refuses to be transparent. Finally I found out, that it was caused by a Tooltip that was installed into an ImageView:
ImageView imageViewIcon = new ImageView();
imageViewIcon.setFitWidth(70);
imageViewIcon.setFitHeight(70);
imageViewIcon.setPreserveRatio(false);
imageViewIcon.setImage(new Image("./next.png"));
Tooltip tooltip = new Tooltip("Tooltip!");
if (this.config.getShowTooltip("true")) {
Tooltip.install(imageViewIcon, tooltip);
}
When I comment out the last 4 lines, the transparency works as expected, but with the Tooltip installed the stages background is grayish (e.g. the default window background). Though it's obvious what the button does and the tooltip is not essential for my layout it'd be nice to have, just to give a little hint...
Any suggestions or workarounds?
Solution
Set the style -fx-background-color: transparent on the root node of the scene.
Background
Similar behavior is discussed in an Oracle JavaFX Forum post on the JavaFX Scene/Fill Color.
Relevant comments from the thread by David Grieve, the lead developer for the JavaFX CSS features:
This happens because modena.css sets the background color of the root node. Setting the style -fx-background-color: transparent on the root node of the scene is the solution.
BorderPane root = new BorderPane();
root.setStyle("-fx-background-color: transparent;");
Scene scene = new Scene(root, 600, 400, Color.BLACK);
The default user agent stylesheet is loaded the first time a Control is instantiated. The reason for this is to avoid loading stylesheets and reduce CSS overhead in scene-graphs that contain nodes that don't use CSS.
The history behind it is that the designer of the modena theme felt that the controls looked better on this particular background color, which is a very light grey. Unfortunately, the Scene's background fill cannot be styled from CSS, so the style was set on the root node of the scene. There is an issue logged in JIRA to make Scene so that it can be styled by CSS (RT-31282)
The merit of loading in this way is to avoid css overhead in scene's that don't use controls. This would be typical of a splash screen, for example. Or maybe a game. This design choice was made a long time ago when CSS performance was a big issue, but it still makes sense for embedded devices.
In the case of your question, Tooltip is a control, so when you add it to the scene it implicitly triggers the default modena.css stylesheet to be loaded for the scene (which sets the background of the root node of the scene to gray rather than a null or transparent fill which is used when there are no controls in the scene). To retain the transparent background for the application when a control is used in the scene, it is necessary to explicitly set the scene root node background to transparent.
Sample code for a transparent stage:
//this is where the transparency is achieved:
//the three layers must be made transparent
//(i) make the VBox transparent (the 4th parameter is the alpha)
root.setStyle("-fx-background-color: rgba(0, 0, 0, 0);");
//(ii) set the scene fill to transparent
scene.setFill(null);
//(iii) set the stage background to transparent
stage.initStyle(TRANSPARENT);
After trying to find a solution for Centering Text on a Button with Offset, I'm doing now a custom component.
The goal is to make a button-like component that has an icon on one side and a centered text filling the rest of the button.
The component contains either two Label/ Buttons to display the Icon and text. Both of them have a background Image, defined in css.
The css looks like this for Icon and the text with exchanged image as background for text
#button-icon-cancel{
-fx-font-family: "Arial";
-fx-padding: 0,0,0,0;
-fx-background-color: transparent;
-fx-font-size: 28px;
-fx-graphic: url('images/button/cancel.png');
}
#button-icon-cancel:pressed{
-fx-graphic: url('images/button/cancel-pressed.png');
}
The images are loaded by setId(). Currently both components are added to a Panel before passing to the stage. They contain an OnClickEvent for processing.
Now to the actual question
How can I achieve that if one Component is clicked, the other one is getting the :pressed from css as well?
Adding the ClickEvent to the Panel is doing nothing (regarding clicking on either Label/ Button)
Adding both of them to a HBox, adding the Event to the HBox work in that regard, that I can click either component and the Event gets fired, BUT the :pressed State is only applied to the component you clicked.
Is it possible to give all childs the notification, that they should behave like they got pressed? Since we have a lot of small Icon, but only one background for the text, placing a Label over the whole thing create a lot of unneeded wasted Image space. Also this would cause the problematic for changing font color if not all css are changed at once (the label-over-button-solution with .setMouseTransparent(true) wouldn't change the font color of the text label since the label doesn't notice button is pressed)
First of all, JFX-8 will support wider range of css improvements, which will allow you to solve the issue easier.
To solve your issue, i can suggest the following : each node have a pressed property. You can add a listener on this property, and when it changes to true, use setStyle(String) method on needed nodes, and use setStyle(null | "") on changing to false.
I am trying to set the text background of the JavaFx label text as green using the following CSS
label.setStyle("-fx-background-color:rgba(85, 255, 68,0.7););
And the unhighlight using the following
label.setStyle("-fx-background-color:rgba(0,0,255,0);");
However these does not work most of the times when it has to be done back to back.
Is there any way to set the style without using CSS i.e. using JavaFx API itself. I found label.textFill(Paint p) for text color but nothing for background colour i.e. the color of the label itself.
Is there any way to set the style without using CSS i.e. using JavaFx API itself.
For some styles (such as the text fill) yes. For background colors, background images, borders, etc API methods will not be available until JavaFX 8 is released (see Public API for Region backgrounds and borders in the JavaFX issue tracker for more information - anybody can sign up for access).
these does not work most of the times when it has to be done back to back.
If you just highlight a label and then unhighlight it again without using something like a PauseTransition to give the user some time to see the highlighted label, then, from the user's perspective nothing is going to happen as all the user will see is an unhighlighted label.
Not sure of your use case, but if you only want to highlight part of the text in a label or let the user highlight the text with a mouse, then you can use a TextField with editable set to false.
Possible Workaround
If the Java 8 preview does not work for you and you are experiencing errors due do bugs in the JavaFX CSS processing, then try placing a Pane then a label inside a StackPane. Set the background color of the Pane to label.setStyle("-fx-background-color:rgba(85, 255, 68,0.7);); Bind the Pane's preferred width and height to the Label's width and height and toggle setVisible on the Pane as appropriate.
Finally I found the workarround. I had to give a PauseTransition to give the system some time between unhighlight and highlight. CSS showed effect only after the pausetransaction if the labels were already highlighted. I think it may be a bug. I will file a jira. The duration of paustransition may be as low as 1 milisecond so that there is not lag from the user's point of view.
Just a quick question.
I'm building my app interface at the moment with Qt.
I set a background image for the mainpage and I use stackedWIdgets to slide from one window to another.
setStyleSheet("background-image: url(:/spherebackground.png);"
"background-repeat: no-repeat;"
"background-position: center center");
When the application starts, a page appears which is made of 3 layouts:
1) One that contains a topToolbar Widget with QPushButtons, and a label displaying the PageTitle
2) in the middle, a mainPageLayout that contains the SlidingStackedWidgets
3) the BottomToolBar
The mainFrameWidget contains a mainFrameLayout:
mainPageWidget=new QWidget();
mainPageLayout=new QVBoxLayout();
//I add the buttons and others
mainPageLayout->addWidget(addEntryButton);
mainPageLayout->addWidget(vocaButton);
mainPageLayout->addWidget(exprButton);
mainPageLayout->addWidget(rulesButton);
mainPageLayout->addWidget(learnButton);
mainPageWidget->setLayout(mainPageLayout);
Then, I have the other pages created with the designer
And then a function that add the pages to the slidingStacked
void MainWindow::createSlidingStackedWidget() {
//the slidingStacked is the Widget that contains the subslidingWidgets
slidingStacked= new SlidingStackedWidget(this);
slidingStacked->addWidget(mainPageWidget);
quickAddView = new QuickAddController(); //which is a UI widget
slidingStacked->addWidget(quickAddView);
}
And then, when a button in the mainLayout is pressed, it triggers a function like this
void MainWindow::slideInAdd(){
topToolBar->clear();
slidingStacked->setVerticalMode(true);
slidingStacked->slideInIdx(1);
setupTopToolBar("Terminer","Ajout Entrée","Modifier");
bottomToolBar->hide();
QObject::connect(goBackButton,SIGNAL(clicked()),this,SLOT(backFromAdd()));
}
The thing is that I'm trying to port an application I created for the IPhone and I want it to have the same "Look and Feel" but when I slide from one page to another...
1) the animation flickers
2) I would like the sliding widgets to be transparent except for the controls (QPushButtons...)
but they have the same sphere background as the one I set up at the beginning of the code
3) My labels and controls also have the same background image when I would like them to be standard
(eg : a label should have a white background)
I can't figure out why...
Hope this will give you a better idea of what's going on...
So far as 2) and 3) go, that is because widgets inherit their parent's palette by default. To fix this, you can explicitly style them, or assign their palette to be the default application palette after they are created. I don't know how to handle the first problem.
I'm trying to create a custom tab navigator that has to look like this http://www.freeimagehosting.net/uploads/b470d024c4.jpg.
Also, when there's a rollover, the borders of the arrow have to be in blue (like the label in the current tab).
For that purpose, I've created a custom component: a hbox containing a label and a canvas with 3 images inside (for the arrow tip that has to change depending on the currentState).
Then, I thought of overlapping the components in order to get the blue highlight color (ex: arrow button 3 is over arrow button 4. The image of the arrow tip in button 3 will be transparent outside the arrow, so that we can see the black color of the following button).
I'm now trying to position the components inside the canvas ... but I cannot.
After the creationComplete event, I assign the label text and I was calculating the coordonates of the component but it doesn't take into account the label width... -_-'
Any ideas?
Thanks. Regards,
BS_C3
Read up on the Flex Component LifeCycle. You should be positioning and sizing your child components in the updateDisplayList() method; not in a creationComplete handler.
You should assign the label text in either commitProperties or createChildren depending upon when you know what it is.
If you want to share some code, we may be able to hone in on the exact problem. If you run code like this:
myLabel.text = 'Blahblahblahblah';
trace(myLabel.width);
I would expect that the width has not changed to reflect the new text because the myLabel has not gone through it's own component lifecycle steps yet.