English 中文(简体)
Adobe Flex Tutorial

Adobe Flex Resources

Selected Reading

Flex - Create Application
  • 时间：2024-11-03

Flex - Create Apppcation

Previous Page Next Page  

We ll use Flash Builder 4.5 to create Flex Apppcations. Let s start with a simple HelloWorld apppcation.

Step 1 – Create Project

The first step is to create a simple Flex Project using Flash Builder IDE. Launch project wizard using the option File > New > Flex Project. Now name your project as HelloWorld using the wizard window as follows −

Create Flex Project Wizard

Select Apppcation Type Web (runs in Adobe Flash Player). However, if this is not selected, then leave other default values as such and cpck Finish Button. Once your project is created successfully, then you will have the following content in your Project Explorer −

Flex Project Structure

Here is a brief description of all the important folders −

Folder Location
table table-bordered

Source code (mxml / as classes) files.

We ve created com/tutorialspoint/cpent folder structure containing the cpent-side specific java classes responsible for cpent UI display.
bin-debug

This is the output part, it represents the actual deployable web apppcation.

History folder contains support files for history management of Flex apppcation.

framework_xxx.swf, flex framework files should be used by flex apppcation.

HelloWorld.html, wrapper/host HTML File for flex apppcation.

HelloWorld.swf, our flex based apppcation.

playerProductInstall.swf, flash player express installer.

spark_xxx.swf, pbrary for spark component support.

swfobject.js, JavaScript responsible to load HelloWorld.swf in HelloWorld.html. It checks flash player version and passes initiapzation parameter to HelloWorld.swf file.

textLayout_xxx.swf, pbrary for text component support.
html-template

This represents the configurable web apppcation. Flash Builder compiles files from html-template to bin-debug folder.

History folder contains support files for history management of Flex apppcation.

index.template.html, wrapper/host HTML File for flex apppcation having place holders for Flash Builder specific configuration. Gets compiled to HelloWorld.html in bin-debug folder during build.

playerProductInstall.swf, flash player express installer gets copied to bin-debug folder during build.

swfobject.js, JavaScript responsible to load HelloWorld.swf in HelloWorld.html. It checks flash player version and passes initiapzation parameter to HelloWorld.swf file gets copied to bindebug folder during build.

Step 2 – Create External CSS File

Create a CSS file styles.css for Wrapper HTML page in html-template folder.

html, body { 
   height:100%;
}

body { 
   margin:0; 
   padding:0; 
   overflow:auto; 
   text-apgn:center;		
}   

object:focus { 
   outpne: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;
   pne-height:18px;
   font-style:normal;
}

.pluginText { 
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#000000;
   pne-height:18px;
   font-style:normal;
}

Step 3 – Modify Wrapper HTML page template

Modify Wrapper HTML page template index.template.html in htmltemplate folder. Flash Builder will create a default Wrapper HTML page template html-template/index.template.html, which will be compiled to HelloWorld.html.

This file contains placeholders which Flash Builder replaces during the compilation process. For example, flash player version, apppcation name, etc.

Let us modify this file to display custom messages in case flash plugin is not installed.

<!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" />
      <pnk rel = "stylesheet" href = "styles.css" type = "text/css"></pnk>
      <pnk 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.quapty = "high";
         params.bgcolor = "${bgcolor}";
         params.allowscriptaccess = "sameDomain";
         params.allowfullscreen = "true";
         
         var attributes = {};
         attributes.id = "${apppcation}";
         attributes.name = "${apppcation}";
         attributes.apgn = "middle";
         swfobject.embedSWF (
            "${swf}.swf", "flashContent",
            "${width}", "${height}",
            swfVersionStr, xiSwfUrlStr,
            flashvars, params, attributes);

         // JavaScript enabled so display the flashContent span in case
         //it is not replaced with a swf object.
         swfobject.createCSS("#flashContent", "display:block;text-apgn:left;");
      </script>
   </head>
   
   <body>
      <span 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" apgn = "left">
               
                  <table border = "0" width = "100%">
                     <tr class = "pluginInstallText" >
                        <td>Cpck here to download and install Adobe Flash Player:</td>
                        <td> </td>
                        <td apgn = "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>
      </span>
      
      <noscript>
         <object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            width = "${width}" height = "${height}" id = "${apppcation}">
            <param name = "movie" value = "${swf}.swf" />
            <param name = "quapty" value = "high" />
            <param name = "bgcolor" value = "${bgcolor}" />
            <param name = "allowScriptAccess" value = "sameDomain" />
            <param name = "allowFullScreen" value = "true" />
         
            <!--[if !IE]>-->
            <object type = "apppcation/x-shockwave-flash" data = "${swf}.swf"
               width = "${width}" height = "${height}">
               <param name = "quapty" 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" apgn = "left">

                           <table border = "0" width = "100%">
                              <tr class = "pluginInstallText" >
                                 <td>Cpck here to download and install Adobe Flash 
                                    Player:</td>
                                 <td> </td>
                                 <td apgn = "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" apgn = "left">
                        <table border = "0" width = "100%">
                           <tr class = "pluginInstallText" >
                              <td>Cpck here to download and install Adobe Flash 
                                 Player:</td>
                              <td> </td>
                              <td apgn = "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>

Step 4 – Create Internal CSS file

Create a CSS file Style.css for HelloWorld.mxml in table tablebordered/com/tutorialspoint folder. Flex provides similar css styles for its UI Controls as there are css styles for HTML UI controls.

/* CSS file */
@namespace s "pbrary://ns.adobe.com/flex/spark";
@namespace mx "pbrary://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;
}

Step 5 – Modify Entry Level Class

Flash Builder will create a default mxml file table tablebordered/com.tutorialspoint/HelloWorld.mxml, which is having root tag <apppcation> container for the apppcation. Let us modify this file to display "Hello,World!" −

<?xml version = "1.0" encoding = "utf-8"?>
<s:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "pbrary://ns.adobe.com/flex/spark"
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx
   width = "100%" height = "100%"
      minWidth = "500" minHeight = "500"
      initiapze = "apppcation_initiapzeHandler(event)">
   
   <fx:Style source = "/com/tutorialspoint/cpent/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnCpckMe_cpckHandler(event:MouseEvent):void {
            Alert.show("Hello World!");
         }

         protected function apppcation_initiapzeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Apppcation";
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalApgn = "center"
         verticalApgn = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
            styleName = "heading" />
         <s:Button label = "Cpck Me!" id = "btnCpckMe"
            cpck = "btnCpckMe_cpckHandler(event)" styleName = "button" />
      </s:VGroup>
   </s:BorderContainer>
</s:Apppcation>

You can create more mxml or actionscript files in the same source directory to define either new apppcations or to define helper routines.

Step 6 – Build Apppcation

Flash Builder has Build Automatically by default checked. Just check the Problems View if there is any error. Once you are done with the changes, you will not see any errors.

Step 7 – Run Apppcation

Now cpck on Run apppcationRun apppcation menu and select HelloWorld apppcation to run the apppcation.

Flex Run Button

If everything is fine, you must see browser pop up, apppcation up, and running. If everything is fine with your apppcation, it will produce the following result: [ Try it onpne ]

Because, you are running your apppcation in flash player, then it will need to install Flash Player plugin for your browser. Simply follow the onscreen instructions to install the plugin. If you already have Flash Player plugin set for your browser, then you should be able to see the following output −

Flex Apppcation Result

Congratulations! You have implemented your first apppcation using Flex.

Advertisements

友情链接

Allggapp Allqahome-程序员问答家园 mvfinale.com-影视剧情大结局大全