Prozent Wert in Zahlenwert umwandeln

[Robbyn]

Hallo,

ich habe mir gedacht, da ich ja schon so oft darauf hingewiesen wurde, scheibste mal eine Klasse. Ich wollte mit etwas simples anfangen wie ein Suchfeld.

Habe mir also aus ein textInput ein Suchfeld gemacht. Es sieht fast genauso aus wie dies hier:

fr.kapit klovis-demo-flex 1.0.0.1

So, nun habe ich dort aber ein problem wo mir auch das geliebte Google nicht weiterhelfen konnte, ich möchte ja dem textfeld eine Größe geben nur eben keine feste größe sonder eine die variiert. Ein prozent Wert, nur verlangt Flex immer ein Number und nicht ein String als übergabewert, wie kann ich also z.b. 40% in ein Number umwandeln?!

Grüßen
Robbyn

[Robbyn]

Hat keiner Rat?

Habe bis jetzt keine Lösung finden können.
Habe herrausgefunden das es am widthInChars liegt, das das Textfeld nicht die Größe annimt die ich brauche, doch wenn ich es entfernen und stattdessen width=100% hinmache wird das textfeld mini klein und vergrößert sich pro eingegebenes Zeichen.

[Omega Psi]

percentWidth =

[Robbyn]

Jo, darauf bin ich auch gekommen, hat sich dadurch aber nihts verändert. Kann es sein das es im SparkSkin dies ignoriert?

[Omega Psi]

Ohne Code kann ich schwer sagen, was falsch sein könnte.

[Robbyn]

Ok kein problem:

Hier die Hauptanwendung:

<s:VGroup paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" width="100%" height="100%">
		<com:PressmindSearchField 
				id="searchBlo" 
				clearButtonMode="true"
				searchIcon="true"
				mainWidth="{this.width}"
				change="pressmindsearchfield1_changeHandler(event)" />
		<s:TextInput />
	</s:VGroup>

Dann die Komponente

public class PressmindSearchField extends TextInput
	{
		public var _searchIcon:Boolean;
		public var _clearButton:Boolean;
		
		public var _mainWidth:Number;

		private var _promptText:String;
		private var _promptColor:String;
		private var _promptStyle:String;
		
		public var SavedChangeData:String;
		
		[SkinPart("false")] public var clearButton:Image;
		
		public function PressmindSearchField()
		{
			super();
			this.addEventListener(TextOperationEvent.CHANGE,savedData);
			this.addEventListener(FocusEvent.FOCUS_IN,controllFocuosIN);
			this.addEventListener(FocusEvent.FOCUS_OUT,controllFocusOut);
			this.setStyle('skinClass',PressmindSearchFieldSkin);
		}
		
		//Wenn die Skin Klasse aufgerufen wird
		override protected function partAdded(partName:String, instance:Object):void{
			super.partAdded(partName,instance);
			
			if(instance == clearButton && _clearButton){
				clearButton.addEventListener(MouseEvent.CLICK,clearField);
				clearButton.visible	=	(this.text != null && this.text.length > 0 && this.text != _promptText);
			}
		}
		
		//Wenn die Skin Klasse geschlossen wird
		override protected function partRemoved(partName:String, instance:Object):void{
			super.partRemoved(partName,instance);
			
			if(instance == clearButton && _clearButton){
				clearButton.removeEventListener(MouseEvent.CLICK, clearField);
			}
		}
		
		
		//Wenn das Textfeld Fokusiert wird
		private function controllFocuosIN(event:FocusEvent):void{
			if(this.text == _promptText){
				this.text	=	"";
				this.setStyle('color','#000000');
				this.setStyle('fontStyle','normal');
				this.setStyle('fontWeight','normal');
			}
		}
		
		//Löscht den Inhalt des Textfeldes
		private function clearField(event:MouseEvent):void{
			this.text	=	"";
			if(_clearButton){
				clearButton.visible	=	false;
			}
		}
		
		
		//Wenn das Textfeld den Fokus verliert
		private function controllFocusOut(event:FocusEvent):void{
			if(this.text == ""){
				this.setStylePrompText();
			}
		}
		
		
		//Speichert die Daten in einer Variable ab, die man später aufrufen kann
		private function savedData(event:TextOperationEvent):void{
			
			if(_clearButton){
				clearButton.visible	=	(this.text != "");
			}
			SavedChangeData	=	event.currentTarget.text;
		}
		
		
		//Setzt den Prompt Text
		public function set promptText(v:String):void{
			_promptText	=	v;
			setStylePrompText();
		}
		
		//Aktiviert/Deaktiviert das Icon im Skin
		public function set searchIcon(t:Boolean):void{
			_searchIcon	=	t;
		}
		
		//Setzt die Textfarbe des Prompt
		public function set promptColor(h:String):void{
			_promptColor	=	h;
			setStylePrompText();
		}
		
		
		//Setzt den Style des Prompt (italic,normal)
		public function set promptStyle(u:String):void{
			_promptStyle	=	u;
			setStylePrompText();
		}
		
		
		//Setzt den Clear Button (sichtbar/unsichtbar)
		public function set clearButtonMode(i:Boolean):void{
			_clearButton	=	i;
		}
		
		
		//Setzt die Breite des Suchfeldes (nur Pixel erlaubt)
		public function set mainWidth(o:Number):void{
			_mainWidth	=	o;
		}
		
		
		//Setzt den Prompt Text
		private function setStylePrompText():void{
			this.text	=	_promptText;
			this.setStyle('color',_promptColor);
			
			if(_promptStyle != null){
				if(_promptStyle == "italic" || _promptStyle == "normal"){
					this.setStyle('fontStyle',_promptStyle);
				}
				
				if(_promptStyle == "bold" || _promptStyle == "normal"){
					this.setStyle('fontWeight',_promptStyle);
				}
			}
		}
	}

Und der Skin dazu:

<?xml version="1.0" encoding="utf-8"?>
<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" 
    alpha.disabledStates="0.5" blendMode="normal"
	creationComplete="sparkskin1_creationCompleteHandler(event)">

    <fx:Metadata>
    <![CDATA[ 
        [HostComponent("com.PressmindSearchField")]
    ]]>
    </fx:Metadata> 
    
    <fx:Script fb:purpose="styling">
        <![CDATA[
			import mx.core.FlexVersion;
			import mx.events.FlexEvent;
        
		[Bindable] private var userMainWidth:Number;
        private var paddingChanged:Boolean;
        
        /* Define the skin elements that should not be colorized. */
        static private const exclusions:Array = ["background", "textDisplay", "promptDisplay", "border"];
        
        /* exclusions before Flex 4.5 for backwards-compatibility purposes */
        static private const exclusions_4_0:Array = ["background", "textDisplay", "promptDisplay"];
        
        /**
         * @private
         */
        override public function get colorizeExclusions():Array 
        {
            // Since border is styleable via borderColor, no need to allow chromeColor to affect
            // the border.  This is wrapped in a compatibility flag since this change was added  
            // in Flex 4.5
            if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_4_5)
            {
                return exclusions_4_0;
            }
            
            return exclusions;
        }
        
        /* 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 commitProperties():void
        {
            super.commitProperties();
            
            if (paddingChanged)
            {
                updatePadding();
                paddingChanged = false;
            }
        }
        
        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }
        
        /**
         *  @private
         */
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            if (getStyle("borderVisible") == true)
            {
                border.visible = true;
                shadow.visible = true;
                background.left = background.top = background.right = background.bottom = 1;
                textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 1;
            }
            else
            {
                border.visible = false;
                shadow.visible = false;
                background.left = background.top = background.right = background.bottom = 0;
                textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 0;
            }
            
            borderStroke.color = getStyle("borderColor");
            borderStroke.alpha = getStyle("borderAlpha");
            
            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }

        /**
         *  @private
         */
        private function updatePadding():void
        {
            if (!textDisplay)
                return;
            
            // Push padding styles into the textDisplay
            var padding:Number;
            
            padding = getStyle("paddingLeft");
            if (textDisplay.getStyle("paddingLeft") != padding)
                textDisplay.setStyle("paddingLeft", padding);
            
            padding = getStyle("paddingTop");
            if (textDisplay.getStyle("paddingTop") != padding)
                textDisplay.setStyle("paddingTop", padding);
            
            padding = getStyle("paddingRight");
            if (textDisplay.getStyle("paddingRight") != padding)
                textDisplay.setStyle("paddingRight", padding);
            
            padding = getStyle("paddingBottom");
            if (textDisplay.getStyle("paddingBottom") != padding)
                textDisplay.setStyle("paddingBottom", padding);
            
        }
        
        /**
         *  @private
         */
        override public function styleChanged(styleProp:String):void
        {
            var allStyles:Boolean = !styleProp || styleProp == "styleName";

            super.styleChanged(styleProp);
            
            if (allStyles || styleProp.indexOf("padding") == 0)
            {
                paddingChanged = true;
                invalidateProperties();
            }
        }
			
			protected function sparkskin1_creationCompleteHandler(event:FlexEvent):void
			{
				if(hostComponent._searchIcon){
					var newSearchIcon:Image	=	new Image();
					newSearchIcon.source	=	"assets/search.png";
					
					contentGroup.addElementAt(newSearchIcon,0);
				}
				
				if(hostComponent._clearButton === false){
					contentGroup.removeElementAt(2);
				}else{
					
				}
			
				/* if((hostComponent._searchIcon === false && hostComponent._clearButton === false)){
					userMainWidth	=	hostComponent._mainWidth;
				}else if((hostComponent._searchIcon === false && hostComponent._clearButton === true) || (hostComponent._searchIcon === true && hostComponent._clearButton === false)){
					userMainWidth	=	(hostComponent._mainWidth - 22);
				}else if(hostComponent._searchIcon === true && hostComponent._clearButton === true){
					trace("test");
					userMainWidth	=	(hostComponent._mainWidth - 44);
				} */
				//userMainWidth	=	hostComponent.width;
				trace(this.width);
				contentGroup.percentWidth	=	hostComponent._mainWidth;
				textDisplay.percentWidth	=	hostComponent._mainWidth;
				
				contentGroup.percentWidth	=	100;
				textDisplay.percentWidth	=	100;
				this.percentWidth			=	100;
		}
			
		]]>
    </fx:Script>
    
    <fx:Script>
        <![CDATA[
        /** 
         * @private 
         */     
        private static const focusExclusions:Array = ["textDisplay"];

        /**
         *  @private
         */
        override public function get focusSkinExclusions():Array { return focusExclusions;};
        ]]>
    </fx:Script>
    
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled" stateGroups="disabledStates"/>
        <s:State name="normalWithPrompt"/>
        <s:State name="disabledWithPrompt" stateGroups="disabledStates"/>
    </s:states>
    
    <!-- border --> 
    <!--- @private -->
    <s:Rect left="0" right="0" top="0" bottom="0" id="border">
        <s:stroke>     
            <!--- @private -->
            <s:SolidColorStroke id="borderStroke" weight="1" />
        </s:stroke>
    </s:Rect>

    <!-- fill -->
    <!--- Defines the appearance of the TextInput component's background. -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
        <s:fill>
            <!--- @private Defines the background fill color. -->
            <s:SolidColor id="bgFill" color="0xFFFFFF" />
        </s:fill>
    </s:Rect>
    
    <!-- shadow -->
    <!--- @private -->
    <s:Rect left="1" top="1" right="1" height="1" id="shadow">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>
    
    <!-- text -->

	<s:HGroup id="contentGroup" gap="0" width="100%">
		<s:RichEditableText id="textDisplay"
	              verticalAlign="middle"
	              minWidth="200"
	              left="1" right="1" top="1" bottom="1" width="100%" />
		<s:Image left="1" right="1" top="1" bottom="1" useHandCursor="true" buttonMode="true" id="clearButton" source="assets/clear.png" />
	</s:HGroup>
</s:SparkSkin>

[Robbyn]

Trotz Code, keiner eine Idee woran es liegt?

[Robbyn]

Ok, habe es nun doch noch hinbekommen, es lag nur daran das es keine Untergruppe bessessen hat, es lag auf der blanken Application und deshalb ging es nicht. Sobald man es in eine Gruppe oder Panel steckt funktionieren alle Grßen zuordnungen wieder. Dennoch danke für eure Mühen