Создание кастомного Design-time View для своего Flex 3 компонента

Команда AnyChart.Com Team продолжает радовать. На этот раз они раскопали, как создать кастомный design-time preview для своих Flex компонентов. Привожу русскоязычный вариант статьи (оригинал тут) от авторов:

Иногда необходимо сделать кастомный Design-time Preview для компонента (это его вид в "Design View" Flex Builder-а). Для этих целей в Adobe Flex 3 SDK есть недокументированый класс mx.core.UIComponentGlobals. В этом волшебном классе лежит не менее волшебное поле designMode:Boolean.

В Design View среда Flex Builder пытается "выполнить" код и отобразить что-либо, следовательно можно прописать проверку на designMode и делать то, что хотим.

Итак:
1. Возьмем ActionScript-компонент для Flex Bulder 3.
2. Заоверрайдим метод createChildren():

override protected function createChildren():void {

            super.createChildren();

            if (UIComponentGlobals.designMode) {

               //здесь мы создаем child-ы, которые будут в design mode

            }

        }

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

            super.updateDisplayList(unscaledWidth, unscaledHeight);

            

            if (UIComponentGlobals.designMode) {

                //здесь мы рисуем то, что будет видно в design mode

            }else {

                //а здесь то, что в runtime

            }

        }

Вуаля! Пример компонента можно взять здесь. При добавлении этого компонента на сцену в Design Mode Flex Builder-а мы увидим следующее:

А при запуске — вот это:

Можно скачать пример Flex-приложения и пример компонента.