Zurück   Flashforum > Flex und AIR > Flex programmieren

Antwort
 
LinkBack Themen-Optionen Ansicht
Alt 13-12-2011, 16:14   #1 (permalink)
Neuer User
 
Registriert seit: Dec 2005
Ort: Oldenburg
Beiträge: 2.680
2 Probleme mit Custom Componente

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
__________________
Meine Website
Freue mich über jeden Besucher. :)

Geändert von Nico B. (14-12-2011 um 08:26 Uhr)
Nico B. ist offline   Mit Zitat antworten
Alt 14-12-2011, 15:35   #2 (permalink)
Neuer User
 
Registriert seit: Dec 2005
Ort: Oldenburg
Beiträge: 2.680
Keiner eine Idee?
__________________
Meine Website
Freue mich über jeden Besucher. :)
Nico B. ist offline   Mit Zitat antworten
Alt 14-12-2011, 15:37   #3 (permalink)
Perverted Hermit
 
Benutzerbild von Omega Psi
 
Registriert seit: Mar 2004
Ort: Bremen
Beiträge: 13.277
1.) hast du einen Style definiert und in der Skin angewandt?
2.) das machst du über das Datenmodel und die Itemrenderer.
Omega Psi ist offline   Mit Zitat antworten
Alt 14-12-2011, 15:53   #4 (permalink)
Neuer User
 
Registriert seit: Dec 2005
Ort: Oldenburg
Beiträge: 2.680
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
__________________
Meine Website
Freue mich über jeden Besucher. :)
Nico B. ist offline   Mit Zitat antworten
Alt 15-12-2011, 09:54   #5 (permalink)
Alter User
 
Benutzerbild von quaint
 
Registriert seit: Nov 2003
Ort: Berlin
Beiträge: 185
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.
quaint ist offline   Mit Zitat antworten
Alt 15-12-2011, 10:20   #6 (permalink)
Perverted Hermit
 
Benutzerbild von Omega Psi
 
Registriert seit: Mar 2004
Ort: Bremen
Beiträge: 13.277
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.
Omega Psi ist offline   Mit Zitat antworten
Alt 15-12-2011, 11:26   #7 (permalink)
Alter User
 
Benutzerbild von quaint
 
Registriert seit: Nov 2003
Ort: Berlin
Beiträge: 185
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.
quaint ist offline   Mit Zitat antworten
Alt 15-12-2011, 11:33   #8 (permalink)
Perverted Hermit
 
Benutzerbild von Omega Psi
 
Registriert seit: Mar 2004
Ort: Bremen
Beiträge: 13.277
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.
Omega Psi ist offline   Mit Zitat antworten
Alt 15-12-2011, 11:38   #9 (permalink)
Alter User
 
Benutzerbild von quaint
 
Registriert seit: Nov 2003
Ort: Berlin
Beiträge: 185
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...
quaint ist offline   Mit Zitat antworten
Alt 15-12-2011, 11:54   #10 (permalink)
Perverted Hermit
 
Benutzerbild von Omega Psi
 
Registriert seit: Mar 2004
Ort: Bremen
Beiträge: 13.277
  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
    Zitat:
    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.
Omega Psi ist offline   Mit Zitat antworten
Alt 15-12-2011, 17:40   #11 (permalink)
Alter User
 
Benutzerbild von quaint
 
Registriert seit: Nov 2003
Ort: Berlin
Beiträge: 185
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.
quaint ist offline   Mit Zitat antworten
Alt 02-01-2012, 21:47   #12 (permalink)
Perverted Hermit
 
Benutzerbild von Omega Psi
 
Registriert seit: Mar 2004
Ort: Bremen
Beiträge: 13.277
Code:
<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>
Code:
@namespace s "library://ns.adobe.com/flex/spark";

s|DropDownList
{
    skinClass: ClassReference("net.icodeapps.skins.DropDownListSkin")
}
Code:
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();
    }
  }
}
Code:
<?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.
Omega Psi ist offline   Mit Zitat antworten
Antwort

Lesezeichen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks sind an
Pingbacks sind an
Refbacks sind an


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Custom Button mit Custom Label, Label ansprechen Silver_Surfer ActionScript 3 6 11-09-2009 13:45
Loader Componente krschkunst Komponenten und SmartClips 2 07-09-2008 19:52
Window Componente? silentx Komponenten und SmartClips 1 13-08-2008 16:38
Componente via Tab steuern!!! Miroglu Komponenten und SmartClips 1 21-12-2006 19:36
tool tip componente AS FLA netTrek Komponenten und SmartClips 1 23-08-2002 09:30


Alle Zeitangaben in WEZ +1. Es ist jetzt 22:34 Uhr.

Domains, Webhosting & Vserver von Host Europe
Unterstützt das Flashforum!
Adobe User Group


Copyright ©1999 – 2014 Marc Thiele