JavaFXComposerFragmentsTutorial

(Difference between revisions)
(Main Design)
 
Line 97: Line 97:
=== Connecting Designs ===
=== Connecting Designs ===
-
So far the Main and Fragments designs are still disconnected. The tool still do not support visual editing of a design embedding. Therefore we have to code a little bit.
+
So far the Main and Fragments designs are still disconnected. The tool does not yet provide support for embedding design fragments in the visual editor. Therefore, we have to add a few lines of code.  
-
Switch to the Source tab of the "Main" design and add the following code into the "Main" class:
+
Switch to the Source view of the "Main" design and add the following code into the "Main" class:
[[file: javafx-composer-fragments-embedding-code.png]]
[[file: javafx-composer-fragments-embedding-code.png]]
-
Now we can finally run the whole application. Invoke "Run Project" popup menu action on your project node in "Projects" window or press F6 keystroke if your project is the main one.
+
Now we can finally run the whole application. Right-click the project node in the Projects window and choose Run Project or press F6 on your keyboard (if your project is set as the main one).
[[file: javafx-composer-fragments-final-run.png]]
[[file: javafx-composer-fragments-final-run.png]]
-
Note that the "Index Buttons" and "Label" are still cooperating and the animations are running as you have specified in "Fragments" design. This is due to the fact that their instances are held by the same instance of the Fragments design/class. Similarly it would be working even if you would use each fragment in a different Scene.
+
Note that the "Index Buttons" and "Label" components are still synchronized and the animations are running as you have specified in the Fragments design file. This is due to the fact that their instances are held by the same instance of the Fragments design/class. Similarly, it would work this way even if you had used each fragment in a different Scene.
-
Note that this way you can embed multiple instances of the same fragments-design as well as different fragments-designs.
+
In this way you can embed multiple instances of one Fragments design as well as different Fragments designs.
-
Note that the Main design may even control the instances/content/state of the Fragments design. E.g. you may add a new Button into Main design and assign an "action" function with "fragments.currentState.next();" code.
+
Note that the Main design may even control the instances/content/state of the Fragments design. E.g. you may add a new button into the Main design and assign an "action" function with the "fragments.currentState.next();" code.
-
Note to clean up our application we may even delete the "run" function from the "Fragments" design file since it is not needed anymore unless we would like to keep it for testing purposes.
+
To clean up our application, we can even delete the "run" function from the Fragments design file since it is not needed anymore unless we would like to keep it for testing purposes.
=== Advanced Properties ===
=== Advanced Properties ===
-
Still there are two properties which we have not used yet.
+
Still there are two properties which we have not used yet.  
-
Open "Fragments" design editor and select "Design File | Design Fragments" node in Navigator.
+
Open the Fragments design file and select the "Design File | Design Fragments" node in the Navigator window.  
-
In Properties window, set the "Generate getDesignScene Function" property to "true". Switch to the Source tab and unfold the folded guarded-section. You can see that an additional function "getDesignScene" method is generated there. Its body contains a code for a Scene creation similar to the one in the "run" function.
+
In the Properties window, set the "Generate getDesignScene Function" property to "true". Switch to the Source tab and expand the auto-generated code section. You can see that an additional "getDesignScene" method has been generated. Its body contains code that creates a Scene similar to the one in the "run" function.
-
=== Converting Main to Fragment ===
+
=== Switching Between File Types: Main and Fragments ===
-
Let's say you already have a main-design which has a Scene e.g. our Main design and you would like to convert it to a fragments-design so it would be usable by another main-design which represents a Scene.
+
You can also convert existing design files (with a Scene) into a Fragments file without a Scene. In our case, let’s convert the Main.fx file to a Fragments file.  
-
To do so, open your design with a Scene e.g. the Main design from the tutorial. Switch to Design tab and select "Design File | scene [Scene]" node in Navigator.
+
To do so, open the Main design file in the Design view. In the Navigator window, select the "Design File | scene [Scene]" node.
-
In Properties window, press "Code" toggle-button to show properties in Code category. A new property named "Generate Scene" appears. Set it to "false".
+
In the Properties window, press the "Code" toggle-button to show properties in the Code category. Set the "Generate Scene" property to "false".
 +
 +
Note that the original "Design File | scene [Scene]" node is replaced with the "Design File | Design Fragments" node in the Navigator window.  
-
Note that your "Design File | scene [Scene]" node is replaced by "Design File | Design Fragments" node in Navigator.
+
Now switch to the "Source" tab and expand the folded guarded section. You can see that the Main class does not contain a definition of the "scene" instance as well as the "getDesignScene" function. You have actually converted your Main design file to become a Fragments design file.  
-
Now switch to "Source" tab and unfold the folded guarded-section. You can see that the Main class does not contain a definition of the "scene" instance as well as "getDesignScene" function. You have actually switch your Main design to a fragments-design.
+
Similarly, you can convert the Fragments design file back to the Main design file. Switch to the Design view and select the "Design File | Design Fragments" node in Navigator window. In the Properties window, set the "Generate Scene" property to "true".  
-
Similarly you can return back from fragments-design to a main-design. Switch to "Design" tab, select the "Design File | Design Fragments" node in Navigator. The Properties window is having "Generate Scene" property. Set it to "true".
+
In this way, you can change your Fragments design files to regular design files (with the Scene) at any time.  
-
Similarly you can turn your "Fragments" design to a main-design.
+
This way you can switch between main and fragments type of a design
-
 
+
-
This way you can switch between main and fragments type of a design.
+
=== Sample ===
=== Sample ===
-
You can create a new project from "Media View" sample project template in "Samples | JavaFX" category. It demonstrates the design-fragment concept with a single Main.fx design containing the Scene and Stage and multiple fragment-designs which are inserted into the Scene in the Main design.
+
You can create a new project from the Media View sample project included in the IDE. Open this sample from the Samples > JavaFX category. This sample demonstrates the design-fragment concept with a single Main.fx design containing the Scene and Stage and multiple fragment-designs which are inserted into the Scene in the Main design.

Current revision as of 17:44, 28 May 2010

Contents

Using Multiple Design Fragments in JavaFX Composer Projects

Goal

The goal of this tutorial is to show how you can create a complex JavaFX application using multiple design files.

Prerequisites

Before reading this tutorial, read all basic tutorials to learn how to use the most essential features of JavaFX Composer, in particular, states, templates, properties, and generated source code.

Create a new project using the "JavaFX | JavaFX Desktop Bussiness Application" project template. Leave the "Create Design File" checkbox selected.

The new project contains a single design file that is created using the "JavaFX | JavaFX Desktop Design File" file template. Note that this design type contains a Scene instance, which can be edited visually in the Design view.

Using Fragments Design File Template

First, let's create a design file for later reuse. The fragments design represents a collection of components that are not placed on a scene. Therefore, this design type can be reused in other designs or custom code.

Invoke the "File | New File..." action from the main menu. In the wizard, select the "JavaFX" category and choose the "JavaFX Fragments Design File" file template. This template is used to create fragments design files.

file: javafx-composer-fragments-design-file-template.png

Click Next, enter "Fragments" as the file name, and click Finish to create the file. The new design file opens.

Note the following differences of a fragments design file from a usual design file with a scene. The Navigator window has no "Design File | scene [Scene]" node. Instead of it, there is a "Design File | Design Fragments" node. Select this node in the Navigator window or in the background of the Design view. You will see the following content:

The Design view switches to the "Desktop Infinite" profile. Similarly, the Navigator window (in the Design view) displays "Design Fragments" as the edited scope. The Properties window shows properties of the "Design Fragments" node when it is selected in the Navigator window. The properties of the fragments design file will be described later.

Source Code

Switch to the Source tab and expand the folded code. You will see this:

file: javafx-composer-fragments-design-file-code.png

Note that the code generated in the guarded section (on a gray background) does not have a "scene" variable as well as the "getDesignScene" function. Now the Fragments class represents an empty design.

The "run" script-level function is still present. This function constructs a new Stage and a new Scene and calls the "getDesignRootLevelNodes" function in the Fragments class instance.

The "run" function allows you to quickly run and see the designed fragments at runtime. To run the file, choose "Run File" from the popup menu of the "Fragments" file node in the "Projects" window or press "Shift-F6" while you are in the editor.

The "run" function can be deleted at any time since it is not necessary for your application, because you have the "Main" design file as a starting point/Scene. For the purposes of this tutorial, do NOT delete the "run" function now.

Fragments

Switch back to the Design view. Now it is the time to create our own fragments:

  1. Start with an empty fragments design file.
  2. Drag an Index Buttons template from the Palette and drop it somewhere in the Design view. In the Customizer window, select "currentState" as the indexed component.
  3. Drag a Label control from the Palette and drop it somewhere else in the Design view
  4. Open the Details window of the "text" property of the "Label" control.
  5. Press the Bind button and select "currentState" and "Actual State Name" in the lists. Close the window.
  6. Using the States view, add new states named "Init", "Shown", "Rotate".

Optionally:

  • Show the State Variables view and edit the "currentState" to use 1000ms default duration and LINEAR default interpolator.
  • Do some changes to the Label in each state.

This is going to be our design. In the Navigator window, you can see that we have two fragments in our design:

  • Index Buttons
  • Label

file: javafx-composer-fragments-design-finished.png

Running the Fragments

Click the "Run File" menu action or press Shift+F6 on your keyboard to run the fragments design file. When the application starts, you can see that the "Index Buttons" and Labels fragments overlap with each other, but when you were editing them in the Design view, they were positioned properly.

Note: if you see just an empty design, you have probably used the "Run Project" action or pressed F6 instead of running only the Fragments file.

file: javafx-composer-fragments-design-file-run.png

This is one of the main differences of fragments design files from regular design/mobile design files. Fragments are meant to be used as they are, without additional shifting or adjusting, in different parts of your UI, Scene, design, and custom code. Therefore, the tool ignores the layoutX and layoutY properties of the root-level components, such as the "tile" and "label" components and does not set these properties in the generated source code.

Although the following procedure is not a recommended one, but if you want to use/set these properties anyway, do the following:

  • Select the "Design File | Design Fragments" node in the Navigator window.
  • In the Properties window, set the "Generate LayoutXY for Root-level Components" property to "true".
  • If you run the file again, you will see the Scene exactly as it has been designed in the tool.

For the purposes of this tutorial, do NOT set the "Generate LayoutXY ..." property and leave it set to "false".

Note that in both cases, when the "Fragments" design is run, it is fully functional and you can press the Previous and Next buttons to control the Label's text.

Main Design

Now, we will edit our Main design file. Open the "Main" file and switch to the Design view:

  • Add a VBox container to the Design.
  • Add a Label to the VBox and change its "Text" property to "The Index Buttons Fragment:" string.
  • Add a Panel to the VBox and change its "Instance Name" to "indexButtonsPlaceHolder".
  • Add a Label to the VBox and change its "Text" property to "The Label Fragment:" string.
  • Add a Panel to the VBox and change its "Instance Name" to "labelPlaceHolder".

Note that the "indexButtonsPlaceHolder" and "labelPlaceHolder" panels are now empty. We will place the fragments from the "Fragments" design into these panels.

file: javafx-composer-fragments-main-file-designed.png

Connecting Designs

So far the Main and Fragments designs are still disconnected. The tool does not yet provide support for embedding design fragments in the visual editor. Therefore, we have to add a few lines of code.

Switch to the Source view of the "Main" design and add the following code into the "Main" class:

file: javafx-composer-fragments-embedding-code.png

Now we can finally run the whole application. Right-click the project node in the Projects window and choose Run Project or press F6 on your keyboard (if your project is set as the main one).

file: javafx-composer-fragments-final-run.png

Note that the "Index Buttons" and "Label" components are still synchronized and the animations are running as you have specified in the Fragments design file. This is due to the fact that their instances are held by the same instance of the Fragments design/class. Similarly, it would work this way even if you had used each fragment in a different Scene.

In this way you can embed multiple instances of one Fragments design as well as different Fragments designs.

Note that the Main design may even control the instances/content/state of the Fragments design. E.g. you may add a new button into the Main design and assign an "action" function with the "fragments.currentState.next();" code.

To clean up our application, we can even delete the "run" function from the Fragments design file since it is not needed anymore unless we would like to keep it for testing purposes.

Advanced Properties

Still there are two properties which we have not used yet.

Open the Fragments design file and select the "Design File | Design Fragments" node in the Navigator window.

In the Properties window, set the "Generate getDesignScene Function" property to "true". Switch to the Source tab and expand the auto-generated code section. You can see that an additional "getDesignScene" method has been generated. Its body contains code that creates a Scene similar to the one in the "run" function.

Switching Between File Types: Main and Fragments

You can also convert existing design files (with a Scene) into a Fragments file without a Scene. In our case, let’s convert the Main.fx file to a Fragments file.

To do so, open the Main design file in the Design view. In the Navigator window, select the "Design File | scene [Scene]" node.

In the Properties window, press the "Code" toggle-button to show properties in the Code category. Set the "Generate Scene" property to "false".

Note that the original "Design File | scene [Scene]" node is replaced with the "Design File | Design Fragments" node in the Navigator window.

Now switch to the "Source" tab and expand the folded guarded section. You can see that the Main class does not contain a definition of the "scene" instance as well as the "getDesignScene" function. You have actually converted your Main design file to become a Fragments design file.

Similarly, you can convert the Fragments design file back to the Main design file. Switch to the Design view and select the "Design File | Design Fragments" node in Navigator window. In the Properties window, set the "Generate Scene" property to "true".

In this way, you can change your Fragments design files to regular design files (with the Scene) at any time.

This way you can switch between main and fragments type of a design

Sample

You can create a new project from the Media View sample project included in the IDE. Open this sample from the Samples > JavaFX category. This sample demonstrates the design-fragment concept with a single Main.fx design containing the Scene and Stage and multiple fragment-designs which are inserted into the Scene in the Main design.

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo