Как установить стили заголовка Spark DataGrid

Как обновить внешний вид частей заголовка в Spark DataGrid? Это как сообщение wiki сообщества, чтобы установить цвет фона заголовка, цвет текста заголовка, разделитель столбцов и символ символа стрелки сортировки стрелки Spark DataGrid.Как установить стили заголовка Spark DataGrid

источник

2013-03-20 1.21 gigawatts

Я нашел несколько примеров онлайн о том, как создать заголовок Spark DataGrid, но не так, как я описал. Итак, вот как я это сделал.

MXML:

<s:DataGrid />

CSS:

s|DataGrid { 
     symbolColor:#FF0000; /* defines the sort indicator color */ 
    } 

    s|GridItemRenderer { 
     color:#0000FF;  /* defines the header text color */ 
     chromeColor:#00FF00; /* defines the header background color */ 
    }

Вот так. Ну, не совсем. GridItemRenderer использует градиенты. Если вы не хотите, чтобы вы делали дополнительную работу в дополнение к вышесказанному.

ЧАСТЬ II
Чтобы удалить градиенты, мы должны создать два новых класса кожи. Новый скин сетки данных на основе spark.skins.spark.DataGridSkin и новый заголовок таблицы сетки данных на основе spark.skins.spark.DefaultGridHeaderRenderer. Первый скин расширяет DataGridSkin. Второй скин - копия DefaultGridHeaderRenderer.

MXML:

<s:DataGrid skinClass="view.skins.AbstractDataGridSkin"/>

AbstractDataGridSkin:

<?xml version="1.0" encoding="utf-8"?> 
<spark:DataGridSkin 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
    xmlns:spark="spark.skins.spark.*" 
    xmlns:skins="view.skins.*" 
    > 

    <fx:Declarations> 
     <fx:Component id="headerRenderer"> 
      <skins:AbstractDataGridHeaderSkin /> 
     </fx:Component> 


    <!--- Change the look of the column separator --> 
    <fx:Component id="columnSeparator"> 
     <s:Line> 
      <s:stroke> 
       <s:SolidColorStroke color="0xA6A6A6" weight="1" caps="square"/> 
      </s:stroke> 
     </s:Line> 
    </fx:Component> 

    <!--- Defines the look of the header column separator --> 
    <fx:Component id="headerColumnSeparator"> 
     <s:Line> 
      <s:stroke> 
       <s:SolidColorStroke color="0x00FF00" weight="1" caps="square" /> 
      </s:stroke> 
     </s:Line> 
    </fx:Component> 
    </fx:Declarations> 
</spark:DataGridSkin>

Этот класс указывает на новый DataGridHeaderSkin.

AbstractDataGridHeaderSkin:

Существует много кода в DefaultGridHeaderRenderer, что я не хочу, чтобы вставить в этот пример, так что я только собираюсь показать, что изменилось.

Сначала удалите все слои Rect, кроме «fill 2 fill». Далее, обновление «слой 2 заливки» к твердому цвет заливки, как показано ниже:

<s:GridItemRenderer minWidth="21" minHeight="21" 
       xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx"> 

<!-- ...original code here.. --> 

<!-- layer 2: fill --> 
<!--- @private --> 
<!--- Set left and right to -1 to fill out header width 
<s:Rect id="fill" left="0" right="0" top="0" bottom="-1"> --> 
<s:Rect id="fill" left="-1" right="-1" top="0" bottom="0"> 
    <s:fill> 
     <s:SolidColor color="0xFFFFFF" color.hovered="0xBBBDBD" color.down="0xAAAAAA" alpha="1" > 
     </s:SolidColor> 
    </s:fill> 
</s:Rect> 

<!-- ...original code here.. --> 

</s:GridItemRenderer>

Мы также должны обновить sortIndicatorArrow, чтобы удалить оттуда градиенты.

<fx:Component id="defaultSortIndicator"> 
    <s:Path data="M 3.5 7.0 L 0.0 0.0 L 7.0 0.0 L 3.5 7.0" implements="spark.components.gridClasses.IGridVisualElement"> 
     <fx:Script> 
      <![CDATA[ 
       import spark.components.DataGrid; 
       import spark.components.Grid; 

       /** 
       * @private 
       */ 
       public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void 
       { 
        const dataGrid:DataGrid = grid.dataGrid; 
        if (!dataGrid) 
         return; 

        const color:uint = dataGrid.getStyle("symbolColor"); 
        arrowFill.color = color; 
       } 
      ]]> 
     </fx:Script> 

     <s:fill> 
      <s:SolidColor id="arrowFill" color="0" /> 
     </s:fill> 
    </s:Path> 
</fx:Component>

Всё.

ПРИМЕЧАНИЕ:: Если вы используете цвет хрома, он преобразует фон заполнения заголовка. Вы можете добавить заливку к исключениям (обновить метод updateDisplayList), или вы можете установить значения альфа-заливки следующим образом.

<!-- layer 2: fill --> 
<!--- @private --> 
<!--- Set left and right to -1 to fill out header width 
<s:Rect id="fill" left="0" right="0" top="0" bottom="-1"> --> 
<s:Rect id="fill" left="-1" right="-1" top="0" bottom="0"> 
    <s:fill> 
     <s:SolidColor alpha="1" 
         alpha.hovered=".95" 
         alpha.down="1"/> 
    </s:fill> 
</s:Rect> 

or add this to updateDisplayList and set the colors on the fill (chromeColor would not need to be set then) 
var exclusions:Array = [fill, labelDisplay, sortIndicatorInstance];

В какой-то момент эти общие стили, мы надеемся, будут доступны на Spark DataGrid. Спарк сделал его более гибким, чтобы определить внешний вид компонента, который является хорошим, но затем жестко закодированным значением стиля в классы скинов по умолчанию, которые поставляются вместе с Flex SDK. Теперь разработчику остается найти и изменить те, которые не всегда легко сделать.

Чтобы удалить вертикальные линии столбцов или любую другую часть без необходимости кожи установить свойство частично нуль в случае инициализации следующим образом:

AbstractDataGridSkin:

<?xml version="1.0" encoding="utf-8"?> 
<spark:DataGridSkin 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
    xmlns:spark="spark.skins.spark.*" 
    xmlns:skins="view.skins.*" 
    initialize="caretIndicator = null;columnSeparator=null" 
    />

Чтобы установить высота заголовка установите его на свойстве headerComponent:

<fx:Component id="headerRenderer"> 
     <skins:AbstractDataGridHeaderSkin height="36" /> 
    </fx:Component>

Источники: http://ramblingdeveloper.com/ramblings/2011/9/25/skinning-a-flex-spark-datagrid-header.html

источник

2013-03-20 18:38:10

Как установить стили заголовка Spark DataGrid

ответ

Смежные вопросы