Flex - Anwendung erstellen

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, Express-Installationsprogramm für Flash Player.

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

Anwendungsmenü ausführen und wählen SieHelloWorld Anwendung, um die Anwendung auszuführen.

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.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved