Викиверситет

Flex 3

Семинар «Flex 3» является частью обучающих материалов кафедры веб-технологий.

Введение

править

Flex - это framework для Flash. Сам по себе Flash имеет ограничения, т.к. разрабатывался под web. Чтобы создавать "полноценные" desktop приложения нужен AIR. AIR - приложения требуют установленной AIR-машины на целевом компьютере.

Flex: Основной файл проекта - xml файл. В нём должен быть корневой тег mx:Application 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <!-- разметка, по аналогии с html  -->
        <mx:Label text="Моё первое flex-приложение!"></mx:Label>
</mx:Application>

Air:

Основной файл - так же xml-файл, но корневой тег mx:WindowedApplication.

Скрипты: Чтобы добавить скрипт, в код добавляется тег mx:Script 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init1(); init2();"> <!-- initialize - указывается функция, которая сработает при старте приложения -->
    <mx:Script> <!-- сейчас мы находимся внутри объекта "Application" и определяем его свойства и методы -->
    <![CDATA[
        /* здесь только импорты, определение переменных и функций.
            внутри функций можно уже делать что угодно. */
    ]]>
    </mx:Script>
</mx:Application>

Инструменты

править

Flex Builder 3

править

Настройка интерфейса

править

список функций по текущему файлу: Window → Outline

закладки добавляются по клику правой кнопкой мыши: Bookmark... удалить закладку можно только через панель управления закладками: Window → Other Views... → General → Bookmarks

Горячие клавиши

править

alt+↑ (или ↓) переместить стоку вверх/вниз ctrl+alt+↑(или ↓) дублировать строку ctrl+d удалить строку ctrl+f окно поиска, настройка "продолжить с начала страницы" называется "Wrap search" ctrl+k найти следующее вхождение выделенного текста

FlashDevelop

править

Требует установленного Adobe SDK (и Microsoft .NET 2.0). Для создания Adobe AIR проектов надо прописать пусть к SDK: Tools → Programm Settings... (F10) → AS3Context → Flex SDK Location → указать расположение Далее создаём проект AIR Flex 3 Project В созданном проекте будет два bat-файла. В обоих надо указать путь к Flex SDK. Один файл создаёт сертификат с паролем. Сертификат нужен для сборке air-пакета. Другой файл создаёт air-пакет.

Чтобы после компилирования по F5 автоматически открывался Firefox, нужно в: верхнее меню → Project → Properties... → Output → Test Movie → Run custom command → Edit → вписать без изменений: "C:\Program Files\Mozilla Firefox\firefox.exe";"$(OutputDir)\$(OutputName)"

Подключение swc библиотеки: Project → Properties... → Compiler Options → в одном из (External Links, SWC Include Libraries, SWC Libraries) указать путь к библиотеке. пример в картинках

отладка в web

править

запуск трейсера под firefox: 1) установить flash tracer (с официального сайта) 2) установить debug версию flash player 3) в опциях flash tracer указать расположение лог-фала (там написано, где должно лежать)

вывести подробную информацию об объекте в окно трейсера trace( ObjectUtil.toString(_itemsIndex) );

Основные моменты

править

Application

править

Application - это основной объект программы (типа, "главное окно"). В программе может быть только один такой объект. В Air такой объект называется WindowedApplication. Приложение и компоненты можно описывать с помощью mxml или с помощью AcrionScript.

mxml

править

у любого элемента в разметке mxml можно указать id: 

   <mx:DataGrid id="asf">

тогда к нему можно будет обратиться из кода flex как к объекту с именем asf

ActionScript

править

создание объектов var a:Button = new Button(); // объект создан, но он ещё не размещён на странице editPanel.addChild(a); // размещаем объект внутри какого-то уже отображённого контейнера

includeInLayout bool занимает ли объект место в разметке странице display bool отображается ли объект



Базовые классы Flex

править

Тут перечислены только те классы, которые есть во Flex, но отсутствуют в ActionScript.

ArrayCollection

править

ArrayCollection([{"aa":11, "bb":"qwq"},{"aa":22, "bb":"asd"}]); ArryaCollection - это класс, который наследуется от Array. В нём есть дополнительный возможности. В частности - сортировка. Пример: 

var sort:Sort = new Sort();
sort.fields = [new SortField("age", false)];
coll.sor = sort;
coll.refresh();

XML

править

http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/XML.html 

xml.attribute("attrName"); // получить значение xml-атрибута по его имени

то же самое можно получить как: 

xml.@attrName;

xml.elements(); // список вложенных элементов XML
xml.children(); // список вложенных элементов с учётом сортировки
xml.toXMLString(); // получить xml в виде строки

задать новое значение атрибуту XML 

xml.attribute( attrName )[0] = new XML( newValue );

XMLList

править

это список объектов XML. на сколько понимаю, через этот объект можно работать с коллекцией XML, находящихся внутри списка.

HTTPService

править

Объект для отправки форм 

public function stepByStepRequest(url:String, resultFunction:Function, params:Object=false):void {
    publicHTTPService = new HTTPService();
    publicHTTPService.url = url;
    if(params) {
        for (var param:String in params) {
            publicHTTPService.request[param] = params[param];
        };
    };
    publicHTTPService.addEventListener(ResultEvent.RESULT, resultFunction);
    publicHTTPService.addEventListener(FaultEvent.FAULT, stepByStepRequestFault);
    publicHTTPService.send();
    cursorManager.setBusyCursor();
}

Контролы

править

Alert

править 
import mx.controls.Alert;
Alert.show("some thing");

Button

править 
<mx:Button id="button" visible="false" click="buttonHandler()"> // кнопка будет доступна как this["button"] или просто button в функциях Application-а, но не в статичкеских методах.
    <mx:label>aaa</mx:label>       
</mx:Button>

Обработка клика мыши и нажатия клавиш 

public function a1(e:MouseEvent):void{
    a3();
}    
public function a2(e:KeyboardEvent):void{
    if (e.keyCode == Keyboard.ENTER){
        a3();
    }
}
submit.addEventListener(MouseEvent.CLICK, a1 );
submit.addEventListener(KeyboardEvent.KEY_DOWN, a2 );

ComboBox

править 
__lc = new ComboBox;
__lc.dataProvider = LogicClass.getLookup(); // метод который возвращает список объектов [{}, {}]
__lc.labelField = "v"; // указываем, какое поле использовать в качестве label

DataGrid // простая таблица

править

dataProvider

править

Для указания источника данных используется поле dataProvider 

   <mx:DataGrid dataProvider="{list}">

где list был определён ранее: 

       [Bindable]  // не знаю, что именно означает это ключевое слово, но без него компилятор выдаёт warning
       public var list:Array=[{"aa":11, "bb":"qwq"},{"aa":22, "bb":"asd"}];

Если данные для dataProvider должны генериться, то dataProvider лучше установить программно (внутри функции инициализации): 

asf.dataProvider = a1.list;

а в разметке mxml указывать связь с предполагаемыми полями: 

           <mx:DataGridColumn headerText="Column 1" dataField="aa" />

http://www.adobe.com/devnet/flex/quickstart/using_data_providers/

AdvancedDataGrid // продвинутая таблица

править 
<mx:AdvancedDataGrid id="ADG" headerShift="Alert.show('asd');">

события: 

headerShift="Alert.show('asd');" // срабатывает при изменении порядка колонок

Label

править

Свойства 

text	отображаемый текст
htmlText	текст с html-форматированием. умеет довольно мало. например, не умеет таблицы

умеет обрабатывать html-ссылки. чтобы ссылка стала кликабельна надо выставить selectable: 

s.htmlText = "<a href='http://google.ru/' target='_blank'>яндекс</a>";
s.selectable = true;

События имя описание свойства события

List

править 
list.dataProvider.removeItemAt(1); // удалить из вторую строку из списка
list.selectedIndex; // номер выбранного пункта
list.selectedIndices; // номера всех выбранных пунктов
list.selectedItem; // объект выбранного пункта
from.selectedItems; // список выбранных объектов
list.dataProvider.toString() // тексты всех элементов списка
list.dataProvider[0].toString() // текст первого элемента

ProgressBar

править 
source	объект, процесс изменения которого показывает ProgressBar. При загрузке файла - это ссылк на объект типа FileReference.
label	текст, который отображается под ProgressBar-ом ("loading 0%")

TextArea

править

TextInput

править

Tree

править

Раскрыть элемент дерева: 

        ............
        customTree.addEventListener(FlexEvent.CREATION_COMPLETE, handlerComplete);
        customTree.dataProvider = new ArrayCollection(dpTree);
        addChild(customTree);
   }
   protected function handlerComplete(event:FlexEvent):void{
        customTree.expandItem( customTree.dataProvider[0], true );
        customTree.expandItem( customTree.dataProvider[0]["children"][0], true );
   }

пролистнуть к выбранному item-у: 

__tree1.verticalScrollPosition = verticalPos; // это int номер строки, чтобы было по-красивше, то надо чуть сместить:
__tree1.verticalScrollPosition = verticalPos > 3 ? verticalPos - 3 : verticalPos;

Общее для всех контролов

править

errorString

править

Если установить errorString, то контрол будет обрамлён красной рамкой, а при наводе на него мыши появится сообщение об ошибке (значение errorString).


Контейнеры

править

Form

править

Элемент Form - это всего лишь контейнер для удобного построения пользовательских форм. Для того, чтобы отправить данные формы нужно использовать объект типа HTTPService.

FormItem

править 
fi = new FormItem;
fi.label = "Auth name :";
__authNm = new TextInput;
__authNm.text = auth.name;
fi.addChild(__authNm);
form.addChild(fi);

Panel

править 
editPanel.removeAllChildren();

TitleWindow

править

создаёт окно внутри приложения: 

<mx:TitleWindow showCloseButton="true">
    <mx:Button label="test1"></mx:Button>
</mx:TitleWindow>

свойства название тип title string заголовок окна

сделать окно перемещаемым

править

Положим, мы создали окно внутри с помощью ActionScript 

       import mx.containers.TitleWindow;
       private var win:TitleWindow = new TitleWindow();

1. добавляем обработчик события, что кнопка мыши была нажата 

   win.addEventListener(MouseEvent.MOUSE_DOWN, winStartMove);

2. при нажатии кнопки добавляем второй обработчик события, если кнопка отпущена 

       private function winStartMove(event:MouseEvent):void{
           win.startDrag();
           win.addEventListener( MouseEvent.MOUSE_UP, winStopMove );
       }

3. когда отпускаем кнопку, то удаляем второй обработчкик события 

       private function winStopMove(event:MouseEvent):void{
           win.stopDrag();
           win.removeEventListener(MouseEvent.MOUSE_UP, winStopMove );
       }

ограничение области для перемещения окна 

   var ws:Container = Application.application.workspace; // какой-то контейнер, внутри которого должны отображаться окна
   var p:Point = ws.localToGlobal( new Point(0, 0) ); // узнаём, где находится верхний левый угол у контейнера
   this.startDrag(false, new Rectangle(p.x, p.y, ws.width - this.width, ws.height - this.height));



Работа с датой и временем

править

Текущее время

править 
var currentTime:Date;
currentTime = new Date();                          
this.text = String(currentTime);

Форматирование даты

править 
import mx.formatters.DateFormatter;
private var dateFormater:DateFormatter;
dateFormater = new DateFormatter();
dateFormater.formatString = "H:NN:SS";
currentTime = new Date();
this.text = dateFormater.format( currentTime )

Таймер

править

взводим таймер: 

import flash.utils.Timer;
var ticker:Timer;
// creates a Timer that fires an event once per second
ticker = new Timer(1000);
// привязать функцию к событию срабатывания таймера. функция на входе должна получать (evt:TimerEvent).
ticker.addEventListener(TimerEvent.TIMER, onTick);
// starts the clock ticking
ticker.start();

назначаем функции к обработке: 

private function onTick(evt:TimerEvent):void{           
    timeDiff = timeDiff + 1;
    this.text = String(timeDiff);           
}


Переменные окружения (url и пр.)

править

Путь к текущему исполняемому файлу swf доступен через this.url (видимо не доступен из подключаемых компонентов приложения).

Передать параметры из html во flash

править 
   <object id='mySwf' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab' height='100%' width='100%'>
       <param name='src' value='FlashVarTest.swf'/>
       <param name='flashVars' value='firstName=Nick&lastName=Danger'/>
       <embed name='mySwf' src='FlashVarTest.swf' pluginspage='http://www.adobe.com/go/getflashplayer' height='100%' width='100%' flashVars='firstName=Nick&lastName=Danger'/>
   </object>

статья в документации Adobe называется "Passing request data with URL fragments"

Менеджеры

править

PopUpManager

править

класс для управления всплывающими окнами http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=layouts_065_45.html

Полезные функции

править

Определить ширину текста

править 
import flash.text.TextLineMetrics;       
private function a2():void{
     var bbb:TextLineMetrics = measureText( aaa.text );
     Alert.show( bbb.width.toString() );
}

Взаимодействие с javascript

править

получить текущий путь

править 
trace( ExternalInterface.call("window.location.href.toString") );

вроде бы этот класс позволяет вызывать любые функции javascript

Источник — https://ru.wikiversity.org/w/index.php?title=Flex_3&oldid=133992