I'm trying to align the Menu of my MenuButton to be flush to the right side of the MenuButton instead of the default left side. I have my MenuButton like so:
menubutton("Max Voltage") {
item("Test 1").action {
println("test 1 pressed")
}
item("Test 2").action {
println("test 2 pressed")
}
}
Here is a screenshot of where it is currently aligned vs where I would like it to align:
Any help would be appreciated! Thanks!
Using javafx MenuButton This:
MenuButton menuButton = new MenuButton("Eats");
Label burgerText = new Label("Burger");
burgerText.prefWidthProperty().bind(menuButton.widthProperty());
burgerText.setAlignment(Pos.TOP_RIGHT);
MenuItem burger = new MenuItem("", burgerText);
Label hDogText = new Label("Hot Dog");
hDogText.prefWidthProperty().bind(menuButton.widthProperty());
hDogText.setAlignment(Pos.TOP_RIGHT);
MenuItem hDog = new MenuItem("",hDogText);
menuButton.getItems().addAll(burger, hDog);
results in:
Related
i have Pane and Label on it.
How to set layoutXProperty of Label so that it would be in Center on X line?
I think i should use formula like this: (Pane.width-Label.width)/2
But i don't know how it write right. And i have not found answer in google.
Can some one hint me?
thxs.
Upd. Text of the Label i update after if declaration, and it text can be different length. So i want to set layoutXProperty to it depend on length of text and would be on CENTER.
UPD: code inserted
public void start(Stage myStage) throws FileNotFoundException {
myStage.setTitle("OrthographyChecker");
Pane pane = new Pane();
Scene scene = new Scene(pane, 700, 300);
Label labelUp = new Label();
labelUp.setFont(new Font(fontSize));
labelUp.layoutXProperty().bind(pane.widthProperty().subtract(labelUp.widthProperty()).divide(2));
labelUp.layoutYProperty().bind(pane.heightProperty().subtract(labelUp.heightProperty()).divide(5));
labelUp.setText("Click to start");
pane.getChildren().addAll(labelUp);
TextField inputTxt = new TextField("");
inputTxt.setVisible(false);
inputTxt.layoutXProperty().bind(pane.widthProperty().subtract(inputTxt.widthProperty()).divide(2));
inputTxt.layoutYProperty().bind(labelUp.layoutYProperty().add(35));
pane.getChildren().addAll(inputTxt);
Label chkL = new Label("");
chkL.setFont(new Font(fontSize));
chkL.layoutYProperty().bind(inputTxt.layoutYProperty().add(30));
chkL.layoutXProperty().bind(pane.widthProperty().subtract(chkL.widthProperty()).divide(2));
chkL.setStyle("-fx-border-color: blue;");
pane.getChildren().addAll(chkL);
inputTxt.setOnKeyPressed(event -> {
if (event.getCode().equals(KeyCode.ENTER)) {
try {
for (String OneWrd : chkWrd[0].replace(", ", ",").split(",")) {
if (inputTxt.getText().equalsIgnoreCase(OneWrd)) {
chkL.setText("You are right!");
chkL.setVisible(true);
notfound[0] = false;
break;
}
}
if (notfound[0]){
chkL.setText("Wrong! Right answer: \"" + chkWrd[0] + "\"");
chkL.setVisible(true);
}
} catch (Exception e) {
errPrint(e, "Установки ожидания ");
}
inputTxt.setText("");
pause[0] = false;
notfound[0] = true;
chkL.layoutXProperty().bind(pane.widthProperty().subtract(labelUp.widthProperty()).divide(2));
}
});
myStage.setScene(scene);
myStage.show();
}
It part of code, which use it trouble label (variable chkL). As you can see, i have binded it to center, like another Label. But this label changes alingment after first iteration of change text of label, and starts to looks like that screen (label in border)
and i am trying to solve exact it proplem. Binds works, but not like i am expecting
The correct way to center a label is to use a layout pane and configure the pane and/or label so that it is centered. For example, if you wanted the label horizontally centered at the top of the layout (or a region of the layout), you might use a BorderPane as follows:
<BorderPane>
<top>
<Label alignment="CENTER" text="A Label" fx:id="myLabel">
<maxWidth><Double fx:constant="POSITIVE_INFINITY"/></maxWidth>
</Label>
</top>
<center>
<!-- other content ... -->
</center>
<!-- other BorderPane regions as required -->
</BorderPane>
All of the settings here can be made using Scene Builder, if you choose to use it.
I use this CSS to add icon to menuItem on JavaFX application:
#mniOpen > .label{
-fx-graphic:url(media/open.png);
}
It works, but one problem: my menuItem has a shortcut key (Ctrl+O), so in this item there are two label. In the result, the icon repeats twice for this menuItem:
How can remove the second icon (for Ctrl+O) ?
Using css
#mniOpen > .label{
-fx-graphic: url("media/open.png");
}
#mniOpen .accelerator-text{
-fx-graphic: none;
}
Without using css
Image openIcon = new Image(getClass().getResourceAsStream("media/open.png"));
ImageView openView = new ImageView(openIcon);
openView.setFitWidth(15);
openView.setFitHeight(15);
MenuItem newMenuItem = new MenuItem("Open");
newMenuItem.setGraphic(openView);
newMenuItem.setAccelerator(new KeyCodeCombination(KeyCode.O, KeyCombination.CONTROL_DOWN));
I'm working on a simple back/forward-navigation with Vaadin existing of two buttons, each with a label and an icon (arrows left and right).
navigator = getUI().getNavigator();
if (!StringUtils.isEmpty(backViewID)) {
backButton = new Button(backButtonI18n, IconCache.FAST_REWIND_BUTTON.getIconResource());
backButton.addClickListener(getBackButtonListener());
}
if (!StringUtils.isEmpty(nextViewID)) {
nextButton = new Button(nextButtonI18n, IconCache.FAST_FORWARD_BUTTON.getIconResource());
nextButton.addClickListener(getNextButtonListener());
}
How can I align the icons on each button? Currently it looks like
"<< Back" ">> Next", because icons are aligned on the left and text is aligned on the right side. I now want to align the icon for the next-button on the right side and the text on the left, to make it look like "<< Back" "Next >>".
I hope someone can help me with that.
Cheers, Hendrik
If you're using Valo, this is relatively easy. You just need to add a style name which is already shipped with the theme forwardButton.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_RIGHT):
public class ButtonsComponent extends HorizontalLayout {
public ButtonsComponent() {
Button backButton = new Button("Back", FontAwesome.ARROW_LEFT);
Button forwardButton = new Button("Forward", FontAwesome.ARROW_RIGHT);
forwardButton.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_RIGHT);
addComponent(backButton);
addComponent(forwardButton);
}
}
Alternatively you can just copy the same exact CSS from the valo-button-icon-align-right-style into your theme, and add that particular style to your button: forwardButton.addStyleName("my-custom-button-with-right-alligned-icon");
.my-custom-button-with-right-alligned-icon {
[class*="wrap"] {
display: inline-block;
}
.v-icon {
float: right;
$padding-width: ceil($v-unit-size/2.4);
margin-left: $padding-width + ceil($padding-width/-5);
+ span:not(:empty) {
margin-left: 0;
}
}
}
Either way, you should end up with something similar to:
I have a flowpane in center and i applied a slider effect which gets invoke on a click of button on the right (so slider moves from right to left when expanded). I have followed JewelSea slider tutorial mentioned here Slider
Now i have two different flowpanes in two different nodes. Both the flowpane contains array of labels but the only difference is, One flowpane contains scrollbar and is contained in TitlePane while the other is without scrollbar and no titlepane.
So now if i click on slider the contents in the flowpane(without scrollbar & titlepane) gets automatically adjusted but its not the same case with the flowpane containing scrollbar.
Here is relevant code for flowpane with scrollbar-
public void loadCase() {
ScrollPane s = null;
if (!homeController.mainTabPane.getTabs().contains(testTab)) {
int app = 0;
if (appareaList.size() > 0) {
FlowPane fpTestmoduleContainer = new FlowPane();
FlowPane example = new FlowPane();
for (ApplicationAreas appttribute : appareaList) {
appTestTitledPane[app] = new TitledPane();
appTestTitledPane[app].setText(appttribute.getApplication_name());
appTestTitledPane[app].setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
/*Module loop start*/
fpTestmoduleContainer.setHgap(10);
fpTestmoduleContainer.setVgap(10);
// fpTestmoduleContainer.setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
List<TestModuleAttribute> testmoduleList = WSData.getTestingModuleList(appttribute.getApplication_id());
ArrayList<Label> listTestlbs = new ArrayList<Label>(testmoduleList.size());
System.out.println("testmoduleList.size()" + testmoduleList.size());
int i = 0;
for (TestModuleAttribute testmattribute : testmoduleList) {
listTestlbs.add(new Label());
listTestlbs.get(i).setText(testmattribute.getModule_name());
listTestlbs.get(i).setAlignment(Pos.CENTER);
listTestlbs.get(i).setTextAlignment(TextAlignment.CENTER);
listTestlbs.get(i).setWrapText(true);
listTestlbs.get(i).setPrefSize(Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
listTestlbs.get(i).setId(testmattribute.getFxnode_css());
Image imgInstalled = new Image(getClass().getResourceAsStream("/upgradeworkbench/View/Icons/ok.png"));
listTestlbs.get(i).setGraphic(new ImageView(imgInstalled));
listTestlbs.get(i).setContentDisplay(ContentDisplay.BOTTOM);
Tooltip testtp = new Tooltip();
testtp.setText("Total No. Of test Cases :" + testmattribute.getTest_case());
testtp.setWrapText(true);
listTestlbs.get(i).setTooltip(testtp);
addModuleMouseClickListener(listTestlbs.get(i), testmattribute.getModule_name(), testmattribute.getFxnode_css(), testmattribute.getTest_case());
i = i + 1;
}
s = new ScrollPane();
s.setContent(fpTestmoduleContainer);
fpTestmoduleContainer.setPrefWidth(1500);
fpTestmoduleContainer.getChildren().addAll(listTestlbs);
//appTestTitledPane[app].setContent(fpTestmoduleContainer[app]);
listTestlbs.clear();
app = app + 1;
}
appareaTestmoduleContainer.getPanes().addAll(appTestTitledPane);
appareaTestmoduleContainer.setExpandedPane(appTestTitledPane[0]);
testTab.setText("Test Cases Wizard");
testTab.setText("Testing Application Foot Print");
//mainTab.setClosable(true);
// testTab.getContent().setVisible(true);
HBox hb = new HBox();
testTab.setContent(s);
}
}
}
Image of slider working as expected - before sliding
After sliding (without scrollbar) the 4 modules get to the next row as space is occupied by the slider
After adding scrollpane and embedding flowpane inside it. Slider overlaps the flowpane contents as shown
I want to know why the scrollbar causing issue in auto adjustment of contents inside the flowpane and how can i fix it ?
Here the width of your scrollpane is fixed. And then so is the width of the flow pane.You need to change the size of your scrollpane so that its content gets reset.
Use the following code.
scroll[app].setFitToHeight(true);
scroll[app].setFitToWidth(true);
This code will set the size of scrollpane according to the view. The flowpane will also adjust accordingly then.
I require a tabbed pane with tabs on the left side, the tab text/graphic needs to be horizontal
I did this on Scenebuilder few months back.
However when I add additional tabs via Java code, the tabs is on the left side but the graphic text is vertical unlike the tabs created using Scene builder.
In the attached image first two tabs are created through Scenebuilder and they are in the correct orientation, the third one was dynamically added using Java code.
Tab studentAdmission = new Tab();
studentAdmission.setContent((Parent)new FXMLLoader(getClass().getResource("Customer_View.fxml")).load());
studentAdmission.setGraphic(new Label("Student Admission"));
mainTab.getTabs().add(studentAdmission);
Could some one advise why this tab doesn't rotate as the other one.
Just figured out after posting the question that you need to add a StackPane containing a group containing a label to achieve this.
Tab studentAdmission = new Tab();
studentAdmission.setContent((Parent)new FXMLLoader(getClass().getResource("Customer_View.fxml")).load());
Label l = new Label("Student Admission");
l.setRotate(90);
StackPane stp = new StackPane(new Group(l));
studentAdmission.setGraphic(stp);
mainTab.getTabs().add(studentAdmission);
// Firstly
tabPane.setSide(Side.LEFT);
tabPane.setRotateGraphic(true);
Label l = new Label("Titel Tab1");
l.setRotate(90);
StackPane stp = new StackPane(new Group(l));
stp.setRotate(90);
tab1.setGraphic(stp);
l = new Label("Titel Tab2");
l.setRotate(90);
stp = new StackPane(new Group(l));
stp.setRotate(90);
tab2.setGraphic(stp);
tabPane.setTabMinHeight(100);
tabPane.setTabMaxHeight(100);
I needed to get something similar to this, but with left-aligned titles. I ended up with this solution.
TabPane setup:
TabPane tabPane = new TabPane();
tabPane.setSide(Side.LEFT);
tabPane.setRotateGraphic(true);
tabPane.setTabMinHeight(200); // Determines tab width. I know, its odd.
tabPane.setTabMaxHeight(200);
tabPane.getStyleClass().add("horizontal-tab-pane");
Tab setup:
Tab tab = new Tab(title, content);
tab.setClosable(false);
tab.setGraphic(graphic); // Graphic required. If you don't want one, use an empty label.
Platform.runLater(() -> {
// Get the "tab-container" node. This is what we want to rotate/shift for easy left-alignment.
// You can omit the last "getParent()" with a few tweaks for centered labels
Parent tabContainer = tab.getGraphic().getParent().getParent();
tabContainer.setRotate(90);
// By default the display will originate from the center.
// Applying a negative Y transformation will move it left.
// Should be the 'TabMinHeight/2'
tabContainer.setTranslateY(-100);
});
And the css:
.horizontal-tab-pane *.tab {
/* Determines the tab height */
-fx-pref-width: 60px;
/* Everything else is just aesthetics */
-fx-padding: 20px;
-fx-background-insets: 2 -1 -1 -1;
-fx-border-width: 1 0 1 1;
-fx-border-color: rgb(55, 55, 56) black black black;
}
.horizontal-tab-pane *.tab:selected {
-fx-background-color: rgb(45, 45, 46);
-fx-border-color: rgb(75, 125, 200) black rgb(45, 45, 46) black;
}