Jul 21

Flex中如何给Alert控件定义样式的例子

FlexAdd comments

接下来的例子演示了包括使Alert控件文本不可选中(Flex中如何通过selectable属性创建一个文本不可选中Alert的例子中有介绍)，Alert标题是用嵌入字体，消息，按钮使用阴影效果，移除按钮边角和Skin等。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white"
  6.         creationComplete="showAlert()"
  7.         applicationComplete="init()">
  8.  
  9.     <!-- Used by the ApplicationControlBar control. -->
  10.     <mx:String id="fileName" />
  11.     <mx:String id="fileSize" />
  12.  
  13.     <!-- Used by the Alert control. -->
  14.     <mx:String id="message">The quick brown fox jumped over the lazy dog.
  15.  
  16. The quick brown fox jumped over the lazy dog.</mx:String>
  17.     <mx:String id="title">The quick brown fox jumped over the lazy dog?</mx:String>
  18.  
  19.     <mx:Script>
  20.         <![CDATA[
  21.             import mx.controls.Alert;
  22.  
  23.             private var a:Alert;
  24.  
  25.             private function init():void {
  26.                 var appInfo:LoaderInfo = Application.application.loaderInfo;
  27.                 /* Just grab the filename from the SWF URL. */
  28.                 fileName = (appInfo.url).split("/").pop();
  29.                 /* Convert bytes to kilobytes. */
  30.                 fileSize = (appInfo.bytesTotal / 1024).toFixed(2);
  31.             }
  32.  
  33.             private function showAlert():void {
  34.                 Alert.yesLabel = "Accept";
  35.                 Alert.noLabel = "Reject";
  36.                 Alert.buttonWidth = 120;
  37.  
  38.                 a = Alert.show(
  39.                         message,
  40.                         title,
  41.                         Alert.NO | Alert.YES
  42.                     );
  43.                 /* Make the Alert form's text non-selectable. */
  44.                 a.mx_internal::alertForm.mx_internal::textField.selectable = false;
  45.             }
  46.         ]]>
  47.     </mx:Script>
  48.  
  49.     <mx:Style>
  50.         @font-face{
  51.             src: url("./fonts/base02.ttf");
  52.             fontFamily: "Base02";
  53.         }
  54.  
  55.         Alert {
  56.             titleStyleName: "alertTitle";
  57.             messageStyleName: "alertMessage";
  58.             buttonStyleName: "alertButton";
  59.             dropShadowEnabled: true;
  60.             shadowDistance: 5;
  61.             shadowDirection: right;
  62.             cornerRadius: 0;
  63.             embedFonts: true;
  64.             fontFamily: Base02;
  65.         }
  66.  
  67.         .alertTitle {
  68.             letterSpacing: 0;
  69.             fontSize: 14;
  70.             color: red;
  71.         }
  72.  
  73.         .alertMessage {
  74.             letterSpacing: 0;
  75.             fontSize: 10;
  76.             fontWeight: normal;
  77.             color: black;
  78.         }
  79.  
  80.         .alertButton {
  81.             letterSpacing: 0;
  82.             fontSize: 11;
  83.             cornerRadius: 10;
  84.             fontWeight: normal;
  85.             textRollOverColor: white;
  86.             color: red;
  87.             skin: ClassReference(null);
  88.         }
  89.     </mx:Style>
  90.  
  91.     <!-- Display SWF name and file size. -->
  92.     <mx:ApplicationControlBar id="applicationControlBar" dock="true">
  93.         <mx:Label id="info" text="{fileName} ({fileSize}kb)" />
  94.     </mx:ApplicationControlBar>
  95.  
  96.     <!-- Click to launch Alert control. -->
  97.     <mx:Button label="Launch Alert" click="showAlert()" />
  98.  
  99. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , , ,

Related Post

Leave a Reply