1 Reply Latest reply on Jul 6, 2009 9:53 AM by Matt Cannizzaro

    Custom UI Events

    neutrino15 Level 1

      This request is in the same vein as http://forums.adobe.com/thread/449111and my second point in http://forums.adobe.com/thread/456311

      I have noticed that most feature requests in this forum say "Give us more customization." This post is another one of those requests.

      Along with CSS-like styles, Object inheritance, and Transition inheritance, I'd like to see designers able to define custom events for components they create. For examle: Let's say we get a job to create a weather widget for someone's website. When the widget refreshes, we want something to blink. When the weather gets updated, we want the old information to fade out and the new information to fade in. With the current set of tools in Catalyst and Builder, the programmer would have to define all of these fades and blinks in AS3, then apply them to the MXML components when the event occurs. I am suggesting allowing the designer to define "UI Events" with custom names that appear to be methods of the component to the Flex developer. This way, the Designer could stay in control of every part of the UI. I wrote some example code below to illustrate my point.

       

                In the code below, "Change Weather" would be a custom event of some component created by the designer in Catalyst. "Change Weather" below would accept two "parameters," though parameters would not be necessary (the designer would decide this).

       

      protected function updateResponder(e:ResultEvent):void{
           ...
           catalystComponent.uievent("Change Weather", newTemp, newCloudImage);
           ...
      }
      

       

                Alternatively

       

      protected function updateResponder(e:ResultEvent):void{
           ...
           var delta = catalystComponent.changeUI("Change Weather");
           delta.temperature.text = newTemp;
           delta.image.src = newCloudImage;
           delta.apply();
           ...
      }
      

       

       

      This code really is just for illustration purposes. I am not an expert flex or AS3 developer, so don't get too picky about it. I'm trying to convey a concept. If it already exists, please give me guidance!

       

      --Jordan

        • 1. Re: Custom UI Events
          Matt Cannizzaro Level 2

          Jordan,


          Thanks for your thoughtful post! In Catalyst, there are two ways to define custom animations like what you're describing. The first way is to create states of your component with transitions between them, but that doesn't really feel like the right solution for your example, since conceptually the weather widget isn't changing state: it's still displaying the temperature, the only difference is that the temperature has changed. The second way is to use what we call an "action sequence", which is essentially a series of animations that is not tied to a pair of states. Instead, action sequences are executed whenever a certain event occurs (the designer picks which event executes the action sequence in Catalyst).

           

          The finished weather widget would probably update it's temperature display in response to receiving new data from a web service. The designer probably isn't interested in doing the work necessary to hook up their project to a web service, and that would have to be done in FB anyway. So rather than using "real" data, the designer would probably like to author the animation and test it out by triggering it manually. Then, presumably, a developer would hook up the animation to an actual data source in FB.

           

          You can do something along these lines in Catalyst today: to demonstrate and test the animation, you might add a slider component to your application. You can use the interactions HUD to play an action sequence whenever the slider changes (the change event fires whenever the slider's thumb is dragged or otherwise moved). In the timeline panel, you can add actions to the action sequence, causing a text display of the temperature to fade out and then fade back in with a new value. You can then test the action sequence by either previewing it within Catalyst, or by running your project and dragging the slider.

           

          Our action sequences aren't quite what you're describing, though. They aren't parameterized, and they aren't as developer-friendly as a method call. I think both of these are very valuable qualities. How do you envision them working in the workflow?

           

          Thanks again for your post!