2013-06-24

Ultimate Swing, Teil 25

Erinnern Sie sich noch an meine lose Folge von Posts zu Swing? Nach einer längeren Pause möchte ich den Faden wieder aufnehmen und in den folgenden Monaten den einen oder anderen Kniff zum Besten geben. Außerdem gibt es ja noch das im Rahmen der Serie begonnene Notes and Tasks, das schon in seinem frühen Stadium zu schön ist, um es nicht zu vollenden. Die Quelltexte habe ich in ein Subversion-Repository gepackt, auf das Sie über die Projekthomepage von Notes and Tasks zugreifen können.

Sie erinnern sich vielleicht, dass sich die letzten Folgen um Look and Feels gedreht haben. Ich habe auf Basis von Synth einige Komponenten so gestaltet, dass sie an den (schon länger nicht mehr so genannten) Metro-Look von Microsoft erinnern. Mir ging und geht es dabei nicht darum, eine möglichst genaue Kopie anzufertigen. Eher ist es eine Verneigung vor dem Mut Redmonds, diesen radikalen Neubeginn zu wagen. Sicher gibt es an Windows 8 noch das eine oder andere zu drehen, aber die UI ist wegweisend.

In diesem Post möchte ich mein Look and Feel, das ich übrigens UTLAF (raten Sie doch einmal, wofür UT steht) getauft habe, um die Fähigkeit erweitern, Radio buttons zu rendern. Auch Windows Store apps kennen Radio buttons. Sie sind wie eh und je rund. Diese Seite gibt einen schönen Überblick über die so genannten selection controls, die Windows Store apps zur Verfügung stehen.

UTLAF wird mit der langen Tradition runder Radio buttons brechen. Wie die korrespondierenden Grafiken aussehen, ist im folgenden Screenshot dargestellt. Ich greife dabei das von mir schon mehrfach verwendete Orange (ffa000) wieder auf.

Screenshot: die Grafiken für Radio buttons
Screenshot: die Grafiken für Radio buttons

Wenn Sie wie ich ein Kind der 70er sind, hegen Sie an diese Farbe wahrscheinlich ähnliche Erinnerungen.

Smiley

Um die Grafiken anzuzeigen, müssen wir die XML-Datei des Layouts folgendermaßen erweitern:

      <!-- RadioButton -->  
      <style id="radiobuttonStyle">  
           <opaque value="TRUE" />  
           <imageIcon id="radiobutton_off" path="radiobutton_off.png"/>  
           <imageIcon id="radiobutton_mouse_over_off" path="radiobutton_mouse_over_off.png"/>  
           <imageIcon id="radiobutton_pressed_off" path="radiobutton_pressed_off.png"/>  
           <imageIcon id="radiobutton_on" path="radiobutton_on.png"/>  
           <imageIcon id="radiobutton_mouse_over_on" path="radiobutton_mouse_over_on.png"/>  
           <imageIcon id="radiobutton_pressed_on" path="radiobutton_pressed_on.png"/>  
           <property key="RadioButton.icon" value="radiobutton_off"/>  
           <state>  
             <color type="TEXT_FOREGROUND" value="#505050"/>  
           </state>  
           <state value="PRESSED">    
                <property key="RadioButton.icon" value="radiobutton_pressed_off"/>  
           </state>       
           <state value="PRESSED and SELECTED">    
                <property key="RadioButton.icon" value="radiobutton_pressed_on"/>  
           </state>       
           <state value="SELECTED">    
                <property key="RadioButton.icon" value="radiobutton_on"/>  
           </state>       
           <state value="MOUSE_OVER and SELECTED">    
                <property key="RadioButton.icon" value="radiobutton_mouse_over_on"/>  
           </state>       
           <state value="MOUSE_OVER">    
                <property key="RadioButton.icon" value="radiobutton_mouse_over_off"/>  
           </state>       
      </style>  
      <bind style="radiobuttonStyle" type="region" key="RadioButton"/>      

Wenn Sie meinem Post zu Checkboxen gefolgt sind, werden Ihnen viele Parallelen auffallen. Letztlich geht es auch bei Radio buttons nur darum, zum aktuellen Status die passende Grafik auszuwählen.

Screenshot: Radio buttons go 70s
Screenshot: Radio buttons go 70s

Und – was sagen Sie?

Zwinkerndes Smiley

No comments:

Post a Comment