TextFields inside VBox - javafx

I have a list of records and 2 types of TextFields: filled and empty. I am putting these in a VBox.
for (int i = 0; i < records.size(); i++) {
if (records.get(i).contains("NEW")) {
TextField fillField = new TextField();
vbox.getChildren().add(fillField);
} else {
TextField filledField = new TextField();
filledField.setEditable(false);
filledField.setText(records.get(i));
vbox.getChildren().add(filledField);
}
}
After this the user can fill in the free TextFields. How can I update them inside the VBox?
Then I want to check if any of them are empty(how?), in which case I will fill them with "true".
EDIT:
So I am doing this:
for (int i = 0; i < vbox.getChildren().size(); i++) {
if (((TextField) vbox.getChildren().get(i)).getText()==null) {
TextField filledField = new TextField("true");
((TextField) vbox.getChildren().get(i)).setText("true");
//System.out.println(((TextField)vbox.getChildren().get(i)).getText());
}
}
My problem is that when I am printing in the console, I do see true when the field is empty. But in my application, the field remains empty.
Do I need to update vbox or something, after I update all the fields or?

The text of a TextField only becomes null, if you set the property to this value. This is a bad idea though, since you'd need to check for null and the empty string (the latter being the result of adding some chars and deleting them from the TextField).
In this case the simplest solution would be not to do this and use String.isEmpty for the checks:
for (String record : records) {
TextField textField = new TextField();
if (!record.contains("NEW")) {
textField.setEditable(false);
textField.setText(record);
}
vbox.getChildren().add(textField);
}
for (Node child : vbox.getChildren()) {
TextField tf = (TextField) child;
if (tf.getText().isEmpty()) {
tf.setText("true");
}
}

Related

JavaFX create radiobutton behavior in gridpane of VBox-es

I have code generated gridpane. I generates columns and rows based on data it gets from the server. I append a VBox that contains Label (on top) and ImageView (on bottom) to every cell. Each VBox is different. I look at each VBox as container. I would like to make each VBox selectable in radiobutton behavior - only one in the gridpane can be selected. This is my code for generating gridpane and generating VBoxes and appending them to cells in gridpane:
private void vBoxPickPane(List<Data> data){
int columns = 3;
int vBoxSpacing = 2;
int cellWidth = 260;
int cellHeight = 220;
List<Label> labels = new ArrayList<Label>();
List<ImageView> imageViews = new ArrayList<>();
List<VBox> vBoxes = new ArrayList<>();
for(int l=0; l != data.size(); l++){
labels.add(new Label(data.get(l).getName()));
imageViews.add(new ImageView(new Image(new File(data.get(l).getImgFileUrl()).toURI().toString())));
}
int labelIndex = 0;
for(int u=0;u!=columns;u++){
gridPane.getColumnConstraints().add(new ColumnConstraints(cellWidth));
}
for(int i=0; i <= data.size()/columns; i++){
gridPane.getRowConstraints().add(new RowConstraints(cellHeight));
}
for(int i=0; i<data.size();i++){
vBoxes.add(new VBox(vBoxSpacing));
GridPane.setConstraints(vBoxes.get(i), i%columns, i/columns);
}
for(int o=0; o != imageViews.size(); o++){
imageViews.get(o).setFitHeight(200);
imageViews.get(o).setFitWidth(255);
}
for(int k = 0; k != labels.size(); k++){
labels.get(k).setStyle("-fx-background-color:white;");
}
for(int u = 0; u != vBoxes.size(); u++){
vBoxes.get(u).getChildren().addAll(labels.get(u), imageViews.get(u));
}
gridPane.getChildren().addAll(vBoxes);
}
The code requires a clean up which I'll do after I figure out how to make each cell clickable in radiobutton behavior.
I was thinking that maybe I should create VBox variable for selected one and then check if it already has value and if it does have value and another VBox is clicked then it would change to the one that is clicked. But I also have to let the user know that he selected one vbox and change it's background color or something similar. Also I don't know how I would create each cell as clickable.
I did it exactly like I thought I would.
for(int u = 0; u != vBoxes.size(); u++){
final VBox curr = vBoxes.get(u);
curr.getChildren().addAll(labels.get(u), imageViews.get(u));
curr.setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
if(selectedVbox != null){
//odselektaj
selectedVbox.setStyle("-fx-background-color: #272D2D;");
}
selectedVbox = curr;
selectedVbox.setStyle("-fx-background-color: #e74c3c;");
}
});
}
I did an override on handle method with setting click listener on each vboxes and then checking if one is already clicked and if not changed it's background and if it already was then I overwritten the variable.

Selecting an entire line from TextArea on mouse click

I am using JavaFX for my application. In my application I have a button,on click on that button should display the results on textarea, that I am able to do. Now I would like to select the entire line on click from the text area. But The code which I have written is able to select only the value which I click which means like only word on which I have clicked. Please suggest me to modify this.
#FXML
public void find_btn_action(ActionEvent event) throws MWException
{
double[] peaks= {1.2,5.6,8.0,9.0};
StringBuilder sb = new StringBuilder(peaks.length);
for(int i= 0; i < peaks.length ; i++)
{
result[i] = peaks[i];
sb.append(result[i]+"\n");
}
auto.setText(sb.toString());
auto.setOnMouseClicked(new EventHandler<Event>()
{
#Override
public void handle(Event arg0)
{
selectedVal = auto.getSelectedText();
System.out.println("selected text:"+ selectedVal);
}
});
}
In your mouse click listener check, if the click was inside the content area and if this is the case, use the caret position to determine the next/previous line break in the TextArea's text and select this range:
textArea.setOnMouseClicked(evt -> {
if (evt.getButton() == MouseButton.PRIMARY) {
// check, if click was inside the content area
Node n = evt.getPickResult().getIntersectedNode();
while (n != textArea) {
if (n.getStyleClass().contains("content")) {
// find previous/next line break
int caretPosition = textArea.getCaretPosition();
String text = textArea.getText();
int lineBreak1 = text.lastIndexOf('\n', caretPosition - 1);
int lineBreak2 = text.indexOf('\n', caretPosition);
if (lineBreak2 < 0) {
// if no more line breaks are found, select to end of text
lineBreak2 = text.length();
}
textArea.selectRange(lineBreak1, lineBreak2);
evt.consume();
break;
}
n = n.getParent();
}
}
});

Implementing tab functionality for CheckBox cells in TableView

I've created a TableView where each cell contains a TextField or a CheckBox. In the TableView you're supposed to be able to navigate left and right between cells using TAB and SHIFT+TAB, and up and down between cells using the UP and DOWN keys.
This works perfectly when a text field cell is focused. But when a check box cell is focused, the tab funcationality behaves strange. You can tab in the opposite direction of the cell you tabbed from, but you can't switch tab direction.
So for instance if you tabbed to the check box cell using only the TAB key, then SHIFT+TAB wont work. But if you tab to the next cell using the TAB key, and then TAB back using SHIFT+TAB (assuming the next cell is a text field cell), then TAB wont work.
I've tried running any code handling focus on the UI thread using Platform.runLater(), without any noteable difference. All I know is that the TAB KeyEvent is properly catched, but the check box cell and the check box never loses focus in the first place anyway. I've tried for instance removing its focus manually by doing e.g. getParent().requestFocus() but that just results in the parent being focused instead of the next cell. What makes it strange is that the same code is executed and working properly when you tab in the opposite direction of the cell you came from.
Here's a MCVE on the issue. Sadly it does not really live up to the "M" of the abbreviation:
import java.util.List;
import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.TextField;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.stage.Stage;
public class AlwaysEditableTable extends Application {
public void start(Stage stage) {
TableView<ObservableList<StringProperty>> table = new TableView<>();
table.setEditable(true);
table.getSelectionModel().setCellSelectionEnabled(true);
table.setPrefWidth(510);
// Dummy columns
ObservableList<String> columns = FXCollections.observableArrayList("Column1", "Column2", "Column3", "Column4",
"Column5");
// Dummy data
ObservableList<StringProperty> row1 = FXCollections.observableArrayList(new SimpleStringProperty("Cell1"),
new SimpleStringProperty("Cell2"), new SimpleStringProperty("0"), new SimpleStringProperty("Cell4"),
new SimpleStringProperty("0"));
ObservableList<StringProperty> row2 = FXCollections.observableArrayList(new SimpleStringProperty("Cell1"),
new SimpleStringProperty("Cell2"), new SimpleStringProperty("1"), new SimpleStringProperty("Cell4"),
new SimpleStringProperty("0"));
ObservableList<StringProperty> row3 = FXCollections.observableArrayList(new SimpleStringProperty("Cell1"),
new SimpleStringProperty("Cell2"), new SimpleStringProperty("1"), new SimpleStringProperty("Cell4"),
new SimpleStringProperty("0"));
ObservableList<ObservableList<StringProperty>> data = FXCollections.observableArrayList(row1, row2, row3);
for (int i = 0; i < columns.size(); i++) {
final int j = i;
TableColumn<ObservableList<StringProperty>, String> col = new TableColumn<>(columns.get(i));
col.setCellValueFactory(param -> param.getValue().get(j));
col.setPrefWidth(100);
if (i == 2 || i == 4) {
col.setCellFactory(e -> new CheckBoxCell(j));
} else {
col.setCellFactory(e -> new AlwaysEditingCell(j));
}
table.getColumns().add(col);
}
table.setItems(data);
Scene scene = new Scene(table);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch();
}
/**
* A cell that contains a text field that is always shown.
*/
public static class AlwaysEditingCell extends TableCell<ObservableList<StringProperty>, String> {
private final TextField textField;
public AlwaysEditingCell(int columnIndex) {
textField = new TextField();
this.emptyProperty().addListener((obs, wasEmpty, isNowEmpty) -> {
if (isNowEmpty) {
setGraphic(null);
} else {
setGraphic(textField);
}
});
// The index is not changed until tableData is instantiated, so this
// ensure the we wont get a NullPointerException when we do the
// binding.
this.indexProperty().addListener((obs, oldValue, newValue) -> {
ObservableList<ObservableList<StringProperty>> tableData = getTableView().getItems();
int oldIndex = oldValue.intValue();
if (oldIndex >= 0 && oldIndex < tableData.size()) {
textField.textProperty().unbindBidirectional(tableData.get(oldIndex).get(columnIndex));
}
int newIndex = newValue.intValue();
if (newIndex >= 0 && newIndex < tableData.size()) {
textField.textProperty().bindBidirectional(tableData.get(newIndex).get(columnIndex));
setGraphic(textField);
} else {
setGraphic(null);
}
});
// Every time the cell is focused, the focused is passed down to the
// text field and all of the text in the textfield is selected.
this.focusedProperty().addListener((obs, oldValue, newValue) -> {
if (newValue) {
textField.requestFocus();
textField.selectAll();
System.out.println("Cell focused!");
}
});
// Switches focus to the cell below if ENTER or the DOWN arrow key
// is pressed, and to the cell above if the UP arrow key is pressed.
// Works like a charm. We don't have to add any functionality to the
// TAB key in these cells because the default tab behavior in
// JavaFX works here.
this.addEventFilter(KeyEvent.KEY_RELEASED, e -> {
if (e.getCode().equals(KeyCode.UP)) {
getTableView().getFocusModel().focus(getIndex() - 1, this.getTableColumn());
e.consume();
} else if (e.getCode().equals(KeyCode.DOWN)) {
getTableView().getFocusModel().focus(getIndex() + 1, this.getTableColumn());
e.consume();
} else if (e.getCode().equals(KeyCode.ENTER)) {
getTableView().getFocusModel().focus(getIndex() + 1, this.getTableColumn());
e.consume();
}
});
}
}
/**
* A cell containing a checkbox. The checkbox represent the underlying value
* in the cell. If the cell value is 0, the checkbox is unchecked. Checking
* or unchecking the checkbox will change the underlying value.
*/
public static class CheckBoxCell extends TableCell<ObservableList<StringProperty>, String> {
private final CheckBox box;
public CheckBoxCell(int columnIndex) {
this.box = new CheckBox();
this.emptyProperty().addListener((obs, wasEmpty, isNowEmpty) -> {
if (isNowEmpty) {
setGraphic(null);
} else {
setGraphic(box);
}
});
this.indexProperty().addListener((obs, oldValue, newValue) -> {
// System.out.println("Row: " + getIndex() + ", Column: " +
// columnIndex + ". Old index: " + oldValue
// + ". New Index: " + newValue);
ObservableList<ObservableList<StringProperty>> tableData = getTableView().getItems();
int newIndex = newValue.intValue();
if (newIndex >= 0 && newIndex < tableData.size()) {
// If active value is "1", the check box will be set to
// selected.
box.setSelected(tableData.get(getIndex()).get(columnIndex).equals("1"));
// We add a listener to the selected property. This will
// allow us to execute code every time the check box is
// selected or deselected.
box.selectedProperty().addListener((observable, oldVal, newVal) -> {
if (newVal) {
// If newValue is true the checkBox is selected, and
// we set the corresponding cell value to "1".
tableData.get(getIndex()).get(columnIndex).set("1");
} else {
// Otherwise we set it to "0".
tableData.get(getIndex()).get(columnIndex).set("0");
}
});
setGraphic(box);
} else {
setGraphic(null);
}
});
// If I listen to KEY_RELEASED instead, pressing tab next to a
// checkbox will make the focus jump past the checkbox cell. This is
// probably because the default TAB functionality is invoked on key
// pressed, which switches the focus to the check box cell, and then
// upon release this EventFilter catches it and switches focus
// again.
this.addEventFilter(KeyEvent.KEY_PRESSED, e -> {
if (e.getCode().equals(KeyCode.UP)) {
System.out.println("UP key pressed in checkbox");
getTableView().getFocusModel().focus(getIndex() - 1, this.getTableColumn());
e.consume();
} else if (e.getCode().equals(KeyCode.DOWN)) {
System.out.println("DOWN key pressed in checkbox");
getTableView().getFocusModel().focus(getIndex() + 1, this.getTableColumn());
e.consume();
} else if (e.getCode().equals(KeyCode.TAB)) {
System.out.println("Checkbox TAB pressed!");
TableColumn<ObservableList<StringProperty>, ?> nextColumn = getNextColumn(!e.isShiftDown());
if (nextColumn != null) {
getTableView().getFocusModel().focus(getIndex(), nextColumn);
}
e.consume();
// ENTER key will set the check box to selected if it is
// unselected and vice versa.
} else if (e.getCode().equals(KeyCode.ENTER)) {
box.setSelected(!box.isSelected());
e.consume();
}
});
// Tracking the focused property of the check box for debug
// purposes.
box.focusedProperty().addListener((obs, oldValue, newValue) ->
{
if (newValue) {
System.out.println("Box focused on index " + getIndex());
} else {
System.out.println("Box unfocused on index " + getIndex());
}
});
// Tracking the focused property of the check box for debug
// purposes.
this.focusedProperty().addListener((obs, oldValue, newValue) ->
{
if (newValue) {
System.out.println("Box cell focused on index " + getIndex());
box.requestFocus();
} else {
System.out.println("Box cell unfocused on index " + getIndex());
}
});
}
/**
* Gets the column to the right or to the left of the current column
* depending no the value of forward.
*
* #param forward
* If true, the column to the right of the current column
* will be returned. If false, the column to the left of the
* current column will be returned.
*/
private TableColumn<ObservableList<StringProperty>, ?> getNextColumn(boolean forward) {
List<TableColumn<ObservableList<StringProperty>, ?>> columns = getTableView().getColumns();
// If there's less than two columns in the table view we return null
// since there can be no column to the right or left of this
// column.
if (columns.size() < 2) {
return null;
}
// We get the index of the current column and then we get the next
// or previous index depending on forward.
int currentIndex = columns.indexOf(getTableColumn());
int nextIndex = currentIndex;
if (forward) {
nextIndex++;
if (nextIndex > columns.size() - 1) {
nextIndex = 0;
}
} else {
nextIndex--;
if (nextIndex < 0) {
nextIndex = columns.size() - 1;
}
}
// We return the column on the next index.
return columns.get(nextIndex);
}
}
}
After some digging in the TableView source code I found the issue. Here's the source code for the focus(int row, TableColumn<S, ?> column) method:
#Override public void focus(int row, TableColumn<S,?> column) {
if (row < 0 || row >= getItemCount()) {
setFocusedCell(EMPTY_CELL);
} else {
TablePosition<S,?> oldFocusCell = getFocusedCell();
TablePosition<S,?> newFocusCell = new TablePosition<>(tableView, row, column);
setFocusedCell(newFocusCell);
if (newFocusCell.equals(oldFocusCell)) {
// manually update the focus properties to ensure consistency
setFocusedIndex(row);
setFocusedItem(getModelItem(row));
}
}
}
The issue arises when newFocusCell is compared to oldFocusCell. When tabbing to a checkbox cell the cell would for some reason not get set as the focused cell. Hence the focusedCell property returned by getFocusedCell() will be the cell we focused before the check box cell. So when we then try to focus that previous cell again, newFocusCell.equals(oldFocusCell) will return true, and the focus will be set to the currently focused cell again by doing:
setFocusedIndex(row);
setFocusedItem(getModelItem(row));`
So what I had to do was make sure that the cell isn't be the value of the focusedCell property when we want to focus it. I solved this by setting the focus manually to the whole table before trying to switch the focus from the check box cell:
table.requestFocus();

Making a Grid cell editable based on ModelData in GXT 3.0.1

I want to make a Grid Cell editable based on the data in that cell.
The cell accepts a String. so, i am adding a Text editor as follow:
final GridInlineEditing<ModelData> editableGrid = new GridInlineEditing<ModelData>(grid);
int columnCount = grid.getColumnModel().getColumnCount();
final TextField text = new TextField();
for(int i=1;i<columnCount-1;i++)
{
final ColumnConfig<ModelData,String> config = grid.getColumnModel().getColumn(i);
editableGrid.addEditor(config, text);
}
and also.when i was creating the grid
config.setCell(new AbstractCell<String>() {
#Override
public void render(Context context, String value, SafeHtmlBuilder sb)
{
ModelData model = getGrid().getStore().get(context.getIndex());
if(null==value)
{
value = "";
}
if(model.getName().equals("vivek") {
sb.appendHtmlConstant("<div style=\"background-color:#E9967A;\">");
sb.appendHtmlConstant((String)value);
sb.appendHtmlConstant("</div>");
}
else{
sb.appendHtmlConstant("<span>" + value + "</span>");
}
}
});
But, i could not make the required field editable( I am able to make them colored).
getGrid(), is a method that simply returns the grid
Then, i tried with setting editor to TextField with Custom TextInputCell, but this does not accepts HTML.
So, how can i achieve this. Making a Grid cell editable, based on the data.
I found answer myself :)
editableGrid.addBeforeStartEditHandler(new BeforeStartEditHandler<ModelData>() {
#Override
public void onBeforeStartEdit(BeforeStartEditEvent<ModelData> event) {
ModelData data = grid.getStore().get(event.getEditCell().getRow());
if(condition)
event.getSource().getEditor(event.getSource().getEditableGrid().getColumnModel().getColumn(event.getEditCell().getCol())).enable();
}
else {
event.getSource().getEditor(event.getSource().getEditableGrid().getColumnModel().getColumn(event.getEditCell().getCol())).disable();
}
}

Show Image Dynamically in ScrollPane JavaFx

I want to add Multiple images in Scollpane by clicking button i try below code but it will not display image any idea about that?
#FXML private void OnClick(ActionEvent ae)
{
getGalleryView();
}
public void getGalleryView()
{
ScrolPane sp=new ScroPane();
Hbox hb=new Hbox();
Image [] images=new Image[5];
ImageView []pics=new ImageView[5];
final String [] imageNames = new String [] {"fw1.jpg", "fw2.jpg",
"fw3.jpg", "fw4.jpg", "fw5.jpg"};
for (int i = 0; i < 5; i++) {
images[i] = new Image(getClass().getResourceAsStream(imageNames[i]));
pics[i] = new ImageView(images[i]);
pics[i].setFitWidth(100);
pics[i].setPreserveRatio(true);
hb.getChildren().add(pics[i]);
sp.setContent(hb);
}
}
You need to add the scrollpane to the scene:
#FXML private void OnClick(ActionEvent ae)
{
getGalleryView(ae);
}
public void getGalleryView(ActionEvent ae)
{
ScrolPane sp=new ScroPane();
Hbox hb=new Hbox();
Image [] images=new Image[5];
ImageView []pics=new ImageView[5];
final String [] imageNames = new String [] {"fw1.jpg", "fw2.jpg",
"fw3.jpg", "fw4.jpg", "fw5.jpg"};
for (int i = 0; i < 5; i++) {
images[i] = new Image(getClass().getResourceAsStream(imageNames[i]));
pics[i] = new ImageView(images[i]);
pics[i].setFitWidth(100);
pics[i].setPreserveRatio(true);
hb.getChildren().add(pics[i]);
sp.setContent(hb);
}
Scene scene = ((Node) ae.getSource()).getScene();
((Pane) scene.getRoot()).getChildren().add(sp);
}
I assumed here that your root node is a Pane or one of its subclasses.
ScrolPane sp=new ScroPane(); error?
EDIT:
I was developing similar method. Mine works fine. You can check if you want to.
private List<String> listFileNames(File folder) throws NullPointerException{
List<String> list = new ArrayList<>();
for (File file : folder.listFiles()) {
if (file.isDirectory())
listFileNames(file);
else {
System.out.println(file.getName());
list.add(file.getName());
}
}
return list;
}
private void insertImages(List<String> list, Hero thisHero) {
int column = 0;
int row = 0;
for (String path:list) {
String fullPath = "file:"+thisHero.getHeroClass().getFile()+"\\"+path;
ToggleButton button = new ToggleButton();
button.setBackground(Background.EMPTY);
button.setGraphic(new ImageView(new Image(fullPath)));
grid.add(button,column,row);
column++;
if (column == 5) {
row++;
column = 0;
}
}
}
I can write more if you want. I use Lists because of it's ease of adding items.
You can use first method to just get all file names to list, from your folder filled with image files.
Second method does the job of making new ImageViews filled with ToggleButtons with graphic. I just changed the concept to buttons, so sorry about my laziness of not changing code to exactly fit your needs.
Path is the exact file name, thisHero.getHeroClass().getFile() returns path to the directory which contains this image.
grid.add(button, column, row) adds this button to the grid pane which i made before. It's my app, so sorry for not sharing all the code, but i thought that this snippet could be usefull.
EDIT2: You could also provide us with error information if there is any.

Resources