Skip to content

Configure Table with Form

chqu1012 edited this page Jul 28, 2020 · 1 revision

This page briefly explains how to create a table with form in less than 5 minutes.

This example includes the following points

  • TableView with Person Model
  • Filter by Textfields
  • Filter by ChoiceList
  • Formular
  • Validation on empty TextFields
  • Validation on Integer TextField (Age)
  • Validation on Boolean TextField (Gender)

Tongue TableView Form

Content of the Tongue File

  • Save this file unter this path with the name "./resources/de/dc/fx/tongue/demo/person/PersonTableView.tongue".
  • Open this file in the Tongue TreeViewer Editor
  • Generate BaseController, Controller, Binding Model, Model and Id classes
  • Enhanced the controller class with row creation content.
<?xml version="1.0" encoding="UTF-8"?>
<tongue:FXTongue xmi:version="2.0" xmlns:xmi="http://www.omg.org/XMI" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:tongue="http://www.frateranatis.org/fx/tongue" packageUri="de.dc.fx.tongue.demo.person" controllerName="PersonTableViewController" modelName="PersonTableViewModel" tonguePath="./resources/de/dc/fx/tongue/demo/person/PersonTableView.tongue">
  <layout xsi:type="tongue:FXBorderPane" id="paneRoot">
    <left xsi:type="tongue:FXSplitPane">
      <children xsi:type="tongue:FXTableView" id="tableViewPerson" onSelectionChanged="">
        <columns id="columnName" text="Name" propertyValue="name" field="//@layout/@left/@children.0/@model/@fields.0"/>
        <columns id="columnFamilyname" text="Familyname" propertyValue="familyname" field="//@layout/@left/@children.0/@model/@fields.1"/>
        <columns id="columnIsMan" text="IsMan" propertyValue="isMan" field="//@layout/@left/@children.0/@model/@fields.2"/>
        <columns id="columnAge" text="Age" propertyValue="age" field="//@layout/@left/@children.0/@model/@fields.3"/>
        <model uri="de.dc.fx.tongue.demo.model" name="Person">
          <fields name="name" datatype="String"/>
          <fields name="familyname" datatype="String"/>
          <fields name="isMan" datatype="boolean"/>
          <fields name="age" datatype="int"/>
          <fields name="person" datatype="Person"/>
        </model>
      </children>
      <children xsi:type="tongue:FXForm" id="formTableViewPerson" columnNums="1">
        <controls xsi:type="tongue:FXFormTextField" onKeyReleased="onTextNameKeyReleased" id="textFieldName" text="Name"/>
        <controls xsi:type="tongue:FXFormTextField" onKeyReleased="onTextFamilynameKeyReleased" id="textFieldFamilyname" text="Familyname"/>
        <controls xsi:type="tongue:FXFormTextField" onKeyReleased="onTextIsManKeyReleased" id="textFieldIsMan" text="IsMan"/>
        <controls xsi:type="tongue:FXFormTextField" onKeyReleased="onTextAgeKeyReleased" id="textFieldAge" text="Age"/>
        <controls xsi:type="tongue:FXButton" onAction="onButtonCreateAction" id="buttonCreate" text="Create"/>
      </children>
    </left>
  </layout>
  <validations id="validatorNameNotEmpty" name="validatorNameNotEmpty" control="//@layout/@left/@children.1/@controls.0">
    <check xsi:type="tongue:FXCheckIsNotEmtpy"/>
  </validations>
  <validations id="validatorFamilynameNotEmpty" name="validatorFamilynameNotEmpty" control="//@layout/@left/@children.1/@controls.1">
    <check xsi:type="tongue:FXCheckIsNotEmtpy"/>
  </validations>
  <validations id="validatorIsManNotEmpty" name="validatorIsManNotEmpty" control="//@layout/@left/@children.1/@controls.2">
    <check xsi:type="tongue:FXCheckIsNotEmtpy"/>
  </validations>
  <validations id="validatorAgeNotEmpty" name="validatorAgeNotEmpty" control="//@layout/@left/@children.1/@controls.3">
    <check xsi:type="tongue:FXCheckIsNotEmtpy"/>
  </validations>
</tongue:FXTongue>

Adjusted controller for Person row creation

package de.dc.fx.tongue.demo.person.controller;
	
import de.dc.fx.tongue.demo.person.model.Person;
import de.dc.fx.tongue.demo.person.model.PersonTableViewControllerIDs;
import javafx.event.ActionEvent;
import javafx.scene.input.KeyEvent;
public class PersonTableViewController extends BasePersonTableViewController{


	@Override
	public void initializeDatabinding() {
		super.initializeDatabinding();
		
		BooleanBinding ageEmpty = model.textFieldAgeProperty().isEmpty();
		BooleanBinding nameEmpty = model.textFieldNameProperty().isEmpty();
		BooleanBinding familynameEmpty = model.textFieldFamilynameProperty().isEmpty();
		BooleanBinding isManEmpty = model.textFieldIsManProperty().isEmpty();
		
		BooleanBinding mandatoriesBinding = ageEmpty.or(nameEmpty).or(familynameEmpty).or(isManEmpty);
		buttonCreate.disableProperty().bind(mandatoriesBinding);		
	}

	public void onTextNameKeyReleased(KeyEvent e) {
		renderer.validateBy(PersonTableViewControllerIDs.validatorNameNotEmpty);
	}
	public void onTextFamilynameKeyReleased(KeyEvent e) {
		renderer.validateBy(PersonTableViewControllerIDs.validatorFamilynameNotEmpty);
	}
	public void onTextIsManKeyReleased(KeyEvent e) {
		renderer.validateBy(PersonTableViewControllerIDs.validatorIsManNotEmpty);
	}
	public void onTextAgeKeyReleased(KeyEvent e) {
		renderer.validateBy(PersonTableViewControllerIDs.validatorAgeNotEmpty);
	}
	
	public void onButtonCreateAction(ActionEvent e) {
		boolean validate = renderer.validate();
		if (validate) {
			String name = model.getTextFieldFamilyname();
			String familyname = model.getTextFieldFamilyname();
			boolean isMan = Boolean.parseBoolean(model.getTextFieldIsMan());
			int age = Integer.parseInt(model.getTextFieldAge());
			model.masterDataPerson().add(new Person(name, familyname, isMan, age));
		}else {
			System.out.println("Mandatory fields required");
		}
	}
}

Clone this wiki locally