2 Probleme mit Custom Componente

[Nico B.]

Hi,

ich erstelle mir gerade eine eigene DropDownList, sprich ich habe sie umgestaltet und will jetzt noch ein bisschen eigenen Code hinzufügen.

1. Problem: Wie man sieht, sind der erste und letzte Beitrag "unschönerweise" nicht abgerundet. Gibt es einen Trick, wie man definiert das alle Elemente dem abgerundeten Rechteck (HIntergrund des DropDown) angepasst sind?
Habe das bereits per Maske versucht - erfolglos.


2. Wie zur Hölle kann ich das geklickte/ausgewählte Element aus meiner DropDownList deaktivieren und wenn ein anderen geklickt wird, das "alte" wieder aktivieren?
Ich sehe keine Möglichkeit innerhalb des "ChangeIndex" Listener auf die Items der Liste zuzugreifen. Gibts da einen Trick?

lg, Nico


Edit: Ganz vergessen den Link dran zu hängen....
http://www.nicobarelmann.de/Combobox/SkinningTest.swf

[Nico B.]

Keiner eine Idee?

[Omega Psi]

1.) hast du einen Style definiert und in der Skin angewandt?
2.) das machst du über das Datenmodel und die Itemrenderer.

[Nico B.]

1. Ja, aber das muss ja irgendwie mit Mask o.ä. gehen, oder nicht?

Weil es ist ja immer nur das erste bzw. letzte Auswahlelement angeschnitten... Die Elemente dazwischen sind ja normal "kantig" und sollen auch keine rundung haben.


2. Das dachte ich mir schon, aber mir fehlt da irgendwie der Ansatz für... Ich muss es doch in dem DropBoxSkin machen, da ich es ja nicht für jede Box einzeln machen will, sondern die Komponente das "alleine" können soll - oder?


nico

[quaint]

1. du könntest in deinem skin das erste und letzte element speziell bahandeln.
2. du definierst in deiner hostkomponente, sprich den itemrenderen, states welche du im layout interpretieren kannst. zb. active und up. das setzen der states übernimmt der itemrenderer anhand einer variable, zb. activated, die von der umgebenden klasse, der eigentlichen combo-box, gesetzt und verwaltet wird.

[Omega Psi]

1.) schlechte Idee.
2.) die ItemRenderer bekommen bei [Bindable] Properties des referenzierten Datums immer wieder die Referenz über set data, wenn die Instanz geupdated wurde.

[quaint]

1. tschuldigung. aber ich halte eine spezielle behandlung der items für eine definitiv bessere idee, als es über eine maske zu lösen wie nico vorgeschlagen hatte.

2. leider kann ich mir das beispiel nicht anschauen. vielleicht versteh ich daher nicht, was du mit dem Datum meinst. aber ging es nicht um ein aktiv setzen?

ich bin etwas verwirrt... vielleicht sollte man auch einfach nicht neben der arbeit fragen beantworten.

[Omega Psi]

1.) Ja, das stimmt, aber das sollten die Renderer selbst machen, denn die kennen ihren Index über data
2.) Datum = das über data referenzierte Objekt.

[quaint]

1. Naja, man könnte dem Layout halt für das erste und letzte Element einen anderes Skin geben. Dann müssten die einzelnen Renderer nicht extra ihren Index überprüfen und sie wären spezialisierter. Aber bevor wir hier n Architektur-Philosophie ausbrechen, sag ich einfach mal dass das Geschmackssache ist.

2. Ok, aber wo braucht man in einer ComboBox das Datum. Wie gesagt ich konnte mir das Beispiel nicht anschauen. Meine Vermutung ist, dass wenn ich das könnte müsste ich mir die Frage nicht stellen...

[Omega Psi]

1. ItemRenderer sind nicht skinbar und Skin Wechsel sind teuer (wenn die Liste scrollen soll). Also, hm, ich finde nicht, dass das mit Geschmack zu tun hat
2. Terminus Datum

   Anmerkung zum Sprachgebrauch von Datum
   
   Diese Pluralform folgt damit anderen Wörtern lateinischen Ursprungs wie Studium/Studien und Individuum/Individuen. In der deutschen Sprache hat sich jedoch die Bedeutung von „Datum“ im allgemeinem Sprachgebrauch auf „Kalenderdatum“ eingeengt. Dem entsprechend wird das Wort „Daten“ nicht als Plural von „Datum“ aufgefasst, und stattdessen von „Datumsangaben“ oder „Terminen“ gesprochen. Umgekehrt werden für die Einzahl von „Daten“ im Sinne von Angaben Wörter wie „Datenelement“, „Angabe“ oder „Wert“ verwendet.
   Dennoch ist „Datum“ der korrekte Singular und kann entsprechend Anwendung finden. Alternative Konstrukte wie z.B. das häufig anzutreffende deutsch ausgesprochene „Date“, angewandt etwa als „Zwei Daten, eine Date“, sind falsch.

[quaint]

1. Natürlich kann ich ItemRenderer auch so erstellen das sie Skinbar sind. Wobei man natürlich zugeben muss das in einem DropDownList ziemlicher Quatsch wäre, da hier die Items ja fast nichts beinhalten und sie auch schön schlank gehalten sind. Mein Fehler, sozusagen.

Und nach kurzem nachdenken muss ich zugeben das eine Maske wohl wirklich die beste Option wäre, wie würde sonst ein halb gesrollter Button aussehen. Die andere Frage ist aber natürlich, sollte man das wirklich machen? Auch der Abschluss des Scrollers wäre angeschnitten. Naja.

2. Aha. Persönlich bin ich ja ein Fan von allgemein gültiger Sprache, egal ob sie nun falsch ist. Man versteht immer alles so herlich. Ich erdreiste mich sogar werf und nicht wirf zu sagen. Ja, ein Grammatik-Frechdachs bin ich.

[Omega Psi]

<flex-config xmlns="http://www.adobe.com/2006/flex-config">
  <compiler>
    <debug>true</debug>
    <theme append="true">
      <filename>src/DropDownExample.css</filename>
    </theme>
    <source-path>
      <path-element>/Users/florian/Projects/DropDownExample/src</path-element>
    </source-path>
  </compiler>
  <file-specs>
    <path-element>/Users/florian/Projects/DropDownExample/src/DropDownExample.mxml</path-element>
  </file-specs>
  <static-link-runtime-shared-libraries>true</static-link-runtime-shared-libraries>
  <output>/Users/florian/Projects/DropDownExample/out/production/DropDownExample/DropDownExample.swf</output>
</flex-config>

@namespace s "library://ns.adobe.com/flex/spark";

s|DropDownList
{
    skinClass: ClassReference("net.icodeapps.skins.DropDownListSkin")
}

package net.icodeapps.components.supportClasses
{
  import flash.display.DisplayObject;
  import flash.events.Event;

  import mx.core.UIComponent;

  import spark.components.Group;

  public class RoundedRectGroup extends Group
  {
    //---------------------------------------------------------------------
    //
    //          Properties
    //
    //---------------------------------------------------------------------

    //-----------------------------
    //          cornerRadius
    //-----------------------------

    /**
     * Storage for the cornerRadius property.
     */
    private var _cornerRadius:int;

    /**
     * The cornerRadius property.
     *
     * todo: add descripton.
     */
    public function get cornerRadius():int
    {
      return _cornerRadius;
    }

    [Bindable("cornerRadiusChanged")]
    public function set cornerRadius(value:int):void
    {
      if (_cornerRadius === value)
      {
        return;
      }

      _cornerRadius = value;
      invalidateDisplayList();
      dispatchEvent(new Event("cornerRadiusChanged"));
    }

    //-----------------------------
    //          mask
    //-----------------------------

    private var _mask:UIComponent;

    //---------------------------------------------------------------------
    //
    //          Overridden Methods
    //
    //---------------------------------------------------------------------

    override protected function createChildren():void
    {
      super.createChildren();

      if (!_mask)
      {
        mask = addElement(_mask = new UIComponent()) as DisplayObject;
      }
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
      super.updateDisplayList(unscaledWidth, unscaledHeight);

      _mask.width = unscaledWidth;
      _mask.height = unscaledHeight;

      _mask.graphics.clear();
      _mask.graphics.beginFill(0);
      _mask.graphics.drawRoundRect(0, 0, unscaledWidth, unscaledHeight, cornerRadius, cornerRadius);
      _mask.graphics.endFill();
    }
  }
}

<?xml version="1.0" encoding="utf-8"?>
<!--- The default skin class for the Spark DropDownList component.
      The skin for the anchor button for a DropDownList component 
      is defined by the DropDownListButtonSkin class.  
      
      <p>In a custom skin class that uses transitions, set the 
      <code>itemDestructionPolicy</code> property to <code>none</code>
      for the PopUpAnchor defined by the popUp property.</p>      
        
      @see spark.components.DropDownList        
      @see spark.skins.spark.DropDownListButtonSkin
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
       xmlns:supportClasses="net.icodeapps.components.supportClasses.*" alpha.disabled=".5">

  <!-- host component -->
  <fx:Metadata>
  <![CDATA[ 
    /** 
     * @copy spark.skins.spark.ApplicationSkin#hostComponent
     */
    [HostComponent("spark.components.DropDownList")]
  ]]>
  </fx:Metadata> 

  <fx:Script fb:purpose="styling">
    <![CDATA[
    /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
    static private const contentFill:Array = ["bgFill"];

    /**
     * @private
     */
    override public function get contentItems():Array
    {
      return contentFill;
    }

    /**
     * @private
     */
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
      const borderVisible:Boolean = getStyle("borderVisible"),
          padding:int = borderVisible ? 1 : 0

      if (background)
        background.left = background.top = background.right = background.bottom = padding;

      if (scroller)
        scroller.minViewportInset = padding;

      if (border)
        border.visible = borderVisible;

      if (dropShadow)
        dropShadow.visible = getStyle("dropShadowVisible");

      openButton.setStyle("cornerRadius", getStyle("cornerRadius"));

      if (borderStroke)
      {
        borderStroke.color = getStyle("borderColor");
        borderStroke.alpha = getStyle("borderAlpha");
      }

      super.updateDisplayList(unscaledWidth, unscaledHeight);
    }
    ]]>
  </fx:Script>
  
  <s:states>
    <s:State name="normal" />
    <s:State name="open" />
    <s:State name="disabled" />
  </s:states>
  
  <!--- 
    The PopUpAnchor control that opens the drop-down list. 
    
    <p>In a custom skin class that uses transitions, set the 
    <code>itemDestructionPolicy</code> property to <code>none</code>.</p>
  -->
  <s:PopUpAnchor id="popUp" displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
    left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
    popUpPosition="below" popUpWidthMatchesAnchorWidth="true">
    
    <!--- 
       This includes borders, background colors, scrollers, and filters.
       @copy spark.components.supportClasses.DropDownListBase#dropDown
    -->
    <supportClasses:RoundedRectGroup id="dropDown" cornerRadius="20">
    
      <!--- @private -->
      <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7" 
         angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
    
      <!--- @private -->
      <s:Rect id="border" left="0" right="0" top="0" bottom="0">
        <s:stroke>
          <!--- border stroke @private -->
          <s:SolidColorStroke id="borderStroke" weight="1"/>
        </s:stroke>
      </s:Rect>

      <!-- fill -->
      <!--- Defines the appearance of drop-down list's background fill. -->
      <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
        <s:fill>
        <!--- 
          The color of the drop down's background fill.
          The default color is 0xFFFFFF.
        -->
          <s:SolidColor id="bgFill" color="0xFFFFFF" />
        </s:fill>
      </s:Rect>
      
      <!--- @private -->
      <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">
        <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
        <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
          <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="1" requestedMaxRowCount="6"/>
          </s:layout>
        </s:DataGroup> 
      </s:Scroller>
    </supportClasses:RoundedRectGroup>
  </s:PopUpAnchor>
  
  <!--- The default skin is DropDownListButtonSkin. 
      @copy spark.components.supportClasses.DropDownListBase#openButton
      @see spark.skins.spark.DropDownListButtonSkin -->
  <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false" tabEnabled="false"
    skinClass="spark.skins.spark.DropDownListButtonSkin" /> 
    
  <!--- @copy spark.components.DropDownList#labelDisplay -->
  <s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1" 
    mouseEnabled="false" mouseChildren="false"
    left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" /> 

</s:SparkSkin>

Check das mal.