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.