2012-09-17

Ultimate Swing, Teil 24

Lassen Sie uns noch ein bisschen an unserem Look and Feel basteln…

In diesem Post zeige ich Ihnen, wie wir Checkboxen wieder mit ihren Kästchen und Häkchen versehen – zur Zeit fehlen diese ja noch. Der folgende Screenshot zeigt 6 Grafiken, die wir hierfür verwenden werden.

Häkchen und Kästchen im Detail

Die obere Zeile zeigt die nicht angehakte Checkbox, die untere alle Fälle, in denen das Häkchen gesetzt ist. Von links nach rechts sehen Sie “Maus nicht über der Komponente”, “Maus über der Komponente” (MOUSE OVER) und schließlich “Komponente zum Zeitpunkt des Klicks”.

Kleiner Tipp am Rande: Unter Windows kommen Sie sehr leicht zu einem hübschen Häkchen, in dem Sie in der Zeichentabelle zuerst Windings als Schriftart auswählen und danach im Eingabefeld ü drücken.

Zeichentabelle

Nun müssen wir nur noch unsere Look and Feel-XML-Datei erweitern.

<!-- Checkbox -->
<style id="checkboxStyle">
  <opaque value="TRUE" />
   
  <imageIcon id="checkbox_off" path="checkbox_off.png"/>
  <imageIcon id="checkbox_mouse_over_off" path="checkbox_mouse_over_off.png"/>
  <imageIcon id="checkbox_pressed_off" path="checkbox_pressed_off.png"/>
  <imageIcon id="checkbox_on" path="checkbox_on.png"/>
  <imageIcon id="checkbox_mouse_over_on" path="checkbox_mouse_over_on.png"/>
  <imageIcon id="checkbox_pressed_on" path="checkbox_pressed_on.png"/>
   
  <property key="CheckBox.icon" value="checkbox_off"/>
 
  <state value="PRESSED">  
    <property key="CheckBox.icon" value="checkbox_pressed_off"/>
  </state> 
  <state value="PRESSED and SELECTED">  
    <property key="CheckBox.icon" value="checkbox_pressed_on"/>
  </state> 
  <state value="SELECTED">  
    <property key="CheckBox.icon" value="checkbox_on"/>
  </state> 
  <state value="MOUSE_OVER and SELECTED">  
    <property key="CheckBox.icon" value="checkbox_mouse_over_on"/>
  </state> 
  <state value="MOUSE_OVER">  
    <property key="CheckBox.icon" value="checkbox_mouse_over_off"/>
  </state> 
   
</style>
<bind style="checkboxStyle" type="region" key="CheckBox"/>
Java2html

Die Reihenfolge der Zustandsdefinitionen ist übrigens nicht ganz beliebig. Beispielsweise darf MOUSE_OVER nicht vor SELECTED gesetzt werden, weil SELECTED ein MOUSE_OVER bedingt und demzufolge nicht zum Tragen käme.

Screenshot: fertige Checkbox

Na – sieht doch recht hübsch aus, oder?

Zwinkerndes Smiley

Zum Schluss ein kleines Rätsel. Haben Sie meine Verwendung der Farben schon durchschaut? Das geht ja vergleichsweise einfach, indem Sie die Demo einfach selbst starten…

No comments:

Post a Comment