<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Creating a group of Jewel radio buttons</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="/css/styles.css"><link rel="shortcut icon" href="/img/favicon.ico"></head><body class="page post" id="main"><header class="docs-header"><div class="container"><div class="topbar"><div class="topbar-left"><a href="/"><span class="site-title">Apache Royale</span></a></div><div class="topbar-center"></div><div class="topbar-right"><button class="topMenu-dropbtn"><i class="fa fa-bars"></i>&nbsp;Menu</button><ul class="topMenu"><li><a href="/features">Features</a></li><li><a href="https://apache.github.io/royale-docs/get-started">Get Started</a></li><li><a href="/download">Download</a></li><li><a href="/docs">Docs</a></li><li><a href="/blog">Blog</a></li><li><a href="https://github.com/apache/royale-asjs/wiki/Apache-Royale-Source-Code-Repositories"><i class="fa fa-github"></i> GitHub</a></li></ul></div></div><div class="post-header"><h1>Creating a group of Jewel radio buttons</h1><div class="post-meta">by Carlos Rovira on May 02, 2018</div></div></div></header><div class="page-content"><div class="container"><article><p>In this example we'll cover how to show a list of options in a Royale application with a group of Jewel <strong>RadioButton</strong> controls. It uses the new Jewel UI set that supports themes and is available in <a href="https://royale.apache.org/download/">the 0.9.4 release or later</a>.</p><pre><code class="language-mxml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;j:Application xmlns:fx=&quot;http://ns.adobe.com/mxml/2009&quot;
              xmlns:j=&quot;library://ns.apache.org/royale/jewel&quot;
              xmlns:html=&quot;library://ns.apache.org/royale/html&quot;&gt;
    
    &lt;fx:Script&gt;
        &lt;![CDATA[
           private function radioChanged(event:Event):void
            {
                result.text = &quot;The radio button selected has the value: &quot; + RadioButton(event.target).value;
            }
        ]]&gt;
    &lt;/fx:Script&gt;

    &lt;j:initialView&gt;
        &lt;j:View&gt;
            &lt;j:beads&gt;
                &lt;j:VerticalLayout gap=&quot;10&quot;/&gt;
            &lt;/j:beads&gt;

            &lt;html:H2 text=&quot;Creating a group of Jewel RadioButtons&quot;/&gt;
            
            &lt;j:Label text=&quot;Which option do you prefer?&quot;/&gt;
    
            &lt;j:RadioButton text=&quot;Option 1&quot; groupName=&quot;radios&quot; value=&quot;1&quot; change=&quot;radioChanged(event)&quot;/&gt;
            &lt;j:RadioButton text=&quot;Option 2&quot; groupName=&quot;radios&quot; value=&quot;2&quot; change=&quot;radioChanged(event)&quot;/&gt;
            &lt;j:RadioButton text=&quot;Option 3&quot; groupName=&quot;radios&quot; value=&quot;3&quot; change=&quot;radioChanged(event)&quot;&gt;
                &lt;j:beads&gt;
                    &lt;j:Disabled id=&quot;opt3disable&quot; disabled=&quot;false&quot;/&gt;
                &lt;/j:beads&gt;
            &lt;/j:RadioButton&gt;

            &lt;j:Label id=&quot;result&quot; text=&quot;The radio button selected has the value:&quot;/&gt;

            &lt;j:Button text=&quot;disable/enable option 3&quot; emphasis=&quot;primary&quot; click=&quot;opt3disable.disabled = !opt3disable.disabled&quot;/&gt;
        &lt;/j:View&gt;
    &lt;/j:initialView&gt;

&lt;/j:Application&gt;
</code></pre><p>The radio buttons have these properties available:</p><ul><li><strong>text</strong>: The label description for the radio button</li><li><strong>value</strong>: The internal value of the radio button</li><li><strong>selected</strong>: If this is true it means that the radio button is selected; it is false otherwise</li><li><strong>groupName</strong>: All radio buttons with the same group name are related, so the user can change which radio button is selected but can never select more than one member of the group at a time</li></ul><p>Each radio button has <strong>CLICK</strong> and <strong>CHANGE</strong> events. <strong>CLICK</strong> is dispatched when the user clicks the RadioButton. <strong>CHANGE</strong> is dispatched when the RadioButton is selected/unselected, and is used in this example to update a label with the value property of the selected radio button.</p><p>As a bonus, you can provide the ability to disable/enable any of the radio buttons (and any other Jewel control) by adding the <strong>Disabled bead</strong> to it. Adding beads lets you change what controls can do by composition, rather than being limited to what the control inherits. The Disabled bead lets you enable or disable the control programmatically, depending on whatever you find important for your application (for instance, whether the user is logged in or has made a selection in another control that is required before selecting one of these options). We'll be talking more about beads in future posts.</p><h2>Where to go from here</h2><ul><li><a href="https://apache.github.io/royale-docs/component-sets/jewel/radiobutton">Jewel RadioButton Royale Docs page</a></li><li><a href="https://apache.github.io/royale-docs/component-sets/jewel/button">Jewel Button Royale Docs page</a></li><li><a href="https://apache.github.io/royale-docs/component-sets/jewel/label">Jewel Label Royale Docs page</a></li></ul><p>The result of this code snippet is the following:</p><iframe width="100%" height="300" src="/blog-examples/BE0005_Creating_a_group_of_Jewel_RadioButtons/index.html"></iframe><p>(We're using an iframe to host the actual results of this example compilation. To see the example in a separate window click <a href="/blog-examples/BE0005_Creating_a_group_of_Jewel_RadioButtons/index.html" target="_blank">this link</a>.)</p><p>Full project with source code can be found <a href="https://github.com/apache/royale-asjs/tree/develop/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons">here</a>:</p><p><a class="btn btn-download" href="https://github.com/apache/royale-asjs/tree/develop/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons"><i class="fa fa-download"></i> Project Source Code</a></p></article></div></div><footer class="footer"><div class="footer-row"><div class="footer-column"><ul class="footer-list"><li class="apacheroyale"><a href="/">Apache Royale</a></li><li><a href="/">Home</a></li><li><a href="/features">Features</a></li><li><a href="/download">Download</a></li><li><a href="/ides">IDEs and Editors</a></li><li><a href="/showcase">Showcase</a></li><li><a href="/blog">Blog</a></li><li><a href="/team">Team</a></li><li><a href="/thanks-to">Thanks To</a></li><li><a href="https://apache.org/logos/#royale"><i class="fa fa-external-link-square"></i> Logos</a></li><li><a href="https://www.apache.org/licenses/"><i class="fa fa-external-link-square"></i> Apache License v2.0</a></li></ul></div><div class="footer-column"><ul class="footer-list"><li class="documentation"><a href="/docs">Documentation</a></li><li><a href="https://apache.github.io/royale-docs/get-started">Get Started</a></li><li><a href="/docs">Docs</a></li><li><a href="/asdoc">API Reference</a></li><li><a href="https://github.com/apache/royale-asjs/wiki"><i class="fa fa-github"></i>Wiki</a></li><li><a href="https://stackoverflow.com/questions/tagged/apache-royale"><i class="fa fa-stack-overflow"></i> StackOverFlow Tag</a></li></ul><ul class="footer-list"><li class="community"><a href="/get-involved">Community</a></li><li><a href="/get-involved">Get Involved</a></li><li><a href="/mailing-lists">Mailing Lists</a></li><li><a href="/faq">FAQ</a></li></ul><ul class="footer-list"><li class="development"><a href="/source-code">Development</a></li><li><a href="https://github.com/apache/royale-asjs/wiki/Apache-Royale-Source-Code-Repositories"><i class="fa fa-github"></i> Github</a></li><li><a href="https://github.com/apache/royale-asjs/issues"><i class="fa fa-github"></i> Issues</a></li><li><a href="/source-code"><i class="fa fa-code"></i> Source Code</a></li></ul></div><div class="footer-column"><ul class="footer-list"><li class="social_t">Social</li><li><a href="https://twitter.com/apacheroyale"><i class="fa fa-twitter"></i> Twitter</a></li><li><a href="https://facebook.com/ApacheRoyaleSDK/"><i class="fa fa-facebook"></i> Facebook</a></li><li><a href="https://www.linkedin.com/groups/12118437"><i class="fa fa-linkedin"></i> LinkedIn</a></li><li><a href="/feed/index.xml"><i class="fa fa-rss"></i> RSS</a></li></ul><ul class="footer-list"><li class="apache"><a href="https://www.apache.org/">Apache</a></li><li><a href="https://www.apache.org/"><i class="fa fa-external-link-square"></i> Apache</a></li><li><a href="https://www.apache.org/foundation/contributing.html"><i class="fa fa-external-link-square"></i> Donations</a></li><li><a href="https://www.apache.org/events/current-event"><i class="fa fa-external-link-square"></i> Events</a></li><li><a href="https://www.apache.org/foundation/sponsorship.html"><i class="fa fa-external-link-square"></i> Sponsorship</a></li><li><a href="https://www.apache.org/foundation/thanks.html"><i class="fa fa-external-link-square"></i> Thanks</a></li><li><a href="https://www.apache.org/security/"><i class="fa fa-external-link-square"></i>Security</a></li></ul></div><div class="aboutusdiv"><p class="aboutus">About Us</p><p class="aboutus_p"><img class="aboutus-logo" src="/img/apache-royale-logo-footer-circle-grey.svg"><a href="/" class="aboutus_a">Apache Royale™</a> is a highly productive open source application technology for building expressive frontend applications that outputs to different formats and deploy consistently on all major browsers, desktops and devices.</p><p><img class="aboutus-apache-logo" src="/img/Apache_PoweredBy.svg"> <a href="/" class="aboutus_a">Apache Royale™</a>, <a href="https://www.apache.org" class="aboutus_a">Apache™</a> and the <a href="https://www.apache.org/foundation/press/kit/" class="aboutus_a">Apache feather logo™</a> are trademarks of The Apache Software Foundation. All other marks mentioned may be trademarks or registered trademarks of their respective owners. Read more about our privacy policy on our <a href="/privacy-policy">Privacy Policy page</a>.</p></div></div><div class="asf">Copyright &copy; 2017-2022 <a href="https://www.apache.org">The Apache Software Foundation</a>, Licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a></div></footer></body></html>