BloodGrinder
asked on
Flex 4 custom component with RichEditable text
Hi, I am trying to create a custom component which comprises of a spark skinnable container inside of which is nested a richeditabletext control as follows
As you can see the component has a public property that is bound to the fontsize property of the ret. However as soon as I add this and save I get a warning error
"Design mode:Error during component layout.Choose Design> Refresh to refresh design mode"
which i do but which does not do anything. The design view then refuses to draw the visual representaion of the component.
If i remove this attribute/property
fontSize="{lhFontSize}
from the code all goes back to normal , anyone have any ideas?
Thanks in advance
As you can see the component has a public property that is bound to the fontsize property of the ret. However as soon as I add this and save I get a warning error
"Design mode:Error during component layout.Choose Design> Refresh to refresh design mode"
which i do but which does not do anything. The design view then refuses to draw the visual representaion of the component.
If i remove this attribute/property
fontSize="{lhFontSize}
from the code all goes back to normal , anyone have any ideas?
Thanks in advance
<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="132" xmlns:styles="components.styles.*" xmlns:components="components.*">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import spark.components.RichEditableText
[Bindable] public var lhFontSize:int
]]>
</fx:Script>
<s:RichEditableText text="RichEditableText" width="100%" height="100%" left="0" top="0" fontSize="{lhFontSize}"/>
</s:SkinnableContainer>
ASKER
Unforutnately still no joy with either your solution or assigning a default value when the variable is declared.
Perhaps FlashBuilder doesn't like variables at this location. Simply try with a constant value.
fontSize="10"
And set the font size in your code. In the above code I go two ways to initialize the component. This is because eventually you created your component programatically and set the value. In this case the RTE is not yet created and you would receive Nullpointer Exceptions. In this case the fontSize value is saved in a private variable. As soon as the RTE is created, the initRTE callback sets the font size.
On the other side if the RTE was allready created, then the font size would not be updated, because the creationComplete callback is not issued. This is why in this case the value is set immediately.
fontSize="10"
And set the font size in your code. In the above code I go two ways to initialize the component. This is because eventually you created your component programatically and set the value. In this case the RTE is not yet created and you would receive Nullpointer Exceptions. In this case the fontSize value is saved in a private variable. As soon as the RTE is created, the initRTE callback sets the font size.
On the other side if the RTE was allready created, then the font size would not be updated, because the creationComplete callback is not issued. This is why in this case the value is set immediately.
<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="132" xmlns:styles="components.styles.*" xmlns:components="components.*">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import spark.components.RichEditableText
private var _fontSize:int;
public function set lhFontSize(val:int):void {
_fontSize = val;
if(myRTE) {
myRTE.fontSize = val;
}
}
public function get lhFontSize():int {
return _fontSize;
}
private function initRTE():void {
myRTE.fontSize = _fontSize;
}
]]>
</fx:Script>
<s:RichEditableText id="myRTE" text="RichEditableText" width="100%" height="100%" left="0" top="0" fontSize="10" creationComplete="initRTE()"/>
</s:SkinnableContainer>
ASKER
Thank for the continued help.
Your code is similar to what I originally started out with, but in this situation it does not work as I cannot gain reference any of the RTE's properties, ie myRTE.fontsize gives me a 1119 error Access of possibly undefined property fontSize through a reference with static type spark.components.RichEdita bleText even though we set the id .
Your code is similar to what I originally started out with, but in this situation it does not work as I cannot gain reference any of the RTE's properties, ie myRTE.fontsize gives me a 1119 error Access of possibly undefined property fontSize through a reference with static type spark.components.RichEdita
Ok ... I think I know what's going on :-) ... finally ...
fontSize is not a real property but a style. Try this:
fontSize is not a real property but a style. Try this:
<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="132" xmlns:styles="components.styles.*" xmlns:components="components.*">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import spark.components.RichEditableText
private var _fontSize:int;
public function set lhFontSize(val:int):void {
_fontSize = val;
if(myRTE) {
initRTE();
}
}
public function get lhFontSize():int {
return _fontSize;
}
private function initRTE():void {
myRTE.setStyle("fontSize", _fontSize);
}
]]>
</fx:Script>
<s:RichEditableText id="myRTE" text="RichEditableText" width="100%" height="100%" left="0" top="0" fontSize="10" creationComplete="initRTE()"/>
</s:SkinnableContainer>
ASKER
Yes that worked. Thank you so much for your time, but if you have time before I close the question could you just give me a couple of brief answers to the following and then I will leaveyou in peace :0 .If no time then dont worry.
With reference to the if statement , its the first time i have come across it used in this way. I presume it is checking that myRTE is the caller, but where does this happen in the lifecycle and what is it passing if anything.
Also if I wanted to allow changes to other properties/styles do I just add some more getter/setter and update the init function accordingly even though every time one property value changed, it would reset all.
Thanks again
With reference to the if statement , its the first time i have come across it used in this way. I presume it is checking that myRTE is the caller, but where does this happen in the lifecycle and what is it passing if anything.
Also if I wanted to allow changes to other properties/styles do I just add some more getter/setter and update the init function accordingly even though every time one property value changed, it would reset all.
Thanks again
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you for your time and patience, its good to know there are still people out there that are willing to go that extra mile to help others
You can immagine that the layout would look a little different, depending on if the fons size is 4 or 400. Perhaps you should assume a default value:
fontSize="{(lhFontSize)?lh
this is a shorthand if-statement. If lhFontSize is not deifned, it assumes a fontSize of 10, if a value is provided, then this is used.