Flex Примеры, Adobe Flex, Флекс

Изучаем Flex. Примеры, статьи, рецепты …


Архив рубрики 'Контролы, Controls'

Как создать группированный список (AdvancedDataGrid Flex)

Появившийся во Flex 3 AdvancedDatagrid имеет ряд полезных фишек, одна из них – вывод группированных списков. Пример ниже
Читать далее ‘Как создать группированный список (AdvancedDataGrid Flex)’

Как динамически установить иконку на кнопку Button (Flex)

Промучился больше часа, пытаясь внедрить иконку в кнопку
решение вроде

не подходило, потому что список кнопок у меня строится динамически
мне приходит только массив url кнопок

в итоге нарыл очень полезную библиотеку
Читать далее ‘Как динамически установить иконку на кнопку Button (Flex)’

Как запретить вводить определенные символы в TextInput Flex

Пример ниже показывает как можно запретить вводить определенные символы в TextInput контрол, используя свойство «restrict»

Читать далее ‘Как запретить вводить определенные символы в TextInput Flex’

Открыть и закрыть ComboBox (селект) программно: Flex

Ниже пример открытия и закрытия ComboBox контрола путем вызова методов open() и close()
Читать далее ‘Открыть и закрыть ComboBox (селект) программно: Flex’

Как определить когда пользователь выбрал месяц в компоненте DateChooser (выбор даты) Flex

Иногда необходимо определить, когда пользователь выбрал месяц в компоненте DateChooser. Как это сделать путем добавления обработчика события scroll
показано ниже в примерах на mxml и ActionScipt
Читать далее ‘Как определить когда пользователь выбрал месяц в компоненте DateChooser (выбор даты) Flex’

Слайдер (Slider) в качестве item renderer колонки грида (DataGrid) во Flex

Ниже пример, иллюстрирующий как можно использовать HSlider в качестве itemRenderer в DataGrid Flex контроле

Читать далее ‘Слайдер (Slider) в качестве item renderer колонки грида (DataGrid) во Flex’

Получить количество строк во Flex TextArea

следующий пример показывает как определить количество строк в TextArea используя
метод getTextField() свойство numLines

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.utils.StringUtil;
 
            private function textArea_change(evt:Event):void {
                callLater(updateStats, [evt]);
            }
 
            private function updateStats(evt:Event):void {
                var nLines:uint = textArea.mx_internal::getTextField().numLines;
                var nChars:uint = textArea.length;
                var str:String = "{0} characters; {1} lines";
                panel.status = StringUtil.substitute(str,
                                    nChars,
                                    nLines);
            }
        ]]>
    </mx:Script>
 
    <mx:String id="str" source="lorem.txt" />
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="width (%):">
                <mx:HSlider id="slider"
                        minimum="50"
                        maximum="100"
                        value="100"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="10" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Panel id="panel"
            percentWidth="{slider.value}"
            height="100%">
        <mx:TextArea id="textArea"
                htmlText="{str}"
                condenseWhite="true"
                width="100%"
                height="100%"
                change="textArea_change(event);"
                resize="textArea_change(event);" />
    </mx:Panel>
 
</mx:Application>

оригинал статьи

Иконки TabNavigator (TabNavigator с иконками)

Я пытался добавить иконки к ТабНавигатору, в итоге получилось то, что приведено ниже
Фишка в том, что, фактически я добавил иконки к дочернему контейнеру табнавигатора

Код и рабочий пример под катом
Читать далее ‘Иконки TabNavigator (TabNavigator с иконками)’

Создание простого меню (Menubar)

Описание класса MenuBar (Официальная документация)

Простейшее меню выглядит примерно так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
< ?xml version="1.0"?>
<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initCollections();" >
 
    <mx:script>
        < ![CDATA[
 
            import mx.events.MenuEvent;
            import mx.controls.Alert;
            import mx.collections.*;
 
            [Bindable]
            public var menuBarCollection:XMLListCollection;
 
            private var menubarXML:XMLList =
                <>
                    <menuitem label="Menu1">
                        <menuitem label="MenuItem 1-A" data="1A"/>
                        <menuitem label="MenuItem 1-B" data="1B"/>
                    </menuitem>
                    <menuitem label="Menu2">
                        <menuitem label="MenuItem 2-A" type="check"  data="2A"/>
                        <menuitem type="separator" />
                        </menuitem><menuitem label="MenuItem 2-B" >
                            <menuitem label="SubMenuItem 3-A" type="radio"
                                groupName="one" data="3A"/>
                            <menuitem label="SubMenuItem 3-B" type="radio"
                                groupName="one" data="3B"/>
                        </menuitem>
 
                ;
 
            // Event handler for the MenuBar control's itemClick event.
            private function menuHandler(event:MenuEvent):void  {
                Alert.show("Label: " + event.item.@label + "\n" + 
                    "Data: " + event.item.@data, "Clicked menu item");
            }
 
            // Event handler to initialize the MenuBar control.
            private function initCollections():void {
                menuBarCollection = new XMLListCollection(menubarXML);
            }
         ]]>
    </mx:script>
 
    <mx:panel title="MenuBar Control Example" height="75%" width="75%" 
        paddingTop="10" paddingLeft="10">
 
        <mx:label width="100%" color="blue"
           text="Select a menu item."/>
 
        <mx:menubar labelField="@label" itemClick="menuHandler(event);" 
            dataProvider="{menuBarCollection}" />
 
    </mx:panel>
</mx:application>

Работающий пример под катом
Читать далее ‘Создание простого меню (Menubar)’