1. 程式人生 > >JavaFX TableView使用和樣式設定

JavaFX TableView使用和樣式設定

1、新建fxml介面檔案,裡面就放置一個TableView

對應的Controller為TableViewTestController,css配置檔案為TableViewTestCss.css,表格設計三列分別為nameCol、ageCol和DescCol

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.layout.VBox?> <VBox alignment="CENTER" prefHeight="400.0" prefWidth="534.0" stylesheets="@../css/TableViewTestCss.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.nii.desktop.controller.TableViewTestController"> <children> <TableView
fx:id="studentTableView">
<columns> <TableColumn fx:id="nameCol" prefWidth="75.0" text="Name" /> <TableColumn fx:id="ageCol" prefWidth="75.0" text="Age" /> <TableColumn fx:id="descCol" prefWidth="75.0" text="Desc" /> </columns>
<columnResizePolicy> <TableView fx:constant="CONSTRAINED_RESIZE_POLICY" /> </columnResizePolicy> </TableView> </children> </VBox>

2、實體Studnet.java類
該類和表格的資料對應,有三個欄位,其中age是Integer型別

package com.nii.desktop.model.student;

import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;

/**
 * Created by wzj on 2018/1/7.
 */
public class Student
{
    private SimpleStringProperty name = new SimpleStringProperty();

    private SimpleIntegerProperty age = new SimpleIntegerProperty();

    private SimpleStringProperty desc = new SimpleStringProperty();

    public Student(String name, Integer age, String desc)
    {
        setName(name);
        setAge(age);
        setDesc(desc);
    }

    public String getName()
    {
        return name.get();
    }

    public SimpleStringProperty nameProperty()
    {
        return name;
    }

    public void setName(String name)
    {
        this.name.set(name);
    }

    public int getAge()
    {
        return age.get();
    }

    public SimpleIntegerProperty ageProperty()
    {
        return age;
    }

    public void setAge(int age)
    {
        this.age.set(age);
    }

    public String getDesc()
    {
        return desc.get();
    }

    public SimpleStringProperty descProperty()
    {
        return desc;
    }

    public void setDesc(String desc)
    {
        this.desc.set(desc);
    }
}

3、TableViewTestController在表格中初始化三行資料

將表格的資料對映到data中,通過更改data的值,就可以控制表格資料。

package com.nii.desktop.controller;

import com.nii.desktop.model.device.AdbDevice;
import com.nii.desktop.signal.event.ModeEvent;
import com.nii.desktop.signal.listener.ModeListener;
import com.nii.desktop.signal.type.DeviceEventType;
import com.nii.desktop.util.ui.ResourceLoader;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.control.TextField;
import javafx.scene.layout.Pane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;

import java.io.IOException;
import java.net.URL;
import java.util.EventListener;
import java.util.ResourceBundle;
import java.util.UUID;

/**
 * Created by wzj on 2017/1/4.
 */
public class MainUIController implements Initializable
{
    /**
     * 裝置物件
     */
    private AdbDevice adbDevice = new AdbDevice();

    /**
     * 數字框
     */
    @FXML
    private TextField numTextField;

    /**
     * 名字框
     */
    @FXML
    private TextField nameTextField;

    @FXML
    private WebView webview;

    @FXML
    private TextField urlTextField;

    /**
     * 容器
     */
    @FXML
    private TabPane tabPane;

    /**
     * web engine
     */
    WebEngine webEngine;



    /**
     * Called to initialize a controller after its root element has been
     * completely processed.
     *
     * @param location  The location used to resolve relative paths for the root object, or
     *                  <tt>null</tt> if the location is not known.
     * @param resources The resources used to localize the root object, or <tt>null</tt> if
     */
    @Override
    public void initialize(URL location, ResourceBundle resources)
    {
        registerListener();

        numTextField.setEditable(false);
        adbDevice.setDeviceNumber(0);

        webEngine = webview.getEngine();

        loadListViewTestTab();
        loadTableViewTestTab();

    }

    private void loadListViewTestTab()
    {
        FXMLLoader fxmlLoader = new FXMLLoader();
        fxmlLoader.setLocation(ResourceLoader.getFxmlResource("ListViewTest.fxml"));

        try
        {
            Pane pane = fxmlLoader.load();

            Tab listViewTab = new Tab("ListView");
            listViewTab.setContent(pane);
            tabPane.getTabs().add(listViewTab);

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

    private void loadTableViewTestTab()
    {
        FXMLLoader fxmlLoader = new FXMLLoader();
        fxmlLoader.setLocation(ResourceLoader.getFxmlResource("TableViewTest.fxml"));

        try
        {
            Pane pane = fxmlLoader.load();

            Tab tableViewTab = new Tab("TableView");
            tableViewTab.setContent(pane);
            tabPane.getTabs().add(tableViewTab);

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


    private void registerListener()
    {
        adbDevice.addChangeListener(DeviceEventType.NUMBER_CHANGE, new ModeListener()
        {
            @Override
            public void handleEvent(ModeEvent event)
            {
                numTextField.setText(String.valueOf(adbDevice.getDeviceNumber()));
            }
        });

        adbDevice.addChangeListener(DeviceEventType.NAME_CHANGE, new ModeListener()
        {
            @Override
            public void handleEvent(ModeEvent event)
            {
                nameTextField.setText(event.getSource().toString());
            }
        });
    }

    /**
     * 點選+按鈕
     */
    @FXML
    private void upButtonClickAction()
    {
        int num = adbDevice.getDeviceNumber() + 1;
        adbDevice.setDeviceNumber(num);
    }

    /**
     * 點選-按鈕
     */
    @FXML
    private void downButtonClickAction()
    {
        int num = adbDevice.getDeviceNumber() - 1;
        adbDevice.setDeviceNumber(num);

        adbDevice.setDeviceName(UUID.randomUUID().toString());
    }

    /**
     * 回車事件
     */
    @FXML
    private void urlTextFieldAction()
    {
        goBtClickAction();
    }

    /**
     * Go按鈕點選事件
     */
    @FXML
    private void goBtClickAction()
    {
        webEngine.load(urlTextField.getText());
    }
}

4、設定表格的CSS樣式
具體每一個css樣式的功能,請看下面檔案的註釋


/*設定表格頭靠左、字型大小,字型顏色*/
.table-view .column-header .label{
    -fx-alignment: center-left;
    -fx-font-family: "Arial";
    -fx-text-fill: rgba(68,68,68,0.96);
    -fx-font-size: 12;
}

/*設定表格頭高度*/
.table-view > .column-header-background{
    -fx-pref-height: 40;
}

/*設定每一列內容居中,每一行高度*/
.table-row-cell{
    -fx-cell-size: 45px;
    -fx-alignment: center;
}

#studentTableView{
    -fx-table-cell-border-color:transparent;
    -fx-border-color: white;
    -fx-alignment: center-left;
}

/*設定每一列內容居中*/
#studentTableView .table-column{
  -fx-alignment: center-left;
}

5、效果如下
這裡寫圖片描述