I need to lay out 4 buttons in 2x2 grid. All buttons must have the same size and change it when window changes it's size.
I use the following FXML now but buttons don't change their size.
<GridPane xmlns:fx="http://javafx.com/fxml">
<Button fx:id="btnLogin" text="Login" GridPane.rowIndex="0" GridPane.columnIndex="0"/>
<Button fx:id="btnLibrary" text="Library" GridPane.rowIndex="0" GridPane.columnIndex="1"/>
<Button fx:id="btnRegister" text="Register" GridPane.rowIndex="1" GridPane.columnIndex="0"/>
<Button fx:id="btnHelp" text="Help" GridPane.rowIndex="1" GridPane.columnIndex="1"/>
</GridPane>
That's how I managed to do it.
<GridPane xmlns:fx="http://javafx.com/fxml">
<columnConstraints>
<ColumnConstraints percentWidth="50"/>
<ColumnConstraints percentWidth="50"/>
</columnConstraints>
<rowConstraints>
<RowConstraints percentHeight="50"/>
<RowConstraints percentHeight="50"/>
</rowConstraints>
<Button fx:id="btnLogin" text="Login" GridPane.rowIndex="0" GridPane.columnIndex="0" maxWidth="10000" maxHeight="10000"/>
<Button fx:id="btnLibrary" text="Library" GridPane.rowIndex="0" GridPane.columnIndex="1" maxWidth="10000" maxHeight="10000"/>
<Button fx:id="btnRegister" text="Register" GridPane.rowIndex="1" GridPane.columnIndex="0" maxWidth="10000" maxHeight="10000"/>
<Button fx:id="btnHelp" text="Help" GridPane.rowIndex="1" GridPane.columnIndex="1" maxWidth="10000" maxHeight="10000"/>
</GridPane>
I had the same problem with a ComboBox and solved it this way:
<ComboBox hgrow="ALWAYS" maxWidth="Infinity" />
Related
I'm very new to nativescript, and I'm lost with the container layout. How can I set a webview in fullscreen with 2 floating bottoms, over the webview, fixed at the bottom of the app ?
!https://imgur.com/a/TMi3IQz
I tried at this time 2 solutions :
Can you help me please ?
https://play.nativescript.org/?template=play-js&id=QIXiNZ
With this, the second element is at 60px height, and in CSS, I tried to translate it to top (-60px)... But it disappears behind webview.
<GridLayout rows="*,60">
<WebView left="0" top="0" width="100%" height="100%" loaded="onWebViewLoaded"
id="webViewID" width="100%" src="https://www.stackoverflow.com" />
<AbsoluteLayout class="mywidget" row="1" orientation="horizontal">
<Button class="btn-promo" text="Promos" left="0" bottom="0" height="55" />
<Button class="btn-espacepro" text="Espace pro" right="10" bottom="0"
height="55" />
</AbsoluteLayout>
</GridLayout>
https://play.nativescript.org/?template=play-js&id=aPtpmB
I tried to tweak it with html, position relative for the parent, position obsolute with bottom:0px to the Stacklayout with absolut-it class.
<GridLayout class="relative-it" rows="*">
<ScrollView row="0">
<WebView left="0" top="0" width="100%" height="100%" loaded="onWebViewLoaded"
id="webViewID" width="100%" src="https://www.stackoverflow.com" />
</ScrollView>
<StackLayout class="absolute-it" row="1">
<Button class="btn-promo" text="Promos" left="0" bottom="0" height="55" />
<Button class="btn-espacepro" text="Espace pro" right="10" bottom="0"
height="55" />
</StackLayout>
</GridLayout>
Try this,
<GridLayout rows="*,auto" columns="*,*">
<WebView src="https://www.nativescript.org" colSpan="2" />
<Button row="1" col="0" text="Button 1" class="btn btn-primary" />
<Button row="1" col="1" text="Button 2" class="btn btn-primary" />
</GridLayout>
Updated Playground
I have an app with the following structure:
<GridPane>
<columnConstraints>
<ColumnConstraints fillWidth="true" hgrow="ALWAYS" />
</columnConstraints>
<rowConstraints>
<RowConstraints fillHeight="true" vgrow="ALWAYS" />
</rowConstraints>
<children>
<FlowPane fx:id="flwPictures" GridPane.columnIndex="0" GridPane.rowIndex="0"
GridPane.fillHeight="true" GridPane.fillWidth="true"
GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS" >
<padding>
<Insets top="2.0" bottom="2.0" left="2.0" right="2.0" />
</padding>
<children>
</children>
</FlowPane>
</children>
</GridPane>
I need the FlowPane to fill the size of its parent container of the GridPane. The Nodes are added dynamically based on user selection. So far what I observe is that flow pane is not filling.
I am developing a dialog box inside the scenebuilder and I can see there the size is 625x616 (I am using gridpane), however when I run the tool it looks much bigger (around 900x900).
This is the code I use to load the fxml file
private void DisplayDialog(String title, String fxmlPath) throws IOException {
final Stage dialog = new Stage();
dialog.initModality(Modality.APPLICATION_MODAL);
dialog.initOwner(primaryStage);
dialog.setResizable(false);
dialog.setTitle(title);
dialog.getIcons().add(primaryStage.getIcons().get(0));
Parent root = FXMLLoader.load(getClass().getResource(fxmlPath));
Scene dialogScene = new Scene(root);
dialog.setScene(dialogScene);
dialog.show();
logger.exit();
}
and here it is my fxml file:
<GridPane hgap="5.0" vgap="10.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ca.mali.dialogs.chapter6.UpdateAttributeValuesServiceController">
<columnConstraints>
<ColumnConstraints hgrow="NEVER" maxWidth="300.0" minWidth="200.0" prefWidth="200.0" />
<ColumnConstraints hgrow="NEVER" prefWidth="400.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="-Infinity" vgrow="SOMETIMES" />
<RowConstraints vgrow="SOMETIMES" />
<RowConstraints maxHeight="-Infinity" vgrow="SOMETIMES" />
<RowConstraints maxHeight="-Infinity" vgrow="SOMETIMES" />
<RowConstraints maxHeight="-Infinity" vgrow="SOMETIMES" />
</rowConstraints>
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
<HBox alignment="CENTER_RIGHT" GridPane.columnIndex="1" GridPane.rowIndex="4">
<Button cancelButton="true" mnemonicParsing="false" onAction="#Cancel_click" text="Cancel">
<HBox.margin>
<Insets right="20.0" />
</HBox.margin>
</Button>
<Button fx:id="OkButton" defaultButton="true" disable="true" mnemonicParsing="false" onAction="#OK_click" text="OK" />
</HBox>
<Label text="Instance Name: " GridPane.halignment="RIGHT" />
<ComboBox fx:id="InstanceName" maxWidth="1.7976931348623157E308" GridPane.columnIndex="1" />
<TableView fx:id="AttributeValueTableView" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" GridPane.columnSpan="2" GridPane.rowIndex="1">
<columns>
<TableColumn fx:id="AttributeTableColumn" editable="false" maxWidth="1.7976931348623157E308" minWidth="50.0" prefWidth="200.0" text="Attribute" />
<TableColumn fx:id="ValueTableColumn" maxWidth="1.7976931348623157E308" minWidth="50.0" prefWidth="400.0" text="Value" />
</columns>
<columnResizePolicy>
<TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
</columnResizePolicy>
</TableView>
<Label text="User-supplied tag*:" GridPane.halignment="RIGHT" GridPane.rowIndex="2" />
<TextField fx:id="UserSuppliedTag" GridPane.columnIndex="1" GridPane.rowIndex="2" />
<Label text="Logical Time:" GridPane.halignment="RIGHT" GridPane.rowIndex="3" />
<Spinner fx:id="LogicalTimeSpin" editable="true" GridPane.columnIndex="1" GridPane.rowIndex="3" />
</GridPane>
I also tried to replace Gridpane with VBox but I got the same results.
I am having one button. On click of that button. I am opening the stackpane which is right below it. For StackPane hard coded x layout values. So at first click the stackpane shows right below the button. The prob is when I maximize or resize the window it is not adjusting it's position(x).
FXML
<Button fx:id="searchCriteriaBtn" mnemonicParsing="false" onAction="#searchCriteriaAction" styleClass="redButton" text="Search Criteria">
<StackPane fx:id="searchCriteriaPane" alignment="TOP_RIGHT" prefHeight="150.0" prefWidth="200.0" styleClass="redBorder" translateX="239.0" translateY="-6.0" visible="false">
JAVA
#FXML
private void searchCriteriaAction(ActionEvent event){
searchCriteriaPane.visibleProperty().setValue(true);
searchCriteriaBtn.layoutXProperty().bind(searchCriteriaPane.layoutXProperty());
searchCriteriaBtn.layoutYProperty().bind(searchCriteriaPane.layoutYProperty());
}
I have found out the solution of overlay dropdown menu.
<MenuButton mnemonicParsing="false" nodeOrientation="LEFT_TO_RIGHT"
styleClass="redButton" text="Search Criteria" textFill="WHITE">
<items>
<MenuItem mnemonicParsing="false"
style="-fx-background-color: transparent; -fx-padding: 0; -fx-margin: 0;">
<AnchorPane minHeight="0.0" minWidth="0.0"
prefHeight="500.0" prefWidth="345.0" styleClass="noborder">
<children>
<HBox layoutY="156.0" minHeight="185.0" minWidth="345.0"
prefHeight="185.0" prefWidth="357.0" />
<HBox layoutX="5.0" layoutY="316.0" prefHeight="35.0"
prefWidth="348.0">
<children>
<Text layoutX="7.0" layoutY="335.0" strokeType="OUTSIDE"
strokeWidth="0.0" text="Template Name">
<HBox.margin>
<Insets right="5.0" top="9.0" />
</HBox.margin>
</Text>
<ComboBox fx:id="templateNameComboBox" layoutX="94.0"
layoutY="330.0" prefWidth="248.0" promptText="Select Template Name">
<HBox.margin>
<Insets left="7.0" />
</HBox.margin>
</ComboBox>
</children>
</HBox>
</children>
</AnchorPane>
</MenuItem>
</items>
<HBox.margin>
<Insets left="6.0" />
</HBox.margin>
<cursor>
<Cursor fx:constant="HAND" />
</cursor>
</MenuButton>
Having a GridPane with 2 rows and 2 columns, setting the row constraints to 50 percent height results in unwanted behaviour.
Code:
<BorderPane xmlns:fx="http://javafx.com/fxml" fx:controller="..." stylesheets="#general.css" prefWidth="800" prefHeight="600">
<top>
<VBox>
<!-- ... -->
</VBox>
</top>
<bottom>
<HBox>
<!-- ... -->
</HBox>
</bottom>
<center>
<GridPane >
<children>
<ScrollPane fx:id="tilePane" GridPane.columnIndex="0" GridPane.rowIndex="0">
<content>
</content>
<GridPane.margin>
<Insets bottom="2" left="2" right="2" top="2" />
</GridPane.margin>
</ScrollPane>
<TreeView fx:id="listPane" GridPane.columnIndex="0" GridPane.rowIndex="1">
<root>
<TreeItem value="Stages" />
</root>
<GridPane.margin>
<Insets bottom="2" left="2" right="2" top="2" />
</GridPane.margin>
</TreeView>
<ScrollPane fx:id="mapPane" GridPane.columnIndex="1" GridPane.rowIndex="0" GridPane.rowSpan="2">
<content>
</content>
<GridPane.margin>
<Insets bottom="2" left="2" right="2" top="2" />
</GridPane.margin>
</ScrollPane>
</children>
<columnConstraints>
<ColumnConstraints hgrow="ALWAYS" percentWidth="25"/>
<ColumnConstraints hgrow="ALWAYS" />
</columnConstraints>
<rowConstraints>
<RowConstraints vgrow="ALWAYS" percentHeight="50" />
<RowConstraints vgrow="ALWAYS" percentHeight="50" />
</rowConstraints>
</GridPane>
</center>
</BorderPane>
(mentioned attribute at the bottom)
I expected that the two rows would share their available height at a 50% rate. They do this, but they also consume a lot more space than needed.
Picture of the result with, and without percentHeight specified:
Do I understand percentHeight wrong, or is there another approach?