Реализация toolstrip в flex

Question

Я новичок в программировании Flex. Я хочу реализовать пользовательскую панель инструментов для приложения. Эта панель инструментов будет содержать строку меню (или пользовательский эквивалент) для отображения общих пунктов меню, таких как «Файл», «Редактировать» и т. Д., А также поле поиска. Он должен быть достаточно гибким, чтобы включать другие пункты меню, такие как закладки и т. Д. В будущем. Может кто-нибудь предложить наиболее подходящий элемент управления, чтобы наследовать мои компоненты? Я думал о mx:Group, s:BorderContainer, mx:HBox, но не смог выбрать между ними. И ни один из них не кажется особенно подходящим для моей задачи, поскольку они просто указывают расположение других объектов. Есть ли какой-либо компонент, который имеет прямую поддержку такой функциональности. Я также думал об использовании mx:MenuBar, но я не знаю, будет ли он достаточно гибким для добавления не связанных с меню элементов, таких как окно поиска.

Answer 1

На самом базовом уровне ваша панель инструментов должна будет расположить элементы управления.Я обычно использую как: HGroup контейнер при реализации панелей инструментов и добавляю меню, кнопки, разделители, поля поиска и т. Д. По мере необходимости.Вы, вероятно, захотите нарисовать некоторый фон, такой как градиент, чтобы он выглядел лучше.В Flex 4 это обычно делается со скинами, но я думаю, что это немного излишне для такого простого компонента, которому не нужно менять его внешний вид в зависимости от различных состояний.Я бы порекомендовал что-то вроде следующего, которое позволяет рисовать фон для панели инструментов без необходимости создавать отдельный файл обложки для него:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="100%">
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xe0e0e0"/>
                <s:GradientEntry color="0xa0a0a0"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <s:HGroup top="2" bottom="2" left="8" right="8" verticalAlign="middle">
        <s:Button label="Something"/>
        <s:Button label="Another"/>
        <s:Button label="Other Another"/>
        <mx:Spacer width="100%"/>
        <s:TextInput/>
    </s:HGroup>
</s:Group>

Answer 2

Для скорости и простоты использования используйте панель меню.

Может быть что-то вроде этого:

//psuedo code
<HGroup> //draw your background for both components in the HGroup container
 <menuBar> //menubar has a transparent background
 <spacer width="100%">
 <searchBox>
</HGroup>