2015-10-31 14 views
5

मैं TabPane का उपयोग कर अगली/पिछली विंडो बनाने की कोशिश कर रहा हूं। मैंने TabPane का उपयोग करने का निर्णय लिया क्योंकि में इसका उपयोग करना और डिजाइन करना आसान है SceneBuilder। एप्लिकेशन के लिए शुरू में, मैं इस के बाद इस-टैबपेन में टैबबार को कैसे छिपाना है?

enter image description here

TabPane की उपस्थिति के लिए है अब

tabPane.setTabMinHeight(-10); 
tabPane.setTabMaxHeight(-10); 

TabBar को छिपाने के लिए वहाँ अभी भी प्रयोग किया जाता है आप देख सकते हैं, टैबबार (टाइटलबार के नीचे) का एक छोटा सा हिस्सा बना हुआ है। मैं इसे पूरी तरह से कैसे छुपा सकता हूं ताकि मेरा TabPane सामान्य Pane जैसा दिखता है लेकिन इसकी सभी कार्यक्षमता बरकरार है?

उत्तर

6

एक विज़ार्ड-प्रकार इंटरफ़ेस के रूप में छिपे हुए टैब के साथ TabPane का उपयोग करना एक दिलचस्प विचार है, जिसे मैंने नहीं सोचा था और मुझे लगता है।

आप बाह्य CSS फ़ाइल में निम्नलिखित के साथ टैब छिपा सकते हैं:

.tab-pane { 
    -fx-tab-max-height: 0 ; 
} 
.tab-pane .tab-header-area { 
    visibility: hidden ; 
} 

यहाँ एक SSCCE है। इस में मैंने टैब फलक सीएसएस क्लास wizard दिया।

import javafx.application.Application; 
import javafx.beans.binding.Bindings; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.control.Label; 
import javafx.scene.control.Tab; 
import javafx.scene.control.TabPane; 
import javafx.scene.layout.BorderPane; 
import javafx.scene.layout.HBox; 
import javafx.stage.Stage; 

public class TabPaneAsWizard extends Application { 

    @Override 
    public void start(Stage primaryStage) { 
     TabPane tabPane = new TabPane(); 
     tabPane.getStyleClass().add("wizard"); 
     for (int i = 1; i<=10; i++) { 
      tabPane.getTabs().add(createTab(i)); 
     } 
     Button previous = new Button("Previous"); 
     previous.setOnAction(e -> 
      tabPane.getSelectionModel().select(tabPane.getSelectionModel().getSelectedIndex()-1)); 
     previous.disableProperty().bind(tabPane.getSelectionModel().selectedIndexProperty().lessThanOrEqualTo(0)); 
     Button next = new Button("Next"); 
     next.setOnAction(e -> 
      tabPane.getSelectionModel().select(tabPane.getSelectionModel().getSelectedIndex()+1)); 
     next.disableProperty().bind(
       tabPane.getSelectionModel().selectedIndexProperty().greaterThanOrEqualTo(
         Bindings.size(tabPane.getTabs()).subtract(1))); 

     HBox buttons = new HBox(20, previous, next); 
     buttons.setAlignment(Pos.CENTER); 

     BorderPane root = new BorderPane(tabPane, null, null, buttons, null); 
     Scene scene = new Scene(root, 600, 600); 
     scene.getStylesheets().add("tab-pane-as-wizard.css"); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

    private Tab createTab(int id) { 
     Tab tab = new Tab(); 
     Label label = new Label("This is step "+id); 
     tab.setContent(label); 
     return tab ; 
    } 

    public static void main(String[] args) { 
     launch(args); 
    } 
} 

टैब फलक के रूप में wizard.css:

.wizard { 
    -fx-tab-max-height: 0 ; 
} 
.wizard .tab-header-area { 
    visibility: hidden ; 
} 

enter image description here

+0

यह मेरी समस्या हल हो गया। आपका बहुत बहुत धन्यवाद! अब मैं प्रत्येक पृष्ठ को जीयूआई डिजाइनर में अलग से डिज़ाइन कर सकता हूं। – Dipu

+0

यदि आपके पास एकाधिक टैब खोले गए हैं, तो यह आपके लिए काम करता है? मेरे मामले में, केवल एक टैब खोलने के लिए यह काम करता है, लेकिन जब मैं एक और खोलता हूं तो छोटा बार दिखाई देता है क्योंकि ओपी ने इसका उदाहरण दिया है। – Jacks

0

ऐसा करने का आसान तरीका पृष्ठभूमि के साथ यह सिंक्रनाइज़ करने के लिए रंग बदल रहा है

.tab-pane { 
    -fx-tab-max-height: 0; 

} 

.tab-pane .tab-header-area .tab-header-background { 
    -fx-background-color: #843487;//your background colour code 

} 
.tab-pane .tab 
{ 
    -fx-background-color: #843487;//your background colour code 

} 
संबंधित मुद्दे