JavaFX 列表就像 SceneBuilder 中的库 [英] JavaFX list like the library in the SceneBuilder

问题描述

我试图在 SceneBuilder 中重新创建 Library-List 的外观，但我不知道我需要采用哪个元素.

如何重新创建此列表?

解决方案

这是一个使用 ControlsFx Awesome Fonts 的草稿.

<块引用>

主要内容:

import javafx.application.Application;导入 javafx.fxml.FXMLLoader;导入 javafx.scene.Parent;导入 javafx.scene.Scene;导入 javafx.stage.Stage;/**** @作者 blj0011*/公共类 JavaFXApplication73 扩展应用程序{@覆盖public void start(Stage stage) 抛出异常{父根 = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));场景场景 = 新场景(根)；stage.setScene(场景);舞台表演()；}/*** @param args 命令行参数*/public static void main(String[] args){发射(参数)；}}

<块引用>

FXML:

<儿童><Label fx:id="label" layoutX="126" layoutY="120" minHeight="16" minWidth="69"/><Accordion prefHeight="200.0" prefWidth="320.0"><窗格><TitledPane animation="false" text="untitled 1"><内容><AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0"><儿童><ListView fx:id="lvOne" layoutX="-19.0" layoutY="-50.0" prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"/></儿童></AnchorPane></内容></标题窗格><TitledPane animation="false" text="untitled 2"><内容><AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0"/></内容></标题窗格><TitledPane animation="false" text="untitled 3"><内容><AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0"/></内容></标题窗格></窗格></手风琴></儿童></AnchorPane>

<块引用>

控制器:

import java.net.URL;导入 java.util.ResourceBundle;导入 javafx.collections.FXCollections;导入 javafx.collections.ObservableList;导入 javafx.fxml.FXML;导入 javafx.fxml.Initializable;导入 javafx.scene.control.ListCell;导入 javafx.scene.control.ListView;导入 javafx.util.Callback;导入 org.controlsfx.glyphfont.FontAwesome；/**** @作者 blj0011*/公共类 FXMLDocumentController 实现 Initializable{@FXML ListView lvOne;ObservableListlistViewData = FXCollections.observableArrayList();@覆盖公共无效初始化(URL url，ResourceBundle rb){//去做lvOne.setItems(listViewData);lvOne.setCellFactory(new Callback, ListCell>() {@覆盖public ListCell调用(ListView listView){返回新的 ListViewCell();}});CustomItem ci = new CustomItem();ci.setLabelGlyph(FontAwesome.Glyph.FLASH);ci.setString("条目一");listViewData.add(ci);CustomItem ci2 = new CustomItem();ci2.setLabelGlyph(FontAwesome.Glyph.AMBULANCE);ci2.setString("条目二");listViewData.add(ci2);}}

<块引用>

ListView 单元格:

import javafx.scene.control.Label;导入 javafx.scene.control.ListCell;/**** @作者 blj0011*/公共类 ListViewCell 扩展了 ListCell{@覆盖public void updateItem(CustomItem item, boolean empty){super.updateItem(item, 空);如果(空 || 项目 == 空){设置图形(空)；设置文本(空)；}别的{标签标签 = item.getLabel();设置图形(标签)；}}}

<块引用>

自定义项:

import javafx.scene.control.Label;导入 org.controlsfx.glyphfont.FontAwesome；导入 org.controlsfx.glyphfont.FontAwesome.Glyph；/**** @作者 blj0011*/公共类自定义项{私有最终标签标签=新标签()；public void setLabelGlyph(Glyph glyph){FontAwesome fa = new FontAwesome();label.setGraphic(fa.create(glyph));}public void setString(String string){label.setText(string);}公共标签 getLabel(){退货标签；}}

I was trying to recreate the look of the Library-List within the SceneBuilder, but I don't have any idea, which element I need to take.

How can I recreate this list?

解决方案

Here is a rough draft using ControlsFx Awesome Fonts.

Main:

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

/**
 *
 * @author blj0011
 */
public class JavaFXApplication73 extends Application
{    
    @Override
    public void start(Stage stage) throws Exception
    {
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));

        Scene scene = new Scene(root);

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

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args)
    {
        launch(args);
    }    
}

FXML:

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

<?import javafx.scene.control.Accordion?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.111" fx:controller="javafxapplication73.FXMLDocumentController">
    <children>
        <Label fx:id="label" layoutX="126" layoutY="120" minHeight="16" minWidth="69" />
      <Accordion prefHeight="200.0" prefWidth="320.0">
        <panes>
          <TitledPane animated="false" text="untitled 1">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
                     <children>
                        <ListView fx:id="lvOne" layoutX="-19.0" layoutY="-50.0" prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
                     </children>
                  </AnchorPane>
            </content>
          </TitledPane>
          <TitledPane animated="false" text="untitled 2">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
            </content>
          </TitledPane>
          <TitledPane animated="false" text="untitled 3">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
            </content>
          </TitledPane>
        </panes>
      </Accordion>
    </children>
</AnchorPane>

Controller:

import java.net.URL;
import java.util.ResourceBundle;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.util.Callback;
import org.controlsfx.glyphfont.FontAwesome;

/**
 *
 * @author blj0011
 */
public class FXMLDocumentController implements Initializable
{

    @FXML ListView lvOne;

    ObservableList<CustomItem> listViewData = FXCollections.observableArrayList();

    @Override
    public void initialize(URL url, ResourceBundle rb)
    {
        // TODO
        lvOne.setItems(listViewData);
        lvOne.setCellFactory(new Callback<ListView<CustomItem>, ListCell<CustomItem>>() {
            @Override
            public ListCell<CustomItem> call(ListView<CustomItem> listView)
            {
                return new ListViewCell();
            }
        });

        CustomItem ci = new CustomItem();        
        ci.setLabelGlyph(FontAwesome.Glyph.FLASH);
        ci.setString("entry one");
        listViewData.add(ci);

        CustomItem ci2 = new CustomItem();        
        ci2.setLabelGlyph(FontAwesome.Glyph.AMBULANCE);
        ci2.setString("entry two");
        listViewData.add(ci2);
    }    

}

ListView Cell:

import javafx.scene.control.Label;
import javafx.scene.control.ListCell;

/**
 *
 * @author blj0011
 */
public class ListViewCell extends ListCell<CustomItem>
{
    @Override
    public void updateItem(CustomItem item, boolean empty)
    {         
       super.updateItem(item, empty);

        if (empty || item == null) 
        {
            setGraphic(null);
            setText(null);
        } 
        else 
        {
            Label label = item.getLabel();
            setGraphic(label);
        }       
    }
}

CustomItem:

import javafx.scene.control.Label;
import org.controlsfx.glyphfont.FontAwesome;
import org.controlsfx.glyphfont.FontAwesome.Glyph;

/**
 *
 * @author blj0011
 */
public class CustomItem
{
    private final Label label = new Label();

    public void setLabelGlyph(Glyph glyph)
    {
        FontAwesome fa = new FontAwesome();
        label.setGraphic(fa.create(glyph));
    }

    public void setString(String string)
    {
        label.setText(string);
    }

    public Label getLabel()
    {
        return label;
    }
}

这篇关于JavaFX 列表就像 SceneBuilder 中的库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！