Flex 創(chuàng)建應(yīng)用程序

2018-02-05 19:02 更新

我們將使用Flash Builder 4.5創(chuàng)建Flex應(yīng)用程序。 讓我們從一個(gè)簡(jiǎn)單的 HelloWorld 應(yīng)用程序開始:

步驟1 - 創(chuàng)建項(xiàng)目

第一步是使用Flash Builder IDE創(chuàng)建一個(gè)簡(jiǎn)單的Flex項(xiàng)目。 使用選項(xiàng)File > New > Flex Project。 現(xiàn)在，使用向?qū)Т翱趯⒛捻?xiàng)目命名為 HelloWorld ，如下所示:

Create Flex Project Wizard

如果未選擇，請(qǐng)選擇應(yīng)用程序類型 Web(在Adobe Flash Player中運(yùn)行)，并保留其他默認(rèn)值，然后單擊完成按鈕。 項(xiàng)目創(chuàng)建成功后，您的項(xiàng)目資源管理器中將包含以下內(nèi)容:

Flex Project Structure

以下是所有重要文件夾的簡(jiǎn)要說明:

夾位置
表格邊框

  • 源代碼(mxml / as classes)文件。

  • 我們已經(jīng)創(chuàng)建了com / tutorialspoint / client文件夾結(jié)構(gòu)，其中包含客戶端特定的，負(fù)責(zé)客戶端UI顯示的java類。

bin-debug

  • 這是輸出部分，它表示實(shí)際可部署的Web應(yīng)用程序。

  • history文件夾包含F(xiàn)lex應(yīng)用程序的歷史記錄管理的支持文件。

  • framework_xxx.swf，flex應(yīng)用程序使用的flex框架文件。

  • HelloWorld.html，用于flex應(yīng)用程序的wrapper / host HTML文件。

  • HelloWorld.swf，我們的基于flex的應(yīng)用程序。

  • playerProductInstall.swf，flash player express安裝程序。

  • spark_xxx.swf，用于spark組件支持的庫。

  • swfobject.js，javascript負(fù)責(zé)在HelloWorld.html中加載HelloWorld.swf。 它檢查Flash Player版本并將初始化參數(shù)傳遞給HelloWorld.swf文件。

  • textLayout_xxx.swf，用于文本組件支持的庫。

html-template

  • 這表示可配置的Web應(yīng)用程序。 Flash Builder將文件從html-template編譯到bin-debug文件夾。

  • history文件夾包含F(xiàn)lex應(yīng)用程序的歷史記錄管理的支持文件。

  • index.template.html，wrapper / host用于具有用于Flash Builder特定配置的占位符的flex應(yīng)用程序的HTML文件。 在編譯期間在bin-debug文件夾中編譯為HelloWorld.html。

  • playerProductInstall.swf，flash player express安裝程序。在構(gòu)建期間復(fù)制到bin-debug文件夾。

  • swfobject.js，javascript負(fù)責(zé)在HelloWorld.html中加載HelloWorld.swf。 它檢查flash播放器版本，并將初始化參數(shù)傳遞給HelloWorld.swf文件。在構(gòu)建期間復(fù)制到bin-debug文件夾。

步驟2 - 創(chuàng)建外部CSS文件

在 html-template 文件夾中為Wrapper HTML頁面創(chuàng)建CSS文件 styles.css 。

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;
}

步驟3 - 修改包裝HTML頁面模板

在 html-template 文件夾中修改封裝HTML頁面模板 index.template.html 。 Flash Builder將創(chuàng)建一個(gè)默認(rèn)的Wrapper HTML網(wǎng)頁模板 html-template / index.template.html ，它將被編譯為HelloWorld.html。 此文件包含F(xiàn)lash Builder在編譯過程中替換的占位符，例如Flash Player版本，應(yīng)用程序名稱等。

讓我們修改此文件以顯示自定義消息，如果沒有安裝flash插件。

<!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'"
         +" ><"
         +"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>          
</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'"
         +" ><"
         +"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>             
   </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'"
         +" ><"
         +"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>

步驟4 - 創(chuàng)建內(nèi)部CSS文件

在 table table-bordered / com / tutorialspoint 文件夾中為 HelloWorld.mxml 創(chuàng)建CSS文件 Style.css 。 Flex為其UI控件提供了類似的CSS樣式，因?yàn)橛蠬TML UI控件的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;
}

步驟5 - 修改入口級(jí)類

Flash Builder將創(chuàng)建一個(gè)默認(rèn)的mxml文件 table table-bordered / com.tutorialspoint / HelloWorld.mxml ，其具有根標(biāo)簽< application> 容器的應(yīng)用程序。 讓我們修改這個(gè)文件顯示“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>

您可以在同一源目錄中創(chuàng)建更多的mxml或actionscript文件，以定義新應(yīng)用程序或定義輔助程序。

步驟6 - 構(gòu)建應(yīng)用程序

Flash Builder默認(rèn)已選中自動(dòng)構(gòu)建。 只要檢查問題查看是否有任何錯(cuò)誤。 完成更改后，您將看不到任何錯(cuò)誤。

步驟7 - 運(yùn)行應(yīng)用程序

現(xiàn)在點(diǎn)擊 Run application 運(yùn)行應(yīng)用程序菜單并選擇 HelloWorld 應(yīng)用程序來運(yùn)行應(yīng)用程序。

Flex Run Button

如果一切正常，您必須看到瀏覽器彈出和應(yīng)用程序啟動(dòng)并運(yùn)行。 如果一切順利，您的應(yīng)用程序，這將產(chǎn)生以下結(jié)果:[在線試用]

因?yàn)槟闶窃趂lash播放器中運(yùn)行你的應(yīng)用程序，所以你需要為你的瀏覽器安裝Flash Player插件。 只需按照屏幕上的說明安裝插件。 如果您已經(jīng)為瀏覽器設(shè)置了Flash Player插件，那么您應(yīng)該可以看到以下輸出:

Flex Application Result

恭喜！ 您已使用Flex實(shí)施了第一個(gè)應(yīng)用程序。

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)