JavaFX Tutorial 2

JavaFX 2 Tutorial - Part 2: Model and TableView

Tutorial 2

දැනට කරපු Tutorials  බලාගන්න බැරි උනානම් පහල තියන link වලට ගිහිල්ලා ඒ දේවල් බලලා  මේ Tutorial එකට එන්න.

Part 0 : Introduction
Part 1 : Scene Builder
Part 2 : Model and TableView

Part 3 : Interacting with User

Part 4 : CSS Styling

Part 5 : Storing Data as XML

Part 6 : Statistic Charts

Part 7 : Deployment

Topics in Part 2

Model Class එකක් Create කිරීම.

Model එකක් Create කිරීම.
Model Class එක තුල ObservableList එකක් Use කිරීම.
Controllers Class යොදාගෙන TableView එකක් තුල දක්ත නිරූපනය කිරීම. 

Create the Model Class

මේකෙදි අපි Employees කිහිප දෙනෙකුගේ Address Save කරන Project එකක් කියල හිතමු.මේකට අවශ්‍යය වෙනවා Person ලා විශාල ප්‍රමානයක්.එක Person කෙනෙක්ගේ Address එකක් ගත්තම ඒක තුල First Name, Last Name,Street, Postal Code,City, Birthday එක වගේ ගොඩාක් දේවල් ඇතුලත් වෙනවා.ඒ Model Class එක Person කියලා නම් කරමු.ඒ Class එක model Package එක තුල Create කරමු.(ch.makery.address.model)

Person.java Class එකට  පහල තියන Code එක Copy කරගන්න.

package ch.makery.address.model;

import java.util.Calendar;

/**
 * Model class for a Person.
 *
 * @author Thilina Chamika(University of Colombo School Of Computing)
 */
public class Person {

    private String firstName;
    private String lastName;
    private String street;
    private int postalCode;
    private String city;
    private Calendar birthday;

    /**
     * Default constructor.
     */
    public Person() {
    }

    /**
     * Constructor with some initial data.
     * 
     * @param firstName
     * @param lastName
     */
    public Person(String firstName, String lastName) {
        this.firstName = firstName;
        this.lastName = lastName;

        // some initial dummy data
        this.street = "some street";
        this.postalCode = 1234;
        this.city = "some city";
        this.birthday = Calendar.getInstance();
    }

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getStreet() {
        return street;
    }

    public void setStreet(String street) {
        this.street = street;
    }

    public int getPostalCode() {
        return postalCode;
    }

    public void setPostalCode(int postalCode) {
        this.postalCode = postalCode;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    public Calendar getBirthday() {
        return birthday;
    }

    public void setBirthday(Calendar birthday) {
        this.birthday = birthday;
    }
}

A List of Persons

දැන් Person List එකක් හදන්න යන්නේ. MainApp.java Class එක ඇතුලේ ObservableList එකක් හදලා ඒකට Data ටිකක් Add කරන්න තමයි දැන් හදන්නේ.

ObservableList

මේක Arrya එකක්.Array එකක් අපි සාමාන්‍යයයෙන් Use කරන්නේ දක්ත Save කරලතියාගන්න. MainApp.java එක තුල ObservableList එකක් හදලා ඒකට Data Add කරන විදිය පහල තියනවා.ඒ Code එක MainApp.java Class එකට Copy කරන්න.

MainApp.java

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;

  // ...

    /**
     * The data as an observable list of Persons.
     */
    private ObservableList<Person> personData = FXCollections.observableArrayList();

    /**
     * Constructor
     */
    public MainApp() {
        // Add some sample data
        personData.add(new Person("Thilina", "Chamika"));
        personData.add(new Person("Saman", "Kumara"));
        personData.add(new Person("Hansini", "Indrachapa"));
        personData.add(new Person("Madhawa", "Thusith"));
        personData.add(new Person("Ravi", "Hansa"));
        personData.add(new Person("Heshan", "Harsha"));
        personData.add(new Person("Sisira", "Jayewardhane"));
        personData.add(new Person("Dulanka", "Senewirathna"));
        personData.add(new Person("Nethmi", "Nishadi"));
    }

    /**
     * Returns the data as an observable list of Persons. 
     * @return
     */
    public ObservableList<Person> getPersonData() {
        return personData;
    }
// ... 

අපිට අවශ්‍යය වෙලාවට Person කෙනෙක් ගන්න උවමනා උනාම අපි getPersonData() කියන method එකට call කලාම හරි.

The PersonOverviewController

හරි දැන් අපිට Controller Class එක හදාගන්න යන්නේ අපි හදාගත්ත PersonOverview.fxml UI එකට.

1. Java Class එකක් හදන්න PersonOverviewController.java. නමින්.
2. UI එකෙ තියන Fields වලට ගැලපෙන විදියට instance variables ටිකක් අපි හදාගන්න් ඕන.

PersonOverviewController.java

package ch.makery.address.view;

import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import ch.makery.address.MainApp;
import ch.makery.address.model.Person;

public class PersonOverviewController {
    @FXML
    private TableView<Person> personTable;
    @FXML
    private TableColumn<Person, String> firstNameColumn;
    @FXML
    private TableColumn<Person, String> lastNameColumn;

    @FXML
    private Label firstNameLabel;
    @FXML
    private Label lastNameLabel;
    @FXML
    private Label streetLabel;
    @FXML
    private Label postalCodeLabel;
    @FXML
    private Label cityLabel;
    @FXML
    private Label birthdayLabel;

    // Reference to the main application.
    private MainApp mainApp;

    /**
     * The constructor.
     * The constructor is called before the initialize() method.
     */
    public PersonOverviewController() {
    }

    /**
     * Initializes the controller class. This method is automatically called
     * after the fxml file has been loaded.
     */
    @FXML
    private void initialize() {
        // Initialize the person table with the two columns.
        firstNameColumn.setCellValueFactory(cellData -> cellData.getValue().firstNameProperty());
        lastNameColumn.setCellValueFactory(cellData -> cellData.getValue().lastNameProperty());
    }

    /**
     * Is called by the main application to give a reference back to itself.
     * 
     * @param mainApp
     */
    public void setMainApp(MainApp mainApp) {
        this.mainApp = mainApp;

        // Add observable list data to the table
        personTable.setItems(mainApp.getPersonData());
    }
}

• මෙකේදි අපි හදන හැම Field එකකටම සහ Methods වලට @FXML කොටස දැමීම අනිවාර්‍යයි.
• initialize() Method එක Automaticaly Call වෙනවා අපේ UI එක Load වෙලා ඉවර උනාම.
• අපි මෙහිදි Lambdas Functions යොදාගෙන තියනවා Table එකෙ Columns වලට Data ගැනීමට.

firstNameColumn.setCellValueFactory(cellData -> cellData.getValue().firstNameProperty());

මේ කොටසෙන් කරලා තියෙන්නේ ඒක.

Connecting MainApp with the PersonOverviewController

setMainApp(...) method එකට අපි MainApp class එකේ ඉඳල Call කරන්න ඕන.ඒ Call කරන වෙලාවෙදි අපේ  UI එක Load වෙලා Person Data ටික අපේ Table එකේ Display  වෙන්න ඕන.ඒක් කරන්නෙ අපි Constructor එක පහල විදියට Code එක හදාගන්න ඕනී.

showPersonOverview() method එක පහලා Code එකේ විදියට re-place කරන්න.

/**
 * Shows the person overview inside the root layout.
 */
public void showPersonOverview() {
    try {
        // Load person overview.
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(MainApp.class.getResource("view/PersonOverview.fxml"));
        AnchorPane personOverview = (AnchorPane) loader.load();
        
        // Set person overview into the center of root layout.
        rootLayout.setCenter(personOverview);

        // Give the controller access to the main app.
        PersonOverviewController controller = loader.getController();
        controller.setMainApp(this);

    } catch (IOException e) {
        e.printStackTrace();
    }
}

Hook the View to the Controller

දැන් අපේ  PersonOverview.fxml  එකට කියන්න ඕනී අපේ Controller එක මොකද්ද කියලා.

1. Open PersonOverview.fxml with the SceneBuilder.
2. Open the Controller group on the left side and select the PersonOverviewController as controller class.(මේ පිංතූරේ විදියට අපේ Controller Class එක ඔකද්ද කියලා කියන්න ඕන.)
   
3. Select the TableView in the Hierarchy group and choose in the Code group the personTable field as fx:id.(අපේ Class එකේ තියන instance variable වල නම fx:id එකට දාන්න ඕන.)
   
4. Do the same for the columns and select firstNameColumn and lastNameColumn as fx:id respectively.
5. For each label in the second column, choose the corresponding fx:id.
   
6. Important:  refresh the entire AddressApp project (F5). 

Start the Application

දැන් අපේ App එක Run කලාම මේ Blog එකේ මුලින්ම තියන screenshot එකේ විදියට පෙන්න ඕන.

What's Next?

ඊලගට Tutorial එකෙන්  Part 3: Interacting with User ගැන කතා කරනවා.