0

コンテナの上部に BorderPane を含む GUI を設計したい コンテナの左側には、さまざまな FXML ファイルのコンテナの中央のコンテンツを変更するさまざまなボタンを持つアコーディオンがあります。 Spotify のデスクトップ アプリ

http://s32.postimg.org/4qw5qbr45/Spoty_Like.png

私は動作するプロトタイプを手に入れました、そしてそれはこのように見えます

http://s32.postimg.org/w9g4rqfid/muestra.png

FXML の変更が発生し、buttos が非常にうまく応答します。私が抱えている問題は、BoderPane の中央部分を埋める FXML が自動化されず、FXML の大きな部分にある場合は表示されず、FXML が中央部分に残されたスペースが同じ小さなサイズのままで、何もないスペースがたくさん残っているよりも小さい

これは、新しい FXML を呼び出すための私のコードです

public void lanzaUno(){
        try {
            // load first FXML
            FXMLLoader loader = new FXMLLoader();

            loader.setLocation(Coordinador.class.getResource(
                    "VistaControlador/Usuario/Uno.fxml"));

            /*i put the AnchorPane inside of a 
            ScrollPane  for the desire funcionality of alot 
            of vertical space for many nodes in a single FXML file  
            */
            ScrollPane unoAnchorPane = (ScrollPane) loader.load();

            UnoController controller = loader.getController();
            //example method for passing variables to the FXML controler 
            controller.pasoPrincipal(this, primaryStage, "Rhutt");
            //puts the FXML in the center of the BorderPane
            rootLayout.setCenter(unoAnchorPane);
            //this if for trying to accommodate the content en the BorderPane 
            BorderPane.setAlignment(unoAnchorPane, Pos.TOP_LEFT);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

私の最初の質問は、BorderPane で利用可能なスペースを占有するこのコンテンツの FXML の呼び出しに欠けているものは何ですか?

私の2番目の質問は、FXMLの変更に関するものです.BorderPaneの変更を別のものに渡すと、BorderPaneの変更が瞬時に行われ、非常に悪いように見えます中央の FXML のコンテンツ?、移行を少し改善するだけで、あまり詳しく説明する必要はありません。

編集

すべてのFXMLのパラメーターを送受信し、新しいFXMLを呼び出すメソッドを宣言するコーディネータークラスを取得したので、コーディネータークラス、コントローラーを持つFXMLルート、および2つのFXMLとそれぞれに異なるものを持つコントローラーがあります1 つ、この 2 つの FXML は、ルートの BorderPane 中央で変更されるものです。

これはコーディネータークラスです

//Variables
        private Stage primaryStage;
        private BorderPane rootLayout;

    /**
     * launh 
     * @param primaryStage
     *  
     */
    @Override
    public void start(Stage primaryStage) throws Exception{
        // Inicializa la escena
        this.primaryStage = primaryStage;
        this.primaryStage.setTitle("Login");
        this.primaryStage.centerOnScreen();
        //star method 
        iniLogin();
    }

     /**
     *load the root scene
     */
    public void iniLogin(){
        try {
            // Carga el loader.
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(com.aohys.rehabSys.MVC.Coordinador.class.getResource(
                    "VistaControlador/Pricipal/Principal.fxml"));
            rootLayout = (BorderPane) loader.load();
            //the root scene
            Scene scene = new Scene(rootLayout);
            primaryStage.setScene(scene);
            // Da acceso al programa principal.
            PrincipalController controller = loader.getController();
            controller.pasoPrincipal(this, primaryStage);
            primaryStage.centerOnScreen();
            // Muesta la escena,
            primaryStage.show();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

このメソッドの後に、2 つの変化する FXML 呼び出し LanzaUno、LanzaDos を呼び出す最初のメソッドのような 2 つの同一のメソッドがあります。

これは私のルードFXMLコントローラーです

public class PrincipalController implements Initializable {
    //variable of the coordinator class
    private Coordinador cordi;
    private Stage stage;

    /**
     * method for passing parameters to the FXML
     * @param cordi
     * @param stage 
     */
    public void pasoPrincipal(Coordinador cordi, Stage stage) {
        this.cordi = cordi;
        this.stage = stage;
    }

    //FXML in root 
    @FXML private Button btt1;
    @FXML private Button btt2;
    @FXML public static StackPane stackPane;

    /**
     * Initializes the controller class.
     */
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        //Call the firts FXML
        btt1.setOnAction((evento)->{
            cordi.lanzaUno();
        });

        //Call the second FXML
        btt2.setOnAction((evento)->{
            cordi.lanzaDos();
        });
    }  

現時点では、2 つの FXML のコントローラーは何もしません。

4

1 に答える 1

1

アプリケーションで依存性注入とコントローラーを管理するには、 Adam Bien の AfterburnerFXライブラリを読む必要があります。それは私の人生を変えました。:)

トランジションには、このコードを使用します。ある画面から次の画面への素晴らしいフェードアウト/フェードインです。この場合、stackPaneはFXML で定義されStackPaneた中心にあります。BorderPane

前述の stackPane を使用した単純な FXML を次に示します。

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

<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>

<BorderPane fx:id="borderPane" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1280.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.tada.gui.tada.TadaPresenter">
   <center>
      <StackPane fx:id="stackPane" minHeight="-Infinity" minWidth="-Infinity" prefHeight="240.0" prefWidth="320.0" BorderPane.alignment="CENTER" />
   </center>
</BorderPane>

そして、渡された新しいものに変更する setScreen メソッド:

/**
 * Set Screen 
 * 
 * @param view
 * @return boolean
 */
public boolean setScreen(Parent view) {       
    final DoubleProperty opacity = stackPane.opacityProperty();

    if (!stackPane.getChildren().isEmpty()) {    //if there is more than one screen
        Timeline fade = new Timeline(
                new KeyFrame(Duration.ZERO, new KeyValue(opacity, 1.0)),
                new KeyFrame(new Duration(TRANSITION_TIMER), new EventHandler<ActionEvent>() {
                    @Override
                    public void handle(ActionEvent t) {
                        stackPane.getChildren().remove(0);        //remove the displayed screen
                        stackPane.getChildren().add(0, view);     //add the screen
                        Timeline fadeIn = new Timeline(
                                new KeyFrame(Duration.ZERO, new KeyValue(opacity, 0.0)),
                                new KeyFrame(new Duration(TRANSITION_TIMER), new KeyValue(opacity, 1.0)));
                        fadeIn.play();
                    }
                }, new KeyValue(opacity, 0.0)));
        fade.play();

    } else {
        stackPane.setOpacity(0.0);
        stackPane.getChildren().add(view);       //no one else been displayed, then just show
        Timeline fadeIn = new Timeline(
                new KeyFrame(Duration.ZERO, new KeyValue(opacity, 0.0)),
                new KeyFrame(new Duration(TRANSITION_TIMER), new KeyValue(opacity, 1.0)));
        fadeIn.play();
    }
    return true;
}

コントローラーにもこれが必要です...

private static final double TRANSITION_TIMER = 200;

編集:

非常に基本的な「アプリケーション」をまとめてみました。初歩的な内容ですが、AfterburnerFX の使用と画面のフェード トランジションをうまく説明していると思います。AfterburnerFX には他にもたくさんあります。依存性注入を使用せずにビューの切り替えを使用しました。これは、アプリケーションでオブジェクトを操作したい場合に非常に重要です。また、優れた UX にとって、プロパティ バインディングは非常に重要です。とにかく、これは GitHubの私の例へのリンクです。

于 2016-05-18T05:03:51.000 に答える