1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
3 <!--
4 /*
5 * Copyright (c) 2017, Oracle and/or its affiliates. All rights reserved.
6 * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
7 *
8 * This code is free software; you can redistribute it and/or modify it
9 * under the terms of the GNU General Public License version 2 only, as
10 * published by the Free Software Foundation. Oracle designates this
11 * particular file as subject to the "Classpath" exception as provided
12 * by Oracle in the LICENSE file that accompanied this code.
13 *
14 * This code is distributed in the hope that it will be useful, but WITHOUT
15 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
16 * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
17 * version 2 for more details (a copy is included in the LICENSE file that
18 * accompanied this code).
19 *
20 * You should have received a copy of the GNU General Public License version
21 * 2 along with this work; if not, write to the Free Software Foundation,
22 * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
23 *
24 * Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
25 * or visit www.oracle.com if you need additional information or have any
26 * questions.
27 */
28 -->
29
30 <html lang="en-US">
31 <head>
32 <meta name="description" content="This document describes the JavaFX
33 Cascading Style Sheets (CSS) for JavaFX 9 and explains the
34 styles, values, properties and associated grammar.">
35 <meta name="keywords" content="JavaFX, JavaFX CSS, JavaFX CSS reference,
36 JavaFX CSS guide, JavaFX styling, CSS styles, CSS, cascading style sheets,
37 JavaFX GUI development, JavaFX application development">
38 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
39 <title>JavaFX CSS Reference Guide</title>
40 <style type="text/css">
41 body {
42 font-family: Helvetica, Arial, sans-serif;
43 font-size: 14px;
44 }
45 h1 {
46 font-size: 28px;
47 color:#385E76
48 }
49 h2 {
50 border-top: 3px dashed #DDD;
51 margin-top: 30px;
52 padding-top: 15px;
53 font-size: 22px;
54 color:#385E76
55 }
56 h3 {
57 background-color: #EEE;
58 padding: 3px;
59 font-size: 18px;
60 }
61 h4 {
62 font-size: 16px;
63 margin: 18px 0px 10px 0px;
64 }
65 ul.contents li {
66 font-size: 12px;
67 font-weight:bold;
68 list-style-type:circle;
69 margin: 3px 0px 3px 0px;
70 }
71 ul.contents li li {
72 font-weight:normal;
73 list-style-type:circle;
74 }
75 /*ul.contents a {
76 color:#000
77 }*/
78 a {
79 text-decoration:none;
80 color:#06C
81 }
82 .csspropertytable {
83 background-color: #CCC;
84 }
85 .csspropertytable th {
86 font-size: 10px;
87 }
88 .csspropertytable td {
89 background-color:#FFF;
90 font-size: 12px;
91 }
92 /*.csspropertytable td:first-child {
93 color:#06C;
94 font-weight:bold;
95 white-space:nowrap;
96 }*/
97 .package {
98 margin: 15px 0px 0px 0px;
99 padding: 2px;
100 background-color:#666;
101 color:#FFF;
102 font-weight:bold;
103 border:none
104 }
105 .package td {
106 background-color:#666;
107 font-size: 14px;
108 }
109 td.parents {
110 font-weight:bold;
111 color:#C00;
112 background-color:#DDD;
113 padding: 4px;
114 text-align:center;
115 font-size: 10px;
116 }
117 .propertyname {
118 color:#06C;
119 font-weight:bold;
120 white-space:nowrap;
121 }
122 td.value {
123 font-family:"Lucida Console", Monaco, monospace;
124 font-size: 10px;
125 }
126 td.default {
127 font-family:"Lucida Console", Monaco, monospace;
128 font-size: 10px;
129 text-align:center;
130 white-space:nowrap;
131 }
132 td.range {
133 font-family:"Lucida Console", Monaco, monospace;
134 font-size: 10px;
135 text-align:center;
136 white-space:nowrap;
137 }
138 td.implemented {
139 text-align:center;
140 white-space:nowrap;
141 }
142 .grammar {
143 font-family:"Lucida Console", Monaco, monospace;
144 font-size: 14px;
145 color:#039;
146 }
147 p.example {
148 font-family:"Lucida Console", Monaco, monospace;
149 font-size: 14px;
150 /* white-space: pre; */
151
152 padding: 0px 0px 0px 40px;
153 color:#090;
154 margin: 0px;
155 }
156 span.example {
157 font-family:"Lucida Console", Monaco, monospace;
158 font-size: 14px;
159 color:#090;
160 }
161 p.subtitle {
162 font-style: italic;
163 color:#999;
164 }
165 p.styleclass {
166 font-style: italic;
167 }
168 .grammar .typelink , p .typelink , td .typelink{
169 font-family:"Lucida Console", Monaco, monospace;
170 font-size: 14px;
171 color:#039;
172 }
173 td.value .typelink {
174 font-family:"Lucida Console", Monaco, monospace;
175 font-size: 10px;
176 color:#039;
177 }
178
179 /* Oracle FX style */
180 .fx-code-header {
181 background: #ffffff;
182 background-image:url(fx_code_header.jpg);
183 height: 50px;
184 width: 656px;
185 }
186
187 /* Oracle FX style */
188 .version {
189 font-family:Verdana, Arial, Helvetica, sans-serif;
190 font-size:10px;
191 padding-top:2px;
192 color:#265F7F;
193 line-height:1.2em;
194 position:relative;
195 left:425px;
196 top:10px;
197 width:200px;
198 text-align:right;
199 }
200
201 /* Color Table Styles */
202 table.html4colortable {margin:auto; width:80%; border:none }
203 table.html4colortable TD {border:none; padding:0}
204 td .colorsquare { display:block;width:16px;height:16px;border:2px solid black }
205 </style>
206 </head>
207 <body>
208 <div class="fx-code-header">
209 <div class="version"><br>
210 Release: JavaFX 9</div>
211 </div>
212 <h1>JavaFX CSS Reference Guide</h1>
213 <h2>Contents</h2>
214 <ul class="contents">
215 <li><a href="#intro">Introduction</a>
216 <ul>
217 <li><a href="#introscenegraph">CSS and the JavaFX Scene Graph</a></li>
218 <li><a href="#introstylesheets">Scene, Parent and SubScene Stylesheets</a></li>
219 <li><a href="#intronaming">Naming Conventions</a></li>
220 <li><a href="#intropublicapi">CSS Public API</a></li>
221 <li><a href="#introinheritance">Inheritance</a></li>
222 <li><a href="#introatrules">@ Rules</a></li>
223 <li><a href="#introexamples">Examples</a></li>
224 <li><a href="#introparserwarnings">Understanding Parser Warnings</a></li>
225 <li><a href="#introlimitations">Limitations</a></li>
226 </ul>
227 </li>
228 <li><a href="#types">Types</a>
229 <ul>
230 <li><a href="#typeinherit">inherit</a></li>
231 <li><a href="#typeboolean"><boolean></a></li>
232 <li><a href="#typestring"><string></a></li>
233 <li><a href="#typenumber"><number> & <integer></a> </li>
234 <li><a href="#typesize"><size></a></li>
235 <li><a href="#typelength"><length></a></li>
236 <li><a href="#typepercentage"><percentage></a></li>
237 <li><a href="#typeangle"><angle></a></li>
238 <li><a href="#typeduration"><duration></a></li>
239 <li><a href="#typepoint"><point></a></li>
240 <li><a href="#typecolorstop"><color-stop></a></li>
241 <li><a href="#typeurl"><uri></a></li>
242 <li><a href="#typeeffect"><effect></a></li>
243 <li><a href="#typefont"><font></a></li>
244 <li><a href="#typepaint"><paint></a></li>
245 <li><a href="#typecolor"><color></a></li>
246 </ul>
247 </li>
248 <li><a href="#stage">Stage</a>
249 <ul>
250 <li>javafx.stage
251 <ul>
252 <li><a href="#popupwindow">PopupWindow</a></li>
253 </ul>
254 </li>
255 </ul>
256 </li>
257 <li><a href="#nodes">Nodes</a>
258 <ul>
259 <li>javafx.scene
260 <ul>
261 <li><a href="#group">Group</a></li>
262 <li><a href="#node">Node</a></li>
263 <li><a href="#parent">Parent</a></li>
264 <li><a href="#scene">Scene</a></li>
265 </ul>
266 </li>
267 </ul>
268 <ul>
269 <li>javafx.scene.image
270 <ul>
271 <li><a href="#imageview">ImageView</a></li>
272 </ul>
273 </li>
274 </ul>
275 <ul>
276 <li>javafx.scene.layout
277 <ul>
278 <li><a href="#anchorpane">AnchorPane</a></li>
279 <li><a href="#border">BorderPane</a></li>
280 <li><a href="#dialogpane">DialogPane</a></li>
281 <li><a href="#flowpane">FlowPane</a></li>
282 <li><a href="#gridpane">GridPane</a></li>
283 <li><a href="#hbox">HBox</a></li>
284 <li><a href="#pane">Pane</a></li>
285 <li><a href="#region">Region</a></li>
286 <li><a href="#stackpane">StackPane</a></li>
287 <li><a href="#tilepane">TilePane</a></li>
288 <li><a href="#vbox">VBox</a></li>
289 </ul>
290 </li>
291 </ul>
292 <ul>
293 <li>javafx.scene.media
294 <ul>
295 <li><a href="#mediaview">MediaView</a></li>
296 </ul>
297 </li>
298 </ul>
299 <ul>
300 <li>javafx.scene.shape
301 <ul>
302 <li><a href="#shape">Shape</a></li>
303 <li><a href="#arc">Arc</a></li>
304 <li><a href="#circle">Circle</a></li>
305 <li><a href="#cubiccurve">CubicCurve</a></li>
306 <li><a href="#ellipse">Ellipse</a></li>
307 <li><a href="#line">Line</a></li>
308 <li><a href="#path">Path</a></li>
309 <li><a href="#polygon">Polygon</a></li>
310 <li><a href="#quadcurve">QuadCurve</a></li>
311 <li><a href="#rectangle">Rectangle</a></li>
312 <li><a href="#svgpath">SVGPath</a></li>
313 </ul>
314 </li>
315 </ul>
316 <ul>
317 <li>javafx.scene.text
318 <ul>
319 <li><a href="#text">Text</a></li>
320 </ul>
321 </li>
322 </ul>
323 <ul>
324 <li>javafx.scene.web
325 <ul>
326 <li><a href="#webview">WebView</a></li>
327 </ul>
328 </li>
329 </ul>
330 </li>
331 <li><a href="#controls">Controls</a>
332 <ul>
333 <li>javafx.scene.control
334 <ul>
335 <li><a href="#accordion">Accordion</a></li>
336 <li><a href="#button">Button</a></li>
337 <li><a href="#buttonbase">ButtonBase</a></li>
338 <li><a href="#cell">Cell</a></li>
339 <li><a href="#checkbox">CheckBox</a></li>
340 <li><a href="#checkmenuitem">CheckMenuItem</a></li>
341 <li><a href="#choicebox">ChoiceBox</a></li>
342 <li><a href="#colorpicker">ColorPicker</a></li>
343 <li><a href="#combobox">ComboBox</a></li>
344 <li><a href="#contextmenu">ContextMenu</a></li>
345 <li><a href="#control">Control</a></li>
346 <li><a href="#datepicker">DatePicker</a></li>
347 <li><a href="#htmleditor">HTMLEditor</a></li>
348 <li><a href="#hyperlink">Hyperlink</a></li>
349 <li><a href="#indexedcell">IndexedCell</a></li>
350 <li><a href="#label">Label</a></li>
351 <li><a href="#labeled">Labeled</a></li>
352 <li><a href="#listcell">ListCell</a></li>
353 <li><a href="#listview">ListView</a></li>
354 <li><a href="#menu">Menu</a></li>
355 <li><a href="#menubar">MenuBar</a></li>
356 <li><a href="#menubutton">MenuButton</a></li>
357 <li><a href="#menuitem">MenuItem</a></li>
358 <li><a href="#menuitembase">MenuItemBase</a></li>
359 <li><a href="#pagination">Pagination</a></li>
360 <li><a href="#passwordfield">PasswordField</a></li>
361 <li><a href="#progressbar">ProgressBar</a></li>
362 <li><a href="#progressindicator">ProgressIndicator</a></li>
363 <li><a href="#radiobutton">RadioButton</a></li>
364 <li><a href="#radiomenuitem">RadioMenuItem</a></li>
365 <li><a href="#scrollbar">ScrollBar</a></li>
366 <li><a href="#scrollpane">ScrollPane</a></li>
367 <li><a href="#separator">Separator</a></li>
368 <li><a href="#spinner">Spinner</a></li>
369 <li><a href="#slider">Slider</a></li>
370 <li><a href="#splitmenubutton">SplitMenuButton</a></li>
371 <li><a href="#splitpane">SplitPane</a></li>
372 <li><a href="#tabpane">TabPane</a></li>
373 <li><a href="#tablecolumnheader">TableColumnHeader</a></li>
374 <li><a href="#tableview">TableView</a></li>
375 <li><a href="#text-area">TextArea</a></li>
376 <li><a href="#textinputcontrol">TextInputControl</a></li>
377 <li><a href="#textfield">TextField</a></li>
378 <li><a href="#titledpane">TitledPane</a></li>
379 <li><a href="#togglebutton">ToggleButton</a></li>
380 <li><a href="#toolbar">ToolBar</a></li>
381 <li><a href="#tooltip">Tooltip</a></li>
382 <li><a href="#treecell">TreeCell</a></li>
383 <li><a href="#treetablecell">TreeTableCell</a></li>
384 <li><a href="#treetableview">TreeTableView</a></li>
385 <li><a href="#treeview">TreeView</a></li>
386 <li><a href="#webview">WebView</a></li>
387 </ul>
388 </li>
389 </ul>
390 </li>
391 <li><a href="#charts">Charts</a>
392 <ul>
393 <li> javafx.scene.chart
394 <ul>
395 <li><a href="#areachart">AreaChart</a> </li>
396 <li><a href="#axis">Axis</a> </li>
397 <li><a href="#barchart">BarChart</a> </li>
398 <li><a href="#bubblechart">BubbleChart</a> </li>
399 <li><a href="#categoryaxis">CategoryAxis</a> </li>
400 <li><a href="#chart">Chart</a> </li>
401 <li><a href="#legend">Legend</a> </li>
402 <li><a href="#linechart">LineChart</a> </li>
403 <li><a href="#numberaxis">NumberAxis</a> </li>
404 <li><a href="#piechart">PieChart</a> </li>
405 <li><a href="#scatterchart">ScatterChart</a> </li>
406 <li><a href="#valueaxis">ValueAxis</a> </li>
407 <li><a href="#xychart">XYChart</a> </li>
408 </ul>
409 </li>
410 </ul>
411 </li>
412 <li><a href="#references">References</a></li>
413 </ul>
414 <h2><a name="intro" id="intro">Introduction</a></h2>
415 <p>
416 Never has styling a Java UI been easier than with JavaFX and Cascading Style Sheets (CSS). Going from one
417 theme to another, or customizing the look of just one control, can all be done through CSS. To the novice,
418 this may be unfamiliar territory; but the learning curve is not that great. Give CSS styling a try and the
419 benefits will soon be apparent. You can also split the design and development workflow, or defer design
420 until later in the project. Up to the last minute changes, and even post-deployment changes, in the UI's
421 look can be achieved through JavaFX CSS.
422 </p>
423 <p>
424 The structure of this document is as follows. First, there is a
425 description of all value types for JavaFX CSS properties.Where
426 appropriate, this includes a grammar for the syntax of values of that
427 type. Then, for each scene‑graph node that supports CSS styles, a table is
428 given that lists the properties that are supported, along with type and
429 semantic information. The pseudo‑classes for each class are also given.
430 The description of CSS properties continues for the controls. For each
431 control, the substructure of that control's skin is given, along with the
432 style‑class names for the Region objects that implement that substructure.
433 </p>
434 <h3><a name="introscenegraph" id="introscenegraph">CSS and the JavaFX Scene Graph</a></h3>
435 <p>
436 JavaFX Cascading Style Sheets (CSS) is based on the W3C CSS version 2.1 <a href="#references">[1]</a>
437 with some additions from current work on version 3 <a href="#references">[2]</a>.
438 JavaFX CSS also has some extensions to CSS in support of specific JavaFX
439 features. The goal for JavaFX CSS is to allow web developers already
440 familiar with CSS for HTML to use CSS to customize and develop themes for
441 JavaFX controls and scene‑graph objects in a natural way.
442 </p>
443 <p>
444 JavaFX has a rich set of extensions to CSS in support of features such as
445 color derivation, property lookup, and multiple background colors and
446 borders for a single node. These features add significant new power for
447 developers and designers and are described in detail in this document.
448 </p>
449
450 <p>
451 To the extent possible, JavaFX CSS follows the W3C standards; however, with few exceptions, JavaFX
452 property names have been prefixed with a vendor extension of "-fx-". Even if these properties seem to be
453 compatible with standard HTML CSS, JavaFX CSS processing assumes that the property values
454 make use of JavaFX CSS extensions.
455 </p>
456
457 <p>CSS styles are applied to nodes in the JavaFX scene‑graph in a way
458 similar to the way CSS styles are applied to elements in the HTML DOM.
459 Styles are first applied to the parent, then to its children. The code is
460 written such that only those branches of the scene‑graph that might need
461 CSS reapplied are visited. A node is styled after it is added to the scene
462 graph. Styles are reapplied when there is a change to the node's
463 pseudo‑class state, style‑class, id, inline style, or parent, or stylesheets
464 are added to or removed from the scene. Note that the Node must be in the
465 scene‑graph for CSS to be applied. The Node does not have
466 to be shown, but must have a non‑null value for its sceneProperty. See
467 <a href="../../../javafx/scene/Node.html#applyCss--">applyCss</a> for more details.</p>
468
469 <p>
470 During a normal scene‑graph pulse, CSS styles are applied before the scene‑graph is
471 laid out and painted. Styles for events that trigger a pseudo‑class state change,
472 such as MouseEvent.MOUSE_ENTERED which triggers the "hover" state, are
473 applied on the next pulse following the event.
474 </p>
475 <p>
476 <a href="http://www.w3.org/TR/css3-selectors/">CSS selectors</a> are used to match styles to scene‑graph
477 nodes.
478 The relationship of a Node to a CSS selector is as follows:
479 <ul>
480 <li>
481 Node's <a href="../../../javafx/scene/Node.html#getTypeSelector--">getTypeSelector</a> method returns a
482 String which is analogous to a CSS <a href="http://www.w3.org/TR/css3-selectors/#type-selectors">Type
483 Selector</a>.
484 By default, this method returns the simple name of the class. Note that the simple name of an inner class
485 or of an anonymous class may not be usable as a type selector. In such a case, this method should be
486 overridden to return
487 a meaningful value.
488 </li>
489 <li>
490 Each node in the scene‑graph has a <a href="../../../javafx/scene/Node.html#getStyleClass--">styleClass
491 property</a>.
492 Note that a node may have more than one style‑class.
493 A Node's styleClass is analogous to the class="..." attribute that can
494 appear on HTML elements. See <a href="http://www.w3.org/TR/css3-selectors/#class-html">Class Selectors</a>.
495 </li>
496 <li>
497 Each node in the scene‑graph has an <strong>id</strong> variable, a
498 string. This is analogous to the id="..." attribute that can appear HTML
499 elements. See <a href="http://www.w3.org/TR/css3-selectors/#id-selectors">ID Selectors</a>.
500 </li>
501 </ul>
502 <p>
503 JavaFX CSS also supports pseudo‑classes, but does not implement the full range of pseudo‑classes as
504 specified in <a href="http://www.w3.org/TR/css3-selectors/#pseudo-classes">Pseudo‑classes</a>. The pseudo‑classes
505 supported by each Node type are given in the tables within this reference. Note that JavaFX does not currently
506 support structural pseudo‑classes.
507 </p>
508 <p>
509 Each node honors a set of properties that depends on the node's JavaFX
510 class (as distinct from its styleClass). The properties honored by each
511 node class are shown in detail in tables later in this document. The
512 property value that is actually applied depends on the precedence of the
513 origin of the rule, as described above, as well as the specificity of the
514 rule's selector as described in CSS 2 <a href="cssref.html#references">[1]</a>
515 . Ultimately, a property value string is converted into a JavaFX value of
516 the appropriate type and is then assigned to an instance variable of the
517 JavaFX object.
518 </p>
519 <h3><a name="introstylesheets" id="introstylesheets">Scene, Parent and SubScene Stylesheets</a></h3>
520 <p>
521 CSS styles can come from style sheets or inline styles. Style sheets are
522 loaded from the URLs specified in the
523 <a href="../../../javafx/scene/Scene.html#getStylesheets--">getStylesheets</a>
524 property of the Scene object. If the scene‑graph contains a Control, a
525 default user agent style sheet is loaded. Inline styles are specified via
526 the Node <span style="font-weight: bold;">setStyle</span> API. Inline
527 styles are analogous to the style="..." attribute of an HTML element.
528 Styles loaded from a Scene's style sheets take precedence over selectors from
529 the user agent style sheet. Inline styles take precedence over
530 styles originating elsewhere. The precedence order of style selectors can be
531 modified using "!important" in a style declaration.
532 </p>
533 <p>
534 Beginning with JavaFX 2.1, the Parent class has a
535 <a href="../../../javafx/scene/Parent.html#getStylesheets--">getStylesheets</a> property,
536 allowing style sheets to be set on a container. This allows for one branch
537 of of the scene‑graph to have a distinct set of styles. Any instance of
538 Parent can have style sheets. A child will take its styles from its own
539 inline styles, the style sheets of all its ancestors, and any style sheets
540 from the Scene.
541 </p>
542 <p>
543 Beginning with JavaFX 8u20, the Scene class has a
544 <a href="../../../javafx/scene/Scene.html#getUserAgentStylesheet--">getUserAgentStylesheet</a> property,
545 allowing a user‑style sheet to be set on a Scene. This allows a Scene
546 to have a set of user‑agent styles distinct from the platform default. When a user‑agent
547 stylesheet is set on a Scene, the user‑agent styles are used instead of the styles from the
548 platform default user‑agent stylesheet.
549 </p>
550 <p>
551 Beginning with JavaFX 8u20, the SubScene class has a
552 <a href="../../../javafx/scene/SubScene.html#getUserAgentStylesheet--">getUserAgentStylesheet</a> property,
553 allowing a user‑style sheet to be set on a SubScene. This allows a SubScene
554 of the scene‑graph to have set of user‑agent styles distinct from the platform default
555 or from the Scene in which the SubScene is contained. When a user‑agent
556 stylesheet is set on a SubScene, the user‑agent styles are used instead of the styles from the
557 platform default user‑agent stylesheet or any user‑agent stylesheet set on the Scene.
558 </p>
559 <p>It is important to note that styles from a stylesheet added to a Scene or Parent, do not affect
560 a SubScene which is a child or descendent of the Scene or Parent. Unless a user‑agent has
561 been set on the SubScene, the SubScene will get styles
562 from the a Scene's user‑agent stylesheet or the platform user‑agent stylesheet.</p>
563 The implementation allows designers to style an application by using style
564 sheets to override property values set from code. For example, a call to <code>rectangle.setFill(Color.YELLOW)</code>
565 can be overridden by an inline‑style or a style from an author stylesheet. This has implications for
566 the cascade; particularly, when does a style from a style sheet override a
567 value set from code? The JavaFX CSS implementation applies the following
568 order of precedence: <cite>a style from a user agent style sheet has lower
569 priority than a value set from code, which has lower priority than a Scene
570 or Parent style sheet. Inline styles have highest precedence. Style sheets
571 from a Parent instance are considered to be more specific than those styles
572 from Scene style sheets.</cite>
573 <h3><a name="intronaming" id="introsnaming">Naming Conventions</a></h3>
574 <p>Naming conventions have been established for deriving CSS style‑class
575 names from JavaFX class names, and for deriving CSS property names from
576 JavaFX variable names. Note that this is only a naming convention; there
577 is no automatic name conversion. Most JavaFX names use "camel case," that
578 is, mixed case names formed from compound words, where the initial letter
579 of each sub-word is capitalized. Most CSS names in the HTML world are all
580 lower case, with compound words separated by hyphens. The convention is
581 therefore to take JavaFX class names and form their corresponding CSS
582 style‑class name by separating the compound words with hyphens and
583 convering the letters to all lower case. For example, the JavaFX
584 ToggleButton class would have a style‑class of "toggle-button". The
585 convention for mapping JavaFX variable names to CSS property names is
586 similar, with the addition of the "-fx-" prefix. For example, the
587 blendMode variable would have a corresponding CSS property name of
588 "-fx-blend-mode". </p>
589 <h3><a name="intropublicapi" id="intropublicapi">CSS Public API</a></h3>
590 Beginning with JavaFX 8, public API is available for developers to create styleable properties and manage
591 pseudo-class state. Refer to <a href="../../../javafx/css/package-summary.html">javafx.css</a> for details.
592 <h3><a name="introinheritance" id="introinheritance">Inheritance</a></h3>
593 <p>CSS also provides for certain properties to be inherited by default, or
594 to be inherited if the property value is 'inherit'. If a value is
595 inherited, it is inherited from the computed value of the element's parent
596 in the document tree. In JavaFX, inheritance is similar, except that
597 instead of elements in the document tree, inheritance occurs from parent
598 nodes in the scene‑graph. </p>
599 <p>The following properties inherit by default. Any property can be made to
600 inherit by giving it the value <a href="#typeinherit" class="typelink">"inherit"</a>.</p>
601 <table summary="property table" style="width: 100%;" border="1">
602 <caption><br>
603 </caption> <colgroup><col> <col> <col> <col> </colgroup>
604 <tbody>
605 <tr>
606 <th>Class</th>
607 <th>Property</th>
608 <th>CSS Property</th>
609 <th>Initial Value</th>
610 </tr>
611 <tr>
612 <td>javafx.scene.Node</td>
613 <td>cursor</td>
614 <td>-fx-cursor</td>
615 <td>javafx.scene.Cursor.DEFAULT</td>
616 </tr>
617 <tr>
618 <td>javafx.scene.text.Text</td>
619 <td>textAlignment</td>
620 <td>-fx-text-alignment</td>
621 <td>javafx.scene.text.TextAlignment.LEFT</td>
622 </tr>
623 <tr>
624 <td>javafx.scene.text.Font</td>
625 <td>font</td>
626 <td>-fx-font, -fx-font-family, -fx-font-size, -fx-font-weight, -fx-font-style</td>
627 <td>Font.DEFAULT (12px system)</td>
628 </tr>
629 </tbody>
630 </table>
631 <p>Within the hierarchy of JavaFX classes (for example, Rectangle is a
632 subclass of Shape, which in turn is a subclass of Node), the CSS
633 properties of an ancestor are also CSS properties of the descendant. This
634 means that a subclass will respond to the same set of properties as its
635 ancestor classes, and to additional properties it defines itself. So, a
636 Shape supports all the properties of Node plus several more, and Rectangle
637 supports all the properties of Shape plus a couple more. However, because
638 using a JavaFX class name as a type selector is an exact match, providing
639 style declarations for a Shape will not cause a Rectangle to use those
640 values (unless the .css value for the Rectangle's property is "inherit").</p>
641 <p>For font inheritance, the CSS engine looks <span style="font-style:italic;">only</span> for the styles in the table above. When
642 looking for a font to inherit, the search
643 terminates at any node that has a Font property that was set by the user. The user-set font is
644 inherited provided there is not an author or an inline-style that applies specifically to that node.
645 In this case, the inherited font is created from the user-set font and any parts of the applicable
646 author or in-line style.
647 <h3><a name="introatrules" id="introatrules">@ Rules</a></h3>
648 <p>
649 Beginning with JavaFX 8u20, the CSS
650 <a href="http://www.w3.org/TR/CSS21/cascade.html#at-import">@import</a> is also partially supported.
651 Only unconditional import is supported. In other words, the media‑type qualifier is not supported.
652 Also, the JavaFX CSS parser is non-compliant with regard to where an @import may appear within a stylesheet
653 (see <a href="http://www.w3.org/TR/CSS21/syndata.html#at-rules">At‑rules</a>).
654 Users are cautioned that this will be fixed in a future release. Adherence to the W3C standard is strongly advised.
655 </p>
656 <p>Since JavaFX 8, the implementation partially supports the CSS3 syntax to load a font from a URL using the
657 <a href="http://www.w3.org/TR/css3-fonts/#the-font-face-rule">@font‑face</a> rule:</p>
658 <textarea rows="8" cols="132">
659
660 @font-face {
661 font-family: 'sample';
662 font-style: normal;
663 font-weight: normal;
664 src: local('sample'), url('http://font.samples/resources/sample.ttf';) format('truetype');
665 }
666 </textarea>
667 <p>This allows public resources for fonts to be used in a JavaFX application. For example, assume the URL
668 "http://font.samples/web?family=samples" returns the @font‑face rule given above. Then the
669 following code shows how the sample font could be used in a JavaFX application.</p>
670 <textarea rows="20" cols="132">
671
672 import javafx.application.Application;
673 import javafx.scene.Scene;
674 import javafx.scene.control.Label;
675 import javafx.stage.Stage;
676
677 public class HelloFontFace extends Application {
678 @Override public void start(Stage primaryStage) {
679 Label label = new Label("Hello @FontFace");
680 label.setStyle("-fx-font-family: sample; -fx-font-size: 80;");
681 Scene scene = new Scene(label);
682 scene.getStylesheets().add("http://font.samples/web?family=samples");
683 primaryStage.setTitle("Hello @FontFace");
684 primaryStage.setScene(scene);
685 primaryStage.show();
686 }
687
688 public static void main(String[] args) { launch(args); }
689 }
690 </textarea>
691 <p>Or, the URL could be imported into a stylesheet with the @import rule.</p>
692 <p>Although the parser will parse the syntax, all @font‑face descriptors are ignored except for
693 the <code>src</code> descriptor. The <code>src</code> descriptor is expected to be a
694 <a href="#typeurl" class="typelink"><url></a>. The <code>format</code> hint is ignored.</p>
695 <h3><a name="introexamples" id="introexamples">Examples</a></h3>
696 <p>Consider the following simple JavaFX application: </p>
697 <p class="example">Scene scene = new Scene(new Group()); <br>
698 scene.getStylesheets().add(“test.css”); <br>
699 Rectangle rect = new Rectangle(100,100); <br>
700 rect.setLayoutX(50); <br>
701 rect.setLayoutY(50); <br>
702 rect.getStyleClass().add("my-rect"); <br>
703 ((Group)scene.getRoot()).getChildren().add(rect); </p>
704 <p>Without any styles, this will display a plain black rectangle. If
705 test.css contains the following: </p>
706 <p class="example">.my-rect { -fx-fill: red; }</p>
707 <p>the rectangle will be red instead of black: </p>
708 <p><img src="cssexample1.png" alt="A rectangle with red fill"></p>
709 <p>If test.css contains the following: </p>
710 <p class="example">.my-rect {<br>
711 -fx-fill: yellow;<br>
712 -fx-stroke: green;<br>
713 -fx-stroke-width: 5;<br>
714 -fx-stroke-dash-array: 12 2 4 2;<br>
715 -fx-stroke-dash-offset: 6;<br>
716 -fx-stroke-line-cap: butt;<br>
717 }<br>
718 </p>
719 <p>the result will be a yellow rectangle with a nicely dashed green border:
720 </p>
721 <p><img src="cssexample2.png" alt="A rectangle with yellow fill and a green, dashed border"></p>
722 <h3><a name="introparserwarnings" id="introparserwarnings">Understanding
723 Parser Warnings</a></h3>
724 <p>When the JavaFX CSS parser encounters a syntax error, a warning message
725 is emitted which conveys as much information as is available to help
726 resolve the error. For example </p>
727 <p class="example"> WARNING: javafx.css.CssParser declaration
728 Expected '<percent>' while parsing '-fx-background-color' at ?[1,49]
729 </p>
730 <p>The cryptic '<span class="p example">?[1,49]</span>' pertains to the
731 location of the error. The format of the location string is </p>
732 <p class="grammar"><url>[line, position]</p>
733 <p>If the error is found while parsing a file, the file URL will be given.
734 If the error is from an inline style (as in the example above), the URL is
735 given as a question mark. The line and position give an offset into the
736 file or string where the token begins. <em>Please note that the line and
737 position may not be accurate in releases prior to JavaFX 2.2.</em><br>
738 </p>
739 <p>Applications needing to detect errors from the parser can add a listener
740 to the errors property of javafx.css.CssParser. <br>
741 </p>
742 <h3><a name="introlimitations" id="introlimitations">Limitations</a></h3>
743 <ol>
744 <li> While the JavaFX CSS parser will parse valid CSS syntax, it is not a
745 fully compliant CSS parser. One should not expect the parser to handle
746 syntax not specified in this document.</li>
747 <li>With the exception of @font‑face and @import, @-keyword statements are ignored.</li>
748 <li>The <media-query-list> of the @import statement is not parsed.</li>
749 <li>The structural pseudo‑classes are not supported. </li>
750 <li>The ":active" and ":focus" dynamic pseudo‑classes are not supported.
751 However, <a href="#node">Nodes</a> do support the ":pressed" and
752 ":focused" pseudo‑classes, which are similar. </li>
753 <li>The ":link" and ":visited" pseudo‑classes are not supported in general.
754 However, <a href="#hyperlink">Hyperlink</a> objects can be styled, and
755 they support the ":visited" pseudo‑class. </li>
756 <li>JavaFX CSS does not support comma-separated series of font family names
757 in the -fx-font-family property. The optional line height parameter when
758 specifying fonts is not supported. There is no equivalent for the
759 font-variant property.</li>
760 <li>JavaFX CSS uses the HSB color model instead of the HSL color model. </li>
761 <li>If a property of a node is initialized by calling the set method of the
762 property, the CSS implementation will see this as a user set value and the
763 value will not be overwritten by a style from a user agent style
764 sheet.</li>
765 <li>When parsing a <a href="http://www.w3.org/TR/CSS2/syndata.html#uri">URI</a>,
766 the parser doesn't handle URI escapes nor \<hex-digit>[1,6] code points.</li>
767 </ol>
768 <h2><a name="types" id="types">Types</a></h2>
769 <h3><a name="typeinherit" id="typeinherit">inherit</a></h3>
770 <p>Each property has a type, which determines what kind of value and the
771 syntax for specifying those values. In addition, each property may have a
772 specified value of 'inherit', which means that, for a given node, the
773 property takes the same computed value as the property for the node's
774 parent. The 'inherit' value can be used on properties that are not
775 normally inherited.
776 </p>
777 <p>If the 'inherit' value is set on the root element, the property is
778 assigned its initial value.</p>
779 <h3><a name="typeboolean" id="typeboolean"><boolean></a></h3>
780 <p>Boolean values can either have the string value of "true" or "false", the
781 values are case insensitive as all CSS is case insensitive.</p>
782 <h3><a name="typestring" id="typestring"><string></a></h3>
783 <p>Strings can either be written with double quotes or with single quotes.
784 Double quotes cannot occur inside double quotes, unless escaped (e.g., as
785 '\"' or as '\22'). Analogously for single quotes (e.g., "\'" or "\27").</p>
786 <p class="example">"this is a 'string'"<br>
787 "this is a \"string\""<br>
788 'this is a "string"'<br>
789 'this is a \'string\''</p>
790 <p>A string cannot directly contain a newline. To include a newline in a
791 string, use an escape representing the line feed character in ISO-10646
792 (U+000A), such as "\A" or "\00000a". This character represents the generic
793 notion of "newline" in CSS. See the 'content' property for an example.</p>
794 <h3><a name="typenumber" id="typenumber"><number> &
795 <integer></a></h3>
796 <p>Some value types may have integer values (denoted by <integer>) or
797 real number values (denoted by <number>). Real numbers and integers
798 are specified in decimal notation only. An <integer> consists of one
799 or more digits "0" to "9". A <number> can either be an
800 <integer>, or it can be zero or more digits followed by a dot (.)
801 followed by one or more digits. Both integers and real numbers may be
802 preceded by a "-" or "+" to indicate the sign. -0 is equivalent to 0 and
803 is not a negative number.</p>
804 <p class="grammar">[+|-]? [[0-9]+|[0-9]*"."[0-9]+]</p>
805 <p>Note that many properties that allow an integer or real number as a value
806 actually restrict the value to some range, often to a non-negative value.</p>
807 <h3><a name="typesize" id="typesize"><size></a></h3>
808 <p>A size is a <a href="#typenumber" class="typeref"><number></a>
809 with units of <a href="#typelength" class="typeref"><length></a> or
810 <a href="#typepercentage" class="typeref"><percentage></a>. If a unit
811 is not specified then 'px' is assumed.</p>
812 <h4><a name="typelength" id="typelength"><length></a></h4>
813 <p class="grammar"><a href="#typenumber"><number></a>[ px | mm | cm |
814 in | pt | pc | em | ex ]?</p>
815 <p>No whitespace is allowed between the number and units if provided. Some
816 units are relative and others absolute. </p>
817 <p><strong>Relative</strong></p>
818 <ul>
819 <li><strong>px</strong>: pixels, relative to the viewing device</li>
820 <li><strong>em</strong>: the 'font-size' of the relevant font</li>
821 <li><strong>ex</strong>: the 'x-height' of the relevant font</li>
822 </ul>
823 <p><strong>Absolute</strong></p>
824 <ul>
825 <li><strong>in</strong>: inches — 1 inch is equal to 2.54
826 centimeters.</li>
827 <li><strong>cm</strong>: centimeters</li>
828 <li><strong>mm</strong>: millimeters</li>
829 <li><strong>pt</strong>: points — the points used by CSS 2.1 are
830 equal to 1/72nd of an inch.</li>
831 <li><strong>pc</strong>: picas — 1 pica is equal to 12 points.</li>
832 </ul>
833 <h4><a name="typepercentage" id="typepercentage"><percentage></a></h4>
834 <p>These are a percentage of some length, typically to the width or height
835 of a node.</p>
836 <p class="grammar"><a href="#typenumber"><number></a>[ % ]</p>
837 <h3><a name="typeangle" id="typeangle"><angle></a></h3>
838 <p>An angle is a <a href="#typenumber" class="typeref"><number></a>
839 with one of the following units.</p>
840 <p> </p>
841 <p class="grammar"><a href="#typenumber"><number></a>[ deg | rad |
842 grad | turn ]</p>
843 <ul>
844 <li><strong>deg</strong>: angle in degrees — all other angle units are
845 converted to degrees.</li>
846 <li><strong>rad</strong>: angle in radians</li>
847 <li><strong>grad</strong>: angle in gradians</li>
848 <li><strong>turn</strong>: angle in turns</li>
849 </ul>
850 <h3><a name="typeduration" id="typeduration"><duration></a></h3>
851 <p>A duration is a <a href="#typenumber" class="typeref"><number></a>
852 with second or millisecond units, or the value <span class="grammar">indefinite</span>.</p>
853 <p> </p>
854 <p class="grammar">[<a href="#typenumber"><number></a>[ s | ms ]] | indefinite</p>
855 <ul>
856 <li><strong>s</strong>: duration in seconds</li>
857 <li><strong>ms</strong>: duration in milliseconds. One second is 1000 milliseconds.</li>
858 <li><strong>indefinite</strong>: See <a href="../../util/Duration.html#INDEFINITE" class="typelink">Duration.INDEFINITE</a></li>
859 </ul>
860 <p>See also <a href="http://www.w3.org/TR/css3-values/#time" class="typelink">W3C time units</a>.</p>
861 <h3><a name="typepoint" id="typepoint"><point></a></h3>
862 <p>A point is an {x,y} coordinate.</p>
863 <p class="grammar">[ [ <length> <length> ] | [
864 <percentage> | <percentage> ] ]</p>
865 <h3><a name="typecolorstop" id="typecolorstop"><color-stop></a></h3>
866 <p>Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
867 class="typelink">W3C
868 color-stop syntax</a>.</p>
869 <p class="grammar">[ <a href="#typecolor" class="typeref"><color></a>
870 [ <a href="#typepercentage" class="typeref"><percentage></a> | <a
871 href="#typelength"
872 class="typeref"><length></a>]?
873 ]</p>
874 <p>In a series of <color-stop>, stop distance values must all be
875 <percentage> or <length>. Furthermore, if <length>
876 values are used, then the distance value for first and last stop in the
877 series must be specified. This restriction may be removed in a future
878 release.</p>
879 <p>"<span style="color: #009900; ">red, white 70%, blue</span>" is valid since the
880 distance for red and blue is assumed to be 0% and 100%, respectively.</p>
881 <p>"<span style="color: #009900; ">red 10, white, blue 90</span>" is valid. Because
882 distance for red and blue is 10 and 90, respectively, the distance for
883 white can be calculated.</p>
884 <p>"<span style="color: #009900; ">red, white 70, blue</span>" is <span style="font-style:italic;">not</span> valid
885 since distance units do not agree.</p>
886 <p>"<span style="color: #009900; ">red, white, blue</span>" is valid. The stops are
887 distributed evenly between 0% and 100%.</p>
888 <h3><a name="typeurl" id="typeurl"><uri></a></h3>
889 <p class="grammar">url ( [\"\']? <address> [\"\']? )</p>
890 <p><span class="grammar"><address></span> is a hierarchical URI of the form [scheme:][//authority][path] <a href="#references">(see [2])</a>.
891 For example:</p>
892 <p class="example">
893 url(http://example.com/images/Duke.png)<br>
894 url(/com/example/javafx/app/images/Duke.png)<br>
895 </p>
896 <p>If the <span class="grammar"><address></span> does not have a [scheme:] component, the <span class="grammar"><address></span>
897 is considered to be the [path] component only.
898 A leading '/' character indicates that the [path] is relative to the
899 root of the classpath. If the the style appears in a stylesheet and
900 has no leading '/' character, the path is relative to the base URI of
901 the stylesheet. If the style appears in an inline style, the path is
902 relative to the root of the classpath (regardless of whether or not
903 there is a leading '/').
904 </p>
905 <table class="csspropertytable" cellspacing="3" cellpadding="4">
906 <caption>Examples of Resolving URLs in Stylesheets</caption>
907 <tr>
908 <th>Stylesheet URL</th><th>URL in Style</th><th>Resolves to</th>
909 </tr>
910 <tr>
911 <td>file:///some/path/build/classes/com/mycompany/myapp/mystyles.css</td>
912 <td>url(images/Duke.png)</td>
913 <td>file:///some/path/build/classes/com/mycompany/myapp/images/Duke.png</td>
914 </tr>
915 <tr>
916 <td>file:///some/path/build/classes/com/mycompany/myapp/mystyles.css</td>
917 <td>url(../images/Duke.png)</td>
918 <td>file:///some/path/build/classes/com/mycompany/images/Duke.png</td>
919 </tr>
920 <tr>
921 <td>jar:file:/some/path/build/myapp.jar!/com/mycompany/myapp/mystyles.css</td>
922 <td>url(images/Duke.png)</td>
923 <td>jar:file:/some/path/build/myapp.jar!/com/mycompany/myapp/images/Duke.png</td>
924 </tr>
925 </table>
926 <p></p>
927 <table class="csspropertytable" cellspacing="3" cellpadding="4">
928 <caption>Examples of Resolving URLs in Inline Styles</caption>
929 <tr>
930 <th>Classpath</th><th>URL in Style</th><th>Resolved URL</th>
931 </tr>
932 <tr>
933 <td>file:///some/path/build/classes</td>
934 <td>url(/com/mycompany/resources/images/Duke.png)</td>
935 <td>file:///some/path/build/classes/com/mycompany/resources/images/Duke.png</td>
936 </tr>
937 <tr>
938 <td>file:///some/path/build/myapp.jar</td>
939 <td>url(/com/mycompany/resources/images/Duke.png)</td>
940 <td>jar:file:/some/path/build/myapp.jar!/com/mycompany/resources/images/Duke.png</td>
941 </tr>
942 </table>
943 <p>Note that for inline styles, leading dot-segments (e.g. '..' or '.') do resolve since the path is always
944 anchored at the root of the classpath.</p>
945 <p>As an example, the code snippet below creates a scene filled with a fictional 'Duke.png' image, located in an
946 'image' directory:</p>
947 <textarea rows="9" cols="132">
948
949 @Override public void start(Stage stage) {
950 StackPane root = new StackPane();
951 root.setStyle("-fx-background-image: url(images/Duke.png);");
952 Scene scene = new Scene(root, 300, 250);
953 stage.setScene(scene);
954 stage.show();
955 }
956 </textarea>
957 <p>The same style would work equally as well from a stylesheet.</p>
958 <h3><a name="typeeffect" id="typeeffect"><effect></a></h3>
959 <p>JavaFX CSS currently supports the DropShadow and InnerShadow effects from
960 the JavaFX platform. See the class documentation in javafx.scene.effect
961 for further details about the semantics of the various effect parameters.</p>
962 <h4>Drop Shadow</h4>
963 <p>A high-level effect that renders a shadow of the given content behind the
964 content.</p>
965 <p><span class="grammar">dropshadow( <blur-type> , <a href="#typecolor"
966 class="typelink"><color></a>
967 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
968 class="typelink"><number></a>
969 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
970 class="typelink"><number></a>
971 )</span></p>
972 <p style="margin-left: 40px;"><span class="grammar"><blur-type> = [
973 gaussian | one-pass-box | three-pass-box | two-pass-box ]<br>
974 <a href="#typecolor" class="typelink"><color></a></span> The
975 shadow Color.<br>
976 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
977 The radius of the shadow blur kernel. In the range [0.0 ... 127.0],
978 typical value 10.<br>
979 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
980 The spread of the shadow. The spread is the portion of the radius where
981 the contribution of the source material will be 100%. The remaining
982 portion of the radius will have a contribution controlled by the blur
983 kernel. A spread of 0.0 will result in a distribution of the shadow
984 determined entirely by the blur algorithm. A spread of 1.0 will result in
985 a solid growth outward of the source material opacity to the limit of the
986 radius with a very sharp cutoff to transparency at the radius. Values
987 should be in the range [0.0 ... 1.0].<br>
988 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
989 The shadow offset in the x direction, in pixels. <br>
990 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
991 The shadow offset in the y direction, in pixels. </p>
992 <h4>Inner Shadow</h4>
993 <p>A high-level effect that renders a shadow inside the edges of the given
994 content.</p>
995 <p><span class="grammar">innershadow( <blur-type> , <a href="#typecolor"
996 class="typelink"><color></a>
997 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
998 class="typelink"><number></a>
999 , <a href="#typenumber" class="typelink"><number></a> , <a href="#typenumber"
1000 class="typelink"><number></a>
1001 )</span></p>
1002 <p style="margin-left: 40px;"><span class="grammar"><blur-type> = [
1003 gaussian | one-pass-box | three-pass-box | two-pass-box ]<br>
1004 </span><span class="grammar"><a href="#typecolor" class="typelink"><color></a></span>
1005 The shadow Color.<br>
1006 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1007 The radius of the shadow blur kernel. In the range [0.0 ... 127.0],
1008 typical value 10.<br>
1009 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1010 The choke of the shadow. The choke is the portion of the radius where the
1011 contribution of the source material will be 100%. The remaining portion of
1012 the radius will have a contribution controlled by the blur kernel. A choke
1013 of 0.0 will result in a distribution of the shadow determined entirely by
1014 the blur algorithm. A choke of 1.0 will result in a solid growth inward of
1015 the shadow from the edges to the limit of the radius with a very sharp
1016 cutoff to transparency inside the radius. Values should be in the range
1017 [0.0 ... 1.0].<br>
1018 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1019 The shadow offset in the x direction, in pixels. <br>
1020 <span class="grammar"><a href="#typenumber" class="typelink"><number></a></span>
1021 The shadow offset in the y direction, in pixels. </p>
1022 <h3><a name="typefont" id="typefont"><font></a></h3>
1023 <p>JavaFX CSS supports the ability to specify fonts using separate family,
1024 size, style, and weight properties, as well as the ability to specify a
1025 font using a single shorthand property. There are four value types related
1026 to fonts plus a shorthand property that encompasses all four properties.
1027 The font-related types are as follows. </p>
1028 <p><span class="grammar"><font-family></span>The string name of the
1029 font family. An actual font family name available on the system can be
1030 used, or one of the following generic family names can be used:</p>
1031 <ul>
1032 <li>'serif' (e.g., Times)</li>
1033 <li>'sans-serif' (e.g., Helvetica)</li>
1034 <li>'cursive' (e.g., Zapf-Chancery)</li>
1035 <li>'fantasy' (e.g., Western)</li>
1036 <li>'monospace' (e.g., Courier)</li>
1037 </ul>
1038 <p><span class="grammar"><font-size></span> The size of the font,
1039 using the <span class="grammar"><size></span> syntax.</p>
1040 <p><span class="grammar"><font-style></span> The font's style, using
1041 the following syntax:<br>
1042 <span class="grammar">[ normal | italic | oblique ]</span></p>
1043 <p><span class="grammar"><font-weight></span> The font's weight, using
1044 the following syntax:<br>
1045 <span class="grammar">[ normal | bold | bolder | lighter | 100 | 200 | 300
1046 | 400 | 500 | 600 | 700 | 800 | 900 ]</span></p>
1047 <p><span class="grammar"><font></span> This font shorthand property
1048 can be used in place of the above properties. It uses the following
1049 syntax:<br>
1050 <span class="grammar">[[ <font-style> || <font-weight> ]?
1051 <font-size> <font-family> ]</span></p>
1052 <h4><a name="fontprops" id="fontprops">Font Properties</a></h4>
1053 <p>Most classes that use text will support the following font properties. In
1054 some cases a similar set of properties will be supported but with a
1055 different prefix instead of "-fx-font".</p>
1056 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
1057 <thead>
1058 <tr>
1059 <th class="propertyname">CSS Property</th>
1060 <th class="value">Values</th>
1061 <th>Default</th>
1062 <th>Comments</th>
1063 </tr>
1064 </thead>
1065 <tbody>
1066 <tr>
1067 <td class="propertyname">-fx-font</td>
1068 <td class="value"><a href="#typefont" class="typelink"><font></a></td>
1069 <td>inherit</td>
1070 <td>shorthand property for font-size, font-family, font-weight and
1071 font-style</td>
1072 </tr>
1073 <tr>
1074 <td class="propertyname">-fx-font-family</td>
1075 <td class="value"><a href="#typefont" class="typelink"><font-family></a></td>
1076 <td>inherit</td>
1077 <td> </td>
1078 </tr>
1079 <tr>
1080 <td class="propertyname">-fx-font-size</td>
1081 <td class="value"><a href="#typefont" class="typelink"><font-size></a></td>
1082 <td>inherit</td>
1083 <td> </td>
1084 </tr>
1085 <tr>
1086 <td class="propertyname">-fx-font-style</td>
1087 <td class="value"><a href="#typefont" class="typelink"><font-style></a></td>
1088 <td>inherit</td>
1089 <td> </td>
1090 </tr>
1091 <tr>
1092 <td class="propertyname">-fx-font-weight</td>
1093 <td class="value"><a href="#typefont" class="typelink"><font-weight></a></td>
1094 <td>inherit</td>
1095 <td> </td>
1096 </tr>
1097 </tbody>
1098 </table>
1099 <h3><a name="typepaint" id="typepaint"><paint></a></h3>
1100 <p>Paint values can either be a solid color specified in one of the color
1101 syntaxes, they can be a linear or radial gradient, or an image-pattern.</p>
1102 <p class="grammar"><a href="#typecolor" class="typelink"><color></a> |
1103 <a href="#typelinear-gradient" class="typelink"><linear-gradient></a> |
1104 <a href="#typeradial-gradient" class="typelink"><radial-gradient></a> |
1105 <a href="#typeimage-pattern" class="typelink"><image-pattern></a>
1106 <a href="#typeimage-pattern" class="typelink"><repeating-image-pattern></a></p>
1107 <h4>Linear Gradients<span class="grammar" style="font-size: smaller;">
1108 <a name="typelinear-gradient" id="typelinear-gradient"><linear-gradient></a>
1109 </span></h4>
1110 <p class="grammar">linear-gradient( [ [from <a href="#typepoint" class="typelink"><point></a>
1111 to <a href="#typepoint" class="typelink"><point></a>] | [ to
1112 <side-or-corner>], ]? [ [ repeat | reflect ], ]? <a href="#typecolorstop"
1113 class="typelink"><color-stop></a>[,
1114 <a href="#typecolorstop" class="typelink"><color-stop></a>]+) <br>
1115 <br>
1116 where <side-or-corner> = [left | right] || [top | bottom] </p>
1117 <p> </p>
1118 <p>Linear gradient creates a gradient going though all the stop colors along
1119 the line between the "from" <a href="#typepoint" class="typelink"><point></a>
1120 and the "to" <a href="#typepoint" class="typelink"><point></a>. If
1121 the points are percentages, then they are relative to the size of the area
1122 being filled. Percentage and length sizes can not be mixed in a single
1123 gradient function.</p>
1124 <p> If neither repeat nor reflect are given, then the CycleMethod defaults
1125 "NO_CYCLE".<br>
1126 If neither [from <point> to <point>] nor [ to
1127 <side-or-corner> ] are given, then the gradient direction defaults
1128 to 'to bottom'.<br>
1129 Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1130 class="typelink">W3C
1131 color-stop syntax</a> and are normalized accordingly. </p>
1132 <p>This example will create a gradient from top left to bottom right of the
1133 filled area with red at the top left corner and black at the bottom right.</p>
1134 <p class="example">linear-gradient(to bottom right, red, black)</p>
1135 <p>This is equivalent to: </p>
1136 <p class="example">linear-gradient(from 0% 0% to 100% 100%, red 0%, black
1137 100%)</p>
1138 <p>This more complex example will create a 50px high bar at the top with a 3
1139 color gradient with white underneath for the rest of the filled area.</p>
1140 <p class="example">linear-gradient(from 0px 0px to 0px 50px, gray, darkgray
1141 50%, dimgray 99%, white)</p>
1142 <p><span style="color: #af0000; ">The following syntax for linear gradient does not
1143 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX
1144 2.0 CSS parser supports the syntax but this support may be removed in
1145 later releases.</span></p>
1146 <p class="grammar"><span style="color: #af0000; ">linear (<size>, <size>)
1147 to (<size>, <size>) stops [ (<number>,<color>)
1148 ]+ [ repeat | reflect ]?</span></p>
1149 <h4>Radial Gradients <span class="grammar" style="font-size: smaller;">
1150 <a name="typeradial-gradient" id="typeradial-gradient"><radial-gradient></a>
1151 </span></h4>
1152 <p class="grammar">radial-gradient([ focus-angle <a href="#typeangle" class="typelink"><angle></a>,
1153 ]? [ focus-distance <a href="#typepercentage" class="typelink"><percentage></a>,
1154 ]? [ center <a href="#typepoint" class="typelink"><point></a>, ]?
1155 radius [ <a href="#typelength" class="typelink"><length></a> | <a
1156 href="#typepercentage"
1157 class="typelink"><percentage></a>
1158 ] [ [ repeat | reflect ], ]? <a href="#typecolorstop" class="typelink"><color-stop></a>[,
1159 <a href="#typecolorstop" class="typelink"><color-stop></a>]+) </p>
1160 <p>Radial gradient creates a gradient going though all the stop colors radiating outward from
1161 the <a href="#typepoint" class="typelink">center point</a>
1162 to the <a href="#typelength" class="typelink">radius</a>. If the center point is not given,
1163 the center defaults to (0,0). Percentage values are relative to the size of the area
1164 being filled. Percentage and length sizes can not be mixed in a single gradient function.</p>
1165 <p> If neither repeat nor reflect are given, then the CycleMethod defaults
1166 "NO_CYCLE".<br>
1167 Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1168 class="typelink">W3C
1169 color-stop syntax</a> and are normalized accordingly. </p>
1170 <p>Following are examples of the use of radial-gradient:</p>
1171 <p class="example">radial-gradient(radius 100%, red, darkgray, black)</p>
1172 <p class="example">radial-gradient(focus-angle 45deg, focus-distance 20%,
1173 center 25% 25%, radius 50%, reflect, gray, darkgray 75%, dimgray)</p>
1174 <p><span style="color: #af0000; ">The following syntax for radial gradient does not
1175 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX
1176 2.0 CSS parser supports the syntax but this support may be removed in
1177 later releases.</span></p>
1178 <p class="grammar"><span style="color: #af0000; ">radial [focus-angle <number>
1179 | <number> ] ]? [ focus-distance <size> ]? [ center
1180 <size,size> ]? <size> stops [ ( <number>,
1181 <color> ) ]+ [ repeat | reflect ]?</span></p>
1182 <h4>Image Paint <span class="grammar" style="font-size: smaller;">
1183 <a name="typeimage-pattern" id="typeimage-pattern"><image-pattern></a>
1184 </span></h4>
1185 <p class="grammar">image-pattern(<a href="#typestring" class="typelink"><string></a>,
1186 [<a href="#typesize" class="typelink"><size></a>,
1187 <a href="#typesize" class="typelink"><size></a>,
1188 <a href="#typesize" class="typelink"><size></a>,
1189 <a href="#typesize" class="typelink"><size></a>[,
1190 <a href="#typeboolean" class="typelink"><boolean></a>]?]?)</p>
1191 <p>The parameters, in order, are:<br>
1192 <p style="margin-left: 40px;">
1193 <span class="grammar"><a href="#typestring" class="typelink"><string></a></span>
1194 The URL of the image.<br>
1195 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1196 The <span style="font-style:italic;">x</span> origin of the anchor rectangle.<br>
1197 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1198 The <span style="font-style: italic;">y</span> origin of the anchor rectangle.<br>
1199 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1200 The width of the anchor rectangle.<br>
1201 <span class="grammar"><a href="#typesize" class="typelink"><size></a></span>
1202 The height of the anchor rectangle.<br>
1203 <span class="grammar"><a href="#typeboolean" class="typelink"><boolean></a></span>
1204 The proportional flag which indicates whether start and end locations are proportional or absolute<br>
1205 </p>
1206 <p>For a full explanation of the parameters, refer to the
1207 <a href="../paint/ImagePattern.html" class="typelink">ImagePattern</a> javadoc.</p>
1208 <p>Following are examples of the use of image-pattern:</p>
1209 <p class="example">image-pattern("images/Duke.png")</p>
1210 <p class="example">image-pattern("images/Duke.png", 20%, 20%, 80%, 80%)</p>
1211 <p class="example">image-pattern("images/Duke.png", 20%, 20%, 80%, 80%, true)</p>
1212 <p class="example">image-pattern("images/Duke.png", 20, 20, 80, 80, false)</p>
1213
1214 <p>Related, there is the <code>repeating-image-pattern</code> function which is a shorthand
1215 for producing tiled image based fills. It is equivalent to
1216 <p class="example">image-pattern("images/Duke.png", 0, 0, imageWidth, imageHeight, false)</p>
1217
1218 <p class="grammar">repeating-image-pattern(<a href="#typestring" class="typelink"><string></a>)</p>
1219 <p>The only parameter is the uri of the image. Following is an example of the use of image-pattern:</p>
1220 <p class="example">repeating-image-pattern("com/mycompany/myapp/images/Duke.png")</p>
1221
1222
1223
1224 <h3><a name="typecolor" id="typecolor"><color></a></h3>
1225 <p class="grammar"><named-color> | <looked-up-color> |
1226 <rgb-color> | <hsb-color> | <color-function></p>
1227 <h4>Named Colors <span class="grammar" style="font-size: smaller;"><named-color></span></h4>
1228 <p>CSS supports a bunch of named constant colors. Named colors can be
1229 specified with just their unquoted name for example: </p>
1230 <p class="example">.button {<br>
1231 -fx-background-color: red;<br>
1232 }</p>
1233 <p>The named colors that are available in CSS are:</p>
1234 <table summary="property table" class="html4colortable">
1235 <tbody>
1236 <tr>
1237 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aliceblue;"></span><br>
1238 </td>
1239 <td>aliceblue = #f0f8ff</td>
1240 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% antiquewhite;"></span><br>
1241 </td>
1242 <td>antiquewhite = #faebd7</td>
1243 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aqua;"></span><br>
1244 </td>
1245 <td>aqua = #00ffff</td>
1246 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% aquamarine;"></span><br>
1247 </td>
1248 <td>aquamarine = #7fffd4</td>
1249 </tr>
1250 <tr>
1251 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% azure;"></span><br>
1252 </td>
1253 <td>azure = #f0ffff</td>
1254 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% beige;"></span><br>
1255 </td>
1256 <td>beige = #f5f5dc</td>
1257 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% bisque;"></span><br>
1258 </td>
1259 <td>bisque = #ffe4c4</td>
1260 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% black;"></span><br>
1261 </td>
1262 <td>black = #000000</td>
1263 </tr>
1264 <tr>
1265 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blanchedalmond;"></span><br>
1266 </td>
1267 <td>blanchedalmond = #ffebcd</td>
1268 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blue;"></span><br>
1269 </td>
1270 <td>blue = #0000ff</td>
1271 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% blueviolet;"></span><br>
1272 </td>
1273 <td>blueviolet = #8a2be2</td>
1274 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% brown;"></span><br>
1275 </td>
1276 <td>brown = #a52a2a</td>
1277 </tr>
1278 <tr>
1279 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% burlywood;"></span><br>
1280 </td>
1281 <td>burlywood = #deb887</td>
1282 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cadetblue;"></span><br>
1283 </td>
1284 <td>cadetblue = #5f9ea0</td>
1285 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% chartreuse;"></span><br>
1286 </td>
1287 <td>chartreuse = #7fff00</td>
1288 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% chocolate;"></span><br>
1289 </td>
1290 <td>chocolate = #d2691e</td>
1291 </tr>
1292 <tr>
1293 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% coral;"></span><br>
1294 </td>
1295 <td>coral = #ff7f50</td>
1296 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cornflowerblue;"></span><br>
1297 </td>
1298 <td>cornflowerblue = #6495ed</td>
1299 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cornsilk;"></span><br>
1300 </td>
1301 <td>cornsilk = #fff8dc</td>
1302 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% crimson;"></span><br>
1303 </td>
1304 <td>crimson = #dc143c</td>
1305 </tr>
1306 <tr>
1307 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% cyan;"></span><br>
1308 </td>
1309 <td>cyan = #00ffff</td>
1310 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkblue;"></span><br>
1311 </td>
1312 <td>darkblue = #00008b</td>
1313 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkcyan;"></span><br>
1314 </td>
1315 <td>darkcyan = #008b8b</td>
1316 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgoldenrod;"></span><br>
1317 </td>
1318 <td>darkgoldenrod = #b8860b</td>
1319 </tr>
1320 <tr>
1321 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgray;"></span><br>
1322 </td>
1323 <td>darkgray = #a9a9a9</td>
1324 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgreen;"></span><br>
1325 </td>
1326 <td>darkgreen = #006400</td>
1327 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkgrey;"></span><br>
1328 </td>
1329 <td>darkgrey = #a9a9a9</td>
1330 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkkhaki;"></span><br>
1331 </td>
1332 <td>darkkhaki = #bdb76b</td>
1333 </tr>
1334 <tr>
1335 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkmagenta;"></span><br>
1336 </td>
1337 <td>darkmagenta = #8b008b</td>
1338 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkolivegreen;"></span><br>
1339 </td>
1340 <td>darkolivegreen = #556b2f</td>
1341 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkorange;"></span><br>
1342 </td>
1343 <td>darkorange = #ff8c00</td>
1344 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkorchid;"></span><br>
1345 </td>
1346 <td>darkorchid = #9932cc</td>
1347 </tr>
1348 <tr>
1349 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkred;"></span><br>
1350 </td>
1351 <td>darkred = #8b0000</td>
1352 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darksalmon;"></span><br>
1353 </td>
1354 <td>darksalmon = #e9967a</td>
1355 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkseagreen;"></span><br>
1356 </td>
1357 <td>darkseagreen = #8fbc8f</td>
1358 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslateblue;"></span><br>
1359 </td>
1360 <td>darkslateblue = #483d8b</td>
1361 </tr>
1362 <tr>
1363 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslategray;"></span><br>
1364 </td>
1365 <td>darkslategray = #2f4f4f</td>
1366 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkslategrey;"></span><br>
1367 </td>
1368 <td>darkslategrey = #2f4f4f</td>
1369 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkturquoise;"></span><br>
1370 </td>
1371 <td>darkturquoise = #00ced1</td>
1372 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% darkviolet;"></span><br>
1373 </td>
1374 <td>darkviolet = #9400d3</td>
1375 </tr>
1376 <tr>
1377 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% deeppink;"></span><br>
1378 </td>
1379 <td>deeppink = #ff1493</td>
1380 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% deepskyblue;"></span><br>
1381 </td>
1382 <td>deepskyblue = #00bfff</td>
1383 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dimgray;"></span><br>
1384 </td>
1385 <td>dimgray = #696969</td>
1386 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dimgrey;"></span><br>
1387 </td>
1388 <td>dimgrey = #696969</td>
1389 </tr>
1390 <tr>
1391 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% dodgerblue;"></span><br>
1392 </td>
1393 <td>dodgerblue = #1e90ff</td>
1394 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% firebrick;"></span><br>
1395 </td>
1396 <td>firebrick = #b22222</td>
1397 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% floralwhite;"></span><br>
1398 </td>
1399 <td>floralwhite = #fffaf0</td>
1400 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% forestgreen;"></span><br>
1401 </td>
1402 <td>forestgreen = #228b22</td>
1403 </tr>
1404 <tr>
1405 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% fuchsia;"></span><br>
1406 </td>
1407 <td>fuchsia = #ff00ff</td>
1408 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gainsboro;"></span><br>
1409 </td>
1410 <td>gainsboro = #dcdcdc</td>
1411 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% ghostwhite;"></span><br>
1412 </td>
1413 <td>ghostwhite = #f8f8ff</td>
1414 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gold;"></span><br>
1415 </td>
1416 <td>gold = #ffd700</td>
1417 </tr>
1418 <tr>
1419 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% goldenrod;"></span><br>
1420 </td>
1421 <td>goldenrod = #daa520</td>
1422 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% gray;"></span><br>
1423 </td>
1424 <td>gray = #808080</td>
1425 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% green;"></span><br>
1426 </td>
1427 <td>green = #008000</td>
1428 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% greenyellow;"></span><br>
1429 </td>
1430 <td>greenyellow = #adff2f</td>
1431 </tr>
1432 <tr>
1433 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% grey;"></span><br>
1434 </td>
1435 <td>grey = #808080</td>
1436 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% honeydew;"></span><br>
1437 </td>
1438 <td>honeydew = #f0fff0</td>
1439 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% hotpink;"></span><br>
1440 </td>
1441 <td>hotpink = #ff69b4</td>
1442 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% indianred;"></span><br>
1443 </td>
1444 <td>indianred = #cd5c5c</td>
1445 </tr>
1446 <tr>
1447 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% indigo;"></span><br>
1448 </td>
1449 <td>indigo = #4b0082</td>
1450 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% ivory;"></span><br>
1451 </td>
1452 <td>ivory = #fffff0</td>
1453 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% khaki;"></span><br>
1454 </td>
1455 <td>khaki = #f0e68c</td>
1456 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lavender;"></span><br>
1457 </td>
1458 <td>lavender = #e6e6fa</td>
1459 </tr>
1460 <tr>
1461 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lavenderblush;"></span><br>
1462 </td>
1463 <td>lavenderblush = #fff0f5</td>
1464 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lawngreen;"></span><br>
1465 </td>
1466 <td>lawngreen = #7cfc00</td>
1467 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lemonchiffon;"></span><br>
1468 </td>
1469 <td>lemonchiffon = #fffacd</td>
1470 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightblue;"></span><br>
1471 </td>
1472 <td>lightblue = #add8e6</td>
1473 </tr>
1474 <tr>
1475 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightcoral;"></span><br>
1476 </td>
1477 <td>lightcoral = #f08080</td>
1478 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightcyan;"></span><br>
1479 </td>
1480 <td>lightcyan = #e0ffff</td>
1481 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgoldenrodyellow;"></span><br>
1482 </td>
1483 <td>lightgoldenrodyellow = #fafad2</td>
1484 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgray;"></span><br>
1485 </td>
1486 <td>lightgray = #d3d3d3</td>
1487 </tr>
1488 <tr>
1489 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgreen;"></span><br>
1490 </td>
1491 <td>lightgreen = #90ee90</td>
1492 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightgrey;"></span><br>
1493 </td>
1494 <td>lightgrey = #d3d3d3</td>
1495 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightpink;"></span><br>
1496 </td>
1497 <td>lightpink = #ffb6c1</td>
1498 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightsalmon;"></span><br>
1499 </td>
1500 <td>lightsalmon = #ffa07a</td>
1501 </tr>
1502 <tr>
1503 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightseagreen;"></span><br>
1504 </td>
1505 <td>lightseagreen = #20b2aa</td>
1506 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightskyblue;"></span><br>
1507 </td>
1508 <td>lightskyblue = #87cefa</td>
1509 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightslategray;"></span><br>
1510 </td>
1511 <td>lightslategray = #778899</td>
1512 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightslategrey;"></span><br>
1513 </td>
1514 <td>lightslategrey = #778899</td>
1515 </tr>
1516 <tr>
1517 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightsteelblue;"></span><br>
1518 </td>
1519 <td>lightsteelblue = #b0c4de</td>
1520 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lightyellow;"></span><br>
1521 </td>
1522 <td>lightyellow = #ffffe0</td>
1523 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% lime;"></span><br>
1524 </td>
1525 <td>lime = #00ff00</td>
1526 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% limegreen;"></span><br>
1527 </td>
1528 <td>limegreen = #32cd32</td>
1529 </tr>
1530 <tr>
1531 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% linen;"></span><br>
1532 </td>
1533 <td>linen = #faf0e6</td>
1534 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% magenta;"></span><br>
1535 </td>
1536 <td>magenta = #ff00ff</td>
1537 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% maroon;"></span><br>
1538 </td>
1539 <td>maroon = #800000</td>
1540 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumaquamarine;"></span><br>
1541 </td>
1542 <td>mediumaquamarine = #66cdaa</td>
1543 </tr>
1544 <tr>
1545 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumblue;"></span><br>
1546 </td>
1547 <td>mediumblue = #0000cd</td>
1548 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumorchid;"></span><br>
1549 </td>
1550 <td>mediumorchid = #ba55d3</td>
1551 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumpurple;"></span><br>
1552 </td>
1553 <td>mediumpurple = #9370db</td>
1554 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumseagreen;"></span><br>
1555 </td>
1556 <td>mediumseagreen = #3cb371</td>
1557 </tr>
1558 <tr>
1559 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumslateblue;"></span><br>
1560 </td>
1561 <td>mediumslateblue = #7b68ee</td>
1562 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumspringgreen;"></span><br>
1563 </td>
1564 <td>mediumspringgreen = #00fa9a</td>
1565 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumturquoise;"></span><br>
1566 </td>
1567 <td>mediumturquoise = #48d1cc</td>
1568 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mediumvioletred;"></span><br>
1569 </td>
1570 <td>mediumvioletred = #c71585</td>
1571 </tr>
1572 <tr>
1573 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% midnightblue;"></span><br>
1574 </td>
1575 <td>midnightblue = #191970</td>
1576 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mintcream;"></span><br>
1577 </td>
1578 <td>mintcream = #f5fffa</td>
1579 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% mistyrose;"></span><br>
1580 </td>
1581 <td>mistyrose = #ffe4e1</td>
1582 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% moccasin;"></span><br>
1583 </td>
1584 <td>moccasin = #ffe4b5</td>
1585 </tr>
1586 <tr>
1587 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% navajowhite;"></span><br>
1588 </td>
1589 <td>navajowhite = #ffdead</td>
1590 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% navy;"></span><br>
1591 </td>
1592 <td>navy = #000080</td>
1593 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% oldlace;"></span><br>
1594 </td>
1595 <td>oldlace = #fdf5e6</td>
1596 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% olive;"></span><br>
1597 </td>
1598 <td>olive = #808000</td>
1599 </tr>
1600 <tr>
1601 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% olivedrab;"></span><br>
1602 </td>
1603 <td>olivedrab = #6b8e23</td>
1604 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orange;"></span><br>
1605 </td>
1606 <td>orange = #ffa500</td>
1607 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orangered;"></span><br>
1608 </td>
1609 <td>orangered = #ff4500</td>
1610 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% orchid;"></span><br>
1611 </td>
1612 <td>orchid = #da70d6</td>
1613 </tr>
1614 <tr>
1615 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palegoldenrod;"></span><br>
1616 </td>
1617 <td>palegoldenrod = #eee8aa</td>
1618 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palegreen;"></span><br>
1619 </td>
1620 <td>palegreen = #98fb98</td>
1621 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% paleturquoise;"></span><br>
1622 </td>
1623 <td>paleturquoise = #afeeee</td>
1624 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% palevioletred;"></span><br>
1625 </td>
1626 <td>palevioletred = #db7093</td>
1627 </tr>
1628 <tr>
1629 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% papayawhip;"></span><br>
1630 </td>
1631 <td>papayawhip = #ffefd5</td>
1632 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% peachpuff;"></span><br>
1633 </td>
1634 <td>peachpuff = #ffdab9</td>
1635 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% peru;"></span><br>
1636 </td>
1637 <td>peru = #cd853f</td>
1638 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% pink;"></span><br>
1639 </td>
1640 <td>pink = #ffc0cb</td>
1641 </tr>
1642 <tr>
1643 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% plum;"></span><br>
1644 </td>
1645 <td>plum = #dda0dd</td>
1646 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% powderblue;"></span><br>
1647 </td>
1648 <td>powderblue = #b0e0e6</td>
1649 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% purple;"></span><br>
1650 </td>
1651 <td>purple = #800080</td>
1652 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% red;"></span><br>
1653 </td>
1654 <td>red = #ff0000</td>
1655 </tr>
1656 <tr>
1657 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% rosybrown;"></span><br>
1658 </td>
1659 <td>rosybrown = #bc8f8f</td>
1660 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% royalblue;"></span><br>
1661 </td>
1662 <td>royalblue = #4169e1</td>
1663 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% saddlebrown;"></span><br>
1664 </td>
1665 <td>saddlebrown = #8b4513</td>
1666 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% salmon;"></span><br>
1667 </td>
1668 <td>salmon = #fa8072</td>
1669 </tr>
1670 <tr>
1671 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% sandybrown;"></span><br>
1672 </td>
1673 <td>sandybrown = #f4a460</td>
1674 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% seagreen;"></span><br>
1675 </td>
1676 <td>seagreen = #2e8b57</td>
1677 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% seashell;"></span><br>
1678 </td>
1679 <td>seashell = #fff5ee</td>
1680 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% sienna;"></span><br>
1681 </td>
1682 <td>sienna = #a0522d</td>
1683 </tr>
1684 <tr>
1685 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% silver;"></span><br>
1686 </td>
1687 <td>silver = #c0c0c0</td>
1688 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% skyblue;"></span><br>
1689 </td>
1690 <td>skyblue = #87ceeb</td>
1691 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slateblue;"></span><br>
1692 </td>
1693 <td>slateblue = #6a5acd</td>
1694 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slategray;"></span><br>
1695 </td>
1696 <td>slategray = #708090</td>
1697 </tr>
1698 <tr>
1699 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% slategrey;"></span><br>
1700 </td>
1701 <td>slategrey = #708090</td>
1702 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% snow;"></span><br>
1703 </td>
1704 <td>snow = #fffafa</td>
1705 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% springgreen;"></span><br>
1706 </td>
1707 <td>springgreen = #00ff7f</td>
1708 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% steelblue;"></span><br>
1709 </td>
1710 <td>steelblue = #4682b4</td>
1711 </tr>
1712 <tr>
1713 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% tan;"></span><br>
1714 </td>
1715 <td>tan = #d2b48c</td>
1716 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% teal;"></span><br>
1717 </td>
1718 <td>teal = #008080</td>
1719 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% thistle;"></span><br>
1720 </td>
1721 <td>thistle = #d8bfd8</td>
1722 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% tomato;"></span><br>
1723 </td>
1724 <td>tomato = #ff6347</td>
1725 </tr>
1726 <tr>
1727 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% turquoise;"></span><br>
1728 </td>
1729 <td>turquoise = #40e0d0</td>
1730 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% violet;"></span><br>
1731 </td>
1732 <td>violet = #ee82ee</td>
1733 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% wheat;"></span><br>
1734 </td>
1735 <td>wheat = #f5deb3</td>
1736 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% white;"></span><br>
1737 </td>
1738 <td>white = #ffffff</td>
1739 </tr>
1740 <tr>
1741 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% whitesmoke;"></span><br>
1742 </td>
1743 <td>whitesmoke = #f5f5f5</td>
1744 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% yellow;"></span><br>
1745 </td>
1746 <td>yellow = #ffff00</td>
1747 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% yellowgreen;"></span><br>
1748 </td>
1749 <td>yellowgreen = #9acd32</td>
1750 <td><span class="colorsquare" style="background: none repeat scroll 0% 50% transparent;"></span><br>
1751 </td>
1752 <td>transparent = rgba(0,0,0,0)</td>
1753 </tr>
1754 </tbody>
1755 </table>
1756 <h4>Looked-up Colors <span class="grammar" style="font-size: smaller;"><looked-up-color></span></h4>
1757 <p>With looked-up colors you can refer to any other color property that is
1758 set on the current node or any of its parents. This is a very powerful
1759 feature, as it allows a generic palette of colors to be specified on the
1760 scene then used thoughout the application. If you want to change one of
1761 those palette colors you can do so at any level in the scene tree and it
1762 will affect that node and all its decendents. Looked-up colors are not
1763 looked up until they are applied, so they are live and react to any style
1764 changes that might occur, such as replacing a palette color at runtime
1765 with the "style" property on a node.</p>
1766 <p>In the following example, all background color of all buttons uses the
1767 looked up color "abc".</p>
1768 <p class="example">.root { abc: #f00 }<br>
1769 .button { -fx-background-color: abc }</p>
1770 <h4>RGB Colors <span class="grammar" style="font-size: smaller;"><rgb-color></span></h4>
1771 <p>The RGB color model is used in numerical color specifications. It has a
1772 number of different supported forms.</p>
1773 <p class="grammar">#<digit><digit><digit><br>
1774 |
1775 #<digit><digit><digit><digit><digit><digit><br>
1776 | rgb( <a href="#typenumber" class="typelink"><integer></a> , <a href="#typenumber"
1777 class="typelink"><integer></a>
1778 , <a href="#typenumber" class="typelink"><integer></a> )<br>
1779 | rgb( <a href="#typenumber" class="typelink"><integer></a> %, <a
1780 href="#typenumber"
1781 class="typelink"><integer></a>%
1782 , <a href="#typenumber" class="typelink"><integer></a>% )<br>
1783 | rgba( <a href="#typenumber" class="typelink"><integer></a> , <a
1784 href="#typenumber"
1785 class="typelink"><integer></a>
1786 , <a href="#typenumber" class="typelink"><integer></a> , <a href="#typenumber"
1787 class="typelink"><number></a>
1788 ) <br>
1789 | rgba( <a href="#typenumber" class="typelink"><integer></a>% , <a
1790 href="#typenumber"
1791 class="typelink"><integer></a>%
1792 , <a href="#typenumber" class="typelink"><integer></a> %, <a href="#typenumber"
1793 class="typelink"><number></a>
1794 )</p>
1795 <p>These examples all specify the same color for the text fill of a Label:</p>
1796 <p class="example"></p>
1797 <ul style="list-style: none;">
1798 <li>.label { -fx-text-fill: #f00 } /* #rgb */</li>
1799 <li>.label { -fx-text-fill: #ff0000 } /* #rrggbb */</li>
1800 <li>.label { -fx-text-fill: rgb(255,0,0) }</li>
1801 <li> .label { -fx-text-fill: rgb(100%, 0%, 0%) }</li>
1802 <li>.label { -fx-text-fill: rgba(255,0,0,1) }</li>
1803 </ul>
1804 <p></p>
1805 <p><strong>RGB Hex</strong>: The format of an RGB value in hexadecimal
1806 notation is a ‘#’ immediately followed by either three or six
1807 hexadecimal characters. The three-digit RGB notation (#rgb) is converted
1808 into six-digit form (#rrggbb) by replicating digits, not by adding zeros.
1809 For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff)
1810 can be specified with the short notation (#fff) and removes any
1811 dependencies on the color depth of the display.</p>
1812 <p><strong>RGB Decimal or Percent</strong>: The format of an RGB value in
1813 the functional notation is ‘rgb(’ followed by a
1814 comma-separated list of three numerical values (either three decimal
1815 integer values or three percentage values) followed by ‘)’.
1816 The integer value 255 corresponds to 100%, and to F or FF in the
1817 hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. White
1818 space characters are allowed around the numerical values.</p>
1819 <p><strong>RGB + Alpha</strong>: This is an extension of the RGB color model
1820 to include an ‘alpha’ value that specifies the opacity of a
1821 color. This is accomplished via a functional syntax of the form rgba(...)
1822 form that takes a fourth parameter which is the alpha value. The alpha
1823 value must be a number in the range 0.0 (representing completely
1824 transparent) and 1.0 (completely opaque). As with the rgb() function, the
1825 red, green, and blue values may be decimal integers or percentages. The
1826 following examples all specify the same color:</p>
1827 <p class="example"></p>
1828 <ul style="list-style: none;">
1829 <li>.label { -fx-text-fill: rgb(255,0,0) } /* integer range 0 — 255*/</li>
1830 <li> .label { -fx-text-fill: rgba(255,0,0,1) /* the same, with explicit
1831 opacity of 1 */</li>
1832 <li> .label { -fx-text-fill: rgb(100%,0%,0%) } /* float range 0.0% —
1833 100.0% */</li>
1834 <li> .label { -fx-text-fill: rgba(100%,0%,0%,1) } /* the same, with
1835 explicit opacity of 1 */</li>
1836 </ul>
1837 <p></p>
1838 <h4>HSB Colors <span class="grammar" style="font-size: smaller;"><hsb-color></span></h4>
1839 <p>Colors can be specified using the HSB (sometimes called HSV) color model,
1840 as follows:</p>
1841 <p class="grammar">hsb( <a href="#typenumber" class="typelink"><number></a>
1842 , <a href="#typenumber" class="typelink"><number></a>% , <a href="#typenumber"
1843 class="typelink"><number></a>%
1844 ) | hsba( <a href="#typenumber" class="typelink"><number></a> , <a
1845 href="#typenumber"
1846 class="typelink"><number></a>%
1847 , <a href="#typenumber" class="typelink"><number></a>% , <a href="#typenumber"
1848 class="typelink"><number></a>
1849 )</p>
1850 <p>The first number is <span style="font-style:italic;">hue</span>, a number in the range 0 to 360
1851 degrees. The second number is <em>saturation,</em> a percentage in the
1852 range 0% to 100%. The third number is <span style="font-style:italic;">brightness</span>, also a
1853 percentage in the range 0% to 100%. The hsba(...) form takes a fourth
1854 parameter at the end which is a alpha value in the range 0.0 to 1.0,
1855 specifying completely transparent and completely opaque, respectively.</p>
1856 <h4>Color Functions <span class="grammar" style="font-size: smaller;"><color-function></span></h4>
1857 <p>JavaFX supports some color computation functions. These compute new
1858 colors from input colors at the time the color style is applied. This
1859 enables a color theme to be specified using a single base color and to
1860 have variant colors computed from that base color. There are two color
1861 functions: derive() and ladder().</p>
1862 <p class="grammar"><derive> | <ladder></p>
1863 <p><strong>Derive </strong><span class="grammar" style="font-size: smaller;"><derive></span></p>
1864 <p class="grammar">derive( <a href="#typecolor" class="typelink"><color></a>
1865 , <a href="#typenumber" class="typelink"><number></a>% )</p>
1866 <p>The derive function takes a color and computes a brighter or darker
1867 version of that color. The second parameter is the brightness offset,
1868 representing how much brighter or darker the derived color should be. Positive percentages indicate brighter colors
1869 and negative percentages indicate darker colors. A value of -100% means
1870 completely black, 0% means no change in brightness, and 100% means
1871 completely white.</p>
1872 <p><strong>Ladder</strong><span class="grammar" style="font-size: smaller;"><ladder></span></p>
1873 <p class="grammar">ladder(<a href="#typecolor" class="typelink"><color></a>
1874 , <a href="#typecolorstop" class="typelink"><color-stop></a> [, <a
1875 href="#typecolorstop"
1876 class="typelink"><color-stop></a>]+)</p>
1877 <p>The ladder function interpolates between colors. The effect is as if a
1878 gradient is created using the stops provided, and then the brightness of
1879 the provided <a href="#typecolor" class="typelink"><color></a> is
1880 used to index a color value within that gradient. At 0% brightness, the
1881 color at the 0.0 end of the gradient is used; at 100% brightness, the
1882 color at the 1.0 end of the gradient is used; and at 50% brightness, the
1883 color at 0.5, the midway point of the gradient, is used. Note that no
1884 gradient is actually rendered. This is merely an interpolation function
1885 that results in a single color.</p>
1886 <p>Stops are per <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax."
1887 class="typelink">W3C
1888 color-stop syntax</a> and are normalized accordingly.</p>
1889 <p>For example, you could use the following if you want the text color to be
1890 black or white depending upon the brightness of the background.</p>
1891 <p class="example">background: white;<br>
1892 -fx-text-fill: ladder(background, white 49%, black 50%);</p>
1893 <p>The resulting -fx-text-fill value will be black, because the background
1894 (white) has a brightness of 100%, and the color at 1.0 on the gradient is
1895 black. If we were to change the background color to black or dark grey,
1896 the brightness would be less than 50%, giving an -fx-text-fill value of
1897 white.</p>
1898 <p><span style="color: #af0000; ">The following syntax for ladder does not
1899 conform to the CSS grammar and is deprecated in JavaFX 2.0. The JavaFX
1900 2.0 CSS parser supports the syntax but this support may be removed in
1901 later releases.</span></p>
1902 <p class="grammar"><span style="color: #af0000; ">ladder(<a href="#typecolor" class="typelink"><color></a>)
1903 stops [ ( <a href="#typenumber" class="typelink"><number></a> , <a
1904 href="#typecolor"
1905 class="typelink"><color></a>
1906 ) ]+ </span></p>
1907 <h2><a name="stage" id="stage">Stage</a></h2>
1908 <table summary="property table" class="package" width="100%">
1909 <tbody>
1910 <tr>
1911 <td>javafx.stage</td>
1912 </tr>
1913 </tbody>
1914 </table>
1915 <h4><a name="popupwindow" id="popupwindow">Group</a></h4>
1916 <p class="styleclass">Style class: .root.popup</p>
1917 <p>PopupWindow does not have any properties that can be styled by CSS, but a PopupWindow does have its own Scene.
1918 Scene's root gets the .root style-class by default. If the Scene is the root scene of a PopupWindow, then the
1919 .popup style-class is also added. This allows the root scene of a PopupWindow to have distinct styles via
1920 the CSS rule <code>.root.popup { /* declarations */ }</code>
1921 <h2><a name="nodes" id="nodes">Nodes</a></h2>
1922 <table summary="property table" class="package" width="100%">
1923 <tbody>
1924 <tr>
1925 <td>javafx.scene</td>
1926 </tr>
1927 </tbody>
1928 </table>
1929 <h4><a name="group" id="group">Group</a></h4>
1930 <p class="styleclass">Style class: empty by default</p>
1931 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
1932 <thead>
1933 <tr>
1934 <th class="propertyname">CSS Property</th>
1935 <th class="value">Values</th>
1936 <th class="default">Default</th>
1937 <th>Comments</th>
1938 </tr>
1939 </thead>
1940 <tbody>
1941 <tr>
1942 <td colspan="4">Group extends Parent. Group does not add any addtional
1943 CSS properties.</td>
1944 </tr>
1945 <tr>
1946 <td colspan="4" class="parents">Also has all properties of <a href="#parent">Parent</a></td>
1947 </tr>
1948 </tbody>
1949 </table>
1950 <br>
1951 <h4><a name="node" id="node">Node</a></h4>
1952 <p class="styleclass">Style class: empty by default<br>
1953 </p>
1954 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
1955 <thead>
1956 <tr>
1957 <th class="propertyname">CSS Property</th>
1958 <th class="value">Values</th>
1959 <th class="default">Default</th>
1960 <th class="range">Range</th>
1961 <th>Comments</th>
1962 </tr>
1963 </thead>
1964 <tbody>
1965 <tr>
1966 <td class="propertyname">-fx-blend-mode</td>
1967 <td class="value">[ add | blue | color-burn | color-dodge | darken |
1968 difference | exclusion | green | hard-light | lighten | multiply |
1969 overlay | red | screen | soft-light | src-atop | src-in | src-out |
1970 src-over ] </td>
1971 <td>null</td>
1972 <td> </td>
1973 <td> </td>
1974 </tr>
1975 <tr>
1976 <td class="propertyname">-fx-cursor</td>
1977 <td class="value">[ null | crosshair | default | hand | move |
1978 e-resize | h-resize | ne-resize | nw-resize | n-resize | se-resize |
1979 sw-resize | s-resize | w-resize | v-resize | text | wait ] | <a href="#typeurl"
1980 class="typelink"><url></a></td>
1981 <td class="default">null</td>
1982 <td class="range"> </td>
1983 <td>inherits </td>
1984 </tr>
1985 <tr>
1986 <td class="propertyname">-fx-effect</td>
1987 <td class="value"><a href="#typeeffect" class="typelink"><effect></a></td>
1988 <td class="default">null</td>
1989 <td class="range"> </td>
1990 <td> </td>
1991 </tr>
1992 <tr>
1993 <td class="propertyname">-fx-focus-traversable</td>
1994 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
1995 <td class="default">false</td>
1996 <td class="range"> </td>
1997 <td>The default value for controls is true, although there are some exceptions.
1998 See <a href="#controls">Controls</a> for details.</td>
1999 </tr>
2000 <tr>
2001 <td class="propertyname">-fx-view-order</td>
2002 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
2003 <td class="default">0</td>
2004 <td class="range"> </td>
2005 <td>This property is used to alter the rendering and picking order of
2006 a node within its parent without reordering the parent's children list.
2007 The parent traverses its children in decreasing viewOrder order.
2008 </td>
2009 </tr>
2010 <tr>
2011 <td class="propertyname">-fx-opacity</td>
2012 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
2013 <td class="default">1</td>
2014 <td class="range">[0.0 ... 1.0]</td>
2015 <td>Opacity can be thought of conceptually as a postprocessing
2016 operation. Conceptually, after the node (including its descendants)
2017 is rendered into an RGBA offscreen image, the opacity setting
2018 specifies how to blend the offscreen rendering into the current
2019 composite rendering. </td>
2020 </tr>
2021 <tr>
2022 <td class="propertyname">-fx-rotate</td>
2023 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
2024 <td class="default">0</td>
2025 <td class="range"> </td>
2026 <td>This is the angle of the rotation in degrees. Zero degrees is at 3
2027 o'clock (directly to the right). Angle values are positive
2028 clockwise. Rotation is about the center.</td>
2029 </tr>
2030 <tr>
2031 <td class="propertyname">-fx-scale-x</td>
2032 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
2033 <td class="default">1</td>
2034 <td class="range"> </td>
2035 <td>scale about the center</td>
2036 </tr>
2037 <tr>
2038 <td class="propertyname">-fx-scale-y</td>
2039 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
2040 <td class="default">1</td>
2041 <td class="range"> </td>
2042 <td>scale about the center</td>
2043 </tr>
2044 <tr>
2045 <td class="propertyname">-fx-scale-z</td>
2046 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
2047 <td class="default">1</td>
2048 <td class="range"> </td>
2049 <td>scale about the center</td>
2050 </tr>
2051 <tr>
2052 <td class="propertyname">-fx-translate-x</td>
2053 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
2054 <td class="default">0</td>
2055 <td class="range"> </td>
2056 <td> </td>
2057 </tr>
2058 <tr>
2059 <td class="propertyname">-fx-translate-y</td>
2060 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
2061 <td class="default">0</td>
2062 <td class="range"> </td>
2063 <td> </td>
2064 </tr>
2065 <tr>
2066 <td class="propertyname">-fx-translate-z</td>
2067 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
2068 <td class="default">0</td>
2069 <td class="range"> </td>
2070 <td> </td>
2071 </tr>
2072 <tr>
2073 <td class="propertyname">visibility</td>
2074 <td class="value">[ visible | hidden | collapse | inherit ]</td>
2075 <td class="default">true (i.e, visible)</td>
2076 <td class="range"> </td>
2077 <td>See <a href="http://www.w3.org/TR/CSS2/visufx.html#visibility">W3C
2078 visibility property</a></td>
2079 </tr>
2080 </tbody>
2081 </table>
2082 <h4>Pseudo-classes</h4>
2083 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
2084 <thead>
2085 <tr>
2086 <th class="propertyname">CSS Pseudo-class</th>
2087 <th>Comments</th>
2088 </tr>
2089 </thead>
2090 <tbody>
2091 <tr>
2092 <td class="propertyname">disabled</td>
2093 <td>applies when the <strong>disabled</strong> variable is true</td>
2094 </tr>
2095 <tr>
2096 <td class="propertyname">focused</td>
2097 <td>applies when the <strong>focused</strong> variable is true</td>
2098 </tr>
2099 <tr>
2100 <td class="propertyname">hover</td>
2101 <td>applies when the <strong>hover</strong> variable is true</td>
2102 </tr>
2103 <tr>
2104 <td class="propertyname">pressed</td>
2105 <td>applies when the <strong>pressed</strong> variable is true</td>
2106 </tr>
2107 <tr>
2108 <td class="propertyname">show-mnemonic</td>
2109 <td>apples when the mnemonic affordance (typically an underscore)
2110 should be shown.</td>
2111 </tr>
2112 </tbody>
2113 </table>
2114 <h4><a name="parent" id="parent">Parent</a></h4>
2115 <p class="styleclass">Style
2116 class: empty by default</p>
2117 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
2118 <thead>
2119 <tr>
2120 <th class="propertyname">CSS Property</th>
2121 <th class="value">Values</th>
2122 <th class="default">Default</th>
2123 <th>Comments</th>
2124 </tr>
2125 </thead>
2126 <tbody>
2127 <tr>
2128 <td colspan="4">Parent extends Node. Parent does not add any addtional
2129 CSS properties.</td>
2130 </tr>
2131 <tr>
2132 <td colspan="4" class="parents">Also has all properties of <a href="#node">Node</a></td>
2133 </tr>
2134 </tbody>
2135 </table>
2136 <br>
2137 <h4><a name="scene" id="scene">Scene</a></h4>
2138 <p class="styleclass">Style class: not applicable<br>
2139 </p>
2140 <p>The Scene object has no settable CSS properties, nor does it have any
2141 pseudo‑classes. However, the root node of the scene is assigned the style
2142 class "root" (in addition to style classes already assigned to the node).
2143 This is useful because the root node of Scene is the root container for
2144 all active scene‑graph nodes. Thus, it can serve as a container for
2145 properties that are inherited or looked up.</p>
2146 <table summary="property table" class="package" width="100%">
2147 <tbody>
2148 <tr>
2149 <td>javafx.scene.image</td>
2150 </tr>
2151 </tbody>
2152 </table>
2153 <h4><a name="imageview" id="imageview">ImageView</a></h4>
2154 <p class="styleclass">Style class: image-view</p>
2155 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
2156 <thead>
2157 <tr>
2158 <th class="propertyname">CSS Property</th>
2159 <th class="value">Values</th>
2160 <th class="default">Default</th>
2161 <th>Comments</th>
2162 </tr>
2163 </thead>
2164 <tbody>
2165 <tr>
2166 <td class="propertyname">-fx-image</td>
2167 <td class="value"><a href="#typeurl" class="typelink"><uri></a></td>
2168 <td class="default">null</td>
2169 <td>Relative URLs are resolved against the URL of the stylesheet.</td>
2170 </tr>
2171 <tr>
2172 <td colspan="4" class="parents">Also has all properties of <a href="#node">Node</a></td>
2173 </tr>
2174 </tbody>
2175 </table>
2176 <table summary="property table" class="package" width="100%">
2177 <tbody>
2178 <tr>
2179 <td>javafx.scene.layout</td>
2180 </tr>
2181 </tbody>
2182 </table>
2183 <br>
2184 <h4><a name="anchorpane" id="anchorpane">AnchorPane</a></h4>
2185 <p class="styleclass">Style class: empty by default</p>
2186 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
2187 <thead>
2188 <tr>
2189 <th class="propertyname">CSS Property</th>
2190 <th class="value">Values</th>
2191 <th class="default">Default</th>
2192 <th>Comments</th>
2193 </tr>
2194 </thead>
2195 <tbody>
2196 <tr>
2197 <td colspan="4">AnchorPane extends Pane and does not add any
2198 additional CSS properties.</td>
2199 </tr>
2200 <tr>
2201 <td colspan="4" class="parents">Also has all properties of <a href="#pane">Pane</a></td>
2202 </tr>
2203 </tbody>
2204 </table>
2205 <h4><a name="border" id="border">BorderPane</a></h4>
2206 <p class="styleclass">Style class: empty by default</p>
2207 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
2208 <thead>
2209 <tr>
2210 <th class="propertyname">CSS Property</th>
2211 <th class="value">Values</th>
2212 <th class="default">Default</th>
2213 <th>Comments</th>
2214 </tr>
2215 </thead>
2216 <tbody>
2217 <tr>
2218 <td colspan="4">BorderPane extends Pane and does not add any
2219 additional CSS properties.</td>
2220 </tr>
2221 <tr>
2222 <td colspan="4" class="parents">Also has all properties of <a href="#pane">Pane</a></td>
2223 </tr>
2224 </tbody>
2225 </table>
2226 <br>
2227
2228 <h4><a name="dialogpane" id="dialogpane">DialogPane</a></h4>
2229 <p class="styleclass">Style class: dialog-pane</p>
2230 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
2231 <thead>
2232 <tr>
2233 <th class="propertyname">CSS Property</th>
2234 <th class="value">Values</th>
2235 <th>Default</th>
2236 <th>Comments</th>
2237 </tr>
2238 </thead>
2239 <tbody>
2240 <tr>
2241 <td class="propertyname">-fx-graphic</td>
2242 <td class="value"><a href="#typeurl" class="typelink"><uri></a></td>
2243 <td>null</td>
2244 <td> </td>
2245 </tr>
2246 <tr>
2247 <td colspan="4" class="parents">Also has all properties of <a href="#pane">Pane</a></td>
2248 </tr>
2249 </tbody>
2250 </table>
2251 <h4>Substructure</h4>
2252 <ul>
2253 <li>header-panel — BoderPane
2254 <ul><li>graphic-container — StackPane</li></ul>
2255 </li>
2256 <li>content — Label</li>
2257 <li>button-bar — ButtonBar</li>
2258 </ul>
2259
2260 <h4><a name="flowpane" id="flowpane">FlowPane</a></h4>
2261 <p class="styleclass">Style class: empty by default</p>
2262 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
2263 <thead>
2264 <tr>
2265 <th class="propertyname">CSS Property</th>
2266 <th class="value">Values</th>
2267 <th class="default">Default</th>
2268 <th>Comments</th>
2269 </tr>
2270 </thead>
2271 <tbody>
2272 <tr>
2273 <td class="propertyname">-fx-hgap</td>
2274 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
2275 <td class="default">0</td>
2276 <td> </td>
2277 </tr>
2278 <tr>
2279 <td class="propertyname">-fx-vgap</td>
2280 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
2281 <td class="default">0</td>
2282 <td> </td>
2283 </tr>
2284 <tr>
2285 <td class="propertyname">-fx-alignment</td>
2286 <td class="value">[ top-left | top-center | top-right | center-left |
2287 center | center-right bottom-left | bottom-center | bottom-right |
2288 baseline-left | baseline-center | baseline-right ]</td>
2289 <td class="default">top-left</td>
2290 <td> </td>
2291 </tr>
2292 <tr>
2293 <td class="propertyname">-fx-column-halignment</td>
2294 <td class="value">[ left | center | right ]</td>
2295 <td class="default">left</td>
2296 <td> </td>
2297 </tr>
2298 <tr>
2299 <td class="propertyname">-fx-row-valignment</td>
2300 <td class="value">[ top | center | baseline | bottom ] </td>
2301 <td class="default">center</td>
2302 <td> </td>
2303 </tr>
2304 <tr>
2305 <td class="propertyname">-fx-orientation</td>
2306 <td class="value">[ horizontal | vertical ]</td>
2307 <td class="default">horizontal</td>
2308 <td> </td>
2309 </tr>
2310 <tr>
2311 <td colspan="4" class="parents">Also has all properties of <a href="#pane">Pane</a></td>
2312 </tr>
2313 </tbody>
2314 </table>
2315 <h4><a name="gridpane" id="gridpane">GridPane</a></h4>
2316 <p class="styleclass">Style class: empty by default</p>
2317 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
2318 <thead>
2319 <tr>
2320 <th class="propertyname">CSS Property</th>
2321 <th class="value">Values</th>
2322 <th class="default">Default</th>
2323 <th>Comments</th>
2324 <td><br>
2325 </td>
2326 </tr>
2327 </thead>
2328 <tbody>
2329 <tr>
2330 <td class="propertyname">-fx-hgap</td>
2331 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
2332 <td class="default">0</td>
2333 <td> </td>
2334 <td><br>
2335 </td>
2336 </tr>
2337 <tr>
2338 <td class="propertyname">-fx-vgap</td>
2339 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
2340 <td class="default">0</td>
2341 <td> </td>
2342 <td><br>
2343 </td>
2344 </tr>
2345 <tr>
2346 <td class="propertyname">-fx-alignment</td>
2347 <td class="value">[ top-left | top-center | top-right | center-left |
2348 center | center-right bottom-left | bottom-center | bottom-right |
2349 baseline-left | baseline-center | baseline-right ]</td>
2350 <td class="default">top-left</td>
2351 <td> </td>
2352 <td><br>
2353 </td>
2354 </tr>
2355 <tr>
2356 <td class="propertyname">-fx-grid-lines-visible</td>
2357 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
2358 <td class="default">false</td>
2359 <td class="range"> </td>
2360 <td> </td>
2361 </tr>
2362 <tr>
2363 <td colspan="4" class="parents">Also has all properties of <a href="#pane">Pane</a></td>
2364 </tr>
2365 </tbody>
2366 </table>
2367 <h4><a name="hbox" id="hbox">HBox</a></h4>
2368 <p class="styleclass">Style class: empty by default</p>
2369 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
2370 <thead>
2371 <tr>
2372 <th class="propertyname">CSS Property</th>
2373 <th class="value">Values</th>
2374 <th>Default</th>
2375 <th>Comments</th>
2376 </tr>
2377 </thead>
2378 <tbody>
2379 <tr>
2380 <td class="propertyname">-fx-spacing</td>
2381 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
2382 <td>0</td>
2383 <td> </td>
2384 </tr>
2385 <tr>
2386 <td class="propertyname">-fx-alignment</td>
2387 <td class="value">[ top-left | top-center | top-right | center-left |
2388 center | center-right bottom-left | bottom-center | bottom-right |
2389 baseline-left | baseline-center | baseline-right ]</td>
2390 <td class="default">top-left</td>
2391 <td> </td>
2392 </tr>
2393 <tr>
2394 <td class="propertyname">-fx-fill-height</td>
2395 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
2396 <td class="default">true</td>
2397 <td> </td>
2398 </tr>
2399 <tr>
2400 <td colspan="4" class="parents">Also has all properties of <a href="#pane">Pane</a></td>
2401 </tr>
2402 </tbody>
2403 </table>
2404 <h4><a name="pane" id="pane">Pane</a></h4>
2405 <p class="styleclass">Style class: empty by default</p>
2406 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
2407 <thead>
2408 <tr>
2409 <th class="propertyname">CSS Property</th>
2410 <th class="value">Values</th>
2411 <th class="default">Default</th>
2412 <th>Comments</th>
2413 </tr>
2414 </thead>
2415 <tbody>
2416 <tr>
2417 <td colspan="4">Pane extends Region to expose Region's children. Pane
2418 does not add any addtional CSS properties.</td>
2419 </tr>
2420 <tr>
2421 <td colspan="4" class="parents">Also has all properties of <a href="#region">Region</a></td>
2422 </tr>
2423 </tbody>
2424 </table>
2425 <br>
2426 <h4><a name="region" id="region">Region</a></h4>
2427 <p class="styleclass">Style class: empty by default</p>
2428 <p>A Region is a Node (extending from Parent) with backgrounds and borders
2429 that are styleable via CSS. A Region is typically a rounded rectangle,
2430 though this can be modified through CSS to be an arbitrary shape. Regions
2431 can contain other Region objects (sub-regions) or they can contain
2432 sub-controls. All Regions have the same set of CSS properties as described
2433 below. </p>
2434 <p>Each Region consists of several layers, painted from bottom to top, in
2435 this order:</p>
2436 <ol>
2437 <li>background fills</li>
2438 <li>background images</li>
2439 <li>border strokes</li>
2440 <li>border images</li>
2441 <li>contents</li>
2442 </ol>
2443 <p>The background and border mechanisms are patterned after the CSS 3 draft
2444 backgrounds and borders module. See <a href="#references">[4]</a> for a
2445 detailed description.</p>
2446 <p>Background fills are specified with the properties <span class="propertyname">-fx-background-color</span>,
2447 <span class="propertyname">-fx-background-radius</span> and <span class="propertyname">-fx-background-insets</span>.
2448 The -fx-background-color property is a series of one or more
2449 comma-separated <paint> values. The number of values in the series
2450 determines the number of background rectangles that are painted.
2451 Background rectangles are painted in the order specified using the given
2452 <paint> value. Each background rectangle can have different radii
2453 and insets. The -fx-background-radius and -fx-background-insets properties
2454 are series of comma-separated values (or sets of values). The radius and
2455 insets values used for a particular background are the found in the
2456 corresponding position in the -fx-background-radius and
2457 -fx-background-insets series. For example, suppose a series of three
2458 values is given for the -fx-background-color property. A series of three
2459 values should also be specified for the -fx-background-radius and
2460 -fx-background-insets properties. The first background will be painted
2461 using the first radius value and first insets value, the second background
2462 will be painted with the second radius value and second insets value, and
2463 so forth.</p>
2464 <p>Note also that properties such as -fx-background-radius and
2465 -fx-background-insets can contain a series of values or <span style="font-style:italic;">sets</span> of
2466 four values. A set of values is separated by whitespace, whereas the
2467 values or sets-of-values in a series are separated by commas. For
2468 -fx-background-radius, a single value indicates that the value should be
2469 used for the radius of all four corners of the background rectangle. A set
2470 of four values indicates that different radius values are to be used for
2471 the top-left, top-right, bottom-right, and bottom-left corners, in that
2472 order. Similarly, the -fx-background-insets property can also contain a
2473 series of values or sets of values. A set of four values for
2474 -fx-background-insets indicates that different insets are to be used for
2475 the top, right, bottom, and left edges of the rectangle, in that order.</p>
2476 <p>Background images are specified with the properties <span class="propertyname">-fx-background-image</span>,
2477 <span class="propertyname">-fx-background-repeat</span>, <span class="propertyname">-fx-background-position</span>
2478 and <span class="propertyname">-fx-background-size</span>. The number of
2479 images in the series of -fx-background-image values determines the number
2480 of background images that are painted. The -fx-background-repeat,
2481 -fx-background-position, and -fx-background-size properties each can
2482 contain a series of values. For each item in the -fx-background-image
2483 series, the corresponding items in the -fx-background-repeat,
2484 -fx-background-position, and -fx-background-size properties are applied to
2485 that background image.</p>
2486 <p>Stroked borders are specified with the properties <span class="propertyname">-fx-border-color</span>,
2487 <span class="propertyname">-fx-border-style</span>, <span class="propertyname">-fx-border-width</span>,
2488 <span class="propertyname">-fx-border-radius</span> and <span class="propertyname">-fx-border-insets</span>.
2489 Each property contains a series of items. The maximum number of items in the -fx-
2490 border-color or -fx-border-style property determines the number of border layers that are painted..
2491 Each border in the series is painted using information from the
2492 corresponding series item of the -fx-border-color, -fx-border-style, -fx-border-width,
2493 -fx-border-radius, and -fx-border-insets properties. If there is no -fx-border-color, the default color is black.
2494 if there is no -fx-border-style, the default style is solid. </p>
2495 <p>Image borders are specified with the properties <span class="propertyname">-fx-border-image-source</span>,
2496 <span class="propertyname">-fx-border-image-repeat</span>, <span class="propertyname">-fx-border-image-slice</span>,
2497 <span class="propertyname">-fx-border-image-width</span> and <span class="propertyname">-fx-border-image-insets</span>.
2498 Each property contains a series of items. The number of items in the
2499 -fx-border-image-source property determines the number of images that are
2500 painted. Each image in the series is painted using information from the
2501 corresponding series items of the -fx-border-image-repeat,
2502 -fx-border-image-slice, -fx-border-image-width, and
2503 -fx-border-image-insets properties.</p>
2504 <p>The region's contents are a sequence of nodes, like any other container.
2505 The contents are set programmatically and cannot be set via CSS.</p>
2506 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
2507 <thead>
2508 <tr>
2509 <th class="propertyname">CSS Property</th>
2510 <th class="value">Values</th>
2511 <th class="default">Default</th>
2512 <th>Comments</th>
2513 </tr>
2514 </thead>
2515 <tbody>
2516 <tr>
2517 <td colspan="4" class="propertyname"><em>BACKGROUND FILLS</em> (see <a
2518 href="http://www.w3.org/TR/css3-background/#backgrounds"
2519 target="_blank">CSS
2520 Backgrounds and Borders Module Level 3: Backgrounds</a>)</td>
2521 </tr>
2522 <tr>
2523 <td class="propertyname">-fx-region-background</td>
2524 <td class="value">javafx.scene.layout.Background</td>
2525 <td class="default">null</td>
2526 <td>This cannot be set directly from CSS but is created from the property values of
2527 -fx-background-color, -fx-background-image, -fx-background-insets, -fx-background-position,
2528 -fx-background-radius, -fx-background-repeat, -fx-background-size</td>
2529 </tr>
2530 <tr>
2531 <td class="propertyname">-fx-background-color</td>
2532 <td class="value"><a href="#typepaint" class="typelink"><paint></a>
2533 [ , <a href="#typepaint" class="typelink"><paint></a> ]*</td>
2534 <td class="default">transparent</td>
2535 <td>A series of paint values separated by commas.</td>
2536 </tr>
2537 <tr>
2538 <td class="propertyname">-fx-background-insets</td>
2539 <td class="value"><a href="#typesize" class="typelink"><size></a>
2540 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2541 class="typelink"><size></a>
2542 <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2543 class="typelink"><size></a>
2544 [ , [ <a href="#typesize" class="typelink"><size></a> | <a href="#typesize"
2545 class="typelink"><size></a>
2546 <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2547 class="typelink"><size></a>
2548 <a href="#typesize" class="typelink"><size></a>] ]*</td>
2549 <td class="default">0 0 0 0</td>
2550 <td>
2551 <p>A series of size values or sets of four size values, separated by
2552 commas. A single size value means all insets are the same.
2553 Otherwise, the four values for each inset are given in the order
2554 top, right, bottom, left. Each comma-separated value or set of
2555 values in the series applies to the corresponding background
2556 color.</p>
2557 </td>
2558 </tr>
2559 <tr>
2560 <td class="propertyname">-fx-background-radius</td>
2561 <td class="value">[<a href="#typesize" class="typelink"><size></a>]{1,4} [ / [<a href="#typesize" class="typelink"><size></a>]{1,4} ]?
2562 [ , [<a href="#typesize" class="typelink"><size></a>]{1,4} [ / [<a href="#typesize" class="typelink"><size></a>]{1,4} ]? ]*
2563 <td class="default">0 0 0 0</td>
2564 <td>
2565 <p>The same syntax and semenatics as CSS Backgrounds and Borders Module Level 3: <a href="http://www.w3.org/TR/css3-background/#the-border-radius">Curve Radii</a>
2566 applies to -fx-background-radius. Note that JavaFX supports only the short-hand syntax.</p>
2567 <p>Each comma-separated value or set of values in the series applies to the corresponding background color.</p>
2568 </td>
2569 </tr>
2570 <tr>
2571 <td colspan="4" class="propertyname"><em>BACKGROUND IMAGES</em> (see <a
2572 href="http://www.w3.org/TR/css3-background/#the-background-image"
2573 target="_blank">CSS
2574 Backgrounds and Borders Module Level 3: Background Image</a>)</td>
2575 </tr>
2576 <tr>
2577 <td class="propertyname">-fx-background-image</td>
2578 <td class="value"><a href="#typeurl" class="typelink"><uri></a>
2579 [ , <a href="#typeurl" class="typelink"><uri></a> ]*</td>
2580 <td class="default">null</td>
2581 <td>A series of image URIs separated by commas.</td>
2582 </tr>
2583 <tr>
2584 <td class="propertyname">-fx-background-position</td>
2585 <td class="value">
2586 <p><bg-position> [ , <bg-position> ]*<br>
2587 <strong>where</strong> <bg-position> = [<br>
2588 [ [ <a href="#typesize" class="typelink"><size></a>
2589 | left | center | right ] [ <a href="#typesize" class="typelink"><size></a>
2590 | top | center | bottom ]? ]<br>
2591 | [ [ center | [ left | right ] <a href="#typesize"
2592 class="typelink"><size></a>?
2593 ] || [ center | [ top | bottom ] <a href="#typesize" class="typelink"><size></a>?
2594 ]<br>
2595 ] </p>
2596 </td>
2597 <td class="default">0% 0%</td>
2598 <td>
2599 <p>A series of <bg-position> values separated by commas. Each
2600 bg-position item in the series applies to the corresponding image
2601 in the background-image series.</p>
2602 </td>
2603 </tr>
2604 <tr>
2605 <td class="propertyname">-fx-background-repeat</td>
2606 <td class="value"><repeat-style> [ , <repeat-style> ]*<br>
2607 <strong>where</strong> <repeat-style> = repeat-x | repeat-y |
2608 [repeat | space | round | stretch | no-repeat]{1,2}</td>
2609 <td class="default">repeat repeat</td>
2610 <td>
2611 <p>A series of <repeat-style> values separated by commas. Each
2612 repeat-style item in the series applies to the corresponding image
2613 in the background-image series.</p>
2614 </td>
2615 </tr>
2616 <tr>
2617 <td class="propertyname">-fx-background-size</td>
2618 <td class="value"><bg-size> [ , <bg-size> ]*<br>
2619 <bg-size> = [ <a href="#typesize" class="typelink"><size></a>
2620 | auto ]{1,2} | cover | contain | stretch</td>
2621 <td class="default">auto auto</td>
2622 <td>
2623 <p>A series of <bg-size> values separated by commas. Each
2624 bg-size item in the series applies to the corresponding image in
2625 the background-image series.</p>
2626 </td>
2627 </tr>
2628 <tr>
2629 <td colspan="4" class="propertyname"><em>STROKED BORDERS</em> (see <a
2630 href="http://www.w3.org/TR/css3-background/#borders"
2631 target="_blank">CSS Backgrounds and Borders Module Level 3: Borders</a>)
2632 <div><em>BORDER IMAGES</em> (see <a href="http://www.w3.org/TR/css3-background/#border-images"
2633 target="_blank">CSS
2634 Backgrounds and Borders Module Level 3: Border Images</a>)</div>
2635 </td>
2636 </tr>
2637
2638 <tr>
2639 <td class="propertyname">-fx-region-border</td>
2640 <td class="value">javafx.scene.layout.Border</td>
2641 <td class="default">null</td>
2642 <td>This cannot be set directly from CSS but is created from the property values of
2643 -fx-border-color, -fx-border-insets, -fx-border-radius, -fx-border-style, -fx-border-width,
2644 -fx-border-image-insets, -fx-border-image-repeat, -fx-border-image-slice, -fx-border-image-source,
2645 -fx-border-image-width</td>
2646 </tr>
2647 <tr>
2648 <td class="propertyname">-fx-border-color</td>
2649 <td class="value"><a href="#typepaint" class="typelink"><paint></a>
2650 | <a href="#typepaint" class="typelink"><paint></a> <a href="#typepaint"
2651 class="typelink"><paint></a>
2652 <a href="#typepaint" class="typelink"><paint></a> <a href="#typepaint"
2653 class="typelink"><paint></a>
2654 [ , [<a href="#typepaint" class="typelink"><paint></a> | <a href="#typepaint"
2655 class="typelink"><paint></a>
2656 <a href="#typepaint" class="typelink"><paint></a> <a href="#typepaint"
2657 class="typelink"><paint></a>
2658 <a href="#typepaint" class="typelink"><paint></a>] ]*</td>
2659 <td class="default">null</td>
2660 <td>
2661 <p>A series of paint values or sets of four paint values, separated
2662 by commas. For each item in the series, if a single paint value is
2663 specified, then that paint is used as the border for all sides of
2664 the region; and if a set of four paints is specified, they are
2665 used for the top, right, bottom, and left borders of the region,
2666 in that order. If the border is not rectangular, only the first
2667 paint value in the set is used.</p>
2668 </td>
2669 </tr>
2670 <tr>
2671 <td class="propertyname">-fx-border-insets</td>
2672 <td class="value"><a href="#typesize" class="typelink"><size></a>
2673 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2674 class="typelink"><size></a>
2675 <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2676 class="typelink"><size></a>
2677 [ , [ <a href="#typesize" class="typelink"><size></a> | <a href="#typesize"
2678 class="typelink"><size></a>
2679 <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2680 class="typelink"><size></a>
2681 <a href="#typesize" class="typelink"><size></a>] ]*</td>
2682 <td class="default">null</td>
2683 <td>
2684 <p>A series of inset or sets of four inset values, separated by
2685 commas. For each item in the series, a single inset value means
2686 that all insets are the same; and if a set of four inset values is
2687 specified, they are used for the top, right, bottom, and left
2688 edges of the region, in that order. Each item in the series of
2689 insets applies to the corresponding item in the series of border
2690 colors.</p>
2691 </td>
2692 </tr>
2693 <tr>
2694 <td class="propertyname">-fx-border-radius</td>
2695 <td class="value">[<a href="#typesize" class="typelink"><size></a>]{1,4} [ / [<a href="#typesize" class="typelink"><size></a>]{1,4} ]?
2696 [ , [<a href="#typesize" class="typelink"><size></a>]{1,4} [ / [<a href="#typesize" class="typelink"><size></a>]{1,4} ]? ]*
2697 <td class="default">null</td>
2698 <td>
2699 <p>Refer to CSS Backgrounds and Borders Module Level 3: <a href="http://www.w3.org/TR/css3-background/#the-border-radius">Curve Radii</a>.
2700 JavaFX supports only the short-hand syntax.</p>
2701 <p>Each comma-separated value or set of values in the series applies to the corresponding border color.</p>
2702 </td>
2703 </tr>
2704 <tr>
2705 <td class="propertyname">-fx-border-style</td>
2706 <td class="value">
2707 <p><border-style> [ , <border-style> ]*<br>
2708 <strong>where</strong> <border-style> = <dash-style>
2709 [phase <number>]? [centered | inside | outside]? [line-join
2710 [miter <a href="#typenumber" class="typelink"><number></a>
2711 | bevel | round]]? [line-cap [square | butt | round]]?<br>
2712 <strong>where</strong> <dash-style> = [ none | solid |
2713 dotted | dashed | segments( <number>, <number> [,
2714 <number>]*) ]</p>
2715 </td>
2716 <td class="default">null</td>
2717 <td>
2718 <p>A series of border style values, separated by commas. Each item
2719 in the series applies to the corresponding item in the series of
2720 border colors.</p>
2721 <p>The <span style="font-style:italic;">segments</span> dash-style defines a sequence representing
2722 the lengths of the dash segments. Alternate entries in the
2723 sequence represent the lengths of the opaque and transparent
2724 segments of the dashes. This corresponds to the <span style="font-style:italic;">strokeDashArray</span>
2725 variable of Shape.</p>
2726 <p>The optional <span style="font-style:italic;">phase</span> parameter defines the point in the
2727 dashing pattern that will correspond to the beginning of the
2728 stroke. This corresponds to the <span style="font-style:italic;">strokeDashOffset</span> variable
2729 of Shape.</p>
2730 </td>
2731 </tr>
2732 <tr>
2733 <td class="propertyname">-fx-border-width</td>
2734 <td class="value"><a href="#typesize" class="typelink"><size></a>
2735 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2736 class="typelink"><size></a>
2737 <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2738 class="typelink"><size></a>
2739 [ , [ <a href="#typesize" class="typelink"><size></a> | <a href="#typesize"
2740 class="typelink"><size></a>
2741 <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2742 class="typelink"><size></a>
2743 <a href="#typesize" class="typelink"><size></a>] ]*</td>
2744 <td class="default">null</td>
2745 <td>
2746 <p>A series of width or sets of four width values, separated by
2747 commas. For each item in the series, a single width value means
2748 that all border widths are the same; and if a set of four width
2749 values is specified, they are used for the top, right, bottom, and
2750 left border widths, in that order. If the border is not
2751 rectangular, only the first width value is used. Each item in the
2752 series of widths applies to the corresponding item in the series
2753 of border colors. </p>
2754 </td>
2755 </tr>
2756 <tr>
2757 <td class="propertyname">-fx-border-image-source</td>
2758 <td class="value"><a href="#typeurl" class="typelink"><uri></a>
2759 [ , <a href="#typeurl" class="typelink"><uri></a> ]*</td>
2760 <td class="default">null</td>
2761 <td>
2762 <p>A series of image URIs, separated by commas.</p>
2763 </td>
2764 </tr>
2765 <tr>
2766 <td class="propertyname">-fx-border-image-insets</td>
2767 <td class="value"><a href="#typesize" class="typelink"><size></a>
2768 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2769 class="typelink"><size></a>
2770 <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2771 class="typelink"><size></a>
2772 [ , [ <a href="#typesize" class="typelink"><size></a> | <a href="#typesize"
2773 class="typelink"><size></a>
2774 <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2775 class="typelink"><size></a>
2776 <a href="#typesize" class="typelink"><size></a>] ]*</td>
2777 <td class="default">0 0 0 0</td>
2778 <td>
2779 <p>A series of inset or sets of four inset values, separated by
2780 commas. For each item in the series, a single inset value means
2781 that all insets are the same; and if a set of four inset values is
2782 specified, they are used for the top, right, bottom, and left
2783 edges of the region, in that order. Each item in the series of
2784 insets applies to the corresponding image in the series of border
2785 images.</p>
2786 </td>
2787 </tr>
2788 <tr>
2789 <td class="propertyname">-fx-border-image-repeat</td>
2790 <td class="value"><repeat-style> [ , <repeat-style> ]*<br>
2791 <strong>where</strong> <repeat-style> = repeat-x | repeat-y |
2792 [repeat | space | round | no-repeat]{1,2}</td>
2793 <td class="default">repeat repeat</td>
2794 <td>
2795 <p>A series of repeat-style values, separated by commas. Each item
2796 in the series applies to the corresponding image in the series of
2797 border images.</p>
2798 </td>
2799 </tr>
2800 <tr>
2801 <td class="propertyname">-fx-border-image-slice</td>
2802 <td class="value">
2803 <p>[<a href="#typesize" class="typelink"><size></a> | <a href="#typesize"
2804 class="typelink"><size></a>
2805 <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2806 class="typelink"><size></a>
2807 <a href="#typesize" class="typelink"><size></a> ] fill? [ ,
2808 [ <a href="#typesize" class="typelink"><size></a> | <a href="#typesize"
2809 class="typelink"><size></a>
2810 <a
2811 href="#typesize"
2812 class="typelink"><size></a>
2813 <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2814 class="typelink"><size></a>
2815 <a href="#typesize" class="typelink"><size></a> ] fill? ]*</p>
2816 </td>
2817 <td class="default">100%</td>
2818 <td>
2819 <p>A series of image slice values or sets of four values, separated
2820 by commas. Each item in the series applies to the corresponding
2821 image in the series of border images. For each item in the series,
2822 if four values are given, they specify the size of the top, right,
2823 bottom, and left slices. This effectively divides the image into
2824 nine regions: an upper left corner, a top edge, an upper right
2825 corner, a right edge, a lower right corner, a bottom edge, a lower
2826 left corner, a left edge and a middle. If one value is specified,
2827 this value is used for the slice values for all four edges. If
2828 'fill' is present, the middle slice is preserved, otherwise it is
2829 discarded. Percentage values may be used here, in which case the
2830 values are considered proportional to the source image.</p>
2831 </td>
2832 </tr>
2833 <tr>
2834 <td class="propertyname">-fx-border-image-width</td>
2835 <td class="value"><a href="#typesize" class="typelink"><size></a>
2836 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2837 class="typelink"><size></a>
2838 <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2839 class="typelink"><size></a>
2840 [ , [ <a href="#typesize" class="typelink"><size></a> | <a href="#typesize"
2841 class="typelink"><size></a>
2842 <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2843 class="typelink"><size></a>
2844 <a href="#typesize" class="typelink"><size></a>] ]*</td>
2845 <td class="default">1 1 1 1</td>
2846 <td>
2847 <p>A series of width or sets of four width values, separated by
2848 commas. For each item in the series, a single width value means
2849 that all border widths are the same; and if a set of four width
2850 values is specified, they are used for the top, right, bottom, and
2851 left border widths, in that order. If the border is not
2852 rectangular, only the first width value is used. Each item in the
2853 series of widths applies to the corresponding item in the series
2854 of border images. Percentage values may be used here, in which
2855 case the values are considered proportional to the border image
2856 area.</p>
2857 </td>
2858 </tr>
2859 <tr>
2860 <td colspan="4" class="propertyname"><span style="font-style:italic;">OTHER</span></td>
2861 </tr>
2862 <tr>
2863 <td class="propertyname">-fx-padding</td>
2864 <td class="value"><a href="#typesize" class="typelink"><size></a>
2865 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2866 class="typelink"><size></a>
2867 <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
2868 class="typelink"><size></a>
2869 </td>
2870 <td class="default">0 0 0 0</td>
2871 <td>
2872 <p>A sets of four padding values, separated by commas. For each item
2873 in the series, a single padding value means that all padding are
2874 the same; and if a set of four padding values is specified, they
2875 are used for the top, right, bottom, and left edges of the region,
2876 in that order.</p>
2877 </td>
2878 </tr>
2879 <tr>
2880 <td class="propertyname">-fx-position-shape</td>
2881 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
2882 <td class="default">true</td>
2883 <td>If <strong>true</strong> means the shape centered within the
2884 region's width and height, otherwise the shape is positioned at its
2885 source position. Has no effect if a shape string is not specified.</td>
2886 </tr>
2887 <tr>
2888 <td class="propertyname">-fx-scale-shape</td>
2889 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
2890 <td class="default">true</td>
2891 <td>If <strong>true</strong> means the shape is scaled to fit the
2892 size of the region, otherwise the shape is at its source size, and
2893 its position depends on the value of the position-shape property.
2894 Has no effect if a shape string is not specified.</td>
2895 </tr>
2896 <tr>
2897 <td class="propertyname">-fx-shape</td>
2898 <td class="value">"<a href="#typestring" class="typelink"><string></a>"</td>
2899 <td class="default">null</td>
2900 <td>An SVG path string. By specifying a shape here the region takes on
2901 that shape instead of a rectangle or rounded rectangle. The syntax
2902 of this path string is specified in <a href="#references">[3]</a>.</td>
2903 </tr>
2904 <tr>
2905 <td class="propertyname">-fx-snap-to-pixel</td>
2906 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
2907 <td class="default">true</td>
2908 <td>Defines whether this region rounds position/spacing and ceils size
2909 values to pixel boundaries when laying out its children.</td>
2910 </tr>
2911 <tr>
2912 <td class="propertyname">-fx-region-background</td>
2913 <td class="value"> </td>
2914 <td class="default">null</td>
2915 <td>This property is set by specifying -fx-background-color and/or -fx-background-image.
2916 Optionally, the properties -fx-background-insets, -fx-background-radius,
2917 -fx-background-position, -fx-background-repeat, and -fx-background-size may also be set.
2918 In order to set the Region background to null,
2919 specify the style "-fx-background-color: null; -fx-background-image: null;". There is no
2920 shorthand notation for -fx-region-background at this time.</td>
2921 </tr>
2922 <tr>
2923 <td class="propertyname">-fx-region-border</td>
2924 <td class="value"> </td>
2925 <td class="default">null</td>
2926 <td>This property is set by specifying -fx-border-color and/or -fx-border-image.
2927 Optionally -fx-border-insets, -fx-border-radius, -fx-border-style,
2928 -fx-border-width, -fx-border-image-insets, -fx-border-image-repeat,
2929 -fx-border-image-slice and -fx-border-image-width may be specified.
2930 In order to set the Region background to null,
2931 specify the style "-fx-border-color: null; -fx-border-image: null;". There is no
2932 shorthand notation for -fx-region-border at this time.</td>
2933 </tr>
2934 <tr>
2935 <td class="propertyname">-fx-min-height, -fx-pref-height, -fx-max-height</td>
2936 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
2937 <td class="default">-1</td>
2938 <td>Percentage values are not useful since the actual value would be
2939 computed from the width and/or height of the Regions's parent before
2940 the parent is laid out.</td>
2941 </tr>
2942 <tr>
2943 <td class="propertyname">-fx-min-width, -fx-pref-width, -fx-max-width</td>
2944 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
2945 <td class="default">-1</td>
2946 <td>Percentage values are not useful since the actual value would be
2947 computed from the width and/or height of the Region's parent before
2948 the parent is laid out.</td>
2949 </tr>
2950 <tr>
2951 <td colspan="4" class="parents">Also has all properties of <a href="#parent">Parent</a><br>
2952 </td>
2953 </tr>
2954 </tbody>
2955 </table>
2956 <br>
2957 <h4><a name="stackpane" id="stackpane">StackPane</a></h4>
2958 <p class="styleclass">Style class: empty by default</p>
2959 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
2960 <thead>
2961 <tr>
2962 <th class="propertyname">CSS Property</th>
2963 <th class="value">Values</th>
2964 <th>Default</th>
2965 <th>Comments</th>
2966 </tr>
2967 </thead>
2968 <tbody>
2969 <tr>
2970 <td class="propertyname">-fx-alignment</td>
2971 <td class="value">[ top-left | top-center | top-right | center-left |
2972 center | center-right bottom-left | bottom-center | bottom-right |
2973 baseline-left | baseline-center | baseline-right ]</td>
2974 <td class="default">top-left</td>
2975 <td> </td>
2976 </tr>
2977 <tr>
2978 <td colspan="4" class="parents">Also has all properties of <a href="#pane">Pane</a></td>
2979 </tr>
2980 </tbody>
2981 </table>
2982 <h4><a name="tilepane" id="tilepane">TilePane</a></h4>
2983 <p class="styleclass">Style class: empty by default</p>
2984 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
2985 <thead>
2986 <tr>
2987 <th class="propertyname">CSS Property</th>
2988 <th class="value">Values</th>
2989 <th class="default">Default</th>
2990 <th>Comments</th>
2991 </tr>
2992 </thead>
2993 <tbody>
2994 <tr>
2995 <td class="propertyname">-fx-orientation</td>
2996 <td class="value">[ horizontal | vertical ]</td>
2997 <td class="default">horizontal</td>
2998 <td> </td>
2999 </tr>
3000 <tr>
3001 <td class="propertyname">-fx-pref-rows</td>
3002 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td>
3003 <td class="default">5</td>
3004 <td> </td>
3005 </tr>
3006 <tr>
3007 <td class="propertyname">-fx-pref-columns</td>
3008 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td>
3009 <td class="default">5</td>
3010 <td> </td>
3011 </tr>
3012 <tr>
3013 <td class="propertyname">-fx-pref-tile-width</td>
3014 <td class="value"><a href="#typenumber" class="typelink"><size></a></td>
3015 <td class="default">-1</td>
3016 <td> </td>
3017 </tr>
3018 <tr>
3019 <td class="propertyname">-fx-pref-tile-height</td>
3020 <td class="value"><a href="#typenumber" class="typelink"><size></a></td>
3021 <td class="default">-1</td>
3022 <td> </td>
3023 </tr>
3024 <tr>
3025 <td class="propertyname">-fx-hgap</td>
3026 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
3027 <td class="default">0</td>
3028 <td> </td>
3029 </tr>
3030 <tr>
3031 <td class="propertyname">-fx-vgap</td>
3032 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
3033 <td class="default">0</td>
3034 <td> </td>
3035 </tr>
3036 <tr>
3037 <td class="propertyname">-fx-alignment</td>
3038 <td class="value">[ top-left | top-center | top-right | center-left |
3039 center | center-right bottom-left | bottom-center | bottom-right |
3040 baseline-left | baseline-center | baseline-right ]</td>
3041 <td class="default">top-left</td>
3042 <td> </td>
3043 </tr>
3044 <tr>
3045 <td class="propertyname">-fx-tile-alignment</td>
3046 <td class="value">[ top-left | top-center | top-right | center-left |
3047 center | center-right bottom-left | bottom-center | bottom-right |
3048 baseline-left | baseline-center | baseline-right ]</td>
3049 <td class="default">center</td>
3050 <td> </td>
3051 </tr>
3052 <tr>
3053 <td colspan="4" class="parents">Also has all properties of <a href="#pane">Pane</a></td>
3054 </tr>
3055 </tbody>
3056 </table>
3057 <h4><a name="vbox" id="vbox">VBox</a></h4>
3058 <p class="styleclass">Style class: empty by default</p>
3059 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3060 <thead>
3061 <tr>
3062 <th class="propertyname">CSS Property</th>
3063 <th class="value">Values</th>
3064 <th>Default</th>
3065 <th>Comments</th>
3066 </tr>
3067 </thead>
3068 <tbody>
3069 <tr>
3070 <td class="propertyname">-fx-spacing</td>
3071 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
3072 <td>0</td>
3073 <td> </td>
3074 </tr>
3075 <tr>
3076 <td class="propertyname">-fx-alignment</td>
3077 <td class="value">[ top-left | top-center | top-right | center-left |
3078 center | center-right bottom-left | bottom-center | bottom-right |
3079 baseline-left | baseline-center | baseline-right ]</td>
3080 <td class="default">top-left</td>
3081 <td> </td>
3082 </tr>
3083 <tr>
3084 <td class="propertyname">-fx-fill-width</td>
3085 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
3086 <td class="default">true</td>
3087 <td> </td>
3088 </tr>
3089 <tr>
3090 <td colspan="4" class="parents">Also has all properties of <a href="#pane">Pane</a></td>
3091 </tr>
3092 </tbody>
3093 </table>
3094
3095 <table summary="property table" class="package" width="100%">
3096 <tbody>
3097 <tr>
3098 <td>javafx.scene.media</td>
3099 </tr>
3100 </tbody>
3101 </table>
3102 <h4><a name="mediaview" id="mediaview">MediaView</a></h4>
3103 <p class="styleclass">Style class: media-view</p>
3104
3105 <table summary="property table" class="package" width="100%">
3106 <tbody>
3107 <tr>
3108 <td>javafx.scene.shape</td>
3109 </tr>
3110 </tbody>
3111 </table>
3112 <h4><a name="shape" id="shape">Shape</a></h4>
3113 <p class="styleclass">Style class: empty by default</p>
3114 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3115 <thead>
3116 <tr>
3117 <th class="propertyname">CSS Property</th>
3118 <th class="value">Values</th>
3119 <th>Default</th>
3120 <th>Comments</th>
3121 </tr>
3122 </thead>
3123 <tbody>
3124 <tr>
3125 <td class="propertyname">-fx-fill</td>
3126 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td>
3127 <td>BLACK</td>
3128 <td> </td>
3129 </tr>
3130 <tr>
3131 <td class="propertyname">-fx-smooth</td>
3132 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
3133 <td>true</td>
3134 <td> </td>
3135 </tr>
3136 <tr>
3137 <td class="propertyname">-fx-stroke</td>
3138 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td>
3139 <td>null</td>
3140 <td> </td>
3141 </tr>
3142 <tr>
3143 <td class="propertyname">-fx-stroke-type</td>
3144 <td class="value">[ inside | outside | centered ]</td>
3145 <td>centered</td>
3146 <td> </td>
3147 </tr>
3148 <tr>
3149 <td class="propertyname">-fx-stroke-dash-array</td>
3150 <td class="value"><a href="#typesize" class="typelink"><size></a>[
3151 <a href="#typesize" class="typelink"><size></a>]+</td>
3152 <td>see comment</td>
3153 <td>The initial value is that of an empty array, effectively a solid line.
3154 </tr>
3155 <tr>
3156 <td class="propertyname">-fx-stroke-dash-offset</td>
3157 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
3158 <td>0</td>
3159 <td> </td>
3160 </tr>
3161 <tr>
3162 <td class="propertyname">-fx-stroke-line-cap</td>
3163 <td class="value">[ square | butt | round ] </td>
3164 <td>square</td>
3165 <td> </td>
3166 </tr>
3167 <tr>
3168 <td class="propertyname">-fx-stroke-line-join</td>
3169 <td class="value">[ miter | bevel | round ] </td>
3170 <td>miter</td>
3171 <td> </td>
3172 </tr>
3173 <tr>
3174 <td class="propertyname">-fx-stroke-miter-limit</td>
3175 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
3176 <td>10</td>
3177 <td> </td>
3178 </tr>
3179 <tr>
3180 <td class="propertyname">-fx-stroke-width</td>
3181 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
3182 <td>1</td>
3183 <td> </td>
3184 </tr>
3185 <tr>
3186 <td colspan="4" class="parents">Also has all properties of <a href="#node">Node</a></td>
3187 </tr>
3188 </tbody>
3189 </table>
3190 <h4><a name="arc" id="arc">Arc</a></h4>
3191 <p class="styleclass">Style class: empty by default</p>
3192 <p>The Arc node has all the properties of <a href="#shape">Shape</a> and <a
3193 href="#node">Node</a>.</p>
3194 <h4><a name="circle" id="circle">Circle</a></h4>
3195 <p class="styleclass">Style class: empty by default</p>
3196 <p>The Circle node has all the properties of <a href="#shape">Shape</a> and
3197 <a href="#node">Node</a>.</p>
3198 <h4><a name="cubiccurve" id="cubiccurve">CubicCurve</a></h4>
3199 <p class="styleclass">Style class: empty by default</p>
3200 <p>The CubicCurve node has all the properties of <a href="#shape">Shape</a>
3201 and <a href="#node">Node</a>.</p>
3202 <h4><a name="ellipse" id="ellipse">Ellipse</a></h4>
3203 <p class="styleclass">Style class: empty by default</p>
3204 <p>The Ellipse node has all the properties of <a href="#shape">Shape</a>
3205 and <a href="#node">Node</a>.</p>
3206 <h4><a name="line" id="line">Line</a></h4>
3207 <p class="styleclass">Style class: empty by default</p>
3208 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3209 <thead>
3210 <tr>
3211 <th class="propertyname">CSS Property</th>
3212 <th class="value">Values</th>
3213 <th>Default</th>
3214 <th>Comments</th>
3215 </tr>
3216 </thead>
3217 <tbody>
3218 <tr>
3219 <td class="propertyname">-fx-fill</td>
3220 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td>
3221 <td>null</td>
3222 <td></td>
3223 </tr>
3224 <tr>
3225 <td class="propertyname">-fx-stroke</td>
3226 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td>
3227 <td>black</td>
3228 <td></td>
3229 </tr>
3230 <tr>
3231 <td colspan="4" class="parents">Also has all properties of <a href="#node">Shape</a></td>
3232 </tr>
3233 </tbody>
3234 </table>
3235 <h4><a name="path" id="path">Path</a></h4>
3236 <p class="styleclass">Style class: empty by default</p>
3237 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3238 <thead>
3239 <tr>
3240 <th class="propertyname">CSS Property</th>
3241 <th class="value">Values</th>
3242 <th>Default</th>
3243 <th>Comments</th>
3244 </tr>
3245 </thead>
3246 <tbody>
3247 <tr>
3248 <td class="propertyname">-fx-fill</td>
3249 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td>
3250 <td>null</td>
3251 <td></td>
3252 </tr>
3253 <tr>
3254 <td class="propertyname">-fx-stroke</td>
3255 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td>
3256 <td>black</td>
3257 <td></td>
3258 </tr>
3259 <tr>
3260 <td colspan="4" class="parents">Also has all properties of <a href="#node">Shape</a></td>
3261 </tr>
3262 </tbody>
3263 </table>
3264 <h4><a name="polygon" id="polygon">Polygon</a></h4>
3265 <p class="styleclass">Style class: empty by default</p>
3266 <p>The Polygon node has all the properties of <a href="#shape">Shape</a>
3267 and <a href="#node">Node</a>.</p>
3268 <h4><a name="quadcurve" id="quadcurve">QuadCurve</a></h4>
3269 <p class="styleclass">Style class: empty by default</p>
3270 <p>The QuadCurve node has all the properties of <a href="#shape">Shape</a>
3271 and <a href="#node">Node</a>.</p>
3272 <h4><a name="rectangle" id="rectangle">Rectangle</a></h4>
3273 <p class="styleclass">Style class: empty by default</p>
3274 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3275 <thead>
3276 <tr>
3277 <th class="propertyname">CSS Property</th>
3278 <th class="value">Values</th>
3279 <th>Default</th>
3280 <th>Comments</th>
3281 </tr>
3282 </thead>
3283 <tbody>
3284 <tr>
3285 <td class="propertyname">-fx-arc-height</td>
3286 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
3287 <td>0</td>
3288 <td> </td>
3289 </tr>
3290 <tr>
3291 <td class="propertyname">-fx-arc-width</td>
3292 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
3293 <td>0</td>
3294 <td> </td>
3295 </tr>
3296 <tr>
3297 <td colspan="4" class="parents">Also has all properties of <a href="#shape">Shape</a></td>
3298 </tr>
3299 </tbody>
3300 </table>
3301 <h4><a name="svgpath" id="svgpath">SVGPath</a></h4>
3302 <p class="styleclass">Style class: empty by default</p>
3303 <p>The SVGPath node has all the properties of <a href="#shape">Shape</a>
3304 and <a href="#node">Node</a>.</p>
3305 <table summary="property table" class="package" width="100%">
3306 <tbody>
3307 <tr>
3308 <td>javafx.scene.text</td>
3309 </tr>
3310 </tbody>
3311 </table>
3312 <h4><a name="text" id="text">Text</a></h4>
3313 <p class="styleclass">Style class: empty by default</p>
3314 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3315 <thead>
3316 <tr>
3317 <th class="propertyname">CSS Property</th>
3318 <th class="value">Values</th>
3319 <th>Default</th>
3320 <th>Comments</th>
3321 </tr>
3322 </thead>
3323 <tbody>
3324 <tr>
3325 <td class="propertyname">-fx-font</td>
3326 <td class="value"><a href="#typefont" class="typelink"><font></a></td>
3327 <td>Font.DEFAULT</td>
3328 <td>inherits</td>
3329 </tr>
3330 <tr>
3331 <td class="propertyname">-fx-font-smoothing-type</td>
3332 <td class="value">[ gray | lcd ] </td>
3333 <td>gray</td>
3334 <td> </td>
3335 </tr>
3336 <tr>
3337 <td class="propertyname">-fx-strikethrough</td>
3338 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
3339 <td>false</td>
3340 <td> </td>
3341 </tr>
3342 <tr>
3343 <td class="propertyname">-fx-text-alignment</td>
3344 <td class="value">[ left | center | right | justify ] </td>
3345 <td>left</td>
3346 <td>inherits</td>
3347 </tr>
3348 <tr>
3349 <td class="propertyname">-fx-text-origin</td>
3350 <td class="value">[ baseline | top | bottom ] </td>
3351 <td>baseline</td>
3352 <td> </td>
3353 </tr>
3354 <tr>
3355 <td class="propertyname">-fx-underline</td>
3356 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
3357 <td>false</td>
3358 <td> </td>
3359 </tr>
3360 <tr>
3361 <td colspan="4" class="parents">Also has <a href="#fontprops">font
3362 properties</a> and all properties of Shape</td>
3363 </tr>
3364 </tbody>
3365 </table>
3366 <table summary="property table" class="package" width="100%">
3367 <tbody>
3368 <tr>
3369 <td>javafx.scene.web</td>
3370 </tr>
3371 </tbody>
3372 </table>
3373 <h4><a name="webview" id="webview">WebView</a></h4>
3374 <p class="styleclass">Style class: web-view</p>
3375 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3376 <thead>
3377 <tr>
3378 <th class="propertyname">CSS Property</th>
3379 <th class="value">Values</th>
3380 <th>Default</th>
3381 <th>Comments</th>
3382 </tr>
3383 </thead>
3384 <tbody>
3385 <tr>
3386 <td class="propertyname">-fx-context-menu-enabled</td>
3387 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
3388 <td>true</td>
3389 <td> </td>
3390 </tr>
3391 <tr>
3392 <td class="propertyname">-fx-font-smoothing-type</td>
3393 <td class="value">[ gray | lcd ] </td>
3394 <td>lcd</td>
3395 <td> </td>
3396 </tr>
3397 <tr>
3398 <td class="propertyname">-fx-font-scale</td>
3399 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
3400 <td>1</td>
3401 <td> </td>
3402 </tr>
3403 <tr>
3404 <td class="propertyname">-fx-min-width</td>
3405 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
3406 <td>0</td>
3407 <td> </td>
3408 </tr>
3409 <tr>
3410 <td class="propertyname">-fx-min-height</td>
3411 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
3412 <td>0</td>
3413 <td> </td>
3414 </tr>
3415 <tr>
3416 <td class="propertyname">-fx-pref-width</td>
3417 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
3418 <td>800</td>
3419 <td> </td>
3420 </tr>
3421 <tr>
3422 <td class="propertyname">-fx-pref-height</td>
3423 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
3424 <td>600</td>
3425 <td> </td>
3426 </tr>
3427 <tr>
3428 <td class="propertyname">-fx-max-width</td>
3429 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
3430 <td>Double.MAX_VALUE</td>
3431 <td> </td>
3432 </tr>
3433 <tr>
3434 <td class="propertyname">-fx-max-height</td>
3435 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
3436 <td>Double.MAX_VALUE</td>
3437 <td> </td>
3438 </tr>
3439 <tr>
3440 <td colspan="4" class="parents">Also has all properties of <a href="#parent">Parent</a></td>
3441 </tr>
3442 </tbody>
3443 </table>
3444 <!-- Controls -->
3445 <table summary="property table" class="package" width="100%">
3446 <tbody>
3447 <tr>
3448 <td><a name="controls">javafx.scene.control</a></td>
3449 </tr>
3450 </tbody>
3451 </table>
3452 <p>Since JavaFX 2.0, the default skins for all controls support styling from
3453 CSS. This is accomplished by building the skins from layout objects called
3454 Regions. Most of the style properties for a control are provided by the
3455 Region objects that comprise the control's skin. Each Region object of the
3456 skin's substructure has its own style‑class so that it can be styled
3457 specifically. The control itself will sometimes provide CSS properties in
3458 addition to those provided by its Regions. Finally, controls may also
3459 define pseudo‑classes such as "vertical" and "horizontal" in addition to
3460 those defined by Node.</p>
3461 <p>With the following exceptions, controls are focus traversable. This means that <a href="#control">Control</a> sets the initial value
3462 of the focusTraversable property true; whereas in <a href="#node">Node</a>, the initial value of the focusTraversable property
3463 is false. The following controls are not focus traversable by default: Accordion, Cell, Label, MenuBar,
3464 ProgressBar, ProgressIndicator, ScrollBar, ScrollPane, Separator, SplitPane, ToolBar.</p>
3465 <h4><a name="accordion" id="accordion">Accordion</a></h4>
3466 <p class="styleclass">Style class: accordion</p>
3467 <p>The Accordion control has all the properties and pseudo‑classes of <a href="#control">Control</a></p>
3468 <h4>Substructure</h4>
3469 <ul>
3470 <li>first-titled-pane — the first TitledPane </li>
3471 </ul>
3472 <h4><a name="button" id="button">Button</a></h4>
3473 <p class="styleclass">Style class: button</p>
3474 <p>The Button control has all the properties of <a href="#buttonbase">ButtonBase</a></p>
3475 <h4>Pseudo-classes</h4>
3476 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3477 <thead>
3478 <tr>
3479 <th class="propertyname">CSS Pseudo-class</th>
3480 <th>Comments</th>
3481 </tr>
3482 </thead>
3483 <tbody>
3484 <tr>
3485 <td class="propertyname">cancel</td>
3486 <td>applies if this Button receives VK_ESC if the event is not
3487 otherwise consumed</td>
3488 </tr>
3489 <tr>
3490 <td class="propertyname">default</td>
3491 <td>applies if this Button receives VK_ENTER if the event is not
3492 otherwise consumed</td>
3493 </tr>
3494 <tr>
3495 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#buttonbase">ButtonBase</a></td>
3496 </tr>
3497 </tbody>
3498 </table>
3499 <h4><a name="buttonbase" id="buttonbase">ButtonBase</a></h4>
3500 <p>The ButtonBase control has all the properties of <a href="#labeled">Labeled</a></p>
3501 <h4>Pseudo-classes</h4>
3502 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3503 <thead>
3504 <tr>
3505 <th class="propertyname">CSS Pseudo-class</th>
3506 <th>Comments</th>
3507 </tr>
3508 </thead>
3509 <tbody>
3510 <tr>
3511 <td class="propertyname">armed</td>
3512 <td>applies when the <strong>armed</strong> variable is true</td>
3513 </tr>
3514 <tr>
3515 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#labeled">Labeled</a></td>
3516 </tr>
3517 </tbody>
3518 </table>
3519 <h4><a name="cell" id="cell">Cell</a></h4>
3520 <p class="styleclass">Style class: cell</p>
3521 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3522 <thead>
3523 <tr>
3524 <th class="propertyname">CSS Property</th>
3525 <th class="value">Values</th>
3526 <th>Default</th>
3527 <th>Comments</th>
3528 </tr>
3529 </thead>
3530 <tbody>
3531 <tr>
3532 <td class="propertyname">-fx-cell-size</td>
3533 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
3534 <td>24</td>
3535 <td>The cell size. For vertical ListView or a TreeView or TableView
3536 this is the height, for a horizontal ListView this is the width.</td>
3537 </tr>
3538 <tr>
3539 <td colspan="4" class="parents">The Cell control has all the
3540 properties of <a href="#labeled">Labeled</a></td>
3541 </tr>
3542 </tbody>
3543 </table>
3544 <h4>Pseudo-classes</h4>
3545 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3546 <thead>
3547 <tr>
3548 <th class="propertyname">CSS Pseudo-class</th>
3549 <th>Comments</th>
3550 </tr>
3551 </thead>
3552 <tbody>
3553 <tr>
3554 <td class="propertyname">empty</td>
3555 <td>applies when the <strong>empty </strong>variable is true</td>
3556 </tr>
3557 <tr>
3558 <td class="propertyname">filled</td>
3559 <td>applies when the <strong>empty</strong> variable is false</td>
3560 </tr>
3561 <tr>
3562 <td class="propertyname">selected</td>
3563 <td>applies when the <strong>selected</strong> variable is true</td>
3564 </tr>
3565 <tr>
3566 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#labeled">Labeled</a></td>
3567 </tr>
3568 </tbody>
3569 </table>
3570 <h4>Substructure</h4>
3571 <ul>
3572 <li>text — a Labeled</li>
3573 </ul>
3574 <h4><a name="checkbox" id="checkbox">CheckBox</a></h4>
3575 <p class="styleclass">Style class: check-box</p>
3576 <p>The CheckBox control has all the properties of <a href="#buttonbase">ButtonBase</a></p>
3577 <h4>Pseudo-classes</h4>
3578 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3579 <thead>
3580 <tr>
3581 <th class="propertyname">CSS Pseudo-class</th>
3582 <th>Comments</th>
3583 </tr>
3584 </thead>
3585 <tbody>
3586 <tr>
3587 <td class="propertyname">selected</td>
3588 <td>applies when the <strong>selected</strong> variable is true</td>
3589 </tr>
3590 <tr>
3591 <td class="propertyname">determinate</td>
3592 <td>applies when the <strong>indeterminate </strong>variable is
3593 false</td>
3594 </tr>
3595 <tr>
3596 <td class="propertyname">indeterminate</td>
3597 <td>applies when the <strong>indeterminate </strong>variable is true</td>
3598 </tr>
3599 <tr>
3600 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#buttonbase">ButtonBase</a></td>
3601 </tr>
3602 </tbody>
3603 </table>
3604 <h4>Substructure</h4>
3605 <ul>
3606 <li>box — a StackPane
3607 <ul>
3608 <li>mark — a StackPane</li>
3609 </ul>
3610 </li>
3611 </ul>
3612 <h4><a name="checkmenuitem" id="checkmenuitem">CheckMenuItem</a></h4>
3613 <h4>Pseudo-classes</h4>
3614 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3615 <thead>
3616 <tr>
3617 <th class="propertyname">CSS Pseudo-class</th>
3618 <th>Comments</th>
3619 </tr>
3620 </thead>
3621 <tbody>
3622 <tr>
3623 <td class="propertyname">selected</td>
3624 <td>applies if this item is selected</td>
3625 </tr>
3626 </tbody>
3627 </table>
3628 <h4><a name="choicebox" id="choicebox">ChoiceBox</a></h4>
3629 <p class="styleclass">Style class: choice-box</p>
3630 <p>The ChoiceBox control has all the properties and pseudo‑classes of <a href="#control">Control</a></p>
3631 <h4>Substructure</h4>
3632 <ul>
3633 <li>open-button — Region
3634 <ul>
3635 <li>arrow — Region </li>
3636 </ul>
3637 </li>
3638 </ul>
3639 <h4><a name="colorpicker" id="colorpicker">ColorPicker</a></h4>
3640 <p class="styleclass">Style class: color-picker</p>
3641 <p>The ColorPicker control has all the properties and pseudo‑classes of <a href="#comboboxbase">ComboBoxBase</a></p>
3642 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3643 <thead>
3644 <tr>
3645 <th class="propertyname">CSS Property</th>
3646 <th class="value">Values</th>
3647 <th>Default</th>
3648 <th>Comments</th>
3649 </tr>
3650 </thead>
3651 <tbody>
3652 <tr>
3653 <td class="propertyname">-fx-color-label-visible</td>
3654 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
3655 <td>true</td>
3656 <td> </td>
3657 </tr>
3658 <tr>
3659 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td>
3660 </tr>
3661 </tbody>
3662 </table>
3663 <h4>Substructure</h4>
3664 <ul>
3665 <li>color display node — Label</li>
3666 <li>arrow-button — StackPane
3667 <ul>
3668 <li>arrow — StackPane</li>
3669 </ul>
3670 </li>
3671 </ul>
3672 <h4><a name="combobox" id="combobox">ComboBox</a></h4>
3673 <p class="styleclass">Style class: combo-box</p>
3674 <p>The ComboBox control has all the properties and pseudo‑classes of <a href="#comboboxbase">ComboBoxBase</a></p>
3675 <h4>Substructure</h4>
3676 <ul>
3677 <li>list-cell — a ListCell instance used to show the selection in the
3678 button area of a non-editable ComboBox</li>
3679 <li>text-input — a TextField instance used to show the selection and
3680 allow input in the button area of an editable ComboBox</li>
3681 <li>combo-box-popup — a PopupControl that is displayed when the button is
3682 pressed
3683 <ul>
3684 <li>list-view — a ListView
3685 <ul>
3686 <li>list-cell — a ListCell</li>
3687 </ul>
3688 </li>
3689 </ul>
3690 </li>
3691 </ul>
3692 <h4><a name="comboboxbase" id="comboboxbase">ComboBoxBase</a></h4>
3693 <p class="styleclass">Style class: combo-box-base</p>
3694 <p>The ComboBoxBase control has all the properties of <a href="#control">Control</a></p>
3695 <h4>Substructure</h4>
3696 <ul>
3697 <li>arrow-button — a StackPane
3698 <ul>
3699 <li>arrow — a StackPane </li>
3700 </ul>
3701 </li>
3702 </ul>
3703 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3704 <thead>
3705 <tr>
3706 <th class="propertyname">CSS Pseudo-class</th>
3707 <th>Comments</th>
3708 </tr>
3709 </thead>
3710 <tbody>
3711 <tr>
3712 <td class="propertyname">editable</td>
3713 <td>applies when the <strong>editable </strong>variable is true</td>
3714 </tr>
3715 <tr>
3716 <td class="propertyname">showing</td>
3717 <td>applies when the <strong>showing </strong>variable is true</td>
3718 </tr>
3719 <tr>
3720 <td class="propertyname">armed</td>
3721 <td>applies when the <strong>armed </strong>variable is true</td>
3722 </tr>
3723 </tbody>
3724 </table>
3725 <h4><a name="contextmenu" id="contextmenu">ContextMenu</a></h4>
3726 <p class="styleclass">Style class: context-menu</p>
3727 <p>The ContextMenu class has all the properties of <a href="#poupucontrol">PopupControl</a>.</p>
3728 The selector for a ContextMenu may be made more specific by using the selector for the control from which the ContextMenu was shown.
3729 For example,
3730 <p class="example">.choice-box > .context-menu { ... }</p>
3731 <h4>Substructure</h4>
3732 <ul>
3733 <li>context-menu — a Region
3734 <ul>
3735 <li>scroll-arrow — a StackPane
3736 <ul><li>menu-up-arrow — a StackPane</li></ul>
3737 </li>
3738 <li>scroll-arrow — a StackPane
3739 <ul><li>menu-down-arrow — a StackPane</li></ul>
3740 </li>
3741 <li>* — a VBox
3742 <ul>
3743 <li>menu-item — a Region
3744 <ul>
3745 <li>label — a Label</li>
3746 <li>left-container — a StackPane (for radio buttons and check boxes)</li>
3747 <li>right-container — a StackPane (for pull-right menus)
3748 <ul>
3749 <li>arrow — a Region</li>
3750 </ul>
3751 </li>
3752 <li>graphic-container — a StackPane (for MenuItem graphic)</li>
3753 </ul>
3754 </li>
3755 </ul>
3756 </li>
3757 </ul>
3758 </li>
3759 </ul>
3760 <h4><a name="control" id="control">Control</a></h4>
3761 <p>The Control class has all the properties of <a href="#region">Region</a></p>
3762 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3763 <thead>
3764 <tr>
3765 <th class="propertyname">CSS Property</th>
3766 <th class="value">Values</th>
3767 <th>Default</th>
3768 <th>Comments</th>
3769 </tr>
3770 </thead>
3771 <tbody>
3772 <tr>
3773 <td class="propertyname">-fx-skin</td>
3774 <td class="value"><a href="#typestring" class="typelink"><string></a></td>
3775 <td>null</td>
3776 <td>The class name of the Control's Skin.</td>
3777 </tr>
3778 <tr>
3779 <td class="propertyname">-fx-focus-traversable</td>
3780 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
3781 <td class="default">true</td>
3782 <td>Control sets the default value of the focusTraversable property to true. The default value
3783 of the focusTraversable property for the following controls is false: Accordion, Cell, Label, MenuBar,
3784 ProgressBar, ProgressIndicator, ScrollBar, ScrollPane, Separator, SplitPane, ToolBar.</td>
3785 </tr>
3786 </tbody>
3787 </table>
3788 <h4><a name="datepicker" id="datepicker">DatePicker</a></h4>
3789 <p class="styleclass">Style class: date-picker</p>
3790 <p>The DatePicker control has all the properties and pseudo‑classes of <a href="#comboboxbase">ComboBoxBase</a></p>
3791 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3792 <thead>
3793 <tr>
3794 <th class="propertyname">CSS Property</th>
3795 <th class="value">Values</th>
3796 <th>Default</th>
3797 <th>Comments</th>
3798 </tr>
3799 </thead>
3800 <tbody>
3801 <tr>
3802 <td class="propertyname">-fx-show-week-numbers</td>
3803 <td class="value"><a href="#typeboolean" class="typeboolean"><boolean></a></td>
3804 <td>true if the resource bundle property "DatePicker.showWeekNumbers" contains the country code.</td>
3805 <td> </td>
3806 </tr>
3807 <tr>
3808 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td>
3809 </tr>
3810 </tbody>
3811 </table>
3812 <h4>Substructure</h4>
3813 <ul>
3814 <li>date-picker-display-node — TextField</li>
3815 </ul>
3816
3817 <h4><a name="htmleditor" id="htmleditor">HTMLEditor</a></h4>
3818 <p class="styleclass">Style class: html-editor</p>
3819 <p>The Hyperlink control has all the properties of <a href="#control">Control</a>.</p>
3820 <h4>Substructure</h4>
3821 <ul>
3822 <li>grid — GridPane (contains WebView)
3823 <ul>
3824 <li>top-toolbar — ToolBar
3825 <ul>
3826 <li>html-editor-cut — <a href="#togglebutton">ToggleButton</a></li>
3827 <li>html-editor-copy — <a href="#togglebutton">ToggleButton</a></li>
3828 <li>html-editor-paste — <a href="#togglebutton">ToggleButton</a></li>
3829 <li>html-editor-align-left — <a href="#togglebutton">ToggleButton</a></li>
3830 <li>html-editor-align-right — <a href="#togglebutton">ToggleButton</a></li>
3831 <li>html-editor-align-center — <a href="#togglebutton">ToggleButton</a></li>
3832 <li>html-editor-align-justify — <a href="#togglebutton">ToggleButton</a></li>
3833 <li>html-editor-outdent — <a href="#togglebutton">ToggleButton</a></li>
3834 <li>html-editor-indent — <a href="#togglebutton">ToggleButton</a></li>
3835 <li>html-editor-bullets — <a href="#togglebutton">ToggleButton</a></li>
3836 <li>html-editor-numbers — <a href="#togglebutton">ToggleButton</a></li>
3837 </ul>
3838 </li>
3839 <li>web-view — <a href="#webview">WebView</a></li>
3840 <li>bottom-toolbar — ToolBar
3841 <ul>
3842 <li>format-menu-button — ComboBox</li>
3843 <li>font-family-menu-button — <a href="#combobox">ComboBox</a></li>
3844 <li>font-size-menu-button — <a href="#combobox">ComboBox</a></li>
3845 <li>html-editor-bold — <a href="#togglebutton">ToggleButton</a></li>
3846 <li>html-editor-italic — <a href="#togglebutton">ToggleButton</a></li>
3847 <li>html-editor-underline — <a href="#togglebutton">ToggleButton</a></li>
3848 <li>html-editor-strike — <a href="#togglebutton">ToggleButton</a></li>
3849 <li>html-editor-hr — <a href="#togglebutton">ToggleButton</a></li>
3850 <li>html-editor-foreground — <a href="#colorpicker">ColorPicker</a></li>
3851 <li>html-editor-background — <a href="#colorpicker">ColorPicker</a></li>
3852
3853 </ul>
3854 </li>
3855 </ul>
3856 </li>
3857 </ul>
3858 <h4><a name="hyperlink" id="hyperlink">Hyperlink</a></h4>
3859 <p class="styleclass">Style class: hyperlink</p>
3860 <p>The Hyperlink control has all the properties of <a href="#buttonbase">ButtonBase</a>.</p>
3861 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3862 <thead>
3863 <tr>
3864 <th class="propertyname">CSS Property</th>
3865 <th class="value">Values</th>
3866 <th>Default</th>
3867 <th>Comments</th>
3868 </tr>
3869 </thead>
3870 <tbody>
3871 <tr>
3872 <td class="propertyname">-fx-cursor</td>
3873 <td class="value">[ null | crosshair | default | hand | move |
3874 e-resize | h-resize | ne-resize | nw-resize | n-resize | se-resize |
3875 sw-resize | s-resize | w-resize | v-resize | text | wait ] | <a href="#typeurl"
3876 class="typelink"><url></a></td>
3877 <td class="default">hand</td>
3878 <td>inherits </td>
3879 </tr>
3880 </tbody>
3881 </table>
3882 <h4>Pseudo-classes</h4>
3883 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3884 <thead>
3885 <tr>
3886 <th class="propertyname">CSS Pseudo-class</th>
3887 <th>Comments</th>
3888 </tr>
3889 </thead>
3890 <tbody>
3891 <tr>
3892 <td class="propertyname">visited</td>
3893 <td>applies when the <strong>visited </strong>variable is true</td>
3894 </tr>
3895 <tr>
3896 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#buttonbase">ButtonBase</a></td>
3897 </tr>
3898 </tbody>
3899 </table>
3900 <h4>Substructure</h4>
3901 <ul>
3902 <li>label — Label</li>
3903 </ul>
3904 <h4><a name="indexedcell" id="indexedcell">IndexedCell</a></h4>
3905 <p class="styleclass">Style class: indexed-cell</p>
3906 <p>The IndexedCell control has all the properties of <a href="#cell">Cell</a>.</p>
3907 <h4>Pseudo-classes</h4>
3908 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3909 <thead>
3910 <tr>
3911 <th class="propertyname">CSS Pseudo-class</th>
3912 <th>Comments</th>
3913 </tr>
3914 </thead>
3915 <tbody>
3916 <tr>
3917 <td class="propertyname">even</td>
3918 <td>applies if this cell's index is even</td>
3919 </tr>
3920 <tr>
3921 <td class="propertyname">odd</td>
3922 <td>applies if this cell's index is odd</td>
3923 </tr>
3924 <tr>
3925 <td colspan="4" class="parents">Also has all pseudo‑classes of <a href="#cell">Cell</a></td>
3926 </tr>
3927 </tbody>
3928 </table>
3929 <h4><a name="label" id="label">Label</a></h4>
3930 <p class="styleclass">Style class: label</p>
3931 <p>Label has all the properties and pseudo‑class state of <a href="#labeled">Labeled</a></p>
3932 <h4><a name="labeled" id="labeled">Labeled</a></h4>
3933 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
3934 <thead>
3935 <tr>
3936 <th class="propertyname">CSS Property</th>
3937 <th class="value">Values</th>
3938 <th>Default</th>
3939 <th>Comments</th>
3940 </tr>
3941 </thead>
3942 <tbody>
3943 <tr>
3944 <td class="propertyname">-fx-alignment</td>
3945 <td class="value">[ top-left | top-center | top-right | center-left |
3946 center | center-right bottom-left | bottom-center | bottom-right |
3947 baseline-left | baseline-center | baseline-right ]</td>
3948 <td class="default">center-left</td>
3949 <td> </td>
3950 </tr>
3951 <tr>
3952 <td class="propertyname">-fx-text-alignment</td>
3953 <td class="value">[ left | center | right | justify ]</td>
3954 <td>left</td>
3955 <td>text-align from CSS spec maps to textAlignment in JavaFX</td>
3956 </tr>
3957 <tr>
3958 <td class="propertyname">-fx-text-overrun</td>
3959 <td class="value">[ center-ellipsis | center-word-ellipsis | clip |
3960 ellipsis | leading-ellipsis | leading-word-ellipsis | word-ellipsis
3961 ]</td>
3962 <td>ellipsis</td>
3963 <td> </td>
3964 </tr>
3965 <tr>
3966 <td class="propertyname">-fx-wrap-text</td>
3967 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
3968 <td>false</td>
3969 <td> </td>
3970 </tr>
3971 <tr>
3972 <td class="propertyname">-fx-font</td>
3973 <td class="value"><a href="#typefont" class="typelink"><font></a></td>
3974 <td>platform dependent</td>
3975 <td>inherits<br>The initial value is that of Font.getDefault()</td>
3976 </tr>
3977 <tr>
3978 <td class="propertyname">-fx-underline</td>
3979 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
3980 <td>false</td>
3981 <td> </td>
3982 </tr>
3983 <tr>
3984 <td class="propertyname">-fx-graphic</td>
3985 <td class="value"><a href="#typeurl" class="typelink"><uri></a></td>
3986 <td>null</td>
3987 <td> </td>
3988 </tr>
3989 <tr>
3990 <td class="propertyname">-fx-content-display</td>
3991 <td class="value">[ top | right | bottom | left | center | right |
3992 graphic-only | text-only ]</td>
3993 <td>left</td>
3994 <td> </td>
3995 </tr>
3996 <tr>
3997 <td class="propertyname">-fx-graphic-text-gap</td>
3998 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
3999 <td>4</td>
4000 <td> </td>
4001 </tr>
4002 <tr>
4003 <td class="propertyname">-fx-label-padding</td>
4004 <td class="value"><a href="#typesize" class="typelink"><size></a>
4005 | <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
4006 class="typelink"><size></a>
4007 <a href="#typesize" class="typelink"><size></a> <a href="#typesize"
4008 class="typelink"><size></a></td>
4009 <td>[0,0,0,0]</td>
4010 <td> </td>
4011 </tr>
4012 <tr>
4013 <td class="propertyname">-fx-text-fill</td>
4014 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td>
4015 <td>black</td>
4016 <td> </td>
4017 </tr>
4018 <tr>
4019 <td class="propertyname">-fx-ellipsis-string</td>
4020 <td class="value"><a href="#typestring" class="typelink"><string></a></td>
4021 <td>...</td>
4022 <td> </td>
4023 </tr>
4024 <tr>
4025 <td colspan="4" class="parents">Also has properties of <a href="#control">Control</a></td>
4026 </tr>
4027 </tbody>
4028 </table>
4029 <h4><a name="listcell" id="listcell">ListCell</a></h4>
4030 <p class="styleclass">Style class: list-cell</p>
4031 <p>The ListCell control has all the settable properties and pseudo‑classes
4032 of <a href="#indexedcell">IndexedCell</a>.</p>
4033 <h4><a name="listview" id="listview">ListView</a></h4>
4034 <p class="styleclass">Style class: list-view</p>
4035 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4036 <thead>
4037 <tr>
4038 <th class="propertyname">CSS Property</th>
4039 <th class="value">Values</th>
4040 <th>Default</th>
4041 <th>Comments</th>
4042 </tr>
4043 </thead>
4044 <tbody>
4045 <tr>
4046 <td class="propertyname">-fx-orientation</td>
4047 <td class="value">[ horizontal | vertical ]</td>
4048 <td class="default">vertical</td>
4049 <td> </td>
4050 </tr>
4051 </tbody>
4052 </table>
4053 <h4>Pseudo-classes</h4>
4054 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4055 <thead>
4056 <tr>
4057 <th class="propertyname">CSS Pseudo-class</th>
4058 <th>Comments</th>
4059 </tr>
4060 </thead>
4061 <tbody>
4062 <tr>
4063 <td class="propertyname">horizontal</td>
4064 <td>applies if this ListView is horizontal</td>
4065 </tr>
4066 <tr>
4067 <td class="propertyname">vertical</td>
4068 <td>applies if this ListView is vertical</td>
4069 </tr>
4070 </tbody>
4071 </table>
4072 <h4>Substructure</h4>
4073 <ul>.list-view — the ListView<T>
4074 <ul>.virtual-flow — VirtualFlow
4075 <ul>.clipped-container — <a href="#region">Region</a>
4076 <ul>.sheet — Group
4077 <ul>.cell.indexed-cell.list-cell — <a href="#listcell">ListCell<T></a></ul>
4078 .scroll-bar — <a href="#scrollbar">ScrollBar</a>
4079 </ul>
4080 </ul>
4081 </ul>
4082 </ul>
4083
4084 <h4><a name="menu" id="menu">Menu</a></h4>
4085 <p class="styleclass">Style class: menu</p>
4086 <h4>Pseudo-classes</h4>
4087 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4088 <thead>
4089 <tr>
4090 <th class="propertyname">CSS Pseudo-class</th>
4091 <th>Comments</th>
4092 </tr>
4093 </thead>
4094 <tbody>
4095 <tr>
4096 <td class="propertyname">showing</td>
4097 <td>applies if this Menu is showing</td>
4098 </tr>
4099 <tr>
4100 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td>
4101 </tr>
4102 </tbody>
4103 </table>
4104 <h4><a name="menubar" id="menubar">MenuBar</a></h4>
4105 <p class="styleclass">Style class: menu-bar</p>
4106 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4107 <thead>
4108 <tr>
4109 <th class="propertyname">CSS Property</th>
4110 <th class="value">Values</th>
4111 <th>Default</th>
4112 <th>Comments</th>
4113 </tr>
4114 </thead>
4115 <tbody>
4116 <tr>
4117 <td class="propertyname">-fx-use-system-menu-bar</td>
4118 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td>
4119 <td>false</td>
4120 <td> </td>
4121 </tr>
4122 <tr>
4123 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td>
4124 </tr>
4125 </tbody>
4126 </table>
4127 <p>MenuBar has all the pseudo‑class states of <a href="#control">Control</a></p>
4128 <h4>Substructure</h4>
4129 <ul>
4130 <li>menu</li>
4131 </ul>
4132 <h4><a name="menubutton" id="menubutton">MenuButton</a></h4>
4133 <p class="styleclass">Style class: menu-button</p>
4134 <p>The MenuButton control has all the properties of <a href="#buttonbase">ButtonBase</a></p>
4135 <h4>Pseudo-classes</h4>
4136 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4137 <thead>
4138 <tr>
4139 <th class="propertyname">CSS Pseudo-class</th>
4140 <th>Comments</th>
4141 </tr>
4142 </thead>
4143 <tbody>
4144 <tr>
4145 <td class="propertyname">openvertically</td>
4146 <td>applies if the <strong>openVertically</strong> variable is true</td>
4147 </tr>
4148 <tr>
4149 <td class="propertyname">showing</td>
4150 <td>applies if the <strong>showing</strong> variable is true</td>
4151 </tr>
4152 <tr>
4153 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#node">Node</a></td>
4154 </tr>
4155 </tbody>
4156 </table>
4157 <h4><a name="menuitem" id="menuitem">MenuItem</a></h4>
4158 <p class="styleclass">Style class: menu-item</p>
4159 <h4><a name="pagination" id="pagination">Pagination</a></h4>
4160 <p class="styleclass">Style class: pagination</p>
4161 <p>Pagination has all the pseudo‑class states of <a href="#control">Control</a></p>
4162 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4163 <thead>
4164 <tr>
4165 <th class="propertyname">CSS Property</th>
4166 <th class="value">Values</th>
4167 <th>Default</th>
4168 <th>Comments</th>
4169 </tr>
4170 </thead>
4171 <tbody>
4172 <tr>
4173 <td class="propertyname">-fx-max-page-indicator-count</td>
4174 <td class="value"><a href="#typesize" class="typelink"><number></a></td>
4175 <td>10</td>
4176 <td> </td>
4177 </tr>
4178 <tr>
4179 <td class="propertyname">-fx-arrows-visible</td>
4180 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td>
4181 <td>true</td>
4182 <td> </td>
4183 </tr>
4184 <tr>
4185 <td class="propertyname">-fx-tooltip-visible</td>
4186 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td>
4187 <td>false</td>
4188 <td>When set to true, a tooltip which shows the page number is set on the page indicators.
4189 This property controls whether or not the tooltip is visible on the page indicators and <em>does
4190 not</em> affect the visibility of the tooltip set or installed on the Pagination control itself.</td>
4191 </tr>
4192 <tr>
4193 <td class="propertyname">-fx-page-information-visible</td>
4194 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td>
4195 <td>true</td>
4196 <td> </td>
4197 </tr>
4198 <tr>
4199 <td class="propertyname">-fx-page-information-alignment</td>
4200 <td class="value">[ top | bottom | left | right ]</td>
4201 <td>bottom</td>
4202 <td> </td>
4203 </tr>
4204 <tr>
4205 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td>
4206 </tr>
4207 </tbody>
4208 </table>
4209 <h4>Substructure</h4>
4210 <ul>
4211 <li>page — StackPane</li>
4212 <li>pagination-control — StackPane
4213 <ul>
4214 <li>leftArrowButton — Button
4215 <ul>
4216 <li>leftArrow — StackPane</li>
4217 </ul>
4218 </li>
4219 <li>rightArrowButton — Button
4220 <ul>
4221 <li>rightArrow — StackPane</li>
4222 </ul>
4223 </li>
4224 <li>bullet-button — ToggleButton</li>
4225 <li>number-button — ToogleButton</li>
4226 <li>page-information — Label</li>
4227 </ul>
4228 </li>
4229 </ul>
4230 <h4><a name="passwordfield" id="passwordfield">PasswordField</a></h4>
4231 <p class="styleclass">Style class: password-field</p>
4232 <p>The PasswordField control has all the properties of <a href="#textfield">TextField</a></p>
4233 <h4><a name="popupcontrol" id="popupcontrol">PopupControl</a></h4>
4234 <p>PopupControl is also a <a href="#popupwindow">PopupWindow</a> and as such, its root node has the
4235 style-class .root.popup</p>
4236 <h4><a name="progressbar" id="progressbar">ProgressBar</a></h4>
4237 <p class="styleclass">Style class: progress-bar</p>
4238 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4239 <thead>
4240 <tr>
4241 <th class="propertyname">CSS Property</th>
4242 <th class="value">Values</th>
4243 <th>Default</th>
4244 <th>Comments</th>
4245 </tr>
4246 </thead>
4247 <tbody>
4248 <tr>
4249 <td class="propertyname">-fx-indeterminate-bar-length</td>
4250 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
4251 <td>60</td>
4252 <td> </td>
4253 </tr>
4254 <tr>
4255 <td class="propertyname">-fx-indeterminate-bar-escape</td>
4256 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td>
4257 <td>true</td>
4258 <td> </td>
4259 </tr>
4260 <tr>
4261 <td class="propertyname">-fx-indeterminate-bar-flip</td>
4262 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td>
4263 <td>true</td>
4264 <td> </td>
4265 </tr>
4266 <tr>
4267 <td class="propertyname">-fx-indeterminate-bar-animation-time</td>
4268 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
4269 <td>2.0</td>
4270 <td> </td>
4271 </tr>
4272 <tr>
4273 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td>
4274 </tr>
4275 </tbody>
4276 </table>
4277 <h4>Pseudo-classes</h4>
4278 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4279 <thead>
4280 <tr>
4281 <th class="propertyname">CSS Pseudo-class</th>
4282 <th>Comments</th>
4283 </tr>
4284 </thead>
4285 <tbody>
4286 <tr>
4287 <td class="propertyname">determinate</td>
4288 <td>applies if the <strong>indeterminate</strong> variable is false</td>
4289 </tr>
4290 <tr>
4291 <td class="propertyname">indetermindate</td>
4292 <td>applies if the <strong>indeterminate</strong> variable is true</td>
4293 </tr>
4294 <tr>
4295 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td>
4296 </tr>
4297 </tbody>
4298 </table>
4299 <h4>Substructure</h4>
4300 <ul>
4301 <li>track — StackPane
4302 <ul>
4303 <li>bar — Region</li>
4304 </ul>
4305 </li>
4306 </ul>
4307 <h4><a name="progressindicator" id="progressindicator">ProgressIndicator</a></h4>
4308 <p class="styleclass">Style class: progress-indicator</p>
4309 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4310 <thead>
4311 <tr>
4312 <th class="propertyname">CSS Property</th>
4313 <th class="value">Values</th>
4314 <th>Default</th>
4315 <th>Comments</th>
4316 </tr>
4317 </thead>
4318 <tbody>
4319 <tr>
4320 <td class="propertyname">-fx-indeterminate-segment-count</td>
4321 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
4322 <td>8</td>
4323 <td> </td>
4324 </tr>
4325 <tr>
4326 <td class="propertyname">-fx-progress-color</td>
4327 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td>
4328 <td>null</td>
4329 <td> </td>
4330 </tr>
4331 <tr>
4332 <td class="propertyname">-fx-spin-enabled</td>
4333 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
4334 <td>false</td>
4335 <td> </td>
4336 </tr>
4337 <tr>
4338 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td>
4339 </tr>
4340 </tbody>
4341 </table>
4342 <h4>Pseudo-classes</h4>
4343 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4344 <thead>
4345 <tr>
4346 <th class="propertyname">CSS Pseudo-class</th>
4347 <th>Comments</th>
4348 </tr>
4349 </thead>
4350 <tbody>
4351 <tr>
4352 <td class="propertyname">determinate</td>
4353 <td>applies if the <strong>indeterminate</strong> variable is false</td>
4354 </tr>
4355 <tr>
4356 <td class="propertyname">indetermindate</td>
4357 <td>applies if the <strong>indeterminate</strong> variable is true</td>
4358 </tr>
4359 <tr>
4360 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td>
4361 </tr>
4362 </tbody>
4363 </table>
4364 <h4>Substructure</h4>
4365 <ul>
4366 <li>indicator — StackPane</li>
4367 <li>progress — StackPane</li>
4368 <li>percentage — Text</li>
4369 <li>tick — StackPane</li>
4370 </ul>
4371 <h4><a name="radiobutton" id="radiobutton">RadioButton</a></h4>
4372 <p class="styleclass">Style class: radio-button</p>
4373 <p>The RadioButton control has all the properties of <a href="#togglebutton">ToggleButton</a></p>
4374 <h4>Substructure</h4>
4375 <ul>
4376 <li>radio — Region
4377 <ul>
4378 <li>dot — Region</li>
4379 </ul>
4380 </li>
4381 <li>label — Label</li>
4382 </ul>
4383 <h4><a name="radiomenuitem" id="radiomenuitem">RadioMenuItem</a></h4>
4384 <h4>Pseudo-classes</h4>
4385 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4386 <thead>
4387 <tr>
4388 <th class="propertyname">CSS Pseudo-class</th>
4389 <th>Comments</th>
4390 </tr>
4391 </thead>
4392 <tbody>
4393 <tr>
4394 <td class="propertyname">selected</td>
4395 <td>applies if this item is selected</td>
4396 </tr>
4397 </tbody>
4398 </table>
4399 <h4><a name="scrollbar" id="scrollbar">ScrollBar</a></h4>
4400 <p class="styleclass">Style class: scroll-bar</p>
4401 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4402 <thead>
4403 <tr>
4404 <th class="propertyname">CSS Property</th>
4405 <th class="value">Values</th>
4406 <th>Default</th>
4407 <th>Comments</th>
4408 </tr>
4409 </thead>
4410 <tbody>
4411 <tr>
4412 <td class="propertyname">-fx-orientation</td>
4413 <td class="value">[ horizontal | vertical ]</td>
4414 <td class="default">horizontal</td>
4415 <td> </td>
4416 </tr>
4417 <tr>
4418 <td class="propertyname">-fx-block-increment</td>
4419 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
4420 <td>10</td>
4421 <td> </td>
4422 </tr>
4423 <tr>
4424 <td class="propertyname">-fx-unit-increment</td>
4425 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
4426 <td>1</td>
4427 <td> </td>
4428 </tr>
4429 </tbody>
4430 </table>
4431 <h4>Pseudo-classes</h4>
4432 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4433 <thead>
4434 <tr>
4435 <th class="propertyname">CSS Pseudo-class</th>
4436 <th>Comments</th>
4437 </tr>
4438 </thead>
4439 <tbody>
4440 <tr>
4441 <td class="propertyname">vertical</td>
4442 <td>applies if this ScrollBar is vertical</td>
4443 </tr>
4444 <tr>
4445 <td class="propertyname">horizontal</td>
4446 <td>applies if this ScrollBar is horizontal</td>
4447 </tr>
4448 <tr>
4449 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td>
4450 </tr>
4451 </tbody>
4452 </table>
4453 <h4>Substructure</h4>
4454 <ul>
4455 <li>decrement-button — StackPane
4456 <ul>
4457 <li>decrement-arrow — StackPane </li>
4458 </ul>
4459 </li>
4460 <li>track — StackPane</li>
4461 <li>thumb — StackPane</li>
4462 <li>increment-button — StackPane
4463 <ul>
4464 <li>increment-arrow — StackPane</li>
4465 </ul>
4466 </li>
4467 </ul>
4468 <h4><a name="scrollpane" id="scrollpane">ScrollPane</a></h4>
4469 <p class="styleclass">Style class: scroll-pane</p>
4470 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4471 <thead>
4472 <tr>
4473 <th class="propertyname">CSS Property</th>
4474 <th class="value">Values</th>
4475 <th>Default</th>
4476 <th>Comments</th>
4477 </tr>
4478 </thead>
4479 <tbody>
4480 <tr>
4481 <td class="propertyname">-fx-fit-to-width</td>
4482 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td>
4483 <td>false</td>
4484 <td> </td>
4485 </tr>
4486 <tr>
4487 <td class="propertyname">-fx-fit-to-height</td>
4488 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td>
4489 <td>false</td>
4490 <td> </td>
4491 </tr>
4492 <tr>
4493 <td class="propertyname">-fx-pannable</td>
4494 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td>
4495 <td>false</td>
4496 <td> </td>
4497 </tr>
4498 <tr>
4499 <td class="propertyname">-fx-hbar-policy</td>
4500 <td class="value">[ never | always | as-needed ]</td>
4501 <td>as-needed</td>
4502 <td> </td>
4503 </tr>
4504 <tr>
4505 <td class="propertyname">-fx-vbar-policy</td>
4506 <td class="value">[ never | always | as-needed ]</td>
4507 <td>as-needed</td>
4508 <td> </td>
4509 </tr>
4510 <tr>
4511 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td>
4512 </tr>
4513 </tbody>
4514 </table>
4515 <h4>Pseudo-classes</h4>
4516 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4517 <thead>
4518 <tr>
4519 <th class="propertyname">CSS Pseudo-class</th>
4520 <th>Comments</th>
4521 </tr>
4522 </thead>
4523 <tbody>
4524 <tr>
4525 <td class="propertyname">pannable</td>
4526 <td>applies if this ScrollPane is pannable</td>
4527 </tr>
4528 <tr>
4529 <td class="propertyname">fitToWidth</td>
4530 <td>applies if this ScrollPane is fitToWidth</td>
4531 </tr>
4532 <tr>
4533 <td class="propertyname">fitToHeight</td>
4534 <td>applies if this ScrollPane is fitToHeight</td>
4535 </tr>
4536 <tr>
4537 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td>
4538 </tr>
4539 </tbody>
4540 </table>
4541 <h4>Substructure</h4>
4542 <ul>
4543 <li>viewport — StackPane
4544 <ul>
4545 <li> * — StackPane</li>
4546 <ul><li>The ScrollPane's content</li></ul>
4547 </ul>
4548 </li>
4549 <li>scroll-bar:vertical — ScrollBar</li>
4550 <li>scroll-bar:horizontall — ScrollBar</li>
4551 <li>corner — StackPane</li>
4552 </ul>
4553 <h4><a name="separator" id="separator">Separator</a></h4>
4554 <p class="styleclass">Style class: separator</p>
4555 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4556 <thead>
4557 <tr>
4558 <th class="propertyname">CSS Property</th>
4559 <th class="value">Values</th>
4560 <th>Default</th>
4561 <th>Comments</th>
4562 </tr>
4563 <tr>
4564 <td class="propertyname">-fx-orientation</td>
4565 <td class="value">[ horizontal | vertical ]</td>
4566 <td class="default">horizontal</td>
4567 <td> </td>
4568 </tr>
4569 <tr>
4570 <td class="propertyname">-fx-halignment</td>
4571 <td class="value">[ left | center | right ]</td>
4572 <td>center</td>
4573 <td> </td>
4574 </tr>
4575 <tr>
4576 <td class="propertyname">-fx-valignment</td>
4577 <td class="value">[ top | center | baseline | bottom ]</td>
4578 <td>center</td>
4579 <td> </td>
4580 </tr>
4581 </thead>
4582 <tbody>
4583 <tr>
4584 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td>
4585 </tr>
4586 </tbody>
4587 </table>
4588 <h4>Pseudo-classes</h4>
4589 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4590 <thead>
4591 <tr>
4592 <th class="propertyname">CSS Pseudo-class</th>
4593 <th>Comments</th>
4594 </tr>
4595 </thead>
4596 <tbody>
4597 <tr>
4598 <td class="propertyname">horizontal</td>
4599 <td>applies if this Separator is horizontal</td>
4600 </tr>
4601 <tr>
4602 <td class="propertyname">vertical</td>
4603 <td>applies if this Separator is vertical</td>
4604 </tr>
4605 <tr>
4606 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td>
4607 </tr>
4608 </tbody>
4609 </table>
4610 <h4>Substructure</h4>
4611 <ul>
4612 <li>line — Region</li>
4613 </ul>
4614 <h4><a name="spinner" id="spinner">Spinner</a></h4>
4615 <p class="styleclass">Style class: spinner</p>
4616 <p>Note that the default style class, "spinner", puts arrows on right, stacked vertically. The following
4617 style classes can also be used in combination with the default style class in order to control the
4618 layout of the Spinner.
4619 <table>
4620 <thead>
4621 <tr>
4622 <th class="styleclass">style class</th>
4623 <th>Comment</th>
4624 </tr>
4625 </thead>
4626 <tbody>
4627 <tr>
4628 <td class="value">arrows-on-right-horizontal</td>
4629 <td>The arrows are placed on the right of the Spinner, pointing horizontally (i.e. left and right)</td>
4630 </tr>
4631 <tr>
4632 <td class="value">arrows-on-left-vertical</td>
4633 <td>The arrows are placed on the left of the Spinner, pointing vertically (i.e. up and down)</td>
4634 </tr>
4635 <tr>
4636 <td class="value">arrows-on-left-horizontal</td>
4637 <td>The arrows are placed on the left of the Spinner, pointing horizontally (i.e. left and right)</td>
4638 </tr>
4639 <tr>
4640 <td class="value">split-arrows-vertical</td>
4641 <td>The arrows are placed above and beneath the spinner, stretching to take the entire width</td>
4642 </tr>
4643 <tr>
4644 <td class="value">split-arrows-horizontal</td>
4645 <td>The decrement arrow is placed on the left of the Spinner, and the increment on the right</td>
4646 </tr>
4647 </tbody>
4648 </table>
4649
4650 </p>
4651 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4652 <thead>
4653 <tr>
4654 <th class="propertyname">CSS Property</th>
4655 <th class="value">Values</th>
4656 <th>Default</th>
4657 <th>Comments</th>
4658 </tr>
4659 </thead>
4660 <tbody>
4661 <tr>
4662 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td>
4663 </tr>
4664 </tbody>
4665 </table>
4666 <h4>Pseudo-classes</h4>
4667 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4668 <thead>
4669 <tr>
4670 <th class="propertyname">CSS Pseudo-class</th>
4671 <th>Comments</th>
4672 </tr>
4673 </thead>
4674 <tbody>
4675 <tr>
4676 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td>
4677 </tr>
4678 </tbody>
4679 </table>
4680 <h4>Substructure</h4>
4681 <ul>
4682 <li>text-field — TextField</li>
4683 <li>increment-arrow-button — StackPane
4684 <ul>
4685 <li>increment-arrow — Region</li>
4686 </ul>
4687 </li>
4688 <li>decrement-arrow-button — StackPane
4689 <ul>
4690 <li>decrement-arrow — Region</li>
4691 </ul>
4692 </li>
4693 </ul>
4694 <h4><a name="slider" id="slider">Slider</a></h4>
4695 <p class="styleclass">Style class: slider</p>
4696 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4697 <thead>
4698 <tr>
4699 <th class="propertyname">CSS Property</th>
4700 <th class="value">Values</th>
4701 <th>Default</th>
4702 <th>Comments</th>
4703 </tr>
4704 </thead>
4705 <tbody>
4706 <tr>
4707 <td class="propertyname">-fx-orientation</td>
4708 <td class="value">[ horizontal | vertical ]</td>
4709 <td class="default">horizontal</td>
4710 <td> </td>
4711 </tr>
4712 <tr>
4713 <td class="propertyname">-fx-show-tick-labels</td>
4714 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td>
4715 <td>false</td>
4716 <td> </td>
4717 </tr>
4718 <tr>
4719 <td class="propertyname">-fx-show-tick-marks</td>
4720 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td>
4721 <td>false</td>
4722 <td> </td>
4723 </tr>
4724 <tr>
4725 <td class="propertyname">-fx-major-tick-unit</td>
4726 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
4727 <td>25</td>
4728 <td> </td>
4729 </tr>
4730 <tr>
4731 <td class="propertyname">-fx-minor-tick-count</td>
4732 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td>
4733 <td>3</td>
4734 <td> </td>
4735 </tr>
4736 <tr>
4737 <td class="propertyname">-fx-show-tick-labels</td>
4738 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td>
4739 <td>false</td>
4740 <td> </td>
4741 </tr>
4742 <tr>
4743 <td class="propertyname">-fx-snap-to-ticks</td>
4744 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td>
4745 <td>false</td>
4746 <td> </td>
4747 </tr>
4748 <tr>
4749 <td class="propertyname">-fx-block-increment</td>
4750 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td>
4751 <td>10</td>
4752 <td> </td>
4753 </tr>
4754 <tr>
4755 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td>
4756 </tr>
4757 </tbody>
4758 </table>
4759 <h4>Pseudo-classes</h4>
4760 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4761 <thead>
4762 <tr>
4763 <th class="propertyname">CSS Pseudo-class</th>
4764 <th>Comments</th>
4765 </tr>
4766 </thead>
4767 <tbody>
4768 <tr>
4769 <td class="propertyname">horizontal</td>
4770 <td>applies if this Slider is horizontal</td>
4771 </tr>
4772 <tr>
4773 <td class="propertyname">vertical</td>
4774 <td>applies if this Slider is vertical</td>
4775 </tr>
4776 <tr>
4777 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td>
4778 </tr>
4779 </tbody>
4780 </table>
4781 <h4>Substructure</h4>
4782 <ul>
4783 <li>axis — NumberAxis</li>
4784 <li>track — Region</li>
4785 <li>thumb — Region</li>
4786 </ul>
4787 <h4><a name="splitmenubutton" id="splitmenubutton">SplitMenuButton</a></h4>
4788 <p class="styleclass">Style class: split-menu-button</p>
4789 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4790 <thead>
4791 <tr>
4792 <th class="propertyname">CSS Property</th>
4793 <th class="value">Values</th>
4794 <th>Default</th>
4795 <th>Comments</th>
4796 </tr>
4797 </thead>
4798 <tbody>
4799 <tr>
4800 <td colspan="4" class="parents">Also has all properties of <a href="#menubutton">MenuButton</a></td>
4801 </tr>
4802 </tbody>
4803 </table>
4804 <h4><a name="splitpane" id="splitpane">SplitPane</a></h4>
4805 <p class="styleclass">Style class: split-pane</p>
4806 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4807 <thead>
4808 <tr>
4809 <th class="propertyname">CSS Property</th>
4810 <th class="value">Values</th>
4811 <th>Default</th>
4812 <th>Comments</th>
4813 </tr>
4814 </thead>
4815 <tbody>
4816 <tr>
4817 <td class="propertyname">-fx-orientation</td>
4818 <td class="value">[ horizontal | vertical ]</td>
4819 <td class="default">horizontal</td>
4820 <td> </td>
4821 </tr>
4822 <tr>
4823 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td>
4824 </tr>
4825 </tbody>
4826 </table>
4827 <h4>Pseudo-classes</h4>
4828 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4829 <thead>
4830 <tr>
4831 <th class="propertyname">CSS Pseudo-class</th>
4832 <th>Comments</th>
4833 </tr>
4834 </thead>
4835 <tbody>
4836 <tr>
4837 <td class="propertyname">horizontal</td>
4838 <td>applies if this Slider is horizontal</td>
4839 </tr>
4840 <tr>
4841 <td class="propertyname">vertical</td>
4842 <td>applies if this Slider is vertical</td>
4843 </tr>
4844 <tr>
4845 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td>
4846 </tr>
4847 </tbody>
4848 </table>
4849 <h4>Substructure</h4>
4850 <ul>
4851 <li>split-pane-divider — StackPane
4852 <ul>
4853 <li>vertical-grabber — StackPane</li>
4854 <li>horizontal-grabber — StackPane</li>
4855 </ul>
4856 </li>
4857 </ul>
4858 <h4><a name="tabpane" id="tabpane">TabPane</a></h4>
4859 <p class="styleclass">Style class: tab-pane</p>
4860 <p>Note: The styleclass is "tab-pane floating" if the TabPane is floating.</p>
4861 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4862 <thead>
4863 <tr>
4864 <th class="propertyname">CSS Property</th>
4865 <th class="value">Values</th>
4866 <th>Default</th>
4867 <th>Comments</th>
4868 </tr>
4869 </thead>
4870 <tbody>
4871 <tr>
4872 <td class="propertyname">-fx-tab-min-width</td>
4873 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td>
4874 <td>0</td>
4875 <td> </td>
4876 </tr>
4877 <tr>
4878 <td class="propertyname">-fx-tab-max-width</td>
4879 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td>
4880 <td>Double.MAX_VALUE</td>
4881 <td> </td>
4882 </tr>
4883 <tr>
4884 <td class="propertyname">-fx-tab-min-height</td>
4885 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td>
4886 <td>0</td>
4887 <td> </td>
4888 </tr>
4889 <tr>
4890 <td class="propertyname">-fx-tab-max-height</td>
4891 <td class="value"><a href="#typenumber" class="typelink"><integer></a></td>
4892 <td>Double.MAX_VALUE</td>
4893 <td> </td>
4894 </tr>
4895 <tr>
4896 <td class="propertyname">-fx-open-tab-animation</td>
4897 <td class="value">[ grow | none ]</td>
4898 <td>grow</td>
4899 <td>'none' disables Tab opening animation</td>
4900 </tr>
4901 <tr>
4902 <td class="propertyname">-fx-close-tab-animation</td>
4903 <td class="value">[ grow | none ]</td>
4904 <td>grow</td>
4905 <td>'none' disables Tab closing animation</td>
4906 </tr>
4907 <tr>
4908 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td>
4909 </tr>
4910 </tbody>
4911 </table>
4912 <h4>Pseudo-classes</h4>
4913 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4914 <thead>
4915 <tr>
4916 <th class="propertyname">CSS Pseudo-class</th>
4917 <th>Comments</th>
4918 </tr>
4919 </thead>
4920 <tbody>
4921 <tr>
4922 <td class="propertyname">top</td>
4923 <td>applies if the side is top</td>
4924 </tr>
4925 <tr>
4926 <td class="propertyname">right</td>
4927 <td>applies if the side is rght</td>
4928 </tr>
4929 <tr>
4930 <td class="propertyname">bottom</td>
4931 <td>applies if the side is bottom</td>
4932 </tr>
4933 <tr>
4934 <td class="propertyname">left</td>
4935 <td>applies if the side is left</td>
4936 </tr>
4937 <tr>
4938 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td>
4939 </tr>
4940 </tbody>
4941 </table>
4942 <h4>Substructure</h4>
4943 <ul>
4944 <li>tab-header-area — StackPane
4945 <ul>
4946 <li>headers-region — StackPane</li>
4947 <li>tab-header-background — StackPane</li>
4948 <li>control-buttons-tab — StackPane
4949 <ul>
4950 <li>tab-down-button — Pane
4951 <ul>
4952 <li>arrow — StackPane</li>
4953 </ul>
4954 </li>
4955 </ul>
4956 </li>
4957 <li>tab — Tab
4958 <ul>
4959 <li>tab-label — Label</li>
4960 <li>tab-close-button — StackPane</li>
4961 </ul>
4962 </li>
4963 </ul>
4964 </li>
4965 <li>tab-content-area — StackPane</li>
4966 </ul>
4967 <h4><a name="tablecolumnheader" id="tablecolumnheader">TableColumnHeader</a></h4>
4968 <p class="styleclass">Style class: column-header</p>
4969 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4970 <thead>
4971 <tr>
4972 <th class="propertyname">CSS Property</th>
4973 <th class="value">Values</th>
4974 <th>Default</th>
4975 <th>Comments</th>
4976 <tr>
4977 <td class="propertyname">-fx-size</td>
4978 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
4979 <td>20</td>
4980 <td>The table column header size.</td>
4981 </tr>
4982 </thead>
4983 <tbody>
4984 <tr>
4985 <td colspan="4" class="parents">Also has all properties of <a href="#region">Region</a></td>
4986 </tr>
4987 </tbody>
4988 </table>
4989 <h4>Pseudo-classes</h4>
4990 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
4991 <thead>
4992 <tr>
4993 <th class="propertyname">CSS Pseudo-class</th>
4994 <th>Comments</th>
4995 </tr>
4996 </thead>
4997 <tbody>
4998 <tr>
4999 <td class="propertyname">last-visible</td>
5000 <td>applies if this is the last visible column in the table.</td>
5001 </tr>
5002 <tr>
5003 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#node">Node</a></td>
5004 </tr>
5005 </tbody>
5006 </table>
5007 <h4>Substructure</h4>
5008 <ul>
5009 <li>column-resize-line — Region</li>
5010 <li>column-overlay — Region</li>
5011 <li>placeholder — StackPane</li>
5012 <li>column-header-background — StackPane
5013 <ul>
5014 <li>nested-column-header
5015 <ul>
5016 <li>column-header</li>
5017 </ul>
5018 </li>
5019 <li>filler — Region</li>
5020 <li>show-hide-columns-button — StackPane
5021 <ul>
5022 <li>show-hide-column-image — StackPane</li>
5023 </ul>
5024 </li>
5025 <li>column-drag-header — StackPane
5026 <ul>
5027 <li>label — Label</li>
5028 </ul>
5029 </li>
5030 </ul>
5031 </li>
5032 </ul>
5033 <h4><a name="tableview" id="tableview">TableView</a></h4>
5034 <p class="styleclass">Style class: table-view</p>
5035 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5036 <thead>
5037 <tr>
5038 <th class="propertyname">CSS Property</th>
5039 <th class="value">Values</th>
5040 <th>Default</th>
5041 <th>Comments</th>
5042 <tr>
5043 <td class="propertyname">-fx-fixed-cell-size</td>
5044 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
5045 <td>-1</td>
5046 <td>A value greater than zero sets the fixed cell size of the table.
5047 A value of zero or less disables fixed cell size.</td>
5048 </tr>
5049 </thead>
5050 <tbody>
5051 <tr>
5052 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td>
5053 </tr>
5054 </tbody>
5055 </table>
5056 <h4>Pseudo-classes</h4>
5057 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5058 <thead>
5059 <tr>
5060 <th class="propertyname">CSS Pseudo-class</th>
5061 <th>Comments</th>
5062 </tr>
5063 </thead>
5064 <tbody>
5065 <tr>
5066 <td class="propertyname">cell-selection</td>
5067 <td>applies if this TableView's selection model is cell selection</td>
5068 </tr>
5069 <tr>
5070 <td class="propertyname">row-selection</td>
5071 <td>applies if this TableView's selection model is row selection</td>
5072 </tr>
5073 <tr>
5074 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#node">Node</a></td>
5075 </tr>
5076 </tbody>
5077 </table>
5078 <h4>Substructure</h4>
5079 <ul>
5080 <li>column-resize-line — Region</li>
5081 <li>column-overlay — Region</li>
5082 <li>placeholder — StackPane</li>
5083 <li>column-header-background — StackPane
5084 <ul>
5085 <li>nested-column-header
5086 <ul>
5087 <li>column-header</li>
5088 </ul>
5089 </li>
5090 <li>filler — Region</li>
5091 <li>show-hide-columns-button — StackPane
5092 <ul>
5093 <li>show-hide-column-image — StackPane</li>
5094 </ul>
5095 </li>
5096 <li>column-drag-header — StackPane
5097 <ul>
5098 <li>label — Label</li>
5099 </ul>
5100 </li>
5101 </ul>
5102 </li>
5103 <li>table-column — TableColumn</li>
5104 </ul>
5105 <h4><a name="text-area" id="text-area">TextArea</a></h4>
5106 <p class="styleclass">Style class: text-area</p>
5107 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5108 <thead>
5109 <tr>
5110 <th class="propertyname">CSS Property</th>
5111 <th class="value">Values</th>
5112 <th>Default</th>
5113 <th>Comments</th>
5114 </tr>
5115 </thead>
5116 <tbody>
5117 <tr>
5118 <td class="propertyname">-fx-pref-column-count</td>
5119 <td class="value">number</td>
5120 <td class="default">40</td>
5121 <td> </td>
5122 </tr>
5123 <tr>
5124 <td class="propertyname">-fx-pref-row-count</td>
5125 <td class="value">number</td>
5126 <td class="default">10</td>
5127 <td> </td>
5128 </tr>
5129 <tr>
5130 <td class="propertyname">-fx-wrap-text</td>
5131 <td class="value">boolean</td>
5132 <td class="default">false</td>
5133 <td> </td>
5134 </tr>
5135 <tr>
5136 <td colspan="4" class="parents">Also has all properties of <a href="#textinputcontrol">TextInputControl</a></td>
5137 </tr>
5138 </tbody>
5139 </table>
5140 <h4>Substructure</h4>
5141 <ul>
5142 <li>scroll-pane — ScrollPane
5143 <ul>
5144 <li>content — Region</li>
5145 </ul>
5146 </li>
5147 </ul>
5148 <h4><a name="textinputcontrol" id="textinputcontrol">TextInputControl</a></h4>
5149 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5150 <thead>
5151 <tr>
5152 <th class="propertyname">CSS Property</th>
5153 <th class="value">Values</th>
5154 <th>Default</th>
5155 <th>Comments</th>
5156 </tr>
5157 </thead>
5158 <tbody>
5159 <tr>
5160 <td class="propertyname">-fx-font</td>
5161 <td class="value"><a href="#typefont" class="typelink"><font></a></td>
5162 <td>null</td>
5163 <td>inherits</td>
5164 </tr>
5165 <tr>
5166 <td class="propertyname">-fx-text-fill</td>
5167 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td>
5168 <td>black</td>
5169 <td> </td>
5170 </tr>
5171 <tr>
5172 <td class="propertyname">-fx-prompt-text-fill</td>
5173 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td>
5174 <td>gray</td>
5175 <td> </td>
5176 </tr>
5177 <tr>
5178 <td class="propertyname">-fx-highlight-fill</td>
5179 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td>
5180 <td>dodgerblue</td>
5181 <td> </td>
5182 </tr>
5183 <tr>
5184 <td class="propertyname">-fx-highlight-text-fill</td>
5185 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td>
5186 <td>white</td>
5187 <td> </td>
5188 </tr>
5189 <tr>
5190 <td class="propertyname">-fx-display-caret</td>
5191 <td class="value"><a href="#typesize" class="typelink"><boolean></a></td>
5192 <td>true</td>
5193 <td> </td>
5194 </tr>
5195 <tr>
5196 <td colspan="4" class="parents">Also has <a href="#fontprops">Font
5197 Properties</a> and all properties of <a href="#control">Control</a></td>
5198 </tr>
5199 </tbody>
5200 </table>
5201 <h4>Pseudo-classes</h4>
5202 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5203 <thead>
5204 <tr>
5205 <th class="propertyname">CSS Pseudo-class</th>
5206 <th>Comments</th>
5207 </tr>
5208 </thead>
5209 <tbody>
5210 <tr>
5211 <td class="propertyname">readonly</td>
5212 <td>applies if this TextInputControl is not editable</td>
5213 </tr>
5214 <tr>
5215 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td>
5216 </tr>
5217 </tbody>
5218 </table>
5219 <h4><a name="textfield" id="textfield">TextField</a></h4>
5220 <p class="styleclass">Style class: text-field</p>
5221 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5222 <thead>
5223 <tr>
5224 <th class="propertyname">CSS Property</th>
5225 <th class="value">Values</th>
5226 <th>Default</th>
5227 <th>Comments</th>
5228 </tr>
5229 </thead>
5230 <tbody>
5231 <tr>
5232 <td class="propertyname">-fx-alignment</td>
5233 <td class="value">[ top-left | top-center | top-right | center-left |
5234 center | center-right bottom-left | bottom-center | bottom-right |
5235 baseline-left | baseline-center | baseline-right ]</td>
5236 <td class="default">center-left</td>
5237 <td> </td>
5238 </tr>
5239 <tr>
5240 <td class="propertyname">-fx-pref-column-count</td>
5241 <td class="value">number</td>
5242 <td class="default">12</td>
5243 <td> </td>
5244 </tr>
5245 <tr>
5246 <td colspan="4" class="parents">Also has all properties of <a href="#textinputcontrol">TextInputControl</a></td>
5247 </tr>
5248 </tbody>
5249 </table>
5250 <p>TextField has all the pseudo‑class states of <a href="#textinputcontrol">TextInputControl</a></p>
5251 <h4><a name="titledpane" id="titledpane">TitledPane</a></h4>
5252 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5253 <thead>
5254 <tr>
5255 <th class="propertyname">CSS Property</th>
5256 <th class="value">Values</th>
5257 <th>Default</th>
5258 <th>Comments</th>
5259 </tr>
5260 </thead>
5261 <tbody>
5262 <tr>
5263 <td class="propertyname">-fx-animated</td>
5264 <td class="value"><a href="#typenumber" class="typelink"><boolean></a></td>
5265 <td>true</td>
5266 <td> </td>
5267 </tr>
5268 <tr>
5269 <td class="propertyname">-fx-collapsible</td>
5270 <td class="value"><a href="#typenumber" class="typelink"><boolean></a></td>
5271 <td>true</td>
5272 <td> </td>
5273 </tr>
5274 <tr>
5275 <td colspan="4" class="parents">Also has <a href="#fontprops">Font
5276 Properties</a> and all properties of <a href="#labeled">Labeled</a></td>
5277 </tr>
5278 </tbody>
5279 </table>
5280 <h4>Pseudo-classes</h4>
5281 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5282 <thead>
5283 <tr>
5284 <th class="propertyname">CSS Pseudo-class</th>
5285 <th>Comments</th>
5286 </tr>
5287 </thead>
5288 <tbody>
5289 <tr>
5290 <td class="propertyname">expanded</td>
5291 <td>applies if this TitledPane is expanded</td>
5292 </tr>
5293 <tr>
5294 <td class="propertyname">collapsed</td>
5295 <td>applies if this TitledPane is collapsed</td>
5296 </tr>
5297 <tr>
5298 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#labeled">Labeled</a></td>
5299 </tr>
5300 </tbody>
5301 </table>
5302 <h4>Substructure</h4>
5303 <ul>
5304 <li>title — HBox
5305 <ul>
5306 <li>text — Label/li> </li>
5307 <li>arrow-button — StackPane/li>
5308 <ul>
5309 <li>arrow — StackPane</li>
5310 </ul>
5311 </li>
5312 </ul>
5313 </li>
5314 <li>content — StackPane/li> </li>
5315 </ul>
5316 <h4><a name="togglebutton" id="togglebutton">ToggleButton</a></h4>
5317 <p class="styleclass">Style class: toggle-button</p>
5318 <p>The ToggleButton control has all the properties of <a href="#buttonbase">ButtonBase</a>.</p>
5319 <h4>Pseudo-classes</h4>
5320 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5321 <thead>
5322 <tr>
5323 <th class="propertyname">CSS Pseudo-class</th>
5324 <th>Comments</th>
5325 </tr>
5326 </thead>
5327 <tbody>
5328 <tr>
5329 <td class="propertyname">selected</td>
5330 <td>applies if this ToggleButton is selected</td>
5331 </tr>
5332 <tr>
5333 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#buttonbase">ButtonBase</a></td>
5334 </tr>
5335 </tbody>
5336 </table>
5337 <h4><a name="toolbar" id="toolbar">ToolBar</a></h4>
5338 <p class="styleclass">Style class: tool-bar</p>
5339 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5340 <thead>
5341 <tr>
5342 <th class="propertyname">CSS Property</th>
5343 <th class="value">Values</th>
5344 <th>Default</th>
5345 <th>Comments</th>
5346 </tr>
5347 </thead>
5348 <tbody>
5349 <tr>
5350 <td class="propertyname">-fx-orientation</td>
5351 <td class="value">[ horizontal | vertical ]</td>
5352 <td class="default">horizontal</td>
5353 <td> </td>
5354 </tr>
5355 <tr>
5356 <td colspan="4" class="parents">Also has all properties of <a href="#control">Control</a></td>
5357 </tr>
5358 </tbody>
5359 </table>
5360 <h4>Pseudo-classes</h4>
5361 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5362 <thead>
5363 <tr>
5364 <th class="propertyname">CSS Pseudo-class</th>
5365 <th>Comments</th>
5366 </tr>
5367 </thead>
5368 <tbody>
5369 <tr>
5370 <td class="propertyname">horizontal</td>
5371 <td>applies if this ToolBar is horizontal</td>
5372 </tr>
5373 <tr>
5374 <td class="propertyname">vertical</td>
5375 <td>applies if this ToolBar is vertical</td>
5376 </tr>
5377 <tr>
5378 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#control">Control</a></td>
5379 </tr>
5380 </tbody>
5381 </table>
5382 <h4>Substructure</h4>
5383 <ul>
5384 <li>tool-bar-overflow-button — StackPane
5385 <ul>
5386 <li>arrow — StackPane</li>
5387 </ul>
5388 </li>
5389 </ul>
5390 <h4><a name="tooltip" id="tooltip">Tooltip</a></h4>
5391 <p class="styleclass">Style class: tooltip</p>
5392 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5393 <thead>
5394 <tr>
5395 <th class="propertyname">CSS Property</th>
5396 <th class="value">Values</th>
5397 <th>Default</th>
5398 <th>Comments</th>
5399 </tr>
5400 </thead>
5401 <tbody>
5402 <tr>
5403 <td class="propertyname">-fx-text-alignment</td>
5404 <td class="value">[ left | center | right | justify ]</td>
5405 <td>left</td>
5406 <td> </td>
5407 </tr>
5408 <tr>
5409 <td class="propertyname">-fx-text-overrun</td>
5410 <td class="value">[ center-ellipsis | center-word-ellipsis | clip |
5411 ellipsis | leading-ellipsis | leading-word-ellipsis | word-ellipsis
5412 ]</td>
5413 <td>ellipsis</td>
5414 <td> </td>
5415 </tr>
5416 <tr>
5417 <td class="propertyname">-fx-wrap-text</td>
5418 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
5419 <td>false</td>
5420 <td> </td>
5421 </tr>
5422 <tr>
5423 <td class="propertyname">-fx-graphic</td>
5424 <td class="value"><a href="#typeurl" class="typelink"><uri></a></td>
5425 <td>null</td>
5426 <td> </td>
5427 </tr>
5428 <tr>
5429 <td class="propertyname">-fx-content-display</td>
5430 <td class="value">[ top | right | bottom | left | center | right |
5431 graphic-only | text-only ]</td>
5432 <td>left</td>
5433 <td> </td>
5434 </tr>
5435 <tr>
5436 <td class="propertyname">-fx-graphic-text-gap</td>
5437 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
5438 <td>4</td>
5439 <td> </td>
5440 </tr>
5441 <tr>
5442 <td class="propertyname">-fx-font</td>
5443 <td class="value"><a href="#typefont" class="typelink"><font></a></td>
5444 <td>Font.DEFAULT</td>
5445 <td>inherits</td>
5446 </tr>
5447 <tr>
5448 <td class="propertyname">-fx-show-delay</td>
5449 <td class="value"><a href="#typefont" class="typelink"><duration></a></td>
5450 <td>1000ms</td>
5451 <td> </td>
5452 </tr>
5453 <tr>
5454 <td class="propertyname">-fx-show-duration</td>
5455 <td class="value"><a href="#typefont" class="typelink"><duration></a></td>
5456 <td>5000ms</td>
5457 <td> </td>
5458 </tr>
5459 <tr>
5460 <td class="propertyname">-fx-hide-delay</td>
5461 <td class="value"><a href="#typefont" class="typelink"><duration></a></td>
5462 <td>200ms</td>
5463 <td> </td>
5464 </tr>
5465
5466 </tbody>
5467 </table>
5468 <h4>Substructure</h4>
5469 <ul>
5470 <li>label — Label</li>
5471 <li>page-corner — StackPane</li>
5472 </ul>
5473 <h4><a name="treecell" id="treecell">TreeCell</a></h4>
5474 <p class="styleclass">Style class: tree-cell</p>
5475 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5476 <thead>
5477 <tr>
5478 <th class="propertyname">CSS Property</th>
5479 <th class="value">Values</th>
5480 <th>Default</th>
5481 <th>Comments</th>
5482 </tr>
5483 </thead>
5484 <tbody>
5485 <tr>
5486 <td class="propertyname">-fx-indent</td>
5487 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
5488 <td>10</td>
5489 <td>The amout of space to multiply by the treeItem.level to get the
5490 left margin</td>
5491 </tr>
5492 <tr>
5493 <td colspan="4" class="parents">Also has all properties of <a href="#indexedcell">IndexedCell</a></td>
5494 </tr>
5495 </tbody>
5496 </table>
5497 <h4>Pseudo-classes</h4>
5498 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5499 <thead>
5500 <tr>
5501 <th class="propertyname">CSS Pseudo-class</th>
5502 <th>Comments</th>
5503 </tr>
5504 </thead>
5505 <tbody>
5506 <tr>
5507 <td class="propertyname">expanded</td>
5508 <td>applies if this cell is expanded</td>
5509 </tr>
5510 <tr>
5511 <td class="propertyname">collapsed</td>
5512 <td>applies if this cell is not expanded</td>
5513 </tr>
5514 <tr>
5515 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#indexedcell">IndexedCell</a></td>
5516 </tr>
5517 </tbody>
5518 </table>
5519 <h4><a name="treetablecell" id="treetablecell">TreeTableCell</a></h4>
5520 <p class="styleclass">Style class: tree-table-cell</p>
5521 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5522 <thead>
5523 <tr>
5524 <th class="propertyname">CSS Property</th>
5525 <th class="value">Values</th>
5526 <th>Default</th>
5527 <th>Comments</th>
5528 </tr>
5529 </thead>
5530 <tbody>
5531 <tr>
5532 <td colspan="4" class="parents">Also has all properties of <a href="#indexedcell">IndexedCell</a></td>
5533 </tr>
5534 </tbody>
5535 </table>
5536 <h4>Pseudo-classes</h4>
5537 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5538 <thead>
5539 <tr>
5540 <th class="propertyname">CSS Pseudo-class</th>
5541 <th>Comments</th>
5542 </tr>
5543 </thead>
5544 <tbody>
5545 <tr>
5546 <td class="propertyname">last-visible</td>
5547 <td>true if this is the last visible cell, typically the right-most cell in the TreeTableView</td>
5548 </tr>
5549 <tr>
5550 <td colspan="2" class="parents">Also has all pseudo‑classes of <a href="#indexedcell">IndexedCell</a></td>
5551 </tr>
5552 </tbody>
5553 </table>
5554
5555 <h4><a name="treetableview" id="treetableview">TreeView</a></h4>
5556 <p class="styleclass">Style class: tree-table-view</p>
5557 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5558 <thead>
5559 <tr>
5560 <th class="propertyname">CSS Property</th>
5561 <th class="value">Values</th>
5562 <th>Default</th>
5563 <th>Comments</th>
5564 </tr>
5565 </thead>
5566 <tbody>
5567 <tr>
5568 <td class="propertyname">-fx-fixed-cell-size</td>
5569 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
5570 <td>Region.USE_COMPUTED_SIZE</td>
5571 <td>If both -fx-cell-size and -fx-fixed-cell-size properties are
5572 specified in CSS, -fx-fixed-cell-size takes precedence.</td>
5573 </tr>
5574 <tr>
5575 <td colspan="4" class="parents">Also has all properties and pseudo‑class state of <a href="#control">Control</a></td>
5576 </tr>
5577 </tbody>
5578 </table>
5579
5580 <h4><a name="treeview" id="treeview">TreeView</a></h4>
5581 <p class="styleclass">Style class: tree-view</p>
5582 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5583 <thead>
5584 <tr>
5585 <th class="propertyname">CSS Property</th>
5586 <th class="value">Values</th>
5587 <th>Default</th>
5588 <th>Comments</th>
5589 </tr>
5590 </thead>
5591 <tbody>
5592 <tr>
5593 <td class="propertyname">-fx-fixed-cell-size</td>
5594 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
5595 <td>Region.USE_COMPUTED_SIZE</td>
5596 <td>If both -fx-cell-size and -fx-fixed-cell-size properties are
5597 specified in CSS, -fx-fixed-cell-size takes precedence.</td>
5598 </tr>
5599 <tr>
5600 <td colspan="4" class="parents">Also has all properties and pseudo‑class state of <a href="#control">Control</a></td>
5601 </tr>
5602 </tbody>
5603 </table>
5604 <!-- Charts -->
5605 <h2><a name="charts" id="charts">Charts</a></h2>
5606 <table summary="property table" class="package" width="100%">
5607 <tbody>
5608 <tr>
5609 <td><a name="charts">javafx.scene.chart</a></td>
5610 </tr>
5611 </tbody>
5612 </table>
5613 <h4><a name="areachart" id="areachart">AreaChart</a></h4>
5614 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5615 <thead>
5616 <tr>
5617 <th class="propertyname">Style class</th>
5618 <th>Comments</th>
5619 <th>Properties</th>
5620 </tr>
5621 </thead>
5622 <tbody>
5623 <tr>
5624 <td class="propertyname">"chart-series-area-line series<i>
5625 default-color<j>"</td>
5626 <td>Where <i> is the index of the series and <j> is the
5627 series’ color index.
5628 <td><a href="#node" class="typelink">Node</a> </td>
5629 </tr>
5630 <tr>
5631 <td class="propertyname">"chart-series-area-fill series<i>
5632 default-color<j>"</td>
5633 <td>Where <i> is the index of the series and <j> is the
5634 series’ color index.
5635 <td><a href="#path" class="typelink">Path</a> </td>
5636 </tr>
5637 <tr>
5638 <td class="propertyname">"chart-area-symbol series<i>
5639 data<j> default-color<k>"</td>
5640 <td>Where <i> is the index of the series, <j> is the index
5641 of the data within the series, and <k> is the series’
5642 color index</td>
5643 <td><a href="#path" class="typelink">Path</a> </td>
5644 </tr>
5645 <tr>
5646 <td class="propertyname">"chart-area-symbol series<i>
5647 area-legend-symbol default-color<j>"</td>
5648 <td>Where <i> is the index of the series and <j> is the
5649 series’ color index</td>
5650 <td><a href="#LegendItem" class="typelink">LegendItem</a> </td>
5651 </tr>
5652 </tbody>
5653 </table>
5654 <p>
5655 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5656 <thead>
5657 <tr>
5658 <th class="propertyname">CSS Property</th>
5659 <th class="value">Values</th>
5660 <th>Default</th>
5661 <th>Comments</th>
5662 </tr>
5663 </thead>
5664 <tbody>
5665 <tr>
5666 <td colspan="4" class="parents">Has all properties of <a href="#xychart">XYChart</a></td>
5667 </tr>
5668 </tbody>
5669 </table>
5670 <h4><a name="axis" id="axis">Axis</a></h4>
5671 <p class="styleclass">Style class: axis</p>
5672 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5673 <thead>
5674 <tr>
5675 <th class="propertyname">CSS Property</th>
5676 <th class="value">Values</th>
5677 <th>Default</th>
5678 <th>Comments</th>
5679 </tr>
5680 </thead>
5681 <tbody>
5682 <tr>
5683 <td class="propertyname">-fx-side</td>
5684 <td class="value">Side</td>
5685 <td>null</td>
5686 <td> </td>
5687 </tr>
5688 <tr>
5689 <td class="propertyname">-fx-tick-length</td>
5690 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
5691 <td>8</td>
5692 <td> </td>
5693 </tr>
5694 <tr>
5695 <td class="propertyname">-fx-tick-label-font</td>
5696 <td class="value"><a href="#typefont" class="typelink"><font></a></td>
5697 <td>8 system</td>
5698 <td> </td>
5699 </tr>
5700 <tr>
5701 <td class="propertyname">-fx-tick-label-fill</td>
5702 <td class="value"><a href="#typepaint" class="typelink"><paint></a></td>
5703 <td>black</td>
5704 <td> </td>
5705 </tr>
5706 <tr>
5707 <td class="propertyname">-fx-tick-label-gap</td>
5708 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
5709 <td>3</td>
5710 <td> </td>
5711 </tr>
5712 <tr>
5713 <td class="propertyname">-fx-tick-mark-visible</td>
5714 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
5715 <td>true</td>
5716 <td> </td>
5717 </tr>
5718 <tr>
5719 <td class="propertyname">-fx-tick-labels-visible</td>
5720 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
5721 <td>true</td>
5722 <td> </td>
5723 </tr>
5724 <tr>
5725 <td colspan="4" class="parents">Has all properties of <a href="#region">Region</a></td>
5726 </tr>
5727 </tbody>
5728 </table>
5729 <h4>Substructure</h4>
5730 <ul>
5731 <li>axis-label — Text</li>
5732 <li>axis-tick-mark — Path</li>
5733 </ul>
5734 <h4><a name="barchart" id="barchart">BarChart</a></h4>
5735 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5736 <thead>
5737 <tr>
5738 <th class="propertyname">Style class</th>
5739 <th>Comments</th>
5740 <th>Properties</th>
5741 </tr>
5742 </thead>
5743 <tbody>
5744 <tr>
5745 <td class="propertyname">"bar-chart"</td>
5746 <td> </td>
5747 <td> </td>
5748 </tr>
5749 <tr>
5750 <td class="propertyname">"chart-bar series<i> data<j>
5751 default-color<k>"</td>
5752 <td>Where <i> is the index of the series, <j> is the index
5753 of the data within the series, and <k> is the series’
5754 color index.
5755 If the data value is negative, the "negative" style
5756 class is added; e.g., <code>.negative.chart-bar</code>.</td>
5757 <td><a href="#node" class="typelink">Node</a> </td>
5758 </tr>
5759 <tr>
5760 <td class="propertyname">"chart-bar series<i> bar-legend-symbol
5761 default-color<j>"</td>
5762 <td>Where <i> is the index of the series and <j> is the
5763 series’ color index</td>
5764 <td><a href="#LegendItem" class="typelink">LegendItem</a> </td>
5765 </tr>
5766 </tbody>
5767 </table>
5768 <p>
5769 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5770 <thead>
5771 <tr>
5772 <th class="propertyname">CSS Property</th>
5773 <th class="value">Values</th>
5774 <th>Default</th>
5775 <th>Comments</th>
5776 </tr>
5777 </thead>
5778 <tbody>
5779 <tr>
5780 <td class="propertyname">-fx-bar-gap</td>
5781 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
5782 <td>4</td>
5783 <td> </td>
5784 </tr>
5785 <tr>
5786 <td class="propertyname">-fx-category-gap</td>
5787 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
5788 <td>10</td>
5789 <td> </td>
5790 </tr>
5791 <tr>
5792 <td colspan="4" class="parents">Has all properties of <a href="#xychart">XYChart</a></td>
5793 </tr>
5794 </tbody>
5795 </table>
5796 <h4><a name="bubblechart" id="bubblechart">BubbleChart</a></h4>
5797 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5798 <thead>
5799 <tr>
5800 <th class="propertyname">Style class</th>
5801 <th>Comments</th>
5802 <th>Properties</th>
5803 </tr>
5804 </thead>
5805 <tbody>
5806 <tr>
5807 <td class="propertyname">"chart-bubble series<i> data<j>
5808 default-color<k>"</td>
5809 <td>Where <i> is the index of the series, <j> is the index
5810 of the data within the series, and <k> is the series’
5811 color index</td>
5812 <td><a href="#node" class="typelink">Node</a> </td>
5813 </tr>
5814 <tr>
5815 <td class="propertyname">"chart-bubble series<i>
5816 bubble-legend-symbol default-color<j>"</td>
5817 <td>Where <i> is the index of the series and <j> is the
5818 series’ color index</td>
5819 <td><a href="#LegendItem" class="typelink">LegendItem</a> </td>
5820 </tr>
5821 </tbody>
5822 </table>
5823 <p>
5824 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5825 <thead>
5826 <tr>
5827 <th class="propertyname">CSS Property</th>
5828 <th class="value">Values</th>
5829 <th>Default</th>
5830 <th>Comments</th>
5831 </tr>
5832 </thead>
5833 <tbody>
5834 <tr>
5835 <td colspan="4" class="parents">Has all properties of <a href="#xychart">XYChart</a></td>
5836 </tr>
5837 </tbody>
5838 </table>
5839 <h4><a name="categoyaxis" id="categoryaxis">CategoryAxis</a></h4>
5840 <p class="styleclass">Style class: axis</p>
5841 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5842 <thead>
5843 <tr>
5844 <th class="propertyname">CSS Property</th>
5845 <th class="value">Values</th>
5846 <th>Default</th>
5847 <th>Comments</th>
5848 </tr>
5849 </thead>
5850 <tbody>
5851 <tr>
5852 <td class="propertyname">-fx-start-margin</td>
5853 <td class="value"><a href="#typesize" class="typelink"><number></a></td>
5854 <td>5</td>
5855 <td>The margin between the axis start and the first tick-mark</td>
5856 </tr>
5857 <tr>
5858 <td class="propertyname">-fx-end-margin</td>
5859 <td class="value"><a href="#typesize" class="typelink"><number></a></td>
5860 <td>5</td>
5861 <td>The margin between the axis start and the first tick-mark</td>
5862 </tr>
5863 <tr>
5864 <td class="propertyname">-fx-gap-start-and-end</td>
5865 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
5866 <td>true</td>
5867 <td>If this is true then half the space between ticks is left at the
5868 start and end</td>
5869 </tr>
5870 <tr>
5871 <td colspan="4" class="parents">Has all properties of <a href="#axis">Axis</a></td>
5872 </tr>
5873 </tbody>
5874 </table>
5875 <h4><a name="chart" id="chart">Chart</a></h4>
5876 <p class="styleclass">Style class: chart</p>
5877 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5878 <thead>
5879 <tr>
5880 <th class="propertyname">CSS Property</th>
5881 <th class="value">Values</th>
5882 <th>Default</th>
5883 <th>Comments</th>
5884 </tr>
5885 </thead>
5886 <tbody>
5887 <tr>
5888 <td class="propertyname">-fx-legend-side</td>
5889 <td class="value">Side</td>
5890 <td>bottom</td>
5891 <td> </td>
5892 </tr>
5893 <tr>
5894 <td class="propertyname">-fx-legend-visible</td>
5895 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
5896 <td>true</td>
5897 <td> </td>
5898 </tr>
5899 <tr>
5900 <td class="propertyname">-fx-title-side</td>
5901 <td class="value">Side</td>
5902 <td>top</td>
5903 <td> </td>
5904 </tr>
5905 <tr>
5906 <td colspan="4" class="parents">Has all properties of <a href="#region">Region</a></td>
5907 </tr>
5908 </tbody>
5909 </table>
5910 <h4>Substructure</h4>
5911 <ul>
5912 <li>chart-title — Label</li>
5913 <li>chart-content — Pane</li>
5914 </ul>
5915 <h4><a name="legend" id="legend">Legend</a></h4>
5916 <p class="styleclass">Style class: chart-legend</p>
5917 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5918 <thead>
5919 <tr>
5920 <th class="propertyname">CSS Property</th>
5921 <th class="value">Values</th>
5922 <th>Default</th>
5923 <th>Comments</th>
5924 </tr>
5925 </thead>
5926 <tbody>
5927 <tr>
5928 <td colspan="4" class="parents">Has all properties of <a href="#region">Region</a></td>
5929 </tr>
5930 </tbody>
5931 </table>
5932 <h4>Substructure</h4>
5933 <ul>
5934 <li>chart-legend-item — Label</li>
5935 <li>chart-legend-item-symbol — Node (the Label's graphic)</li>
5936 </ul>
5937 <h4><a name="linechart" id="linechart">LineChart</a></h4>
5938 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5939 <thead>
5940 <tr>
5941 <th class="propertyname">Style class</th>
5942 <th>Comments</th>
5943 <th>Properties</th>
5944 </tr>
5945 </thead>
5946 <tbody>
5947 <tr>
5948 <td class="propertyname">"chart-series-line series<i>
5949 default-color<j>"</td>
5950 <td>Where <i> is the index of the series and <j> is the
5951 series’ color index</td>
5952 <td><a href="#node" class="typelink">Node</a> </td>
5953 </tr>
5954 <tr>
5955 <td class="propertyname">"chart-line-symbol series<i>
5956 data<j> default-color<k>"</td>
5957 <td>Where <i> is the index of the series, <j> is the index
5958 of the data within the series, and <k> is the series’
5959 color index</td>
5960 <td><a href="#node" class="typelink">Node</a> </td>
5961 </tr>
5962 <tr>
5963 <td class="propertyname">"chart-line-symbol series<i>
5964 default-color<j>"</td>
5965 <td>Where <i> is the index of the series and <j> is the
5966 series’ color index</td>
5967 <td><a href="#LegendItem" class="typelink">LegendItem</a> </td>
5968 </tr>
5969 </tbody>
5970 </table>
5971 <p>
5972 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5973 <thead>
5974 <tr>
5975 <th class="propertyname">CSS Property</th>
5976 <th class="value">Values</th>
5977 <th>Default</th>
5978 <th>Comments</th>
5979 </tr>
5980 </thead>
5981 <tbody>
5982 <tr>
5983 <td class="propertyname">-fx-create-symbols</td>
5984 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
5985 <td>true</td>
5986 <td> </td>
5987 </tr>
5988 <tr>
5989 <td colspan="4" class="parents">Has all properties of <a href="#xychart">XYChart</a></td>
5990 </tr>
5991 </tbody>
5992 </table>
5993 <h4><a name="numberaxis" id="numberaxis">NumberAxis</a></h4>
5994 <p class="styleclass">Style class: axis</p>
5995 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
5996 <thead>
5997 <tr>
5998 <th class="propertyname">CSS Property</th>
5999 <th class="value">Values</th>
6000 <th>Default</th>
6001 <th>Comments</th>
6002 </tr>
6003 </thead>
6004 <tbody>
6005 <tr>
6006 <td class="propertyname">-fx-tick-unit</td>
6007 <td class="value"><a href="#typesize" class="typelink"><number></a></td>
6008 <td>5</td>
6009 <td>The value between each major tick mark in data units.</td>
6010 </tr>
6011 <tr>
6012 <td colspan="4" class="parents">Has all properties of <a href="#valueaxis">ValueAxis</a></td>
6013 </tr>
6014 </tbody>
6015 </table>
6016 <h4><a name="piechart" id="piechart">PieChart</a></h4>
6017 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
6018 <thead>
6019 <tr>
6020 <th class="propertyname">Style class</th>
6021 <th>Comments</th>
6022 <th>Properties</th>
6023 </tr>
6024 </thead>
6025 <tbody>
6026 <tr>
6027 <td class="propertyname">"chart-pie data<i>
6028 default-color<j>"</td>
6029 <td>Where <i> is the index of the data and <j> is the
6030 series’ color index. If the data value is negative, the
6031 "negative" style‑class is added; e.g., <code>.negative.chart-pie</code>.</td>
6032 <td><a href="#node" class="typelink">Node</a> </td>
6033 </tr>
6034 <tr>
6035 <td class="propertyname">"chart-pie-label-line;"</td>
6036 <td> </td>
6037 <td><a href="#path" class="typelink">Path</a> </td>
6038 </tr>
6039 <tr>
6040 <td class="propertyname">"chart-pie-label;"</td>
6041 <td> </td>
6042 <td><a href="#path" class="typelink">Text</a> </td>
6043 </tr>
6044 <tr>
6045 <td class="propertyname">"pie-legend-symbol <<em>i–th</em>
6046 data item’s style‑class>"</td>
6047 <td>Each item in the legend has the style‑class "pie-legend-symbol"
6048 plus the style‑class of the corresponding data item</td>
6049 <td><a href="#LegendItem" class="typelink">LegendItem</a> </td>
6050 </tr>
6051 </tbody>
6052 </table>
6053 <p>
6054 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
6055 <thead>
6056 <tr>
6057 <th class="propertyname">CSS Property</th>
6058 <th class="value">Values</th>
6059 <th>Default</th>
6060 <th>Comments</th>
6061 </tr>
6062 </thead>
6063 <tbody>
6064 <tr>
6065 <td class="propertyname">-fx-clockwise</td>
6066 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
6067 <td>true</td>
6068 <td> </td>
6069 </tr>
6070 <tr>
6071 <td class="propertyname">-fx-pie-label-visible</td>
6072 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
6073 <td>true</td>
6074 <td> </td>
6075 </tr>
6076 <tr>
6077 <td class="propertyname">-fx-label-line-length</td>
6078 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
6079 <td>20</td>
6080 <td> </td>
6081 </tr>
6082 <tr>
6083 <td class="propertyname">-fx-start-angle</td>
6084 <td class="value"><a href="#typenumber" class="typelink"><number></a></td>
6085 <td>0</td>
6086 <td> </td>
6087 </tr>
6088 <tr>
6089 <td colspan="4" class="parents">Has all properties of <a href="#chart">Chart</a></td>
6090 </tr>
6091 </tbody>
6092 </table>
6093 <h4><a name="scatterchart" id="scatterchart">ScatterChart</a></h4>
6094 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
6095 <thead>
6096 <tr>
6097 <th class="propertyname">Style class</th>
6098 <th>Comments</th>
6099 <th>Properties</th>
6100 </tr>
6101 </thead>
6102 <tbody>
6103 <tr>
6104 <td class="propertyname">"chart-symbol series<i> data<j>
6105 default-color<k>"</td>
6106 <td>Where <i> is the index of the series, <j> is the index
6107 of the data within the series, and <k> is the series’
6108 color index</td>
6109 <td><a href="#node" class="typelink">Node</a> </td>
6110 </tr>
6111 <tr>
6112 <td class="propertyname"> </td>
6113 <td>The LegendItem symbols are assigned the style‑class of the first
6114 symbol of the series.</td>
6115 <td><a href="#LegendItem" class="typelink">LegendItem</a> </td>
6116 </tr>
6117 </tbody>
6118 </table>
6119 <p>
6120 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
6121 <thead>
6122 <tr>
6123 <th class="propertyname">CSS Property</th>
6124 <th class="value">Values</th>
6125 <th>Default</th>
6126 <th>Comments</th>
6127 </tr>
6128 </thead>
6129 <tbody>
6130 <tr>
6131 <td colspan="4" class="parents">Has all properties of <a href="#xychart">XYChart</a></td>
6132 </tr>
6133 </tbody>
6134 </table>
6135 <h4><a name="valueaxis" id="valueaxis">ValueAxis</a></h4>
6136 <p class="styleclass">Style class: axis</p>
6137 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
6138 <thead>
6139 <tr>
6140 <th class="propertyname">CSS Property</th>
6141 <th class="value">Values</th>
6142 <th>Default</th>
6143 <th>Comments</th>
6144 </tr>
6145 </thead>
6146 <tbody>
6147 <tr>
6148 <td class="propertyname">-fx-minor-tick-length</td>
6149 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
6150 <td>5</td>
6151 <td> </td>
6152 </tr>
6153 <tr>
6154 <td class="propertyname">-fx-minor-tick-count</td>
6155 <td class="value"><a href="#typesize" class="typelink"><size></a></td>
6156 <td>5</td>
6157 <td> </td>
6158 </tr>
6159 <tr>
6160 <td class="propertyname">-fx-minor-tick-visible</td>
6161 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
6162 <td>true</td>
6163 <td> </td>
6164 </tr>
6165 <tr>
6166 <td colspan="4" class="parents">Has all properties of <a href="#axis">Axis</a></td>
6167 </tr>
6168 </tbody>
6169 </table>
6170 <h4>Substructure</h4>
6171 <ul>
6172 <li>axis-minor-tick-mark — Path</li>
6173 </ul>
6174 <h4><a name="xychart" id="xychart">XYChart</a></h4>
6175 <p class="styleclass">Style class: set by sub-type</p>
6176 <table summary="property table" class="csspropertytable" cellpadding="2" cellspacing="1">
6177 <thead>
6178 <tr>
6179 <th class="propertyname">CSS Property</th>
6180 <th class="value">Values</th>
6181 <th>Default</th>
6182 <th>Comments</th>
6183 </tr>
6184 </thead>
6185 <tbody>
6186 <tr>
6187 <td class="propertyname">-fx-alternative-column-fill-visible</td>
6188 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
6189 <td>true</td>
6190 <td> </td>
6191 </tr>
6192 <tr>
6193 <td class="propertyname">-fx-alternative-row-fill-visible</td>
6194 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
6195 <td>true</td>
6196 <td> </td>
6197 </tr>
6198 <tr>
6199 <td class="propertyname">-fx-horizontal-grid-lines-visible</td>
6200 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
6201 <td>true</td>
6202 <td> </td>
6203 </tr>
6204 <tr>
6205 <td class="propertyname">-fx-horizontal-zero-line-visible</td>
6206 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
6207 <td>true</td>
6208 <td> </td>
6209 </tr>
6210 <tr>
6211 <td class="propertyname">-fx-vertical-grid-lines-visible</td>
6212 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
6213 <td>true</td>
6214 <td> </td>
6215 </tr>
6216 <tr>
6217 <td class="propertyname">-fx-vertical-zero-line-visible</td>
6218 <td class="value"><a href="#typeboolean" class="typelink"><boolean></a></td>
6219 <td>true</td>
6220 <td> </td>
6221 </tr>
6222 <tr>
6223 <td colspan="4" class="parents">Has all properties of <a href="#chart">chart</a></td>
6224 </tr>
6225 </tbody>
6226 </table>
6227 <h4>Substructure</h4>
6228 <ul>
6229 <li>plot-content — Group</li>
6230 <li>chart-plot-background — Region</li>
6231 <li>chart-alternative-column-fill — Path</li>
6232 <li>chart-alternative-row-fill — Path</li>
6233 <li>chart-vertical-grid-lines — Path</li>
6234 <li>chart-horizontal-grid-lines — Path</li>
6235 <li>chart-vertical-zero-line — Line</li>
6236 <li>chart-horizontal-zero-line — Line</li>
6237 </ul>
6238 <h2><a name="references" id="references">References</a></h2>
6239 <p>[1] CSS 2.1: <a href="http://www.w3.org/TR/CSS21/" target="_blank">http://www.w3.org/TR/CSS21/</a>
6240 </p>
6241 <p>[2] CSS 3 work in progress <a href="http://www.w3.org/Style/CSS/current-work"
6242 target="_blank">http://www.w3.org/Style/CSS/current-work</a>
6243 (May 2010). </p>
6244 <p>[3] SVG Paths: <a href="http://www.w3.org/TR/SVG/paths.html" target="_blank">http://www.w3.org/TR/SVG/paths.html</a>
6245 </p>
6246 <p>[4] CSS Backgrounds and Borders Module Level 3: <a href="http://www.w3.org/TR/css3-background/"
6247 target="_blank">http://www.w3.org/TR/css3-background/</a>
6248 </p>
6249 <p>[5] Uniform Resource Identifier (URI): Generic Syntax <a href="http://www.ietf.org/rfc/rfc3986">RFC-3986</a></p>
6250 <hr>
6251 <p>
6252 <font size="-1"><a href="http://bugreport.java.com/bugreport/" target="_blank">Submit a bug or feature</a><br>For further API reference and developer documentation, see <a href="http://download.java.net/java/jdk9/docs/index.html" target="_blank">Java SE Documentation</a>. That documentation contains more detailed, developer-targeted descriptions, with conceptual overviews, definitions of terms, workarounds, and working code examples.<br> <a href="http://download.java.net/java/jdk9/docs/legal/cpyr.html" target="_blank">Copyright</a> © 2008, 2017, Oracle and/or its affiliates. All rights reserved.<br><b>DRAFT 9-ea</b></font>
6253 </p>
6254 <br>
6255 </body>
6256 </html>