Skip to content

Confgure ListView & Form

Jump to bottom
chqu1012 edited this page Jul 28, 2020 · 1 revision

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

This example includes the following points

ListView with Person Model

  • ListView
  • Formular
  • Validation on empty TextFields
  • Validation on Integer TextField (Age)
  • Validation on Boolean TextField (Gender)

Tongue Framework Overview

Content of the Tongue File

Here is how to describe the ListView with Formular Tongue Framework Overview

  • Save this file unter this path with the name "./resources/de/dc/fx/tongue/demo/person/PersonView.tongue".
<?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="PersonViewController" modelName="PersonViewModel" tonguePath="./resources/de/dc/fx/tongue/demo/person/PersonView.tongue">
  <layout xsi:type="tongue:FXBorderPane" id="paneRoot">
    <center xsi:type="tongue:FXSplitPane" id="splitPaneRoot">
      <children xsi:type="tongue:FXListView" id="listViewPerson">
        <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"/>
        </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">
          <bindings xsi:type="tongue:FXFunctionBooleanProperty" objectToBind="//@layout/@center/@children.1/@controls.4" function="When">
            <locgialBinding xsi:type="tongue:FXOr">
              <binding xsi:type="tongue:FXFunctionStringProperty" objectToBind="//@layout/@center/@children.1/@controls.3" function="IsEmpty"/>
            </locgialBinding>
            <locgialBinding xsi:type="tongue:FXOr">
              <binding xsi:type="tongue:FXFunctionStringProperty" objectToBind="//@layout/@center/@children.1/@controls.1" function="IsEmpty"/>
            </locgialBinding>
            <locgialBinding xsi:type="tongue:FXOr">
              <binding xsi:type="tongue:FXFunctionStringProperty" objectToBind="//@layout/@center/@children.1/@controls.2" function="IsEmpty"/>
            </locgialBinding>
            <locgialBinding xsi:type="tongue:FXOr">
              <binding xsi:type="tongue:FXFunctionStringProperty" objectToBind="//@layout/@center/@children.1/@controls.0" function="IsEmpty"/>
            </locgialBinding>
          </bindings>
          <bindings xsi:type="tongue:FXFunctionBooleanProperty" objectToBind="//@layout/@center/@children.1/@controls.4" field="visible">
            <locgialBinding xsi:type="tongue:FXAnd">
              <binding xsi:type="tongue:FXFunctionStringProperty" objectToBind="//@layout/@center/@children.1/@controls.3" function="IsNotEmpty"/>
            </locgialBinding>
            <locgialBinding xsi:type="tongue:FXAnd">
              <binding xsi:type="tongue:FXFunctionStringProperty" objectToBind="//@layout/@center/@children.1/@controls.1" function="IsNotEmpty"/>
            </locgialBinding>
          </bindings>
        </controls>
      </children>
    </center>
  </layout>
  <validations id="validatorNameNotEmpty" name="validatorNameNotEmpty" control="//@layout/@center/@children.1/@controls.0">
    <check xsi:type="tongue:FXCheckIsNotEmtpy"/>
  </validations>
  <validations id="validatorFamilynameNotEmpty" name="validatorFamilynameNotEmpty" control="//@layout/@center/@children.1/@controls.1">
    <check xsi:type="tongue:FXCheckIsNotEmtpy"/>
  </validations>
  <validations id="validatorIsManNotEmpty" name="validatorIsManNotEmpty" control="//@layout/@center/@children.1/@controls.2">
    <check xsi:type="tongue:FXCheckIsNotEmtpy"/>
  </validations>
  <validations id="validatorAgeNotEmpty" name="validatorAgeNotEmpty" control="//@layout/@center/@children.1/@controls.3">
    <check xsi:type="tongue:FXCheckIsNotEmtpy"/>
  </validations>
  <validations id="validatorAgeIsNumeric" name="validatorAgeIsNumeric" control="//@layout/@center/@children.1/@controls.3">
    <check xsi:type="tongue:FXCheckIsInteger"/>
  </validations>
</tongue:FXTongue>
  • Open this file in the Tongue TreeViewer Editor
  • Generate BaseController, Controller, Binding Model, Model and Id classes (or Generate All classes)
  • Enhanced the controller class with row creation content.

Adjusted controller for Person row creation

Tongue Framework Overview

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.PersonViewControllerIDs;
import javafx.event.ActionEvent;
import javafx.scene.input.KeyEvent;
public class PersonViewController extends BasePersonViewController{

	public void onTextNameKeyReleased(KeyEvent e) {
		renderer.validateBy(PersonViewControllerIDs.validatorNameNotEmpty);
	}
	public void onTextFamilynameKeyReleased(KeyEvent e) {
		renderer.validateBy(PersonViewControllerIDs.validatorFamilynameNotEmpty);
	}
	public void onTextIsManKeyReleased(KeyEvent e) {
		renderer.validateBy(PersonViewControllerIDs.validatorIsManNotEmpty);
	}
	public void onTextAgeKeyReleased(KeyEvent e) {
		renderer.validateBy(PersonViewControllerIDs.validatorAgeNotEmpty);
		renderer.validateBy(PersonViewControllerIDs.validatorAgeIsNumeric);
	}
	
	public void onButtonCreateAction(ActionEvent e) {
		boolean validate = renderer.validate();
		if (validate) {
			Person person = new Person();
			person.setAge(Integer.parseInt(model.getTextFieldAge()));
			person.setFamilyname(model.getTextFieldFamilyname());
			person.setIsMan(Boolean.parseBoolean(model.getTextFieldIsMan()));
			person.setName(model.getTextFieldName());
			model.masterDataPerson().add(person);
		}
	}
}

Define custom cell factory

To display the desired text a custom cell listview should be created and set in the tongue file.

Tongue Framework Overview

Tongue Framework Overview

The ListCell class

package de.dc.fx.tongue.demo.person.cell;

import de.dc.fx.tongue.demo.person.model.Person;
import javafx.scene.control.ListCell;

public class PersonListCell extends ListCell<Person>{

	@Override
	protected void updateItem(Person item, boolean empty) {
		super.updateItem(item, empty);
		if (item == null || empty) {
			setText(null);
			setGraphic(null);
		}else {
			setText(item.getName()+", "+item.getFamilyname());
		}
	}
}
Clone this wiki locally