2 Replies Latest reply: May 1, 2012 1:17 AM by 934225 RSS

    Layout table columns

    804628
      I have a table created using tableview api. I created a table with 3 columns(First Name, Last Name and Email) and the last column (Email column) is split into 2(Primary Email and secondary Email). When I did this it created a table with 3 columns and the last column had 2 nested columns in it appearing next to each other. What I need is it possible to show the nested columns one below the other like secondary email appearing below the primary email column(As given in the below html file). Since I cannot attach a file, I am sending a html code which you can copy paste into a .html file and open in a browser to view it.

      The code to generate the a table with three column is given below.

      thanks.

      *1. Code To generate the a table with 3 columns*


      import javafx.application.Application;
      import javafx.beans.property.SimpleStringProperty;
      import javafx.collections.FXCollections;
      import javafx.collections.ObservableList;
      import javafx.event.ActionEvent;
      import javafx.event.EventHandler;
      import javafx.geometry.Insets;
      import javafx.scene.Group;
      import javafx.scene.Scene;
      import javafx.scene.control.Button;
      import javafx.scene.control.ContentDisplay;
      import javafx.scene.control.Label;
      import javafx.scene.control.TableCell;
      import javafx.scene.control.TableColumn;
      import javafx.scene.control.TableColumn.CellEditEvent;
      import javafx.scene.control.TableView;
      import javafx.scene.control.TextField;
      import javafx.scene.control.cell.PropertyValueFactory;
      import javafx.scene.input.KeyCode;
      import javafx.scene.input.KeyEvent;
      import javafx.scene.layout.HBox;
      import javafx.scene.layout.VBox;
      import javafx.scene.text.Font;
      import javafx.stage.Stage;
      import javafx.util.Callback;

      public class TableviewSample extends Application {

      private TableView<Person> table = new TableView<Person>();
      private final ObservableList<Person> data =
      FXCollections.observableArrayList(
      new Person("Jacob", "Smith", "jacob.smith@example.com","primary@email.com", "secondary@email.com"),
      new Person("Isabella", "Johnson", "isabella.johnson@example.com","primary@email.com", "secondary@email.com"),
      new Person("Ethan", "Williams", "ethan.williams@example.com","primary@email.com", "secondary@email.com"),
      new Person("Emma", "Jones", "emma.jones@example.com","primary@email.com", "secondary@email.com"),
      new Person("Michael", "Brown", "michael.brown@example.com","primary@email.com", "secondary@email.com")
      );
      final HBox hb = new HBox();

      public static void main(String[] args) {
      launch(args);
      }

      @Override public void start(Stage stage) {
      Scene scene = new Scene(new Group());
      stage.setTitle("Table View Sample");
      stage.setWidth(600);
      stage.setHeight(550);

      final Label label = new Label("Address Book");
      label.setFont(new Font("Arial", 20));

      table.setEditable(true);
      Callback<TableColumn, TableCell> cellFactory =
      new Callback<TableColumn, TableCell>() {
      public TableCell call(TableColumn p) {
      return new EditingCell();
      }
      };

      TableColumn firstNameCol = new TableColumn("First Name");
      firstNameCol.setCellValueFactory(
      new PropertyValueFactory<Person,String>("firstName")
      );
      firstNameCol.setCellFactory(cellFactory);
      firstNameCol.setOnEditCommit(
      new EventHandler<CellEditEvent<Person, String>>() {
      @Override public void handle(CellEditEvent<Person, String> t) {
      ((Person)t.getTableView().getItems().get(
      t.getTablePosition().getRow())).setFirstName(t.getNewValue());
      }
      });


      TableColumn lastNameCol = new TableColumn("Last Name");
      lastNameCol.setCellValueFactory(
      new PropertyValueFactory<Person,String>("lastName")
      );
      lastNameCol.setCellFactory(cellFactory);
      lastNameCol.setOnEditCommit(
      new EventHandler<CellEditEvent<Person, String>>() {
      @Override public void handle(CellEditEvent<Person, String> t) {
      ((Person)t.getTableView().getItems().get(
      t.getTablePosition().getRow())).setLastName(t.getNewValue());
      }
      });

      TableColumn firstEmailCol = new TableColumn("Primary");
      firstEmailCol.setCellValueFactory(
      new PropertyValueFactory<Person,String>("primaryEmail")
      );
      firstEmailCol.setPrefWidth(150);
      TableColumn secondEmailCol = new TableColumn("Secondary");
      secondEmailCol.setCellValueFactory(
      new PropertyValueFactory<Person,String>("secondaryEmail")
      );
      secondEmailCol.setPrefWidth(150);

      TableColumn emailCol = new TableColumn("Email");
      // emailCol.setMinWidth(200);
      // emailCol.setCellValueFactory(
      // new PropertyValueFactory<Person,String>("email")
      // );
      // emailCol.setCellFactory(cellFactory);
      // emailCol.setOnEditCommit(
      // new EventHandler<CellEditEvent<Person, String>>() {
      // @Override public void handle(CellEditEvent<Person, String> t) {
      // ((Person)t.getTableView().getItems().get(
      // t.getTablePosition().getRow())).setEmail(t.getNewValue());
      // }
      // });



      emailCol.getColumns().addAll(firstEmailCol, secondEmailCol);
      table.setItems(data);
      table.getColumns().addAll(firstNameCol, lastNameCol, emailCol);

      final TextField addFirstName = new TextField();
      addFirstName.setPromptText("Last Name");
      addFirstName.setMaxWidth(firstNameCol.getPrefWidth());
      final TextField addLastName = new TextField();
      addLastName.setMaxWidth(lastNameCol.getPrefWidth());
      addLastName.setPromptText("Last Name");
      final TextField addEmail = new TextField();
      addEmail.setMaxWidth(emailCol.getPrefWidth());
      addEmail.setPromptText("Email");

      final Button addButton = new Button("Add");
      addButton.setOnAction(new EventHandler<ActionEvent>() {
      @Override public void handle(ActionEvent e) {
      data.add(new Person(
      addFirstName.getText(),
      addLastName.getText(),
      addEmail.getText(), "primary@email.com", "secondary@email.com"
      ));
      addFirstName.setText("");
      addLastName.setText("");
      addEmail.setText("");
      }
      });

      hb.getChildren().addAll(addFirstName, addLastName, addEmail, addButton);
      hb.setSpacing(3);

      final VBox vbox = new VBox();
      vbox.setSpacing(5);
      vbox.setPadding(new Insets(10, 0, 0, 10));
      vbox.getChildren().addAll(label, table, hb);

      ((Group) scene.getRoot()).getChildren().addAll(vbox);

      stage.setScene(scene);
      stage.show();
      }

      public static class Person {
      private final SimpleStringProperty firstName;
      private final SimpleStringProperty lastName;
      private final SimpleStringProperty email;

      private final SimpleStringProperty primaryEmail;
      private final SimpleStringProperty secondaryEmail;

      private Person(String fName, String lName, String email, String prim, String secondary) {
      this.firstName = new SimpleStringProperty(fName);
      this.lastName = new SimpleStringProperty(lName);
      this.email = new SimpleStringProperty(email);
      this.primaryEmail = new SimpleStringProperty(prim);
      this.secondaryEmail = new SimpleStringProperty(secondary);
      }

      public String getFirstName() {
      return firstName.get();
      }
      public void setFirstName(String fName) {
      firstName.set(fName);
      }

      public String getLastName() {
      return lastName.get();
      }
      public void setLastName(String fName) {
      lastName.set(fName);
      }

      public String getEmail() {
      return email.get();
      }
      public void setEmail(String fName) {
      email.set(fName);
      }

      public String getPrimaryEmail() {
      return primaryEmail.get();
      }

      public String getSecondaryEmail() {
      return secondaryEmail.get();
      }

      public void setPrimaryEmail(String e) {
      primaryEmail.set(e);
      }
      public void setSecondaryEmail(String e) {
      secondaryEmail.set(e);
      }

      }

      class EditingCell extends TableCell<Person, String> {

      private TextField textField;

      public EditingCell() {
      }

      @Override
      public void startEdit() {
      super.startEdit();

      if (textField == null) {
      createTextField();
      }
      setGraphic(textField);
      setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
      textField.selectAll();
      }

      @Override
      public void cancelEdit() {
      super.cancelEdit();

      setText((String) getItem());
      setContentDisplay(ContentDisplay.TEXT_ONLY);
      }

      @Override
      public void updateItem(String item, boolean empty) {
      super.updateItem(item, empty);

      if (empty) {
      setText(null);
      setGraphic(null);
      } else {
      if (isEditing()) {
      if (textField != null) {
      textField.setText(getString());
      }
      setGraphic(textField);
      setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
      } else {
      setText(getString());
      setContentDisplay(ContentDisplay.TEXT_ONLY);
      }
      }
      }

      private void createTextField() {

      textField = new TextField(getString());
      textField.setMinWidth(this.getWidth() - this.getGraphicTextGap()*2);
      textField.setOnKeyPressed(new EventHandler<KeyEvent>() {
      @Override
      public void handle(KeyEvent t) {
      if (t.getCode() == KeyCode.ENTER) {
      commitEdit(textField.getText());
      } else if (t.getCode() == KeyCode.ESCAPE) {
      cancelEdit();
      }
      }
      });
      }
      private String getString() {
      return getItem() == null ? "" : getItem().toString();
      }
      }

      }

      Line: -----
      *2. I want the output to look like this. Place the below code in a html file and open it to see.*

      <html xmlns:v="urn:schemas-microsoft-com:vml"
      xmlns:o="urn:schemas-microsoft-com:office:office"
      xmlns:x="urn:schemas-microsoft-com:office:excel"
      xmlns="http://www.w3.org/TR/REC-html40">

      <head>
      <meta http-equiv=Content-Type content="text/html; charset=windows-1252">
      <meta name=ProgId content=Excel.Sheet>
      <meta name=Generator content="Microsoft Excel 14">
      <link id=Main-File >
      <link rel=File-List href=filelist.xml>
      <link rel=Stylesheet href=stylesheet.css>
      <style>
      <!--table
           {mso-displayed-decimal-separator:"\.";
           mso-displayed-thousand-separator:"\,";}
      @page
           {margin:.75in .7in .75in .7in;
           mso-header-margin:.3in;
           mso-footer-margin:.3in;}
      -->
      </style>
      </head>

      <body link=blue vlink=purple>

      <table border=0 cellpadding=0 cellspacing=0 width=923 style='border-collapse:
      collapse;table-layout:fixed;width:693pt'>
      <col width=110 style='mso-width-source:userset;mso-width-alt:4022;width:83pt'>
      <col width=143 style='mso-width-source:userset;mso-width-alt:5229;width:107pt'>
      <col width=301 style='mso-width-source:userset;mso-width-alt:11008;width:226pt'>
      <col width=64 span=3 style='width:48pt'>
      <col width=113 style='mso-width-source:userset;mso-width-alt:4132;width:85pt'>
      <col width=64 style='width:48pt'>
      <tr height=20 style='height:15.0pt'>
      <td height=20 width=110 style='height:15.0pt;width:83pt'></td>
      <td width=143 style='width:107pt'></td>
      <td width=301 style='width:226pt'></td>
      <td width=64 style='width:48pt'></td>
      <td width=64 style='width:48pt'></td>
      <td width=64 style='width:48pt'></td>
      <td width=113 style='width:85pt'></td>
      <td width=64 style='width:48pt'></td>
      </tr>
      <tr height=21 style='height:15.75pt'>
      <td height=21 style='height:15.75pt'></td>
      <td></td>
      <td>Email</td>
      <td colspan=5 style='mso-ignore:colspan'></td>
      </tr>
      <tr height=41 style='height:30.75pt'>
      <td height=41 class=xl71 style='height:30.75pt'>First Name</td>
      <td class=xl72 style='border-left:none'>Last Name</td>
      <td class=xl73 width=301 style='border-left:none;width:226pt'>Primary<br>
      Secondary</td>
      <td colspan=5 style='mso-ignore:colspan'></td>
      </tr>
      <tr height=20 style='height:15.0pt'>
      <td rowspan=2 height=40 class=xl75 style='border-bottom:.5pt solid black;
      height:30.0pt;border-top:none'>Jacob</td>
      <td rowspan=2 class=xl75 style='border-bottom:.5pt solid black;border-top:
      none'>Smith</td>
      <td class=xl67 style='border-top:none;border-left:none'><a
      href="mailto:primary@email.com" target="_parent">primary@email.com</a></td>
      <td colspan=5 style='mso-ignore:colspan'></td>
      </tr>
      <tr height=20 style='height:15.0pt'>
      <td height=20 class=xl68 style='height:15.0pt;border-top:none;border-left:
      none'>secondary@email.com</td>
      <td colspan=5 style='mso-ignore:colspan'></td>
      </tr>
      <tr height=20 style='height:15.0pt'>
      <td rowspan=2 height=40 class=xl77 style='border-bottom:.5pt solid black;
      height:30.0pt;border-top:none'>Isabella</td>
      <td rowspan=2 class=xl77 style='border-bottom:.5pt solid black;border-top:
      none'>Johnson</td>
      <td class=xl69 style='border-top:none;border-left:none'><a
      href="mailto:primary@email.com" target="_parent">primary@email.com</a></td>
      <td colspan=5 style='mso-ignore:colspan'></td>
      </tr>
      <tr height=20 style='height:15.0pt'>
      <td height=20 class=xl70 style='height:15.0pt;border-top:none;border-left:
      none'>secondary@email.com</td>
      <td colspan=5 style='mso-ignore:colspan'></td>
      </tr>
      <tr height=20 style='height:15.0pt'>
      <td rowspan=2 height=41 class=xl75 style='border-bottom:.5pt solid black;
      height:30.75pt;border-top:none'>Ethan</td>
      <td rowspan=2 class=xl75 style='border-bottom:.5pt solid black;border-top:
      none'>Williams</td>
      <td class=xl67 style='border-top:none;border-left:none'><a
      href="mailto:primary@email.com" target="_parent">primary@email.com</a></td>
      <td colspan=5 style='mso-ignore:colspan'></td>
      </tr>
      <tr height=21 style='height:15.75pt'>
      <td height=21 class=xl74 style='height:15.75pt;border-top:none;border-left:
      none'>secondary@email.com</td>
      <td colspan=5 style='mso-ignore:colspan'></td>
      </tr>
      <tr height=21 style='height:15.75pt'>
      <td height=21 colspan=8 style='height:15.75pt;mso-ignore:colspan'></td>
      </tr>
      <tr height=80 style='height:60.0pt;mso-xlrowspan:4'>
      <td height=80 colspan=8 style='height:60.0pt;mso-ignore:colspan'></td>
      </tr>
      <tr height=20 style='height:15.0pt'>
      <td height=20 colspan=6 style='height:15.0pt;mso-ignore:colspan'></td>
      <td colspan=2 class=xl65></td>
      </tr>
      <tr height=120 style='height:90.0pt;mso-xlrowspan:6'>
      <td height=120 colspan=8 style='height:90.0pt;mso-ignore:colspan'></td>
      </tr>
      <tr height=20 style='height:15.0pt'>
      <td height=20 colspan=6 style='height:15.0pt;mso-ignore:colspan'></td>
      <td colspan=2 class=xl65></td>
      </tr>
      <tr height=20 style='height:15.0pt'>
      <td height=20 colspan=6 style='height:15.0pt;mso-ignore:colspan'></td>
      <td class=xl66 width=113 style='width:85pt'></td>
      <td></td>
      </tr>

      </table>

      </body>

      </html>
      Line: -----