14 Replies Latest reply on Apr 12, 2012 1:11 PM by David Grieve-Oracle

    How to change the style of Tab Pane Control

    Pugazhendhi
      Hi can we change the color of tab pane, table view borders, Backgrounds like skinning the button.
        • 1. Re: How to change the style of Tab Pane Control
          David Grieve-Oracle
          Start here: http://docs.oracle.com/javafx/2.0/api/index.html
          • 2. Re: How to change the style of Tab Pane Control
            Pugazhendhi
            Hi i tried to change skin of TabPane, but it seems to be tricky and tough
            these are the following steps i have followed .

            Step1. constructed css like this .
            .tab {
            -fx-padding: 0px 5px -2px 5px;
            -fx-background-insets: 0 -20 0 0;
            -fx-background-color: red;
            -fx-text-fill: #c4d8de;
            -fx-border-color:red;
            
            }
            .tab:selected {
            -fx-border-color:red;
            -fx-text-fill: #333333;
            }
            Step2 : And then i have constructed
            TabPane tabPane = new TabPane();
            Tab tab1 = new Tab("Sites");
            for changing the tab header i used tab1.setGraphic()

            result i achieved something looking bad.
            import javafx.application.Application;
            import javafx.scene.*;
            import javafx.scene.control.*;
            import javafx.scene.layout.*;
            import javafx.scene.paint.Color;
            import javafx.scene.shape.Rectangle;
            import javafx.stage.*;
             
            public class ThumbTabPane extends Application {
              public static void main(String[] args) { launch(args); }
              @Override public void start(Stage stage) {
                // create some tabs.
                TabPane tabPane = new TabPane();
                Tab tab1 = new Tab("Sites"); tab1.setContent(new Rectangle(400, 200, Color.LIGHTGREEN));
                Tab tab2 = new Tab("Favorites"); tab2.setContent(new Rectangle(400, 200, Color.LIGHTSTEELBLUE));
                Tab tab3 = new Tab("Loves"); tab3.setContent(new Rectangle(400, 200, Color.PINK));
                tabPane.getTabs().addAll(tab1, tab2, tab3);
                tabPane.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
             
                    HBox hBoxTitle = new HBox();
               
                    Label label = new Label("Text");
             
                    hBoxTitle.getChildren().add(label);
                    hBoxTitle.getChildren().add(new Button("right"));
             
                    hBoxTitle.prefWidthProperty().bind(tabPane.widthProperty().subtract(18));
              
                    tab1.setGraphic(hBoxTitle);
                    hBoxTitle.setStyle("-fx-background-color:red");
                    
                // layout the stage.
                StackPane layout = new StackPane();
                layout.getChildren().add(tabPane);
                layout.setStyle("-fx-background-color: cornsilk; -fx-padding: 10;");
                Scene scene = new Scene(layout);
                scene.getStylesheets().add(ThumbTabPane.class.getResource("stylishtabs.css").toExternalForm());
                stage.setScene(scene);
                stage.show();
                
                Node node = scene.getRoot().lookup(".tab");
                node.setId("first-tab");
              }
            }
            • 3. Re: How to change the style of Tab Pane Control
              David Grieve-Oracle
              You are on the right track. If you extract caspian.css from jfxrt.jar, you can see the default styles that are used in TabPane. Copy them to your stylishtabs.css and tweak them from there.
              • 4. Re: How to change the style of Tab Pane Control
                Pugazhendhi
                hi thanks for your reply, i am working on it as per your guidance and let you know if its working good :)
                • 5. Re: How to change the style of Tab Pane Control
                  Pugazhendhi
                  Hi one more thing do you have any idea about transition effects (Fade_In, Fade_Out). when switching from one tab to next tab.
                  • 6. Re: How to change the style of Tab Pane Control
                    David Grieve-Oracle
                    Not really my area of expertise, but... I'd listen to the Tab selectedProperty and then animate opacity if selected is true. I'd bet there are others out there with better ideas.

                    Something like this
                            tab.selectedProperty().addListener(new ChangeListener<Boolean>(){
                    
                                public void changed(ObservableValue<? extends Boolean> ov, Boolean t, Boolean t1) {
                                    if (t1.booleanValue()) {
                                        // it would be better to use FadeTransitionBuilder here...
                                        FadeTransition ft = new FadeTransition();
                                        ft.setNode(tab.getContent());
                                        ft.setDuration(Duration.millis(1000));
                                        ft.setFromValue(0.1);
                                        ft.setToValue(1.0);
                                        ft.setCycleCount(1);
                                        ft.play();                    
                                    }
                                }
                            });
                    • 7. Re: How to change the style of Tab Pane Control
                      Pugazhendhi
                      Hi Finally i got to know about skinning ...
                      thanks a lot .

                      2. How to make Animated Transition when switching from one tab to another tab.
                      content are should get Fade in Transition.?

                      can anyone help in this question to proceed further..
                      • 8. Re: How to change the style of Tab Pane Control
                        Pugazhendhi
                        Hi

                        I am giving the Post details where u can download my netbeans project .[CustomTabPane Project download|http://jfxuser.wordpress.com/2012/04/11/4/]

                        I have One More Question in Transition Effects Displaying while Switching to next Tab.

                        Eg.

                        In Example i have three tabs named Tab1, Tab2, Tab3

                        [Observed Behavior] Where my tabs have the FadeInLeftBigTransitions currenty for all the three tabs.

                        [Expected Behavior] When I am going to select the Tab2
                        Tab1 Should Go FadeOutLeftBigTransitions and Tab2 Should come in FadeInRightBigTransitions . these two motions in sequence i need

                        This behavior i saw in this tool , link for that tools is: Link

                        Can anyone help me in building this behavior in my sample application ..
                        • 10. Re: How to change the style of Tab Pane Control
                          darrylburke
                          Pugazhendhi wrote:
                          any update pls...
                          There is, actually.

                          Cross posted
                          http://www.java-forums.org/javafx/58183-customtabpane.html

                          Also did cross post another FX question last month.

                          db
                          • 11. Re: How to change the style of Tab Pane Control
                            David Grieve-Oracle
                            At the bottom of http://fxexperience.com/2012/03/announcing-fx-experience-tools/#more-1755, just before the comments begin, there is a link to the source repo. Just grab the source and take a look.
                            • 12. Re: How to change the style of Tab Pane Control
                              Pugazhendhi
                              Hi tried to implement in my code but my solution not working properly .

                              difficulties i faced are ..

                              They using two StatckPane .
                              One is Current and onaother one is SparePane.

                              but in my case i have tab where each tab contains its own parent . I dont know how to relate or add stackpane in my tabPane ..
                              can u help me i got struck here ...
                              /**
                               *
                               * @author pugazhendhi
                               */
                              import javafx.animation.*;
                              import javafx.application.Application;
                              import javafx.application.Platform;
                              import javafx.beans.property.DoubleProperty;
                              import javafx.beans.property.SimpleDoubleProperty;
                              import javafx.beans.value.ChangeListener;
                              import javafx.beans.value.ObservableValue;
                              import javafx.event.ActionEvent;
                              import javafx.event.EventHandler;
                              import javafx.scene.*;
                              import javafx.scene.control.*;
                              import javafx.scene.image.Image;
                              import javafx.scene.layout.*;
                              import javafx.stage.*;
                              import javafx.util.Duration;
                              
                              public class CustomTabPane extends Application {
                              
                               private static final Interpolator interpolator = Interpolator.SPLINE(0.4829, 0.5709, 0.6803, 0.9928);
                                  private static double TOOLBAR_WIDTH = 80;
                                  private Pane root;
                                  private StackPane currentPane, sparePane;
                                  private VBox toolBar;
                                  private int currentToolIndex = 0;
                                  private Timeline timeline;
                                  private Tool nextTool = null;
                                  private int nextToolIndex;
                                  private DoubleProperty arrowH = new SimpleDoubleProperty(200);
                                  
                                  private Tool[] tools;
                              
                                  
                                  public static void main(String[] args) {
                                      launch(args); 
                                  }
                              
                                 
                                  @Override public void start(Stage stage) {
                              
                                         tools = new Tool[]{
                                             
                                          new Tool(
                                              "left pane", 
                                              new RightPane(),
                                              new Image(CustomTabPane.class.getResourceAsStream("images/spline-editor-icon.png"))
                                          ),
                                          
                                          new Tool(
                                              "right Pane", 
                                             new LogPanel(stage),
                                              new Image(CustomTabPane.class.getResourceAsStream("images/derive-color-icon.png"))
                                          ),
                                          new Tool(
                                              "lef Pane", 
                                               new Settings(),
                                               new Image(CustomTabPane.class.getResourceAsStream("images/derive-color-icon.png"))
                                          )
                                      };
                                         
                                      TabPane tabPane = new TabPane();
                                 
                                      Pane pane = new Pane();
                                      currentPane = new StackPane();
                                      currentPane.getChildren().setAll(tools[0].getContent());
                                      sparePane = new StackPane();
                                      sparePane.setVisible(false);
                                      
                                      pane.getChildren().addAll(currentPane,sparePane);
                              
                                      final Tab tab1 = new Tab("tab1");
                                 
                                      tab1.setContent(pane);
                                      tab1.selectedProperty().addListener(new ChangeListener<Boolean>(){
                              
                                              public void changed(ObservableValue<? extends Boolean> ov, Boolean t, Boolean t1) {
                                                     final int index = 0;
                                                  if (t1.booleanValue()) {   
                                                      System.out.println("1");
                                                     switchTool(tools[0], index);
                                                  }
                                              }
                                          });
                              
                                      final Tab tab2 = new Tab("tab2");
                                    
                                      tab2.setContent(pane);
                                      tab2.selectedProperty().addListener(new ChangeListener<Boolean>(){
                              
                                              public void changed(ObservableValue<? extends Boolean> ov, Boolean t, Boolean t1) {
                                                  if (t1.booleanValue()) {
                                                         System.out.println("2");
                                                        final int index = 1;
                                                        switchTool(tools[1], index);
                                                  }
                                              }
                                          });
                                     
                                      final Tab tab3 = new Tab("tab3");
                                      tab3.setContent(pane);
                                      tab3.selectedProperty().addListener(new ChangeListener<Boolean>(){
                              
                                              public void changed(ObservableValue<? extends Boolean> ov, Boolean t, Boolean t1) {
                                                  if (t1.booleanValue()) {
                                                         System.out.println("3");
                                                        final int index = 2;
                                                        switchTool(tools[2], index);
                                                  }
                                              }
                                          });
                                      
                                      tabPane.getTabs().addAll(tab1, tab2,tab3);
                                      tabPane.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
                                      
                                      root = new Pane();
                                      root.getChildren().addAll(tabPane);
                                      
                                      Scene scene = new Scene(root);
                                      scene.getStylesheets().add(CustomTabPane.class.getResource("stylishtabs.css").toExternalForm());
                                      tabPane.setId("tab-pane");
                                      stage.setScene(scene);
                                      stage.show();
                                  }
                              
                                       
                                   public void switchTool(Tool newTool, final int toolIndex) {
                                      // check if existing animation running
                                      if (timeline != null) {
                                          nextTool = newTool;
                                          nextToolIndex = toolIndex;
                                          timeline.setRate(4);
                                          return;
                                      } else {
                                          nextTool = null;
                                          nextToolIndex = -1;
                                      }
                                  
                                      // load new content
                                      sparePane.getChildren().setAll(newTool.getContent());
                                      sparePane.setCache(true);
                                      currentPane.setCache(true);
                                      // wait one pulse then animate
                                      Platform.runLater(new Runnable() {
                                          @Override public void run() {
                                              // animate switch
                                              if (toolIndex > currentToolIndex) { // animate from bottom
                                                  currentToolIndex = toolIndex;
                                                  sparePane.setTranslateX(root.getWidth());
                                                  sparePane.setVisible(true);
                                                  timeline = TimelineBuilder.create()
                                                          .keyFrames(
                                                              new KeyFrame(Duration.millis(0), 
                                                                  new KeyValue(currentPane.translateXProperty(),0,interpolator),
                                                                  new KeyValue(sparePane.translateXProperty(),root.getWidth(),interpolator)
                                                              ),
                                                              new KeyFrame(Duration.millis(800), 
                                                                  animationEndEventHandler,
                                                                  new KeyValue(currentPane.translateXProperty(),-root.getWidth(),interpolator),
                                                                  new KeyValue(sparePane.translateXProperty(),0,interpolator)
                                                              )
                                                          )
                                                          .build();
                                                  timeline.play();
                                              } else { // from top
                                                  currentToolIndex = toolIndex;
                                                  sparePane.setTranslateX(-root.getWidth());
                                                  sparePane.setVisible(true);
                                                  timeline = TimelineBuilder.create()
                                                          .keyFrames(
                                                              new KeyFrame(Duration.millis(0), 
                                                                  new KeyValue(currentPane.translateXProperty(),0,interpolator),
                                                                  new KeyValue(sparePane.translateXProperty(),-root.getWidth(),interpolator)
                                                              ),
                                                              new KeyFrame(Duration.millis(800), 
                                                                  animationEndEventHandler,
                                                                  new KeyValue(currentPane.translateXProperty(),root.getWidth(),interpolator),
                                                                  new KeyValue(sparePane.translateXProperty(),0,interpolator)
                                                              )
                                                          )
                                                          .build();
                                                  timeline.play();
                                              }
                                          }
                                      });
                                  }
                                  
                                  private EventHandler<ActionEvent> animationEndEventHandler = new EventHandler<ActionEvent>() {
                                      @Override public void handle(ActionEvent t) {
                                          // switch panes
                                          StackPane temp = currentPane;
                                          currentPane = sparePane;
                                          sparePane = temp;
                                          // cleanup
                                          timeline = null;
                                          currentPane.setTranslateX(0);
                                          sparePane.setCache(false);
                                          currentPane.setCache(false);
                                          sparePane.setVisible(false);
                                          sparePane.getChildren().clear();
                                          // start any animations
                              //            if (tools[currentToolIndex].getContent() instanceof AnimatedPanel) {
                              //                ((AnimatedPanel)tools[currentToolIndex].getContent()).startAnimations();
                              //            }
                                          // check if we have a animation waiting
                                          if (nextTool != null) {
                                              switchTool(nextTool, nextToolIndex);
                                          }
                                      }
                                  };
                              }
                               
                              • 13. Re: How to change the style of Tab Pane Control
                                Pugazhendhi
                                any update pls ... to implement this behaviour in my sample ..
                                • 14. Re: How to change the style of Tab Pane Control
                                  David Grieve-Oracle
                                  You should be able to debug this yourself. I'd run the code from the fxexperience blog to see how it works, stepping through with the debugger if necessary. Once I understood the example, I could apply it to my code. If you don't know how to run a java debugger, now is the time to learn.