我们将使用Flash Builder 4.5创建Flex应用程序.让我们从一个简单的 HelloWorld 应用程序开始.
第一步是使用Flash Builder IDE创建一个简单的Flex项目.使用选项文件>启动项目向导新> Flex项目.现在使用向导窗口将项目命名为 HelloWorld ,如下所示 :
选择应用程序类型 Web(在Adobe Flash Player中运行).但是,如果未选中此选项,则保留其他默认值,然后单击"完成"按钮.成功创建项目后,您将在Project Explorer中获得以下内容 :
以下是所有重要文件夹的简要描述 :
文件夹 | 位置 |
---|---|
table table-bordered | 源代码(mxml/as class)文件. 我们创建了com/it1352/客户端文件夹结构,其中包含负责客户端UI显示的客户端特定java类. |
bin-debug | 这是输出部分,它代表实际可部署的Web应用程序. 历史文件夹包含用于Flex应用程序历史记录管理的支持文件. fram ework_xxx.swf,flex框架文件应该由flex应用程序使用. HelloWorld.html,用于flex应用程序的包装器/主机HTML文件. HelloWorld .swf,我们基于flex的应用程序. playerProductInstall.swf,flash player express installer. spark_xxx.swf,用于支持spark组件的库. swfobject.js,负责在HelloWorld.html中加载HelloWorld.swf的JavaScript.它检查flash player版本并将初始化参数传递给HelloWorld.swf文件. textLayout_xxx.swf,用于文本组件支持的库. |
html-template | 这代表可配置Web应用程序. Flash Builder将文件从html-template编译为bin-debug文件夹. 历史文件夹包含Flex应用程序历史记录管理的支持文件. index. template.html,包装器/主机用于Flex应用程序的HTML文件,具有Flash Builder特定配置的占位符.在构建期间获取编译到bin-debug文件夹中的HelloWorld.html. playerProductInstall.swf,flash player express安装程序在构建期间被复制到bin-debug文件夹. swfobject.js,负责在HelloWorld.html中加载HelloWorld.swf的JavaScript.它检查flash player版本并将初始化参数传递给HelloWorld.swf文件在构建期间被复制到bindebug文件夹. |
在 html-template 中为Wrapper HTML页面创建一个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; }
修改包装HTML页面模板 htmltemplate 文件夹中的index.template.html . Flash Builder将创建一个默认的Wrapper HTML页面模板 html-template/index.template.html ,它将被编译为HelloWorld.html.
此文件包含Flash Builder在编译过程中替换的占位符.例如,flash播放器版本,应用程序名称等.
如果未安装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'" +" 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>
创建CSS文件 Style.css table tablebordered/com/it1352文件夹中的 HelloWorld.mxml . Flex为其UI控件提供了类似的CSS样式,因为HTML 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; }
Flash Builder将创建默认的mxml文件 table tablebordered/com.it1352/HelloWorld.mxml ,它有根标签< application>应用程序的容器.让我们修改此文件以显示"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/IT屋/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>
您可以在同一源目录中创建更多mxml或actionscript文件,以定义新应用程序或定义帮助程序例程.
Flash Builder默认选中自动构建.如果有任何错误,请检查问题查看.完成更改后,您将看不到任何错误.
现在点击运行应用程序菜单并选择 HelloWorld 应用程序来运行应用程序.
如果一切正常,你必须看到浏览器弹出,应用程序启动,并运行.如果您的应用程序一切正常,它将产生以下结果
因为您在Flash播放器中运行应用程序,所以需要为浏览器安装Flash Player插件.只需按照屏幕上的说明安装插件即可.如果您已经为浏览器设置了Flash Player插件,那么您应该能够看到以下输出 :
恭喜!您已使用 Flex 实施了第一个应用程序.