14 Replies Latest reply: Apr 12, 2012 8:11 AM by David Grieve RSS

    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
          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
              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
                    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 ..
                        • 9. Re: How to change the style of Tab Pane Control
                          Pugazhendhi
                          any update pls...
                          • 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
                              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
                                    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.