Flex 4中如何设置Halo DataGrid背景图片的例子

By Minidxer | November 4, 2009

接下来的例子演示了Flex 4中如何通过borderSkin和alternatingItemColors样式，设置Halo DataGrid背景图片。

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


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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Halo_DataGrid_borderSkin_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns:mx="library://ns.adobe.com/flex/halo">
  6.  
  7.     <mx:DataGrid id="dataGrid"
  8.             dataProvider="{Font.enumerateFonts(true)}"
  9.             borderSkin="skins.CustomBorderSkin"
  10.             alternatingItemColors="[]"
  11.             horizontalCenter="0" verticalCenter="0" />
  12.  
  13. </s:Application>

下面为skins/CustomDataGridHeaderBackgroundSkin.mxml的代码:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <local:SparkSkinForHalo name="CustomBorderSkin"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark" 
  5.         xmlns:local="mx.skins.spark.*"
  6.         implements="mx.core.IRectangularBorder">
  7.  
  8.     <fx:Script>
  9.         <![CDATA[
  10.             import mx.core.EdgeMetrics;
  11.             import mx.core.IUIComponent;
  12.             import mx.graphics.RectangularDropShadow;
  13.  
  14.             /* Define the skin elements that should not be colorized. */
  15.             static private const exclusions:Array = ["background"];
  16.             override public function get colorizeExclusions():Array {return exclusions;}
  17.  
  18.             /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
  19.             static private const contentFill:Array = [];
  20.             override public function get contentItems():Array {return contentFill};
  21.  
  22.             /* Define the border item. */
  23.             static private const borderItem:Array = ["borderStroke"];
  24.             override protected function get borderItems():Array {return borderItem;}
  25.             override protected function get defaultBorderItemColor():uint {return 0x696969;}
  26.  
  27.             static private const metrics:EdgeMetrics = new EdgeMetrics(1, 1, 1, 1);
  28.  
  29.             private var dropShadow:RectangularDropShadow;
  30.  
  31.             public function get borderMetrics():EdgeMetrics {
  32.                 return metrics;
  33.             }
  34.  
  35.             public function get backgroundImageBounds():Rectangle {
  36.                 return null;
  37.             }
  38.  
  39.             public function set backgroundImageBounds(value:Rectangle):void {
  40.             }
  41.  
  42.             public function get hasBackgroundImage():Boolean {
  43.                 return false;
  44.             }
  45.  
  46.             public function layoutBackgroundImage():void {
  47.             }
  48.  
  49.             override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
  50.                 graphics.clear();
  51.  
  52.                 super.updateDisplayList(unscaledWidth, unscaledHeight);
  53.  
  54.                 if (parent && parent is IUIComponent && !IUIComponent(parent).enabled) {
  55.                     alpha = 0.5;
  56.                 } else {
  57.                     alpha = 1.0;
  58.                 }
  59.  
  60.                 // Draw drop shadow, if needed
  61.                 if ((getStyle("dropShadowEnabled") == false) ||
  62.                         (getStyle("dropShadowEnabled") == "false") ||
  63.                         (width == 0) || (height == 0)) {
  64.                     return;
  65.                 }
  66.  
  67.                 // Create a RectangularDropShadow object, set its properties,
  68.                 // and draw the shadow
  69.                 if (!dropShadow) {
  70.                     dropShadow = new RectangularDropShadow();
  71.                 }
  72.  
  73.                 dropShadow.distance = 5;
  74.                 dropShadow.angle = 90;
  75.                 dropShadow.color = 0;
  76.                 dropShadow.alpha = 0.8;
  77.                 dropShadow.blurX = 20;
  78.                 dropShadow.blurY = 20;
  79.  
  80.                 dropShadow.drawShadow(graphics, x, y, width, height);
  81.             }
  82.  
  83.             private function getDropShadowAngle(distance:Number, direction:String):Number {
  84.                 if (direction == "left") {
  85.                     return distance >= 0 ? 135 : 225;
  86.                 } else if (direction == "right") {
  87.                     return distance >= 0 ? 45 : 315;
  88.                 } else { // direction == "center"
  89.                     return distance >= 0 ? 90 : 270;
  90.                 }
  91.             }
  92.         ]]>
  93.     </fx:Script>
  94.  
  95.     <s:Group left="0" right="0" top="0" bottom="0">
  96.         <!-- border --> 
  97.         <s:Rect left="0" right="0" top="0" bottom="0">
  98.             <s:stroke>
  99.                 <s:SolidColorStroke id="borderStroke" />
  100.             </s:stroke>
  101.         </s:Rect>
  102.  
  103.         <!-- fill -->
  104.         <s:Rect id="background" left="1" right="1" top="1" bottom="1" alpha="0.6">
  105.             <s:fill>
  106.                 <s:BitmapFill source="@Embed('assets/pattern_147.gif')" />
  107.             </s:fill>
  108.         </s:Rect>
  109.     </s:Group>
  110.  
  111. </local:SparkSkinForHalo>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: DataGrid, Gumbo | No Comments » | Tags: ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll