Flex - utwórz aplikację
Do tworzenia aplikacji Flex użyjemy Flash Builder 4.5. Zacznijmy od prostegoHelloWorld podanie.
Krok 1 - Utwórz projekt
Pierwszym krokiem jest utworzenie prostego projektu Flex przy użyciu Flash Builder IDE. Uruchom kreatora projektu za pomocą opcjiFile > New > Flex Project. Teraz nazwij swój projekt HelloWorld za pomocą okna kreatora w następujący sposób -
Wybierz typ aplikacji Web (runs in Adobe Flash Player). Jeśli jednak ta opcja nie jest zaznaczona, pozostaw inne wartości domyślne jako takie i kliknij przycisk Zakończ. Po pomyślnym utworzeniu projektu w Eksploratorze projektów będziesz mieć następującą zawartość -
Oto krótki opis wszystkich ważnych folderów -
| Teczka | Lokalizacja |
|---|---|
| stół obramowany | Pliki kodu źródłowego (klasy mxml / as). Stworzyliśmy strukturę folderów com / tutorialspoint / client zawierającą specyficzne dla klienta klasy Java odpowiedzialne za wyświetlanie interfejsu użytkownika. |
| bin-debug | To jest część wyjściowa, reprezentuje rzeczywistą możliwą do wdrożenia aplikację internetową. Folder Historia zawiera pliki pomocnicze do zarządzania historią aplikacji Flex. framework_xxx.swf, pliki frameworka flex powinny być używane przez aplikację flex. HelloWorld.html, opakowujący / hostujący plik HTML dla aplikacji flex. HelloWorld.swf, nasza aplikacja oparta na flexie. playerProductInstall.swf, ekspresowy instalator Flash Playera. spark_xxx.swf, biblioteka do obsługi komponentów Spark. swfobject.js, JavaScript odpowiedzialny za załadowanie HelloWorld.swf w HelloWorld.html. Sprawdza wersję Flash Playera i przekazuje parametr inicjalizacji do pliku HelloWorld.swf. textLayout_xxx.swf, biblioteka do obsługi komponentów tekstowych. |
| html-template | To reprezentuje konfigurowalną aplikację internetową. Flash Builder kompiluje pliki z html-template do folderu bin-debug. Folder Historia zawiera pliki pomocnicze do zarządzania historią aplikacji Flex. index.template.html, opakowujący / hostowy plik HTML dla aplikacji fleksa z uchwytami miejsca na konfigurację specyficzną dla Flash Builder. Pobiera kompilację do HelloWorld.html w folderze bin-debug podczas kompilacji. playerProductInstall.swf, ekspresowy instalator programu Flash Player jest kopiowany do folderu bin-debug podczas kompilacji. swfobject.js, JavaScript odpowiedzialny za załadowanie HelloWorld.swf w HelloWorld.html. Sprawdza wersję Flash Playera i przekazuje parametr inicjalizacji do pliku HelloWorld.swf, który jest kopiowany do folderu bindebug podczas kompilacji. |
Krok 2 - Utwórz zewnętrzny plik CSS
Utwórz plik CSS styles.css dla Wrapper strony HTML w formacie html-template teczka.
html, body {
height:100%;
}
body {
margin:0;
padding:0;
overflow:auto;
text-align:center;
}
object:focus {
outline:none;
}
#flashContent {
display:none;
}
.pluginHeader {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#9b1204;
text-decoration:none;
font-weight:bold;
}
.pluginInstallText {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
line-height:18px;
font-style:normal;
}
.pluginText {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
line-height:18px;
font-style:normal;
}Krok 3 - Zmodyfikuj szablon strony HTML Wrapper
Zmodyfikuj szablon strony HTML opakowania index.template.html w htmltemplateteczka. Flash Builder utworzy domyślny szablon Wrapper HTML html-template / index.template.html , który zostanie skompilowany do HelloWorld.html.
Ten plik zawiera elementy zastępcze, które Flash Builder zastępuje podczas procesu kompilacji. Na przykład wersja Flash Playera, nazwa aplikacji itp.
Zmodyfikujmy ten plik, aby wyświetlać niestandardowe komunikaty w przypadku, gdy wtyczka Flash nie jest zainstalowana.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml:lang = "en">
<head>
<title>${title}</title>
<meta name = "google" value = "notranslate" />
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<link rel = "stylesheet" href = "styles.css" type = "text/css"></link>
<link rel = "stylesheet" type = "text/css" href = "history/history.css" />
<script type = "text/javascript" table table-bordered = "history/history.js">
</script>
<script type = "text/javascript" table table-bordered = "swfobject.js"></script>
<script type = "text/javascript">
// For version detection, set to min. required Flash Player version,
//or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";
// To use express install, set to playerProductInstall.swf,
//otherwise the empty string.
var xiSwfUrlStr = "${expressInstallSwf}";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "${bgcolor}";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "${application}";
attributes.name = "${application}";
attributes.align = "middle";
swfobject.embedSWF (
"${swf}.swf", "flashContent",
"${width}", "${height}",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case
//it is not replaced with a swf object.
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>
</head>
<body>
<div id = "flashContent">
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
<tr>
<td class = "pluginHeader">Flash Player Required</td>
</tr>
<tr>
<td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td>
</tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</tr>
</table>
</p>
</div>
<noscript>
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width = "${width}" height = "${height}" id = "${application}">
<param name = "movie" value = "${swf}.swf" />
<param name = "quality" value = "high" />
<param name = "bgcolor" value = "${bgcolor}" />
<param name = "allowScriptAccess" value = "sameDomain" />
<param name = "allowFullScreen" value = "true" />
<!--[if !IE]>-->
<object type = "application/x-shockwave-flash" data = "${swf}.swf"
width = "${width}" height = "${height}">
<param name = "quality" value = "high" />
<param name = "bgcolor" value = "${bgcolor}" />
<param name = "allowScriptAccess" value = "sameDomain" />
<param name = "allowFullScreen" value = "true" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2"
border = "0">
<tr>
<td class = "pluginHeader">Flash Player Required</td>
</tr>
<tr>
<td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td>
</tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash
Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</tr>
</table>
</p>
</p>
<!--<![endif]-->
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
<tr><td class = "pluginHeader">Flash Player Required</td></tr>
<tr><td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td></tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash
Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</td>
</tr>
</table>
</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
</body>
</html>Krok 4 - Utwórz wewnętrzny plik CSS
Utwórz plik CSS Style.css dla HelloWorld.mxml w table tablebordered/com/tutorialspointteczka. Flex zapewnia podobne style css dla kontrolek interfejsu użytkownika, podobnie jak style css dla kontrolek interfejsu użytkownika HTML.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.heading {
fontFamily: Arial, Helvetica, sans-serif;
fontSize: 17px;
color: #9b1204;
textDecoration:none;
fontWeight:normal;
}
.button {
fontWeight: bold;
}
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}Krok 5 - Zmodyfikuj klasę poziomu wejścia
Program Flash Builder utworzy domyślną tabelę plików mxml tablebordered / com.tutorialspoint / HelloWorld.mxml , która ma kontener główny znacznika <application> dla aplikacji. Zmodyfikujmy ten plik tak, aby wyświetlał „Hello, World!” -
<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx
width = "100%" height = "100%"
minWidth = "500" minHeight = "500"
initialize = "application_initializeHandler(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
protected function btnClickMe_clickHandler(event:MouseEvent):void {
Alert.show("Hello World!");
}
protected function application_initializeHandler(event:FlexEvent):void {
lblHeader.text = "My Hello World Application";
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Możesz utworzyć więcej plików mxml lub Actionscript w tym samym katalogu źródłowym, aby zdefiniować nowe aplikacje lub procedury pomocnicze.
Krok 6 - Zbuduj aplikację
Flash Builder ma Build Automaticallydomyślnie zaznaczone. Po prostu sprawdźProblemsZobacz, czy jest jakiś błąd. Po wprowadzeniu zmian nie zobaczysz żadnych błędów.
Krok 7 - Uruchom aplikację
Teraz kliknij
Jeśli wszystko jest w porządku, musisz zobaczyć wyskakujące okienko przeglądarki, uruchomioną i uruchomioną aplikację. Jeśli wszystko jest w porządku z Twoją aplikacją, otrzymasz następujący wynik: [ Wypróbuj online ]
Ponieważ uruchamiasz swoją aplikację we Flash Playerze, musisz zainstalować wtyczkę Flash Player dla Twojej przeglądarki. Po prostu postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby zainstalować wtyczkę. Jeśli masz już ustawioną wtyczkę Flash Player dla swojej przeglądarki, powinieneś być w stanie zobaczyć następujące dane wyjściowe -
Gratulacje! Zaimplementowałeś swoją pierwszą aplikację przy użyciuFlex.