The following documentation is current as of the 1.2.0 release of Scenic View. The comments section at the bottom of this page is open for other questions and feedback that may be included into a future release.

Launching Scenic View

There are three different ways of launching the application

1) From Code
This was the only previous option of launching Scenic View and it is still supported. Basically only one line of code is needed

ScenicView.show(node);

or

ScenicView.show(scene);

In this configuration Scenic View will display only the desired Node/Scene. In general this approach is not recommended as the java agent option is better and does not couple the application code to Scenic View.

2) Java Agent
Scenic View can also be launched as a java agent using the following command line option:

-javaagent:ScenicView.jar

In this configuration Scenic View will autodiscover any JavaFX Stage in the application.

3) Standalone
The easiest way to use Scenic View is double clicking the ScenicView.jar file to launch it as a Standalone application. In this configuration Scenic View will autodiscover all JavaFX applications and every Stage in them. For allowing autodiscovery Scenic View will need:

  • tools.jar (and attach.dll on path)
  • jfxrt.jar

Both jar paths will be requested in a dialog in case they are not on the classpath.

NOTE:This option is still under test, in case it does not work as expected launch Scenic View from a console and send us the output from Scenic View. You can get more diagnostic information by running Scenic View with the “-debug” command.

File Menu


There are two options in the file menu

1) Configure Classpath: Using this options tools.jar and jfxrt.jar’s paths can be changed. This options will all be shown when ScenicView is launched in standalone mode

2) Exit Scenic View that closes the ScenicView and saves user settings in a properties file.

Display Options

The display options menu provides several options related to configuring Scenic View:

  1. Show Default Properties: If this option is checked those properties whose value is the original default value will be faded in the detail panes, otherwise they will be removed from the view. Note: This feature is slightly different in Full Properties Panel and Styles Panel, instead of using default values they use empty values. The default properties are showing in the figure below:
  2. Show CSS Properties: When this option is selected Scenic View will show the CSS property names for the selected node beside the JavaFX property name. This saves having to refer to the CSS Reference Guide:
  3. Ruler: It is a submenu with two options that will help for alignment purposes. When Show Ruler is enabled a number of cross lines will appear in the original scene. The distance between those parallel lines can be customized and also the color.
  4. Show Filtered Nodes In Tree: When this options is enabled every single node will appear in the tree even tough they are filtered or invisible (in both cases nodes will be faded). See also the Filters section below.
  5. Show Invisible Nodes In Tree: This option is only enabled if the previous one is not selected. When it is checked the invisible nodes will not be included in the scenegraph tree, this option can be seen as a filter for invisible nodes. See also filters below.
  6. Show Node IDs: If this options is selected node IDs will be included in the tree
  7. Collapse control in tree: If this option is selected all the controls will be collapsed in the tree by default.
  8. Collapse container controls in tree: This check is only enabled when the previous one is selected. The purpose of the option is to
    expand container controls (like SplitPane, TitledPane, etc.) by default when is selected

Scenegraph Menu

In this menu there are various options to make selecting components easier, and also to reduce the need to restart the application in certain situations:

  1. Auto-Refresh Scenegraph: By default this option is selected and implies that every change in the scenegraph would produce an update in the scenegraph tree representation, this is interesting in general but could slow down certain animations or fast modifications of the application. When it is unchecked the tree will not be automatically updated, but it could be done manually (i.e.  pressing enter on a filter)
  2. Auto-Refresh Stylesheets: This feature is particularly useful but it is only enabled if there are css files outside in the file system (it has no use for a file inside a jar file). In those situations when the option is active Scenic View will check if there are modifications in the stylesheets and apply them in that case. With this feature you can modify css files and see how it works directly without restarting the application.
  3. Register shortcuts: ScenicView will register some keyboard shortcuts to make it easier its use if this option is selected.
    • Ctrl + Shift + R: Activate/Deactivate the ruler
    • Ctrl + Shift + S: Activate/Deactivate the component select on click
    • Ctrl + Shift + D: Deselect active node
  4. Components select on click: Sometimes it is not easy (even with filters) to find a particular node in the scenegraph, when this option is activated you can select a node just by clicking on it and it will be selected in the scenegraph tree inside Scenic View. To make it easier to determine which node you are about to select, all the rest of the scene will be faded and a small tooltip will appear near the node.
  5. Ignore MouseTransparent Nodes: This options allows for you to ignore components to be selected on click when they are mouse transparent, because typically those nodes could be in front of the actually important nodes. Unchecking this option will treat MouseTransparent nodes as all the other.

Details Menu

The details menu includes several options related with node details tab. It will only be shown when the tab is selected

  1. Copy details to clipboard: This option copies all the details of the selected node to the clipboard, it can be use to compare the differences between nodes or the evolution of those values
  2. Show Bounds Overlays: If this option is checked, when a node is selected in the tree two rectangles will be drawn representing its bounds in parent (filled yellow rectangle) and its layout bounds (stroked (but unfilled) green rectangle)
  3. Show Baseline Overlay: If this option is selected, the selected node will have a red line drawn to show where the baseline is.

Events Menu


This menu is related and only shown when the events tab is selected.

  1. Enable event tracing: Checking this option event tracing will be enabled and shown in the events tab
  2. Clear events: This option allows to empty all the previously recorded events

Animations Menu

 

 

Deselecting animations enabled all the animations will be stopped

Filters


Filters are use to find relevant nodes or information in an easy way. Filtering can be displayed in different ways depending on the options selected in the Display Options menu mentioned above. For example, if the ‘show filtered nodes in tree’ option is selected every node that does not match the filters will be faded. If the option is not selected the unmatching nodes will be removed from the tree unless the have any children that matches them. In that case those nodes will be faded.

Example: “Show filtered nodes in tree” not selected, faded nodes whose children are valid:


Example: Same situations but “Show filtered nodes in tree” is now selected

In this area three types of filters can be found, their filtering effects can be added:

ID Filter

This filter can be used to find a node whose ID is known. Type the desired ID in the textfield and the Scenegraph will be updated on each keystroke to find the nodes that contain this text in their ID.

Class Filter

This filter is used to filter nodes by their class name, the filter does not include the package.

Property Filter

The property filter is not used to filter nodes, instead it filters the properties of the selected node (it is disabled while no node has been selected). The filtering will be done on property names and values. All properties not matching the filter will be removed from the view until the filter is cleared.

Scenegraph Tree


The structure of the scenegraph in the application is shown here, each node could be expanded (to see its children) or collapsed. The nodes which do not have children will not be expandable. Controls are included in a collapsed state by default even though they can be expanded to see their skin and other nodes. The behavior of this area depends on your preferences that can be changed in the menu and that have already been explained above, but to sum up:

  • Normal nodes: If the node isn’t faded or red, the node is valid for all the filters currently set.
  • Red nodes: The node that has the focus is painted in red.
  • Faded nodes: The nodes could be faded for various reasons depending on the preferences, i.e. if they are invisible, not matching the filter, not matching the filter but parents of a node that actually does etc.
  • Invisible nodes: Nodes could be removed from the tree if Show Filtered Nodes In Tree is not selected. In this situation nodes which do not match the filters will not appear except if they are parents of a matching node

When any node is selected some details panes will be shown on the right and also bounds rectangles could be shown over the node. A right click on the tree will deselect active node.

A special situation happens when popups are shown, in that case the structure is changed to:


Where the root node is now under the Application virtual node and the popups are included on “SubWindows-SubWindow” virtual nodes. More than one application can be shown at the same time, depending on the situation the root nodes can be:

  1. VM Nodes: If more than one applications are been shown the root nodes will be VM Nodes.
  2. Stages: If only one application is being analyzed but it has more that one Stage the root nodes will be the Stages.
  3. Root Node: If only one stage is used the root node of the scene will be the root node of the tree

Right-Clicking on a node will show a context menu with some options:

  • Clear Selection: Pressing this option the selected node will be cleared
  • Forced collapse/expand: This options allow to collapse/expand nodes, this could be done only for the current node or for each nodes which type is same as the one that is selected
  • Go to: An easy shortcut to go to the different tabs
  • Close: This options closes the menu

Detail Area

On the right side of Scenic View when a node is selected you will see something like this:

In these panels you can:

  • See the properties of the node
  • Modify the value of those properties
  • Watch easily when something get updated in the node because when a property is updated it stays painted in red for five seconds (actually the property is painted in red when it is invalidated rather than changed)
  • See the styleNames for properties in the “Full Properties Detail”
  • See bound properties
  • Show the styles of the nodes

Node Detail Panes

Under this category we can find several different panes for:

  • Node details: For all the nodes
  • Control details: For nodes that are also Controls
  • Parent details: For nodes that have children
  • Text details: For Text nodes
  • Region details: For nodes subclassing Region
  • Labeled details: For nodes subclassing Labeled
  • GridPane details: For gridpane nodes

All of these detail panels support default value detection for properties, in each panel those properties which value is their default will be faded or removed (depending on Show Default Properties). Each pane has different kinds of properties, to show relevant data about that node

Full Properties Detail Pane

This pane relies on the extended bean format of JavaFX and includes every property available in a method called “propertyNameProperty()”. In this way even custom nodes that use JavaFX Bean convention will display their custom properties (and could be editable). Apart from that every property that could be styled will show its styleName if Show CSS Properties is set

Styles Detail Pane

In this panel all the styles of the selected node will be shown. For each “styleable” property the active style types will be shown

Property Edition

Properties can be modified in every detail pane but Full Properties Detail Pane is recommended (because each property is edited separately). Editable properties are easily detected with this icon:

For properties that are not modifiable double-clicking on their value will show in the status area the reason why they are not:
Current versions supports editing for:

  • IntegerProperty, FloatProperty, DoubleProperty, BooleanProperty and StringProperty
  • ObjectProperty for Enums if the initial value is not null

Obviously they cannot be edited if they are:

  • ReadOnlyProperties
  • Bound

Bound properties will be shown with this icon:

 

In order to modify a property value:

  1. Click on the value
  2. A control will appear
    1. Depending on the type of property it could be a TextField (default), a CombBoxo, or a Slider (This currently is only used for node opacity in the Node Details Pane)
  3. Modify its value
    1. Change the value in the control and the property will be changed also, in case an error ocurrs it will be display on the status area
  4. Cancel the editing
    1. You can cancel the editing by clicking anywhere else in the pane

EventLogPane


The EventLogPane allows the user to record several kinds of events/pseudoevents:

  • MouseEvents
  • KeyEvents
  • PropertyChangeEvents
  • NodeAdded/Removed Events
  • Other kinds of events

To start event recording use the menu, there are two kinds of filters in EventLogPane

  1. Root node filter: Events will be recorded only if their source is the selected node or its childrens. If no node is selected there will be no filtering. This could be considered a pre-filter, because the events that don’t match the criteria will be lost
  2. TextField filter: Event could also be filtered using the TextField. As it can be seen in the image the introduced text supports basic logical operations, using the special keyword AND, OR and NOT. By default AND is assumed when no other option is specified. This textfield acts as a post-filter, so if the filter is emptied all the event will appear on the table

Clear menu option can be used to empty all the results.

Every single event that matches both filters will be included in the table which columns are for:

  • Source: The source of the event, i.e. TilePane, Rectangle “rect4″..
  • EventType: The type of event, for example, MOUSE_MOVED, KEY_PRESSED
  • EventValue: Only used for PROPERTY_CHANGED to show the property new value
  • Moment: The timestamp of the event

Clicking on a row information icon will show the Stacktrace of the event allowing to follow how/where has been produced

JavaDocPane

This panel can be used for making the modification in the application more easy. When a node is selected the javadoc pane will display the Javadoc page of the API.
Also doble clicking on a property in “Full Properties Panel” will directly load the javadoc of that property.

AnimationsPane

In this panel all the running animations will be listed, also alowing to pause them separatedly. A paused animation will disapear from the table

StatusBar Area

Placed on the bottom of the application the status bar area shows different information depending on the situation:

In a typical situation it will show:

  • Stage: X position, Y position, width, height (of the application window)
  • Scene: width, height (of the application scene)
  • Mouse Position: When the mouse is over the main application window this label will show its coordinates, it is particularly useful in combination with the ruler
  • Total Node Counter: The number of nodes in the scene

However this area is also used for displaying information messages like for example: