Flex - Приложения

Прежде чем мы начнем создавать настоящее приложение «HelloWorld» с помощью Flash Builder, давайте посмотрим, каковы фактические части приложения Flex:

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

• Библиотеки Flex Framework
• Клиентский код
• Общедоступные ресурсы (HTML / JS / CSS)
• Серверный код

Примеры расположения различных частей типичного приложения Flex, такого как HelloWord, будут такими, как показано ниже -

название	Место расположения
Корень проекта	Привет, мир/
Библиотеки Flex Framework	Путь сборки
Публичные ресурсы	html-шаблон
Клиентский код	таблица table-Bordered / com / tutorialspoint / client
Серверный код	таблица table-Bordered / com / tutorialspoint / server

Процесс сборки приложения

Для начала приложению Flex требуются библиотеки инфраструктуры Flex. Позже Flash Builder автоматически добавляет библиотеки в путь построения.

Когда мы создаем наш код с помощью Flash Builder, Flash Builder будет выполнять следующие задачи:

• Компилирует исходный код в файл HelloWorld.swf.

• Компилирует HelloWorld.html (файл-оболочку для SWF-файла) из файла index.template.html, хранящегося в папке html-template.

• Копирует файлы HelloWorld.swf и HelloWorld.html в целевую папку, bin-debug.

• Копирует swfobject.js, код JavaScript, отвечающий за динамическую загрузку файла swf в HelloWorld.html в целевой папке, bin-debug

• Копирует библиотеки фреймворков в виде SWF-файла с именем frameworks_xxx.swf в целевую папку, bin-debug

• Копирует другие гибкие модули (файлы .swf, такие как sparkskins_xxx.swf, textLayout_xxx.swf) в целевую папку.

Процесс запуска приложения

• Откройте файл HelloWorld.html, доступный в папке \ HelloWorld \ bin-debug, в любом веб-браузере.

• HelloWorld.swf загрузится автоматически, и приложение запустится.

Библиотеки Flex Framework

Ниже приведены краткие сведения о нескольких важных библиотеках фреймворка. Обратите внимание, что библиотеки Flex обозначаются с использованием нотации .swc.

Старший Нет	Узлы и описание
1	playerglobal.swc Эта библиотека специфична для FlashPlayer, установленного на вашем компьютере, и содержит собственные методы, поддерживаемые flash player.
2	textlayout.swc Эта библиотека поддерживает функции, связанные с макетом текста.
3	framework.swc Это библиотека фреймворка, содержащая основные функции Flex.
4	mx.swc В этой библиотеке хранятся определения элементов управления mx UI.
5	charts.swc Эта библиотека поддерживает элементы управления диаграммами.
6	spark.swc В этой библиотеке хранятся определения элементов управления Spark UI.
7	sparkskins.swc Эта библиотека поддерживает оформление элементов управления пользовательского интерфейса Spark.

Клиентский код

Код приложения Flex можно написать на MXML так же как ActionScript.

Старший Нет	Тип и описание
1	MXML MXML - это язык разметки XML, который мы будем использовать для размещения компонентов пользовательского интерфейса. MXML компилируется в ActionScript в процессе сборки.
2	ActionScript ActionScript - это объектно-ориентированный процедурный язык программирования, основанный на проекте спецификации языка ECMAScript (ECMA-262) редакции 4.

В Flex мы можем смешивать ActionScript и MXML, чтобы сделать следующее:

• Компоновка компонентов пользовательского интерфейса с помощью тегов MXML

• Используйте MXML для декларативного определения невизуальных аспектов приложения, таких как доступ к источникам данных на сервере.

• Используйте MXML для создания привязок данных между компонентами пользовательского интерфейса и источниками данных на сервере.

• Используйте ActionScript для определения прослушивателей событий внутри атрибутов событий MXML.

• Добавьте блоки сценария, используя тег.

• Включите внешние файлы ActionScript.

• Импортируйте классы ActionScript.

• Создайте компоненты ActionScript.

Публичные ресурсы

Это файлы справки, на которые ссылается приложение Flex, такие как HTML-страница хоста, CSS или изображения, расположенные в папке html-template. Он содержит следующие файлы -

Старший Нет	Имя и описание файла
1	index.template.html Размещение HTML-страницы с заполнителями. Flash Builder использует этот шаблон для создания реальной страницы HelloWorld.html с файлом HelloWorld.swf.
2	playerProductInstall.swf Это флэш-утилита для установки Flash Player в экспресс-режиме.
3	swfobject.js Это JavaScript, отвечающий за проверку версии установленного flash-плеера и загрузку HelloWorld.swf на странице HelloWorld.html.
4	html-template/history Эта папка содержит ресурсы для управления историей приложения.

HelloWorld.mxml

Это фактический код MXML / AS (ActionScript), написанный для реализации бизнес-логики приложения, который компилятор Flex переводит в SWF-файл, который будет выполняться флэш-плеером в браузере.

Пример класса HelloWorld Entry будет следующим:

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application 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%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">

   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
         }
      ]]>
   </fx:Script>
   
   <s:VGroup horizontalAlign = "center" width = "100%" height = "100%" 
      paddingTop = "100" gap = "50">
      <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" />
      <s:Button label = "Click Me!" id = "btnClickMe" 
         click = "btnClickMe_clickHandler(event)" />
   </s:VGroup>	
</s:Application>

В следующей таблице дается описание всех тегов, используемых в приведенном выше скрипте кода.

Старший Нет	Узел и описание
1	Application Определяет контейнер приложения, который всегда является корневым тегом приложения Flex.
2	Script Содержит бизнес-логику на языке ActionScript.
3	VGroup Определяет контейнер вертикальной группировки, который может вертикально содержать элементы управления пользовательского интерфейса Flex.
4	Label Представляет элемент управления Label, очень простой компонент пользовательского интерфейса, отображающий текст.
5	Button Представляет элемент управления Button, по которому можно щелкнуть, чтобы выполнить какое-либо действие.

Серверный код

Это серверная часть вашего приложения, и она не является обязательной. Если вы не выполняете какую-либо внутреннюю обработку в своем приложении, то эта часть вам не нужна, но если на серверной части требуется некоторая обработка и ваше клиентское приложение взаимодействует с сервером, вам придется разработать эти компоненты.

В следующей главе мы будем использовать все вышеупомянутые концепции для создания HelloWorld приложение с помощью Flash Builder.