Flex - szybki przewodnik
Co to jest Flex?
Flex to potężna platforma aplikacji typu open source, która umożliwia tworzenie tradycyjnych aplikacji na przeglądarkę, urządzenia mobilne i komputery stacjonarne przy użyciu tego samego modelu programowania, narzędzia i bazy kodu.
Flex dostarcza FLEX SDK składający się z biblioteki klas Flex (klasy ActionScript), kompilatorów Flex, debuggera, języków programowania MXML i ActionScript oraz innych narzędzi do tworzenia ekspresyjnych i interaktywnych aplikacji internetowych (RIA)
Flex dba o interfejs użytkownika (UI) lub funkcjonalność aplikacji internetowej po stronie klienta. Funkcjonalność po stronie serwera zależy od komponentów po stronie serwera napisanych w tradycyjnym języku skryptowym (Java / PHP itp.)
Aplikacja oparta na Flex faktycznie dostarczana jako plik SWF i bardzo przypomina część HTML / JavaScript tradycyjnej aplikacji internetowej.
Aplikacja Flex jest wdrażana jako plik (i) SWF wraz z opakowaniem HTML, plikiem (i) CSS i dowolnymi plikami skryptów po stronie serwera (np. Java, .CFM, .PHP itp.) Na serwerze. Podobnie jak tradycyjne aplikacje internetowe.
Zasoby te są dostarczane z serwera do przeglądarki klienta przy użyciu standardowego sposobu żądania / odpowiedzi HTTP i programu Flash Player, który uruchamia aplikację w przeglądarce.
Zalety Flex
Aplikacje Flex są zwykle oparte na Flash Playerze, który może uzyskać dostęp do funkcji urządzenia, takich jak GPS, aparat, lokalna baza danych, akcelerometr graficzny.
Aplikacje Flex mogą działać na urządzeniach z systemem Android, BlackBerry Tablet OS i iOS.
Aplikacje Flex mogą działać w przeglądarkach, a także na komputerach stacjonarnych.
Aplikacje Flex są niezależne od platformy. Interfejs użytkownika może być natywny dla platformy lub może być taki sam na każdej platformie.
Aplikacje Flex mogą współpracować z serwerem za pomocą wszystkich głównych technologii serwerowych, takich jak Java, Spring, Hibernate, PHP, Ruby, .NET, Adobe ColdFusion i SAP, przy użyciu standardów branżowych, takich jak REST, SOAP, JSON, JMS i AMF.
Flex Applications zapewnia bogate doświadczenie użytkownika poprzez intuicyjną interakcję z aplikacją i prezentowanie informacji w wizualnie bogatszym interfejsie.
Aplikacja Flex to aplikacja jednostronicowa, w której stany mogą przechodzić z jednego stanu do innego bez konieczności pobierania nowej strony z serwera lub odświeżania przeglądarki.
Aplikacja Flex znacznie zmniejsza obciążenie serwera, ponieważ wystarczy tylko raz zwrócić aplikację, a nie nową stronę za każdym razem, gdy użytkownik zmieni widok.
Wady Flex
Aplikacje Flex są aplikacjami jednowątkowymi, ale Flex zapewnia asynchroniczny model programowania, aby złagodzić ten problem.
Flex jest oparty na ActionScript i XML. Nauka tych dwóch jest koniecznością, aby pracować w Flex.
Ten samouczek poprowadzi Cię, jak przygotować środowisko programistyczne do rozpoczęcia pracy z Adobe Flex Framework. Ten samouczek nauczy Cię również, jak skonfigurować JDK i Adobe Flash Builder na komputerze przed skonfigurowaniem Flex Framework.
Wymagania systemowe
FLEX wymaga JDK 1.4 lub nowszego, więc pierwszym wymaganiem jest zainstalowanie JDK w komputerze.
| JDK | 1.4 lub nowszy. |
|---|---|
| Pamięć | Brak minimalnych wymagań. |
| Miejsca na dysku | Brak minimalnych wymagań. |
| System operacyjny | Brak minimalnych wymagań. |
Wykonaj podane czynności, aby skonfigurować środowisko i rozpocząć tworzenie aplikacji Flex.
Krok 1 - Zweryfikuj instalację Java na swoim komputerze
Teraz otwórz konsolę i wykonaj następujące czynności java Komenda.
| OS | Zadanie | Komenda |
|---|---|---|
| Windows | Otwórz konsolę poleceń | c: \> java -version |
| Linux | Otwórz terminal poleceń | $ java -version |
| Prochowiec | Otwórz terminal | maszyna: ~ joseph $ java -version |
Sprawdźmy dane wyjściowe dla wszystkich systemów operacyjnych -
| OS | Wygenerowane dane wyjściowe |
|---|---|
| Windows | wersja java „1.6.0_21” Java (TM) SE Runtime Environment (kompilacja 1.6.0_21-b07) Maszyna wirtualna klienta Java HotSpot (TM) (kompilacja 17.0-b17, tryb mieszany, udostępnianie) |
| Linux | wersja java „1.6.0_21” Java (TM) SE Runtime Environment (kompilacja 1.6.0_21-b07) Maszyna wirtualna klienta Java HotSpot (TM) (kompilacja 17.0-b17, tryb mieszany, udostępnianie) |
| Prochowiec | wersja java „1.6.0_21” Java (TM) SE Runtime Environment (kompilacja 1.6.0_21-b07) Java HotSpot (TM) 64-bitowa maszyna wirtualna serwera (kompilacja 17.0-b17, tryb mieszany, udostępnianie) |
Krok 2 - Skonfiguruj zestaw Java Development Kit (JDK)
Jeśli nie masz zainstalowanej Java, możesz zainstalować pakiet Java Software Development Kit (SDK) z witryny Oracle Java SE Downloads . W pobranych plikach znajdziesz instrukcje dotyczące instalacji JDK, a następnie postępuj zgodnie z podanymi instrukcjami, aby zainstalować i skonfigurować instalację. Na koniec ustaw zmienne środowiskowe PATH i JAVA_HOME, aby odwoływały się do katalogu zawierającego elementy java i javac, zazwyczaj odpowiednio katalog_instalacyjny_java / bin i katalog_instalacyjny_java.
Ustaw JAVA_HOMEzmienna środowiskowa wskazująca lokalizację katalogu podstawowego, w którym na komputerze jest zainstalowana Java. Na przykład -
| OS | Wynik |
|---|---|
| Windows | Ustaw zmienną środowiskową JAVA_HOME na C: \ Program Files \ Java \ jdk1.6.0_21 |
| Linux | eksportuj JAVA_HOME = / usr / local / java-current |
| Prochowiec | eksportuj JAVA_HOME = / Library / Java / Home |
Dołącz lokalizację kompilatora Java do ścieżki systemowej.
| OS | Wynik |
|---|---|
| Windows | Dołącz ciąg;% JAVA_HOME% \ bin na końcu zmiennej systemowej, ścieżka. |
| Linux | eksportuj PATH =$PATH:$JAVA_HOME / bin / |
| Prochowiec | nie wymagane |
Krok 3 - Skonfiguruj Adobe Flash Builder 4.5
Wszystkie przykłady w tym samouczku zostały napisane przy użyciu Adobe Flash Builder 4.5 Profession IDE w wersji próbnej. Dlatego sugerujemy zainstalowanie najnowszej wersji programu Adobe Flash Builder na komputerze. Sprawdź również zgodność systemu operacyjnego.
Aby zainstalować Adobe Flash Builder IDE, pobierz najnowsze pliki binarne Adobe Flash Builder z https://www.adobe.com/in/products/flash-builder.html. Po pobraniu instalacji rozpakuj dystrybucję binarną w dogodnej lokalizacji. Na przykład w C: \ flash-builder w systemie Windows lub / usr / local / flash-builder w systemie Linux / Unix i na koniec ustaw odpowiednio zmienną PATH.
Flash Builder uruchomi się po wykonaniu następujących poleceń na komputerze z systemem Windows lub po dwukrotnym kliknięciu pliku FlashBuilder.exe
%C:\flash-builder\FlashBuilder.exeProgram Flash Builder można uruchomić, wykonując następujące polecenia na komputerze z systemem Unix (Solaris, Linux itp.) -
$/usr/local/flash-builder/FlashBuilderWersja próbna programu Adobe Flash Builder może być używana przez 60 dni. Po prostu zaakceptuj warunki i pomiń początkowe kroki rejestracji, aby kontynuować korzystanie z IDE. Dla naszego zrozumienia używamy wersji próbnej do celów dydaktycznych.
Po udanym uruchomieniu, jeśli wszystko jest w porządku, powinien wyświetlić następujący wynik -
Adobe Flash Builder jest dostarczany z wstępnie skonfigurowanymi pakietami FLEX SDK. W naszych przykładach używamy FLEX SDK 4.5, które są dostarczane w pakiecie z Adobe Flash Builder 4.5.
Krok 4 - Skonfiguruj Apache Tomcat
Najnowszą wersję programu Tomcat można pobrać z witryny https://tomcat.apache.org/. Po pobraniu instalacji rozpakuj dystrybucję binarną w dogodnym miejscu. Na przykład w C: \ apache-tomcat-6.0.33 w systemie Windows lub /usr/local/apache-tomcat-6.0.33 w systemie Linux / Unix i ustaw zmienną środowiskową CATALINA_HOME wskazującą lokalizacje instalacji.
Tomcat można uruchomić, wykonując następujące polecenia na komputerze z systemem Windows lub po prostu dwukrotnie klikając plik startup.bat
%CATALINA_HOME%\bin\startup.bat
or
C:\apache-tomcat-6.0.33\bin\startup.batTomcat można uruchomić, wykonując następujące polecenia na komputerze z systemem UNIX (Solaris, Linux itp.) -
$CATALINA_HOME/bin/startup.sh
Or
/usr/local/apache-tomcat-6.0.33/bin/startup.shPo pomyślnym uruchomieniu domyślne aplikacje internetowe dołączone do Tomcat będą dostępne pod adresem http://localhost:8080/. Jeśli wszystko jest w porządku, powinien wyświetlić następujący wynik -
Więcej informacji na temat konfigurowania i uruchamiania Tomcat można znaleźć w dokumentacji dołączonej tutaj, a także w witrynie internetowej Tomcat: http://tomcat.apache.org
Tomcat można zatrzymać, wykonując następujące polecenia na komputerze z systemem Windows -
%CATALINA_HOME%\bin\shutdown
Or
C:\apache-tomcat-5.5.29\bin\shutdownTomcat można zatrzymać, wykonując następujące polecenia na komputerze z systemem UNIX (Solaris, Linux itp.) -
$CATALINA_HOME/bin/shutdown.sh
Or
/usr/local/apache-tomcat-5.5.29/bin/shutdown.shZanim zaczniemy tworzyć rzeczywistą aplikację „HelloWorld” przy użyciu Flash Builder, zobaczmy, jakie są rzeczywiste części aplikacji Flex -
Wniosek Flex składa się z następujących czterech ważnych części, z których ostatnia część jest opcjonalna, ale pierwsze trzy są obowiązkowe.
- Biblioteki Flex Framework
- Kod po stronie klienta
- Zasoby publiczne (HTML / JS / CSS)
- Kod po stronie serwera
Przykładowe lokalizacje różnych części typowej aplikacji Flex, takiej jak HelloWord, będą pokazane poniżej -
| Nazwa | Lokalizacja |
|---|---|
| Katalog główny projektu | Witaj świecie/ |
| Biblioteki Flex Framework | Buduj ścieżkę |
| Zasoby publiczne | html-template |
| Kod po stronie klienta | tabela obramowanie tabeli / com / tutorialspoint / client |
| Kod po stronie serwera | tabela obramowany tabelą / com / tutorialspoint / server |
Proces tworzenia aplikacji
Na początek aplikacja Flex wymaga bibliotek platformy Flex. Później Flash Builder automatycznie dodaje biblioteki do ścieżki budowania.
Kiedy tworzymy nasz kod za pomocą narzędzia Flash Builder, Flash Builder wykona następujące zadania -
Kompiluje kod źródłowy do pliku HelloWorld.swf.
Kompiluje HelloWorld.html (plik opakowania dla pliku swf) z pliku index.template.html przechowywanego w folderze html-template
Kopiuje pliki HelloWorld.swf i HelloWorld.html w folderze docelowym, bin-debug.
Kopiuje swfobject.js, kod JavaScript odpowiedzialny za dynamiczne ładowanie pliku swf w HelloWorld.html w folderze docelowym, bin-debug
Kopiuje biblioteki frameworków w postaci pliku swf o nazwie frameworks_xxx.swf w folderze docelowym, bin-debug
Kopiuje inne moduły Flex (pliki .swf, takie jak sparkskins_xxx.swf, textLayout_xxx.swf) w folderze docelowym.
Proces uruchamiania aplikacji
Otwórz plik HelloWorld.html dostępny w folderze \ HelloWorld \ bin-debug w dowolnej przeglądarce internetowej.
HelloWorld.swf załaduje się automatycznie i aplikacja zacznie działać.
Biblioteki Flex Framework
Poniżej znajduje się krótki opis kilku ważnych bibliotek frameworków. Należy pamiętać, że biblioteki Flex są oznaczane przy użyciu notacji .swc
| Sr.No | Węzły i opis |
|---|---|
| 1 | playerglobal.swc Ta biblioteka jest specyficzna dla FlashPlayera zainstalowanego na twoim komputerze i zawiera natywne metody obsługiwane przez Flash Player. |
| 2 | textlayout.swc Ta biblioteka obsługuje funkcje związane z układem tekstu. |
| 3 | framework.swc To jest biblioteka frameworka Flex zawierająca podstawowe funkcje Flex. |
| 4 | mx.swc Ta biblioteka przechowuje definicje kontrolek interfejsu użytkownika mx. |
| 5 | charts.swc Ta biblioteka obsługuje kontrolki wykresów. |
| 6 | spark.swc Ta biblioteka przechowuje definicje kontrolek interfejsu użytkownika Spark. |
| 7 | sparkskins.swc Ta biblioteka obsługuje skórowanie kontrolek interfejsu użytkownika programu Spark. |
Kod po stronie klienta
Kod aplikacji Flex można pisać w MXML jak również ActionScript.
| Sr.No | Typ i opis |
|---|---|
| 1 | MXML MXML to język znaczników XML, którego będziemy używać do tworzenia elementów interfejsu użytkownika. MXML jest kompilowany do ActionScript podczas procesu budowania. |
| 2 | ActionScript ActionScript jest zorientowanym obiektowo językiem programowania proceduralnego i jest oparty na roboczej specyfikacji języka ECMAScript (ECMA-262) edycja 4. |
W Flex możemy mieszać ActionScript i MXML, aby wykonać następujące czynności -
Układ elementów interfejsu użytkownika za pomocą tagów MXML
Użyj MXML do deklaratywnego definiowania niewizualnych aspektów aplikacji, takich jak dostęp do źródeł danych na serwerze
Użyj MXML do tworzenia powiązań danych między komponentami interfejsu użytkownika a źródłami danych na serwerze.
Użyj ActionScript, aby zdefiniować detektory zdarzeń w atrybutach zdarzeń MXML.
Dodaj bloki skryptów za pomocą
Dołącz zewnętrzne pliki ActionScript.
Importuj klasy ActionScript.
Utwórz komponenty ActionScript.
Zasoby publiczne
Są to pliki pomocy, do których odwołuje się aplikacja Flex, takie jak strona HTML hosta, CSS lub obrazy umieszczone w folderze html-template. Zawiera następujące pliki -
| Sr.No | Nazwa i opis pliku |
|---|---|
| 1 | index.template.html Hostuj stronę HTML ze znacznikami miejsc. Flash Builder używa tego szablonu do tworzenia aktualnej strony HelloWorld.html z plikiem HelloWorld.swf. |
| 2 | playerProductInstall.swf To jest narzędzie flash do instalacji Flash Playera w trybie ekspresowym. |
| 3 | swfobject.js To jest JavaScript odpowiedzialny za sprawdzenie zainstalowanej wersji Flash Playera i załadowanie HelloWorld.swf na stronie HelloWorld.html. |
| 4 | html-template/history Ten folder zawiera zasoby do zarządzania historią aplikacji. |
HelloWorld.mxml
Jest to rzeczywisty kod MXML / AS (ActionScript) napisany w celu implementacji logiki biznesowej aplikacji i który kompilator Flex tłumaczy na plik SWF, który zostanie wykonany przez odtwarzacz Flash w przeglądarce.
Przykładowa klasa HelloWorld Entry będzie wyglądać następująco -
<?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>Poniższa tabela zawiera opis wszystkich tagów użytych w powyższym skrypcie kodu.
| Sr.No | Węzeł i opis |
|---|---|
| 1 | Application Definiuje kontener aplikacji, który jest zawsze znacznikiem głównym aplikacji Flex. |
| 2 | Script Zawiera logikę biznesową w języku ActionScript. |
| 3 | VGroup Definiuje pionowy kontener grupowania, który może zawierać elementy sterujące Flex UI w sposób pionowy. |
| 4 | Label Reprezentuje kontrolkę Label, bardzo prosty składnik interfejsu użytkownika, który wyświetla tekst. |
| 5 | Button Reprezentuje kontrolkę Button, którą można kliknąć, aby wykonać jakąś akcję. |
Kod po stronie serwera
To jest część aplikacji po stronie serwera i jest bardzo opcjonalna. Jeśli nie wykonujesz żadnego przetwarzania zaplecza w swojej aplikacji, nie potrzebujesz tej części, ale jeśli jest wymagane przetwarzanie w zapleczu, a aplikacja po stronie klienta współdziała z serwerem, będziesz musiał opracować te komponenty.
W następnym rozdziale wykorzystamy wszystkie wyżej wymienione koncepcje, aby utworzyć plik HelloWorld aplikacja za pomocą programu Flash Builder.
Do tworzenia aplikacji Flex użyjemy Flash Builder 4.5. Zacznijmy od prostegoHelloWorld podanie.
Krok 1 - Utwórz projekt
Pierwszym krokiem jest utworzenie prostego projektu Flex przy użyciu Flash Builder IDE. Uruchom kreatora projektu za pomocą opcjiFile > New > Flex Project. Teraz nazwij swój projekt HelloWorld za pomocą okna kreatora w następujący sposób -
Wybierz typ aplikacji Web (runs in Adobe Flash Player). Jeśli jednak ta opcja nie jest zaznaczona, pozostaw inne wartości domyślne jako takie i kliknij przycisk Zakończ. Po pomyślnym utworzeniu projektu w Eksploratorze projektów będziesz mieć następującą zawartość -
Oto krótki opis wszystkich ważnych folderów -
| Teczka | Lokalizacja |
|---|---|
| stół obramowany | Pliki kodu źródłowego (klasy mxml / as). Stworzyliśmy strukturę folderów com / tutorialspoint / client zawierającą specyficzne dla klienta klasy Java odpowiedzialne za wyświetlanie interfejsu użytkownika. |
| bin-debug | To jest część wyjściowa, reprezentuje rzeczywistą możliwą do wdrożenia aplikację internetową. Folder Historia zawiera pliki pomocnicze do zarządzania historią aplikacji Flex. framework_xxx.swf, pliki frameworka flex powinny być używane przez aplikację flex. HelloWorld.html, opakowujący / hostujący plik HTML dla aplikacji flex. HelloWorld.swf, nasza aplikacja oparta na flexie. playerProductInstall.swf, ekspresowy instalator Flash Playera. spark_xxx.swf, biblioteka do obsługi komponentów Spark. swfobject.js, JavaScript odpowiedzialny za załadowanie HelloWorld.swf w HelloWorld.html. Sprawdza wersję Flash Playera i przekazuje parametr inicjalizacji do pliku HelloWorld.swf. textLayout_xxx.swf, biblioteka do obsługi komponentów tekstowych. |
| html-template | To reprezentuje konfigurowalną aplikację internetową. Flash Builder kompiluje pliki z html-template do folderu bin-debug. Folder Historia zawiera pliki pomocnicze do zarządzania historią aplikacji Flex. index.template.html, wrapper / host Plik HTML dla aplikacji flex, posiadający miejsca na konfigurację specyficzną dla Flash Builder. Pobiera kompilację do HelloWorld.html w folderze bin-debug podczas kompilacji. playerProductInstall.swf, ekspresowy instalator programu Flash Player jest kopiowany do folderu bin-debug podczas kompilacji. swfobject.js, JavaScript odpowiedzialny za załadowanie HelloWorld.swf w HelloWorld.html. Sprawdza wersję Flash Playera i przekazuje parametr inicjalizacji do pliku HelloWorld.swf, który jest kopiowany do folderu bindebug podczas kompilacji. |
Krok 2 - Utwórz zewnętrzny plik CSS
Utwórz plik CSS styles.css dla Wrapper strony HTML w formacie html-template teczka.
html, body {
height:100%;
}
body {
margin:0;
padding:0;
overflow:auto;
text-align:center;
}
object:focus {
outline:none;
}
#flashContent {
display:none;
}
.pluginHeader {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#9b1204;
text-decoration:none;
font-weight:bold;
}
.pluginInstallText {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
line-height:18px;
font-style:normal;
}
.pluginText {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
line-height:18px;
font-style:normal;
}Krok 3 - Zmodyfikuj szablon strony HTML Wrapper
Zmodyfikuj szablon strony HTML opakowania index.template.html w htmltemplateteczka. Flash Builder utworzy domyślny szablon Wrapper HTML html-template / index.template.html , który zostanie skompilowany do HelloWorld.html.
Ten plik zawiera elementy zastępcze, które Flash Builder zastępuje podczas procesu kompilacji. Na przykład wersja odtwarzacza flash, nazwa aplikacji itp.
Zmodyfikujmy ten plik, aby wyświetlać niestandardowe komunikaty w przypadku, gdy wtyczka Flash nie jest zainstalowana.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml:lang = "en">
<head>
<title>${title}</title>
<meta name = "google" value = "notranslate" />
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<link rel = "stylesheet" href = "styles.css" type = "text/css"></link>
<link rel = "stylesheet" type = "text/css" href = "history/history.css" />
<script type = "text/javascript" table table-bordered = "history/history.js">
</script>
<script type = "text/javascript" table table-bordered = "swfobject.js"></script>
<script type = "text/javascript">
// For version detection, set to min. required Flash Player version,
//or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "${version_major}.${version_minor}.${version_revision}"; // To use express install, set to playerProductInstall.swf, //otherwise the empty string. var xiSwfUrlStr = "${expressInstallSwf}";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "${bgcolor}"; params.allowscriptaccess = "sameDomain"; params.allowfullscreen = "true"; var attributes = {}; attributes.id = "${application}";
attributes.name = "${application}"; attributes.align = "middle"; swfobject.embedSWF ( "${swf}.swf", "flashContent",
"${width}", "${height}",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case
//it is not replaced with a swf object.
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>
</head>
<body>
<div id = "flashContent">
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
<tr>
<td class = "pluginHeader">Flash Player Required</td>
</tr>
<tr>
<td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td>
</tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</tr>
</table>
</p>
</div>
<noscript>
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width = "${width}" height = "${height}" id = "${application}"> <param name = "movie" value = "${swf}.swf" />
<param name = "quality" value = "high" />
<param name = "bgcolor" value = "${bgcolor}" /> <param name = "allowScriptAccess" value = "sameDomain" /> <param name = "allowFullScreen" value = "true" /> <!--[if !IE]>--> <object type = "application/x-shockwave-flash" data = "${swf}.swf"
width = "${width}" height = "${height}">
<param name = "quality" value = "high" />
<param name = "bgcolor" value = "${bgcolor}" />
<param name = "allowScriptAccess" value = "sameDomain" />
<param name = "allowFullScreen" value = "true" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2"
border = "0">
<tr>
<td class = "pluginHeader">Flash Player Required</td>
</tr>
<tr>
<td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td>
</tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash
Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</tr>
</table>
</p>
</p>
<!--<![endif]-->
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
<tr><td class = "pluginHeader">Flash Player Required</td></tr>
<tr><td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td></tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash
Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</td>
</tr>
</table>
</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
</body>
</html>Krok 4 - Utwórz wewnętrzny plik CSS
Utwórz plik CSS Style.css dla HelloWorld.mxml w table tablebordered/com/tutorialspointteczka. Flex zapewnia podobne style css dla swoich kontrolek UI, jak istnieją style css dla kontrolek HTML UI.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.heading {
fontFamily: Arial, Helvetica, sans-serif;
fontSize: 17px;
color: #9b1204;
textDecoration:none;
fontWeight:normal;
}
.button {
fontWeight: bold;
}
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}Krok 5 - Zmodyfikuj klasę poziomu wejścia
Program Flash Builder utworzy domyślną tabelę plików mxml tablebordered / com.tutorialspoint / HelloWorld.mxml , która ma kontener główny znacznika <application> dla aplikacji. Zmodyfikujmy ten plik tak, aby wyświetlał „Hello, World!” -
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<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:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Możesz utworzyć więcej plików mxml lub actioncript w tym samym katalogu źródłowym, aby zdefiniować nowe aplikacje lub procedury pomocnicze.
Krok 6 - Zbuduj aplikację
Flash Builder ma Build Automaticallydomyślnie zaznaczone. Po prostu sprawdźProblemsZobacz, czy jest jakiś błąd. Po wprowadzeniu zmian nie zobaczysz żadnych błędów.
Krok 7 - Uruchom aplikację
Teraz kliknij
Jeśli wszystko jest w porządku, musisz zobaczyć wyskakujące okienko przeglądarki, uruchomioną i uruchomioną aplikację. Jeśli wszystko jest w porządku z Twoją aplikacją, otrzymasz następujący wynik: [ Wypróbuj online ]
Ponieważ uruchamiasz swoją aplikację we Flash Playerze, musisz zainstalować wtyczkę Flash Player dla Twojej przeglądarki. Po prostu postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby zainstalować wtyczkę. Jeśli masz już ustawioną wtyczkę Flash Player dla swojej przeglądarki, powinieneś być w stanie zobaczyć następujące dane wyjściowe -
Gratulacje! Zaimplementowałeś swoją pierwszą aplikację przy użyciuFlex.
W tym samouczku wyjaśniono, jak utworzyć aplikację war i jak wdrożyć go w katalogu głównym serwera WWW Apache Tomcat.
Jeśli zrozumiałeś ten prosty przykład, będziesz mógł również wdrożyć złożoną aplikację Flex, wykonując te same kroki.
Wykonajmy następujące kroki, aby utworzyć aplikację Flex -
| Krok | Opis |
|---|---|
| 1 | Utwórz projekt o nazwie HelloWorld pod pakietem. tutorialspoint.client, jak wyjaśniono w rozdziale Flex - tworzenie aplikacji . |
| 2 | Zmodyfikuj HelloWorld.mxml, jak wyjaśniono poniżej. Resztę plików nie zmieniaj. |
| 3 | Skompiluj i uruchom aplikację, aby upewnić się, że logika biznesowa działa zgodnie z wymaganiami. |
Postępuj zgodnie z instrukcjami podanymi poniżej, aby utworzyć kompilację wersji aplikacji Flex, a następnie wdrożyć ją na serwerze Tomcat -
Pierwszym krokiem jest utworzenie kompilacji wydania przy użyciu Flash Builder IDE. Uruchom kreatora kompilacji wydania za pomocą opcjiFile > Export > Flash Builder > Release Build.
Wybierz projekt jako HelloWorld za pomocą okna kreatora w następujący sposób
Pozostaw inne wartości domyślne jako takie i kliknij przycisk Zakończ. Teraz Flash Builder utworzy folder wersji bin zawierającej kompilację wersji projektu.
Teraz nasza kompilacja wydania jest gotowa, wykonajmy następujące kroki, aby wdrożyć aplikację Flex -
| Krok | Opis |
|---|---|
| 1 | Spakuj zawartość folderu bin-release aplikacji w postaci pliku HelloWorld.war i wdróż go na serwerze Apache Tomcat. |
| 2 | Uruchom aplikację internetową, używając odpowiedniego adresu URL, jak wyjaśniono poniżej w ostatnim kroku. |
Poniżej znajduje się zawartość zmodyfikowanego pliku mxml table table-bordered/com.tutorialspoint/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<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:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Gdy będziesz gotowy ze wszystkimi wprowadzonymi zmianami, skompiluj i uruchom aplikację w trybie normalnym, tak jak zrobiliśmy to w rozdziale Flex - Utwórz aplikację . Jeśli wszystko jest w porządku z Twoją aplikacją, to da następujący wynik: [ Wypróbuj online ]
Utwórz plik WAR
Teraz nasza aplikacja działa poprawnie i jesteśmy gotowi do wyeksportowania jej jako pliku wojennego. Wykonaj następujące kroki -
Przejdź do katalogu wydania bin-release projektu C: \ workspace \ HelloWorld \ binrelease
Wybierz wszystkie pliki i foldery dostępne w katalogu bin-release.
Spakuj wszystkie wybrane pliki i foldery do pliku o nazwie HelloWorld.zip .
Zmień nazwę HelloWorld.zip na HelloWorld.war.
Wdróż plik WAR
Zatrzymaj serwer Tomcat.
Skopiuj plik HelloWorld.war do katalogu instalacyjnego tomcat> folder webapps.
Uruchom serwer Tomcat.
Zajrzyj do katalogu webapps, powinien tam być utworzony folder HelloWorld.
Teraz HelloWorld.war został pomyślnie wdrożony w katalogu głównym serwera WWW Tomcat.
Uruchom aplikację
Wprowadź adres URL w przeglądarce internetowej -
http: // localhost: 8080 / HelloWorld / HelloWorld.html, aby uruchomić aplikację.
Nazwa serwera (localhost) i port (8080) mogą się różnić w zależności od konfiguracji Tomcat.
Cykl życia aplikacji Flex
Chociaż można budować aplikacje Flex bez zrozumienia faz cyklu życia aplikacji, dobrze jest znać podstawowy mechanizm; kolejność rzeczy. Pomoże Ci skonfigurować funkcje, takie jak ładowanie innych aplikacji Flex w czasie wykonywania oraz zarządzanie procesem ładowania i zwalniania bibliotek klas i zasobów w czasie wykonywania.
Dobre zrozumienie cyklu życia aplikacji Flex umożliwi tworzenie lepszych aplikacji i ich optymalizację, ponieważ będziesz wiedział, gdzie optymalnie uruchamiać kod. Na przykład, jeśli chcesz upewnić się, że jakiś kod działa podczas ładowania wstępnego, musisz wiedzieć, gdzie umieścić kod dla tego zdarzenia.
Kiedy ładujemy aplikację flex w przeglądarce, podczas cyklu życia aplikacji flex mają miejsce następujące zdarzenia.
Poniżej znajduje się krótki opis różnych wydarzeń w cyklu Flex Life.
| Sr.No | Opis wydarzenia |
|---|---|
| 1 | preInitialize: mx.core.UIComponent.preinitialize Typ zdarzenia: mx.events.FlexEvent.PREINITIALIZE To zdarzenie jest wywoływane na początku sekwencji inicjowania komponentu. Składnik jest w bardzo surowym stanie w momencie wywołania tego zdarzenia. Wiele składników, takich jak formant Button, tworzy wewnętrzne składniki podrzędne w celu zaimplementowania funkcji. Na przykład formant Button tworzy wewnętrzny składnik TextField interfejsu użytkownika, który reprezentuje tekst etykiety. Gdy Flex wywołuje zdarzenie preinicjalizacji, elementy podrzędne, w tym wszystkie wewnętrzne elementy podrzędne, składnika nie zostały jeszcze utworzone. |
| 2 | initialize: mx.core.UIComponent.initialize Typ zdarzenia: mx.events.FlexEvent.INITIALIZE To zdarzenie jest wysyłane po fazie wstępnej inicjalizacji. Framework Flex inicjuje wewnętrzną strukturę tego komponentu w tej fazie. To zdarzenie jest uruchamiane automatycznie po dodaniu komponentu do elementu nadrzędnego. Zwykle nie ma potrzeby wywoływania funkcji initialize (). |
| 3 | tworzenieComplete: mx.core.UIComponent.creationComplete Typ zdarzenia: mx.events.FlexEvent.CREATION_COMPLETE To zdarzenie jest wywoływane, gdy komponent zakończy budowę, przetwarzanie właściwości, pomiary, układ i rysowanie. W tym momencie, w zależności od jego widocznej właściwości, komponent nie jest widoczny, mimo że został narysowany. |
| 4 | applicationComplete: spark.components.Application.applicationComplete Typ zdarzenia: mx.events.FlexEvent.APPLICATION_COMPLETE Wysyłane po zainicjowaniu aplikacji, przetworzeniu przez LayoutManager i dołączeniu do listy wyświetlania. Jest to ostatnie zdarzenie w cyklu życia tworzenia aplikacji i oznacza, że aplikacja została całkowicie załadowana. |
Przykład Flex Life Cycle
Postępujmy zgodnie z instrukcjami, aby zrozumieć cykl życia testowego aplikacji Flex, tworząc aplikację testową -
| Krok | Opis |
|---|---|
| 1 | Utwórz projekt o nazwie HelloWorld pod pakietem. tutorialspoint.client, jak wyjaśniono w rozdziale Flex - tworzenie aplikacji . |
| 2 | Zmodyfikuj HelloWorld.mxml, jak wyjaśniono poniżej. Resztę plików nie zmieniaj. |
| 3 | Skompiluj i uruchom aplikację, aby upewnić się, że logika biznesowa działa zgodnie z wymaganiami. |
Poniżej znajduje się zawartość zmodyfikowanego pliku mxml src/com.tutorialspoint/HelloWorld.mxml.
<?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 = "reportEvent(event)"
preinitialize = "reportEvent(event)"
creationComplete = "reportEvent(event)"
applicationComplete = "reportEvent(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
[Bindable]
private var report:String = "";
private function reportEvent(event:FlexEvent):void {
report += "\n" + (event.type + " event occured at: "
+ getTimer() + " ms" + "\n");
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label textAlign = "center" width="100%" id = "lblHeader"
fontSize = "40" color = "0x777777" styleName = "heading"
text = "Life Cycle Events Demonstration" />
<s:TextArea id = "reportText" text = "{report}" editable = "false"
width = "300" height = "200">
</s:TextArea>
</s:VGroup>
</s:BorderContainer>
</s:Application>Gdy będziesz gotowy ze wszystkimi wprowadzonymi zmianami, skompiluj i uruchom aplikację w trybie normalnym, tak jak zrobiliśmy to w rozdziale Flex - Utwórz aplikację . Jeśli wszystko jest w porządku z Twoją aplikacją, otrzymasz następujący wynik: [ Wypróbuj online ]
Flex obsługuje użycie składni i stylów CSS, aby zastosować je do kontrolek interfejsu użytkownika w taki sam sposób, jak komponenty CSS do HTML.
Sposób 1: Korzystanie z zewnętrznego pliku arkusza stylów
Możesz odwołać się do arkusza stylów dostępnego w ścieżce klas aplikacji. Weźmy na przykład plik Style.css w formaciecom/tutorialspoint/client folder gdzie również leży plik HelloWorld.mxml.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
...
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}Następnie można odwołać się do pliku css, korzystając z następującego fragmentu kodu
<fx:Style source = "/com/tutorialspoint/client/Style.css" />Przypisz style do składnika interfejsu użytkownika za pomocą właściwości styleName
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
...
</s:BorderContainer>Sposób 2: Używanie stylów w komponencie kontenera interfejsu użytkownika
Możesz definiować style w komponencie kontenera interfejsu użytkownika za pomocą tagu <fx: Style>
Selektor poziomu klasy
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
/* class level selector */
.errorLabel {
color: red;
}
</fx:Style>Przypisz style do składnika interfejsu użytkownika za pomocą właściwości styleName.
<s:Label id = "errorMsg" text = "This is an error message" styleName = "errorLabel" />Selektor poziomu identyfikatora
Styl komponentu interfejsu użytkownika za pomocą selektora identyfikatora.
<fx:Style>
/* id level selector */
#msgLabel {
color: gray;
}
</fx:Style>
<s:Label id = "msgLabel" text = "This is a normal message" />Selektor poziomu typu
Styl jednego typu komponentu interfejsu użytkownika w jednym GO.
<fx:Style>
/* style applied on all buttons */
s|Button {
fontSize: 15;
color: #9933FF;
}
</fx:Style>
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />Styl Flex z przykładem CSS
Postępujmy zgodnie z instrukcjami, aby sprawdzić styl CSS aplikacji Flex, tworząc aplikację testową -
| Krok | Opis |
|---|---|
| 1 | Utwórz projekt o nazwie HelloWorld pod pakietem com.tutorialspoint.client, jak wyjaśniono w rozdziale Flex - tworzenie aplikacji . |
| 2 | Zmodyfikuj Style.css, HelloWorld.mxml, jak wyjaśniono poniżej. Resztę plików nie zmieniaj. |
| 3 | Skompiluj i uruchom aplikację, aby upewnić się, że logika biznesowa działa zgodnie z wymaganiami. |
Poniżej znajduje się zawartość zmodyfikowanego pliku CSS src/com.tutorialspoint/Style.css.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.heading
{
fontFamily: Arial, Helvetica, sans-serif;
fontSize: 17px;
color: #9b1204;
textDecoration:none;
fontWeight:normal;
}
.button {
fontWeight: bold;
}
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}Poniżej znajduje się zawartość zmodyfikowanego pliku mxml src/com.tutorialspoint/HelloWorld.mxml.
<?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)">
<!--Add reference to style sheet -->
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<!--Using styles within mxml file -->
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
/* class level selector */
.errorLabel {
color: red;
}
/* id level selector */
#msgLabel {
color: gray;
}
/* style applied on all buttons */
s|Button {
fontSize: 15;
color: #9933FF;
}
</fx:Style>
<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 = "CSS Demonstrating Application";
}
]]>
</fx:Script>
<s:BorderContainer width = "560" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label width = "100%" id = "lblHeader" fontSize = "40"
color = "0x777777" styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />
<s:Label id = "errorMsg"
text = "This is an error message" styleName = "errorLabel" />
<s:Label id = "msgLabel" text = "This is a normal message" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Gdy będziesz gotowy ze wszystkimi wprowadzonymi zmianami, skompiluj i uruchom aplikację w trybie normalnym, tak jak zrobiliśmy to w rozdziale Flex - Utwórz aplikację . Jeśli wszystko jest w porządku z Twoją aplikacją, da to następujący wynik: [ Wypróbuj online ]
Co to jest skórowanie?
Skórki w programie Flex to proces całkowitego dostosowywania wyglądu i działania komponentu interfejsu użytkownika.
Karnacja może definiować tekst, obraz, filtry, przejścia i stany komponentu.
Karnację można utworzyć jako oddzielny składnik mxml lub ActionScript.
Używając skórki, możemy kontrolować wszystkie wizualne aspekty komponentu UI.
Proces definiowania karnacji jest taki sam dla wszystkich składników interfejsu użytkownika.
Krok 1 - Utwórz skórkę
Uruchom kreatora Utwórz skórkę MXML za pomocą opcji File > New > MXML Skin.
Wprowadź pakiet jako com.tutorialspoint.skin, nazwij jak GradientBackgroundSkin i wybierz komponent hosta jako istniejącą kontrolkę Flex BorderContainerspark.component.BorderContainer.
Teraz stworzyłeś skórkę dla BorderContainer. Zmodyfikuj zawartość pliku skórki mxmlsrc/com.tutorialspoint/skin/GradientBackgroundSkin.mxml.
Zaktualizuj warstwę wypełnienia w następujący sposób -
<!-- fill -->
<s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
<s:fill>
<s:LinearGradient rotation = "90">
<s:GradientEntry color = "0x888888" ratio = "0.2" />
<s:GradientEntry color = "0x111111" ratio = "1" />
</s:LinearGradient>
</s:fill>
</s:Rect>Krok 2: Zastosuj skórę
Możesz nakładać skórę na komponent na dwa sposoby -
Zastosuj skórkę w skrypcie MXML (statycznie)
Zastosować GradientBackgroundSkin do BorderContainer z id mainContainer używając jego skinClass atrybut.
<s:BorderContainer width = "560" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle"
skinClass = "com.tutorialspoint.skin.GradientBackgroundSkin">Zastosuj karnację w ActionScript (dynamicznie)
Zastosować GradientBackgroundSkin do BorderContainer z id mainContainer używając jego skinClass własność.
protected function gradientBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", GradientBackgroundSkin);
}Styl Flex z przykładem skóry
Wykonajmy następujące kroki, aby zobaczyć, jak działa skinning w aplikacji Flex, tworząc aplikację testową -
| Krok | Opis |
|---|---|
| 1 | Utwórz projekt o nazwie HelloWorld pod pakietem com.tutorialspoint.client, jak wyjaśniono w rozdziale Flex - tworzenie aplikacji . |
| 2 | Utwórz skórkę GradientBackgroundSkin.mxml w pakiecie com.tutorialspoint.skin, jak wyjaśniono powyżej. Resztę plików nie zmieniaj. |
| 3 | Zmodyfikuj HelloWorld.mxml, jak wyjaśniono poniżej. Resztę plików nie zmieniaj. |
| 4 | Skompiluj i uruchom aplikację, aby upewnić się, że logika biznesowa działa zgodnie z wymaganiami. |
Poniżej znajduje się zawartość pliku GradientBackgroundSkin.mxml src/com/tutorialspoint/skin/GradientBackg roundSkin.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Skin xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
[HostComponent("spark.components.BorderContainer")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name = "disabled" />
<s:State name = "disabled" />
<s:State name = "normal" />
</s:states>
<!-- SkinParts
name = contentGroup, type = spark.components.Group, required = false
-->
<!-- fill -->
<s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
<s:fill>
<s:LinearGradient rotation = "90">
<s:GradientEntry color = "0x111111" ratio = "0.2" />
<s:GradientEntry color = "0x888888" ratio = "1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- must specify this for the host component -->
<s:Group id = "contentGroup" left = "0" right = "0" top = "0" bottom = "0" />
</s:Skin>Poniżej znajduje się treść zmodyfikowanego HelloWorld.mxml filesrc/com/tutorialspoint/client/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import com.tutorialspoint.skin.GradientBackgroundSkin;
import mx.controls.Alert;
import mx.events.FlexEvent;
import spark.skins.spark.BorderContainerSkin;
protected function btnClickMe_clickHandler(event:MouseEvent):void {
Alert.show("Hello World!");
}
protected function application_initializeHandler(event:FlexEvent):void {
lblHeader.text = "My Hello World Application";
}
protected function gradientBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", GradientBackgroundSkin );
}
protected function standardBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", BorderContainerSkin );
}
]]>
</fx:Script>
<fx:Declarations>
<s:RadioButtonGroup id = "selectorGroup" />
</fx:Declarations>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
skinClass = "spark.skins.spark.BorderContainerSkin"
horizontalCenter = "0" verticalCenter = "0" cornerRadius = "10">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "green"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />
<s:RadioButton color = "gray" fontWeight = "bold"
group = "{selectorGroup}" label = "Standard Background"
click = "standardBackground_clickHandler(event)" selected = "true" />
<s:RadioButton color = "gray" fontWeight = "bold"
group = "{selectorGroup}" label = "Gradient Background"
click = "gradientBackground_clickHandler(event)" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Gdy będziesz gotowy ze wszystkimi wprowadzonymi zmianami, skompiluj i uruchom aplikację w trybie normalnym, tak jak zrobiliśmy to w rozdziale Flex - Utwórz aplikację . Jeśli wszystko jest w porządku z Twoją aplikacją, otrzymasz następujący wynik: [ Wypróbuj online ]
Co to jest wiązanie danych?
Wiązanie danych to proces, w którym dane jednego obiektu są powiązane z innym obiektem. Wymaga właściwości źródłowej, właściwości docelowej i zdarzenia wyzwalającego, które wskazuje, kiedy należy skopiować dane ze źródła do celu.
Flex zapewnia trzy sposoby wiązania danych, jak poniżej
- Składnia nawiasów klamrowych w skrypcie MXML ({})
- <fx: binding> tag w MXML
- BindingUtils w ActionScript
Wiązanie danych - używanie nawiasów klamrowych w MXML
Poniższy przykład ilustruje, jak używać nawiasów klamrowych do określania powiązania danych źródła z miejscem docelowym.
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />Wiązanie danych - użycie tagu <fx: Binding> w MXML
Poniższy przykład demonstruje, jak używać
<fx:Binding source = "txtInput1.text" destination = "txtInput2.text" />
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" />Wiązanie danych - użycie BindingUtils w ActionScript
Poniższy przykład ilustruje sposób używania BindingUtils do określania powiązania danych źródła z miejscem docelowym.
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.events.FlexEvent;
protected function txtInput2_preinitializeHandler(event:FlexEvent):void {
BindingUtils.bindProperty(txtInput2,"text",txtInput1, "text");
}
]]>
</fx:Script>
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2"
preinitialize = "txtInput2_preinitializeHandler(event)" />Przykład wiązania danych Flex
Postępujmy zgodnie z instrukcjami podanymi poniżej, aby zobaczyć, jak skinning działa w aplikacji Flex, tworząc aplikację testową -
| Krok | Opis |
|---|---|
| 1 | Utwórz projekt o nazwie HelloWorld w pakiecie com.tutorialspoint.client, jak wyjaśniono w rozdziale Flex - tworzenie aplikacji . |
| 2 | Zmodyfikuj HelloWorld.mxml, jak wyjaśniono poniżej. Resztę plików nie zmieniaj. |
| 3 | Skompiluj i uruchom aplikację, aby upewnić się, że logika biznesowa działa zgodnie z wymaganiami. |
Poniżej znajduje się zawartość zmodyfikowanego pliku HelloWorld.mxmlsrc/com/tutorialspoint/client/HelloWorld.mxml.
<?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">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.events.FlexEvent;
protected function txtInput6_preinitializeHandler(event:FlexEvent):void {
BindingUtils.bindProperty(txtInput6,"text",txtInput5, "text");
}
]]>
</fx:Script>
<fx:Binding source = "txtInput3.text" destination = "txtInput4.text" />
<s:BorderContainer width = "500" height = "550" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Data Binding Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel title = "Example #1 (Using Curly Braces,\{\})" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput1" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />
</s:HGroup>
</s:Panel>
<s:Panel title = "Example #2 (Using <fx:Binding>)" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput3" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:Label id = "txtInput4" />
</s:HGroup>
</s:Panel>
<s:Panel title = "Example #3 (Using BindingUtils)" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput5" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:TextInput enabled = "false" id = "txtInput6"
preinitialize = "txtInput6_preinitializeHandler(event)" />
</s:HGroup>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Gdy będziesz gotowy ze wszystkimi wprowadzonymi zmianami, skompiluj i uruchom aplikację w trybie normalnym, tak jak zrobiliśmy to w rozdziale Flex - Utwórz aplikację . Jeśli wszystko jest w porządku z Twoją aplikacją, otrzymasz następujący wynik: [ Wypróbuj online ]
Każdy interfejs użytkownika uwzględnia trzy główne aspekty -
UI Elements- Są to podstawowe elementy wizualne, które użytkownik ostatecznie widzi i z którymi wchodzi w interakcję. Flex zawiera ogromną listę powszechnie używanych i typowych elementów, od podstawowych do złożonych, które omówimy w tym samouczku.
Layouts- Definiują sposób organizacji elementów interfejsu użytkownika na ekranie i zapewniają ostateczny wygląd i działanie GUI (graficzny interfejs użytkownika). Ta część zostanie omówiona w rozdziale Układ.
Behavior- Te zdarzenia występują, gdy użytkownik wchodzi w interakcję z elementami interfejsu użytkownika. Ta część zostanie omówiona w rozdziale Obsługa wydarzeń.
Elementy Flex UI
Biblioteka Flex UI udostępnia klasy w dobrze zdefiniowanej hierarchii klas, aby tworzyć złożone internetowe interfejsy użytkownika. Wszystkie klasy w tej hierarchii komponentów zostały wyprowadzone zEventDispatcher klasa bazowa, jak pokazano poniżej -
Każda kontrolka Basic UI dziedziczy właściwości z klasy UI Component, która z kolei dziedziczy właściwości z EventDispatcher i innych klas najwyższego poziomu.
| Sr.No | Sterowanie i opis |
|---|---|
| 1 | Klasa Flex EventDispatcher Klasa EventDispatcher jest klasą bazową dla wszystkich klas, które mogą wysyłać zdarzenia. Klasa EventDispatcher umożliwia dowolnemu obiektowi na liście wyświetlania bycie celem zdarzenia i jako taki na używanie metod interfejsu IEventDispatcher. |
| 2 | Flex UIComponent Klasa UIComponent jest klasą bazową dla wszystkich komponentów wizualnych, zarówno interaktywnych, jak i nieinteraktywnych. |
Podstawowe sterowanie
Poniżej znajduje się kilka ważnych podstawowych elementów sterujących -
| Sr.No | Sterowanie i opis |
|---|---|
| 1 | Etykieta Etykieta to komponent UIC niskiego poziomu, który może renderować jeden lub więcej wierszy jednolicie sformatowanego tekstu. |
| 2 | Tekst Kontrolka Tekst umożliwia wyświetlanie zawartości HTML, a także zwykłego tekstu w aplikacji. |
| 3 | Wizerunek Kontrolka Obraz umożliwia importowanie plików JPEG, PNG, GIF i SWF w czasie wykonywania. |
| 4 | LinkButton Kontrolka LinkButton to kontrolka Button bez obramowania, której zawartość jest wyróżniana, gdy użytkownik przesunie nad nią wskaźnik myszy. |
Kontrolki formularzy umożliwiają użytkownikom wprowadzanie danych i zapewniają im możliwość interakcji z aplikacją. Każdy interfejs użytkownika formularza kontroluje i dziedziczy właściwości z klasy UIComponent, która z kolei dziedziczy właściwości z EventDispatcher i innych klas najwyższego poziomu.
| Sr.No | Sterowanie i opis |
|---|---|
| 1 | Klasa Flex EventDispatcher Klasa EventDispatcher jest klasą bazową dla wszystkich klas, które mogą wysyłać zdarzenia. Klasa EventDispatcher umożliwia dowolnemu obiektowi na liście wyświetlania bycie celem zdarzenia i jako taki na używanie metod interfejsu IEventDispatcher. |
| 2 | Flex UIComponent Klasa UIComponent jest klasą bazową dla wszystkich komponentów wizualnych, zarówno interaktywnych, jak i nieinteraktywnych. |
Formanty
Oto kilka ważnych kontrolek formularza -
| Sr.No | Sterowanie i opis |
|---|---|
| 1 | Przycisk Składnik Button jest często używanym prostokątnym przyciskiem. |
| 2 | ToggleButton Składnik ToggleButton definiuje przycisk przełącznika. |
| 3 | CheckBox Składnik CheckBox składa się z opcjonalnej etykiety i małego pola, które może zawierać znacznik wyboru lub nie. |
| 4 | Narzędzie do wybierania kolorów Kontrolka ColorPicker umożliwia użytkownikowi wybranie koloru z listy próbek. |
| 5 | ComboBox Formant ComboBox jest klasą podrzędną kontrolki DropDownListBase. |
| 6 | DateChooser Formant DateChooser wyświetla nazwę miesiąca, rok i siatkę dni miesiąca z kolumnami z etykietami według dnia tygodnia. |
| 7 | Przycisk radiowy Składnik RadioButton umożliwia użytkownikowi dokonanie pojedynczego wyboru w zestawie wzajemnie wykluczających się wyborów. |
| 8 | TextArea TextArea to kontrolka wprowadzania tekstu, która umożliwia użytkownikom wprowadzanie i edytowanie wielu wierszy sformatowanego tekstu. |
| 9 | Wprowadzanie tekstu TextInput to kontrolka wprowadzania tekstu, która umożliwia użytkownikom wprowadzanie i edytowanie pojedynczego wiersza jednolicie sformatowanego tekstu. |
| 10 | Lista rozwijana Kontrolka DropDownList zawiera listę rozwijaną, z której użytkownik może wybrać pojedynczą wartość. |
| 11 | NumericStepper Kontrolka NumericStepper umożliwia wybranie liczby z uporządkowanego zestawu. |
Złożone kontrolki zapewniają użytkownikom zaawansowane możliwości radzenia sobie z dużą ilością danych w łatwiejszy sposób i zapewniają im możliwość interakcji z aplikacją. Każda kontrolka Complex UI dziedziczy właściwości z klasy UIComponent, która z kolei dziedziczy właściwości z EventDispatcher i innych klas najwyższego poziomu.
| Sr.No | Sterowanie i opis |
|---|---|
| 1 | Klasa Flex EventDispatcher Klasa EventDispatcher jest klasą bazową dla wszystkich klas, które mogą wysyłać zdarzenia. Klasa EventDispatcher umożliwia dowolnemu obiektowi na liście wyświetlania bycie celem zdarzenia i jako taki na używanie metod interfejsu IEventDispatcher. |
| 2 | Flex UIComponent Klasa UIComponent jest klasą bazową dla wszystkich komponentów wizualnych, zarówno interaktywnych, jak i nieinteraktywnych. |
Złożone kontrole
Poniżej znajduje się kilka ważnych złożonych kontroli -
| Sr.No | Sterowanie i opis |
|---|---|
| 1 | Siatka danych Formant DataGrid wyświetla wiersz nagłówków kolumn powyżej przewijalnej siatki. |
| 2 | AdvancedDataGrid AdvancedDataGrid dodaje kilka dodatkowych funkcji do standardowej kontrolki DataGrid w celu dodania funkcji wizualizacji danych. |
| 3 | Menu Kontrolka Menu tworzy wyskakujące menu z indywidualnie wybieranymi opcjami. |
| 4 | Pasek postępu Kontrolka ProgressBar zapewnia wizualną reprezentację postępu zadania w czasie. |
| 5 | Bogaty edytor tekstu Kontrolka RichTextEditor umożliwia użytkownikom wprowadzanie i formatowanie tekstu. |
| 6 | TileList Kontrolka TileList Kontrolka TileList wyświetla liczbę elementów ułożonych w kafelkach. |
| 7 | Drzewo Kontrolka Drzewo umożliwia użytkownikowi przeglądanie danych hierarchicznych ułożonych w rozwijalne drzewo. |
| 8 | Odtwarzacz wideo Formant VideoPlayer to odtwarzacz wideo z możliwością zmiany skór, który obsługuje pobieranie progresywne, przesyłanie strumieniowe o wielu szybkościach transmisji bitów i strumieniowe przesyłanie wideo. |
| 9 | Akordeon Formant Accordian ma kolekcję podrzędnych kontenerów MX lub kontenerów Spark NavigatorContent, ale tylko jeden z nich jest jednocześnie widoczny. |
| 10 | TabNavigator Formant TabNavigator zawiera kontener TabBar do nawigowania między jego kontenerami podrzędnymi. |
| 11 | ToggleButtonBar Kontrolka ToggleButtonBar definiuje poziomą lub pionową grupę przycisków, które zachowują stan zaznaczony lub odznaczony. |
Elementy sterujące panelu układu umożliwiają użytkownikom organizowanie elementów sterujących interfejsu użytkownika na stronie. Każda kontrolka Layout dziedziczy właściwości z klasy UIComponent, która z kolei dziedziczy właściwości z EventDispatcher i innych klas najwyższego poziomu.
| Sr.No | Sterowanie i opis |
|---|---|
| 1 | Klasa Flex EventDispatcher Klasa EventDispatcher jest klasą bazową dla wszystkich klas, które mogą wysyłać zdarzenia. Klasa EventDispatcher umożliwia dowolnemu obiektowi na liście wyświetlania bycie celem zdarzenia i jako taki na używanie metod interfejsu IEventDispatcher. |
| 2 | Flex UIComponent Klasa UIComponent jest klasą bazową dla wszystkich komponentów wizualnych, zarówno interaktywnych, jak i nieinteraktywnych. |
Panele układu
Poniżej znajduje się kilka ważnych paneli układu -
| Sr.No | Panel i opis |
|---|---|
| 1 | BorderContainer Klasa BorderContainer udostępnia zestaw stylów CSS, które kontrolują wygląd obramowania i wypełnienia tła kontenera. |
| 2 | Formularz Kontener formularza zapewnia kontrolę nad układem formularza, zaznacza pola formularza jako wymagane lub opcjonalne, obsługuje komunikaty o błędach i wiąże dane formularza z modelem danych Flex w celu wykonania sprawdzania i walidacji danych. |
| 3 | VGroup Kontener VGroup jest kontenerem grupy korzystającym z klasy VerticalLayout. |
| 4 | HGroup Kontener HGroup to kontener Group, który używa klasy HorizontalLayout. |
| 5 | Płyta Klasa Panel to kontener, który zawiera pasek tytułu, podpis, obramowanie i obszar zawartości dla swoich elementów podrzędnych. |
| 6 | SkinnableContainer Klasa SkinnableContainer jest klasą bazową dla kontenerów z możliwością skórowania, które zapewniają zawartość wizualną. |
| 7 | TabBar TabBar wyświetla zestaw identycznych zakładek. |
| 8 | TitleWindow TitleWindow rozszerza Panel o przycisk zamykania i obszar przenoszenia. |
Możemy dodać zachowanie do aplikacji flex, używając koncepcji efektów. Na przykład, gdy pole tekstowe zostanie wyróżnione, możemy sprawić, że jego tekst stanie się pogrubiony i nieco większy.
Każdy efekt dziedziczy właściwości z klasy Effect, która z kolei dziedziczy właściwości z EventDispatcher i innych klas najwyższego poziomu.
| Sr.No | Efekt i opis |
|---|---|
| 1 | Klasa Flex Effect Klasa Effect jest abstrakcyjną klasą bazową, która definiuje podstawową funkcjonalność wszystkich efektów Flex. Ta klasa definiuje podstawową klasę fabryczną dla wszystkich efektów. |
Podstawowe efekty
Poniżej przedstawiono kilka ważnych podstawowych efektów wizualnych -
| Sr.No | Efekt i opis |
|---|---|
| 1 | Blaknąć Efekt Fade animuje właściwość alfa komponentu. |
| 2 | WipeLeft Klasa WipeLeft definiuje efekt czyszczenia w lewo. |
| 3 | WipeRight Klasa WipeRight definiuje efekt czyszczenia w prawo. |
| 4 | Move3D Klasa Move3D przenosi obiekt docelowy w wymiarach x, y i z. |
| 5 | Scale3D Klasa Scale3D skaluje obiekt docelowy w trzech wymiarach wokół centrum transformacji. |
| 6 | Rotate3D Klasa Rotate3D obraca obiekt docelowy w trzech wymiarach wokół osi x, y lub z. |
| 7 | Animować Ten efekt Animate animuje dowolny zestaw właściwości między wartościami. Określ właściwości i wartości do animacji, ustawiając właściwość motionPaths. |
Flex używa koncepcji zdarzenia do przekazywania danych z jednego obiektu do drugiego w zależności od stanu lub interakcji użytkownika w aplikacji.
ActionScript ma rodzaj Eventklasa, która definiuje wiele funkcji potrzebnych do pracy ze zdarzeniami. Za każdym razem, gdy zdarzenie występuje w aplikacji Flex, tworzone są trzy typy obiektów z hierarchii klas Event.
Zdarzenie ma następujące trzy kluczowe właściwości
| Sr.No | Właściwość i opis |
|---|---|
| 1 | Type Plik typeinformuje, jakiego rodzaju zdarzenie właśnie się wydarzyło. Może to być kliknięcie, inicjalizacja, najechanie myszą, zmiana itp. Rzeczywiste wartości będą reprezentowane przez stałe, takie jak MouseEvent.CLICK. |
| 2 | Target Plik target Właściwość Event jest odwołaniem do obiektu do komponentu, który wygenerował zdarzenie. Jeśli klikniesz przycisk o identyfikatorze clickMeButton, celem tego zdarzenia kliknięcia będzie clickMeButton |
| 3 | CurrentTarget Plik currentTargetwłaściwość zmienia hierarchię kontenerów. Zajmuje się głównie przepływem wydarzeń. |
Fazy przepływu zdarzeń
Zdarzenie przechodzi przez trzy fazy w poszukiwaniu programów obsługi zdarzeń.
| Sr.No | Faza i opis |
|---|---|
| 1 | Capture W fazie przechwytywania program zacznie szukać programów obsługi zdarzeń od zewnętrznego (lub górnego) rodzica do najbardziej wewnętrznego. Faza przechwytywania zatrzymuje się na obiekcie nadrzędnym obiektu, który wywołał zdarzenie. |
| 2 | Target W fazie docelowej składnik, który wyzwolił zdarzenie, jest sprawdzany pod kątem obsługi zdarzenia. |
| 3 | Bubble Faza bąbelkowa jest odwrotnością fazy przechwytywania i przechodzi przez strukturę, od rodzica komponentu docelowego w górę. |
Rozważ następujący kod aplikacji -
<?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" >
<s:Panel>
<s:Button id = "clickMeButton" label = "Click Me!" click = "doAction( );" />
</s:Panel>
</s:Application>Gdy użytkownik kliknie przycisk, kliknie również Panel i Aplikację.
Zdarzenie przechodzi przez trzy fazy w poszukiwaniu przypisań obsługi zdarzeń.
Wykonajmy poniższe kroki, aby przetestować obsługę zdarzeń w aplikacji Flex -
| Krok | Opis |
|---|---|
| 1 | Utwórz projekt o nazwie HelloWorld w pakiecie com.tutorialspoint.client, jak wyjaśniono w rozdziale Flex - tworzenie aplikacji . |
| 2 | Zmodyfikuj HelloWorld.mxml, jak wyjaśniono poniżej. Resztę plików nie zmieniaj. |
| 3 | Skompiluj i uruchom aplikację, aby upewnić się, że logika biznesowa działa zgodnie z wymaganiami. |
Poniżej znajduje się zawartość zmodyfikowanego pliku mxml src/com.tutorialspoint/HelloWorld.mxml.
<?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">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
protected function reportEvent(event:MouseEvent):void {
var target:String = event.target.id;
var currentTarget:String = event.target.id;
var eventPhase: String;
if(event.target is Button) {
var button:Button = event.target as Button;
target = button.label + " Button";
} else if(event.target is HGroup) {
var hGroup:HGroup = event.target as HGroup;
target = hGroup.id + " HGroup";
} else if(event.target is Panel) {
var panel:Panel = event.target as Panel;
target = panel.id + " Panel";
}
if(event.currentTarget is Button) {
var button1:Button = event.currentTarget as Button;
currentTarget = button1.label + " Button";
} else if(event.currentTarget is HGroup) {
var hGroup1:HGroup = event.currentTarget as HGroup;
currentTarget = hGroup1.id + " HGroup";
} else if(event.currentTarget is Panel) {
var panel1:Panel = event.currentTarget as Panel;
currentTarget = panel1.id + " Panel";
}
var eventPhaseInt:uint = event.eventPhase;
if(eventPhaseInt == EventPhase.AT_TARGET) {
eventPhase = "Target";
} else if(eventPhaseInt == EventPhase.BUBBLING_PHASE) {
eventPhase = "Bubbling";
} else if(eventPhaseInt == EventPhase.CAPTURING_PHASE) {
eventPhase = "Capturing";
}
reports.text += " Target: " + target + "\n currentTarget: " +
currentTarget + "\n Phase: " + eventPhase + "\n----------\n";
}
]]>
</fx:Script>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Event Handling Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel id = "parentPanel" title = "Main Parent"
click = "reportEvent(event)" width = "500"
height = "100" includeInLayout = "true" visible = "true">
<s:layout>
<s:VerticalLayout gap = "10" verticalAlign = "middle"
horizontalAlign = "center" />
</s:layout>
<s:HGroup id = "mainHGroup" click = "reportEvent(event)">
<s:Button label = "Click Me" click = "reportEvent(event)" />
</s:HGroup>
</s:Panel>
<s:Panel id = "reportPanel" title = "Events" width = "500" height = "230">
<mx:Text id = "reports" />
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Gdy będziesz gotowy ze wszystkimi wprowadzonymi zmianami, skompiluj i uruchom aplikację w trybie normalnym, tak jak zrobiliśmy to w rozdziale Flex - Utwórz aplikację . Jeśli wszystko jest w porządku z Twoją aplikacją, otrzymasz następujący wynik: [ Wypróbuj online ]
Flex zapewnia dwa sposoby tworzenia niestandardowych komponentów.
- Korzystanie z ActionScript
- Korzystanie z MXML
Korzystanie z ActionScript
Możesz utworzyć komponent, rozszerzając istniejący komponent. Aby utworzyć komponent za pomocą programu Flash Builder, kliknijFile > New > ActionScript Class.
Wprowadź szczegóły, jak pokazano poniżej -
Flash Builder utworzy następujący plik CustomButton.as.
package com.tutorialspoint.client {
import spark.components.Button;
public class CustomButton extends Button {
public function CustomButton() {
super();
}
}
}Korzystanie z MXML
Możesz utworzyć komponent, rozszerzając istniejący komponent. Aby utworzyć komponent za pomocą programu Flash Builder, kliknijFile > New > MXML Component.
Wprowadź szczegóły, jak pokazano poniżej.
Flash Builder utworzy następujący plik CustomLogin.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Group 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 = "400" height = "300">
</s:Group>Wykonaj następujące kroki, aby przetestować niestandardowe kontrolki w aplikacji Flex -
| Krok | Opis |
|---|---|
| 1 | Utwórz projekt o nazwie HelloWorld w pakiecie com.tutorialspoint.client, jak wyjaśniono w rozdziale Flex - tworzenie aplikacji . |
| 2 | Zmodyfikuj HelloWorld.mxml, jak wyjaśniono poniżej. Resztę plików nie zmieniaj. |
| 3 | Utwórz komponenty CustomLogin.mxml i CustomButton.as , jak wyjaśniono powyżej. Zmodyfikuj te pliki, jak wyjaśniono poniżej. Resztę plików nie zmieniaj. |
| 4 | Skompiluj i uruchom aplikację, aby upewnić się, że logika biznesowa działa zgodnie z wymaganiami. |
Poniżej znajduje się zawartość zmodyfikowanego pliku mxml src/com.tutorialspoint/client/CustomLogin.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Group 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 = "400" height = "300">
<s:Form>
<s:FormItem label = "UserName:">
<s:TextInput width = "200" />
</s:FormItem>
<s:FormItem label = "Password:">
<s:TextInput width = "200" displayAsPassword = "true" />
</s:FormItem>
<s:FormItem>
<s:Button label = "Login" />
</s:FormItem>
</s:Form>
</s:Group>Poniżej znajduje się zawartość zmodyfikowanego pliku mxml src/com.tutorialspoint/client/CustomButton.as.
package com.tutorialspoint.client {
import spark.components.Button;
public class CustomButton extends Button {
public function CustomButton() {
super();
this.setStyle("color","green");
this.label = "Submit";
}
}
}Poniżej znajduje się zawartość zmodyfikowanego pliku mxml src/com.tutorialspoint/client/HelloWorld.mxml.
<?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"
xmlns:client = "com.tutorialspoint.client.*"
initialize = "application_initializeHandler(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function application_initializeHandler(event:FlexEvent):void {
//create a new custom button
var customButton: CustomButton = new CustomButton();
asPanel.addElement(customButton);
}
]]>
</fx:Script>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Custom Controls Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel title = "Using MXML Component" width = "400" height = "200">
<client:CustomLogin>
</client:CustomLogin>
</s:Panel>
<s:Panel title = "Using AS Component" width = "400" height = "100">
<s:VGroup id = "asPanel" width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
</s:VGroup>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Gdy będziesz gotowy ze wszystkimi wprowadzonymi zmianami, skompiluj i uruchom aplikację w trybie normalnym, tak jak zrobiliśmy to w rozdziale Flex - Utwórz aplikację . Jeśli wszystko jest w porządku z Twoją aplikacją, otrzymasz następujący wynik: [ Wypróbuj online ]
Flex zapewnia usługi RPC w celu dostarczania danych po stronie serwera po stronie klienta. Flex zapewnia sporą kontrolę nad danymi po stronie serwera.
Korzystając z usług Flex RPC, możemy zdefiniować akcje użytkownika, które mają być wykonywane po stronie serwera.
Usługi Flex RPC Sservices można zintegrować z dowolnymi technologiami po stronie serwera.
Jedna z usług Flex RPC zapewnia wbudowaną obsługę skompresowanych danych binarnych, które mają być przesyłane przez sieć i jest dość szybka.
Flex zapewnia następujące trzy typy usług RPC
| Sr.No | Serwis i opis RPC |
|---|---|
| 1 | HttpService Znacznik <mx: HTTPService> jest używany do reprezentowania obiektu HTTPService w pliku MXML. Kiedy wywołujesz metodę send () obiektu HTTPService, wysyła ona żądanie HTTP do określonego adresu URL i zwracana jest odpowiedź HTTP. Możesz również użyć metod HTTP HEAD, OPTIONS, TRACE i DELETE. |
| 2 | WebService <Mx: WebService> służy do uzyskiwania dostępu do operacji usług sieciowych zgodnych z SOAP. |
| 3 | RemoteObject Znacznik <mx: RemoteObject> służy do reprezentowania obiektu HTTPService w pliku MXML. Ten znacznik zapewnia dostęp do metod obiektów Java wykorzystujących kodowanie Action Message Format (AMF). |
Zamierzamy szczegółowo omówić usługę HTTP. Użyjemy pliku źródłowego XML umieszczonego na serwerze i uzyskamy do niego dostęp po stronie klienta za pośrednictwem usługi HTTP.
Items.xml
<items>
<item name = "Book" description = "History of France"></item>
<item name = "Pen" description = "Parker Pen"></item>
<item name = "Pencil" description = "Stationary"></item>
<items>Deklaracja HTTPService
Teraz zadeklaruj usługę HTTPS i przekaż jej adres URL powyższego pliku
<fx:Declarations>
<mx:HTTPService id = "itemRequest"
url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>Połączenie RPC
Wywołaj metodę itemRequest.send () i powiąż wartości z obiektu lastResult usługi internetowej itemRequest z komponentem Flex UI.
...
itemRequest.send();
...
<mx:DataGrid id = "dgItems" height = "80%" width = "75%"
dataProvider = "{itemRequest.lastResult.items.item}">
<mx:columns>
<mx:DataGridColumn headerText = "Name" dataField = "name" />
<mx:DataGridColumn headerText = "Description" dataField = "description" />
</mx:columns>
</mx:DataGrid>Przykład zgłoszenia serwisowego RPC
Teraz wykonajmy kroki, aby przetestować usługi RPC w aplikacji Flex -
| Krok | Opis |
|---|---|
| 1 | Utwórz projekt o nazwie HelloWorld w pakiecie com.tutorialspoint.client, jak wyjaśniono w rozdziale Flex - tworzenie aplikacji . |
| 2 | Zmodyfikuj HelloWorld.mxml, jak wyjaśniono poniżej. Resztę plików nie zmieniaj. |
| 3 | Skompiluj i uruchom aplikację, aby upewnić się, że logika biznesowa działa zgodnie z wymaganiami. |
Poniżej znajduje się zawartość zmodyfikowanego pliku mxml src/com.tutorialspoint/HelloWorld.mxml.
<?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"
minWidth = "500" minHeight = "500" creationComplete = "init(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
protected function init(event:FlexEvent):void {
itemRequest.send();
}
]]>
</fx:Script>
<fx:Declarations>
<mx:HTTPService id = "itemRequest"
url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "RPC Service Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel id = "parentPanel" title = "Using RPC Services"
width = "500" height = "200" >
<s:layout>
<s:VerticalLayout gap = "10"
verticalAlign = "middle" horizontalAlign = "center" />
</s:layout>
<mx:DataGrid id = "dgItems" height = "80%" width = "75%"
dataProvider = "{itemRequest.lastResult.items.item}">
<mx:columns>
<mx:DataGridColumn headerText = "Name" dataField = "name" />
<mx:DataGridColumn headerText = "Description"
dataField = "description" />
</mx:columns>
</mx:DataGrid>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Gdy będziesz gotowy ze wszystkimi wprowadzonymi zmianami, skompiluj i uruchom aplikację w trybie normalnym, tak jak zrobiliśmy to w rozdziale Flex - Utwórz aplikację . Jeśli wszystko jest w porządku z Twoją aplikacją, otrzymasz następujący wynik: [ Wypróbuj online ]
Flash Builder 4 ma doskonałą wbudowaną obsługę integracji FlexUnit w cyklu rozwoju Flex.
Utwórz klasę przypadku testowego
Klasę przypadku testowego można utworzyć za pomocą kreatora tworzenia klasy testowej programu Flash Builder. Uruchamianie przypadków testowych w programie Flash Builder jest bardzo proste, co zobaczysz w tym artykule.
Aby utworzyć klasę przypadku testowego za pomocą programu Flash Builder, kliknij File > New > Test Case Class. Wprowadź szczegóły, jak pokazano poniżej.
Flash Builder utworzy następujący plik TestClass1.
package com.tutorialspoint.client {
public class TestClass1 {
[Before]
public function setUp():void {}
[After]
public function tearDown():void {}
[BeforeClass]
public static function setUpBeforeClass():void {}
[AfterClass]
public static function tearDownAfterClass():void {}
}
}Przykład integracji FlexUnit
Teraz wykonajmy kroki, aby przetestować integrację FlexUnit w aplikacji Flex -
| Krok | Opis |
|---|---|
| 1 | Utwórz projekt o nazwie HelloWorld w pakiecie com.tutorialspoint.client, jak wyjaśniono w rozdziale Flex - tworzenie aplikacji . |
| 2 | Zmodyfikuj HelloWorld.mxml, jak wyjaśniono poniżej. Resztę plików nie zmieniaj. |
| 3 | Utwórz TestClass1.jako przypadek testowy, jak opisano powyżej, i zmodyfikuj TestClass1., jak wyjaśniono poniżej. |
| 4 | Skompiluj i uruchom aplikację, aby upewnić się, że logika biznesowa działa zgodnie z wymaganiami. |
Poniżej znajduje się zawartość zmodyfikowanego pliku jako src/com.tutorialspoint/client/TestClass1.as.
package com.tutorialspoint.client {
import org.flexunit.asserts.assertEquals;
public class TestClass1 {
private var counter: int = 1;
[Before]
public function setUp():void {
//this code will run before every test case execution
}
[After]
public function tearDown():void {
//this code will run after every test case execution
}
[BeforeClass]
public static function setUpBeforeClass():void {
//this code will run once when test cases start execution
}
[AfterClass]
public static function tearDownAfterClass():void {
//this code will run once when test cases ends execution
}
[Test]
public function testCounter():void {
assertEquals(counter, 1);
}
}
}Poniżej znajduje się zawartość zmodyfikowanego pliku mxml src/com.tutorialspoint/HelloWorld.mxml.
<?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"
minWidth = "500" minHeight = "500">
</s:Application>Gdy będziesz gotowy ze wszystkimi wprowadzonymi zmianami, skompilujmy w normalnym trybie, tak jak zrobiliśmy to w rozdziale Flex - Utwórz aplikację .
Uruchamianie przypadków testowych
Teraz kliknij prawym przyciskiem myszy TestClass1 w eksploratorze pakietów i wybierz Run As > FlexUnit Tests. W oknie testowym programu Flash Builder zobaczysz następujące dane wyjściowe.
Flash Builder wyświetla również wyniki testów w przeglądarce.
Flex zapewnia doskonałe możliwości debugowania kodu flex, a Flash Builder 4 ma doskonały wbudowany debugger i obsługę perspektywy debugowania.
W trybie debugowania aplikacja Flex działa w wersji Flash Player Debugger zbudowanej w programie Flash Builder 4, która obsługuje funkcję debugowania.
Dzięki temu programiści otrzymują łatwą i wbudowaną konfigurację debugowania w programie Flash Builder
W tym artykule zademonstrujemy użycie debugowania kodu klienta Flex przy użyciu programu Flash Builder. Wykonamy następujące zadania
- Ustaw punkty przerwania w kodzie i zobacz je w programie Breakpoint Explorer.
- Przechodź przez kod linia po linii podczas debugowania.
- Wyświetl wartości zmiennej.
- Sprawdź wartości wszystkich zmiennych.
- Sprawdź wartość wyrażenia.
- Wyświetl ramkę stosu dla zawieszonych wątków.
Przykład debugowania
| Krok | Opis |
|---|---|
| 1 | Utwórz projekt o nazwie HelloWorld w pakiecie com.tutorialspoint.client, jak wyjaśniono w rozdziale Flex - tworzenie aplikacji . |
| 2 | Zmodyfikuj HelloWorld.mxml, jak wyjaśniono poniżej. Resztę plików nie zmieniaj. |
| 3 | Skompiluj i uruchom aplikację, aby upewnić się, że logika biznesowa działa zgodnie z wymaganiami. |
Poniżej znajduje się zawartość zmodyfikowanego pliku mxml src/com.tutorialspoint/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<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:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Gdy będziesz gotowy ze wszystkimi wprowadzonymi zmianami, skompilujmy w normalnym trybie, tak jak zrobiliśmy to w rozdziale Flex - Utwórz aplikację .
Krok 1 - Umieść punkty przerwania
Umieść punkt przerwania w pierwszym wierszu aplikacji zainicjuj program obsługi HelloWorld.mxml
Krok 2 - Debugowanie aplikacji
Teraz kliknij
Jeśli wszystko jest w porządku, aplikacja uruchomi się w przeglądarce i zobaczysz następujące dzienniki debugowania w konsoli Flash Builder.
[SWF] \HelloWorld\bin-debug\HelloWorld.swf
- 181,509 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\1
- 763,122 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\2
- 1,221,837 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\3
- 1,136,788 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\4
- 2,019,570 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\5
- 318,334 bytes after decompressionZaraz po uruchomieniu aplikacji zobaczysz fokus na punkcie przerwania programu Flash Builder, ponieważ umieściliśmy go w pierwszym wierszu metody application_initialize Handler.
Możesz zobaczyć ślad stosu dla zawieszonych wątków.
Możesz zobaczyć wartości wyrażeń.
Możesz zobaczyć listę umieszczonych punktów przerwania.
Teraz naciskaj F6, aż dojdziesz do ostatniego wiersza metody application_initializeHandler (). Jako odniesienie dla klawiszy funkcyjnych, F6 sprawdza kod linia po linii, F5 przechodzi dalej, a F8 wznawia aplikację. Teraz możesz zobaczyć listę wartości wszystkich zmiennych metody application_initializeHandler ().
Teraz widać, że kod fleksa można debugować w taki sam sposób, jak można debugować aplikację Java. Umieszczaj punkty przerwania w dowolnej linii i korzystaj z funkcji debugowania Flex.
Flex zapewnia dwa sposoby internacjonalizacji aplikacji Flex. Pokażemy, że czas kompilacji jest najczęściej używany w projektach.
| Sr.No | Technika i opis |
|---|---|
| 1 | Compile Time Internationalization Ta technika jest najbardziej rozpowszechniona i wymaga bardzo niewielkiego narzutu w czasie wykonywania; jest bardzo wydajną techniką tłumaczenia zarówno ciągów stałych, jak i sparametryzowanych; najprostsza w implementacji. Umiędzynarodowienie czasu kompilacji używa standardowych plików właściwości do przechowywania przetłumaczonych ciągów i sparametryzowanych komunikatów, a te pliki właściwości są kompilowane bezpośrednio w aplikacji. |
| 2 | Run Time Internationalization Ta technika jest bardzo elastyczna, ale wolniejsza niż internacjonalizacja statycznych stringów. Musisz osobno skompilować pliki właściwości lokalizacji, pozostawić je poza aplikacją i załadować je w czasie wykonywania. |
Przepływ pracy związany z internacjonalizacją aplikacji Flex
Krok 1 - Utwórz strukturę folderów
Utwórz folder locale w folderze src projektu Flex. Będzie to katalog nadrzędny dla wszystkich plików właściwości dla ustawień regionalnych, które aplikacja będzie obsługiwać. W folderze ustawień regionalnych utwórz podfoldery, po jednym dla każdego obsługiwanego ustawienia narodowego aplikacji. Konwencja nazywania ustawień regionalnych to
{language}_{country code}Na przykład en_US reprezentuje język angielski Stanów Zjednoczonych. Region de_DE reprezentuje język niemiecki. Przykładowa aplikacja będzie obsługiwać dwa popularne języki: angielski i niemiecki.
Krok 2 - Utwórz pliki właściwości
Utwórz plik właściwości zawierający komunikaty, które mają być używane w aplikacji. StworzyliśmyHelloWorldMessages.properties plik w ramach src > locale > en_US folder w naszym przykładzie.
enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}Utwórz pliki właściwości zawierające przetłumaczone wartości specyficzne dla lokalizacji. StworzyliśmyHelloWorldMessages.properties plik w ramach src > locale > de_DEfolder w naszym przykładzie. Ten plik zawiera tłumaczenia w języku niemieckim. _de określa niemiecką lokalizację i zamierzamy obsługiwać język niemiecki w naszej aplikacji.
Jeśli tworzysz plik właściwości za pomocą programu Flash Builder, zmień kodowanie pliku na UTF-8 Wybierz plik, a następnie kliknij go prawym przyciskiem myszy, aby otworzyć jego okno właściwości. Wybierz Kodowanie pliku tekstowego jako Other UTF-8. Zastosuj i zapisz zmianę.
enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}Krok 3 - Określ opcje kompilatora
Kliknij projekt prawym przyciskiem myszy i wybierz opcję Właściwości.
Wybierz Flex Compiler i dodaj następujące elementy do ustawień dodatkowych argumentów kompilatora -
-locale en_US de_DEKliknij projekt prawym przyciskiem myszy i wybierz opcję Właściwości.
Wybierz Flex Build Path i dodaj następujące elementy do ustawień Source Path -
src\locale\{locale}Przykład internalizacji
Teraz wykonajmy następujące kroki, aby przetestować technikę internalizacji w aplikacji Flex -
| Krok | Opis |
|---|---|
| 1 | Utwórz projekt o nazwie HelloWorld w pakiecie com.tutorialspoint.client, jak wyjaśniono w rozdziale Flex - tworzenie aplikacji . |
| 2 | Zmodyfikuj HelloWorld.mxml, jak wyjaśniono poniżej. Resztę plików nie zmieniaj. |
| 3 | Skompiluj i uruchom aplikację, aby upewnić się, że logika biznesowa działa zgodnie z wymaganiami. |
Poniżej znajduje się zawartość zmodyfikowanego pliku mxml src/com.tutorialspoint/HelloWorld.mxml.
<?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"
minWidth = "500" minHeight = "500">
<fx:Metadata>
[ResourceBundle("HelloWorldMessages")]
</fx:Metadata>
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
private var locales:Array = [{label:"English", locale:"en_US"},
{label:"German", locale:"de_DE"}];
private function comboChangeHandler():void {
resourceManager.localeChain = [localeComboBox.selectedItem.locale];
}
protected function clickMe_clickHandler(event:MouseEvent):void {
var name:String = txtName.text;
var inputArray:Array = new Array();
inputArray.push(name);
Alert.show(resourceManager.getString('HelloWorldMessages'
,'greeting',inputArray));
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40"
color = "0x777777"
text = "{resourceManager.getString('HelloWorldMessages','applicationTitle')}"
styleName = "heading" width = "90%" height = "150" />
<s:Panel width = "300" height = "150">
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "{resourceManager.getString('HelloWorldMessages','enterName')}"
paddingTop = "2" />
<s:TextInput id = "txtName" />
</s:HGroup>
<s:Button
label = "{resourceManager.getString('HelloWorldMessages','clickMe')}"
click = "clickMe_clickHandler(event)" right = "10" />
</s:Panel>
<mx:ComboBox id = "localeComboBox" dataProvider = "{locales}"
change = "comboChangeHandler()" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Gdy będziesz gotowy ze wszystkimi wprowadzonymi zmianami, skompiluj i uruchom aplikację w trybie normalnym, tak jak zrobiliśmy to w rozdziale Flex - Utwórz aplikację . Jeśli wszystko jest w porządku z Twoją aplikacją, otrzymasz następujący wynik: [ Wypróbuj online ]
Zmień język za pomocą menu rozwijanego języka i zobacz wynik.
Flex zapewnia specjalną klasę FlexPrintJob do drukowania obiektów flex.
FlexPrintJob może służyć do drukowania jednego lub więcej obiektów Flex, takich jak kontener Form lub VBox.
FlexPrintJob drukuje obiekt i wszystkie zawarte w nim obiekty.
Obiekty mogą stanowić całość lub część wyświetlanego interfejsu.
Obiekty mogą być komponentami, które formatują dane specjalnie do drukowania.
Klasa FlexPrintJob umożliwia skalowanie wyniku w celu dopasowania go do strony.
Klasa FlexPrintJob automatycznie wykorzystuje wiele stron do drukowania obiektu, który nie mieści się na jednej stronie.
Klasa FlexPrintJob powoduje, że system operacyjny wyświetla okno dialogowe Drukuj. Nie można drukować bez działania użytkownika.
Przygotuj i wyślij zadanie drukowania
Wydruki wykonujesz przygotowując i wysyłając zadanie drukowania. Stwórzmy instancję klasy FlexPrintJob
var printJob:FlexPrintJob = new FlexPrintJob();Rozpocznij zadanie drukowania
printJob.start();Flex spowoduje, że system operacyjny wyświetli okno dialogowe Drukuj. Dodaj jeden lub więcej obiektów do zadania drukowania i określ sposób ich skalowania
printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH);Każdy obiekt zaczyna się na nowej stronie. Wyślij zadanie drukowania do drukarki
printJob.send();Przykład drukowania
| Krok | Opis |
|---|---|
| 1 | Utwórz projekt o nazwie HelloWorld w pakiecie com.tutorialspoint.client, jak wyjaśniono w rozdziale Flex - tworzenie aplikacji . |
| 2 | Zmodyfikuj HelloWorld.mxml, jak wyjaśniono poniżej. Resztę plików nie zmieniaj. |
| 3 | Skompiluj i uruchom aplikację, aby upewnić się, że logika biznesowa działa zgodnie z wymaganiami. |
Poniżej znajduje się zawartość zmodyfikowanego pliku mxml src/com.tutorialspoint/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.printing.FlexPrintJob;
import mx.printing.FlexPrintJobScaleType;
protected function btnClickMe_clickHandler(event:MouseEvent):void {
// Create an instance of the FlexPrintJob class.
var printJob:FlexPrintJob = new FlexPrintJob();
// Start the print job.
if (printJob.start() != true) return;
// Add the object to print. Do not scale it.
printJob.addObject(myDataGrid, FlexPrintJobScaleType.NONE);
// Send the job to the printer.
printJob.send();
}
protected function application_initializeHandler(event:FlexEvent):void {
lblHeader.text = "My Hello World Application";
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<mx:DataGrid id = "myDataGrid" width = "300">
<mx:dataProvider>
<fx:Object Product = "Flex" Code = "1000" />
<fx:Object Product = "GWT" Code = "2000" />
<fx:Object Product = "JAVA" Code = "3000" />
<fx:Object Product = "JUnit" Code = "4000" />
</mx:dataProvider>
</mx:DataGrid>
<s:Button label = "Print Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)"
styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Gdy będziesz gotowy ze wszystkimi wprowadzonymi zmianami, skompiluj i uruchom aplikację w trybie normalnym, tak jak zrobiliśmy to w rozdziale Flex - Utwórz aplikację . Jeśli wszystko jest w porządku z Twoją aplikacją, otrzymasz następujący wynik: [ Wypróbuj online ]
Kliknij przycisk Drukuj mnie, a zobaczysz wydruk siatki danych pokazanej poniżej.
