TS 69 JavaFXComposer Sanity

Sanity Tests Specification

Author: Lukas Hasik
Version: 1.0
Last update: 16 May 2010
Introduction: JavaFX Composer is set of plugins for NetBeans IDE that allows easily, graphically create rich UI of JavaFX applications.
Comments: JavaFX Composer plugins are part of NetBeans 6.9 (from Beta). They can be found in all distributions containing JavaFX support. Or at NB update center.


Test suite: Desktop Project

Purpose: Test the main features of JavaFX Composer - new project, designing UI, states, templates state variables, code generation etc.
Setup: NetBeans IDE with JavaFX support.

  1. Create JavaFX Desktop Business Application
    1. File > New Project
    2. Choose JavaFX Category and select JavaFX Desktop Business Application
    3. Click Next button
    4. Provide a name for the project, leave other settings on default values
    5. Press Finish button
    • EXPECTED RESULT: Project is created and set as main project. It creates the Design file and it opens in Editor.
    • EXPECTED RESULT: The created Design file has screen size 480x320
  2. Working with FXZ
    1. Copy nblogo.fxz into your project source directory
    • EXPECTED RESULT: nblogo.fxz appears in palette.
    1. D'n'd the nblogo.fxz item from palette to your design.
    • EXPECTED RESULT: Customize JavaFX Graphics dialog appears with listed nodes from the nblogo.fxz
    1. Check following nodes - "logo", "net" and "beans". Press OK button.
    • EXPECTED RESULT: NetBeans logo and text appears at Design.
    • EXPECTED RESULT: There are three nodes under "scene > graphics" in Navigator.
  3. Create states
    1. Create two new states in your Design - "together" and "split"
    2. Use the + button to create those states -
    • EXPECTED RESULT: New states are created.
  4. Design UI in states
    1. Select the "split" state
    2. Move the three parts of the graphics to new location. Hint - you have to hold CTRL (CMD on Mac) to move the FXZ part into new location
    • EXPECTED RESULT: UI looks differently in the "together" and "split" state.
  5. Add Index Buttons
    1. Select the <master> state because we want following change to propagate into all states
    2. D'n'd "Index Buttons" from palette. Category "Templates".
    • EXPECTED RESULT: Customize Template dialog opens.
    1. Choose "currentState" in "Indexed Component" combobox.
    2. Press OK.
    • EXPECTED RESULT: Buttons are in Design. Code is generated.
  6. Add new state variable
    1. In States part of Design, click >>.
    2. Press + (left) to add new state variable - name it "background"
    3. Add two new states into the "background" (right +) - "white" and "yellow"
  7. Change background of Scene
    1. Select "background" state variable and "yellow" state, select "scene" in Navigator
    2. In Properties, write "Yellow" into "Background Fill"
    3. Press Enter or switch from the "Background Fill" (focus lost)
    • EXPECTED RESULT: Background changes to yellow. You can see it in Design view.
  8. Add Change Color button
    1. Select <master> state
    2. D'n'd new button to your design
    3. In Properties of the button, change the "Text" to "Colors"
    • EXPECTED RESULT: New text of button is visible immediately after confirming(enter or focus lost) the new value of the property.
    1. In Properties of the button, click the pencil File:fxc-sanity-add-action.png and select "Go to next state"
    • EXPECTED RESULT: New function "buttonAction" is generated in Source code. View switches into Source. The "currentState" text is selected.
    1. Change the code "currentState.next();" to "background.nextWrapped();"
  9. Default Interpolator
    1. Select "currentState" state variable
    2. Click the "customize" button
    3. Customizer opens
    4. Change the "Default Interpolator" into "Ease Both"
    5. Set "Default Duration" into "400".
    • EXPECTED RESULT: The changes are visible in States view.
  10. Run Desktop Application
    1. Press Run Main Project button in toolbar
    • EXPECTED RESULT: Project runs.
    • EXPECTED RESULT: Clicking Next/Previous buttons changes from "split" to "together" states of the NetBeans logo. The split has nice transition. Clicking Color button changes the background color independently from the state of the logo.

Test suite: Bindings and Datasources

Purpose: Test that the data sources of JavaFX Composer works correctly
Setup: NetBeans IDE with JavaFX support.

  1. Create JavaFX Mobile Business Application
    1. Click New Project icon in Toolbar
    2. Choose JavaFX Category and select JavaFX Mobile Business Application
    3. Provide a name for the project
    4. Press Finish button
    • EXPECTED RESULT: Project is created correctly. It has main file and it opens in Design with scene size "Mobile 240x320.
  2. Change Project Properties
    1. Right click a JavaFX Project
    2. Choose "Properties", select "Run" category
    3. Select "Standard Execution" radio button
    4. Press OK button
    • EXPECTED RESULT: Value is changed and remembered. When you run the project standard execution is used.
  3. Add Data Source
    1. D'n'd "HTTP Data Source" from palette into your design. Drop it anywhere into scene.
    • {{ Data Customizer opens. "Information" dialog about added sources into your project opens too. File:fxc-sanity-information-dialog.png
    1. Click "OK" on the Information dialog.
    2. Type "http://netbeans.org/api/projects.json" into URL text field
    3. Click "Fetch Data" button
    • EXPECTED RESULT: Nodes appears in table below the Fetch Data button.
    1. Browse to "project" node, select it and press "Add" button
    2. Don't change the name and press OK.
    • EXPECTED RESULT: There is new "project" filter created in the customizer. File:fxc-sanity-ds-customizer.png
    1. Press OK to close the customizer
    • EXPECTED RESULT: The data source has filter named "projects" and the URL is set up.
  4. Add view on data
    1. D'n'd ListView into your design
    2. In Properties of the ListView, open the Items customizer. File:fxc-sanity-open-items-customizer.png
    3. In Customizer, click the "Bind" button in right top corner
    4. In bind customizer, select httpDataSource["projects"] and "All Records" File:fxc-sanity-items-customizer.png
    5. Click "Close" button
    • EXPECTED RESULT: Values of the listView are bound to the data source.
  5. Shown values
    1. In Properties of the listView, click the "+" of "Cell Factory" property
    • EXPECTED RESULT: properties window shows Properties of label of listCell.
    1. Open Customizer of Text property
    2. ...
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