设置或者清除Flex应用程序中的背景图片

By Minidxer | March 15, 2008

接下来的例子展示了Flex应用中如何通过设置backgroundImage风格,来设置或者移除背景图片。

下面是具体的源代码:


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.         applicationComplete="init();">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.events.ItemClickEvent;
  11.  
  12.             [Bindable]
  13.             private var defaultBackgroundImage:Class;
  14.  
  15.             private function init():void {
  16.                 defaultBackgroundImage = Application.application.getStyle("backgroundImage");
  17.             }
  18.  
  19.             private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
  20.                 Application.application.setStyle("backgroundImage", evt.item.data);
  21.             }
  22.         ]]>
  23.     </mx:Script>
  24.  
  25.     <mx:Array id="arr">
  26.         <mx:Object label="default" data="{defaultBackgroundImage}" />
  27.         <mx:Object label="null" data="{null}" />
  28.     </mx:Array>
  29.  
  30.     <mx:ApplicationControlBar dock="true">
  31.         <mx:Form styleName="plain">
  32.             <mx:FormItem label="backgroundImage:">
  33.                 <mx:ToggleButtonBar id="toggleButtonBar"
  34.                         dataProvider="{arr}"
  35.                         itemClick="toggleButtonBar_itemClick(event);" />
  36.             </mx:FormItem>
  37.         </mx:Form>
  38.     </mx:ApplicationControlBar>
  39.  
  40. </mx:Application>
你还在扩展.CSS文件或者<mx:Style />中设置backgroundImage风格。下面是参考代码:
  1. <mx:Style>
  2.     Application {
  3.         backgroundImage: ClassReference(null);
  4.     }
  5. </mx:Style>

或者你可以在MXML中设置backgroundImage风格,下面是参考代码:

  1. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  2.         backgroundImage="{null}">
原文作者:Peter deHaan 翻译:minidxer

Topics: Flex | No Comments » | 1,082 views Tags: , , ,

Search Posts