1 Reply Latest reply on Apr 11, 2010 9:04 PM by tehxike1

    I'm not sure I like Spark.

    Ansury Level 3

      Perhaps I'm missing the real point here in the article I'm looking at, but is this really saying that simply making some custom modifications to this, IF NEEDED (keep in mind this Spark example stinks of YAGNI)...

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
      
        <mx:Script>
        <![CDATA[
          private function onCelsiusEntered(e: Event): void {               
            fahrenheitInput.text = (Number(celsiusInput.text) * 9/5 + 32) + "";     
          }     
          private function onFahrenheitEntered(e: Event): void {               
            celsiusInput.text = ((Number(fahrenheitInput.text) - 32) * 5/9) + "";     
          }     
        ]]>
        </mx:Script>
                
        <mx:Form>
          <mx:FormItem label="Celsius:">
            <mx:TextInput id="celsiusInput" change="onCelsiusEntered(event)"/>
          </mx:FormItem>
          <mx:FormItem label="Fahrenheit:">
            <mx:TextInput id="fahrenheitInput" change="onFahrenheitEntered(event)"/>
          <mx:FormItem>
         </mx:Form>
      </mx:VBox>
      

       

       

      ...is not better than this?

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" 
         width="400" height="300">
           
        <fx:Metadata>
          [HostComponent("DegreeConverter")]
        </fx:Metadata>
           
        <s:states>
          <s:State name="normal"/>
          <s:State name="disabled"/>
        </s:states>
           
        <mx:Form>
          <mx:FormItem label="Celsius:" alpha.disabled="0.5">
            <s:TextInput id="celsiusInput" enabled.disabled="false"/>
          <mx:FormItem>
          <mx:FormItem label="Fahrenheit:" alpha.disabled="0.5">
            <s:TextInput id="fahrenheitInput" enabled.disabled="false"/>
          <mx:FormItem>
        </mx:Form>
      </s:SparkSkin>
      
      PLUS
      
      package com.artima {
        import flash.events.Event;
        import spark.components.TextInput;
        import spark.components.supportClasses.SkinnableComponent;
      
        [SkinState("normal")]
        [SkinState("disabled")]
        public class DegreeConverter extends SkinnableComponent {
                                    
          [SkinPart(required="true")]
          public var celsiusInput: TextInput;
                
          [SkinPart(required="true")]
          public var fahrenheitInput: TextInput;
                                    
          override public function set enabled(value:Boolean) : void {
            if (enabled != value)
              invalidateSkinState();
           
            super.enabled = value;
          }
                
          override protected function getCurrentSkinState() : String {
            if (!enabled) 
              return "disabled";               
            return "normal";
          }
                
          override protected function partAdded(partName: String, instance: Object): void {
            if (instance == celsiusInput)
              celsiusInput.addEventListener(Event.CHANGE, onCelsiusInput);
      
            if (instance == fahrenheitInput)
              fahrenheitInput.addEventListener(Event.CHANGE, onFahrenheitInput);
          }     
                
          override protected function partRemoved(partName:String, instance:Object) : void {
            if (instance == celsiusInput)
              celsiusInput.removeEventListener(Event.CHANGE, onCelsiusInput);
      
            if (instance == fahrenheitInput)
              fahrenheitInput.removeEventListener(Event.CHANGE, onFahrenheitInput);
          }
      
          private function onCelsiusInput(e: Event): void {
            fahrenheitInput.text = (Number(celsiusInput.text) * 9/5 + 32) + "";
          }     
                
          private function onFahrenheitInput(e: Event): void {
            celsiusInput.text = ((Number(fahrenheitInput.text) - 32) * 5/9) + "";
          }                    
        }
      }
      

       

      ?

       

      Really?  Now we're supposed to write 3 times as much code "just in case" we want a component to be reused some day and may need to make some minor visual modifications?

       

      I understand the concept of MVC, which I believe is what prompted all this, but I can't help but wonder if this is taking the concept too far and creating extra work.  Sure the first example does less than the second but I don't think it's such a nightmare or "tedious and boilerplate" to add the features below, to quote the article.

       

      I've always considered such "boilerplate" to be part of the view in MVC (as it is in Java Swing).  The concept above also seems to completely forget about inheritance and the ability to extend components, which can often achieve the desired results without making changes to the original.  Maybe I just "don't get" Spark?

        • 1. Re: I'm not sure I like Spark.
          tehxike1

          You can still do it the old way and slap everything in the same file.  Personally, I love the Spark flow.  If a component is one-off or very basic, I may not bother with a skin.  If it's reusable, I love the fact that instead of writing tons of CSS logic, I can simply delegate the look/feel to the skin, while keeping the core functionality in the AS file.  I haven't done any actual analytics, but I feel like I'm writing less code now with Spark/Skin than I was before with Halo/CSS StyleManager.