9 Replies Latest reply: Dec 13, 2012 1:36 PM by biochemistry43 RSS

    external FXML file within AnchorPane/BorderPane/Pane

    biochemistry43
      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
          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
            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
              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
                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
                  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
                    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
                      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
                        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
                          Ok. thank you very much for all the help.

                          blessings