flex-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Rui Cruz <info.ruic...@gmail.com>
Subject Re: Spark components with Material Design
Date Fri, 28 Aug 2015 16:24:34 GMT
I've never added to much code to the skins, but its indeed a way to do it
without creating new unnecessary components.

The only thing that comes in my mind is the css metadatas.. but we can
always have 4 skins (PrimaryButtonSkin, WarnButtonSkin, etc...)

I've no problems in changing all that if its for the better.

Thank you :)

2015-08-28 15:47 GMT+01:00 megharajdeepak [via Apache Flex Users] <
ml-node+s2333346n11078h92@n4.nabble.com>:

> Hi Rui,
>
> Happened to look into Button Component and the ButtonSkin within flat
> material package.
>
> Main concept within button component was to capture mouseX and mouseY
> points on mouseDown and use them to ripple and then destroy the ripple on
> mouseUp of the Button component.
>
> Nothing major wrt changes. I just moved those 2 methods within your Skin
> class itself(ButtonSkin)  by adding mouseDown and mouseUp events on the
> hostComponent. This piece seems to work as expected. But haven't tested
> fully and I'm sure it can be further optimised : ) and I reckon same
> concept can be applied across rest of the components too.
>
> This is the new Skin Class(NewButtonSkin), with changes, which can be
> directly used on spark button:
>
> <s:Button label="NewLab" skinClass="spark.material.skins.NewButtonSkin"/>
>
>
> <!--spark.material.skins.NewButtonSkin.mxml-->
> <?xml version="1.0" encoding="utf-8"?>
> <s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
>              xmlns:s="library://ns.adobe.com/flex/spark"
>              xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
>              minWidth="60" minHeight="35"
>              alpha.disabled="0.5"
>
>              creationComplete="creationCompleteHandler(event)">
>
>     <fx:Metadata>
>         [HostComponent("spark.material.components.Button")]
>     </fx:Metadata>
>
>     <fx:Script>
>         <![CDATA[
>             import mx.events.FlexEvent;
>             import mx.events.StateChangeEvent;
>
>             import spark.material.components.InkRipple;
>             override public function styleChanged(styleProp:String):void
>             {
>                 super.styleChanged(styleProp);
>
>                 if(!styleProp || styleProp == "backgroundColor" ||
> styleProp == "inkColor")
>                 {
>                     if(getStyle("backgroundColor") != undefined)
>                         bgFill.color = getStyle("backgroundColor");
>
>                     if(getStyle("inkColor") != undefined)
>                         inkFill.color = getStyle("inkColor");
>                     else
>                         inkFill.color = bgFill.color;
>                 }
>             }
>             public var inkColor:uint = 0x999999;
>             protected var currentRipple:InkRipple;
>
>             protected function destroyRipples():void
>             {
>                 for(var i:int=0; i < inkHolder.numElements; i++)
>                 {
>                     inkHolder.getElementAt(i)["destroy"](true);
>                 }
>             }
>
>             protected function
> creationCompleteHandler(event:FlexEvent):void
>             {
>                 hostComponent.buttonMode = true;
>                 hostComponent.addEventListener(MouseEvent.MOUSE_DOWN,
> onDown);
>                 hostComponent.addEventListener(MouseEvent.MOUSE_UP, onUp);
>
>             }
>
>             private function onDown(event:MouseEvent):void
>             {
>                 if(currentRipple)
>                     currentRipple.isMouseDown = false;
>
>                 //if(event.type == 'down')
>                 //{
>                     var rippleRadius:Number =
> Math.sqrt(width*width+height*height);
>                     currentRipple = new InkRipple(event["localX"],
> event["localY"], rippleRadius*2, inkColor, 1200);
>                     currentRipple.owner = inkHolder;
>                     inkHolder.addElement(currentRipple);
>                 //}
>             }
>
>             private function onUp(event:MouseEvent):void
>             {
>                 destroyRipples();
>             }
>         ]]>
>     </fx:Script>
>
>     <s:states>
>         <s:State name="up"/>
>         <s:State name="over"/>
>         <s:State name="down"/>
>         <s:State name="disabled" />
>     </s:states>
>
>     <s:Rect id="fill" left="0" right="0" top="0" bottom="0" radiusX="2">
>         <s:fill>
>             <s:SolidColor id="bgFill" color="#fafafa"
> color.disabled="#dadada"/>
>         </s:fill>
>         <s:filters>
>             <s:DropShadowFilter alpha="0.3" alpha.down=".5" angle="90"
> blurX="4" blurY="4" blurX.down="5" blurY.down="5" distance="2" quality="2"
> />
>         </s:filters>
>         <s:filters.disabled/>
>     </s:Rect>
>
>     <s:Rect left="0" right="0" top="0" bottom="0" radiusX="2"
> includeIn="over,down">
>         <s:fill>
>             <s:SolidColor alpha=".1"/>
>         </s:fill>
>     </s:Rect>
>
>     <s:Rect left="0" right="0" top="0" bottom="0" radiusX="2">
>         <s:fill>
>             <s:SolidColor id="inkFill" alpha="0" alpha.down=".1"/>
>         </s:fill>
>     </s:Rect>
>
>     <s:Label id="labelDisplay" textAlign="center" maxDisplayedLines="1"
> typographicCase="uppercase"
>              horizontalCenter="0" verticalCenter="1"
> verticalAlign="middle"
> fontWeight="bold"
>              left="17" right="17" top="8" bottom="6"
> color.disabled="#666666"/>
>
>     <s:Group id="inkHolder" clipAndEnableScrolling="true" width="{width}"
> height="{height}"/>
> </s:SparkButtonSkin>
>
>
> Cheers!
> Deepak
>
> On Fri, Aug 28, 2015 at 3:46 PM, Rui Cruz <[hidden email]
> <http:///user/SendEmail.jtp?type=node&node=11078&i=0>> wrote:
>
> > Hi megharajdeepak,
> >
> > I did it to handle the ripple effect and override some custom functions.
> > But you can try to handle that on the skin functions. Let me know you
> have
> > success and I'll change the source.
> >
> > Regards
> >
> > 2015-08-28 7:42 GMT+01:00 megharajdeepak [via Apache Flex Users] <
> > [hidden email] <http:///user/SendEmail.jtp?type=node&node=11078&i=1>>:
> >
> > > I have one question. Why is do we need separate flat material
> components
> > > like Button, CheckBox etc? Can't we merge all the visual
> > > aspects(colors\fonts\effects) within the skin class of each of those
> > > components?
> > >
> > > On Thu, Aug 27, 2015 at 10:06 PM, Rui Cruz <[hidden email]
> > > <http:///user/SendEmail.jtp?type=node&node=11076&i=0>> wrote:
> > >
> > > > You're welcome!
> > > >
> > > > Later tonight I'll add few more components, You're all welcome to
> > > > contribute / pull request new features.
> > > >
> > > > @kentonue already joined the github project and I'm really happy
> with
> > > the
> > > > feedback from the community, I'll keep the mailing list updated with
> > new
> > > > releases.
> > > >
> > > > Regards,
> > > > Rui
> > > >
> > > > 2015-08-27 17:06 GMT+01:00 [hidden email]
> > > <http:///user/SendEmail.jtp?type=node&node=11076&i=1> [via Apache
> Flex
> > > Users] <
> > > > [hidden email] <http:///user/SendEmail.jtp?type=node&node=11076&i=2>>:
>
> > > >
> > > > > Thank you for bringing the MaterialDesign to Flex, it looks
> awesome.
> > > Im
> > > > > looking forward to check it out when I'll be back at office next
> > week.
> > > > >
> > > > > Olaf
> > > > >
> > > > > ------------------------------
> > > > > If you reply to this email, your message will be added to the
> > > discussion
> > > > > below:
> > > > >
> > > > >
> > > >
> > >
> >
> http://apache-flex-users.2333346.n4.nabble.com/Spark-components-with-Material-Design-tp11042p11068.html
> > > > > To unsubscribe from Spark components with Material Design, click
> here
> > > > > <
> > > > >
> > > > > .
> > > > > 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
> > > > >
> > > > >
> > > >
> > > >
> > > >
> > > >
> > > > --
> > > > View this message in context:
> > > >
> > >
> >
> http://apache-flex-users.2333346.n4.nabble.com/Spark-components-with-Material-Design-tp11042p11069.html
> > > > Sent from the Apache Flex Users mailing list archive at Nabble.com.
> > > >
> > >
> > >
> > > ------------------------------
> > > If you reply to this email, your message will be added to the
> discussion
> > > below:
> > >
> > >
> >
> http://apache-flex-users.2333346.n4.nabble.com/Spark-components-with-Material-Design-tp11042p11076.html
> > > To unsubscribe from Spark components with Material Design, click here
> > > <
> > >
> > > .
> > > 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
> > >
> > >
> >
> >
> >
> >
> > --
> > View this message in context:
> >
> http://apache-flex-users.2333346.n4.nabble.com/Spark-components-with-Material-Design-tp11042p11077.html
> > Sent from the Apache Flex Users mailing list archive at Nabble.com.
> >
>
>
> ------------------------------
> If you reply to this email, your message will be added to the discussion
> below:
>
> http://apache-flex-users.2333346.n4.nabble.com/Spark-components-with-Material-Design-tp11042p11078.html
> To unsubscribe from Spark components with Material Design, click here
> <http://apache-flex-users.2333346.n4.nabble.com/template/NamlServlet.jtp?macro=unsubscribe_by_code&node=11042&code=aW5mby5ydWljcnV6QGdtYWlsLmNvbXwxMTA0Mnw0OTE5NTg4MDE=>
> .
> 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>
>




--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Spark-components-with-Material-Design-tp11042p11079.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.

Mime
View raw message