blocks|key|113972|text|JRebirth+Application+Framework使用其专用模式wB-CSMvc提供自定义的'CardLayout‘。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|113973|StackModel类将完成这项工作(由org.jrebirth.af:component工件提供)，您可以找到两个用法here和here。|113974|每个'card‘模型都可以使用enum%7CmodelKey标识符调用，并且每个堆栈都有一个唯一的名称。|113975|第一个示例用于JRebirth+Demo+Application，它是一个非常简单的应用程序，它允许将其他JRebirth+showcase应用程序动态加载为JRebirth模块(从一个独立的jar文件中)。|113976|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();
++++}
}|code-block|syntax|javascript|113977|此应用程序将加载其第一个模型(MainModel)，并将其根节点放入场景根节点(StakPane，自动构建)。|113978|MainModel将列出应用程序的所有子模块，以便在其左侧菜单中添加一个按钮条目，并列出一个显示每个模块内容的StackModel。StackModel是通过使用其唯一字符串键的特殊注释加载的。|113979|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;
++++}
}|113980|MainView将负责创建模块菜单：|113981|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;
++++}
}|113982|当任何菜单按钮被触发时，MainController将加载模块内容：|113983|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"));
++++}
}|113984|第二个示例将StackModel加载为innerComponent，并且每个卡都将由一个枚举条目(存储在FXMLPage中)标识，让我们看看FXMLShowCaseModel：|113985|final+InnerComponent<StackModel>+stack+=+CBuilder.innerComponent(StackModel.class,+FXMLPage.class);
++++this.stackModel+=+findInnerComponent(stack);|113986|将枚举条目与Model：|113987|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+%2B+"org.jrebirth.af.showcase.fxml.ui.hybrid.Hybrid");
++++++++++++++++break;
++++++++++++case+IncludedFxml:
++++++++++++++++modelKey+=+Key.create(IncludedModel.class,+new+LoremIpsum());
++++++++++++++++break;
++++++++}

++++++++return+modelKey;
++++}
}|113988|正如卡片列表已知的那样，工具栏项被静态地创建到FXMLShowCaseView中，事件处理也被静态地定义到FXMLShowCaseController中，使用另一种技术：|113989|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));

++++}
}|113990|如果你有任何问题，请告诉我|113991|entityMap|0|LINK|mutability|MUTABLE|url|http://www.jrebirth.org/|1|https://github.com/JRebirth/JRebirth/blob/fbf2539167d9048329ab1285c4fe585981ff7429/org.jrebirth.af/component/src/main/java/org/jrebirth/af/component/ui/stack/StackModel.java|2|https://github.com/JRebirth/JRebirth/blob/fbf2539167d9048329ab1285c4fe585981ff7429/org.jrebirth.af/showcase/demo/src/main/java/org/jrebirth/af/showcase/demo/ui/MainModel.java|3|https://github.com/JRebirth/JRebirth/blob/fbf2539167d9048329ab1285c4fe585981ff7429/org.jrebirth.af/showcase/fxml/src/main/java/org/jrebirth/af/showcase/fxml/ui/main/FXMLShowCaseModel.java|4|http://jrebirth.org/apps/Demo.html^0|0|U|0|0|0|A|1|1O|4|2|1T|4|3|0|0|7|P|4|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1W|8|@]|9|@$A|1X|B|1Y|1|1Z]]|C|$]]|$1|D|3|E|5|6|7|20|8|@]|9|@$A|21|B|22|1|23]|$A|24|B|25|1|26]|$A|27|B|28|1|29]]|C|$]]|$1|F|3|G|5|6|7|2A|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|2B|8|@]|9|@$A|2C|B|2D|1|2E]]|C|$]]|$1|J|3|K|5|L|7|2F|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|2G|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|2H|8|@]|9|@]|C|$]]|$1|S|3|T|5|L|7|2I|8|@]|9|@]|C|$M|N]]|$1|U|3|V|5|6|7|2J|8|@]|9|@]|C|$]]|$1|W|3|X|5|L|7|2K|8|@]|9|@]|C|$M|N]]|$1|Y|3|Z|5|6|7|2L|8|@]|9|@]|C|$]]|$1|10|3|11|5|L|7|2M|8|@]|9|@]|C|$M|N]]|$1|12|3|13|5|6|7|2N|8|@]|9|@]|C|$]]|$1|14|3|15|5|L|7|2O|8|@]|9|@]|C|$M|N]]|$1|16|3|17|5|6|7|2P|8|@]|9|@]|C|$]]|$1|18|3|19|5|L|7|2Q|8|@]|9|@]|C|$M|N]]|$1|1A|3|1B|5|6|7|2R|8|@]|9|@]|C|$]]|$1|1C|3|1D|5|L|7|2S|8|@]|9|@]|C|$M|N]]|$1|1E|3|1F|5|6|7|2T|8|@]|9|@]|C|$]]|$1|1G|3|-4|5|6|7|2U|8|@]|9|@]|C|$]]]|1H|$1I|$5|1J|1K|1L|C|$1M|1N]]|1O|$5|1J|1K|1L|C|$1M|1P]]|1Q|$5|1J|1K|1L|C|$1M|1R]]|1S|$5|1J|1K|1L|C|$1M|1T]]|1U|$5|1J|1K|1L|C|$1M|1V]]]]

<a href="http://www.jrebirth.org" rel="nofollow noreferrer">JRebirth Application Framework</a> provides a custom 'CardLayout' using its dedicated pattern wB-CSMvc.

The <a href="https://github.com/JRebirth/JRebirth/blob/fbf2539167d9048329ab1285c4fe585981ff7429/org.jrebirth.af/component/src/main/java/org/jrebirth/af/component/ui/stack/StackModel.java" rel="nofollow noreferrer">StackModel</a> class will do the job (provided by org.jrebirth.af:component artifact), you can find 2 usages <a href="https://github.com/JRebirth/JRebirth/blob/fbf2539167d9048329ab1285c4fe585981ff7429/org.jrebirth.af/showcase/demo/src/main/java/org/jrebirth/af/showcase/demo/ui/MainModel.java" rel="nofollow noreferrer">here</a> and <a href="https://github.com/JRebirth/JRebirth/blob/fbf2539167d9048329ab1285c4fe585981ff7429/org.jrebirth.af/showcase/fxml/src/main/java/org/jrebirth/af/showcase/fxml/ui/main/FXMLShowCaseModel.java" rel="nofollow noreferrer">here</a>.

Each 'card' model can be called using a enum|modelKey identifier, and each stack has an unique name.

The first sample is used for the <a href="http://jrebirth.org/apps/Demo.html" rel="nofollow noreferrer">JRebirth Demo Application</a>, it's a pretty simple application that will allow to display other JRebirth showcase applications dynamycally loaded as JRebirth module (from a separate and independent jar).

<pre><code>public final class JRebirthDemo extends DefaultApplication&lt;StackPane&gt; {

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

 @Override
 public Class&lt;? extends Model&gt; 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&lt;? extends ResourceItem&lt;?, ?, ?&gt;&gt; getResourceToPreload() {
 return Collections.emptyList();
 }
}
</code></pre>

This application will load its first model (MainModel) and put its root node into the scene root node (StakPane, automatically built).

The MainModel will list all application's sub modules to add a button entries into its left menu, and a StackModel that will display each module content.
The StackModel is loaded using special annotation using its unique String key.

<pre><code>public final class MainModel extends DefaultModel&lt;MainModel, MainView&gt; {

 private final List&lt;ModuleModel&gt; modules = new ArrayList&lt;&gt;();

 @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&lt;ModuleModel&gt; getModules() {
 return this.modules;
 }
}
</code></pre>

The MainView will be in charge to create the module menu:

<pre><code>public final class MainView extends DefaultView&lt;MainModel, BorderPane, MainController&gt; {

 private final List&lt;Button&gt; buttonList = new ArrayList&lt;&gt;();

 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 -&gt; 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;
 }
}
</code></pre>

And the MainController will load the Module content when any menu button is triggered:

<pre><code>public final class MainController extends DefaultController&lt;MainModel, MainView&gt; 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&lt;? extends Model&gt; data = (UniqueKey&lt;? extends Model&gt;) b.getUserData();

 model().sendWave(StackWaves.SHOW_PAGE_MODEL,
 WBuilder.waveData(StackWaves.PAGE_MODEL_KEY, data),
 WBuilder.waveData(StackWaves.STACK_NAME, "DemoStack"));
 }
}
</code></pre>

The second example will load the StackModel as an innerComponent and each card will be identified by an enum entry (stored into FXMLPage), let's see FXMLShowCaseModel :

<pre><code>final InnerComponent&lt;StackModel&gt; stack = CBuilder.innerComponent(StackModel.class, FXMLPage.class);
 this.stackModel = findInnerComponent(stack);
</code></pre>

The enumeration that link enum entry with Model:

<pre><code>public enum FXMLPage implements PageEnum {

 StandaloneFxml,
 IncludedFxml,
 ViewEmbeddedFxml,
 HybridFxml;

 @Override
 public UniqueKey&lt;? extends Model&gt; getModelKey() {
 UniqueKey&lt;? extends Model&gt; 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;
 }
}
</code></pre>

As the card list is known, toolbar item are statically created into FXMLShowCaseView and event handling is also staically defined into FXMLShowCaseController using another technique:

<pre><code>public final class FXMLShowCaseController extends DefaultController&lt;FXMLShowCaseModel, FXMLShowCaseView&gt; {

 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&lt;Class&lt;? extends PageEnum&gt;&gt; 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));

 }
}
</code></pre>

Let me know if you have any question

I'm trying to make a Java program in JavaFX using FXML. However i'm having trouble with the layout management. I want to switch between Panes, just as i'm used to with CardLayout in swing, but i can't seem to get it.

I googled around and didn't find any answers.

Is there any CardLayout equivalent in JavaFX? and if so, can you provide me of an example? That would help my evening a lot!

Here is my FXML code

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

Switch between panes in JavaFX

Java

我正在尝试用JavaFX编写一个使用FXML的Java程序。然而，我在布局管理方面遇到了问题。我想要在窗格之间切换，就像我习惯于在swing中使用CardLayout一样，但我似乎无法实现。我用谷歌搜索了一下，没有找到任何答案。在JavaFX中有没有CardLayout的等价物？如果是这样，你能给我举个例子吗？那会对我...

问在JavaFX中的窗格之间切换
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JavaFX中的窗格之间切换EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在JavaFX中的窗格之间切换
EN