This discussion is archived
9 Replies Latest reply: Dec 13, 2012 11:36 AM by biochemistry43 RSS

external FXML file within AnchorPane/BorderPane/Pane

biochemistry43 Newbie
Currently Being Moderated
I need to load a FXML file into a panel (AnchorPane, BorderPane, Pane, etc) but I had some problems.

Initially I tried to load my external FXML file within AnchorPane the following manner:
package signa;


import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.Parent;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;


public class Estructura_GeneralController {

    /*ignore this section
    @FXML Button modalidadButton;
    @FXML Button closeButton;
    @FXML Button chatButton;
    @FXML Button helpButton;
    @FXML HBox herramientas;
    @FXML Button latLonBtn;
    @FXML Button utmBtn;
    */    

    @FXML AnchorPane paneles;
    
    @FXML Button agregarUnidadBtn;
    @FXML Button derrotasBtn;
    @FXML Button editarUnidadBtn;
    @FXML Button marcadoresBtn;
    @FXML Button organizacionTareasBtn;
    @FXML Button nuevoPlanBtn;
    @FXML Button patronesBtn;
    
    @FXML Parent agregarUnidadPanel;
    @FXML Parent derrotasPanel;
    @FXML Parent editarUnidadPanel;
    @FXML Parent marcadoresPanel;
    @FXML Parent organizacionTareasPanel;
    @FXML Parent nuevoPlanPanel;
    @FXML Parent patronesPanel;
    
    public void switchPane(ActionEvent event) {
          Object eventSource = event.getSource();
          if (eventSource == agregarUnidadBtn) {
//               paneles.setCenter(agregarUnidadPanel);//.addAll(pane1);
                        paneles.setLeftAnchor(agregarUnidadPanel, null);
                        paneles.getChildren().addAll(agregarUnidadPanel);
                        
          } else if (eventSource == derrotasBtn) {
               paneles.setLeftAnchor(derrotasPanel, null);
                        paneles.getChildren().addAll(derrotasPanel);
                        
          } else if (eventSource == editarUnidadBtn) {
               paneles.setLeftAnchor(editarUnidadPanel, null);
                        paneles.getChildren().addAll(editarUnidadPanel);
                        
          } else if (eventSource == marcadoresBtn) {
               paneles.setLeftAnchor(marcadoresPanel, null);
                        paneles.getChildren().addAll(marcadoresPanel);
                        
          }else if (eventSource == organizacionTareasBtn) {
               paneles.setLeftAnchor(organizacionTareasPanel, null);
                        paneles.getChildren().addAll(organizacionTareasPanel);
                        
          }else if (eventSource == nuevoPlanBtn) {
               paneles.setLeftAnchor(nuevoPlanPanel, null);
                        paneles.getChildren().addAll(nuevoPlanPanel);
                        
          }else if (eventSource == patronesBtn) {
               paneles.setLeftAnchor(patronesPanel, null);
                        paneles.getChildren().addAll(patronesPanel);
                        
          }
     }
}
Now, in the FXML file:
//All this is within a AnchorPane
                  <AnchorPane fx:id="paneles" minHeight="0.0" minWidth="0.0" styleClass="anchorpane">
                  <prefHeight>
                    <Long fx:value="851" />
                  </prefHeight>
                  <prefWidth>
                    <Long fx:value="426" />
                  </prefWidth>
                  <stylesheets>
                    <URL value="@SIGNA.css" />
                  </stylesheets>
                  <fx:define>
                         <fx:include source="Panel_AgregarUnidades.fxml" fx:id="agregarUnidadPanel"/>
                  </fx:define>
                  <fx:define>
                         <fx:include source="Panel_Derrotas.fxml" fx:id="derrotasPanel"/>
                  </fx:define>
                  <fx:define>
                         <fx:include source="Panel_EditarUnidades.fxml" fx:id="editarUnidadPanel"/>
                  </fx:define>
                  <fx:define>
                         <fx:include source="Panel_Marcadores.fxml" fx:id="marcadoresPanel"/>
                  </fx:define>
                  <fx:define>
                        <fx:include source="Panel_OrganizacionTareas.fxml" fx:id="organizacionTareasPanel"/>
                  </fx:define>
                  <fx:define>
                        <fx:include source="Panel_NuevoPlan.fxml" fx:id="nuevoPlanPanel"/>
                  </fx:define>
                  <fx:define>
                        <fx:include source="Panel_PatronesPanel.fxml" fx:id="patronesPanel"/>
                  </fx:define>
                </AnchorPane>

                //With these buttons try to load the external panels
                <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" styleClass="anchorpane, Vbox">
                  <children>
                    <Button fx:id="agregarUnidadBtn" contentDisplay="CENTER" layoutX="5.0" layoutY="12.0" mnemonicParsing="false" onAction="#switchPane" prefWidth="88.0" text="${'Agregar' + '\n' + 'Unidades'}" />
                    <Button id="derrotasPanel" fx:id="derrotasBtn" contentDisplay="CENTER" layoutX="5.0" layoutY="57.0" mnemonicParsing="false" onAction="#switchPane" prefHeight="37.0" prefWidth="88.0" text="Derrotas" />
                    <Button fx:id="editarUnidadBtn" contentDisplay="CENTER" layoutX="5.0" layoutY="102.0" mnemonicParsing="false" onAction="#switchPane" prefWidth="88.0" text="${'Editar' + '\n' + 'Unidades'}" />
                    <Button fx:id="marcadoresBtn" contentDisplay="CENTER" layoutX="5.0" layoutY="147.0" mnemonicParsing="false" onAction="#switchPane" prefHeight="37.0" prefWidth="88.0" text="Marcadores" />
                    <Button fx:id="organizacionTareasBtn" contentDisplay="CENTER" layoutX="5.0" layoutY="192.0" mnemonicParsing="false" onAction="#switchPane" prefWidth="88.0" text="${'Organización' + '\n' + 'de Tareas'}" />
                    <Button fx:id="nuevoPlanBtn" contentDisplay="CENTER" layoutX="5.0" layoutY="237.0" mnemonicParsing="false" onAction="#switchPane" prefWidth="88.0" text="${'Nuevo' + '\n' + 'Plan'}" />
                    <Button fx:id="patronesBtn" contentDisplay="CENTER" layoutX="5.0" layoutY="282.0" mnemonicParsing="false" onAction="#switchPane" prefHeight="37.0" prefWidth="88.0" text="Patrones" />
                  </children>
In this way I managed to load the external FXML file but but gives me an exception.

WARNING: com.sun.javafx.css.StyleHelper calculateValue caught:
java.lang.IllegalArgumentException: No enum constant javafx.geometry.Pos.left


furthermore if I press a button pressed previously, I have another problem of exception.

java.lang.RuntimeException: java.lang.reflect.InvocationTargetException*
Caused by: java.lang.reflect.InvocationTargetException
*Caused by: java.lang.IllegalArgumentException: Children: duplicate children added: parent = AnchorPane[id=paneles, styleClass=anchorpane]*

I also tried a slightly changing BordePane controller code:
 public void switchPane(ActionEvent event) {
          Object eventSource = event.getSource();
          if (eventSource == agregarUnidadBtn) {
               paneles.setCenter(agregarUnidadPanel);
                        paneles.getChildren().addAll(agregarUnidadPanel);
                        
          } 
Now obviously the variable "paneles" is a BorderPane.

however the result is the same only without having the problem of the second exception I had with the AnchorPane

I attached a picture to have some idea

Thank you very much any help and I ask an apology for the bad English.

http://img42.imageshack.us/img42/5770/panelssigna.png
http://img17.imageshack.us/img17/117/examplepanelagregarunid.png

Edited by: biochemistry43 on 11/12/2012 12:55 PM
  • 1. Re: external FXML file within AnchorPane/BorderPane/Pane
    biochemistry43 Newbie
    Currently Being Moderated
    hi all. Anyone have an idea of what is happening?

    I would appreciate any hint
  • 2. Re: external FXML file within AnchorPane/BorderPane/Pane
    daniel Journeyer
    Currently Being Moderated
    Hi,

    1. I don't think you can use getChildren().add(...) on BorderPane. Instead you have to use setTop, setCenter, etc...

    2. I think that what happened with AnchorPane is that you tried to add the same panel twice in your AnchorPane.
    Did you mean maybe to use setAll instead of addAll ?

    Hope this helps,

    -- daniel
  • 3. Re: external FXML file within AnchorPane/BorderPane/Pane
    David Grieve Pro
    Currently Being Moderated
    For the first error, it depends on what you have in your SIGNA.css file. I suspect that you have "left" (with quotes) instead of left (without quotes).
    For the second error, it is telling you that the child is already a child of some other parent. I'd put a breakpoint in switchPane and see what the parent is of whatever child it is you are adding to paneles.
  • 4. Re: external FXML file within AnchorPane/BorderPane/Pane
    biochemistry43 Newbie
    Currently Being Moderated
    Please, I beg you to give me a little more light because I do not understand completely.

    In BorderPane not use getChildren (). AddAll () - it was my mistake to put it -

    To BorderPane this is what I do:
    public void switchPane(ActionEvent event) {
              Object eventSource = event.getSource();
              if (eventSource == agregarUnidadBtn) {
                   paneles.setCenter(agregarUnidadPanel);//
    //                        paneles.setLeftAnchor(agregarUnidadPanel, null);
    //                        paneles.getChildren().addAll(agregarUnidadPanel);
                            
              } else if (eventSource == derrotasBtn) {
                            paneles.setCenter(derrotasPanel);
    //               paneles.setLeftAnchor(derrotasPanel, null);
    //                        paneles.getChildren().addAll(derrotasPanel);
                            
              } else if (eventSource == editarUnidadBtn) {
                            paneles.setCenter(editarUnidadPanel);
    //               paneles.setLeftAnchor(editarUnidadPanel, null);
    //                      paneles.getChildren().addAll(editarUnidadPanel);
                            
              } else if (eventSource == marcadoresBtn) {
                            paneles.setCenter(marcadoresPanel);
    //               paneles.setLeftAnchor(marcadoresPanel, null);
    //                        paneles.getChildren().addAll(marcadoresPanel);
                            
              }else if (eventSource == organizacionTareasBtn) {
                            paneles.setCenter(organizacionTareasPanel);
    //               paneles.setLeftAnchor(organizacionTareasPanel, null);
    //                        paneles.getChildren().addAll(organizacionTareasPanel);
                            
              }else if (eventSource == nuevoPlanBtn) {
                            paneles.setCenter(nuevoPlanPanel);
    //               paneles.setLeftAnchor(nuevoPlanPanel, null);
    //                      paneles.getChildren().addAll(organizacionTareasPanel);
                            
              }else if (eventSource == patronesBtn) {
                            paneles.setCenter(organizacionTareasPanel);
    //               paneles.setLeftAnchor(organizacionTareasPanel, null);
    //                        paneles.getChildren().addAll(organizacionTareasPanel);
                            
              }
    This is the FXML file
    <BorderPane fx:id="paneles" minHeight="0.0" minWidth="0.0">
                      <fx:define>
                        <fx:include fx:id="agregarUnidadPanel" source="Panel_AgregarUnidades.fxml" />
                      </fx:define>
                      <fx:define>
                        <fx:include fx:id="derrotasPanel" source="Panel_Derrotas.fxml" />
                      </fx:define>
                      <fx:define>
                        <fx:include fx:id="patronesPanel" source="Panel_Patrones.fxml" />
                      </fx:define>
                      <fx:define>
                        <fx:include fx:id="editarUnidadPanel" source="Panel_EditarUnidades.fxml" />
                      </fx:define>
                      <fx:define>
                        <fx:include fx:id="marcadoresPanel" source="Panel_Marcadores.fxml" />
                      </fx:define>
                      <fx:define>
                        <fx:include fx:id="nuevoPlanPanel" source="Panel_NuevoPlan.fxml" />
                      </fx:define>
                      <prefHeight>
                        <Long fx:value="851" />
                      </prefHeight>
                      <prefWidth>
                        <Long fx:value="426" />
                      </prefWidth>
                      <stylesheets>
                        <URL value="@SIGNA.css" />
                      </stylesheets>
                    </BorderPane>
    I see that the error refers to CSS but do not fully understand what the problem is. Could you explain a little more David Grieve?
  • 5. Re: external FXML file within AnchorPane/BorderPane/Pane
    David Grieve Pro
    Currently Being Moderated
    Somewhere in your css file you must have something, maybe -fx-text-alignment, -fx-content-display or -fx-halignment, that is using the value "left", where left is surrounded by quotes. I think if you remove the quotes the CSS error will go away. Or you could post the contents of your CSS file here if you need more help than this.

    As for the other error, if you don't know how to use a debugger, simply print out the parent of agregarUnidadPanel, derrotasPanel, and the others before you call paneles.setCenter in switchPane. It should be null or paneles.

    Edited by: David Grieve on Dec 12, 2012 10:25 AM
  • 6. Re: external FXML file within AnchorPane/BorderPane/Pane
    jsmith Guru
    Currently Being Moderated
    bio, you need to include post the source to your SIGNA.css file source.

    Also you could try commenting out the css file in your fxml and seeing how your app runs then:
    <!--
    <stylesheets>
      <URL value="@SIGNA.css" />
    </stylesheets>
    -->
  • 7. Re: external FXML file within AnchorPane/BorderPane/Pane
    biochemistry43 Newbie
    Currently Being Moderated
    This is the only part in my CSS file where the word left
    .table-view .column-header .label{
        -fx-font-size: 11px;
        -fx-font-family: "Calibri";
        -fx-text-fill: white;
        -fx-alignment: left;
    }
    This is the only part in my CSS file where the word left

    If I suppress the error goes away which is great and I am happy but ... I do not understand why ... Why does that matter?

    If I put the word left (without quotes) returns the error and if I put it back (with quotes), however get the error.


    This is all my CSS code:
    .theme {
            master-color: gray;
        -fx-border-width: 1px;
    /*    -fx-border-color: rgb(30,30,30);*/
        -fx-background-color: rgb(50,50,50);
        -fx-font-size: 11px;
        -fx-font-family: "Calibri";
    }
    
    *.split-pane {
        -fx-padding: 0;
        -fx-border-width: 0;
    }
    
    *.anchorpane {
        -fx-background-color: rgb(50,50,50);
        -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
        /*-fx-background-insets: 0,1,4,5,6;*/
        -fx-background-radius: 9,8,5,4,3;    
        -fx-padding: 3 11 3 11;
        -fx-font-size: 11px;
        -fx-font-family: "Calibri";
        -fx-border: 1px;
        -fx-border-color: rgb(30,30,30);
    }
    
    .borderpane {
        -fx-background-color: rgb(50,50,50);
        -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
        /*-fx-background-insets: 0,1,4,5,6;*/
        -fx-background-radius: 9,8,5,4,3;    
        -fx-padding: 3 11 3 11;
        -fx-font-size: 11px;
        -fx-font-family: "Calibri";
        -fx-border: 1px;
        -fx-border-color: rgb(30,30,30);
     }
     /*Layouts menores*/
     *.Hbox {
     -fx-background-color: rgb(80,80,80);
     -fx-background-radius: 10px;
     -fx-border-width: 2px;
     -fx-border-color: rgb(110,110,110);
     -fx-border-radius: 10px;
     -fx-padding: 5px;
     -fx-spacing: 5px;
    }
    
     *.Vbox {
     -fx-background-color: rgb(80,80,80);
     -fx-background-radius: 10px;
     -fx-border-width: 2px;
     -fx-border-color: rgb(110,110,110);
     -fx-border-radius: 10px;
     -fx-padding: 5px;
    
    }
    
    .frame {
        -fx-background-color: rgb(80, 80, 80);
        -fx-padding: 2px;
        -fx-border-width: 2px;
        -fx-border-color: rgb(110, 110, 110) ;
    }
    
    .display-frame {
        -fx-border-color: rgb(230, 230, 230);
        -fx-border-radius: 10px;
        -fx-border-width: 2px;
        -fx-padding: 2px;
        -fx-background-color: linear-gradient(#505050 5%, #505050 60%, #404040 80%);
    }
    
    /*botones*/
    .toggle-button{
        min-width: 25px;
         max-width: 80px;
         min-height: 18px;
         max-height: 19px;
        -fx-border-radius:10px;
        -fx-padding: 5; /*espacio entre los bordes del boton*/
        -fx-background-radius: 10px;
        -fx-background-color:
            #090a0c,
            linear-gradient(#404040 0%, #404040 5%, #303030 60%)
            radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));
        -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1);
        -fx-text-fill: white ;
        -fx-font-size: 11px;
        -fx-font-family: "Calibri";
        
    }
    
    .toggle-button:hover {
        -fx-effect: dropshadow( three-pass-box , #808080  , 5, 0.6 , 0 , 0);
     
    }
        
    .toggle-button:selected {
        -fx-background-color: rgb(130,130,130);
        -fx-text-fill: white;
        -fx-border-insets: 0;
        -fx-effect: dropshadow( three-pass-box , rgba(0, 225, 255,1) , 5, 0.3 , 0 , 0);
    }
    
    /*.menu-item {
        -fx-background-color: gray;
    }*/
    
    .button {
         min-width: 25px;
         max-width: 80px;
         min-height: 18px;
         max-height: 19px;
        -fx-border-radius:10px;
        -fx-padding: 5; /*espacio entre los bordes del boton*/
        -fx-background-radius: 10px;
        -fx-background-color:
            #090a0c,
            linear-gradient(#404040 0%, #404040 5%, #303030 60%)
            radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));
        -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1);
        -fx-text-fill: white ;
        -fx-font-size: 11px;
        -fx-font-family: "Calibri";
    }
    
    .button:hover {
       -fx-effect: dropshadow( three-pass-box , #808080  , 5, 0.6 , 0 , 0);
    }
    
    .button:pressed {
    /*    -fx-border-color:rgb(0, 225, 255);*/
    /*    -fx-border-width: 2px;*/
        -fx-background-color: rgb(130,130,130);
        -fx-text-fill: white;
        -fx-border-insets: 0;
        -fx-effect: dropshadow( three-pass-box , rgba(0, 225, 255,1) , 5, 0.3 , 0 , 0);
    }
    
    #nvoPlanBtn:focused, #openPlanBtn:focused, #savePlanBtn:focused, #closePlanBtn:focused, 
    #addUnitsBtn:focused, #editUnitsBtn:focused, #tareasBtn:focused, #marcadoresBtn:focused, #derrotasBtn:focused, 
    #patronesBtn:focused, #metOCBtn:focused {
        -fx-background-color: rgb(130,130,130);
        -fx-text-fill: white;
        -fx-border-insets: 0;
        -fx-effect: dropshadow( three-pass-box , rgba(0, 225, 255,1) , 5, 0.3 , 0 , 0);
    }
    
    .etiquetas-botones {
        -fx-text-fill: white;
        -fx-font-style: italic;
    }
    
    #newButton:pressed, #openButton:pressed, #saveButton:pressed, #saveAsButton:pressed, #layersButton:pressed, 
    #zoomInButton:pressed, #zoomOutButton:pressed, #zoomMexicoButton:pressed, #zoomMundoButton:pressed, #zoomBoxButton:pressed,
    #panViewButton:pressed, #selectButton:pressed, #pointButton:pressed, #poliLineButton:pressed{
        -fx-background-color: rgb(130,130,130);
        -fx-text-fill: white;
        -fx-border-insets: 0;
        -fx-effect: dropshadow( three-pass-box , rgba(0, 225, 255,1) , 5, 0.3 , 0 , 0);
    }
    
    .split-pane .split-pane-divider {
        -fx-background-color: rgb(50,50,50);
        -fx-border-color: rgb(50,50,50);
        -fx-minor-tick-visible: false;
    }
    
    #newButton {
    /*    -fx-text-fill: null;*/
        -fx-graphic: url("../signa/img/file_new.png");
    /*    -fx-background-color: transparent;*/
    }
    
    #openButton {
    /*    -fx-text-fill: null;*/
        -fx-graphic: url("../signa/img/abrir.png");
    /*    -fx-background-color: transparent;*/
    }
    
    #saveButton {
    /*    -fx-text-fill: null;*/
        -fx-graphic: url("../signa/img/guardar.png");
    /*    -fx-background-color: transparent;*/
    }
    
    #saveAsButton {
    /*    -fx-text-fill: null;*/
        -fx-graphic: url("../signa/img/guardar_como.png");
    /*    -fx-background-color: transparent;*/
    }
    
    #layersButton {
    /*    -fx-text-fill: null;*/
        -fx-graphic: url("../signa/img/Layers.png");
    /*    -fx-background-color: transparent;*/
    }
    
    #zoomInButton {
    /*    -fx-text-fill: null;*/
        -fx-graphic: url("../signa/img/Zoom_In.png");
    /*    -fx-background-color: transparent;*/
    }
    
    #zoomOutButton {
    /*    -fx-text-fill: null;*/
        -fx-graphic: url("../signa/img/Zoom_Out.png");
    /*    -fx-background-color: transparent;*/
    }
    
    #zoomMexicoButton {
    /*    -fx-text-fill: null;*/
        -fx-graphic: url("../signa/img/mexico.png");
    /*    -fx-background-color: transparent;*/
    }
    
    #zoomMundoButton{
    /*    -fx-text-fill: null;*/
        -fx-graphic: url("../signa/img/mundo.png");
    /*    -fx-background-color: transparent;*/
    }
    
    #zoomBoxButton{
    /*    -fx-text-fill: null;*/
        -fx-graphic: url("../signa/img/zoom-box.png");
    /*    -fx-background-color: transparent;*/
    }
    
    #panViewButton {
    /*    -fx-text-fill: null;*/
        -fx-graphic: url("../signa/img/pan.png");
    /*    -fx-background-color: transparent;*/
    }
    
    #selectButton {
    /*    -fx-text-fill: null;*/
        -fx-graphic: url("../signa/img/pointer.png");
    /*    -fx-background-color: transparent;*/
    }
    
    #pointButton {
    /*    -fx-text-fill: null;*/
        -fx-graphic: url("../signa/img/punto.png");
    /*    -fx-background-color: transparent;*/
    }
    
    #poliLineButton {
    /*    -fx-text-fill: null;*/
        -fx-graphic: url("../signa/img/polilinea.png");
    /*    -fx-background-color: transparent;*/
    }
    
    #shapeButton {
    /*    -fx-text-fill: null;*/
        -fx-graphic: url("../signa/img/poligono.png");
    /*    -fx-background-color: transparent;*/
    }
    
    #closeButton {
        -fx-text-fill: null;
        -fx-graphic: url("../signa/img/close.png");
        -fx-background-color: transparent;
    }
    
    #closeButton:hover{
        -fx-effect: dropshadow( three-pass-box , red  , 5, 0.6 , 0 , 0);
    }
    
    #closeButton:pressed{
        -fx-effect: dropshadow( three-pass-box , aqua  , 5, 0.6 , 0 , 0);
    }
    
    #helpButton {
        -fx-text-fill: null;
        -fx-graphic: url("../signa/img/Help_Icon.png");
        -fx-background-color: transparent;
    }
    
    #chatButton {
        -fx-text-fill: null;
        -fx-graphic: url("../signa/img/chat.png");
        -fx-background-color: transparent;
    }
    
    /*.menu-button {
         min-width: 25px;
         max-width: 80px;
         min-height: 18px;
         max-height: 19px;
        -fx-text-fill:white;
        -fx-border-radius:10px;
        -fx-padding: 5; espacio entre los bordes del boton
        -fx-background-radius: 10px;
        -fx-background-color:
            #090a0c,
            linear-gradient(#404040 0%, #404040 5%, #303030 60%)
            radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));
        -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1);
        -fx-text-fill: aliceblue;
    }*/
    .menu-item:hover {
         -fx-blend-mode: darken;
    }
    
    .label{
        -fx-font-weight: bold;
        
    }
    
    .label.headPaneLabel{
        -fx-font-size:20px;
        -fx-font-family: "Calibri";
        -fx-text-fill: rgb(234,254,254);
        -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1);
    }
    
    .label.contentLabel {
        -fx-font-size:11px;
        -fx-font-family:"Calibri";
        -fx-font-style: normal ;
        -fx-text-fill: rgb(234,254,254);
        -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1);   
    }
    
    .label-name {
        -fx-text-fill: rgb(0, 225, 255);
        -fx-font-size: 36px;
        -fx-font-weight: bold;
    }
    
    .label-unit-station {
        -fx-text-fill: rgb(0, 225, 255);
        -fx-font-size: 17px;
        -fx-font-weight: bold;
    }
    
    .label-date-timeUTC-gps {
        -fx-text-fill: rgb(0, 225, 255);
        -fx-font-size: 14px;
        -fx-font-weight: bold;
    }
    
    .label-cog-sog-hdg {
        -fx-text-fill: rgb(0, 225, 255);
        -fx-font-size: 16px;
        -fx-font-weight: bold;
    }
    
    .label-long-lat {
        -fx-text-fill: rgb(0, 225, 255);
        -fx-font-size: 22px;
        -fx-font-weight: bold;
    }
    
    /*radiobuttons*/
    .radio-button {
        -fx-text-fill: rgb(234,254,254);
        -fx-border: transparent;
    }
    
    .radio-button:pressed .dot {
        -fx-background-color: black;
    }
    
    .radio-button:hover .radio {
        -fx-effect: dropshadow( three-pass-box , #00FFFF , 3, 0.0 , 0 , 1);       
    }
    
    .radio-button:focused .radio{
      -fx-effect: dropshadow( three-pass-box , #00FFFF , 3, 0.0 , 0 , 1);
    }
    
    .separator {
        -fx-background-color: rgb(234,254,254);
        -fx-border-style: none;
        -fx-border-width: 0px;
    }
    
    .text-field {
        -fx-border-width: 1px;
        -fx-border-color: rgb(130,130,130);
        -fx-border-radius: 5px;
        -fx-background-radius: 5px;
        -fx-background-color: rgb(50,50,50);
        -fx-text-fill: white;
    }
    
    .choice-box {
        -fx-border-width: 1px;
        -fx-border-color: rgb(130, 130, 130);
        -fx-border-radius: 5px;
        -fx-text-fill: white;
        -fx-background-radius: 5px;
        -fx-background-color: rgb(50,50,50);
    }
    
    .table-view {
        -fx-background-color: rgb(70,70,70);
        -fx-text-fill: white;
        -fx-border-style: solid;
        -fx-border-color: transparent;
    /*    -fx-border-insets: 0 1 1 0, 0 0 0 0;*/
        -fx-border-width: 0.083333em, 0.083333em;
    }
    
    .table-view .column-header{
        -fx-border-style: solid;
        -fx-border-color: rgb(130, 130, 130);
        -fx-border-radius: 5px;
        -fx-background-radius: 5px;
        -fx-border-insets: 0 1 1 0, 0 0 0 0;
        -fx-border-width: 0.083333em, 0.083333em;
    }   
        
    .table-view .column-header .label{
        -fx-font-size: 11px;
        -fx-font-family: "Calibri";
        -fx-text-fill: white;
    /*    -fx-alignment: "left";*/
    }
    
    .table-view .column-header-background {
        -fx-background-radius: 5px;
        -fx-font-family: "Calibri";
        -fx-background-color:  rgb(50,50,50);
    }
    
    .table-view .column-header-background .filler{
        -fx-background-color: rgb(50,50,50);
        -fx-border-color: rgb(50,50,50);
    }
    
    .table-row-cell {
        -fx-background-color: rgb(100,100,100);
        -fx-background-insets: 0, 0 0 1 0;
        -fx-padding: 0.0em;
    }
    
    .table-row-cell:selected {
        -fx-background-color: dimgrey;
        -fx-background-insets: 0, 0 0 1 0;
        -fx-padding: 0.0em;
        
    }
    
    /*.table-cell {
        -fx-font-style: bold;
        -fx-text-fill: black;
    }*/
    
    .table view .table-cell:selected{
        -fx-text-fill: white;
    }
    
    /*.table-row-cell:odd {
        -fx-background-color: #414141;
        -fx-background-insets: 0, 0 0 1 0;
        -fx-padding: 0.0em;  0 
        -fx-text-fill: white;
    }*/
    
    .scroll-bar .track{
        -fx-background-color: rgb(130,130,130);
        -fx-border-width: 1px;
        -fx-border-color: gray;
    }
    
    .scroll-bar .track:pressed{
        -fx-background-color: white;
    }
    
    .scroll-bar .thumb{
        -fx-background-color:
            #090a0c,
            linear-gradient(#404040 0%, #404040 5%, #303030 60%)
            radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));
        -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1);
    }
    
    .scroll-bar .thumb:hover{
        -fx-effect: dropshadow( three-pass-box , #808080  , 5, 0.6 , 0 , 0);
    }
    
    .scroll-bar .thumb:pressed{
       -fx-background-color: rgb(130,130,130);
       -fx-effect: dropshadow( three-pass-box , rgba(0, 225, 255,1) , 5, 0.3 , 0 , 0);
    }
    
    .scroll-bar .decrement-button{
       -fx-background-color:
            #090a0c,
            linear-gradient(#404040 0%, #404040 5%, #303030 60%)
            radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));
        -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1);
    }
    
    .scroll-bar .decrement-button:hover {
          -fx-effect: dropshadow( three-pass-box , #808080  , 5, 0.6 , 0 , 0);
    }
    
    .scroll-bar .decrement-button:pressed{
        -fx-background-color: rgb(130,130,130);
        -fx-effect: dropshadow( three-pass-box , rgba(0, 225, 255,1) , 5, 0.3 , 0 , 0);
    }
    
    .scroll-bar .decrement-button .decrement-arrow{
        -fx-background-color: gray;
        -fx-border-color: transparent;
        -fx-border-width: 0px;
    }
    
    .scroll-bar .decrement-button .decrement-arrow:pressed{
        -fx-background-color: white;    
    }
    
    .scroll-bar .increment-button{
        -fx-background-color:
            #090a0c,
            linear-gradient(#404040 0%, #404040 5%, #303030 60%)
            radial-gradient(center 50% 0%, radius 100%, rgba(114,131,148,0.9), rgba(255,255,255,0));
        -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 3, 0.0 , 0 , 1);
    }
    
    .scroll-bar .increment-button:hover{
         -fx-effect: dropshadow( three-pass-box , #808080  , 5, 0.6 , 0 , 0);
    }
    
    .scroll-bar .increment-button:pressed{
        -fx-background-color: rgb(130,130,130);
        -fx-effect: dropshadow( three-pass-box , rgba(0, 225, 255,1) , 5, 0.3 , 0 , 0);
    }
    
    .scroll-bar .increment-button .increment-arrow{
        -fx-background-color: gray;
        -fx-border-color: transparent;
        -fx-border-width: 0px;
    }
    
    .scroll-bar .increment-button .increment-arrow:pressed{
        -fx-background-color: white;
    }
    
    .scroll-pane .corner{
        -fx-background-color: transparent;
    }
    
    .tab-pane{
        -fx-tab-max-height: 12pt;
    }
    
    .tab-pane .tab-content-area{
       -fx-background-color: rgb(80, 80, 80);
       -fx-padding: 2px;
       -fx-border-width: 2px;
       -fx-border-color: rgb(110, 110, 110) ;
    }
    
    .tab-pane .tab-header-area .tab{
        -fx-background-color: rgb(60, 60, 60);
        -fx-background-radius: 4px;
        -fx-border-width: 2px;
        -fx-border-color: #707070;
        -fx-border-radius: 4px;
        -fx-padding: 0 0 0 0;
    }
    
    .tab-pane .tab-header-area .tab:hover{
        -fx-border-color:  linear-gradient(#909090 60%, #909090 5%, #909090 0%);
    }
    
    .tab-pane .tab-header-area .tab:selected{
        -fx-border-color:  linear-gradient(#00FFFF 60%, #00FFFF 5%, #00FFFF 0%);
        -fx-background-color: rgb(130,130,130);
        -fx-text-fill: white;
        -fx-border-insets: 0;
    }
    
    .tab-pane .tab-header-area .tab-header-background {
        -fx-background-color:transparent;
    }
    
    .tab-pane .tab-header-area .tab .tab-label{
        -fx-text-fill: white;
         -fx-font-size: 11px;
        -fx-font-family: "Calibri";
        -fx-alignment: center;
    }
    Edited by: biochemistry43 on 13/12/2012 09:06 AM
  • 8. Re: external FXML file within AnchorPane/BorderPane/Pane
    David Grieve Pro
    Currently Being Moderated
    The issue with the alignment left is that this alignment property is not TextAlignment. Labeled's alignmentProperty "specifies how the text and graphic within the Labeled should be aligned when there is empty space within the Labeled." You probably want -fx-text-alignment instead.
  • 9. Re: external FXML file within AnchorPane/BorderPane/Pane
    biochemistry43 Newbie
    Currently Being Moderated
    Ok. thank you very much for all the help.

    blessings

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points