< prev index next >

src/java.desktop/share/classes/javax/swing/plaf/synth/doc-files/synthFileFormat.html

Print this page


   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   2 <html>
   3   <head>

   4     <title>Synth File Format</title>

























   5   <style type="text/css">
   6 div.dtd-fragment {
   7     width: 100%;
   8     border: none;
   9     background-color: #eee;
  10 }
  11 pre.dtd-fragment {
  12     margin-left: 0;
  13 }
  14 div.example {
  15     width: 100%;
  16     color: maroon;
  17 }
  18   </style>
  19   </head>
  20 
  21   <body>
  22     <h2><a name="file">File Format</a></h2>
  23     <p>
  24       Synth's file format (<a href="synth.dtd">dtd</a>)
  25       allows for specifying all the pieces
  26       necessary to create your own look and feel. A synth file is
  27       loaded by way of the <A HREF="../../../../../javax/swing/plaf/synth/SynthLookAndFeel.html#load(java.io.InputStream,%20java.lang.Class)">SynthLookAndFeel.load(InputStream, Class)</a> or
  28       <a href="../../../../../javax/swing/plaf/synth/SynthLookAndFeel.html#load(java.net.URL)">SynthLookAndFeel.load(URL)</a> methods.



  29       The following example uses the <code>load</code> method to configure 
  30       a <code>SynthLookAndFeel</code> and sets it as the current look
  31       and feel:
  32     </p>
  33     <div class="example">
  34       <pre>
  35   SynthLookAndFeel laf = new SynthLookAndFeel();
  36   laf.load(MyClass.class.getResourceAsStream("laf.xml"), MyClass.class);
  37   UIManager.setLookAndFeel(laf);
  38       </pre>
  39     </div>
  40     <p>
  41       This example loads the look and feel from an input stream, using
  42       the specified class as the resource base to resolve paths.
  43       It is also possible to load a look and feel from an arbitrary URL
  44       as in the following example.
  45     </p>
  46     <div class="example">
  47       <pre>
  48   SynthLookAndFeel laf = new SynthLookAndFeel();
  49   laf.load(new URL("file:///C:/java/synth/laf/laf.xml"));
  50   UIManager.setLookAndFeel(laf);
  51       </pre>
  52     </div>
  53     <p>
  54       The method <a href="../../../../../javax/swing/plaf/synth/SynthLookAndFeel.html#load(java.net.URL)">SynthLookAndFeel.load(URL)</a> can be
  55       used, for instance, to load a look and feel from any of the following:


  56     </p>
  57     <ul>
  58       <li>File, e.g. <code>file:///C:/java/synth/laf/laf.xml</code></li>
  59       <li>Web server, e.g. <code>http://host/laf.xml</code></li>
  60       <li>JAR file, e.g.
  61         <code>jar:file:///C:/synth-laf.jar!/laf.xml</code></li>
  62       <li>Remote JAR file, e.g.
  63         <code>jar:http://host/synth-laf.jar!/laf.xml</code></li>
  64     </ul>
  65     <p>
  66       While the DTD for synth is specified, the parser is not validating.
  67       Parsing will fail only if a necessary attribute is not
  68       specified, or of the wrong type.
  69 
  70     <h3>The synth element</h3>
  71 <div class="dtd-fragment">
  72 <pre class="dtd-fragment">
  73 &lt;!ELEMENT <a name="e.synth">synth</a> ((<a href="#ee.beansPersistance">%beansPersistance;</a>) | <a href="#e.style">style</a> | <a href="#e.bind">bind</a> | <a href="#e.font">font</a> | <a href="#e.color">color</a> |
  74                  <a href="#e.imagePainter">imagePainter</a> | <a href="#e.imageIcon">imageIcon</a> | <a href="#e.defaultsProperty">defaultsProperty</a>)*>
  75 &lt;!ATTLIST synth
  76           <a href="#synth.version">version</a>              CDATA          #IMPLIED
  77 &gt;
  78 </pre>
  79 </div>
  80     <p><em>Attribute definitions</em></p>
  81     <dl><dt><a name="synth.version"><samp>version</samp></a></dt>
  82         <dd>File format version, should be 1</dd>
  83     </dl>
  84     <p>
  85       The <a href="#e.synth">synth</a> element contains all the other
  86       elements that make up a SynthLookAndFeel definition.
  87     </p>
  88 
  89       
  90     <h3>The style element</h3>
  91 <div class="dtd-fragment">
  92 <pre class="dtd-fragment">
  93 &lt;!ELEMENT <a name="e.style">style</a> (<a href="#e.property">property</a> | <a href="#e.defaultsProperty">defaultsProperty</a> | <a href="#e.state">state</a> | <a href="#e.font">font</a> | <a href="#e.graphicsUtils">graphicsUtils</a> |
  94                  <a href="#e.insets">insets</a> | <a href="#e.painter">painter</a> | <a href="#e.imagePainter">imagePainter</a> | <a href="#e.opaque">opaque</a> | (<a href="#ee.beansPersistance">%beansPersistance;</a>) |
  95                  <a href="#e.imageIcon">imageIcon</a>)*>
  96 &lt;!ATTLIST style
  97           <a href="#style.id">id</a>              ID          #IMPLIED
  98           <a href="#style.clone">clone</a>           IDREF       #IMPLIED
  99 &gt;
 100 </pre>
 101 </div>
 102     <p><em>Attribute definitions</em></p>
 103     <dl>
 104       <dt><a name="style.id"><samp>id</samp></a></dt>
 105       <dd>Unique identifier for the style.</dd>
 106       <dt><a name="style.clone"><samp>clone</samp></a></dt>
 107       <dd>Identifier of a previously defined style that is copied
 108             and used for the new style. This provides a convenient
 109             mechanism for overriding only a portion of an existing
 110             style.</dd>
 111     </dl>
 112     <p>
 113       A style element corresponds to a
 114       <code>SynthStyle</code>, with the child elements specifying
 115       properties that apply to all states or state elements which
 116       contain properties specific to a particular state. The following
 117       example creates an opaque style with the id <code>button</code>,
 118       insets of 4, 4, 4, 4 and a font of Dialog 12.
 119     </p>
 120     <div class="example">
 121       <pre>
 122 &lt;style id="button">
 123   &lt;opaque value="true"/>
 124   &lt;insets top="4" left="4" right="4" bottom="4"/>
 125   &lt;font name="Dialog" size="12"/>
 126 &lt;/style>
 127       </pre>
 128     </div>
 129     <p>
 130       The following example creates a new style with an id of
 131       <code>clonedButton</code> that is a copy of the
 132       style with id <code>button</code> and has a font of Dialog,
 133       14. The resulting style will be opaque, have insets of 4, 4, 4,
 134       4 and a font of Dialog 14.
 135     </p>
 136     <div class="example">
 137       <pre>
 138 &lt;style id="clonedButton" clone="button">
 139   &lt;font name="Dialog" size="14"/>
 140 &lt;/style>
 141       </pre>
 142     </div>
 143 
 144     <h3>The state element</h3>
 145 <div class="dtd-fragment">
 146 <pre class="dtd-fragment">
 147 &lt;!ELEMENT <a name="e.state">state</a> (<a href="#e.color">color</a> | <a href="#e.font">font</a> | <a href="#e.painter">painter</a> | <a href="#e.imagePainter">imagePainter</a> | (<a href="#ee.beansPersistance">%beansPersistance;</a>) |
 148                  <a href="#e.property">property</a> |  <a href="#e.imageIcon">imageIcon</a>)*>
 149 &lt;!ATTLIST state
 150           <a href="#state.id">id</a>              ID             #IMPLIED
 151           <a href="#state.clone">clone</a>           IDREF          #IMPLIED
 152           <a href="#state.value">value</a>           CDATA          #IMPLIED
 153           <a href="#state.idref">idref</a>           IDREF          #IMPLIED
 154 &gt;
 155 </pre>
 156 </div>
 157     <p><em>Attribute definitions</em></p>
 158     <dl>
 159       <dt><a name="state.id"><samp>id</samp></a></dt>
 160       <dd>Unique identifier for the state.</dd>
 161       <dt><a name="state.clone"><samp>clone</samp></a></dt>
 162       <dd>Identifier of a previously defined state that is copied
 163         and used for the new state.</dd>
 164       <dt><a name="state.value"><samp>value</samp></a></dt>
 165       <dd>Identifies the state of the Component the properties are to apply
 166         to. This is a list of: ENABLED,
 167         MOUSE_OVER, PRESSED, DISABLED, FOCUSED, SELECTED or
 168         DEFAULT. Multiple states should
 169         be separated by 'and.' If you do not specify a value, the
 170         contents apply to all states.
 171       <dt><a name="state.idref"><samp>idref</samp></a></dt>
 172       <dd>Indicates this state should be the same as a previously
 173             defined state. This is useful for multiple styles that
 174             wish to share the same visual properties for a particular
 175             state.
 176       </dd>
 177     </dl>
 178     <p>
 179       The <a href="#e.state">state</a> element specifies the visual
 180       properties that are to be used for
 181       a particular state of a component. For example, you could
 182       specify the background color when the Component is enabled should look
 183       different than the background color when the component is
 184       disabled. Not all Components support all states. For example, a
 185       <code>Panel</code> only supports the states ENABLED and DISABLED.
 186     </p>
 187     <p>
 188       The following example creates a state with a red background that
 189       will be used when the component is in an a selected and pressed state:
 190     </p>
 191     <div class="example">


 203       <pre>
 204 &lt;state value="SELECTED and PRESSED" id="one">
 205   &lt;color value="RED" type="BACKGROUND"/>
 206 &lt;/state>
 207 &lt;state value="SELECTED" id="two">
 208   &lt;color value="RED" type="BACKGROUND"/>
 209 &lt;/state>
 210     </pre>
 211 </div>
 212     <p>
 213       State <code>one</code> is used when the Component is SELECTED
 214       and PRESSED, and state <code>two</code> when the Component is
 215       SELECTED. If the state of the Component 
 216       contains at least SELECTED and PRESSED, state <code>one</code> will be
 217       chosen, otherwise if the state is SELECTED, but not does not
 218       contain PRESSED, state <code>two</code> will be used.
 219 
 220     <h3>The font element</h3>
 221 <div class="dtd-fragment">
 222 <pre class="dtd-fragment">
 223 &lt;!ELEMENT <a name="e.font">font</a> EMPTY>
 224 &lt;!ATTLIST font
 225           <a href="#font.id">id</a>              ID             #IMPLIED
 226           <a href="#font.idref">clone</a>           IDREF          #IMPLIED
 227           <a href="#font.name">name</a>            CDATA          #IMPLIED
 228           <a href="#font.style">style</a>           CDATA          #IMPLIED
 229           <a href="#font.size">size</a>            CDATA          #IMPLIED
 230 &gt;
 231 </pre>
 232 </div>
 233     <p><em>Attribute definitions</em></p>
 234     <dl>
 235       <dt><a name="font.id"><samp>id</samp></a></dt>
 236       <dd>Unique identifier for the Font.</dd>
 237       <dt><a name="font.idref"><samp>idref</samp></a></dt>
 238       <dd>Identifier of a previously defined font.</dd>
 239       <dt><a name="font.name"><samp>name</samp></a></dt>
 240       <dd>Name of the font.
 241       <dt><a name="font.style"><samp>style</samp></a></dt>
 242       <dd>Style of the font. This is a list of the styles defined by
 243         Font separated by spaces: PLAIN, BOLD or ITALIC. If
 244         unspecified PLAIN is used.
 245       </dd>
 246       <dt><a name="font.size"><samp>size</samp></a></dt>
 247       <dd>Size of the font, in pixels</dd>
 248     </dl>
 249     <p>
 250       Defines the font for the current <a href="#e.state">state</a>,
 251       or <a href="#e.style">style</a>. You must
 252       specify either an <a href="#font.idref">idref</a> or a
 253       <a href="#font.name">name</a> and <a href="#font.size">size</a>.
 254     </p>
 255     <p>
 256       The following example creates a style with a Font of
 257       Dialog 12 Bold.
 258     </p>
 259     <div class="example">
 260       <pre>
 261 &lt;style id="test">
 262   &lt;font name="DIALOG" size="12" style="BOLD"/>
 263 &lt;/style>
 264     </pre>
 265 </div>
 266     <p>


 272       <pre>
 273 &lt;style id="test">
 274   &lt;font name="DIALOG" size="12" style="ITALIC"/>
 275   &lt;state value="ENABLED">
 276     &lt;font name="DIALOG" size="12" style="BOLD"/>
 277   &lt;/state>
 278 &lt;/style>
 279     </pre>
 280 </div>
 281     <p>
 282       While you can supply a different font per state, in general
 283       widgets will NOT revalidate when the state changes, so that you
 284       may run into sizing problems if you try to use a font with a
 285       significantly different size for different states.
 286     </p>
 287 
 288 
 289     <h3>The color element</h3>
 290 <div class="dtd-fragment">
 291 <pre class="dtd-fragment">
 292 &lt;!ELEMENT <a name="e.color">color</a> EMPTY>
 293 &lt;!ATTLIST color
 294           <a href="#color.id">id</a>              ID             #IMPLIED
 295           <a href="#color.idref">idref</a>           IDREF          #IMPLIED
 296           <a href="#color.type">type</a>            CDATA          #IMPLIED
 297           <a href="#color.value">value</a>           CDATA          #IMPLIED
 298 &gt;
 299 </pre>
 300 </div>
 301     <p><em>Attribute definitions</em></p>
 302     <dl>
 303       <dt><a name="color.id"><samp>id</samp></a></dt>
 304       <dd>Unique identifier for the color.</dd>
 305       <dt><a name="color.idref"><samp>idref</samp></a></dt>
 306       <dd>Identifier of a previously defined color.</dd>
 307       <dt><a name="color.type"><samp>type</samp></a></dt>
 308       <dd>Describes where this color should be used. This is
 309             typically one of the constants defined by ColorType:
 310             FOREGROUND, BACKGROUND, TEXT_FOREGROUND, TEXT_BACKGROUND
 311             or FOCUS. Alternatively you can specify the complete path
 312             to a class and field, for example
 313             javax.swing.plaf.synth.ColorType.FOREGROUND, this
 314             is useful for subclasses of synth that define additional
 315             color types.
 316       </dd>
 317       <dt><a name="color.value"><samp>value</samp></a></dt>
 318       <dd>
 319         Value for the color. This accepts the following forms. 
 320         <ul>
 321           <li>The name of a constant in the <code>Color</code> class,
 322             for example <code> RED</code>. 
 323           <li>A hex value of the form <code>#RRGGBB</code> where
 324             <code>RR</code> gives the red component, <code>GG</code>
 325             the green component and <code>BB</code> the blue
 326             component. You need not specify all color components. For
 327             example, <code>#123</code> is equivalent to <code>#000123</code>.
 328           <li>A hex value of the form <code>#ARRGGBB</code> or
 329             <code>#AARRGGBB</code>. This is useful for alpha values
 330             other than <code>0xFF</code>. The form
 331             <code>#ARRGGBB</code> is equivalent to
 332             <code>#0ARRGGBB</code>. 
 333         </ul>
 334       </dd>
 335     </dl>
 336     <p>
 337       <a href="#e.color">Color</a> defines a color and what portion of


 349     <p>
 350       The following example will have a red background when the
 351       Component is enabled, otherwise blue.
 352     </p>
 353     <div class="example">
 354       <pre>
 355 &lt;style id="test">
 356   &lt;state value="ENABLED">
 357     &lt;color value="RED" type="BACKGROUND"/>
 358   &lt;/state>
 359   &lt;state>
 360     &lt;color value="#00FF00" type="BACKGROUND"/>
 361   &lt;/state>
 362 &lt;/style>
 363     </pre>
 364 </div>
 365 
 366     <h3>The property element</h3>
 367 <div class="dtd-fragment">
 368 <pre class="dtd-fragment">
 369 &lt;!ELEMENT <a name="e.property">property</a> EMPTY>
 370 &lt;!ATTLIST property
 371           <a href="#property.key">key</a>               CDATA                                             #REQUIRED
 372           <a href="#property.type">type</a>              (idref|boolean|dimension|insets|integer|string)          "idref"
 373           <a href="#property.value">value</a>             CDATA                                             #REQUIRED
 374 &gt;
 375 </pre>
 376 </div>
 377     <p><em>Attribute definitions</em></p>
 378     <dl>
 379       <dt><a name="property.key"><samp>key</samp></a></dt>
 380       <dd>Name of the property.</dd>
 381       <dt><a name="property.type"><samp>type</samp></a></dt>
 382       <dd>Indicates the type of the property.</dd>
 383       <dt><a name="property.value"><samp>value</samp></a></dt>
 384       <dd>Value for the property. For boolean properties this will be
 385         be true or false, for integer properties this will be a
 386         valid integer, for dimensions this will be the width and
 387         height separated by a space, for insets properties this will
 388         be the top, left, bottom and right separated by a space and
 389         for idref properties this will be the unique id of a
 390         previously defined object.</dd>
 391     </dl>
 392     <p>
 393       <a href="#e.property">Property</a> elements are used to add key value pairs to a
 394       <code>SynthStyle</code> that can be accessed by way of the
 395       <code>get</code> method. Many <code>Component</code>s use the
 396       key value pairs for configuring their visual appearance. Refer to
 397       <a href="componentProperties.html">property table</a> for a list of the
 398       properties each <code>Component</code> supports. The following
 399       creates the properties
 400       <code>ScrollBar.allowsAbsolutePositioning</code>,
 401       <code>OptionPane.minimumSize</code>,
 402       <code>ScrollPane.viewportBorderInsets</code>,
 403       <code>Tree.rowHeight</code> and <code>foreground</code> with the


 421       You can also specify properties that are to apply to specific
 422       states.  Whether or not the property is accessed for each state
 423       depends upon how the property is used.  For example, the
 424       following specifies a default icon and an icon to use while the
 425       mouse is over the component.
 426     </p>
 427     <div class="example">
 428       <pre>
 429 &lt;style id="test">
 430   &lt;imageIcon id="defaultIcon" path="resources/myImage.png"/>
 431   &lt;property key="RadioButton.icon" value="defaultIcon"/>
 432   &lt;state value="MOUSE_OVER">
 433     &lt;imageIcon id="mouseOverIcon" path="resources/myMouseOverImage.png"/>
 434     &lt;property key="RadioButton.icon" value="mouseOverIcon"/>
 435   &lt;/state>
 436 &lt;/style>
 437     </pre>
 438 </div>
 439 <div class="dtd-fragment">
 440 <pre class="dtd-fragment">
 441 &lt;!ELEMENT <a name="e.defaultsProperty">defaultsProperty</a> EMPTY>
 442 &lt;!ATTLIST defaultsProperty
 443           <a href="#defaultsProperty.key">key</a>               CDATA                                             #REQUIRED
 444           <a href="#defaultsProperty.type">type</a>              (idref|boolean|dimension|insets|integer|string)   "idref"
 445           <a href="#defaultsProperty.value">value</a>             CDATA                                             #REQUIRED
 446 &gt;
 447 </pre>
 448 </div>
 449     <p><em>Attribute definitions</em></p>
 450     <dl>
 451       <dt><a name="defaultsProperty.key"><samp>key</samp></a></dt>
 452       <dd>Name of the property.</dd>
 453       <dt><a name="defaultsProperty.type"><samp>type</samp></a></dt>
 454       <dd>Indicates the type of the property.</dd>
 455       <dt><a name="defaultsProperty.value"><samp>value</samp></a></dt>
 456       <dd>Value for the property. For boolean properties this will be
 457         true or false, for integer properties this will be a
 458         valid integer, for dimensions this will be the width and
 459         height separated by a space, for insets properties this will
 460         be the top, left, bottom and right separated by a space and
 461         for idref properties this will be the unique id of a
 462         previously defined object.</dd>
 463     </dl>
 464     <p>
 465       <a href="#e.defaultsProperty">DefaultsProperty</a> elements are
 466       used to define properties that will be placed in the
 467       <code>UIDefaults</code> table that <code>SynthLookAndFeel</code>
 468       supplies to the <code>UIManager</code>. The following assigns the
 469       the Color red to the value Table.focusCellForeground.
 470     </p>
 471     <div class="example">
 472       <pre>
 473 &lt;style id="test">
 474   &lt;object class="javax.swing.plaf.ColorUIResource" id="color">
 475     &lt;int>255&lt;/int>
 476     &lt;int>0&lt;/int>
 477     &lt;int>0&lt;/int>
 478   &lt;/object>
 479   &lt;defaultsProperty key="Table.focusCellForeground" type="idref" value="color"/>
 480 &lt;/style>
 481     </pre>
 482 </div>
 483     <p>
 484       This value could then be asked by way of
 485       <code>UIManager.get("Table.focusCellForeground")</code>.
 486     </p>
 487 
 488     <h3>The graphicsUtils element</h3>
 489 <div class="dtd-fragment">
 490 <pre class="dtd-fragment">
 491 &lt;!ELEMENT <a name="e.graphicsUtils">graphicsUtils</a> EMPTY>
 492 &lt;!ATTLIST graphicsUtils
 493           <a href="#graphicsUtils.idref">idref</a>           IDREF             #REQUIRED
 494 &gt;
 495 </pre>
 496 </div>
 497     <p><em>Attribute definitions</em></p>
 498     <dl>
 499       <dt><a name="graphicsUtils.idref"><samp>idref</samp></a></dt>
 500       <dd>Identifer of a previously defined SynthGraphicsUtils object
 501         that is to be used as the SynthGraphicsUtils for the current
 502         <a href="#e.style">style</a>.</dd>
 503     </dl>
 504     <p>
 505       <a href="#e.graphicsUtils">GraphicsUtils</a> elements are
 506       used to define the SynthGraphicsUtils that the current
 507       <a href="#e.style">style</a> will use. The following example
 508       creates a style with an instance of CustomGraphicsUtils for the
 509       SynthGraphicsUtils.
 510     </p>
 511     <div class="example">
 512       <pre>
 513 &lt;style id="test">
 514   &lt;object class="CustomGraphicsUtils" id="graphics"/>
 515   &lt;graphicsUtils idref="graphics"/>
 516 &lt;/style>
 517     </pre>
 518 </div>
 519 
 520     <h3>The insets element</h3>
 521 <div class="dtd-fragment">
 522 <pre class="dtd-fragment">
 523 &lt;!ELEMENT <a name="e.insets">insets</a> EMPTY>
 524 &lt;!ATTLIST insets
 525           <a href="#insets.id">id</a>           ID             #IMPLIED
 526           <a href="#insets.idref">idref</a>        IDREF          #IMPLIED
 527           <a href="#insets.top">top</a>          CDATA          #IMPLIED
 528           <a href="#insets.bottom">bottom</a>       CDATA          #IMPLIED
 529           <a href="#insets.left">left</a>         CDATA          #IMPLIED
 530           <a href="#insets.right">right</a>        CDATA          #IMPLIED
 531 &gt;
 532 </pre>
 533 </div>
 534     <p><em>Attribute definitions</em></p>
 535     <dl>
 536       <dt><a name="insets.id"><samp>id</samp></a></dt>
 537       <dd>Unique identifier for the Insets.</dd>
 538       <dt><a name="insets.idref"><samp>idref</samp></a></dt>
 539       <dd>Identifier of a previously defined Insets.</dd>
 540       <dt><a name="insets.top"><samp>top</samp></a></dt>
 541       <dd>Top component of the Insets.</dd>
 542       <dt><a name="insets.bottom"><samp>bottom</samp></a></dt>
 543       <dd>Bottom component of the Insets.</dd>
 544       <dt><a name="insets.left"><samp>left</samp></a></dt>
 545       <dd>Left component of the Insets.</dd>
 546       <dt><a name="insets.right"><samp>right</samp></a></dt>
 547       <dd>Right component of the Insets.</dd>
 548     </dl>
 549     <p>
 550       <a href="#e.insets">Insets</a> elements are
 551       used to define the Insets for the current <a href="#e.style">style</a>.
 552       The insets will be set on any Components the
 553       <a href="#e.style">style</a> is associated with. The following
 554       example creates a style with insets of 1, 2, 3, 0.
 555     </p>
 556     <div class="example">
 557       <pre>
 558 &lt;style id="test">
 559   &lt;insets top="1" bottom="2" left="3"/>
 560 &lt;/style>
 561     </pre>
 562 </div>
 563 
 564     <h3>The bind element</h3>
 565 <div class="dtd-fragment">
 566 <pre class="dtd-fragment">
 567 &lt;!ELEMENT <a name="e.bind">bind</a> EMPTY>
 568 &lt;!ATTLIST bind
 569           <a href="#bind.style">style</a>        IDREF             #REQUIRED
 570           <a href="#bind.type">type</a>         (name|region)     #REQUIRED
 571           <a href="#bind.key">key</a>          CDATA             #REQUIRED
 572 &gt;
 573 </pre>
 574 </div>
 575     <p><em>Attribute definitions</em></p>
 576     <dl>
 577       <dt><a name="bind.style"><samp>style</samp></a></dt>
 578       <dd>Unique identifier of a previously defined style.</dd>
 579       <dt><a name="bind.type"><samp>type</samp></a></dt>
 580       <dd>One of name or region. For type name component.getName() is used,
 581         otherwise the name of the Region is used.</dd>
 582       <dt><a name="bind.key"><samp>key</samp></a></dt>
 583       <dd>Regular expression applied to the name of the Component, or the
 584         name of the Region, depending upon the value of
 585         <a href="#bind.type">type</a>.</dd>
 586     </dl>
 587     <p>
 588       <a href="#e.bind">Bind</a> elements specify which Regions a style
 589       is to be used for. The following example applies the
 590       <a href="#e.style">style</a> test to any Component whose name
 591       starts with <code>test</code>.
 592     </p>
 593     <div class="example">
 594       <pre>
 595 &lt;style id="test">
 596   &lt;insets top="1" bottom="2" left="3"/>
 597 &lt;/style>
 598 &lt;bind style="test" type="name" key="test.*"/>
 599     </pre>
 600 </div>
 601     <p>
 602       Numerous styles may apply to a region, in which case each of


 656     <p>
 657       For a button with the name test this is equivalent to:
 658     </p>
 659     <div class="example">
 660       <pre>
 661 &lt;style>
 662   &lt;font name="DIALOG" size="12" style="BOLD"/>
 663   &lt;insets top="1" bottom="2" left="3"/>
 664   &lt;state value="ENABLED">
 665     &lt;object id="customPainter" class="CustomPainter"/>
 666     &lt;painter idref="customPainter"/>
 667     &lt;font name="Lucida" size="12" style="ITALIC"/>
 668   &lt;/state>
 669 &lt;/style>
 670     </pre>
 671 </div>
 672 
 673     <h3>The painter element</h3>
 674 <div class="dtd-fragment">
 675 <pre class="dtd-fragment">
 676 &lt;!ELEMENT <a name="e.painter">painter</a> EMPTY>
 677 &lt;!ATTLIST painter
 678           <a href="#painter.idref">idref</a>                 IDREF          #IMPLIED
 679           <a href="#painter.method">method</a>                CDATA          #IMPLIED
 680           <a href="#painter.direction">direction</a>             (north|south|east|west|top|left|bottom|right|horizontal|vertical|horizontal_split|vertical_split)          #IMPLIED
 681 &gt;
 682 </pre>
 683 </div>
 684     <p><em>Attribute definitions</em></p>
 685     <dl>
 686       <dt><a name="painter.idref"><samp>idref</samp></a></dt>
 687       <dd>Identifier of a previously defined SynthPainter.</dd>
 688       <dt><a name="painter.method"><samp>method</samp></a></dt>
 689       <dd>Identifies the SynthPainter method this is to be used for. The name
 690         corresponds to the method name of a paint method in SynthPainter
 691         with the paint prefix dropped, the remainder is case
 692         insensitive (using the latin1 case folding rules).
 693         For example SynthPainter.paintButtonBackground is identified by
 694         'buttonBackground' or 'buttonbackground'. If this is
 695         not specified the painter is used for all methods that don't have a
 696         a specific painter for them.</dd>
 697       <dt><a name="painter.direction"><samp>direction</samp></a></dt>
 698       <dd>Identifies the direction, or orientation, this painter is to be
 699         used for. This is only useful for the SynthPainter methods that take
 700         a direction or orientation. If this is not specified the painter is
 701         used for all directions.</dd>
 702     </dl>
 703     <p>
 704       <a href="#e.painter">Painter</a> defines a SynthPainter for the current
 705       style or the state of the current style. The following example
 706       binds an instance of the class <code>MyPainter</code>
 707       which must be a <code>SynthPainter</code> to the style <code>test</code>.
 708     </p>
 709     <div class="example">
 710       <pre>
 711 &lt;style id="test">
 712   &lt;object class="MyPainter" id="MyPainter"/>
 713   &lt;painter idref="MyPainter"/>
 714 &lt;/style>
 715     </pre>
 716 </div>
 717     <p>


 770 
 771         <p>
 772           These three painters are identical for they use the same method and the
 773           same direction (all directions by default). Synth aggregates these painters
 774           to create a single one that will paint its children painters in the order
 775           of declaration. Hence, Synth will first paint the red picture, then the green
 776           one and finally the blue one. Each child painter can be seen as a layer of
 777           the aggregate painter.
 778         </p>
 779         <p>
 780           Painter aggregation, or multi-layering, is very useful to reuse elements.
 781           Imagine you want to use an highlight effect on buttons and on selected
 782           menu items. With painter aggregation, you just need to create a separate
 783           highlighting painter instead of having buttons and menu items painters
 784           handle it.
 785         </p>
 786 
 787     <h3>The imagePainter element</h3>
 788 <div class="dtd-fragment">
 789 <pre class="dtd-fragment">
 790 &lt;!ELEMENT <a name="e.imagePainter">imagePainter</a> EMPTY>
 791 &lt;!ATTLIST imagePainter
 792           <a href="#imagePainter.id">id</a>                    ID             #IMPLIED
 793           <a href="#imagePainter.method">method</a>                CDATA          #IMPLIED
 794           <a href="#imagePainter.direction">direction</a>             (north|south|east|west|top|left|bottom|right|horizontal|vertical|horizontal_split|vertical_split)          #IMPLIED
 795           <a href="#imagePainter.path">path</a>                  CDATA          #REQUIRED
 796           <a href="#imagePainter.sourceInsets">sourceInsets</a>          CDATA          #IMPLIED
 797           <a href="#imagePainter.destinationInsets">destinationInsets</a>     CDATA          #IMPLIED
 798           <a href="#imagePainter.painterCenter">paintCenter</a>           (true|false)   "true"
 799           <a href="#imagePainter.stretch">stretch</a>               (true|false)   "true"
 800           <a href="#imagePainter.center">center</a>                (true|false)   "false"
 801 &gt;
 802 </pre>
 803 </div>
 804     <p><em>Attribute definitions</em></p>
 805     <dl>
 806       <dt><a name="imagePainter.id"><samp>id</samp></a></dt>
 807       <dd>Unique identifier for the imagePainter.</dd>
 808       <dt><a name="imagePainter.method"><samp>method</samp></a></dt>
 809       <dd>Identifies the SynthPainter method this is to be used for. The name
 810         corresponds to the method name of a paint method in SynthPainter
 811         with the paint prefix dropped, the remainder is case
 812         insensitive (using the latin1 case folding rules).
 813         For example SynthPainter.paintButtonBackground is identified by
 814         'buttonBackground' or 'buttonbackground'. If this is
 815         not specified the painter is used for all methods that don't have a
 816         a specific painter for them.</dd>
 817       <dt><a name="imagePainter.direction"><samp>direction</samp></a></dt>
 818       <dd>Identifies the direction, or orientation, this image is to be
 819         used for. This is only useful for the SynthPainter methods that take
 820         a direction or orientation. If this is not specified the image is
 821         used for all directions.</dd>
 822       <dt><a name="imagePainter.path"><samp>path</samp></a></dt>
 823       <dd>Path to the image. Path to the image.  If SynthLookAndFeel.load is
 824     passed a Class this will use the Class method getResource (with with the
 825     Class suplied to the load method). If load is passed a URL this will use the
 826     URL constructor URL(context, path) to resolve the path.</dd>
 827       <dt><a name="imagePainter.sourceInsets"><samp>sourceInsets</samp></a></dt>
 828       <dd>Insets on the source image. This is top, left, bottom, right with
 829         each component separated by a space.</dd>
 830       <dt><a name="imagePainter.destinationInsets"><samp>destinationInsets</samp></a></dt>
 831       <dd>Insets of the destination image. This is top, left, bottom, right with
 832         each component separated by a space. If not specified the
 833         <a href="#imagePainter.sourceInsets">sourceInsets</a> are used.</dd>
 834       <dt><a name="imagePainter.painterCenter"><samp>paintCenter</samp></a></dt>
 835       <dd>Whether or not the center of the image should be drawn.</dd>
 836       <dt><a name="imagePainter.stretch"><samp>stretch</samp></a></dt>
 837       <dd>Whether or not the north, south, east and west components of the
 838         resulting image should be scaled or tiled.</dd>
 839       <dt><a name="imagePainter.center"><samp>center</samp></a></dt>
 840       <dd>Whether or not the image is centered.</dd>
 841     </dl>
 842     <p>
 843       The <a href="#e.imagePainter">ImagePainter</a> element defines a
 844       painter for the current style or state that will render using
 845       the specified image.  ImagePainter offers two distinct rendering
 846       modes.  The first mode is used to center an image in the space
 847       provided.  This is 
 848       commonly used in rendering decorations on top of a widget, for
 849       example, to specify an arrow for a scroll button use the center
 850       mode. The following example illustrates this:
 851     <div class="example">
 852       <pre>
 853 &lt;style id="test">
 854   &lt;imagePainter path="resources/myImage.png" center="true"/>
 855 &lt;/style>
 856     </pre>
 857 </div>
 858     <p>
 859       The second mode is used in scaling an image to fit in the


 866       ImagePainter that is using the image MyImage.png and insets of 2
 867       all the way around:
 868     </p>
 869     <div class="example">
 870       <pre>
 871 &lt;style id="test">
 872   &lt;imagePainter path="resources/myImage.png"
 873                 sourceInsets="2 2 2 2"/>
 874 &lt;/style>
 875     </pre>
 876 </div>
 877     <p>
 878       Refer to the description of the <a href="#e.painter">painter</a>
 879       element for details as to the precedence in choosing a painter and to
 880       understand how identical painters are handled.
 881         
 882 
 883     <h3>The imageIcon element</h3>
 884 <div class="dtd-fragment">
 885 <pre class="dtd-fragment">
 886 &lt;!ELEMENT <a name="e.imageIcon">imageIcon</a> EMPTY>
 887 &lt;!ATTLIST imageIcon
 888           <a href="#imageIcon.id">id</a>                    ID             #REQUIRED
 889           <a href="#imageIcon.path">path</a>                  CDATA          #REQUIRED
 890 &gt;
 891 </pre>
 892 </div>
 893     <p><em>Attribute definitions</em></p>
 894     <dl>
 895       <dt><a name="imageIcon.id"><samp>id</samp></a></dt>
 896       <dd>Unique identifier for the imageIcon.</dd>
 897       <dt><a name="imageIcon.path"><samp>path</samp></a></dt>
 898       <dd>Path to the image. This uses the Class method
 899         getResource to resolve the path, with the Class supplied to
 900         SynthLookAndFeel.load.</dd>
 901     </dl>
 902     <p>
 903       <a href="#e.imageIcon">ImageIcon</a> is used to assign an Icon
 904       implementation that is wrapping an Image to a unique identifier.
 905       This is typically used for properties that take an Icon. The following
 906       example binds an ImageIcon to the property RadioButton.icon.
 907     </p>
 908     <div class="example">
 909       <pre>
 910 &lt;style id="test">
 911   &lt;imageIcon id="icon" path="resources/myImage.png"/>
 912   &lt;property key="RadioButton.icon" value="icon"/>
 913 &lt;/style>
 914     </pre>
 915 </div>
 916 
 917    <h3>The opaque element</h3>
 918 <div class="dtd-fragment">
 919 <pre class="dtd-fragment">
 920 &lt;!ELEMENT <a name="e.opaque">opaque</a> EMPTY>
 921 &lt;!ATTLIST opaque
 922           <a href="#opaque.value">value</a>              (true|false)   "true"
 923 &gt;
 924 </pre>
 925 </div>
 926     <p><em>Attribute definitions</em></p>
 927     <dl>
 928       <dt><a name="opaque.value"><samp>id</samp></a></dt>
 929       <dd>Whether or not the style should be opaque, if unspecified the style
 930         is opaque.</dd>
 931     </dl>
 932     <p>
 933       The <a href="#e.opaque">opaque</a> element indicates whether or
 934       not any Components the style is associated with are to be made opaque.
 935       The painter will be asked to paint regardless of the opacity
 936       of the associated Component. The following example creates a style
 937       that is not opaque.
 938     </p>
 939     <div class="example">
 940       <pre>
 941 &lt;style id="test">
 942   &lt;opaque value="FALSE">
 943   &lt;painter idref="painter"/>
 944 &lt;/style>
 945     </pre>
 946 </div>
 947 
 948     <h3><a name="ee.beansPersistance">The beansPersistance entity</a></h3>
 949     <p>
 950       Beans persistance can be used to embed any Object. This is
 951       typically used for embedding your own Painters, but can be used
 952       for other arbritrary objects as well. Refer to <a
 953                                                         href="http://www.oracle.com/technetwork/java/persistence3-139471.html">http://www.oracle.com/technetwork/java/persistence3-139471.html</a> for details on beans persistance.


 954 
 955 
 956     <h3>Backing Style</h3>
 957     <p>
 958       In creating a Synth file it's good practice to create a backing
 959       style that is used by all components.  This will make sure that
 960       any components that do not match a specific style will have
 961       a default font, foreground, background and opacity. The
 962       following example illustrates this:
 963     <div class="example">
 964       <pre>
 965 &lt;synth>
 966   &lt;style id="backingStyle">
 967     &lt;opaque value="true"/>
 968     &lt;font name="Dialog" size="12"/>
 969     &lt;state>
 970       &lt;color value="BLACK" type="BACKGROUND"/>
 971       &lt;color value="WHITE" type="FOREGROUND"/>
 972     &lt;/state>
 973   &lt;/style>
   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4   <meta charset="utf-8"/>
   5   <title>Synth File Format</title>
   6 <!--
   7  Copyright (c) 1998, 2017, Oracle and/or its affiliates. All rights reserved.
   8  DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
   9 
  10  This code is free software; you can redistribute it and/or modify it
  11  under the terms of the GNU General Public License version 2 only, as
  12  published by the Free Software Foundation.  Oracle designates this
  13  particular file as subject to the "Classpath" exception as provided
  14  by Oracle in the LICENSE file that accompanied this code.
  15 
  16  This code is distributed in the hope that it will be useful, but WITHOUT
  17  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
  18  FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
  19  version 2 for more details (a copy is included in the LICENSE file that
  20  accompanied this code).
  21 
  22  You should have received a copy of the GNU General Public License version
  23  2 along with this work; if not, write to the Free Software Foundation,
  24  Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
  25 
  26  Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
  27  or visit www.oracle.com if you need additional information or have any
  28  questions.
  29 -->
  30 
  31   <style type="text/css">
  32 div.dtd-fragment {
  33     width: 100%;
  34     border: none;
  35     background-color: #eee;
  36 }
  37 pre.dtd-fragment {
  38     margin-left: 0;
  39 }
  40 div.example {
  41     width: 100%;
  42     color: maroon;
  43 }
  44   </style>
  45   </head>
  46 
  47   <body>
  48     <h2><a id="file">File Format</a></h2>
  49     <p>
  50       Synth's file format (<a href="synth.dtd">dtd</a>)
  51       allows for specifying all the pieces
  52       necessary to create your own look and feel. A synth file is
  53       loaded by way of the <A
  54         HREF="../../../../../javax/swing/plaf/synth/SynthLookAndFeel.html#load(java.io.InputStream,%20java.lang.Class)">
  55       SynthLookAndFeel.load(InputStream, Class)</a> or
  56       <a href="../../../../../javax/swing/plaf/synth/SynthLookAndFeel.html#load(java.net.URL)">
  57         SynthLookAndFeel.load(URL)</a> methods.
  58       The following example uses the <code>load</code> method to configure
  59       a <code>SynthLookAndFeel</code> and sets it as the current look
  60       and feel:
  61     </p>
  62     <div class="example">
  63       <pre>
  64   SynthLookAndFeel laf = new SynthLookAndFeel();
  65   laf.load(MyClass.class.getResourceAsStream("laf.xml"), MyClass.class);
  66   UIManager.setLookAndFeel(laf);
  67       </pre>
  68     </div>
  69     <p>
  70       This example loads the look and feel from an input stream, using
  71       the specified class as the resource base to resolve paths.
  72       It is also possible to load a look and feel from an arbitrary URL
  73       as in the following example.
  74     </p>
  75     <div class="example">
  76       <pre>
  77   SynthLookAndFeel laf = new SynthLookAndFeel();
  78   laf.load(new URL("file:///C:/java/synth/laf/laf.xml"));
  79   UIManager.setLookAndFeel(laf);
  80       </pre>
  81     </div>
  82     <p>
  83       The method <a
  84         href="../../../../../javax/swing/plaf/synth/SynthLookAndFeel.html#load(java.net.URL)">
  85       SynthLookAndFeel.load(URL)</a> can be used, for instance, to load a look
  86       and feel from any of the following:
  87     </p>
  88     <ul>
  89       <li>File, e.g. <code>file:///C:/java/synth/laf/laf.xml</code></li>
  90       <li>Web server, e.g. <code>http://host/laf.xml</code></li>
  91       <li>JAR file, e.g.
  92         <code>jar:file:///C:/synth-laf.jar!/laf.xml</code></li>
  93       <li>Remote JAR file, e.g.
  94         <code>jar:http://host/synth-laf.jar!/laf.xml</code></li>
  95     </ul>
  96     <p>
  97       While the DTD for synth is specified, the parser is not validating.
  98       Parsing will fail only if a necessary attribute is not
  99       specified, or of the wrong type.
 100 
 101     <h3>The synth element</h3>
 102 <div class="dtd-fragment">
 103 <pre class="dtd-fragment">
 104 &lt;!ELEMENT <a id="e.synth">synth</a> ((<a href="#ee.beansPersistance">%beansPersistance;</a>) | <a href="#e.style">style</a> | <a href="#e.bind">bind</a> | <a href="#e.font">font</a> | <a href="#e.color">color</a> |
 105                  <a href="#e.imagePainter">imagePainter</a> | <a href="#e.imageIcon">imageIcon</a> | <a href="#e.defaultsProperty">defaultsProperty</a>)*>
 106 &lt;!ATTLIST synth
 107           <a href="#synth.version">version</a>              CDATA          #IMPLIED
 108 &gt;
 109 </pre>
 110 </div>
 111     <p><em>Attribute definitions</em></p>
 112     <dl><dt><a id="synth.version"><samp>version</samp></a></dt>
 113         <dd>File format version, should be 1</dd>
 114     </dl>
 115     <p>
 116       The <a href="#e.synth">synth</a> element contains all the other
 117       elements that make up a SynthLookAndFeel definition.
 118     </p>
 119 
 120 
 121     <h3>The style element</h3>
 122 <div class="dtd-fragment">
 123 <pre class="dtd-fragment">
 124 &lt;!ELEMENT <a id="e.style">style</a> (<a href="#e.property">property</a> | <a href="#e.defaultsProperty">defaultsProperty</a> | <a href="#e.state">state</a> | <a href="#e.font">font</a> | <a href="#e.graphicsUtils">graphicsUtils</a> |
 125                  <a href="#e.insets">insets</a> | <a href="#e.painter">painter</a> | <a href="#e.imagePainter">imagePainter</a> | <a href="#e.opaque">opaque</a> | (<a href="#ee.beansPersistance">%beansPersistance;</a>) |
 126                  <a href="#e.imageIcon">imageIcon</a>)*>
 127 &lt;!ATTLIST style
 128           <a href="#style.id">id</a>              ID          #IMPLIED
 129           <a href="#style.clone">clone</a>           IDREF       #IMPLIED
 130 &gt;
 131 </pre>
 132 </div>
 133     <p><em>Attribute definitions</em></p>
 134     <dl>
 135       <dt><a id="style.id"><samp>id</samp></a></dt>
 136       <dd>Unique identifier for the style.</dd>
 137       <dt><a id="style.clone"><samp>clone</samp></a></dt>
 138       <dd>Identifier of a previously defined style that is copied
 139             and used for the new style. This provides a convenient
 140             mechanism for overriding only a portion of an existing
 141             style.</dd>
 142     </dl>
 143     <p>
 144       A style element corresponds to a
 145       <code>SynthStyle</code>, with the child elements specifying
 146       properties that apply to all states or state elements which
 147       contain properties specific to a particular state. The following
 148       example creates an opaque style with the id <code>button</code>,
 149       insets of 4, 4, 4, 4 and a font of Dialog 12.
 150     </p>
 151     <div class="example">
 152       <pre>
 153 &lt;style id="button">
 154   &lt;opaque value="true"/>
 155   &lt;insets top="4" left="4" right="4" bottom="4"/>
 156   &lt;font name="Dialog" size="12"/>
 157 &lt;/style>
 158       </pre>
 159     </div>
 160     <p>
 161       The following example creates a new style with an id of
 162       <code>clonedButton</code> that is a copy of the
 163       style with id <code>button</code> and has a font of Dialog,
 164       14. The resulting style will be opaque, have insets of 4, 4, 4,
 165       4 and a font of Dialog 14.
 166     </p>
 167     <div class="example">
 168       <pre>
 169 &lt;style id="clonedButton" clone="button">
 170   &lt;font name="Dialog" size="14"/>
 171 &lt;/style>
 172       </pre>
 173     </div>
 174 
 175     <h3>The state element</h3>
 176 <div class="dtd-fragment">
 177 <pre class="dtd-fragment">
 178 &lt;!ELEMENT <a id="e.state">state</a> (<a href="#e.color">color</a> | <a href="#e.font">font</a> | <a href="#e.painter">painter</a> | <a href="#e.imagePainter">imagePainter</a> | (<a href="#ee.beansPersistance">%beansPersistance;</a>) |
 179                  <a href="#e.property">property</a> |  <a href="#e.imageIcon">imageIcon</a>)*>
 180 &lt;!ATTLIST state
 181           <a href="#state.id">id</a>              ID             #IMPLIED
 182           <a href="#state.clone">clone</a>           IDREF          #IMPLIED
 183           <a href="#state.value">value</a>           CDATA          #IMPLIED
 184           <a href="#state.idref">idref</a>           IDREF          #IMPLIED
 185 &gt;
 186 </pre>
 187 </div>
 188     <p><em>Attribute definitions</em></p>
 189     <dl>
 190       <dt><a id="state.id"><samp>id</samp></a></dt>
 191       <dd>Unique identifier for the state.</dd>
 192       <dt><a id="state.clone"><samp>clone</samp></a></dt>
 193       <dd>Identifier of a previously defined state that is copied
 194         and used for the new state.</dd>
 195       <dt><a id="state.value"><samp>value</samp></a></dt>
 196       <dd>Identifies the state of the Component the properties are to apply
 197         to. This is a list of: ENABLED,
 198         MOUSE_OVER, PRESSED, DISABLED, FOCUSED, SELECTED or
 199         DEFAULT. Multiple states should
 200         be separated by 'and.' If you do not specify a value, the
 201         contents apply to all states.
 202       <dt><a id="state.idref"><samp>idref</samp></a></dt>
 203       <dd>Indicates this state should be the same as a previously
 204             defined state. This is useful for multiple styles that
 205             wish to share the same visual properties for a particular
 206             state.
 207       </dd>
 208     </dl>
 209     <p>
 210       The <a href="#e.state">state</a> element specifies the visual
 211       properties that are to be used for
 212       a particular state of a component. For example, you could
 213       specify the background color when the Component is enabled should look
 214       different than the background color when the component is
 215       disabled. Not all Components support all states. For example, a
 216       <code>Panel</code> only supports the states ENABLED and DISABLED.
 217     </p>
 218     <p>
 219       The following example creates a state with a red background that
 220       will be used when the component is in an a selected and pressed state:
 221     </p>
 222     <div class="example">


 234       <pre>
 235 &lt;state value="SELECTED and PRESSED" id="one">
 236   &lt;color value="RED" type="BACKGROUND"/>
 237 &lt;/state>
 238 &lt;state value="SELECTED" id="two">
 239   &lt;color value="RED" type="BACKGROUND"/>
 240 &lt;/state>
 241     </pre>
 242 </div>
 243     <p>
 244       State <code>one</code> is used when the Component is SELECTED
 245       and PRESSED, and state <code>two</code> when the Component is
 246       SELECTED. If the state of the Component
 247       contains at least SELECTED and PRESSED, state <code>one</code> will be
 248       chosen, otherwise if the state is SELECTED, but not does not
 249       contain PRESSED, state <code>two</code> will be used.
 250 
 251     <h3>The font element</h3>
 252 <div class="dtd-fragment">
 253 <pre class="dtd-fragment">
 254 &lt;!ELEMENT <a id="e.font">font</a> EMPTY>
 255 &lt;!ATTLIST font
 256           <a href="#font.id">id</a>              ID             #IMPLIED
 257           <a href="#font.idref">clone</a>           IDREF          #IMPLIED
 258           <a href="#font.name">name</a>            CDATA          #IMPLIED
 259           <a href="#font.style">style</a>           CDATA          #IMPLIED
 260           <a href="#font.size">size</a>            CDATA          #IMPLIED
 261 &gt;
 262 </pre>
 263 </div>
 264     <p><em>Attribute definitions</em></p>
 265     <dl>
 266       <dt><a id="font.id"><samp>id</samp></a></dt>
 267       <dd>Unique identifier for the Font.</dd>
 268       <dt><a id="font.idref"><samp>idref</samp></a></dt>
 269       <dd>Identifier of a previously defined font.</dd>
 270       <dt><a id="font.name"><samp>name</samp></a></dt>
 271       <dd>Name of the font.
 272       <dt><a id="font.style"><samp>style</samp></a></dt>
 273       <dd>Style of the font. This is a list of the styles defined by
 274         Font separated by spaces: PLAIN, BOLD or ITALIC. If
 275         unspecified PLAIN is used.
 276       </dd>
 277       <dt><a id="font.size"><samp>size</samp></a></dt>
 278       <dd>Size of the font, in pixels</dd>
 279     </dl>
 280     <p>
 281       Defines the font for the current <a href="#e.state">state</a>,
 282       or <a href="#e.style">style</a>. You must
 283       specify either an <a href="#font.idref">idref</a> or a
 284       <a href="#font.name">name</a> and <a href="#font.size">size</a>.
 285     </p>
 286     <p>
 287       The following example creates a style with a Font of
 288       Dialog 12 Bold.
 289     </p>
 290     <div class="example">
 291       <pre>
 292 &lt;style id="test">
 293   &lt;font name="DIALOG" size="12" style="BOLD"/>
 294 &lt;/style>
 295     </pre>
 296 </div>
 297     <p>


 303       <pre>
 304 &lt;style id="test">
 305   &lt;font name="DIALOG" size="12" style="ITALIC"/>
 306   &lt;state value="ENABLED">
 307     &lt;font name="DIALOG" size="12" style="BOLD"/>
 308   &lt;/state>
 309 &lt;/style>
 310     </pre>
 311 </div>
 312     <p>
 313       While you can supply a different font per state, in general
 314       widgets will NOT revalidate when the state changes, so that you
 315       may run into sizing problems if you try to use a font with a
 316       significantly different size for different states.
 317     </p>
 318 
 319 
 320     <h3>The color element</h3>
 321 <div class="dtd-fragment">
 322 <pre class="dtd-fragment">
 323 &lt;!ELEMENT <a id="e.color">color</a> EMPTY>
 324 &lt;!ATTLIST color
 325           <a href="#color.id">id</a>              ID             #IMPLIED
 326           <a href="#color.idref">idref</a>           IDREF          #IMPLIED
 327           <a href="#color.type">type</a>            CDATA          #IMPLIED
 328           <a href="#color.value">value</a>           CDATA          #IMPLIED
 329 &gt;
 330 </pre>
 331 </div>
 332     <p><em>Attribute definitions</em></p>
 333     <dl>
 334       <dt><a id="color.id"><samp>id</samp></a></dt>
 335       <dd>Unique identifier for the color.</dd>
 336       <dt><a id="color.idref"><samp>idref</samp></a></dt>
 337       <dd>Identifier of a previously defined color.</dd>
 338       <dt><a id="color.type"><samp>type</samp></a></dt>
 339       <dd>Describes where this color should be used. This is
 340             typically one of the constants defined by ColorType:
 341             FOREGROUND, BACKGROUND, TEXT_FOREGROUND, TEXT_BACKGROUND
 342             or FOCUS. Alternatively you can specify the complete path
 343             to a class and field, for example
 344             javax.swing.plaf.synth.ColorType.FOREGROUND, this
 345             is useful for subclasses of synth that define additional
 346             color types.
 347       </dd>
 348       <dt><a id="color.value"><samp>value</samp></a></dt>
 349       <dd>
 350         Value for the color. This accepts the following forms.
 351         <ul>
 352           <li>The name of a constant in the <code>Color</code> class,
 353             for example <code> RED</code>.
 354           <li>A hex value of the form <code>#RRGGBB</code> where
 355             <code>RR</code> gives the red component, <code>GG</code>
 356             the green component and <code>BB</code> the blue
 357             component. You need not specify all color components. For
 358             example, <code>#123</code> is equivalent to <code>#000123</code>.
 359           <li>A hex value of the form <code>#ARRGGBB</code> or
 360             <code>#AARRGGBB</code>. This is useful for alpha values
 361             other than <code>0xFF</code>. The form
 362             <code>#ARRGGBB</code> is equivalent to
 363             <code>#0ARRGGBB</code>.
 364         </ul>
 365       </dd>
 366     </dl>
 367     <p>
 368       <a href="#e.color">Color</a> defines a color and what portion of


 380     <p>
 381       The following example will have a red background when the
 382       Component is enabled, otherwise blue.
 383     </p>
 384     <div class="example">
 385       <pre>
 386 &lt;style id="test">
 387   &lt;state value="ENABLED">
 388     &lt;color value="RED" type="BACKGROUND"/>
 389   &lt;/state>
 390   &lt;state>
 391     &lt;color value="#00FF00" type="BACKGROUND"/>
 392   &lt;/state>
 393 &lt;/style>
 394     </pre>
 395 </div>
 396 
 397     <h3>The property element</h3>
 398 <div class="dtd-fragment">
 399 <pre class="dtd-fragment">
 400 &lt;!ELEMENT <a id="e.property">property</a> EMPTY>
 401 &lt;!ATTLIST property
 402           <a href="#property.key">key</a>               CDATA                                             #REQUIRED
 403           <a href="#property.type">type</a>              (idref|boolean|dimension|insets|integer|string)          "idref"
 404           <a href="#property.value">value</a>             CDATA                                             #REQUIRED
 405 &gt;
 406 </pre>
 407 </div>
 408     <p><em>Attribute definitions</em></p>
 409     <dl>
 410       <dt><a id="property.key"><samp>key</samp></a></dt>
 411       <dd>Name of the property.</dd>
 412       <dt><a id="property.type"><samp>type</samp></a></dt>
 413       <dd>Indicates the type of the property.</dd>
 414       <dt><a id="property.value"><samp>value</samp></a></dt>
 415       <dd>Value for the property. For boolean properties this will be
 416         be true or false, for integer properties this will be a
 417         valid integer, for dimensions this will be the width and
 418         height separated by a space, for insets properties this will
 419         be the top, left, bottom and right separated by a space and
 420         for idref properties this will be the unique id of a
 421         previously defined object.</dd>
 422     </dl>
 423     <p>
 424       <a href="#e.property">Property</a> elements are used to add key value pairs to a
 425       <code>SynthStyle</code> that can be accessed by way of the
 426       <code>get</code> method. Many <code>Component</code>s use the
 427       key value pairs for configuring their visual appearance. Refer to
 428       <a href="componentProperties.html">property table</a> for a list of the
 429       properties each <code>Component</code> supports. The following
 430       creates the properties
 431       <code>ScrollBar.allowsAbsolutePositioning</code>,
 432       <code>OptionPane.minimumSize</code>,
 433       <code>ScrollPane.viewportBorderInsets</code>,
 434       <code>Tree.rowHeight</code> and <code>foreground</code> with the


 452       You can also specify properties that are to apply to specific
 453       states.  Whether or not the property is accessed for each state
 454       depends upon how the property is used.  For example, the
 455       following specifies a default icon and an icon to use while the
 456       mouse is over the component.
 457     </p>
 458     <div class="example">
 459       <pre>
 460 &lt;style id="test">
 461   &lt;imageIcon id="defaultIcon" path="resources/myImage.png"/>
 462   &lt;property key="RadioButton.icon" value="defaultIcon"/>
 463   &lt;state value="MOUSE_OVER">
 464     &lt;imageIcon id="mouseOverIcon" path="resources/myMouseOverImage.png"/>
 465     &lt;property key="RadioButton.icon" value="mouseOverIcon"/>
 466   &lt;/state>
 467 &lt;/style>
 468     </pre>
 469 </div>
 470 <div class="dtd-fragment">
 471 <pre class="dtd-fragment">
 472 &lt;!ELEMENT <a id="e.defaultsProperty">defaultsProperty</a> EMPTY>
 473 &lt;!ATTLIST defaultsProperty
 474           <a href="#defaultsProperty.key">key</a>               CDATA                                             #REQUIRED
 475           <a href="#defaultsProperty.type">type</a>              (idref|boolean|dimension|insets|integer|string)   "idref"
 476           <a href="#defaultsProperty.value">value</a>             CDATA                                             #REQUIRED
 477 &gt;
 478 </pre>
 479 </div>
 480     <p><em>Attribute definitions</em></p>
 481     <dl>
 482       <dt><a id="defaultsProperty.key"><samp>key</samp></a></dt>
 483       <dd>Name of the property.</dd>
 484       <dt><a id="defaultsProperty.type"><samp>type</samp></a></dt>
 485       <dd>Indicates the type of the property.</dd>
 486       <dt><a id="defaultsProperty.value"><samp>value</samp></a></dt>
 487       <dd>Value for the property. For boolean properties this will be
 488         true or false, for integer properties this will be a
 489         valid integer, for dimensions this will be the width and
 490         height separated by a space, for insets properties this will
 491         be the top, left, bottom and right separated by a space and
 492         for idref properties this will be the unique id of a
 493         previously defined object.</dd>
 494     </dl>
 495     <p>
 496       <a href="#e.defaultsProperty">DefaultsProperty</a> elements are
 497       used to define properties that will be placed in the
 498       <code>UIDefaults</code> table that <code>SynthLookAndFeel</code>
 499       supplies to the <code>UIManager</code>. The following assigns the
 500       the Color red to the value Table.focusCellForeground.
 501     </p>
 502     <div class="example">
 503       <pre>
 504 &lt;style id="test">
 505   &lt;object class="javax.swing.plaf.ColorUIResource" id="color">
 506     &lt;int>255&lt;/int>
 507     &lt;int>0&lt;/int>
 508     &lt;int>0&lt;/int>
 509   &lt;/object>
 510   &lt;defaultsProperty key="Table.focusCellForeground" type="idref" value="color"/>
 511 &lt;/style>
 512     </pre>
 513 </div>
 514     <p>
 515       This value could then be asked by way of
 516       <code>UIManager.get("Table.focusCellForeground")</code>.
 517     </p>
 518 
 519     <h3>The graphicsUtils element</h3>
 520 <div class="dtd-fragment">
 521 <pre class="dtd-fragment">
 522 &lt;!ELEMENT <a id="e.graphicsUtils">graphicsUtils</a> EMPTY>
 523 &lt;!ATTLIST graphicsUtils
 524           <a href="#graphicsUtils.idref">idref</a>           IDREF             #REQUIRED
 525 &gt;
 526 </pre>
 527 </div>
 528     <p><em>Attribute definitions</em></p>
 529     <dl>
 530       <dt><a id="graphicsUtils.idref"><samp>idref</samp></a></dt>
 531       <dd>Identifer of a previously defined SynthGraphicsUtils object
 532         that is to be used as the SynthGraphicsUtils for the current
 533         <a href="#e.style">style</a>.</dd>
 534     </dl>
 535     <p>
 536       <a href="#e.graphicsUtils">GraphicsUtils</a> elements are
 537       used to define the SynthGraphicsUtils that the current
 538       <a href="#e.style">style</a> will use. The following example
 539       creates a style with an instance of CustomGraphicsUtils for the
 540       SynthGraphicsUtils.
 541     </p>
 542     <div class="example">
 543       <pre>
 544 &lt;style id="test">
 545   &lt;object class="CustomGraphicsUtils" id="graphics"/>
 546   &lt;graphicsUtils idref="graphics"/>
 547 &lt;/style>
 548     </pre>
 549 </div>
 550 
 551     <h3>The insets element</h3>
 552 <div class="dtd-fragment">
 553 <pre class="dtd-fragment">
 554 &lt;!ELEMENT <a id="e.insets">insets</a> EMPTY>
 555 &lt;!ATTLIST insets
 556           <a href="#insets.id">id</a>           ID             #IMPLIED
 557           <a href="#insets.idref">idref</a>        IDREF          #IMPLIED
 558           <a href="#insets.top">top</a>          CDATA          #IMPLIED
 559           <a href="#insets.bottom">bottom</a>       CDATA          #IMPLIED
 560           <a href="#insets.left">left</a>         CDATA          #IMPLIED
 561           <a href="#insets.right">right</a>        CDATA          #IMPLIED
 562 &gt;
 563 </pre>
 564 </div>
 565     <p><em>Attribute definitions</em></p>
 566     <dl>
 567       <dt><a id="insets.id"><samp>id</samp></a></dt>
 568       <dd>Unique identifier for the Insets.</dd>
 569       <dt><a id="insets.idref"><samp>idref</samp></a></dt>
 570       <dd>Identifier of a previously defined Insets.</dd>
 571       <dt><a id="insets.top"><samp>top</samp></a></dt>
 572       <dd>Top component of the Insets.</dd>
 573       <dt><a id="insets.bottom"><samp>bottom</samp></a></dt>
 574       <dd>Bottom component of the Insets.</dd>
 575       <dt><a id="insets.left"><samp>left</samp></a></dt>
 576       <dd>Left component of the Insets.</dd>
 577       <dt><a id="insets.right"><samp>right</samp></a></dt>
 578       <dd>Right component of the Insets.</dd>
 579     </dl>
 580     <p>
 581       <a href="#e.insets">Insets</a> elements are
 582       used to define the Insets for the current <a href="#e.style">style</a>.
 583       The insets will be set on any Components the
 584       <a href="#e.style">style</a> is associated with. The following
 585       example creates a style with insets of 1, 2, 3, 0.
 586     </p>
 587     <div class="example">
 588       <pre>
 589 &lt;style id="test">
 590   &lt;insets top="1" bottom="2" left="3"/>
 591 &lt;/style>
 592     </pre>
 593 </div>
 594 
 595     <h3>The bind element</h3>
 596 <div class="dtd-fragment">
 597 <pre class="dtd-fragment">
 598 &lt;!ELEMENT <a id="e.bind">bind</a> EMPTY>
 599 &lt;!ATTLIST bind
 600           <a href="#bind.style">style</a>        IDREF             #REQUIRED
 601           <a href="#bind.type">type</a>         (name|region)     #REQUIRED
 602           <a href="#bind.key">key</a>          CDATA             #REQUIRED
 603 &gt;
 604 </pre>
 605 </div>
 606     <p><em>Attribute definitions</em></p>
 607     <dl>
 608       <dt><a id="bind.style"><samp>style</samp></a></dt>
 609       <dd>Unique identifier of a previously defined style.</dd>
 610       <dt><a id="bind.type"><samp>type</samp></a></dt>
 611       <dd>One of name or region. For type name component.getName() is used,
 612         otherwise the name of the Region is used.</dd>
 613       <dt><a id="bind.key"><samp>key</samp></a></dt>
 614       <dd>Regular expression applied to the name of the Component, or the
 615         name of the Region, depending upon the value of
 616         <a href="#bind.type">type</a>.</dd>
 617     </dl>
 618     <p>
 619       <a href="#e.bind">Bind</a> elements specify which Regions a style
 620       is to be used for. The following example applies the
 621       <a href="#e.style">style</a> test to any Component whose name
 622       starts with <code>test</code>.
 623     </p>
 624     <div class="example">
 625       <pre>
 626 &lt;style id="test">
 627   &lt;insets top="1" bottom="2" left="3"/>
 628 &lt;/style>
 629 &lt;bind style="test" type="name" key="test.*"/>
 630     </pre>
 631 </div>
 632     <p>
 633       Numerous styles may apply to a region, in which case each of


 687     <p>
 688       For a button with the name test this is equivalent to:
 689     </p>
 690     <div class="example">
 691       <pre>
 692 &lt;style>
 693   &lt;font name="DIALOG" size="12" style="BOLD"/>
 694   &lt;insets top="1" bottom="2" left="3"/>
 695   &lt;state value="ENABLED">
 696     &lt;object id="customPainter" class="CustomPainter"/>
 697     &lt;painter idref="customPainter"/>
 698     &lt;font name="Lucida" size="12" style="ITALIC"/>
 699   &lt;/state>
 700 &lt;/style>
 701     </pre>
 702 </div>
 703 
 704     <h3>The painter element</h3>
 705 <div class="dtd-fragment">
 706 <pre class="dtd-fragment">
 707 &lt;!ELEMENT <a id="e.painter">painter</a> EMPTY>
 708 &lt;!ATTLIST painter
 709           <a href="#painter.idref">idref</a>                 IDREF          #IMPLIED
 710           <a href="#painter.method">method</a>                CDATA          #IMPLIED
 711           <a href="#painter.direction">direction</a>             (north|south|east|west|top|left|bottom|right|horizontal|vertical|horizontal_split|vertical_split)          #IMPLIED
 712 &gt;
 713 </pre>
 714 </div>
 715     <p><em>Attribute definitions</em></p>
 716     <dl>
 717       <dt><a id="painter.idref"><samp>idref</samp></a></dt>
 718       <dd>Identifier of a previously defined SynthPainter.</dd>
 719       <dt><a id="painter.method"><samp>method</samp></a></dt>
 720       <dd>Identifies the SynthPainter method this is to be used for. The name
 721         corresponds to the method name of a paint method in SynthPainter
 722         with the paint prefix dropped, the remainder is case
 723         insensitive (using the latin1 case folding rules).
 724         For example SynthPainter.paintButtonBackground is identified by
 725         'buttonBackground' or 'buttonbackground'. If this is
 726         not specified the painter is used for all methods that don't have a
 727         a specific painter for them.</dd>
 728       <dt><a id="painter.direction"><samp>direction</samp></a></dt>
 729       <dd>Identifies the direction, or orientation, this painter is to be
 730         used for. This is only useful for the SynthPainter methods that take
 731         a direction or orientation. If this is not specified the painter is
 732         used for all directions.</dd>
 733     </dl>
 734     <p>
 735       <a href="#e.painter">Painter</a> defines a SynthPainter for the current
 736       style or the state of the current style. The following example
 737       binds an instance of the class <code>MyPainter</code>
 738       which must be a <code>SynthPainter</code> to the style <code>test</code>.
 739     </p>
 740     <div class="example">
 741       <pre>
 742 &lt;style id="test">
 743   &lt;object class="MyPainter" id="MyPainter"/>
 744   &lt;painter idref="MyPainter"/>
 745 &lt;/style>
 746     </pre>
 747 </div>
 748     <p>


 801 
 802         <p>
 803           These three painters are identical for they use the same method and the
 804           same direction (all directions by default). Synth aggregates these painters
 805           to create a single one that will paint its children painters in the order
 806           of declaration. Hence, Synth will first paint the red picture, then the green
 807           one and finally the blue one. Each child painter can be seen as a layer of
 808           the aggregate painter.
 809         </p>
 810         <p>
 811           Painter aggregation, or multi-layering, is very useful to reuse elements.
 812           Imagine you want to use an highlight effect on buttons and on selected
 813           menu items. With painter aggregation, you just need to create a separate
 814           highlighting painter instead of having buttons and menu items painters
 815           handle it.
 816         </p>
 817 
 818     <h3>The imagePainter element</h3>
 819 <div class="dtd-fragment">
 820 <pre class="dtd-fragment">
 821 &lt;!ELEMENT <a id="e.imagePainter">imagePainter</a> EMPTY>
 822 &lt;!ATTLIST imagePainter
 823           <a href="#imagePainter.id">id</a>                    ID             #IMPLIED
 824           <a href="#imagePainter.method">method</a>                CDATA          #IMPLIED
 825           <a href="#imagePainter.direction">direction</a>             (north|south|east|west|top|left|bottom|right|horizontal|vertical|horizontal_split|vertical_split)          #IMPLIED
 826           <a href="#imagePainter.path">path</a>                  CDATA          #REQUIRED
 827           <a href="#imagePainter.sourceInsets">sourceInsets</a>          CDATA          #IMPLIED
 828           <a href="#imagePainter.destinationInsets">destinationInsets</a>     CDATA          #IMPLIED
 829           <a href="#imagePainter.painterCenter">paintCenter</a>           (true|false)   "true"
 830           <a href="#imagePainter.stretch">stretch</a>               (true|false)   "true"
 831           <a href="#imagePainter.center">center</a>                (true|false)   "false"
 832 &gt;
 833 </pre>
 834 </div>
 835     <p><em>Attribute definitions</em></p>
 836     <dl>
 837       <dt><a id="imagePainter.id"><samp>id</samp></a></dt>
 838       <dd>Unique identifier for the imagePainter.</dd>
 839       <dt><a id="imagePainter.method"><samp>method</samp></a></dt>
 840       <dd>Identifies the SynthPainter method this is to be used for. The name
 841         corresponds to the method name of a paint method in SynthPainter
 842         with the paint prefix dropped, the remainder is case
 843         insensitive (using the latin1 case folding rules).
 844         For example SynthPainter.paintButtonBackground is identified by
 845         'buttonBackground' or 'buttonbackground'. If this is
 846         not specified the painter is used for all methods that don't have a
 847         a specific painter for them.</dd>
 848       <dt><a id="imagePainter.direction"><samp>direction</samp></a></dt>
 849       <dd>Identifies the direction, or orientation, this image is to be
 850         used for. This is only useful for the SynthPainter methods that take
 851         a direction or orientation. If this is not specified the image is
 852         used for all directions.</dd>
 853       <dt><a id="imagePainter.path"><samp>path</samp></a></dt>
 854       <dd>Path to the image. Path to the image.  If SynthLookAndFeel.load is
 855     passed a Class this will use the Class method getResource (with with the
 856     Class suplied to the load method). If load is passed a URL this will use the
 857     URL constructor URL(context, path) to resolve the path.</dd>
 858       <dt><a id="imagePainter.sourceInsets"><samp>sourceInsets</samp></a></dt>
 859       <dd>Insets on the source image. This is top, left, bottom, right with
 860         each component separated by a space.</dd>
 861       <dt><a id="imagePainter.destinationInsets"><samp>destinationInsets</samp></a></dt>
 862       <dd>Insets of the destination image. This is top, left, bottom, right with
 863         each component separated by a space. If not specified the
 864         <a href="#imagePainter.sourceInsets">sourceInsets</a> are used.</dd>
 865       <dt><a id="imagePainter.painterCenter"><samp>paintCenter</samp></a></dt>
 866       <dd>Whether or not the center of the image should be drawn.</dd>
 867       <dt><a id="imagePainter.stretch"><samp>stretch</samp></a></dt>
 868       <dd>Whether or not the north, south, east and west components of the
 869         resulting image should be scaled or tiled.</dd>
 870       <dt><a id="imagePainter.center"><samp>center</samp></a></dt>
 871       <dd>Whether or not the image is centered.</dd>
 872     </dl>
 873     <p>
 874       The <a href="#e.imagePainter">ImagePainter</a> element defines a
 875       painter for the current style or state that will render using
 876       the specified image.  ImagePainter offers two distinct rendering
 877       modes.  The first mode is used to center an image in the space
 878       provided.  This is
 879       commonly used in rendering decorations on top of a widget, for
 880       example, to specify an arrow for a scroll button use the center
 881       mode. The following example illustrates this:
 882     <div class="example">
 883       <pre>
 884 &lt;style id="test">
 885   &lt;imagePainter path="resources/myImage.png" center="true"/>
 886 &lt;/style>
 887     </pre>
 888 </div>
 889     <p>
 890       The second mode is used in scaling an image to fit in the


 897       ImagePainter that is using the image MyImage.png and insets of 2
 898       all the way around:
 899     </p>
 900     <div class="example">
 901       <pre>
 902 &lt;style id="test">
 903   &lt;imagePainter path="resources/myImage.png"
 904                 sourceInsets="2 2 2 2"/>
 905 &lt;/style>
 906     </pre>
 907 </div>
 908     <p>
 909       Refer to the description of the <a href="#e.painter">painter</a>
 910       element for details as to the precedence in choosing a painter and to
 911       understand how identical painters are handled.
 912 
 913 
 914     <h3>The imageIcon element</h3>
 915 <div class="dtd-fragment">
 916 <pre class="dtd-fragment">
 917 &lt;!ELEMENT <a id="e.imageIcon">imageIcon</a> EMPTY>
 918 &lt;!ATTLIST imageIcon
 919           <a href="#imageIcon.id">id</a>                    ID             #REQUIRED
 920           <a href="#imageIcon.path">path</a>                  CDATA          #REQUIRED
 921 &gt;
 922 </pre>
 923 </div>
 924     <p><em>Attribute definitions</em></p>
 925     <dl>
 926       <dt><a id="imageIcon.id"><samp>id</samp></a></dt>
 927       <dd>Unique identifier for the imageIcon.</dd>
 928       <dt><a id="imageIcon.path"><samp>path</samp></a></dt>
 929       <dd>Path to the image. This uses the Class method
 930         getResource to resolve the path, with the Class supplied to
 931         SynthLookAndFeel.load.</dd>
 932     </dl>
 933     <p>
 934       <a href="#e.imageIcon">ImageIcon</a> is used to assign an Icon
 935       implementation that is wrapping an Image to a unique identifier.
 936       This is typically used for properties that take an Icon. The following
 937       example binds an ImageIcon to the property RadioButton.icon.
 938     </p>
 939     <div class="example">
 940       <pre>
 941 &lt;style id="test">
 942   &lt;imageIcon id="icon" path="resources/myImage.png"/>
 943   &lt;property key="RadioButton.icon" value="icon"/>
 944 &lt;/style>
 945     </pre>
 946 </div>
 947 
 948    <h3>The opaque element</h3>
 949 <div class="dtd-fragment">
 950 <pre class="dtd-fragment">
 951 &lt;!ELEMENT <a id="e.opaque">opaque</a> EMPTY>
 952 &lt;!ATTLIST opaque
 953           <a href="#opaque.value">value</a>              (true|false)   "true"
 954 &gt;
 955 </pre>
 956 </div>
 957     <p><em>Attribute definitions</em></p>
 958     <dl>
 959       <dt><a id="opaque.value"><samp>id</samp></a></dt>
 960       <dd>Whether or not the style should be opaque, if unspecified the style
 961         is opaque.</dd>
 962     </dl>
 963     <p>
 964       The <a href="#e.opaque">opaque</a> element indicates whether or
 965       not any Components the style is associated with are to be made opaque.
 966       The painter will be asked to paint regardless of the opacity
 967       of the associated Component. The following example creates a style
 968       that is not opaque.
 969     </p>
 970     <div class="example">
 971       <pre>
 972 &lt;style id="test">
 973   &lt;opaque value="FALSE">
 974   &lt;painter idref="painter"/>
 975 &lt;/style>
 976     </pre>
 977 </div>
 978 
 979     <h3><a id="ee.beansPersistance">The beansPersistance entity</a></h3>
 980     <p>
 981       Beans persistance can be used to embed any Object. This is
 982       typically used for embedding your own Painters, but can be used
 983       for other arbritrary objects as well. Refer to <a
 984         href="http://www.oracle.com/technetwork/java/persistence3-139471.html">
 985       http://www.oracle.com/technetwork/java/persistence3-139471.html</a>
 986       for details on beans persistance.
 987 
 988 
 989     <h3>Backing Style</h3>
 990     <p>
 991       In creating a Synth file it's good practice to create a backing
 992       style that is used by all components.  This will make sure that
 993       any components that do not match a specific style will have
 994       a default font, foreground, background and opacity. The
 995       following example illustrates this:
 996     <div class="example">
 997       <pre>
 998 &lt;synth>
 999   &lt;style id="backingStyle">
1000     &lt;opaque value="true"/>
1001     &lt;font name="Dialog" size="12"/>
1002     &lt;state>
1003       &lt;color value="BLACK" type="BACKGROUND"/>
1004       &lt;color value="WHITE" type="FOREGROUND"/>
1005     &lt;/state>
1006   &lt;/style>
< prev index next >