Отображать границы элементов в приложении Flex?

Question

Есть ли способ поместить границы вокруг (MXML) элементов приложения Flex? Я представляю что-то похожее на то, что Firebug делает для HTML с кнопкой Inspect (см. http://getfirebug.com/html и ищите «inspect», чтобы понять, что я имею в виду).

Причина этого заключается в том, что у меня возникли некоторые проблемы с макетом.

Answer 1

FlexSpy - это еще один инструмент, который позволяет перемещаться по пользовательскому интерфейсу и проверять свойства.

Answer 2

Вы можете попробовать «Kap Inspect», это, вероятно, самая близкая вещь к Firebug в среде Flex.

Проверьте демо здесь: http://lab.kapit.fr/demo/kapinspect/prod/index.html

И скачать отсюда: http://lab.kapit.fr/display/kapinspect/Kap+Inspect

Answer 3

Я делал это несколько раз, чтобы выяснить проблемы с макетом, но не из MXML.

В AS вы можете нарисовать прямоугольник в графическом слое данных компонентов.

Один из подходов состоит в том, чтобы создать прослушиватель для события creationComplete родительских компонентов MXML и нарисовать там свои прямоугольники - вам нужно подождать, пока все не завершится, создание экземпляра и измерение, чтобы убедиться, что у вас есть правильные измерения.

Вы также захотите создать слушатель изменения размера, если ваше приложение изменяет размер.

Что-то, примерно так:

private function creationCompleteListener():void
{
    drawRectanglesAroundDisplayElements();
}

private function drawRectanglesAroundDisplayElements():void
{
    for each(var displayElement:DisplayObject in displayList)
    {
        var graphicsLayer:Graphics = displayElement.graphics;
        graphicsLayer.lineStyle(1,0xFF0000);
        graphicsLayer.drawRect(0,0,displayElement.width, displayElement.height);
    }
}

Он будет проходить через все экранные объекты, включая объекты DisplayObjectContainer, и обводит их красной рамкой размером 1 пиксель.

Вы можете предпочесть выделять только определенные типы экранных объектов, и если это так, вы можете фильтровать, проверяя имя или тип данных данного DisplayObject.

Иногда я добавляю заливку с полупрозрачным фоном также для определенных объектов. Я считаю, что перекрывающиеся фоны легче увидеть, чем пересекающиеся линии (конечно, это часто неосуществимо).

Например, если вы хотите придать всем VBox прозрачный синий bg, а также красный контур, вы можете изменить приведенное выше так:

private function drawRectanglesAroundDisplayElements():void
{
    for each(var displayElement:DisplayObject in displayList)
    {
        var graphicsLayer:Graphics = displayElement.graphics;

        if(displayElement is VBox)
        {
            graphicsLayer.beginFill(0x0000FF,.3);
            graphicsLayer.drawRect(0,0,displayElement.width, displayElement.height);
            graphicsLayer.endFill();
        }

        graphicsLayer.lineStyle(1,0xFF0000);
        graphicsLayer.drawRect(0,0,displayElement.width, displayElement.height);
    }
}

Надеюсь, это поможет.

Answer 4

Когда я собирался опубликовать это, я подумал об использовании представления «Дизайн» редактора mxml в Flex Builder 3. Это более или менее соответствует тому, что я хотел. Любые другие предложения?