I wrote a flex demo, customized spark TextInput skin with rounded corners and a search icon in it, like mac os x search box, it's running good in browsers (by Flash Player browser plug-in) either .html or .swf, but error by flash player directly.
the error:
ReferenceError: Error #1056: Cannot create property allowCodeImport on flash.system.LoaderContext. at mx.core::CrossDomainRSLItem/completeCdRslLoad() at mx.core::CrossDomainRSLItem/itemCompleteHandler() at flash.events::EventDispatcher/dispatchEventFunction() at flash.events::EventDispatcher/dispatchEvent() at flash.net::URLLoader/onComplete()
there is the test demo, includes source: http://www.ycoder.com/wp-content/uploads/2011/07/CustomComponentSkinTest.zip
CustomTextInput
package component{
import skin.CustomTextInputSkin;
import spark.components.TextInput;
[Style(name="icon", inherit="no", type="Object")]
[Style(name="radius", inherit="true", type="Number")]
public class CustomTextInput extends TextInput{
[Embed(source="/images/search.png")]
private const defaultIcon:Clas开发者_JS百科s;
public function CustomTextInput(){
super();
this.setStyle('icon', defaultIcon);
this.setStyle('radius', 10);
this.setStyle("skinClass", CustomTextInputSkin);
}
}
}
CustomTextInputSkin
<!-- border -->
<!--- @private -->
<s:Rect left="0" right="0" top="0" bottom="0" id="border" radiusX="{hostComponent.getStyle('radius')}" radiusY="{hostComponent.getStyle('radius')}" >
<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" radiusX="{hostComponent.getStyle('radius')}" radiusY="{hostComponent.getStyle('radius')}" >
<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" radiusX="{hostComponent.getStyle('radius')}" radiusY="{hostComponent.getStyle('radius')}" >
<s:fill>
<s:SolidColor color="0x000000" alpha="0.12" />
</s:fill>
</s:Rect>
<s:HGroup id="textGroup" gap="0" height="100%" paddingLeft="4" paddingRight="4">
<!-- icon -->
<s:Image id="icon" includeIn="normal" x="0" y="0" source="{hostComponent.getStyle('icon')}" verticalAlign="middle" height="100%"/>
<!-- text -->
<!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
<s:RichEditableText id="textDisplay"
verticalAlign="middle"
widthInChars="10"
left="1" right="1" top="1" bottom="1" height="100%"/>
</s:HGroup>
test case
<?xml version="1.0" encoding="utf-8"?>
<s:Application 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:component="component.*" >
<s:VGroup paddingLeft="20" paddingTop="20">
<s:TextInput />
<component:CustomTextInput />
<component:CustomTextInput radius="12" icon="images/device.png" text="ABC Test ... hohoho" editable="false" />
</s:VGroup>
</s:Application>
The reason is: Flex SDK 4.5 support only flash player 10.2+, and my standalone flash player version is 10.0., my flash player plug-in version is 10.2.. thinks
This line in your skin is the culprit:
<s:Image id="icon" includeIn="normal" x="0" y="0" source="{hostComponent.getStyle('icon')}" verticalAlign="middle" height="100%"/>
Since you're setting your icon in the style, on creation complete it tries to get that image from the internet which isn't there because HTTP request goes through the browser (however, it should be trying to request the OS browser). I'm not 100% sure if the error should be there, but my question is, why are you running it in standalone flash player anyway?
精彩评论