понедельник, 2 мая 2011 г.

flex

flex

 

Введение

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();
}

Переменные окружения (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

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

print_r

некоторые простенькие объекты может обработать, но, видимо, далеко не все

        private function print_r(theObj:Object,indent:String=""):void {
            if (indent == "") {
                indent = " ";
            } else {
                indent += " ";
            }
            if(theObj is Array || theObj is Object) {
                for(var p:Object in theObj){
                    if(theObj[p] is Array|| theObj[p] is Object){
                        trace("\n"+indent+"["+p+"]("+typeof(theObj[p])+")=>");
                        print_r(theObj[p],indent);
                    } else {
                        trace("\n"+indent+"["+p+"]:"+theObj[p]);
                    }
                }
            }
            trace(String(theObj));
        }

nextHi

public static function getNextHi(hi:String):String
{
    var prefix:String;
    var endPart:String;
    var index:int = hi.lastIndexOf(".");
    if(index == -1){
        endPart = hi;
        prefix = '';
    } else {
        prefix = hi.substr(0, index + 1);
        endPart = hi.substr(index+1);
    }
    endPart = String(Number(endPart.substr(1))+1);
    return  prefix + (endPart.length - 1) + endPart;
}







Автор: на

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)