课程表

Flex课程

工具箱
速查手册

Flex 创建应用程序

当前位置：免费教程 » 软件/图像 » Flex

我们将使用Flash Builder 4.5创建Flex应用程序。 让我们从一个简单的 HelloWorld 应用程序开始:

步骤1 - 创建项目

第一步是使用Flash Builder IDE创建一个简单的Flex项目。 使用选项File > New > Flex Project。 现在，使用向导窗口将您的项目命名为 HelloWorld ，如下所示:

Create Flex Project Wizard

如果未选择，请选择应用程序类型 Web(在Adobe Flash Player中运行)，并保留其他默认值，然后单击完成按钮。 项目创建成功后，您的项目资源管理器中将包含以下内容:

Flex Project Structure

以下是所有重要文件夹的简要说明:

夹位置
表格边框

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

  • 我们已经创建了com / tutorialspoint / client文件夹结构，其中包含客户端特定的，负责客户端UI显示的java类。

bin-debug

  • 这是输出部分，它表示实际可部署的Web应用程序。

  • history文件夹包含Flex应用程序的历史记录管理的支持文件。

  • framework_xxx.swf，flex应用程序使用的flex框架文件。

  • HelloWorld.html，用于flex应用程序的wrapper / host HTML文件。

  • HelloWorld.swf，我们的基于flex的应用程序。

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

  • spark_xxx.swf，用于spark组件支持的库。

  • swfobject.js，javascript负责在HelloWorld.html中加载HelloWorld.swf。 它检查Flash Player版本并将初始化参数传递给HelloWorld.swf文件。

  • textLayout_xxx.swf，用于文本组件支持的库。

html-template

  • 这表示可配置的Web应用程序。 Flash Builder将文件从html-template编译到bin-debug文件夹。

  • history文件夹包含Flex应用程序的历史记录管理的支持文件。

  • index.template.html，wrapper / host用于具有用于Flash Builder特定配置的占位符的flex应用程序的HTML文件。 在编译期间在bin-debug文件夹中编译为HelloWorld.html。

  • playerProductInstall.swf，flash player express安装程序。在构建期间复制到bin-debug文件夹。

  • swfobject.js，javascript负责在HelloWorld.html中加载HelloWorld.swf。 它检查flash播放器版本，并将初始化参数传递给HelloWorld.swf文件。在构建期间复制到bin-debug文件夹。

步骤2 - 创建外部CSS文件

在 html-template 文件夹中为Wrapper HTML页面创建CSS文件 styles.css 。

  1. html, body  { 
  2.    height:100%;
  3. }
  4. body { 
  5.    margin:0; 
  6.    padding:0; 
  7.    overflow:auto; 
  8.    text-align:center;      
  9. }   
  10. object:focus { 
  11.    outline:none; 
  12. }
  13. #flashContent { 
  14.    display:none;  
  15. }
  16.  
  17. .pluginHeader {
  18.    font-family:Arial, Helvetica, sans-serif;
  19.    font-size:14px;
  20.    color:#9b1204;
  21.    text-decoration:none;
  22.    font-weight:bold;
  23. }
  24.  
  25. .pluginInstallText {
  26.    font-family:Arial, Helvetica, sans-serif;
  27.    font-size:12px;
  28.    color:#000000;
  29.    line-height:18px;
  30.    font-style:normal;
  31. }
  32.  
  33. .pluginText { 
  34.    font-family:Arial, Helvetica, sans-serif;
  35.    font-size:12px;
  36.    color:#000000;
  37.    line-height:18px;
  38.    font-style:normal;
  39. }

步骤3 - 修改包装HTML页面模板

在 html-template 文件夹中修改封装HTML页面模板 index.template.html 。 Flash Builder将创建一个默认的Wrapper HTML网页模板 html-template / index.template.html ，它将被编译为HelloWorld.html。 此文件包含Flash Builder在编译过程中替换的占位符，例如Flash Player版本，应用程序名称等。

让我们修改此文件以显示自定义消息，如果没有安装flash插件。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
  4. <head>
  5. <title>${title}</title>
  6. <meta name="google" value="notranslate" />         
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <link rel="stylesheet" href="styles.css" type="text/css"></link>       
  9. <link rel="stylesheet" type="text/css" href="history/history.css" />
  10. <script type="text/javascript" table table-bordered="history/history.js"></script>
  11. <script type="text/javascript" table table-bordered="swfobject.js"></script>
  12. <script type="text/javascript">
  13.    // For version detection, set to min. required Flash Player version,
  14.    //or 0 (or 0.0.0), for no version detection. 
  15.    var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";
  16.    // To use express install, set to playerProductInstall.swf, 
  17.    //otherwise the empty string. 
  18.    var xiSwfUrlStr = "${expressInstallSwf}";
  19.    var flashvars = {};
  20.    var params = {};
  21.    params.quality = "high";
  22.    params.bgcolor = "${bgcolor}";
  23.    params.allowscriptaccess = "sameDomain";
  24.    params.allowfullscreen = "true";
  25.    var attributes = {};
  26.    attributes.id = "${application}";
  27.    attributes.name = "${application}";
  28.    attributes.align = "middle";
  29.    swfobject.embedSWF(
  30.    "${swf}.swf", "flashContent", 
  31.    "${width}", "${height}", 
  32.    swfVersionStr, xiSwfUrlStr, 
  33.    flashvars, params, attributes);
  34.    // JavaScript enabled so display the flashContent div in case 
  35.    //it is not replaced with a swf object.
  36.    swfobject.createCSS("#flashContent", "display:block;text-align:left;");
  37. </script>
  38. </head>
  39. <body>        
  40. <div id="flashContent">
  41.    <p style="margin:100px;">
  42.    <table  width="700" cellpadding="10" cellspacing="2" border="0">
  43.       <tr><td class="pluginHeader">Flash Player Required</td></tr>        
  44.       <tr><td class="pluginText">The Adobe Flash Player version 
  45.       10.2.0 or greater is required.</td></tr>        
  46.       <tr><td class = "pluginInstallText" align="left">
  47.          <table border="0" width="100%">
  48.          <tr class = "pluginInstallText" >                          
  49.          <td>Click here to download and install Adobe Flash Player:</td>                                       
  50.          <td> </td>
  51.          <td align="right">  <script type="text/javascript"> 
  52.          var pageHost 
  53.          =((document.location.protocol == "https:") ? "https://" : "http://"); 
  54.          document.write("<a target='_blank'"
  55.          +" href='http://get.adobe.com/flashplayer/'><"
  56.          +"img style='border-style: none' table table-bordered='" 
  57.          +pageHost 
  58.          +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
  59.          +" alt='Get Adobe Flash player' /></a>" ); 
  60.          </script> 
  61.          </td>
  62.          </tr>
  63.          </table>
  64.          </td> 
  65.       </tr>
  66.    </table>                
  67.    </p>          
  68. </div>
  69. <noscript>
  70.    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
  71.    width="${width}" height="${height}" id="${application}">
  72.    <param name="movie" value="${swf}.swf" />
  73.    <param name="quality" value="high" />
  74.    <param name="bgcolor" value="${bgcolor}" />
  75.    <param name="allowScriptAccess" value="sameDomain" />
  76.    <param name="allowFullScreen" value="true" />
  77.    <!--[if !IE]>-->
  78.    <object type="application/x-shockwave-flash" data="${swf}.swf" 
  79.    width="${width}" height="${height}">
  80.    <param name="quality" value="high" />
  81.    <param name="bgcolor" value="${bgcolor}" />
  82.    <param name="allowScriptAccess" value="sameDomain" />
  83.    <param name="allowFullScreen" value="true" />
  84.    <!--<![endif]-->
  85.    <!--[if gte IE 6]>-->
  86.    <p> 
  87.       <p style="margin:100px;">
  88.       <table  width="700" cellpadding="10" cellspacing="2" border="0">
  89.       <tr><td class="pluginHeader">Flash Player Required</td></tr>        
  90.       <tr><td class="pluginText">The Adobe Flash Player version 
  91.       10.2.0 or greater is required.</td></tr>        
  92.       <tr><td class = "pluginInstallText" align="left">
  93.          <table border="0" width="100%">
  94.          <tr class = "pluginInstallText" >                          
  95.          <td>Click here to download and install Adobe Flash Player:</td>                                       
  96.          <td> </td>
  97.          <td align="right">  <script type="text/javascript"> 
  98.          var pageHost 
  99.          = ((document.location.protocol == "https:") ? "https://" : "http://"); 
  100.          document.write("<a target='_blank'"
  101.          +" href='http://get.adobe.com/flashplayer/'><"
  102.          +"img style='border-style: none' table table-bordered='" 
  103.          +pageHost 
  104.          +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
  105.          +" alt='Get Adobe Flash player' /></a>" ); 
  106.          </script> 
  107.          </td>
  108.          </tr>
  109.          </table>
  110.          </td> 
  111.       </tr>
  112.    </table>                
  113.    </p>             
  114.    </p>
  115.    <!--<![endif]-->
  116.      <p style="margin:100px;">
  117.       <table  width="700" cellpadding="10" cellspacing="2" border="0">
  118.       <tr><td class="pluginHeader">Flash Player Required</td></tr>        
  119.       <tr><td class="pluginText">The Adobe Flash Player version 
  120.       10.2.0 or greater is required.</td></tr>        
  121.       <tr><td class = "pluginInstallText" align="left">
  122.          <table border="0" width="100%">
  123.          <tr class = "pluginInstallText" >                          
  124.          <td>Click here to download and install Adobe Flash Player:</td>                                       
  125.          <td> </td>
  126.          <td align="right">  <script type="text/javascript"> 
  127.          var pageHost 
  128.          = ((document.location.protocol == "https:") ? "https://" : "http://"); 
  129.          document.write("<a target='_blank'"
  130.          +" href='http://get.adobe.com/flashplayer/'><"
  131.          +"img style='border-style: none' table table-bordered='" 
  132.          +pageHost 
  133.          +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
  134.          +" alt='Get Adobe Flash player' /></a>" ); 
  135.          </script> 
  136.          </td>
  137.          </tr>
  138.          </table>
  139.          </td> 
  140.       </tr>
  141.    </table>                
  142.    </p>          
  143.    <!--[if !IE]>-->
  144.    </object>
  145.    <!--<![endif]-->
  146.    </object>
  147. </noscript>     
  148. </body>
  149. </html>

步骤4 - 创建内部CSS文件

在 table table-bordered / com / tutorialspoint 文件夹中为 HelloWorld.mxml 创建CSS文件 Style.css 。 Flex为其UI控件提供了类似的CSS样式，因为有HTML UI控件的CSS样式。

  1. /* CSS file */
  2. @namespace s "library://ns.adobe.com/flex/spark";
  3. @namespace mx "library://ns.adobe.com/flex/mx";
  4.  
  5. .heading
  6. {
  7.    fontFamily: Arial, Helvetica, sans-serif;
  8.    fontSize: 17px;
  9.    color: #9b1204;
  10.    textDecoration:none;
  11.    fontWeight:normal;
  12. }
  13.  
  14. .button {
  15.    fontWeight: bold;       
  16. }
  17.  
  18. .container {
  19.    cornerRadius :10;
  20.    horizontalCenter :0; 
  21.    borderColor: #777777;
  22.    verticalCenter:0;
  23.    backgroundColor: #efefef;
  24. }

步骤5 - 修改入口级类

Flash Builder将创建一个默认的mxml文件 table table-bordered / com.tutorialspoint / HelloWorld.mxml ，其具有根标签< application> 容器的应用程序。 让我们修改这个文件显示“Hello，World！":

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  3.    xmlns:s="library://ns.adobe.com/flex/spark" 
  4.    xmlns:mx="library://ns.adobe.com/flex/mx"
  5.    width="100%" height="100%"
  6.    minWidth="500" minHeight="500" 
  7.    initialize="application_initializeHandler(event)">
  8.    <fx:Style source="/com/tutorialspoint/client/Style.css"/>
  9.    <fx:Script>
  10.       <![CDATA[
  11.        import mx.controls.Alert;
  12.        import mx.events.FlexEvent;
  13.        protected function btnClickMe_clickHandler(event:MouseEvent):void
  14.        {
  15.           Alert.show("Hello World!");          
  16.        }
  17.  
  18.        protected function application_initializeHandler(event:FlexEvent):void
  19.        {
  20.           lblHeader.text = "My Hello World Application";            
  21.        }
  22.       ]]>
  23.    </fx:Script>
  24.    <s:BorderContainer width="500" height="500" id="mainContainer" 
  25.       styleName="container">
  26.       <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center" 
  27.          verticalAlign="middle">
  28.          <s:Label id="lblHeader" fontSize="40" color="0x777777" 
  29.             styleName="heading"/>
  30.          <s:Button label="Click Me!" id="btnClickMe" 
  31.             click="btnClickMe_clickHandler(event)" styleName="button" />
  32.       </s:VGroup> 
  33.    </s:BorderContainer> 
  34. </s:Application>

您可以在同一源目录中创建更多的mxml或actionscript文件，以定义新应用程序或定义辅助程序。

步骤6 - 构建应用程序

Flash Builder默认已选中自动构建。 只要检查问题查看是否有任何错误。 完成更改后，您将看不到任何错误。

步骤7 - 运行应用程序

现在点击<img class="“inline" src"="" attachments="" tuploads="" flex="" run_icon.jpg="">运行应用程序菜单并选择 HelloWorld 应用程序来运行应用程序。

Flex Run Button

如果一切正常，您必须看到浏览器弹出和应用程序启动并运行。 如果一切顺利，您的应用程序，这将产生以下结果:[在线试用]

因为你是在flash播放器中运行你的应用程序，所以你需要为你的浏览器安装Flash Player插件。 只需按照屏幕上的说明安装插件。 如果您已经为浏览器设置了Flash Player插件，那么您应该可以看到以下输出:

Flex Application Result

恭喜！ 您已使用Flex实施了第一个应用程序。

转载本站内容时，请务必注明来自W3xue，违者必究。
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
皖ICP备17017327号-2　皖公网安备34020702000426号