Home Tutorials Forums Articles Blogs Movies Library Employment Press

Go Back   ActionScript.org Forums > Flex > Flex 2, 3 & 4

Reply
 
Thread Tools Rating: Thread Rating: 2 votes, 5.00 average. Display Modes
Old 12-10-2010, 03:29 PM   #1
Miroku_87
Senior Member
 
Miroku_87's Avatar
 
Join Date: Apr 2010
Posts: 238
Default Custom Components: Accessing to custom skins objects

Hi everyone I've got a problem:
I've this skin created be me:
ActionScript Code:
<?xml version="1.0" encoding="utf-8"?> <!--     ADOBE SYSTEMS INCORPORATED     Copyright 2008 Adobe Systems Incorporated     All Rights Reserved.     NOTICE: Adobe permits you to use, modify, and distribute this file     in accordance with the terms of the license agreement accompanying it. --> <!--- The default skin class for the Spark Button component.         @see spark.components.Button               @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"              minWidth="21"              minHeight="21"              width="40"              height="40"              xmlns:mx="library://ns.adobe.com/flex/mx">         <!-- host component -->     <fx:Metadata>         <![CDATA[         /**          * @copy spark.skins.spark.ApplicationSkin#hostComponent          */         [HostComponent("spark.components.Button")]         ]]>     </fx:Metadata>         <fx:Script fb:purpose="styling">         <![CDATA[                      /* Define the skin elements that should not be colorized.             For button, the graphics are colorized but the label is not. */             static private const exclusions:Array = ["labelDisplay"];                         /**              * @private              */                  override public function get colorizeExclusions():Array {return exclusions;}                         /**              * @private              */             override protected function initializationComplete():void             {                 super.initializationComplete();             }                          /**              *  @private              */             override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void             {                 super.updateDisplayList(unscaledWidth, unscaledHeight);             }         ]]>            </fx:Script>         <!-- states -->     <s:states>         <s:State name="up" />         <s:State name="over" />         <s:State name="down" />         <s:State name="disabled" />     </s:states>         <mx:Image x="0" y="0" width="40" height="40" source="@Embed('guiMedia/menuButton.png')"               source.disabled="@Embed('guiMedia/menuButtonDisabled.png')"               source.over="@Embed('guiMedia/menuButtonOverDown.png')"               source.down="@Embed('guiMedia/menuButtonOverDown.png')"/>     <mx:Image x="0" y="0" width="40" height="40" y.down="3" y.over="3" id="iconDisplay" visible="false"/>     <s:Label id="labelDisplay"              textAlign="center"              verticalAlign="middle"              maxDisplayedLines="1"              horizontalCenter="0" verticalCenter="1"              width="40"              height="40">     </s:Label>     </s:SparkSkin>

Now I want to create a custom Button which uses that skin and manages his components.
Something like this:
ActionScript Code:
<?xml version="1.0" encoding="utf-8"?> <s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"           xmlns:s="library://ns.adobe.com/flex/spark"           xmlns:mx="library://ns.adobe.com/flex/mx" skinClass="gui.MetropoliMenuButtonSkin">     <fx:Declarations>         <!-- Place non-visual elements (e.g., services, value objects) here -->     </fx:Declarations>     <fx:Script>         <![CDATA[             private var _icon:Object;                         public function set icon(value:Object):void             {                 iconDisplay.source = value;                 _icon = value;                 showIcon();             }                         override public function set label(value:String):void             {                 super.label = value;                 showLabel();             }                         public function showIcon():void             {                 iconDisplay.visible = true;                 labelDisplay.visible = false;             }                         public function showLabel():void             {                             iconDisplay.visible = false;                 labelDisplay.visible = true;             }         ]]>     </fx:Script> </s:Button>
Now: everytime I try to access iconDisplay I get an error:
Code:
Description	Resource	Path	Location	Type
1120: Access of undefined property iconDisplay.	MetropoliMenuButton.mxml	/MetropoliAway/src/gui	line 16	Flex Problem
While when I access the labelDisplay object everything is fine (because it's defined in the ButtonBase class)

I tried making public get methods in the Skin but with no positive results.
How can I make my iconDisplay accessible by my custom button definition?

Thank you =)
Miroku_87 is offline   Reply With Quote
Old 12-10-2010, 05:41 PM   #2
drkstr
Flexpert
 
drkstr's Avatar
 
Join Date: Sep 2006
Location: Seattle, WA: USA
Posts: 1,587
Default

Control the data values of your skin parts in the host component. Override the partAdded function in the host, and add your event handler there. From there, preform any other operations you need to complete on the other skin parts.
drkstr is offline   Reply With Quote
Old 12-10-2010, 10:24 PM   #3
Miroku_87
Senior Member
 
Miroku_87's Avatar
 
Join Date: Apr 2010
Posts: 238
Default

Can you post me an example code, please?
Thank you =)
Miroku_87 is offline   Reply With Quote
Old 12-13-2010, 03:14 AM   #4
drkstr
Flexpert
 
drkstr's Avatar
 
Join Date: Sep 2006
Location: Seattle, WA: USA
Posts: 1,587
Default

Sure.

Show me a complete example that demonstrates the problem, and an explanation of what it's doing incorrectly.
drkstr is offline   Reply With Quote
Old 12-13-2010, 08:27 AM   #5
Miroku_87
Senior Member
 
Miroku_87's Avatar
 
Join Date: Apr 2010
Posts: 238
Default

Ehm.... all the code and explanations are in the first post.
You need something more specific? If yes, about what?
Miroku_87 is offline   Reply With Quote
Old 12-15-2010, 12:16 AM   #6
drkstr
Flexpert
 
drkstr's Avatar
 
Join Date: Sep 2006
Location: Seattle, WA: USA
Posts: 1,587
Default

I need you to explain exactly what you are trying to do, before I can show you an example of how to do it.
drkstr is offline   Reply With Quote
Old 12-15-2010, 07:41 AM   #7
Miroku_87
Senior Member
 
Miroku_87's Avatar
 
Join Date: Apr 2010
Posts: 238
Default

I'm trying to change the source and the visibility of the image component in the skin I'm using for my button.
Miroku_87 is offline   Reply With Quote
Old 12-16-2010, 01:41 AM   #8
drkstr
Flexpert
 
drkstr's Avatar
 
Join Date: Sep 2006
Location: Seattle, WA: USA
Posts: 1,587
Default

ActionScript Code:
package {     /* For guidance on writing an ActionScript Skinnable Component please refer to the Flex documentation:     [url]www.adobe.com/go/actionscriptskinnablecomponents[/url] */         import mx.controls.Image;         import spark.components.Button;             /* A component must identify the view states that its skin supports.     Use the [SkinState] metadata tag to define the view states in the component class.     [SkinState("normal")] */         public class MyIconButton extends Button     {         /* To declare a skin part on a component, you use the [SkinPart] metadata.         [SkinPart(required="true")] */                 [SkinPart]         public var imageDisplay:Image;                 public function MyIconButton()         {             //TODO: implement function             super();         }                 /* Implement the getCurrentSkinState() method to set the view state of the skin class. */         override protected function getCurrentSkinState():String         {             return super.getCurrentSkinState();         }                 /* Implement the partAdded() method to attach event handlers to a skin part,         configure a skin part, or perform other actions when a skin part is added. */            override protected function partAdded(partName:String, instance:Object) : void         {             super.partAdded(partName, instance);                         if(instance == this.imageDisplay)             {                 this.imageDisplay.visible = true;                 this.imageDisplay.source = "assets/my_image.png";             }         }                 /* Implement the partRemoved() method to remove the even handlers added in partAdded() */         override protected function partRemoved(partName:String, instance:Object) : void         {             super.partRemoved(partName, instance);         }             } }
Code:
<?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" 
			 xmlns:mx="library://ns.adobe.com/flex/mx"
			 minWidth="21" minHeight="21" alpha.disabled="0.5" >
	<fx:Metadata>[HostComponent("MyIconButton")]</fx:Metadata>

    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    
	<s:HGroup width="100%" height="100%">
		<mx:Image id="imageDisplay" />
		<s:Label id="labelDisplay"
				 textAlign="center"
				 verticalAlign="middle"
				 maxDisplayedLines="1"
				 horizontalCenter="0" verticalCenter="1"
				 left="10" right="10" top="2" bottom="2">
		</s:Label>
	</s:HGroup>
    
</s:SparkSkin>
drkstr is offline   Reply With Quote
Old 12-20-2010, 07:46 PM   #9
Miroku_87
Senior Member
 
Miroku_87's Avatar
 
Join Date: Apr 2010
Posts: 238
Default

Sorry for being late.
I've tried your code but still got the "1120" error on imageDisplay in my component custom management =\

Skin class definition: http://pastebin.com/uA4xv0He
Skin definition: http://pastebin.com/3UpchPTV
Button Component definition: http://pastebin.com/3apwD264
Miroku_87 is offline   Reply With Quote
Old 12-20-2010, 09:55 PM   #10
drkstr
Flexpert
 
drkstr's Avatar
 
Join Date: Sep 2006
Location: Seattle, WA: USA
Posts: 1,587
Default

Ok, I see you have a host component and a skin. At first glance, that all looks like it should work.

...so what's this for?

Quote:
Button Component definition: http://pastebin.com/3apwD264
It looks like you are assigning the skinClass to some random button, not your MetropoliMenuButtonBase. Merge the code from your button class into MetropoliMenuButtonBase, and just use that in your app.
drkstr is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:00 PM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.