发布时间：2012年09月10日 11时19分05秒
属性：程序Web开发 > Oracle/Sun
访问次数：88436
JavaFx2.2 TableView数据库绑定
在Javafx2.0起，可以实现用Fxml控制Javafx的UI界面设计，而后台实现Java控制程序的数据逻辑编写，同时在Javafx2.0中也带来了大量的UI组件，已不再是之前JavaFX Script形式。通过Java语言开发后台程序，Fxml控制前台UI界面，这为Javafx开发复杂应用奠定了坚固的基础。
在JavaFx2.0开始，JavaFx可以分为两种开发方式，一种JavaFx FXML Application模式，即通过Fxml定义前台UI界面可以通过样式定义，前台和后台Java分开编写，一种则是JavaFx Application，即通过后台Java 定义JavaFx的组建加载到Scene容器中来完成。在本文中将介绍JavaFx的 TableView数据绑定原理，文章中会展示JavaFx FXML Application和JavaFx Application两种模式开发同样的效果。本文示例IDE环境为 NetBeans IDE 7.1，JavaFx 2.2。
JavaFx FXML Application TableView数据绑定
在NetBeans IDE中新建项目，选择JavaFX，然后选择JavaFx FXML Application，点下一步给项目命名点击完成即建立了JavaFx FXML Appliaction的工程文件，如下图。
在默认Fxml文件中，Javafx程序已经建立一个Hell world程序，在<AnchorPane>中默认放入了一个按钮Button和一个Label，触发Button事件，将Label值赋为Hell World。
将 <AnchorPane>宽高设置为600比400 即 prefHeight="400" prefWidth="600"中放入。然后加入 <TableView>组建 到<AnchorPane>中，将TableView的宽高设为prefHeight="300" prefWidth="480"，组件在窗体的位置由layoutX和layoutY控制，在这都设为30；在TableView中潜入<columns>用以设置列，<TableColumn>用来不设置列属性。FXML 详细代码如下。
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.control.cell.*?>
<?import javafx.collections.*?>
<?import fxmltableview.*?>
<!--JavaFx2.2 TableView数据库绑定-->
<!--Copyright (C) 遗昕|weisim3.com -09.10.2012-->
<AnchorPane id="AnchorPane" prefHeight="400" prefWidth="600"
xmlns:fx="http://javafx.com/fxml"
fx:controller="fxmltableview120910.Sample">
<children>
<TableView id="tableView" fx:id="tableView" GridPane.columnIndex="0"
layoutX="30" layoutY="30" prefHeight="300" prefWidth="480"
GridPane.rowIndex="1">
<columns>
<TableColumn fx:id="UserId" text="UserId" prefWidth="100">
<cellValueFactory>
<PropertyValueFactory property="UserId" />
</cellValueFactory>
</TableColumn>
<TableColumn fx:id="UserName" text="UserName" prefWidth="100">
<cellValueFactory>
<PropertyValueFactory property="UserName" />
</cellValueFactory>
</TableColumn>
<TableColumn fx:id="Mail" text="Email Address" prefWidth="200">
<cellValueFactory>
<PropertyValueFactory property="Email" />
</cellValueFactory>
</TableColumn>
<TableColumn fx:id="City" text="City" >
<cellValueFactory>
<PropertyValueFactory property="City" />
</cellValueFactory>
</TableColumn>
</columns>
</TableView>
</children>
</AnchorPane>
效果如下
前台UI界面完整了一个用户信息列表，接着完成数据绑定。建立UserInfo类，构建用户的基本属性UserId、UserName、Email、City信息。定义一个private final ObservableList<UserInfo> myData用以建立用户列表，将UserInfo属性装载到ObservableList<UserInfo>中。定义 private TableView tableView;（必须加@FXML修饰） tabbleView和前台FXML的TableView的fx:id="tableView"对应。
package fxmltableview120910;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
/** *//**
* Javafx2.2 TableView - 遗昕|weisim3.com
* @author 遗昕|weisim3.com -09.10.2012
*/
public class Sample implements Initializable ...{
// @FXML
// private Label label;
@FXML
private TableView tableView;
private final ObservableList<UserInfo> myData =
FXCollections.observableArrayList(
new UserInfo(1, "Cheng", "Cheng005@example.com", "Bejing"),
new UserInfo(2, "老A", "老A@example.com", "Shanghai"),
new UserInfo(3, "张某", "张@example.com", "Taipei"),
new UserInfo(4, "Sir", "dd@example.com", "Hongkong"),
new UserInfo(5, "老E", "E@example.com", "Guangzhou"),
new UserInfo(6, "老C", "CC@example.com", "Beijing"));
@Override
public void initialize(URL url, ResourceBundle rb) ...{
// TODO
tableView.setEditable(true);
tableView.setItems(myData);
//tableView.getColumns().addAll(firstNameCol, lastNameCol, emailCol);
//tableView.getColumns().addAll(UserId, UserName, Mail);
}
}
绑定数据最终效果如下
JavaFX Application模式下的TableView数据绑定
文章开始也说了JavaFX Application模式是通过Java直接定义JavaFx的组件，以及设置组件的属性。数据绑定原理和JavaFx FXML Appliaction同样只是两种不同模式，在此不作描述。在NetBeans IDE中新建项目选择JavaFx的JavaFX Application即可。JavaFX Application模式下TableView数据绑定的详细代码。
package javafxapptableview0910;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.stage.Stage;
/** *//**
* Javafx2.2 TableView - 遗昕|weisim3.com
* @author 遗昕|weisim3.com -09.10.2012
*/
public class JavaFXAppTableView0910 extends Application ...{
/** *//**
* @param args the command line arguments
*/
public static void main(String[] args) ...{
Application.launch(args);
}
private TableView tableView;
private final ObservableList<UserInfo> myData =
FXCollections.observableArrayList(
new UserInfo(1, "Cheng", "Cheng005@example.com", "Bejing"),
new UserInfo(2, "老A", "老A@example.com", "Shanghai"),
new UserInfo(3, "张某", "张@example.com", "Taipei"),
new UserInfo(4, "Mr.Liu", "dd@example.com", "Hongkong"),
new UserInfo(5, "老E", "E@example.com", "Guangzhou"),
new UserInfo(6, "老C", "CC@example.com", "Beijing"));
@Override
public void start(Stage primaryStage) ...{
primaryStage.setTitle("Javafx2.2 TableView - 遗昕|weisim3.com");
tableView = new TableView();
Group root = new Group();
Scene scene = new Scene(root, 600, 400);
tableView.setLayoutX(30);
tableView.setLayoutY(30);
TableColumn UserId = new TableColumn("User Id");
UserId.setMinWidth(100);
UserId.setCellValueFactory(
new PropertyValueFactory<UserInfo, String>("UserId"));
TableColumn UserName = new TableColumn("User Name");
UserName.setMinWidth(100);
UserName.setCellValueFactory(
new PropertyValueFactory<UserInfo, String>("UserName"));
TableColumn Email = new TableColumn("Email");
Email.setMinWidth(200);
Email.setCellValueFactory(
new PropertyValueFactory<UserInfo, String>("Email"));
TableColumn City = new TableColumn("City");
//City.setMinWidth(200);
City.setCellValueFactory(
new PropertyValueFactory<UserInfo, String>("City"));
tableView.setItems(myData);
tableView.getColumns().addAll(UserId, UserName, Email, City);
tableView.prefWidth(480);
tableView.prefHeight(300);
tableView.setMinHeight(300);
tableView.setMaxHeight(300);
root.getChildren().add(tableView);
primaryStage.setScene(scene);
primaryStage.show();
}
}
本文示通过JavaFx FXML Application和JavaFX Application两种模式，可以清楚的了解TableView控件组件的原理，其中还有一个重要数据ObservableList的泛型数据，这在JavaFX2.0的所有数据组件的数据绑定格式都是这种泛型数据结构，通过 FXCollections.observableArrayList将数据列表载入到组建中显示。ObservableList Oracle官方参考介绍：http://docs.oracle.com/javafx/2/api/index.html；TableView 官方英文参考http://docs.oracle.com/javafx/2/ui_controls/table-view.htm。
文章版权归属weisim3.com所有,未经书面版权许可同意，不得私自转载(或做修改转载)，源文件示例仅供学习使用，更不要出于商业用途或印刷出版发行！否则将追究其相关法律责任，版权联系QQ：729260499。
