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 fehlt

Wenn Sie wie ich ein Kind der 70er sind, hegen Sie an diese Farbe wahrscheinlich ähnliche Erinnerungen. 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  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 fehlt

Und – was sagen Sie?


This is a (slightly updated) repost of a piece I published on my blog Tommi’s Blog. I deleted the blog in the wake of the GDPR, so the original version is no longer available, or only through the WayBack Machine of the Internet Archive. Please note: code usually has not been updated, so language feature reflect the time the original post was written.