Какова лучшая практика для изменения состояний просмотра? - PullRequest
Новая
       13

Какова лучшая практика для изменения состояний просмотра?

0 голосов
/ 29 января 2009

У меня есть компонент с двумя круговыми диаграммами, которые отображают проценты на две конкретные даты (например, начальные и конечные значения). Но у меня есть три представления: только начальное значение, только конечное значение или показать оба. Я использую ToggleButtonBar для управления дисплеем. Какова наилучшая практика для изменения такого состояния зрения? Прямо сейчас (так как этот код был унаследован), состояния представления изменяются в функции ActionScript, которая устанавливает свойства visible и includeInLayout на каждой круговой диаграмме на основе selectedIndex ToggleButtonBar, но это не кажется лучшим способом Делать это - не очень динамично. Я хотел бы иметь возможность изменять состояние на основе имени selectedItem, в случае изменения порядка кнопок ToggleButtons, и поскольку я сохраняю имя selectedItem для дальнейшего использования.

Будет ли лучше использовать Штаты? Если это так, что будет лучшим способом реализовать это?

Спасибо.

Текущая логика: 

private function pieTypeToggleButtonBar_itemClickHandler():void
{
    // Show/Hide the appropriate Pie Charts based on the user's selection
    switch (pieTypeToggleButtonBar.selectedIndex)
    {
        // "Start Value" is selected
        case 0:
        {
            // Hide the End Value Pie Chart
            endValuePieChartVBox.visible = false;
            endValuePieChartVBox.includeInLayout = false;

            // Show the Start Value Pie Chart
            startValuePieChartVBox.includeInLayout = true;
            startValuePieChartVBox.visible = true;

            break;
        }
        // "End Value" is selected
        case 1:
        {
            // Hide the Start Value Pie Chart
            startValuePieChartVBox.visible = false;
            startValuePieChartVBox.includeInLayout = false;

            // Show the End Value Pie Chart
            endValuePieChartVBox.includeInLayout = true;
            endValuePieChartVBox.visible = true;

            break;
        }
        // "Both" is selected
        case 2:
        {
            // Show the Start Value Pie Chart
            startValuePieChartVBox.includeInLayout = true;
            startValuePieChartVBox.visible = true;

            // Show the End Value Pie Chart
            endValuePieChartVBox.includeInLayout = true;
            endValuePieChartVBox.visible = true;

            break;
        } 
    }
}

<mx:ToggleButtonBar id="pieTypeToggleButtonBar" selectedIndex="1" 
    itemClick="pieTypeToggleButtonBar_itemClickHandler()">
    <mx:Array>
        <mx:Object name="startValue" label="Start Value" />

        <mx:Object name="endValue" label="End Value" />

        <mx:Object name="both" label="Both" />
    </mx:Array>
</mx:ToggleButtonBar>

Ответы [ 3 ]

2 голосов
/ 29 января 2009

Поскольку свойство currentState принимает строку, которая отображается на свойство имени состояния, то похоже, что использование <mx:states> будет работать хорошо в вашем случае. На самом деле, я часто использую состояния для переключения между представлениями именно так, как вы описываете - устанавливая свойства visible и includeInLayout для компонентов (обычно компонентов Canvas или других видов контейнеров) с SetProperty: 

<mx:states>
    <mx:State name="View State 1">
        <mx:SetProperty target="{component1}" name="visible" value="true" />
        <mx:SetProperty target="{component2}" name="visible" value="false" />
        <mx:SetProperty target="{component3}" name="visible" value="false" />
        <mx:SetProperty target="{component1}" name="includeInLayout" value="true" />
        <mx:SetProperty target="{component2}" name="includeInLayout" value="false" />
        <mx:SetProperty target="{component3}" name="includeInLayout" value="false" />
    </mx:State>
    <mx:State name="View State 2">
        <mx:SetProperty target="{component1}" name="visible" value="false" />
        <mx:SetProperty target="{component2}" name="visible" value="true" />
        <mx:SetProperty target="{component3}" name="visible" value="false" />
        <mx:SetProperty target="{component1}" name="includeInLayout" value="false" />
        <mx:SetProperty target="{component2}" name="includeInLayout" value="true" />
        <mx:SetProperty target="{component3}" name="includeInLayout" value="false" />
    </mx:State>
    <mx:State name="View State 3">
        <mx:SetProperty target="{component1}" name="visible" value="false" />
        <mx:SetProperty target="{component2}" name="visible" value="false" />
        <mx:SetProperty target="{component3}" name="visible" value="true" />
        <mx:SetProperty target="{component1}" name="includeInLayout" value="false" />
        <mx:SetProperty target="{component2}" name="includeInLayout" value="false" />
        <mx:SetProperty target="{component3}" name="includeInLayout" value="true" />
    </mx:State>
</mx:states>

<mx:Script>
    <![CDATA[

        import mx.binding.utils.BindingUtils;
        import mx.binding.utils.ChangeWatcher;

        private function this_creationComplete(event:Event):void
        {
                // Use BindingUtils.bindSetter to hook into selectedIndex-change events
            var cw:ChangeWatcher = BindingUtils.bindSetter(setState, myBar, "selectedIndex");
        }

        private function setState(index:int):void
        {
            currentState = myBar.getChildren()[index].label;
        }

    ]]>
</mx:Script>

<mx:ToggleButtonBar id="myBar">
    <mx:dataProvider>
        <mx:Array>
            <mx:String>View State 1</mx:String>
            <mx:String>View State 2</mx:String>
            <mx:String>View State 3</mx:String>
        </mx:Array>
    </mx:dataProvider>
</mx:ToggleButtonBar>

<mx:Canvas id="component1">
    <mx:Text text="Component 1" />
</mx:Canvas>

<mx:Canvas id="component2">
    <mx:Text text="Component 2" />
</mx:Canvas>

<mx:Canvas id="component3">
    <mx:Text text="Component 3" />
</mx:Canvas>

... следуя этой общей схеме. Надеюсь, это поможет!

1 голос
/ 26 февраля 2009

Использование состояний в первом компоненте полностью не соответствует сути. Вы не должны устанавливать значение visible и includeInLayout, вы должны добавлять и удалять компоненты, используя AddChild и RemoveChild. Использование visible и includeInLayout для управления состоянием объектов на экране - это подрыв их намерений. К сожалению, поскольку Flex не имеет каких-либо условных логических тегов или даже условных атрибутов для добавления / удаления элементов, люди часто прибегают к этим двум тегам. Иногда это единственное практическое действие, но в вашем случае или в любом случае, когда у вас есть оператор 'switch', вы определенно хотите использовать состояния.

1 голос
/ 29 января 2009

Самый простой способ сделать это - использовать компонент ViewStack. Таким образом, вы просто выбираете selectedIndex, и все остальные панели будут скрыты (следите за проблемами инициализации с ViewStacks).

Из-за проблем, которые у меня были с ViewStacks в прошлом, я, вероятно, был бы склонен использовать состояния представления, хотя в качестве альтернативы. У штатов есть свои проблемы, но они определенно осуществимы для этой конкретной проблемы.

На вашем месте я бы рассмотрел любой из этих вариантов как решение, так как созданная функциональность уже была создана со стандартным API. Попробуйте использовать компоненты mx, если они соответствуют вашим конкретным потребностям, а не постоянно изобретать велосипед

...