Flex - Kurzanleitung
Was ist Flex?
Flex ist ein leistungsstarkes Open Source-Anwendungsframework, mit dem Sie herkömmliche Anwendungen für Browser, Mobilgeräte und Desktops mit demselben Programmiermodell, Tool und derselben Codebasis erstellen können.
Flex bietet ein FLEX SDK, das aus der Flex-Klassenbibliothek (ActionScript-Klassen), den Flex-Compilern, dem Debugger, den Programmiersprachen MXML und ActionScript sowie anderen Dienstprogrammen zum Erstellen ausdrucksstarker und interaktiver Rich-Internet-Anwendungen (RIA) besteht.
Flex kümmert sich um die Benutzeroberfläche oder die clientseitige Funktionalität einer Webanwendung. Die serverseitige Funktionalität hängt von serverseitigen Komponenten ab, die in einer herkömmlichen Skriptsprache (Java / PHP usw.) geschrieben sind.
Eine Flex-basierte Anwendung, die tatsächlich als SWF-Datei geliefert wird und dem HTML / JavaScript-Teil einer herkömmlichen Webanwendung sehr ähnlich ist.
Die Flex-Anwendung wird als SWF-Datei (en) sowie ein HTML-Wrapper, die CSS-Datei (en) und alle serverseitigen Skriptdateien (z. B. Java, .CFM, .PHP usw.) auf dem Server bereitgestellt. Wie herkömmliche Webanwendungen.
Diese Ressourcen werden von einem Server an den Browser des Clients über die übliche HTTP-Anforderungs- / Antwortmethode und den Flash Player übermittelt, mit dem die Anwendung in einem Browser ausgeführt wird.
Vorteile von Flex
Flex-Anwendungen basieren normalerweise auf Flash Playern und können auf Gerätefunktionen wie GPS, Kamera, lokale Datenbank und Grafikbeschleunigungsmesser zugreifen.
Flex-Anwendungen können auf Android-, BlackBerry Tablet OS- und iOS-Geräten ausgeführt werden.
Flex-Anwendungen können sowohl auf Browsern als auch auf dem Desktop ausgeführt werden.
Flex-Anwendungen sind plattformunabhängig. Die Benutzeroberfläche kann für die Plattform nativ sein oder auf jeder Plattform gleich sein.
Flex-Anwendungen können mit allen wichtigen serverseitigen Technologien wie Java, Spring, Hibernate, PHP, Ruby, .NET, Adobe ColdFusion und SAP unter Verwendung von Industriestandards wie REST, SOAP, JSON, JMS und AMF mit Servern interagieren.
Flex Applications gewährleistet eine umfassende Benutzererfahrung durch intuitive Interaktion mit der Anwendung und Darstellung von Informationen in einer visuell umfassenderen Benutzeroberfläche.
Die Flex-Anwendung ist eine Einzelseitenanwendung, bei der Status von einem Status in einen anderen Status wechseln können, ohne dass eine neue Seite vom Server abgerufen oder der Browser aktualisiert werden muss.
Die Flex-Anwendung reduziert die Belastung des Servers erheblich, da die Anwendung nur einmal zurückgegeben werden muss und nicht jedes Mal, wenn der Benutzer die Ansicht ändert, eine neue Seite.
Nachteile von Flex
Flex-Anwendungen sind Single-Threaded-Anwendungen, aber Flex bietet ein asynchrones Programmiermodell, um dieses Problem zu lösen.
Flex basiert auf ActionScript und XML. Das Erlernen dieser beiden ist ein Muss, um in Flex arbeiten zu können.
In diesem Tutorial erfahren Sie, wie Sie eine Entwicklungsumgebung vorbereiten, um mit Adobe Flex Framework zu arbeiten. In diesem Lernprogramm erfahren Sie auch, wie Sie JDK und Adobe Flash Builder auf Ihrem Computer einrichten, bevor Sie Flex Framework einrichten.
System Anforderungen
Für FLEX ist JDK 1.4 oder höher erforderlich. Die allererste Anforderung besteht darin, JDK auf Ihrem Computer zu installieren.
| JDK | 1.4 oder höher. |
|---|---|
| Erinnerung | Keine Mindestanforderung. |
| Festplattenplatz | Keine Mindestanforderung. |
| Betriebssystem | Keine Mindestanforderung. |
Befolgen Sie die angegebenen Schritte, um Ihre Umgebung so einzurichten, dass mit der Entwicklung von Flex-Anwendungen begonnen wird.
Schritt 1 - Überprüfen Sie die Java-Installation auf Ihrem Computer
Öffnen Sie nun die Konsole und führen Sie Folgendes aus java Befehl.
| Betriebssystem | Aufgabe | Befehl |
|---|---|---|
| Windows | Öffnen Sie die Befehlskonsole | c: \> Java-Version |
| Linux | Öffnen Sie das Befehlsterminal | $ java -version |
| Mac | Terminal öffnen | Maschine: ~ Joseph $ Java-Version |
Lassen Sie uns die Ausgabe für alle Betriebssysteme überprüfen -
| Betriebssystem | Generierte Ausgabe |
|---|---|
| Windows | Java-Version "1.6.0_21" Java (TM) SE-Laufzeitumgebung (Build 1.6.0_21-b07) Java HotSpot (TM) Client VM (Build 17.0-b17, gemischter Modus, Freigabe) |
| Linux | Java-Version "1.6.0_21" Java (TM) SE-Laufzeitumgebung (Build 1.6.0_21-b07) Java HotSpot (TM) Client VM (Build 17.0-b17, gemischter Modus, Freigabe) |
| Mac | Java-Version "1.6.0_21" Java (TM) SE-Laufzeitumgebung (Build 1.6.0_21-b07) 64-Bit-Server-VM von Java HotSpot (TM) (Build 17.0-b17, gemischter Modus, Freigabe) |
Schritt 2 - Java Development Kit (JDK) einrichten
Wenn Sie Java nicht installiert haben, können Sie das Java Software Development Kit (SDK) von der Java-Site Java SE Downloads von Oracle installieren . Sie finden Anweisungen zum Installieren von JDK in heruntergeladenen Dateien. Befolgen Sie dann die angegebenen Anweisungen, um das Setup zu installieren und zu konfigurieren. Stellen Sie schließlich die Umgebungsvariablen PATH und JAVA_HOME so ein, dass sie auf das Verzeichnis verweisen, das Java und Javac enthält, normalerweise java_install_dir / bin bzw. java_install_dir.
Stellen Sie die JAVA_HOMEUmgebungsvariable, die auf den Speicherort des Basisverzeichnisses verweist, in dem Java auf Ihrem Computer installiert ist. Zum Beispiel -
| Betriebssystem | Ausgabe |
|---|---|
| Windows | Setzen Sie die Umgebungsvariable JAVA_HOME auf C: \ Programme \ Java \ jdk1.6.0_21 |
| Linux | export JAVA_HOME = / usr / local / java-current |
| Mac | export JAVA_HOME = / Library / Java / Home |
Hängen Sie den Java-Compiler-Speicherort an den Systempfad an.
| Betriebssystem | Ausgabe |
|---|---|
| Windows | Hängen Sie die Zeichenfolge% JAVA_HOME% \ bin an das Ende der Systemvariablen Path an. |
| Linux | export PATH =$PATH:$JAVA_HOME / bin / |
| Mac | nicht benötigt |
Schritt 3 - Einrichten von Adobe Flash Builder 4.5
Alle Beispiele in diesem Lernprogramm wurden mit der Testversion von Adobe Flash Builder 4.5 Profession IDE geschrieben. Schlagen Sie daher vor, die neueste Version von Adobe Flash Builder auf Ihrem Computer zu installieren. Überprüfen Sie auch die Kompatibilität des Betriebssystems.
Laden Sie zum Installieren der Adobe Flash Builder-IDE die neuesten Adobe Flash Builder-Binärdateien von herunter https://www.adobe.com/in/products/flash-builder.html. Nachdem Sie die Installation heruntergeladen haben, entpacken Sie die Binärdistribution an einem geeigneten Ort. Zum Beispiel in C: \ flash-builder unter Windows oder / usr / local / flash-builder unter Linux / Unix und setzen Sie schließlich die Variable PATH entsprechend.
Flash Builder wird gestartet, wenn Sie die folgenden Befehle auf einem Windows-Computer ausführen oder einfach auf FlashBuilder.exe doppelklicken können
%C:\flash-builder\FlashBuilder.exeFlash Builder kann durch Ausführen der folgenden Befehle auf einem Unix-Computer (Solaris, Linux usw.) gestartet werden:
$/usr/local/flash-builder/FlashBuilderDie Testversion von Adobe Flash Builder kann 60 Tage lang verwendet werden. Akzeptieren Sie einfach die Allgemeinen Geschäftsbedingungen und überspringen Sie die ersten Registrierungsschritte, um mit der IDE fortzufahren. Nach unserem Verständnis verwenden wir die Testversion für Unterrichtszwecke.
Wenn nach einem erfolgreichen Start alles in Ordnung ist, sollte das folgende Ergebnis angezeigt werden:
Adobe Flash Builder ist mit FLEX SDKs vorkonfiguriert. In unseren Beispielen, die im Lieferumfang von Adobe Flash Builder 4.5 enthalten sind, verwenden wir FLEX SDK 4.5.
Schritt 4 - Apache Tomcat einrichten
Sie können die neueste Version von Tomcat von herunterladen https://tomcat.apache.org/. Nachdem Sie die Installation heruntergeladen haben, entpacken Sie die Binärdistribution an einem geeigneten Ort. Beispiel: Setzen Sie in C: \ apache-tomcat-6.0.33 unter Windows oder /usr/local/apache-tomcat-6.0.33 unter Linux / Unix die Umgebungsvariable CATALINA_HOME auf die Installationsspeicherorte.
Tomcat kann durch Ausführen der folgenden Befehle auf einem Windows-Computer gestartet werden, oder Sie doppelklicken einfach auf startup.bat
%CATALINA_HOME%\bin\startup.bat
or
C:\apache-tomcat-6.0.33\bin\startup.batTomcat kann durch Ausführen der folgenden Befehle auf einem UNIX-Computer (Solaris, Linux usw.) gestartet werden:
$CATALINA_HOME/bin/startup.sh
Or
/usr/local/apache-tomcat-6.0.33/bin/startup.shNach einem erfolgreichen Start sind die in Tomcat enthaltenen Standard-Webanwendungen unter verfügbar http://localhost:8080/. Wenn alles in Ordnung ist, sollte das folgende Ergebnis angezeigt werden:
Weitere Informationen zum Konfigurieren und Ausführen von Tomcat finden Sie in der hier enthaltenen Dokumentation sowie auf der Tomcat-Website: http://tomcat.apache.org
Tomcat kann gestoppt werden, indem die folgenden Befehle auf einem Windows-Computer ausgeführt werden:
%CATALINA_HOME%\bin\shutdown
Or
C:\apache-tomcat-5.5.29\bin\shutdownTomcat kann gestoppt werden, indem die folgenden Befehle auf einem UNIX-Computer (Solaris, Linux usw.) ausgeführt werden:
$CATALINA_HOME/bin/shutdown.sh
Or
/usr/local/apache-tomcat-5.5.29/bin/shutdown.shBevor wir mit der Erstellung der eigentlichen „HelloWorld“ -Anwendung mit Flash Builder beginnen, sollten wir uns die tatsächlichen Teile einer Flex-Anwendung ansehen.
Eine Flex-Anwendung besteht aus den folgenden vier wichtigen Teilen, von denen der letzte Teil optional ist, die ersten drei jedoch obligatorisch sind.
- Flex Framework-Bibliotheken
- Clientseitiger Code
- Öffentliche Ressourcen (HTML / JS / CSS)
- Serverseitiger Code
Beispielpositionen für verschiedene Teile einer typischen Flex-Anwendung wie HelloWord sind wie folgt:
| Name | Ort |
|---|---|
| Projektstamm | Hallo Welt/ |
| Flex Framework-Bibliotheken | Pfad erstellen |
| Öffentliche Mittel | HTML-Vorlage |
| Clientseitiger Code | table table-bordered / com / tutorialspoint / client |
| Serverseitiger Code | table table-bordered / com / tutorialspoint / server |
Anwendungserstellungsprozess
Für die Flex-Anwendung sind zunächst Flex-Framework-Bibliotheken erforderlich. Später fügt Flash Builder automatisch die Bibliotheken zum Erstellen des Pfads hinzu.
Wenn wir unseren Code mit dem Flash Builder erstellen, führt der Flash Builder die folgenden Aufgaben aus:
Kompiliert den Quellcode in die Datei HelloWorld.swf.
Kompiliert eine HelloWorld.html (eine Wrapper-Datei für eine SWF-Datei) aus einer Datei index.template.html, die im Ordner "html-template" gespeichert ist
Kopiert die Dateien HelloWorld.swf und HelloWorld.html in den Zielordner bin-debug.
Kopiert swfobject.js, einen JavaScript-Code, der für das dynamische Laden der SWF-Datei in HelloWorld.html im Zielordner bin-debug verantwortlich ist
Kopiert Framework-Bibliotheken in Form einer SWF-Datei mit dem Namen frameworks_xxx.swf in den Zielordner bin-debug
Kopiert andere Flex-Module (SWF-Dateien wie sparkskins_xxx.swf, textLayout_xxx.swf) in den Zielordner.
Anwendungsstartprozess
Öffnen Sie die Datei HelloWorld.html, die im Ordner \ HelloWorld \ bin-debug in einem beliebigen Webbrowser verfügbar ist.
HelloWorld.swf wird automatisch geladen und die Anwendung wird gestartet.
Flex Framework-Bibliotheken
Im Folgenden finden Sie kurze Informationen zu einigen wichtigen Framework-Bibliotheken. Bitte beachten Sie, dass Flex-Bibliotheken mit der SWC-Notation gekennzeichnet sind
| Sr.Nr. | Knoten & Beschreibung |
|---|---|
| 1 | playerglobal.swc Diese Bibliothek ist spezifisch für den auf Ihrem Computer installierten FlashPlayer und enthält native Methoden, die vom Flash Player unterstützt werden. |
| 2 | textlayout.swc Diese Bibliothek unterstützt die Funktionen für das Textlayout. |
| 3 | framework.swc Dies ist die Flex-Framework-Bibliothek, die die Kernfunktionen von Flex enthält. |
| 4 | mx.swc Diese Bibliothek speichert die Definitionen der Steuerelemente der mx-Benutzeroberfläche. |
| 5 | charts.swc Diese Bibliothek unterstützt die Diagrammsteuerelemente. |
| 6 | spark.swc Diese Bibliothek speichert die Definitionen der Spark-UI-Steuerelemente. |
| 7 | sparkskins.swc Diese Bibliothek unterstützt das Enthäuten von Spark-UI-Steuerelementen. |
Clientseitiger Code
Flex-Anwendungscode kann geschrieben werden MXML ebenso gut wie ActionScript.
| Sr.Nr. | Typ & Beschreibung |
|---|---|
| 1 | MXML MXML ist eine XML-Markup-Sprache, mit der wir Komponenten der Benutzeroberfläche anordnen. MXML wird während des Erstellungsprozesses in ActionScript kompiliert. |
| 2 | ActionScript ActionScript ist eine objektorientierte prozedurale Programmiersprache und basiert auf dem Entwurf der Sprachspezifikation ECMAScript (ECMA-262) Edition 4. |
In Flex können wir ActionScript und MXML mischen, um Folgendes zu tun:
Layout von Komponenten der Benutzeroberfläche mithilfe von MXML-Tags
Verwenden Sie MXML, um nicht visuelle Aspekte einer Anwendung deklarativ zu definieren, z. B. den Zugriff auf Datenquellen auf dem Server
Verwenden Sie MXML, um Datenbindungen zwischen Benutzeroberflächenkomponenten und Datenquellen auf dem Server zu erstellen.
Verwenden Sie ActionScript, um Ereignis-Listener in MXML-Ereignisattributen zu definieren.
Fügen Sie Skriptblöcke mit dem hinzu
Fügen Sie externe ActionScript-Dateien hinzu.
ActionScript-Klassen importieren.
Erstellen Sie ActionScript-Komponenten.
Öffentliche Ressourcen
Hierbei handelt es sich um Hilfedateien, auf die von der Flex-Anwendung verwiesen wird, z. B. Host-HTML-Seite, CSS oder Bilder im Ordner "HTML-Vorlage". Es enthält folgende Dateien -
| Sr.Nr. | Dateiname & Beschreibung |
|---|---|
| 1 | index.template.html Host-HTML-Seite mit Platzhaltern. Flash Builder verwendet diese Vorlage, um die aktuelle Seite HelloWorld.html mit der Datei HelloWorld.swf zu erstellen. |
| 2 | playerProductInstall.swf Dies ist ein Flash-Dienstprogramm zum Installieren von Flash Player im Express-Modus. |
| 3 | swfobject.js Dies ist das JavaScript, das dafür verantwortlich ist, die installierte Version des Flash Players zu überprüfen und HelloWorld.swf auf der Seite HelloWorld.html zu laden. |
| 4 | html-template/history Dieser Ordner enthält Ressourcen für die Verlaufsverwaltung der Anwendung. |
HelloWorld.mxml
Dies ist der eigentliche MXML / AS-Code (ActionScript), der zur Implementierung der Geschäftslogik der Anwendung geschrieben wurde und den der Flex-Compiler in eine SWF-Datei übersetzt, die vom Flash Player im Browser ausgeführt wird.
Eine Beispielklasse für HelloWorld Entry lautet wie folgt:
<?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>Die folgende Tabelle enthält die Beschreibung aller im obigen Codeskript verwendeten Tags.
| Sr.Nr. | Knoten & Beschreibung |
|---|---|
| 1 | Application Definiert den Anwendungscontainer, der immer das Root-Tag einer Flex-Anwendung ist. |
| 2 | Script Enthält die Geschäftslogik in ActionScript-Sprache. |
| 3 | VGroup Definiert einen vertikalen Gruppierungscontainer, der vertikal Flex UI-Steuerelemente enthalten kann. |
| 4 | Label Stellt ein Label-Steuerelement dar, eine sehr einfache Benutzeroberflächenkomponente, die Text anzeigt. |
| 5 | Button Stellt ein Schaltflächensteuerelement dar, auf das geklickt werden kann, um eine Aktion auszuführen. |
Serverseitiger Code
Dies ist der serverseitige Teil Ihrer Anwendung und sehr optional. Wenn Sie in Ihrer Anwendung keine Backend-Verarbeitung durchführen, benötigen Sie diesen Teil nicht. Wenn jedoch im Backend eine gewisse Verarbeitung erforderlich ist und Ihre clientseitige Anwendung mit dem Server interagiert, müssen Sie diese Komponenten entwickeln.
Im nächsten Kapitel werden wir alle oben genannten Konzepte verwenden, um eine zu erstellen HelloWorld Anwendung mit Flash Builder.
Wir werden Flash Builder 4.5 verwenden, um Flex-Anwendungen zu erstellen. Beginnen wir mit einem einfachenHelloWorld Anwendung.
Schritt 1 - Projekt erstellen
Der erste Schritt besteht darin, ein einfaches Flex-Projekt mit der Flash Builder-IDE zu erstellen. Starten Sie den Projektassistenten mit der OptionFile > New > Flex Project. Benennen Sie Ihr Projekt nun im Assistentenfenster wie folgt als HelloWorld :
Wählen Sie Anwendungstyp Web (runs in Adobe Flash Player). Wenn dies jedoch nicht ausgewählt ist, lassen Sie andere Standardwerte als solche und klicken Sie auf die Schaltfläche Fertig stellen. Sobald Ihr Projekt erfolgreich erstellt wurde, haben Sie den folgenden Inhalt in Ihrem Projektexplorer:
Hier finden Sie eine kurze Beschreibung aller wichtigen Ordner -
| Mappe | Ort |
|---|---|
| Tisch Tischrand | Quellcodedateien (mxml / as classes). Wir haben die Ordnerstruktur com / tutorialspoint / client erstellt, die die clientseitigen Java-Klassen enthält, die für die Anzeige der Client-Benutzeroberfläche verantwortlich sind. |
| bin-debug | Dies ist der Ausgabeteil, der die tatsächlich bereitstellbare Webanwendung darstellt. Der Verlaufsordner enthält Unterstützungsdateien für die Verlaufsverwaltung der Flex-Anwendung. Framework_xxx.swf, Flex-Framework-Dateien sollten von Flex-Anwendungen verwendet werden. HelloWorld.html, Wrapper / Host-HTML-Datei für Flex-Anwendungen. HelloWorld.swf, unsere flexbasierte Anwendung. playerProductInstall.swf, Flash Player Express-Installationsprogramm. spark_xxx.swf, Bibliothek zur Unterstützung von Spark-Komponenten. swfobject.js, JavaScript, das für das Laden von HelloWorld.swf in HelloWorld.html verantwortlich ist. Es überprüft die Flash Player-Version und übergibt den Initialisierungsparameter an die Datei HelloWorld.swf. textLayout_xxx.swf, Bibliothek zur Unterstützung von Textkomponenten. |
| HTML-Vorlage | Dies ist die konfigurierbare Webanwendung. Flash Builder kompiliert Dateien von der HTML-Vorlage in den Ordner bin-debug. Der Verlaufsordner enthält Unterstützungsdateien für die Verlaufsverwaltung der Flex-Anwendung. index.template.html, Wrapper / Host-HTML-Datei für Flex-Anwendungen mit Platzhaltern für die Flash Builder-spezifische Konfiguration. Wird während des Builds im Ordner bin-debug in HelloWorld.html kompiliert. playerProductInstall.swf, das Flash Player Express-Installationsprogramm wird während der Erstellung in den Ordner bin-debug kopiert. swfobject.js, JavaScript, das für das Laden von HelloWorld.swf in HelloWorld.html verantwortlich ist. Es überprüft die Flash Player-Version und übergibt den Initialisierungsparameter an die Datei HelloWorld.swf, die während der Erstellung in den Ordner bindebug kopiert wird. |
Schritt 2 - Externe CSS-Datei erstellen
Erstellen Sie eine CSS-Datei styles.css für Wrapper HTML-Seite in html-template Mappe.
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;
}Schritt 3 - Ändern der Wrapper-HTML-Seitenvorlage
Ändern Sie die Wrapper-HTML-Seitenvorlage index.template.html im htmltemplateMappe. Flash Builder erstellt eine Standard-Wrapper-HTML-Seitenvorlage html-template / index.template.html , die in HelloWorld.html kompiliert wird.
Diese Datei enthält Platzhalter, die Flash Builder während des Kompilierungsprozesses ersetzt. Zum Beispiel Flash Player-Version, Anwendungsname usw.
Lassen Sie uns diese Datei so ändern, dass benutzerdefinierte Meldungen angezeigt werden, falls das Flash-Plugin nicht installiert ist.
<!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>Schritt 4 - Erstellen Sie eine interne CSS-Datei
Erstellen Sie eine CSS-Datei Style.css zum HelloWorld.mxml im table tablebordered/com/tutorialspointMappe. Flex bietet ähnliche CSS-Stile für seine UI-Steuerelemente wie CSS-Stile für HTML-UI-Steuerelemente.
/* 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;
}Schritt 5 - Ändern Sie die Einstiegsklasse
Flash Builder erstellt eine Standard-Mxml- Dateitabelle tablebordered / com.tutorialspoint / HelloWorld.mxml mit dem Root-Tag <application> -Container für die Anwendung. Lassen Sie uns diese Datei so ändern, dass "Hallo Welt!" - -
<?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>Sie können weitere XML- oder Actionscript-Dateien im selben Quellverzeichnis erstellen, um entweder neue Anwendungen oder Hilfsroutinen zu definieren.
Schritt 6 - Anwendung erstellen
Flash Builder hat Build Automaticallystandardmäßig aktiviert. Überprüfen Sie einfach dieProblemsZeigen Sie an, ob ein Fehler vorliegt. Sobald Sie mit den Änderungen fertig sind, werden keine Fehler mehr angezeigt.
Schritt 7 - Führen Sie die Anwendung aus
Klicken Sie nun auf
Wenn alles in Ordnung ist, muss der Browser angezeigt, die Anwendung gestartet und ausgeführt werden. Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis: [ Online testen ]
Da Sie Ihre Anwendung im Flash Player ausführen, muss das Flash Player-Plugin für Ihren Browser installiert werden. Folgen Sie einfach den Anweisungen auf dem Bildschirm, um das Plugin zu installieren. Wenn Sie bereits ein Flash Player-Plugin für Ihren Browser eingerichtet haben, sollte die folgende Ausgabe angezeigt werden:
Herzliche Glückwünsche! Sie haben Ihre erste Anwendung mit implementiertFlex.
In diesem Tutorial erfahren Sie, wie Sie eine Anwendung erstellen war Datei und wie diese im Apache Tomcat-Webserver-Stammverzeichnis bereitgestellt wird.
Wenn Sie dieses einfache Beispiel verstanden haben, können Sie mit den gleichen Schritten auch eine komplexe Flex-Anwendung bereitstellen.
Führen Sie die folgenden Schritte aus, um eine Flex-Anwendung zu erstellen:
| Schritt | Beschreibung |
|---|---|
| 1 | Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einer packagecom. tutorialspoint.client wie im Kapitel Flex - Anwendung erstellen erläutert . |
| 2 | Ändern Sie HelloWorld.mxml wie unten erläutert. Halten Sie den Rest der Dateien unverändert. |
| 3 | Kompilieren Sie die Anwendung und führen Sie sie aus, um sicherzustellen, dass die Geschäftslogik den Anforderungen entspricht. |
Führen Sie die folgenden Schritte aus, um einen Release-Build einer Flex-Anwendung zu erstellen und diese dann auf dem Tomcat-Server bereitzustellen.
Der erste Schritt besteht darin, einen Release-Build mit der Flash Builder-IDE zu erstellen. Starten Sie den Release-Build-Assistenten mit dieser OptionFile > Export > Flash Builder > Release Build.
Wählen Sie das Projekt als HelloWorld aus, indem Sie das Assistentenfenster wie folgt verwenden
Belassen Sie andere Standardwerte als solche und klicken Sie auf Fertig stellen. Jetzt erstellt Flash Builder einen Bin-Release-Ordner, der den Release-Build des Projekts enthält.
Nachdem unser Release-Build fertig ist, führen Sie die folgenden Schritte aus, um eine Flex-Anwendung bereitzustellen:
| Schritt | Beschreibung |
|---|---|
| 1 | Komprimieren Sie den Inhalt des Ordners bin-release der Anwendung in Form einer HelloWorld.war-Datei und stellen Sie ihn in Apache Tomcat Webserver bereit. |
| 2 | Starten Sie Ihre Webanwendung unter Verwendung der entsprechenden URL, wie im letzten Schritt unten erläutert. |
Es folgt der Inhalt der geänderten mxml-Datei 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>Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im normalen Modus kompilieren und ausführen, wie wir es im Kapitel Flex - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis: [ Online testen ]
WAR-Datei erstellen
Jetzt funktioniert unsere Anwendung einwandfrei und wir können sie als Kriegsdatei exportieren. Befolgen Sie die folgenden Schritte -
Wechseln Sie in das Bin-Release-Verzeichnis C: \ workspace \ HelloWorld \ binrelease Ihres Projekts
Wählen Sie alle Dateien und Ordner aus, die im bin-release-Verzeichnis verfügbar sind.
Komprimieren Sie alle ausgewählten Dateien und Ordner in einer Datei namens HelloWorld.zip .
Benennen Sie HelloWorld.zip in HelloWorld.war um.
Bereitstellen der WAR-Datei
Stoppen Sie den Tomcat-Server.
Kopieren Sie die Datei HelloWorld.war in den Ordner tomcat-Installationsverzeichnis> webapps.
Starten Sie den Tomcat-Server.
Schauen Sie in das Webapps-Verzeichnis, es sollte einen Ordner geben, den HelloWorld erstellt hat.
Jetzt wird HelloWorld.war erfolgreich im Tomcat Webserver-Stammverzeichnis bereitgestellt.
Führen Sie die Anwendung aus
Geben Sie eine URL im Webbrowser ein -
http: // localhost: 8080 / HelloWorld / HelloWorld.html , um die Anwendung zu starten.
Servername (localhost) und Port (8080) können je nach Tomcat-Konfiguration variieren.
Lebenszyklus der Flex-Anwendung
Obwohl Sie Flex-Anwendungen erstellen können, ohne die Lebenszyklusphasen einer Anwendung zu kennen, ist es gut, den grundlegenden Mechanismus zu kennen. die Reihenfolge, in der die Dinge geschehen. Es hilft Ihnen dabei, Funktionen wie das Laden anderer Flex-Anwendungen zur Laufzeit zu konfigurieren und den Prozess des Ladens und Entladens von Klassenbibliotheken und Assets zur Laufzeit zu verwalten.
Durch ein gutes Verständnis des Lebenszyklus von Flex-Anwendungen können Sie bessere Anwendungen erstellen und optimieren, da Sie wissen, wo Sie Code optimal ausführen können. Wenn Sie beispielsweise sicherstellen möchten, dass während eines Preloaders Code ausgeführt wird, müssen Sie wissen, wo der Code für dieses Ereignis platziert werden soll.
Wenn wir die Flex-Anwendung in einen Browser laden, treten die folgenden Ereignisse während des Lebenszyklus der Flex-Anwendung auf.
Im Folgenden finden Sie kurze Informationen zu verschiedenen Ereignissen im Flex-Lebenszyklus.
| Sr.Nr. | Eventbeschreibung |
|---|---|
| 1 | preInitialize: mx.core.UIComponent.preinitialize Ereignistyp: mx.events.FlexEvent.PREINITIALIZE Dieses Ereignis wird zu Beginn der Komponenteninitialisierungssequenz ausgelöst. Die Komponente befindet sich beim Auslösen dieses Ereignisses in einem sehr unformatierten Zustand. Viele Komponenten, wie z. B. die Schaltflächensteuerung, erstellen interne untergeordnete Komponenten, um Funktionen zu implementieren. Das Button-Steuerelement erstellt beispielsweise eine interne UI TextField-Komponente, um den Beschriftungstext darzustellen. Wenn Flex das Vorinitialisierungsereignis auslöst, wurden die untergeordneten Elemente, einschließlich aller internen untergeordneten Elemente, einer Komponente noch nicht erstellt. |
| 2 | initialize: mx.core.UIComponent.initialize Ereignistyp: mx.events.FlexEvent.INITIALIZE Dieses Ereignis wird nach der Vorinitialisierungsphase ausgelöst. Das Flex Framework initialisiert in dieser Phase die interne Struktur dieser Komponente. Dieses Ereignis wird automatisch ausgelöst, wenn die Komponente einem übergeordneten Element hinzugefügt wird. Sie müssen initialize () nicht generell aufrufen. |
| 3 | CreationComplete: mx.core.UIComponent.creationComplete Ereignistyp: mx.events.FlexEvent.CREATION_COMPLETE Dieses Ereignis wird ausgelöst, wenn die Komponente ihre Konstruktion, Eigenschaftsverarbeitung, Messung, Layout und Zeichnung abgeschlossen hat. Zu diesem Zeitpunkt ist die Komponente abhängig von ihrer sichtbaren Eigenschaft nicht sichtbar, obwohl sie gezeichnet wurde. |
| 4 | applicationComplete: spark.components.Application.applicationComplete Ereignistyp: mx.events.FlexEvent.APPLICATION_COMPLETE Wird versendet, nachdem die Anwendung initialisiert, vom LayoutManager verarbeitet und an die Anzeigeliste angehängt wurde. Dies ist das letzte Ereignis im Lebenszyklus der Anwendungserstellung und zeigt an, dass die Anwendung vollständig geladen wurde. |
Beispiel für einen flexiblen Lebenszyklus
Befolgen Sie die Schritte zum Verständnis des Testlebenszyklus einer Flex-Anwendung, indem Sie eine Testanwendung erstellen.
| Schritt | Beschreibung |
|---|---|
| 1 | Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einer packagecom. tutorialspoint.client wie im Kapitel Flex - Anwendung erstellen erläutert . |
| 2 | Ändern Sie HelloWorld.mxml wie unten erläutert. Halten Sie den Rest der Dateien unverändert. |
| 3 | Kompilieren Sie die Anwendung und führen Sie sie aus, um sicherzustellen, dass die Geschäftslogik den Anforderungen entspricht. |
Es folgt der Inhalt der geänderten mxml-Datei 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>Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im normalen Modus kompilieren und ausführen, wie wir es im Kapitel Flex - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis: [ Online testen ]
Flex unterstützt die Verwendung von CSS-Syntax und -Stilen, um sie auf seine UI-Steuerelemente auf dieselbe Weise anzuwenden wie CSS auf HTML-Komponenten.
Weg Nr. 1: Verwenden einer externen Stylesheet-Datei
Sie können auf ein Stylesheet verweisen, das im Klassenpfad der Anwendung verfügbar ist. Betrachten Sie beispielsweise die Datei Style.css incom/tutorialspoint/client folder wo auch die Datei HelloWorld.mxml liegt.
/* 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;
}Dann kann die CSS-Datei durch Folgen des folgenden Code-Snippets referenziert werden
<fx:Style source = "/com/tutorialspoint/client/Style.css" />Weisen Sie der UI-Komponente mithilfe der styleName-Eigenschaft Stile zu
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
...
</s:BorderContainer>Weg 2: Verwenden von Stilen innerhalb der Ui-Containerkomponente
Sie können Stile innerhalb der UI-Containerkomponente mit dem Tag <fx: Style> definieren
Klassenstufenauswahl
<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>Weisen Sie der UI-Komponente mithilfe der styleName-Eigenschaft Stile zu.
<s:Label id = "errorMsg" text = "This is an error message" styleName = "errorLabel" />ID Level Selector
Stil UI-Komponente mit ID-Selektor.
<fx:Style>
/* id level selector */
#msgLabel {
color: gray;
}
</fx:Style>
<s:Label id = "msgLabel" text = "This is a normal message" />Typ Level Selector
Gestalten Sie einen Typ von UI-Komponente in einem 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)" />Flex Style mit CSS Beispiel
Befolgen Sie die Schritte zum Überprüfen des CSS-Stils einer Flex-Anwendung, indem Sie eine Testanwendung erstellen.
| Schritt | Beschreibung |
|---|---|
| 1 | Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint.client, wie im Kapitel Flex - Anwendung erstellen erläutert . |
| 2 | Ändern Style.css, HelloWorld.mxml erklärt , wie unten. Halten Sie den Rest der Dateien unverändert. |
| 3 | Kompilieren Sie die Anwendung und führen Sie sie aus, um sicherzustellen, dass die Geschäftslogik den Anforderungen entspricht. |
Es folgt der Inhalt der geänderten CSS-Datei 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;
}Es folgt der Inhalt der geänderten mxml-Datei 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>Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im normalen Modus kompilieren und ausführen, wie wir es im Kapitel Flex - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis: [ Online ausprobieren ]
Was ist Häuten?
Beim Skinning in Flex wird das Erscheinungsbild einer UI-Komponente vollständig angepasst.
Ein Skin kann Text, Bild, Filter, Übergänge und Zustände einer Komponente definieren.
Ein Skin kann als separate mxml- oder ActionScript-Komponente erstellt werden.
Mit Skin können wir alle visuellen Aspekte einer UI-Komponente steuern.
Der Prozess zum Definieren von Skin ist für alle UI-Komponenten gleich.
Schritt 1 - Erstellen Sie eine Skin
Starten Sie den Assistenten zum Erstellen von MXML-Skins mit dieser Option File > New > MXML Skin.
Paket eingeben als com.tutorialspoint.skin, Name als GradientBackgroundSkin und wählen Sie die Hostkomponente als vorhandenes flexibles BorderContainer-Steuerelementspark.component.BorderContainer.
Jetzt haben Sie einen Skin für einen BorderContainer erstellt. Ändern Sie den Inhalt der mxml-Skin-Dateisrc/com.tutorialspoint/skin/GradientBackgroundSkin.mxml.
Füllschicht wie folgt aktualisieren -
<!-- 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>Schritt 2: Haut auftragen
Sie können auf zwei Arten Haut auf eine Komponente auftragen:
Skin im MXML-Skript anwenden (statisch)
Anwenden GradientBackgroundSkin zu einem BorderContainer mit id mainContainer mit seiner skinClass Attribut.
<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">Skin in ActionScript anwenden (dynamisch)
Anwenden GradientBackgroundSkin zu einem BorderContainer mit id mainContainer mit seiner skinClass Eigentum.
protected function gradientBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", GradientBackgroundSkin);
}Flex Style mit Skin Beispiel
Führen Sie die folgenden Schritte aus, um das Skinnen in einer Flex-Anwendung in Aktion zu sehen, indem Sie eine Testanwendung erstellen:
| Schritt | Beschreibung |
|---|---|
| 1 | Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint.client, wie im Kapitel Flex - Anwendung erstellen erläutert . |
| 2 | Erstellen Sie Skin GradientBackgroundSkin.mxml unter einem Paket com.tutorialspoint.skin, wie oben erläutert. Halten Sie den Rest der Dateien unverändert. |
| 3 | Ändern Sie HelloWorld.mxml wie unten erläutert. Halten Sie den Rest der Dateien unverändert. |
| 4 | Kompilieren Sie die Anwendung und führen Sie sie aus, um sicherzustellen, dass die Geschäftslogik den Anforderungen entspricht. |
Im Folgenden finden Sie den Inhalt der Datei 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>Es folgt der Inhalt der geänderten 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>Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im normalen Modus kompilieren und ausführen, wie wir es im Kapitel Flex - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis: [ Online testen ]
Was ist Datenbindung?
Datenbindung ist ein Prozess, bei dem Daten eines Objekts an ein anderes Objekt gebunden werden. Es erfordert eine Quelleneigenschaft, eine Zieleigenschaft und ein auslösendes Ereignis, das angibt, wann die Daten von der Quelle zum Ziel kopiert werden sollen.
Flex bietet drei Möglichkeiten, um die Datenbindung wie folgt durchzuführen
- Syntax für geschweifte Klammern in MXML-Skript ({})
- <fx: binding> -Tag in MXML
- BindingUtils in ActionScript
Datenbindung - Verwenden von geschweiften Klammern in MXML
Das folgende Beispiel zeigt, wie geschweifte Klammern verwendet werden, um die Datenbindung einer Quelle an das Ziel anzugeben.
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />Datenbindung - Verwenden des Tags <fx: Binding> in MXML
Das folgende Beispiel zeigt die Verwendung
<fx:Binding source = "txtInput1.text" destination = "txtInput2.text" />
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" />Datenbindung - Verwenden von BindingUtils in ActionScript
Das folgende Beispiel zeigt, wie Sie mit BindingUtils die Datenbindung einer Quelle an das Ziel angeben.
<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)" />Beispiel für die Flex-Datenbindung
Führen Sie die folgenden Schritte aus, um das Skinnen in einer Flex-Anwendung in Aktion zu sehen, indem Sie eine Testanwendung erstellen.
| Schritt | Beschreibung |
|---|---|
| 1 | Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint.client, wie im Kapitel Flex - Anwendung erstellen erläutert . |
| 2 | Ändern Sie HelloWorld.mxml wie unten erläutert. Halten Sie den Rest der Dateien unverändert. |
| 3 | Kompilieren Sie die Anwendung und führen Sie sie aus, um sicherzustellen, dass die Geschäftslogik den Anforderungen entspricht. |
Im Folgenden finden Sie den Inhalt der geänderten Datei 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>Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im normalen Modus kompilieren und ausführen, wie wir es im Kapitel Flex - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis: [ Online testen ]
Jede Benutzeroberfläche berücksichtigt die folgenden drei Hauptaspekte:
UI Elements- Dies sind die zentralen visuellen Elemente, die der Benutzer schließlich sieht und mit denen er interagiert. Flex bietet eine große Liste weit verbreiteter und allgemeiner Elemente, die von einfach bis komplex reichen und in diesem Lernprogramm behandelt werden.
Layouts- Sie definieren, wie UI-Elemente auf dem Bildschirm organisiert werden sollen, und geben der GUI (Graphical User Interface) ein endgültiges Erscheinungsbild. Dieser Teil wird im Kapitel Layout behandelt.
Behavior- Diese Ereignisse treten auf, wenn der Benutzer mit UI-Elementen interagiert. Dieser Teil wird im Kapitel Ereignisbehandlung behandelt.
Flex UI-Elemente
Die Flex UI-Bibliothek bietet Klassen in einer genau definierten Klassenhierarchie, um komplexe webbasierte Benutzeroberflächen zu erstellen. Alle Klassen in dieser Komponentenhierarchie wurden von der abgeleitetEventDispatcher Basisklasse wie unten gezeigt -
Jedes Basic UI-Steuerelement erbt Eigenschaften von der UI Component-Klasse, die wiederum Eigenschaften von EventDispatcher und anderen Klassen der obersten Ebene erbt.
| Sr.Nr. | Kontrolle & Beschreibung |
|---|---|
| 1 | Flex EventDispatcher-Klasse Die EventDispatcher-Klasse ist die Basisklasse für alle Klassen, die Ereignisse auslösen können. Mit der EventDispatcher-Klasse kann jedes Objekt in der Anzeigeliste ein Ereignisziel sein und als solches die Methoden der IEventDispatcher-Schnittstelle verwenden. |
| 2 | Flex UIComponent Die UIComponent-Klasse ist die Basisklasse für alle visuellen Komponenten, sowohl interaktiv als auch nicht interaktiv. |
Grundlegende Steuerelemente
Im Folgenden sind einige wichtige Grundsteuerungen aufgeführt :
| Sr.Nr. | Bedienelemente & Beschreibung |
|---|---|
| 1 | Etikette Label ist eine UIC-Komponente auf niedriger Ebene, die eine oder mehrere Zeilen einheitlich formatierten Textes rendern kann. |
| 2 | Text Mit dem Textsteuerelement können Sie sowohl HTML-Inhalte als auch normalen Text in Ihrer Anwendung anzeigen. |
| 3 | Bild Mit dem Bildsteuerelement können Sie zur Laufzeit JPEG-, PNG-, GIF- und SWF-Dateien importieren. |
| 4 | LinkButton Das LinkButton-Steuerelement ist ein randloses Button-Steuerelement, dessen Inhalt hervorgehoben wird, wenn ein Benutzer die Maus darüber bewegt. |
Mit Formularsteuerelementen können Benutzer Daten eingeben und können mit der Anwendung interagieren. Jede Formular-Benutzeroberfläche steuert und erbt Eigenschaften von der UIComponent-Klasse, die wiederum Eigenschaften von EventDispatcher und anderen Klassen der obersten Ebene erbt.
| Sr.Nr. | Kontrolle & Beschreibung |
|---|---|
| 1 | Flex EventDispatcher-Klasse Die EventDispatcher-Klasse ist die Basisklasse für alle Klassen, die Ereignisse auslösen können. Mit der EventDispatcher-Klasse kann jedes Objekt in der Anzeigeliste ein Ereignisziel sein und als solches die Methoden der IEventDispatcher-Schnittstelle verwenden. |
| 2 | Flex UIComponent Die UIComponent-Klasse ist die Basisklasse für alle visuellen Komponenten, sowohl interaktiv als auch nicht interaktiv. |
Formularsteuerelemente
Im Folgenden sind einige wichtige Formularsteuerelemente aufgeführt:
| Sr.Nr. | Kontrolle & Beschreibung |
|---|---|
| 1 | Taste Die Schaltflächenkomponente ist eine häufig verwendete rechteckige Schaltfläche. |
| 2 | Umschaltknopf Die ToggleButton-Komponente definiert eine Umschalttaste. |
| 3 | CheckBox Die CheckBox-Komponente besteht aus einem optionalen Etikett und einem kleinen Kästchen, das ein Häkchen enthalten kann oder nicht. |
| 4 | Farbwähler Das ColorPicker-Steuerelement bietet einem Benutzer die Möglichkeit, eine Farbe aus einer Farbfeldliste auszuwählen. |
| 5 | Kombinationsfeld Das ComboBox-Steuerelement ist eine untergeordnete Klasse des DropDownListBase-Steuerelements. |
| 6 | DateChooser Das DateChooser-Steuerelement zeigt den Namen eines Monats, das Jahr und ein Raster der Tage des Monats mit Spalten an, die für den Wochentag gekennzeichnet sind. |
| 7 | Radio knopf Mit der RadioButton-Komponente kann der Benutzer eine einzelne Auswahl innerhalb einer Reihe sich gegenseitig ausschließender Auswahl treffen. |
| 8 | TextArea TextArea ist ein Texteingabesteuerelement, mit dem Benutzer mehrere Zeilen formatierten Textes eingeben und bearbeiten können. |
| 9 | Text Eingabe TextInput ist ein Texteingabesteuerelement, mit dem Benutzer eine einzelne Zeile einheitlich formatierten Textes eingeben und bearbeiten können. |
| 10 | Dropdown-Liste Das DropDownList-Steuerelement enthält eine Dropdown-Liste, aus der der Benutzer einen einzelnen Wert auswählen kann. |
| 11 | NumericStepper Mit dem NumericStepper-Steuerelement können Sie eine Nummer aus einem geordneten Satz auswählen. |
Komplexe Steuerelemente bieten Benutzern erweiterte Funktionen, um auf einfachere Weise mit großen Datenmengen umzugehen, und bieten ihnen Interaktionsfunktionen mit der Anwendung. Jedes Complex UI-Steuerelement erbt Eigenschaften von der UIComponent-Klasse, die wiederum Eigenschaften von EventDispatcher und anderen Klassen der obersten Ebene erbt.
| Sr.Nr. | Kontrolle & Beschreibung |
|---|---|
| 1 | Flex EventDispatcher-Klasse Die EventDispatcher-Klasse ist die Basisklasse für alle Klassen, die Ereignisse auslösen können. Mit der EventDispatcher-Klasse kann jedes Objekt in der Anzeigeliste ein Ereignisziel sein und als solches die Methoden der IEventDispatcher-Schnittstelle verwenden. |
| 2 | Flex UIComponent Die UIComponent-Klasse ist die Basisklasse für alle visuellen Komponenten, sowohl interaktiv als auch nicht interaktiv. |
Komplexe Steuerungen
Im Folgenden sind die wenigen wichtigen komplexen Steuerelemente aufgeführt:
| Sr.Nr. | Kontrolle & Beschreibung |
|---|---|
| 1 | DataGrid Das DataGrid-Steuerelement zeigt eine Reihe von Spaltenüberschriften über einem scrollbaren Raster an. |
| 2 | AdvancedDataGrid Das AdvancedDataGrid erweitert das Standard-DataGrid-Steuerelement um einige zusätzliche Funktionen, um Datenvisualisierungsfunktionen hinzuzufügen. |
| 3 | Speisekarte Das Menüsteuerelement erstellt ein Popup-Menü mit individuell auswählbaren Optionen. |
| 4 | Fortschrittsanzeige Das ProgressBar-Steuerelement bietet eine visuelle Darstellung des Fortschritts einer Aufgabe im Zeitverlauf. |
| 5 | Rich-Text-Editor Mit dem RichTextEditor-Steuerelement können Benutzer Text eingeben und formatieren. |
| 6 | TileList Das TileList-Steuerelement Das TileList-Steuerelement zeigt eine Reihe von Elementen an, die in Kacheln angeordnet sind. |
| 7 | Baum Mit dem Tree-Steuerelement kann ein Benutzer hierarchische Daten anzeigen, die als erweiterbarer Baum angeordnet sind. |
| 8 | Videoplayer Das VideoPlayer-Steuerelement ist ein skinnbarer Videoplayer, der progressives Herunterladen, Streaming mit mehreren Bitraten und Video-Streaming unterstützt. |
| 9 | Akkordeon Ein Accordian-Steuerelement verfügt über eine Sammlung von untergeordneten MX-Containern oder Spark NavigatorContent-Containern, von denen jedoch jeweils nur einer sichtbar ist. |
| 10 | TabNavigator Das TabNavigator-Steuerelement enthält einen TabBar-Container zum Navigieren zwischen seinen untergeordneten Containern. |
| 11 | ToggleButtonBar Das ToggleButtonBar-Steuerelement definiert eine horizontale oder vertikale Gruppe von Schaltflächen, die ihren ausgewählten oder nicht ausgewählten Status beibehalten. |
Mit den Steuerelementen des Layoutbedienfelds können Benutzer Steuerelemente für die Benutzeroberfläche auf der Seite organisieren. Jedes Layout-Steuerelement erbt Eigenschaften von der UIComponent-Klasse, die wiederum Eigenschaften von EventDispatcher und anderen Klassen der obersten Ebene erbt.
| Sr.Nr. | Kontrolle & Beschreibung |
|---|---|
| 1 | Flex EventDispatcher-Klasse Die EventDispatcher-Klasse ist die Basisklasse für alle Klassen, die Ereignisse auslösen können. Mit der EventDispatcher-Klasse kann jedes Objekt in der Anzeigeliste ein Ereignisziel sein und als solches die Methoden der IEventDispatcher-Schnittstelle verwenden. |
| 2 | Flex UIComponent Die UIComponent-Klasse ist die Basisklasse für alle visuellen Komponenten, sowohl interaktiv als auch nicht interaktiv. |
Layoutfelder
Im Folgenden finden Sie einige wichtige Layoutfelder -
| Sr.Nr. | Panel & Beschreibung |
|---|---|
| 1 | BorderContainer Die BorderContainer-Klasse bietet eine Reihe von CSS-Stilen, die das Erscheinungsbild des Rahmens und die Hintergrundfüllung des Containers steuern. |
| 2 | Bilden Der Formularcontainer bietet Kontrolle über das Layout eines Formulars, markiert Formularfelder als erforderlich oder optional, verarbeitet Fehlermeldungen und bindet Formulardaten an das Flex-Datenmodell, um die Datenprüfung und -validierung durchzuführen. |
| 3 | VGroup Der VGroup-Container ist ein Gruppencontainer, der die VerticalLayout-Klasse verwendet. |
| 4 | HGroup Der HGroup-Container ist ein Gruppencontainer, der die HorizontalLayout-Klasse verwendet. |
| 5 | Panel Die Panel-Klasse ist ein Container, der eine Titelleiste, eine Beschriftung, einen Rahmen und einen Inhaltsbereich für seine untergeordneten Elemente enthält. |
| 6 | SkinnableContainer Die SkinnableContainer-Klasse ist die Basisklasse für Skinnable-Container, die visuellen Inhalt bereitstellen. |
| 7 | Tab-Leiste Die Registerkartenleiste zeigt eine Reihe identischer Registerkarten an. |
| 8 | TitleWindow Das TitleWindow erweitert das Bedienfeld um eine Schaltfläche zum Schließen und einen Verschiebungsbereich. |
Mit dem Konzept der Effekte können wir der Flex-Anwendung Verhalten hinzufügen. Wenn beispielsweise ein Textfeld scharfgestellt wird, können wir seinen Text mutiger machen und seine Größe etwas vergrößern.
Jeder Effekt erbt Eigenschaften von der Effektklasse, die wiederum Eigenschaften von EventDispatcher und anderen Klassen der obersten Ebene erbt.
| Sr.Nr. | Wirkung & Beschreibung |
|---|---|
| 1 | Flex-Effektklasse Die Effektklasse ist eine abstrakte Basisklasse, die die Grundfunktionalität aller Flex-Effekte definiert. Diese Klasse definiert die Basis-Factory-Klasse für alle Effekte. |
Grundlegende Effekte
Im Folgenden sind die wenigen wichtigen grundlegenden visuellen Effekte aufgeführt:
| Sr.Nr. | Wirkung & Beschreibung |
|---|---|
| 1 | Verblassen Der Fade-Effekt animiert die Alpha-Eigenschaft einer Komponente. |
| 2 | WipeLeft Die WipeLeft-Klasse definiert einen Wipe-Left-Effekt. |
| 3 | WipeRight Die WipeRight-Klasse definiert einen Wipe-Right-Effekt. |
| 4 | Move3D Die Move3D-Klasse verschiebt ein Zielobjekt in den Dimensionen x, y und z. |
| 5 | Scale3D Die Scale3D-Klasse skaliert ein Zielobjekt in drei Dimensionen um das Transformationszentrum. |
| 6 | 3D drehen Die Rotate3D-Klasse dreht ein Zielobjekt in drei Dimensionen um die x-, y- oder z-Achse. |
| 7 | Animieren Dieser Animationseffekt animiert einen beliebigen Satz von Eigenschaften zwischen Werten. Geben Sie die zu animierenden Eigenschaften und Werte an, indem Sie die Eigenschaft motionPaths festlegen. |
Flex verwendet das Ereigniskonzept, um Daten von einem Objekt an ein anderes zu übergeben, abhängig vom Status oder der Benutzerinteraktion innerhalb der Anwendung.
ActionScript hat eine generische EventKlasse, die einen Großteil der Funktionen definiert, die für die Arbeit mit Ereignissen erforderlich sind. Jedes Mal, wenn ein Ereignis in einer Flex-Anwendung auftritt, werden drei Arten von Objekten aus der Ereignisklassenhierarchie erstellt.
Ereignis hat die folgenden drei Schlüsseleigenschaften
| Sr.Nr. | Objektbeschreibung |
|---|---|
| 1 | Type Das typegibt an, welche Art von Ereignis gerade passiert ist. Dies kann Klicken, Initialisieren, Mouseover, Ändern usw. sein. Die tatsächlichen Werte werden durch Konstanten wie MouseEvent.CLICK dargestellt. |
| 2 | Target Das target Die Eigenschaft von Event ist eine Objektreferenz auf die Komponente, die das Ereignis generiert hat. Wenn Sie auf eine Schaltfläche mit der ID clickMeButton klicken, ist das Ziel dieses Klickereignisses clickMeButton |
| 3 | CurrentTarget Das currentTargetEigenschaft variiert Containerhierarchie. Es befasst sich hauptsächlich mit dem Ablauf von Ereignissen. |
Ereignisflussphasen
Ein Ereignis durchläuft drei Phasen und sucht nach Ereignishandlern.
| Sr.Nr. | Phase & Beschreibung |
|---|---|
| 1 | Capture In der Erfassungsphase sucht das Programm nach Ereignishandlern vom äußeren (oder oberen) übergeordneten zum innersten. Die Erfassungsphase stoppt am übergeordneten Objekt des Objekts, das das Ereignis ausgelöst hat. |
| 2 | Target In der Zielphase wird die Komponente, die das Ereignis ausgelöst hat, auf einen Ereignishandler überprüft. |
| 3 | Bubble Die Blasenphase ist umgekehrt zur Erfassungsphase und arbeitet sich vom übergeordneten Element der Zielkomponente bis zur Struktur zurück. |
Betrachten Sie den folgenden Anwendungscode -
<?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>Wenn der Benutzer auf die Schaltfläche klickt, hat er auch auf das Bedienfeld und die Anwendung geklickt.
Die Veranstaltung durchläuft drei Phasen und sucht nach Zuordnungen für Event-Handler.
Führen Sie die folgenden Schritte aus, um die Ereignisübergabe in einer Flex-Anwendung zu testen.
| Schritt | Beschreibung |
|---|---|
| 1 | Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint.client, wie im Kapitel Flex - Anwendung erstellen erläutert . |
| 2 | Ändern Sie HelloWorld.mxml wie unten erläutert. Halten Sie den Rest der Dateien unverändert. |
| 3 | Kompilieren Sie die Anwendung und führen Sie sie aus, um sicherzustellen, dass die Geschäftslogik den Anforderungen entspricht. |
Es folgt der Inhalt der geänderten mxml-Datei 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>Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im normalen Modus kompilieren und ausführen, wie wir es im Kapitel Flex - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis: [ Online testen ]
Flex bietet zwei Möglichkeiten zum Erstellen benutzerdefinierter Komponenten.
- Verwenden von ActionScript
- Verwenden von MXML
Verwenden von ActionScript
Sie können eine Komponente erstellen, indem Sie eine vorhandene Komponente erweitern. Klicken Sie auf, um eine Komponente mit Flash Builder zu erstellenFile > New > ActionScript Class.
Geben Sie die Details wie unten gezeigt ein -
Flash Builder erstellt die folgende Datei CustomButton.as.
package com.tutorialspoint.client {
import spark.components.Button;
public class CustomButton extends Button {
public function CustomButton() {
super();
}
}
}Verwenden von MXML
Sie können eine Komponente erstellen, indem Sie eine vorhandene Komponente erweitern. Klicken Sie auf, um eine Komponente mit Flash Builder zu erstellenFile > New > MXML Component.
Geben Sie die Details wie unten gezeigt ein.
Flash Builder erstellt die folgende Datei 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>Führen Sie die folgenden Schritte aus, um benutzerdefinierte Steuerelemente in einer Flex-Anwendung zu testen:
| Schritt | Beschreibung |
|---|---|
| 1 | Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint.client, wie im Kapitel Flex - Anwendung erstellen erläutert . |
| 2 | Ändern Sie HelloWorld.mxml wie unten erläutert. Halten Sie den Rest der Dateien unverändert. |
| 3 | Erstellen Sie die Komponenten CustomLogin.mxml und CustomButton.as wie oben erläutert. Ändern Sie diese Dateien wie unten erläutert. Halten Sie den Rest der Dateien unverändert. |
| 4 | Kompilieren Sie die Anwendung und führen Sie sie aus, um sicherzustellen, dass die Geschäftslogik den Anforderungen entspricht. |
Es folgt der Inhalt der geänderten mxml-Datei 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>Es folgt der Inhalt der geänderten mxml-Datei 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";
}
}
}Es folgt der Inhalt der geänderten mxml-Datei 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>Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im normalen Modus kompilieren und ausführen, wie wir es im Kapitel Flex - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis: [ Online testen ]
Flex bietet RPC-Dienste, um serverseitige Daten für die Clientseite bereitzustellen. Flex bietet eine angemessene Kontrolle über serverseitige Daten.
Mithilfe von Flex RPC-Diensten können wir Benutzeraktionen definieren, die auf der Serverseite ausgeführt werden sollen.
Flex RPC Sservices können in alle serverseitigen Technologien integriert werden.
Einer der Flex RPC-Dienste bietet integrierte Unterstützung für die Übertragung komprimierter Binärdaten über das Kabel und ist recht schnell.
Flex bietet die folgenden drei Arten von RPC-Diensten
| Sr.Nr. | RPC Service & Beschreibung |
|---|---|
| 1 | HttpService Das Tag <mx: HTTPService> wird verwendet, um ein HTTPService-Objekt in einer MXML-Datei darzustellen. Wenn Sie die send () -Methode des HTTPService-Objekts aufrufen, wird eine HTTP-Anforderung an die angegebene URL gesendet und eine HTTP-Antwort zurückgegeben. Sie können auch die Methoden HTTP HEAD, OPTIONS, TRACE und DELETE verwenden. |
| 2 | WebService Der <mx: WebService> wird verwendet, um Zugriff auf die Vorgänge von SOAP-kompatiblen Webdiensten zu erhalten. |
| 3 | RemoteObject Das <mx: RemoteObject> -Tag wird verwendet, um ein HTTPService-Objekt in einer MXML-Datei darzustellen. Mit diesem Tag können Sie mithilfe der AMF-Codierung (Action Message Format) auf die Methoden von Java-Objekten zugreifen. |
Wir werden den HTTP-Dienst im Detail besprechen. Wir verwenden eine XML-Quelldatei, die auf dem Server abgelegt ist, und greifen auf der Clientseite über den HTTP-Dienst darauf zu.
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>HTTPService-Erklärung
Deklarieren Sie nun einen HTTPService und übergeben Sie die URL der obigen Datei
<fx:Declarations>
<mx:HTTPService id = "itemRequest"
url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>RPC-Aufruf
Rufen Sie die Methode itemRequest.send () auf und binden Sie Werte vom lastResult-Objekt des itemRequest-Webservices an die Flex UI-Komponente.
...
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>Beispiel für einen RPC-Serviceabruf
Befolgen Sie nun die Schritte zum Testen von RPC-Diensten in einer Flex-Anwendung.
| Schritt | Beschreibung |
|---|---|
| 1 | Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint.client, wie im Kapitel Flex - Anwendung erstellen erläutert . |
| 2 | Ändern Sie HelloWorld.mxml wie unten erläutert. Halten Sie den Rest der Dateien unverändert. |
| 3 | Kompilieren Sie die Anwendung und führen Sie sie aus, um sicherzustellen, dass die Geschäftslogik den Anforderungen entspricht. |
Es folgt der Inhalt der geänderten mxml-Datei 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>Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im normalen Modus kompilieren und ausführen, wie wir es im Kapitel Flex - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis: [ Online testen ]
Flash Builder 4 bietet eine hervorragende integrierte Unterstützung für die Integration von FlexUnit in den Flex-Entwicklungszyklus.
Erstellen Sie eine Testfallklasse
Sie können eine Testfallklasse mit dem Flash Builder-Assistenten zum Erstellen von Testklassen erstellen. Das Ausführen von Testfällen ist mit Flash Builder ein Kinderspiel, wie Sie in diesem Artikel sehen werden.
Klicken Sie auf, um eine Testfallklasse mit Flash Builder zu erstellen File > New > Test Case Class. Geben Sie die Details wie unten gezeigt ein.
Flash Builder erstellt die folgende TestClass1.als Datei.
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 {}
}
}Beispiel für die FlexUnit-Integration
Befolgen Sie nun die Schritte zum Testen der FlexUnit-Integration in einer Flex-Anwendung.
| Schritt | Beschreibung |
|---|---|
| 1 | Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint.client, wie im Kapitel Flex - Anwendung erstellen erläutert . |
| 2 | Ändern Sie HelloWorld.mxml wie unten erläutert. Halten Sie den Rest der Dateien unverändert. |
| 3 | Erstellen Sie den Testfall TestClass1.as wie oben beschrieben und ändern Sie TestClass1.as wie unten erläutert. |
| 4 | Kompilieren Sie die Anwendung und führen Sie sie aus, um sicherzustellen, dass die Geschäftslogik den Anforderungen entspricht. |
Es folgt der Inhalt der als geänderte Datei 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);
}
}
}Es folgt der Inhalt der geänderten mxml-Datei 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>Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns im normalen Modus wie im Kapitel Flex - Anwendung erstellen kompilieren .
Ausführen von Testfällen
Klicken Sie nun mit der rechten Maustaste im Paket-Explorer auf TestClass1 und wählen Sie Run As > FlexUnit Tests. Die folgende Ausgabe wird im Flash Builder-Testfenster angezeigt.
Flash Builder zeigt auch Testergebnisse im Browser an.
Flex bietet hervorragende Möglichkeiten zum Debuggen von Flex-Code und Flash Builder 4 bietet eine hervorragende Unterstützung für Debugger und Debugging-Perspektiven.
Im Debug-Modus wird Flex Application auf der in Flash Builder 4 integrierten Flash Player Debugger-Version ausgeführt, die die Debugging-Funktion unterstützt.
So erhalten Entwickler eine einfache und integrierte Debugging-Konfiguration in Flash Builder
In diesem Artikel wird die Verwendung des Debuggens von Flex Client-Code mit Flash Builder demonstriert. Wir werden die folgenden Aufgaben erledigen
- Legen Sie Haltepunkte im Code fest und sehen Sie sie im Haltepunkt-Explorer.
- Gehen Sie beim Debuggen zeilenweise durch den Code.
- Zeigen Sie die Werte der Variablen an.
- Überprüfen Sie die Werte aller Variablen.
- Überprüfen Sie den Wert eines Ausdrucks.
- Zeigen Sie den Stapelrahmen für hängende Threads an.
Debugging-Beispiel
| Schritt | Beschreibung |
|---|---|
| 1 | Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint.client, wie im Kapitel Flex - Anwendung erstellen erläutert . |
| 2 | Ändern Sie HelloWorld.mxml wie unten erläutert. Halten Sie den Rest der Dateien unverändert. |
| 3 | Kompilieren Sie die Anwendung und führen Sie sie aus, um sicherzustellen, dass die Geschäftslogik den Anforderungen entspricht. |
Es folgt der Inhalt der geänderten mxml-Datei 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>Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns im normalen Modus wie im Kapitel Flex - Anwendung erstellen kompilieren .
Schritt 1 - Haltepunkte setzen
Platzieren Sie einen Haltepunkt in der ersten Zeile der Anwendung. Initialisieren Sie den Handler von HelloWorld.mxml
Schritt 2 - Debug-Anwendung
Klicken Sie nun auf das
Wenn alles in Ordnung ist, wird die Anwendung im Browser gestartet und in der Flash Builder-Konsole werden die folgenden Debug-Protokolle angezeigt.
[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 decompressionSobald die Anwendung gestartet wird, wird der Fokus auf den Flash Builder-Haltepunkt angezeigt, da wir den Haltepunkt in der ersten Zeile der application_initialize-Handler-Methode platziert haben.
Sie können die Stapelverfolgung für angehaltene Threads sehen.
Sie können die Werte für Ausdrücke sehen.
Sie können die Liste der platzierten Haltepunkte sehen.
Drücken Sie nun F6, bis Sie die letzte Zeile der application_initializeHandler () -Methode erreicht haben. Als Referenz für Funktionstasten prüft F6 den Code Zeile für Zeile, F5 tritt weiter ein und F8 setzt die Anwendung fort. Jetzt können Sie die Werteliste aller Variablen der application_initializeHandler () -Methode anzeigen.
Jetzt können Sie sehen, dass der Flex-Code genauso debuggt werden kann wie eine Java-Anwendung. Platzieren Sie Haltepunkte auf einer beliebigen Linie und spielen Sie mit den Debugging-Funktionen von Flex.
Flex bietet zwei Möglichkeiten zur Internationalisierung einer Flex-Anwendung: Wir zeigen die Verwendung der Kompilierungszeit Internationalisierung, die in Projekten am häufigsten verwendet wird.
| Sr.Nr. | Technik & Beschreibung |
|---|---|
| 1 | Compile Time Internationalization Diese Technik ist am weitesten verbreitet und erfordert zur Laufzeit nur sehr wenig Overhead. ist eine sehr effiziente Technik zum Übersetzen sowohl konstanter als auch parametrisierter Zeichenfolgen, die am einfachsten zu implementieren ist. Bei der Internationalisierung der Kompilierungszeit werden Standardeigenschaftendateien zum Speichern übersetzter Zeichenfolgen und parametrisierter Nachrichten verwendet. Diese Eigenschaftendateien werden direkt in der Anwendung kompiliert. |
| 2 | Run Time Internationalization Diese Technik ist sehr flexibel, aber langsamer als die statische Internationalisierung von Strings. Sie müssen die Lokalisierungseigenschaftendateien separat kompilieren, außerhalb der Anwendung belassen und zur Laufzeit laden. |
Workflow zur Internationalisierung einer Flex-Anwendung
Schritt 1 - Ordnerstruktur erstellen
Erstellen Sie einen Gebietsschemaordner unter dem Ordner src des Flex-Projekts. Dies ist das übergeordnete Verzeichnis für alle Eigenschaftendateien für die Gebietsschemas, die von der Anwendung unterstützt werden. Erstellen Sie im Gebietsschemaordner Unterordner, einen für jedes zu unterstützende Gebietsschema der Anwendung. Die Konvention zum Benennen eines Gebietsschemas lautet
{language}_{country code}Zum Beispiel steht en_US für Englisch der Vereinigten Staaten. Das Gebietsschema de_DE steht für Deutsch. Die Beispielanwendung unterstützt zwei gängige Sprachen: Englisch und Deutsch.
Schritt 2 - Erstellen Sie Eigenschaftendateien
Erstellen Sie eine Eigenschaftendatei mit den Nachrichten, die in der Anwendung verwendet werden sollen. Wir haben eine erstelltHelloWorldMessages.properties Datei unter src > locale > en_US Ordner in unserem Beispiel.
enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}Erstellen Sie Eigenschaftendateien mit übersetzten Werten, die für das Gebietsschema spezifisch sind. Wir haben eine erstelltHelloWorldMessages.properties Datei unter src > locale > de_DEOrdner in unserem Beispiel. Diese Datei enthält Übersetzungen in deutscher Sprache. _de gibt das deutsche Gebietsschema an und wir werden die deutsche Sprache in unserer Anwendung unterstützen.
Wenn Sie eine Eigenschaftendatei mit Flash Builder erstellen, ändern Sie die Codierung der Datei in UTF-8. Wählen Sie die Datei aus und klicken Sie mit der rechten Maustaste darauf, um das Eigenschaftenfenster zu öffnen. Wählen Sie die Codierung der Textdatei als Other UTF-8. Übernehmen und speichern Sie die Änderung.
enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}Schritt 3 - Geben Sie die Compiler-Optionen an
Klicken Sie mit der rechten Maustaste auf Ihr Projekt und wählen Sie Eigenschaften.
Wählen Sie Flex Compiler aus und fügen Sie Folgendes zu den Einstellungen für zusätzliche Compiler-Argumente hinzu:
-locale en_US de_DEKlicken Sie mit der rechten Maustaste auf Ihr Projekt und wählen Sie Eigenschaften.
Wählen Sie Flex Build Path und fügen Sie den Einstellungen für den Quellpfad Folgendes hinzu:
src\locale\{locale}Beispiel für die Internalisierung
Führen Sie nun die folgenden Schritte aus, um die Internalisierungstechnik in einer Flex-Anwendung zu testen:
| Schritt | Beschreibung |
|---|---|
| 1 | Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint.client, wie im Kapitel Flex - Anwendung erstellen erläutert . |
| 2 | Ändern Sie HelloWorld.mxml wie unten erläutert. Halten Sie den Rest der Dateien unverändert. |
| 3 | Kompilieren Sie die Anwendung und führen Sie sie aus, um sicherzustellen, dass die Geschäftslogik den Anforderungen entspricht. |
Es folgt der Inhalt der geänderten mxml-Datei 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>Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im normalen Modus kompilieren und ausführen, wie wir es im Kapitel Flex - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis: [ Online testen ]
Ändern Sie die Sprache mithilfe der Dropdown-Liste Sprache und sehen Sie das Ergebnis.
Flex bietet eine spezielle Klasse FlexPrintJob Flex-Objekte drucken.
FlexPrintJob kann zum Drucken eines oder mehrerer Flex-Objekte verwendet werden, z. B. eines Formular- oder VBox-Containers.
FlexPrintJob druckt das Objekt und alle darin enthaltenen Objekte.
Die Objekte können ganz oder teilweise die angezeigte Oberfläche sein.
Die Objekte können Komponenten sein, die Daten speziell für den Druck formatieren.
Mit der FlexPrintJob-Klasse können Sie die Ausgabe an die Seite anpassen.
Die FlexPrintJob-Klasse verwendet automatisch mehrere Seiten, um ein Objekt zu drucken, das nicht auf eine einzelne Seite passt.
Die FlexPrintJob-Klasse bewirkt, dass das Betriebssystem ein Dialogfeld Drucken anzeigt. Sie können nicht ohne Benutzeraktion drucken.
Bereiten Sie einen Druckauftrag vor und senden Sie ihn
Sie drucken die Ausgabe, indem Sie einen Druckauftrag vorbereiten und senden. Erstellen wir eine Instanz der FlexPrintJob-Klasse
var printJob:FlexPrintJob = new FlexPrintJob();Starten Sie den Druckauftrag
printJob.start();Flex bewirkt, dass das Betriebssystem ein Dialogfeld Drucken anzeigt. Fügen Sie dem Druckauftrag ein oder mehrere Objekte hinzu und geben Sie an, wie diese skaliert werden sollen
printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH);Jedes Objekt beginnt auf einer neuen Seite. Senden Sie den Druckauftrag an den Drucker
printJob.send();Druckbeispiel
| Schritt | Beschreibung |
|---|---|
| 1 | Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint.client, wie im Kapitel Flex - Anwendung erstellen erläutert . |
| 2 | Ändern Sie HelloWorld.mxml wie unten erläutert. Halten Sie den Rest der Dateien unverändert. |
| 3 | Kompilieren Sie die Anwendung und führen Sie sie aus, um sicherzustellen, dass die Geschäftslogik den Anforderungen entspricht. |
Es folgt der Inhalt der geänderten mxml-Datei 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>Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im normalen Modus kompilieren und ausführen, wie wir es im Kapitel Flex - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis: [ Online testen ]
Klicken Sie auf die Schaltfläche Drucken und Sie sehen den Ausdruck des unten gezeigten Datenrasters.
