Как реализовать этот псевдо-интерфейс TabNavigation во Flex? - PullRequest
Новая
       35

Как реализовать этот псевдо-интерфейс TabNavigation во Flex?

1 голос
/ 23 марта 2011

enter image description here

Я пытаюсь реализовать вышеуказанный пользовательский интерфейс навигации в flex.По сути, я бы хотел панель с двумя (или более) большими кнопками (см. Верхнюю картинку, кнопки одна и две).Когда пользователь нажимает кнопку 1, в нижней части полосы кнопок появляется набор новых кнопок (специфичных для первого режима), и их можно выбрать (см. Нижний левый рисунок).То же самое происходит, если вы нажмете на кнопку два (см. Нижний правый рисунок).По сути, кнопки 1 и 2 выбирают свою собственную панель с кнопками, которые можно использовать для выполнения каких-либо задач.

Примечание. Это меню не предназначено для наведения, т. Е. Нижние кнопки видны до тех пор, пока пользователь не выберет другой более высокий уровень.Кнопка уровня или щелчки на фоне панели.

Я думал об использовании контейнера Spark TabBar или ButtonBar, но я не уверен, что это лучший подход.

спасибо за любые советы или указатели на примеры!

1 Ответ

4 голосов
/ 23 марта 2011

Поскольку вы пометили это как flex 3 и Flex 4, я бы порекомендовал использовать для этого компоненты Flex 4.

Используйте набор панелей вкладок вместе с состояниями обложки вашего пользовательского компонента. Концептуально что-то вроде этого: 

<s:TabBar id="mainTabBar" change="onChange(event)"/>
<s:TabBar id="firstSubBar" includeIn="firstSelected" />
<s:TabBar id="secondSubBar" includeIn="secondSelected" />
<s:TabBar id="thirdSubBar" includeIn="thirdSelected" />

Есть метод изменения что-то вроде этого: 

protected function changeSelection(event:IndexChangeEvent): void {
  invalidateSkinState()
}

И в вашем методе getCurrentSkinState () сделайте что-то вроде этого: 

override protected getCurrentSkinState():void{
  if(mainTabBar.selectedIndex == 1){
   return "firstSelected";
 } else if(mainTabBar.selectedIndex == 2){
   return "secondSelected";
 } // etc. etc// 

 return super.getCurrentSkinState();
}

Нет причин, по которым вы не можете сделать что-то подобное с MX TabBar.

Это помогает?

...