2016-05-18 59 views
0

我想设计一个GUI,其中包含的容器顶部的BorderPane有一个MenuBar,在容器的左边有一个带有不同按钮的Acordion,它改变了内容容器的diferent FXML文件中心,成才像Spotiffy的桌面应用JavaFX BorderPane多FXML空间安排和过渡效果

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

我有一个工作prototipe和它看起来像这样

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

FXML的变化发生,buttos响应非常好,我遇到的问题是填充BoderPane中心部分的FXML不会自动调整,如果是FXML的大部分不显示,并且if该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(); 
     } 
    } 

我的第一cuestion的调用代码我在调用FXML中忽略了这个Ocupy在BorderPane中可用空间的内容时是什么东西?

我的思考线索关于FXML的变化,当我将一个传递给另一个时,BorderPane中的变化瞬间显现并且看起来非常糟糕,有没有一种方法可以像FXML的内容那样进行转换被称之为推入中心FXML的内容?它没有必须非常详细阐述只是使过渡好一点

编辑

我有一个cordinator类,其中i发送和recive的参数所有的FXML和我声明调用新FXML的方法的地方,所以我有一个cordinator类,一个带有其控制器的FXML根,两个FXML及其控制器在每个FXML中都有不同的东西,这两个FXM (L)是在根

此的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(); 
     } 
    } 

有喜欢一个在开头两个相同的方法,其中i调用2改变FXML打电话LanzaUno,LanzaDos

这是我的圣坛FXML CONTROLER

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(); 
     }); 
    } 

暂时在两个FXML控制器不做任何事情

回答

1

您应该阅读Adam Bien's AfterburnerFX库以管理应用程序中的依赖注入和控制器。它改变了我的生活。 :)

对于转换,我使用此代码。从一个屏幕到另一个屏幕是一个很好的淡出/淡入。在这种情况下,stackPane是您的FXML中定义的BorderPane中心的StackPane

下面是一个简单FXML与上述stackPane:

<?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上my example的链接。

+0

我确定会检查afterburnerFX,我如何实现你提供的方法?,即时通讯布莱恩编辑更多关于如何实现你的方法detials的问题,但总之事情是我有一个cordinator类,我发送和为所有FXML调用参数,并且在那里我声明了调用新FXML的方法,所以我有一个cordinator类,一个带有它的控制器的FXML根,两个FXML和它们的控制器在每一个中都有不同的东西,这两个FXML是那些更改根目录 – CorrOrtiz

+0

@CorrOrtiz的BorderPane中心,我编辑了我的答案,指出您在GitHub上有一个非常简单的示例应用程序。我希望这对你有所帮助。 – RonSiven