flex-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Chris Ellem <chrisel...@gmail.com>
Subject Re: weird Radio Button UI with mobile project using 4.14 SDK?
Date Thu, 19 Mar 2015 00:45:56 GMT
Thanks..

I will reference the old class..

s|RadioButton {
    skinClass: ClassReference("spark.skins.mobile.RadioButtonSkin");
}

I already have a far superior looking custom Radio button component, but if
its not broken don't fix it.

Feel free to use my custom component...just replace the dynamic cairngorm
theme color references..

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://
ns.adobe.com/flex/spark"
        xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
        width="99" height="24">

    <fx:Script>
        <![CDATA[
            import com.client.model.ModelLocator;
            [Bindable]private var modelLocator:ModelLocator =
ModelLocator.getInstance();
        ]]>
    </fx:Script>

    <fx:Metadata>
        [HostComponent("spark.components.RadioButton")]
    </fx:Metadata>

    <s:states>
        <s:State name="up" />
        <s:State name="over"  />
        <s:State name="down"  />
        <s:State name="disabled"  />
        <s:State name="upAndSelected"  />
        <s:State name="overAndSelected" />
        <s:State name="downAndSelected"  />
        <s:State name="disabledAndSelected"  />
    </s:states>

    <!-- label -->
    <s:RichText id="labelDisplay" left="50"
                verticalAlign="middle"
                verticalCenter="1" fontFamily="Arial"/>


    <s:Ellipse x="2" y="-10" width="36" height="36">
        <s:stroke>
            <s:SolidColorStroke color="#999999"/>
        </s:stroke>
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry alpha="1" color="#EEEEEE" ratio="0"/>
                <s:GradientEntry alpha="1.0" color="#CCCCCC" ratio="1"/>
            </s:LinearGradient>
        </s:fill>
    </s:Ellipse>

    <s:Ellipse x="8" y="-4" width="24" height="24" alpha="0.4"
               alpha.down="1"
               alpha.downAndSelected="1"
               alpha.over="1"
               alpha.overAndSelected="1"
               alpha.upAndSelected="1">
        <s:stroke>
            <s:SolidColorStroke caps="none" color="#CCCCCC" joints="miter"
miterLimit="4" weight="1"

color.upAndSelected="{modelLocator.theme_radio_button_color}"/>
        </s:stroke>
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry alpha="1.0" color="#CCCCCC"
ratio="0.3215686274509804"

 color.over="{modelLocator.theme_radio_button_color}"/>
                <s:GradientEntry alpha="1.0" color="#FFFFFF"
ratio="0.6823529411764706"/>
            </s:LinearGradient>
        </s:fill>
        <s:fill.over>
            <s:SolidColor color="{modelLocator.theme_radio_button_color}"/>
        </s:fill.over>
        <s:fill.down>
            <s:SolidColor color="{modelLocator.theme_radio_button_color}"/>
        </s:fill.down>
        <s:fill.upAndSelected>
            <s:SolidColor color="{modelLocator.theme_radio_button_color}"/>
        </s:fill.upAndSelected>
        <s:fill.overAndSelected>
            <s:SolidColor color="{modelLocator.theme_radio_button_color}"/>
        </s:fill.overAndSelected>
        <s:fill.downAndSelected>
            <s:SolidColor color="{modelLocator.theme_radio_button_color}"/>
        </s:fill.downAndSelected>
    </s:Ellipse>


</s:Skin>



On Thu, Mar 19, 2015 at 1:02 AM, quick6black [via Apache Flex Users] <
ml-node+s2333346n9818h40@n4.nabble.com> wrote:

> You can use the old skin by using this in your css or reference your own
> radio button skin.
>
> @namespace "library://ns.adobe.com/flex/spark";
>
> RadioButton
> {
>         skinClass: ClassReference("spark.skins.mobile.RadioButtonSkin");
> }
>
> I disagree that it is "so ugly" the intent of the skin is to replicate the
> Android 4x radio button. If you like the style of the Android 4x but do not
> like the white background ring  you can change the background color by
> doing
>
> <s:RadioButton label="Radio" groupName="mygroup" chromeColor="#FF0000"/>
>
> I created a radio button that replicates the android material design which
> is similar to Om's Android 4x button. You can download here
>
> <https://github.com/quick6black/flex-Android-Material-Skins/blob/master/src/spark/skins/android5/RadioButtonSkin.as>
and
> update your css using this
>
> RadioButton
> {
>         skinClass: ClassReference("spark.skins.android5.RadioButtonSkin");
>         backgroundAlpha: 0; /*background alpha*/
>         chromeColor: #000000; /*background color*/
>         selectColor: #009688;
>         unselectColor: #6D6D6D;
> }
>
>
>
> ------------------------------
>  If you reply to this email, your message will be added to the discussion
> below:
>
> http://apache-flex-users.2333346.n4.nabble.com/weird-Radio-Button-UI-with-mobile-project-using-4-14-SDK-tp9808p9818.html
>  To unsubscribe from weird Radio Button UI with mobile project using 4.14
> SDK?, click here
> <http://apache-flex-users.2333346.n4.nabble.com/template/NamlServlet.jtp?macro=unsubscribe_by_code&node=9808&code=Y2hyaXNlbGxlbUBnbWFpbC5jb218OTgwOHwtMTAzMzgxOTA1MQ==>
> .
> NAML
> <http://apache-flex-users.2333346.n4.nabble.com/template/NamlServlet.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=nabble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNamespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subscribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-send_instant_email%21nabble%3Aemail.naml>
>



-- 
Regards
Chris Ellem

Adobe Certified Expert - Flash & ColdFusion
[e] chrisellem@gmail.com
[m]    0431 194 234
[int]   +61 431 194 234




--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/weird-Radio-Button-UI-with-mobile-project-using-4-14-SDK-tp9808p9826.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.

Mime
View raw message