Учебники

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

Декабрь 2, 2018

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

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

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

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

название Место нахождения
Корень проекта Привет, мир/
Библиотеки Flex Framework Путь сборки
Государственные ресурсы HTML-шаблон
Код на стороне клиента таблица с рамкой / com / tutorialspoint / клиент
Серверный код таблица с рамкой / 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

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

Компилирует исходный код в файл 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

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

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

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

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

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

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

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

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

Sr.No Узлы и описание
1

playerglobal.swc

Эта библиотека относится к FlashPlayer, установленному на вашем компьютере, и содержит встроенные методы, поддерживаемые Flash Player.

2

textlayout.swc

Эта библиотека поддерживает функции, связанные с макетом текста.

3

framework.swc

Это библиотека Flex Framework содержит основные функции Flex.

4

mx.swc

В этой библиотеке хранятся определения элементов управления mx UI.

5

charts.swc

Эта библиотека поддерживает элементы управления графиками.

6

spark.swc

В этой библиотеке хранятся определения элементов управления спарк-интерфейса.

7

sparkskins.swc

Эта библиотека поддерживает создание скинов для элементов управления пользовательским интерфейсом spark.

playerglobal.swc

Эта библиотека относится к FlashPlayer, установленному на вашем компьютере, и содержит встроенные методы, поддерживаемые Flash Player.

textlayout.swc

Эта библиотека поддерживает функции, связанные с макетом текста.

framework.swc

Это библиотека Flex Framework содержит основные функции Flex.

mx.swc

В этой библиотеке хранятся определения элементов управления mx UI.

charts.swc

Эта библиотека поддерживает элементы управления графиками.

spark.swc

В этой библиотеке хранятся определения элементов управления спарк-интерфейса.

sparkskins.swc

Эта библиотека поддерживает создание скинов для элементов управления пользовательским интерфейсом spark.

Код на стороне клиента

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

Sr.No Тип и описание
1

MXML

MXML — это язык разметки XML, который мы будем использовать для размещения компонентов пользовательского интерфейса. MXML компилируется в ActionScript во время процесса сборки.

2

ActionScript

ActionScript является объектно-ориентированным процедурным языком программирования и основан на спецификации языка проекта ECMAScript (ECMA-262), издание 4.

MXML

MXML — это язык разметки XML, который мы будем использовать для размещения компонентов пользовательского интерфейса. MXML компилируется в ActionScript во время процесса сборки.

ActionScript

ActionScript является объектно-ориентированным процедурным языком программирования и основан на спецификации языка проекта ECMAScript (ECMA-262), издание 4.

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

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

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

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

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

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

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

  • Импорт классов ActionScript.

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

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

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

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

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

Добавьте блоки скриптов, используя

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

Импорт классов ActionScript.

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

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

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

Sr.No Имя файла и описание
1

index.template.html

Хост HTML-страница, с заполнителями. Flash Builder использует этот шаблон для создания фактической страницы HelloWorld.html с файлом HelloWorld.swf.

2

playerProductInstall.swf

Это утилита для установки Flash Player в экспресс-режиме.

3

swfobject.js

Это JavaScript, ответственный за проверку версии установленного флеш плеера и загрузку HelloWorld.swf на странице HelloWorld.html.

4

HTML-шаблон / история

Эта папка содержит ресурсы для управления историей приложения.

index.template.html

Хост HTML-страница, с заполнителями. Flash Builder использует этот шаблон для создания фактической страницы HelloWorld.html с файлом HelloWorld.swf.

playerProductInstall.swf

Это утилита для установки Flash Player в экспресс-режиме.

swfobject.js

Это JavaScript, ответственный за проверку версии установленного флеш плеера и загрузку HelloWorld.swf на странице HelloWorld.html.

HTML-шаблон / история

Эта папка содержит ресурсы для управления историей приложения.

HelloWorld.mxml

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

Пример класса 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>

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

Sr.No Узел и описание
1

заявка

Определяет контейнер приложения, который всегда является корневым тегом приложения Flex.

2

скрипт

Содержит бизнес-логику на языке ActionScript.

3

VGroup

Определяет контейнер вертикальной группировки, который может содержать элементы управления Flex UI по вертикали.

4

этикетка

Представляет элемент управления Label, очень простой компонент пользовательского интерфейса, отображающий текст.

5

кнопка

Представляет элемент управления Button, на который можно нажать, чтобы выполнить какое-либо действие.

заявка

Определяет контейнер приложения, который всегда является корневым тегом приложения Flex.

скрипт

Содержит бизнес-логику на языке ActionScript.

VGroup

Определяет контейнер вертикальной группировки, который может содержать элементы управления Flex UI по вертикали.

этикетка

Представляет элемент управления Label, очень простой компонент пользовательского интерфейса, отображающий текст.

кнопка

Представляет элемент управления Button, на который можно нажать, чтобы выполнить какое-либо действие.

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

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

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

49
Share: