2013-04-23 17 views
18

में पैन के बीच स्विच करें मैं FXML का उपयोग कर जावाएफएक्स में जावा प्रोग्राम बनाने की कोशिश कर रहा हूं। हालांकि मुझे लेआउट प्रबंधन में परेशानी हो रही है। मैं पैन के बीच स्विच करना चाहता हूं, जैसे कि मुझे स्विंग में कार्डलाउट के साथ उपयोग किया जाता है, लेकिन मुझे यह प्रतीत नहीं होता है।जावाएफएक्स

मैं चारों ओर googled और कोई जवाब नहीं मिला।

क्या जावाएफएक्स में कोई कार्डलायआउट बराबर है? और यदि हां, तो क्या आप मुझे एक उदाहरण प्रदान कर सकते हैं? इससे मेरी शाम बहुत मदद मिलेगी!

यहाँ मेरी FXML कोड

<AnchorPane id="anchorPane" prefHeight="324.0" prefWidth="530.0" xmlns:fx="http://javafx.com/fxml" fx:controller="javafxapplication2.SampleController"> 
    <children> 
    <Pane fx:id="mainScreen" layoutX="6.0" prefHeight="324.0" prefWidth="518.0"> 
     <children> 
     <Button layoutX="254.0" layoutY="37.0" mnemonicParsing="false" text="Button" /> 
     </children> 
    </Pane> 
    <Pane fx:id="loginScreen" prefHeight="324.0" prefWidth="530.0"> 
     <children> 
     <TextField id="password" fx:id="username" layoutX="142.0" layoutY="106.0" prefWidth="200.0" /> 
     <TextField fx:id="password" layoutX="142.0" layoutY="140.0" prefWidth="200.0" /> 
     <Label fx:id="label" layoutX="126.0" layoutY="120.0" minHeight="16.0" minWidth="69.0" /> 
     <Button fx:id="button" layoutX="213.0" layoutY="196.0" onAction="#handleButtonAction" onKeyPressed="#handleButtonAction" text="Login" /> 
     </children> 
    </Pane> 
    </children> 
</AnchorPane> 

उत्तर

30

गैर एनिमेटेड संक्रमण

आप अपने शीशे के बीच एनिमेटेड बदलाव की जरूरत नहीं है है, तो आप कर सकते हैं:

  1. बदलें एक नया दृश्य बनाकर पूरा दृश्य और set that scene on your Stage या
  2. बस एक स्पेस बदलें पैरेंट लेआउट में आईफ़िक फलक, अपने माता-पिता से पुराने फलक को हटाकर और अपना नया फलक जोड़कर (माता-पिता के children list में हेरफेर करके) या
  3. अपने सभी पैन को StackPane में रखें और जिस फलक को आप शीर्ष पर प्रदर्शित करना चाहते हैं उसे ले जाएं stack's child list

एनिमेट होने वाले संक्रमणों

आप अपने शीशे के बीच एनिमेटेड transtions चाहते हैं, तो JavaFX में एकाधिक स्क्रीन के प्रबंधन पर एंजेला Caicedo के दो भाग श्रृंखला देखें:

एंजेला का समाधान का उपयोग Transitions या animations को स्टैक में पैन के बीच प्रबंधित करने के लिए एक अलग कस्टम स्क्रीनकंट्रोलर कक्षा के साथ करना है।


फ़्रेमवर्क

फ़्रेमवर्क JFXFlow और WebFX की तरह भी अपने अनुप्रयोग के लिए एक ब्राउज़र शैली इंटरफेस प्रदान कर सकते हैं, उपयोगकर्ताओं को वापस का उपयोग कर स्क्रीन और आगे बटन और एक इतिहास सूची के बीच आगे और पीछे स्विच करने की इजाजत दी।

अद्यतन 2017

मुझे लगता है कि दोनों संदर्भित चौखटे पर विकास के ऊपर अब मृत है।अन्य चौखटे जो काम चल रहा है कर रहे हैं:

और कई अन्य शामिल हैं (मैं एक व्यापक सूची यहां उपलब्ध नहीं कराएगा)।


संबंधित

4

यहां बताया गया है कि मैं यह कर: (इस उदाहरण में, मैं उनकी संगत नियंत्रकों के साथ दो FXML दस्तावेज बनाया है वे FXMLLogin कहा जाता है। .fxml, और Home.fxml, क्रमशः)।

तो, घर के लिए FXMLLogin से जाने के लिए,

इस उदाहरण में, मैं FXMLLoginController के भीतर एक विधि जो कि फार्म पर "प्रवेश" बटन का जवाब दबाया जा रहा बनाया:

@FXML 
private void login(javafx.event.ActionEvent event) throws IOException 
{ 
    if(pwf1.getText().equals("alphabetathetagamma")) 
    { 
      Parent blah = FXMLLoader.load(getClass().getResource("Home.fxml")); 
      Scene scene = new Scene(blah); 
      Stage appStage = (Stage) ((Node) event.getSource()).getScene().getWindow(); 
      appStage.setScene(scene); 
      appStage.show(); 
    } 
    else 
    { 
      label1.setText("Password is incorrect. Please Try Again"); 
    } 
} 

ध्यान दें कि @ एफएक्सएमएल बेहद महत्वपूर्ण है।

यदि मैं आपका प्रश्न सही ढंग से समझ गया, तो यह चाल चलनी चाहिए।

पैन के बीच स्विचिंग बिल्कुल स्पष्ट नहीं है, और मुझे मिले वेब पर किसी भी ट्यूटोरियल पर स्पष्ट रूप से उल्लिखित नहीं है। मुझे पहली बार इसे समझने से पहले मुझे खुद को बड़े पैमाने पर Google करना पड़ा। सौभाग्य से, यह वास्तव में काफी आसान है जब आप इसे लटका लेंगे।

मुझे आशा है कि मैंने आपके प्रश्न को गलत समझा नहीं है? अगर आपको यह चाहिए तो मुझे बताएं :)

0

JRebirth Application Framework अपने समर्पित पैटर्न डब्लूबी-सीएसएमवीसी का उपयोग करके एक कस्टम 'कार्डलाउट' प्रदान करता है।

StackModel कक्षा नौकरी करेगी (org.jrebirth.af:component artifact द्वारा प्रदान की गई), आप 2 उपयोग here और here पा सकते हैं।

प्रत्येक 'कार्ड' मॉडल को enum | modelKey पहचानकर्ता का उपयोग करके बुलाया जा सकता है, और प्रत्येक स्टैक का एक अद्वितीय नाम होता है।

पहला नमूना JRebirth Demo Application के लिए उपयोग किया जाता है, यह एक बहुत ही सरल एप्लीकेशन है जो अन्य जेआरबर्थ शोकेस अनुप्रयोगों को गतिशील रूप से जेआरबर्थ मॉड्यूल (एक अलग और स्वतंत्र जार से) के रूप में लोड करने की अनुमति देगा।

public final class JRebirthDemo extends DefaultApplication<StackPane> { 

    public static void main(final String... args) { 
     Application.launch(JRebirthDemo.class, args); 
    } 

    @Override 
    public Class<? extends Model> firstModelClass() { 
     return MainModel.class; 
    } 

    @Override 
    protected String applicationTitle() { 
     return "JRebirth Demo Application"; 
    } 

    @Override 
    protected void customizeScene(final Scene scene) { 
     super.customizeScene(scene); 

     addCSS(scene, DemoStyles.DEFAULT); 
     addCSS(scene, WorkbenchStyles.DEFAULT); 
    } 

    @Override 
    protected void customizeStage(final Stage stage) { 
     // Center the stage 
     stage.centerOnScreen(); 
    } 

    @Override 
    protected List<? extends ResourceItem<?, ?, ?>> getResourceToPreload() { 
     return Collections.emptyList(); 
    } 
} 

इस आवेदन अपनी पहली मॉडल (MainModel) लोड और दृश्य रूट नोड (StakPane, स्वचालित रूप से बनाया गया) में अपने रूट नोड डाल देंगे।

मेनमोडेल अपने बाएं मेनू में बटन प्रविष्टियों को जोड़ने के लिए सभी एप्लिकेशन के उप मॉड्यूल सूचीबद्ध करेगा, और एक स्टैकमोडेल जो प्रत्येक मॉड्यूल सामग्री प्रदर्शित करेगा। स्टैकमोडेल को अपनी अनन्य स्ट्रिंग कुंजी का उपयोग करके विशेष एनोटेशन का उपयोग करके लोड किया जाता है।

public final class MainModel extends DefaultModel<MainModel, MainView> { 

    private final List<ModuleModel> modules = new ArrayList<>(); 

    @Link("DemoStack") 
    private StackModel stackModel; 

    @Override 
    protected void initModel() { 
     for (final ModuleModel mm : getModels(ModuleModel.class)) { 
      this.modules.add(mm); 
     } 
    } 

    @Override 
    protected void showView() { 
     view().node().setCenter(this.stackModel.node()); 
    } 

    @Override 
    protected void hideView() { 
     // Nothing to do yet 

    } 

    List<ModuleModel> getModules() { 
     return this.modules; 
    } 
} 

MainView आरोप में हो जाएगा मॉड्यूल मेनू बनाने के लिए:

public final class MainView extends DefaultView<MainModel, BorderPane, MainController> { 

    private final List<Button> buttonList = new ArrayList<>(); 

    public MainView(final MainModel model) throws CoreException { 
     super(model); 
    } 

    @Override 
    protected void initView() { 

     node().setPrefSize(800, 600); 

     node().setLeft(createMenu()); 

    } 

    @Override 
    public void start() { 
     this.buttonList.stream().findFirst().ifPresent(button -> button.fire()); 
    } 

    private Node createMenu() { 
     final VBox box = new VBox(); 

     for (final ModuleModel mm : model().getModules()) { 
      final Node n = createModuleButton(mm); 
      VBox.setMargin(n, new Insets(4, 4, 4, 4)); 
      box.getChildren().add(n); 
     } 
     return box; 
    } 

    private Node createModuleButton(final ModuleModel mm) { 
     final Button b = new Button(mm.moduleName()); 
     b.getStyleClass().add("menuButton"); 
     b.setPrefSize(100, 50); 
     b.setOnAction(controller()::onButtonFired); 
     b.setUserData(Key.create(mm.getClass())); 
     this.buttonList.add(b); 
     return b; 
    } 
} 

और MainController मॉड्यूल सामग्री जब किसी भी मेनू बटन शुरू हो रहा है लोड होगा:

public final class MainController extends DefaultController<MainModel, MainView> implements ActionAdapter { 

    public MainController(final MainView view) throws CoreException { 
     super(view); 
    } 

    public void onButtonFired(final ActionEvent event) { 
     final Button b = (Button) event.getSource(); 
     final UniqueKey<? extends Model> data = (UniqueKey<? extends Model>) b.getUserData(); 

     model().sendWave(StackWaves.SHOW_PAGE_MODEL, 
         WBuilder.waveData(StackWaves.PAGE_MODEL_KEY, data), 
         WBuilder.waveData(StackWaves.STACK_NAME, "DemoStack")); 
    } 
} 

दूसरा उदाहरण StackModel को एक आंतरिक कॉम्पोनेंट के रूप में लोड करेगा और प्रत्येक कार्ड को एनम एंट्री (FXMLPage में संग्रहीत) द्वारा पहचाना जाएगा, चलिए FXMLShowCaseModel देखें:

final InnerComponent<StackModel> stack = CBuilder.innerComponent(StackModel.class, FXMLPage.class); 
    this.stackModel = findInnerComponent(stack); 

गणन कि मॉडल के साथ enum प्रविष्टि लिंक:

public enum FXMLPage implements PageEnum { 

    StandaloneFxml, 
    IncludedFxml, 
    ViewEmbeddedFxml, 
    HybridFxml; 

    @Override 
    public UniqueKey<? extends Model> getModelKey() { 
     UniqueKey<? extends Model> modelKey; 

     switch (this) { 

      default: 
      case ViewEmbeddedFxml: 
       modelKey = Key.create(EmbeddedModel.class); 
       break; 
      case StandaloneFxml: 
       modelKey = Key.create(StandaloneModel.class); 
       break; 
      case HybridFxml: 
       modelKey = Key.create(HybridModel.class, FXMLModel.KEYPART_FXML_PREFIX + "org.jrebirth.af.showcase.fxml.ui.hybrid.Hybrid"); 
       break; 
      case IncludedFxml: 
       modelKey = Key.create(IncludedModel.class, new LoremIpsum()); 
       break; 
     } 

     return modelKey; 
    } 
} 

के रूप में कार्ड सूची में जाना जाता है, उपकरण पट्टी आइटम स्थिर FXMLShowCaseView में बनाई गई हैं और घटना से निपटने के भी staically एक और तकनीक का उपयोग कर FXMLShowCaseController में परिभाषित किया गया है:

public final class FXMLShowCaseController extends DefaultController<FXMLShowCaseModel, FXMLShowCaseView> { 

    private static final Logger LOGGER = LoggerFactory.getLogger(FXMLShowCaseController.class); 

    public FXMLShowCaseController(final FXMLShowCaseView view) throws CoreException { 
     super(view); 
    } 

    @Override 
    protected void initEventAdapters() throws CoreException { 

     // WaveData<Class<? extends PageEnum>> stackName = Builders.waveData(StackWaves.STACK_PAGES, FXMLShowCaseModel.STACK_PAGES); 

     // Manage Ui Command Button 
     linkWave(view().getShowIncluded(), ActionEvent.ACTION, StackWaves.SHOW_PAGE_ENUM, 
       WBuilder.waveData(StackWaves.PAGE_ENUM, FXMLPage.IncludedFxml)); 

     linkWave(view().getShowEmbedded(), ActionEvent.ACTION, StackWaves.SHOW_PAGE_ENUM, 
       WBuilder.waveData(StackWaves.PAGE_ENUM, FXMLPage.ViewEmbeddedFxml)); 

     linkWave(view().getShowStandalone(), ActionEvent.ACTION, StackWaves.SHOW_PAGE_ENUM, 
       WBuilder.waveData(StackWaves.PAGE_ENUM, FXMLPage.StandaloneFxml)); 

     linkWave(view().getShowHybrid(), ActionEvent.ACTION, StackWaves.SHOW_PAGE_ENUM, 
       WBuilder.waveData(StackWaves.PAGE_ENUM, FXMLPage.HybridFxml)); 

    } 
} 

मुझे बताएं कि क्या आपके पास कोई प्रश्न है