Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Flex 4 custom component with RichEditable text

Posted on 2010-09-16
8
Medium Priority
?
1,036 Views
Last Modified: 2012-06-27
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


<?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>

Open in new window

0
Comment
Question by:BloodGrinder
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
8 Comments
 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 33690914
Well I guess the problem is that in the design mode the editor has to do the same layout calculations that flex does when executing the application. In contrast to the running application the editor knows nothing about the data in the components. Therefore it cannot correctly calculate the sizes.

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)?lhFontSize:10}"

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.
0
 

Author Comment

by:BloodGrinder
ID: 33691211
Unforutnately still no joy with either your solution or assigning a default value when the variable is declared.
0
 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 33691344
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.

<?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>

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:BloodGrinder
ID: 33692019
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.RichEditableText even though we set the id .



0
 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 33692512
Ok ... I think I know what's going on :-) ... finally ...
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>

Open in new window

0
 

Author Comment

by:BloodGrinder
ID: 33693218
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
0
 
LVL 20

Accepted Solution

by:
ChristoferDutz earned 2000 total points
ID: 33695883
Glad that I could help you :-)

--- 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.

This is an ActionScript shorthand for the following statement (Somewhat like in C and C++)

if(myTRE != null) {


--- 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.

Well this is not a big issue, because as soon as you change a property Flex doesn't change it immediately. You can think of it as if Flex changes the property value and marks the component dirty ... when redrawing the component the changes are then made. Just like if you set a variable x to a certain value 5 times directly after another ... the perfomance penalty is propably not noticeable and the clean code will definitely be worth that.
0
 

Author Closing Comment

by:BloodGrinder
ID: 33696413
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
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are times in your Flash CS4 application when you want more than a simple pointer or a hand, and it's hard to find an ideal walk-through to tell you what to do.  I spent a few days recently learning my way around making custom cursors in Flash,…
The last time I worked with Flash and Socket connections was in AS1. A recent project required flash connecting to a Socket, and sending receiving information - we figured it would be easy enough - we all know about the socket policy documents and c…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question