Autosizing Height in custom component

I'm recreating a component that kind of like a text area
control. I want it's height to autosize based on it's width which
is set by it's parent. For instance, say I include it in a
resizable window with 100% width, but I want it's height to adjust
based on how it wraps it's contents. The way I'm doing it now is to
set it's height inside it's "updateDisplayList" basically, I ignore
the unscaledHeight passed in and at the end of my updating, I set
this.height to what I want. Unfortunately, this causes a second
pass to updateDisplayList, which I don't like because my
updateDisplayList is expensive.
Is there a built-in component that works this way so I can
look at the source as a guide. From what I can tell, the TextArea
control does not autosize it's height.

Hi Raja
Please refer the link:
[Recent items - Tips to Customize |http://wiki.sdn.sap.com/wiki/display/CRM/Recentitems-Tipsto+Customize]
This will help you.
Regards
Leon

Similar Messages

Set Height of custom component via AS3

The class below is being used as a custom itemRenderer, and I want to set the height of the VBox to that of its contents (children), or perhaps the easy way would be just set it to 90%. But it must be reset each timethe dataProvider is passed to it.
public class TextDynamicLayout extends VBox
// .. code removed for brevity
override protected function measure():void
        super.measure();
         percentHeight = 90; //this is not working as expected
         // measuredHeight = measuredMinHeight = 50;

I mistakenly chose "Answered." The question has not been answered completely, but I cannot undo that action of choosing "Answered."
Ben, I am not sure how that will solve the problem, could you eexplain a bit more, please?
Flex harUI, You explained the situation precisely as it is in my case. So, is there not a solution to the problem? I really need to vertically and horizontally center the VBox (with its content, and adjust the height and width of the VBox based on the text content).
Look at the image below, the VBox has the grey background and inside the VBox are dynamically rendered textFields with image bullets using the HBox . I know it is best to use the UIComponent for custom itemRenderers, but in my case, there is not really a list of items, just the one you see on Screen, only the text in the VBox changes when the dataProvider changes.
Any suggestions? Thanks.

JPanel won't display my custome component

Hi,
I made a custome component class that in its paint method at this stage is suppose to paint a white rectangle on screen. However the when I add this custome component to my JPanel it doesn't show up. Does anybody have a solution for this?
My code for the custome component is,
public spaceMediaDisplayObject(mediaObject mo){
     x = mo.getSpaceX();
     y = mo.getSpaceY();
     height = mo.getHeight();
     width = mo.getWidth();
     name = mo.getName();
     System.out.println("Constructor");
     this.repaint();
public void paint(Graphics g){
     System.out.println("Draw");
     g.setColor(Color.white);
     g.drawRect(x, y, height, width);
And the fragment of code I am using to try and display in on the panel is as follows,
spaceMediaDisplayObject smdo = new spaceMediaDisplayObject(toDisplay);
     spaceBodyPanel.add(smdo);
Please help if able.

If it's null then you need to set the size of each component explicitly:
JPanel panel = new JPanel(null);
Component customComponent = new CustomComponent();
panel.add(customComponent);
customComponent.setBounds(0, 0, 100, 100); // For exampleA simple layout manager could be used to make the component fill the panel, for example:
JPanel panel = new JPanel(new GridLayout(1, 1));
panel.add(new CustomComponent());Hope this helps.

Advice on creating a tricky custom component

Hi,
I'm working on creating a custom component which displays a image at the top of the canvas, and loops through a passed array collection, displaying each row of the array collection in a item renderer. So the component should look like this (see attached image).
As you can see from this image the header is a image itself, this will differ every instance of the panel, there should be 3 of these panels on the page. Then each row of data is a item renderer displaying the data provided from a array collection of value object. If there are 4 items in this array collection then the panel should show 4 rows, if there are 2 row in the array then the panel will display 2 rows. Also the height of the panel will dynamically change depending on the number of rows to show.
I was thinking of extending a Canvas component, and then passing in the image URL and trying to load and draw the image dynamically, then I was thinking of using the Drawing API to create the rectangle shape using the drawRoundRectComplex() of the graphics class.
The problems I see with this is that I don't think the drawn rectangle shape can re-draw itself to show the change in height when more or less row of data need to be be displayed.
Another option I have been thinking about is extending the Panel class to create my component, this may be better for handling the height resizing, but I'm not sure it can support the look of this component (the header image and the three rounded corners).
Could anyone give me some advice on what would be the better option for creating this component.
Thanks
Stephen

Actionscript in a Custom Component

Can anyone tell me if you can put actionscript inside of a
custom component? It throws errors anytime I try to do it.
I have a horizontallist component that is being populated
with an itemrenderer which holds an image component. The
horizontallist takes fifteen images and loads them into the
itemrenderers, creating a scrollable image slideshow.
I am trying to get it to check to see if the image loaded
successfully, and if not, either set the visibility of that image
component to false, or remove it.
Here is the code for the horizontallist:
<mx:HorizontalList
id="imageBar"
itemRenderer="listingImage"
height="330"
width="925"
paddingLeft="5"
paddingRight="5"
rollOverColor="#FFFFFF"
selectionColor="#FFFFFF"
>
And the code for the custom component.....
<mx:Canvas
xmlns:mx="
http://www.adobe.com/2006/mxml"
height="320"
width="400"
verticalScrollPolicy="off"
horizontalScrollPolicy="off"
>
<mx:Image
source="
http://www.urladdress.com/idx/rmls/images/resimages/{data.id}_{data.imageNum}.jpg"
height="300" scaleContent="true"
/>
</mx:Canvas>
I'm pretty new to Flex, so any help would be great!

just insert the script tags in the custom component and place
your actionscript within those script tags. So in your case just
insert the following script tags above the image control...
<mx:Script>
<![CDATA[
// actionscript goes here
]]>
</mx:Script>
- Tony

States in a custom component

I am having a problem getting my states to view correctly from a custom component.
I call in the custom component that has states in it, and they do not view correctly.
Here is an example:
The states from my custom component:
<mx:states>
        <mx:State name="state1">
            <mx:RemoveChild target="{formitem3}"/>
            <mx:RemoveChild target="{hbox4}"/>
            <mx:RemoveChild target="{vbox1}"/>
            <mx:RemoveChild target="{panel24}"/>
            <mx:AddChild relativeTo="{hbox3}" position="before">
                <components:SensitivityValue2 variableString="Capital Cost Multiplier" unitsString="" close="currentState=''"/>
            </mx:AddChild>
            <mx:RemoveChild target="{button31}"/>
        </mx:State>
        <mx:State name="state2">
            <mx:RemoveChild target="{formitem3}"/>
            <mx:RemoveChild target="{hbox4}"/>
            <mx:RemoveChild target="{vbox1}"/>
            <mx:RemoveChild target="{panel24}"/>
            <mx:AddChild relativeTo="{hbox5}" position="before">
                <components:SensitivityValue2 variableString="Replacement Cost Multiplier" unitsString="" close="currentState=''"/>
            </mx:AddChild>
            <mx:RemoveChild target="{button1}"/>
        </mx:State>
and here is how I am calling in the custom component to my main application:
<components:MyCustomComp id="customComp" width="100%" height="100%" label="CustomComp"/>

when you switch to a state (by click a button) it should just move some icons down and
insert a panel.
And when you switch back it should just move everything back up and remove the panel.
What does happen is nothing, or an error, or it adds the panel to a strange location.

AddChild Not working in a loop with custom component

Hi,
I have a custom component 'form component'
<?xml version="1.0" encoding="utf-8"?>
<mx:Form xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import flash.net.navigateToURL;
            public var documentName:String;
            public var documentLocation:String;
            public var documentDescription:String;
            public var documentLevel:String;
            private function openLink():void
                var urlRequest:URLRequest=new URLRequest(documentLocation);
                navigateToURL(urlRequest,"_blank");
        ]]>
    </mx:Script>
    <mx:FormItem width="100%" height="100%" paddingRight="10" borderThickness="10">
        <mx:VBox width="100%" cornerRadius="10" borderThickness="2" borderStyle="solid" borderColor="#D5D2D2">
            <mx:ApplicationControlBar width="100%" fillAlphas="[1.0, 0.52]" fillColors="[#FFFFFF, #B3CDD9]">
                <mx:LinkButton id="eachDocumentName" label="Name" click="openLink()" textAlign="left" width="50%" />
                <mx:Label id="eachDocumentLevel" text="Level" textAlign="right" width="50%"/>
            </mx:ApplicationControlBar>
            <mx:Label id="eachDocumentDescription" width="100%" text="Description" paddingTop="5" paddingLeft="10"/>
            <mx:Label height="10" width="100%" />
        </mx:VBox>
    </mx:FormItem>
</mx:Form>
and I Want to add this component inside a VBox for a loop dynamically like
Script Code:
private function showDocuments(event:ResultEvent):void
                var documentList:ArrayCollection=event.result.root.documents.document;
                for(var i:int=0;i<documentList.length;i++)
                    var documentName:String=documentList[i].name.toString();
                    var documentDescription:String=documentList[i].description.toString();
                    var documentLevel:String=documentList[i].level.toString();
                    var documentLocation:String=documentList[i].location.toString();
                    createChildForFilePanel(documentName,documentLevel,documentDescription,documentLocation);
            private function createChildForFilePanel(documentName:String,documentLevel:String,documentDescription:Stri ng,documentLocation:String):void
                    Alert.show("function Called");
                    var documentListing:DocumentListing=new DocumentListing();
                    documentListing.percentWidth=100;
                    documentListing.percentHeight=100;
                    documentListing.eachDocumentName.label=documentName;
                    documentListing.eachDocumentLevel.text=documentLevel;
                    documentListing.eachDocumentDescription.text=documentDescription;
                    documentListing.documentLocation=documentLocation;
                    filePanel.addChild(documentListing);
MX: code
<mx:VBox id="filePanel" label="File Content" width="100%" height="100%" borderThickness="0" >
      </mx:VBox>
This is actually Not working.. Am I doing anything wrong. I have included the component in the namespace..
Thanks In Advance,
Piyush

Its working now. The Solution to it what I found was whatever you are Adding To the Parent Component. The Parent Component should be created in the action script.
Worked for me :-)
Thanks,
Piyush

Access data in custom component.

Hi Everyone,
                I am new to Flex soo pardon me if my questions are quite basic. I have searched a lot before posting here, might be I was not looking in the right direction. Please redirect me to the path that leads to the solution of the problem. I really appreciate any help that I can get.
I'm followiing this video tutorial.
http://www.gotoandlearn.com/play.php?id=100
All was going fine, until the tutor wanted to add custom component in the application. He added the HBox which I couldn't find in Flash Builder 4.6 so I added HGroup instead in my new component. Now when I want to use the data that was fetched in the parent component in custom component it gives me error. Here is the code and their file names.
File: SearchHomeView.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" title="Twitter Search">
    <fx:Declarations>
        
        <s:HTTPService result="onResult(event)" id="service" url="http://search.twitter.com/search.atom?q=adobe">
        </s:HTTPService>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import flash.utils.flash_proxy;
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
            [Bindable]
            private var ac:ArrayCollection;
            private function onResult(event:ResultEvent):void
                ac = event.result.feed.entry as ArrayCollection;
                trace(data);
                trace(ac);
            private function doSearch(event:MouseEvent):void
                //service.url = "http://search.twitter.com/search.atom?q=" + tearch.text;
                service.url = "http://search.twitter.com/search.atom?q=adobe";
                service.send();
        ]]>
    </fx:Script>
    <s:TextInput x="25" y="26" width="146" id="tearch"/>
    <s:Button x="224" y="26" height="33" label="Search" click="doSearch(event)" />
    <s:List dataProvider="{ac}" itemRenderer="tweet" x="25" y="92" width="274" height="278"></s:List>
</s:View>
File: tweet.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark" width="400" height="300">
    <fx:Declarations>
        
    </fx:Declarations>
    <s:Image width="50" height="50" source="{parentDocument.data.link.getItemAt('1').href}">
    </s:Image>
    <s:TextBase width="100%" text="">
    </s:TextBase>
</s:HGroup>
When I use source to be source="{parentDocument.data.link.getItemAt('1').href} ... it removes the error, but displays nothing on the resulting app.
When I use source to be source="{data.link[1].href} ... it gives the error,
Multiple markers at this line:
-1120: Access of undefined property data.
-parentDocument
What needs to be done to use the item renderer right in custom component ? Please tell me the solution to it... I'm stuck on it for quite a few time.
Thanks
Bilal Ahmad

Hello Ravi,
one option is the create a public attribute to share your value note data with other components.
Another option is a function group with two function modules "SET_" and "GET_".
I´m sure one of the webclient UI Gurus here in this forum could share less "dirty" ways with you.
Kind regards
Manfred

Custom component with additional tags

Hi. I need to write complicated custom JSF component.
I know how to write simple custom components, and receive String variables from tag attributes e.g.
https://github.com/devalentino/temp/blob/master/src/main/java/net/monopolyclub/components/component/UserData.java
But now I need to write custom component with additional tags (for example like dataTable and column tags).
How can I write such component? How can I receive collections in my component? How can I work with additional tags in my component.
for example I need something like:
<m:chat>
     <m:tab value="#{UserList}" />
     <m:message value="#{MesageMap}" />
</m:chat>
where UserList - Collection with current users and MessageMap is Map with User as key and message as value.

Iam using pt:ptdata.joincurrcommunitydata
here is some code
<pt:ptdata.joincurrcommunitydata pt:id="menutabsjoin" />
<pt:logic.foreach pt:var="temp2" pt:data="menutabsjoin">
<span class="CommunityPage">
<pt:core.html href="$temp2.url" pt:tag="a">
<pt:core.html pt:tag="img" src="$temp2.img" alt="$temp2.title" border="0" align="absmiddle" height="$temp2.imgheight"      width="$temp2.imgwidth" />
                    <pt:logic.value pt:value="$temp2.title" />
                         </pt:core.html>
                         </span>
                         </pt:logic.foreach>
But the URL that is generated is not having the CommunityID, hence it errors out saying object not found.
Any help would be appreciated?
Thanks
kartik

Adding Visual custom component in spark DataGrid

I am working with flex 4.5. I want to create Gauge component Datagrid.
I am using open source com.betterthantomorrow.components. I have created custom components like this
    <?xml version="1.0" encoding="utf-8"?>
    <s:BorderContainer 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:bttc="com.betterthantomorrow.components.*"
                                               xmlns:gauge="com.betterthantomorrow.components.gauge.*"
                                               xmlns:objects="tekhnia.com.tekhniag.objects.*"
                                               width="30%" height="65" backgroundColor="black" borderColor="black"
                                               creationComplete="init(event)">
              <fx:Declarations>
                        <mx:NumberFormatter precision="1" id="formatter" rounding="nearest" />
              </fx:Declarations>
              <fx:Script>
                        <![CDATA[
                                  import mx.events.FlexEvent;
                                  import mx.messaging.channels.StreamingAMFChannel;
                                  [Bindable]
                                  public var cpuValue:Number;
                                  [Bindable]
                                  public var memoryValue:Number;
                                  [Bindable]
                                  public var diskValue:Number;
                                  [Bindable]
                                  public var mycomp:String;
                                  [Bindable]
                                  public var serverName:String;
                                  [Bindable]
                                  public var statusImage:String;
                                  protected function init(event:FlexEvent):void
                                            var strValues:String;
                                            var strColors:String;
                                            var strAlphas:String;
                                            strColors="0x009900,0xFFFF00,0xDD0000";
                                            strValues="0,50,70,100";
                                            strAlphas=".8,.8,.8"
                                            var values:Array=strValues.split(",");
                                            var colors:Array=strColors.split(",");
                                            var alphas:Array=strAlphas.split(",");
                                            gauge1.setStyle("alertValues",values);
                                            gauge1.setStyle("alertColors",colors);
                                            gauge1.setStyle("alertAlphas",alphas);
                                            gauge2.setStyle("alertValues",values);
                                            gauge2.setStyle("alertColors",colors);
                                            gauge2.setStyle("alertAlphas",alphas);
                                            gauge.setStyle("alertValues",values);
                                            gauge.setStyle("alertColors",colors);
                                            gauge.setStyle("alertAlphas",alphas);
                                            gauge.invalidateDisplayList();
                                            gauge1.invalidateDisplayList();
                                            gauge2.invalidateDisplayList();
                        ]]>
              </fx:Script>
              <s:layout>
                        <s:HorizontalLayout/>
              </s:layout>
              <s:TileGroup width="101" paddingLeft="20" paddingRight="2">
                        <bttc:Gauge id="gauge"
                                                      diameter="50" width="50"
                                                      verticalCenter="0" horizontalCenter="-111"
                                                      minValue="1" maxValue="10" value="{cpuValue}" valueFormatter="{formatter}"
                                                      bigTicks="9" smallTicks="45" showMinMax="false" showValue="false" pointerColor="white"/>
              </s:TileGroup>
              <s:TileGroup width="101" paddingLeft="20" paddingRight="2">
                        <bttc:Gauge id="gauge1"
                                                      diameter="50" width="50"
                                                      verticalCenter="0" horizontalCenter="-111"
                                                      minValue="1" maxValue="10" value="{memoryValue}" valueFormatter="{formatter}"
                                                      bigTicks="9" smallTicks="45" showMinMax="false" showValue="false" pointerColor="white" automationName="T"/>
              </s:TileGroup>
              <s:TileGroup width="101" paddingLeft="20" paddingRight="2">
                        <bttc:Gauge id="gauge2"
                                                      diameter="50" width="50"
                                                      verticalCenter="0" horizontalCenter="-111"
                                                      minValue="1" maxValue="10" value="{diskValue}" valueFormatter="{formatter}"
                                                      bigTicks="9" smallTicks="45" showMinMax="false" showValue="false" pointerColor="white"/>
              </s:TileGroup>
              <s:TileGroup width="40" paddingTop="3">
                        <s:Image source="assets/led/big/{statusImage}" />
                        <s:Label color="white" text="{serverName}" textAlign="center"/>
              </s:TileGroup>
    </s:BorderContainer>
I want to add this component in Datagrid. I have tried a lot on net. I didn't find any help. I read books as well.
Please help me. I found somewhere on the site one liner answer : write grid renderer. I don't how to write grid renderer and pass the data values to it.
I will be more thank full someone gives me pointer to sample grid renderer or code.

What's the flow here?
Do you want to pop-up a JSP in a window to prompt the user for extra information before submitting the check-in form? If so, you need a custom component to override the resource that draws the "submit" button on the form.
Or, do you want to execute something like a web service during the check-in process? If so, do a validateStandard filter. See the 'DynamicPrefix' comonent in the howtocomponents:
http://www.oracle.com/technetwork/middleware/content-management/index-092832.html

Passing function to a custom component

Hey so I have button that is in a custom component, say:
<mx:HBox width="200" height="72" xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Button width="72" height="72" styleName="{buttonStyleName}"/>
    <mx:Text text="{description}" width="100%" height="100%" textAlign="justify"/>
</mx:HBox>
And on another file i use it simply like this:
<local:LabelComponent buttonStyleName="componentRssButton" />
However, I want the button on my custom component draggable, so I would like to pass a mouseMove handler but i could not find a way to do that. Of course that easiest way is to have my whole custom component draggable like so:
<local:LabelComponent mouseMove="componentRssButton" />
but i want the button in the custom component the only one draggable.
Thanks.

it's wired to pass a function.
EventListener should be the way to go.
give your button an id, say btn1
<mx:Button id='btn1' width="72" height="72" styleName="{buttonStyleName}"/>
and in your code
<local:LabelComponent id='myComp' creationComplete='makeButtonDraggable()' buttonStyleName="componentRssButton" />
<script>
function makeButtonDraggable():vd
     myComp.btn1.addEventListener(mouseMove, componentRssButton);

Adding Parameters (Inspectable) to a Custom Component?

Hi --
I am attempting to build a custom component just to learn a
little more
about AS 3.0. I can not figure out where / how in my package
declarations I
can "expose" parameters that will be visible to the user in
the Flash IDE
when using my component.
Thanks
Rich

Hi Richard ,
there is a pretty cool livedoc about component creation in as
3 :
http://www.adobe.com/devnet/flash/articles/creating_as3_components.html
setting up the inspectables is the same as it was in as2
i am doing it in my controller :
[as]
package mat3d.yugopReel {
import flash.display.*;
import flash.text.TextField;
import flash.events.Event;
import flash.events.MouseEvent;
import fl.core.InvalidationType;
import fl.core.UIComponent;
import fl.data.DataProvider;
import fl.events.ComponentEvent;
import fl.containers.UILoader;
import mat3d.yugopReel.model.MainModel;
public class ScrollReel extends UIComponent {
public var dataProvider : DataProvider;
public var RIG : Sprite;
public var LeftBTN : Sprite;
public var RightBTN : Sprite;
public var myModel : mat3d.yugopReel.model.MainModel;
private var _background : Sprite;
private var _tf : TextField;
public var _AutoScroll : Boolean;
public var _StepControl : Boolean;
private var _FileType : String;
public var _File : String;
private var _text : String;
public var _ScrollInit : String;
public var _StepBehaviour : String;
public var _PictureSize : String;
public var _ScrollTime : Number;
public var abstand_x : Number = 90.3;
public var abstand_y : Number = 125;
public var ConfigData : Array;
public function ScrollReel() {
super();
alpha = 0;
myModel = new mat3d.yugopReel.model.MainModel(this);
>> start get set INSPECTABLES
AutoScroll start
public function get AutoScroll() : Boolean {
return _AutoScroll;
myPropInit.AutoScroll = true;
public function set AutoScroll(value : Boolean) : void {
_AutoScroll = value;
myPropInit.AutoScroll = true;
[Inspectable(name="AutoScroll",defaultValue="false",type="Boolean")]
AutoScroll end
FileType start
public function get FileType() : String {
return _FileType;
myPropInit.FileType = true;
public function set FileType(value : String) : void {
_FileType = value;
myPropInit.FileType = true;
[Inspectable(name="FileType",defaultValue="XML",type="String")]
FileType end
Filestart
public function get File() : String {
return _File;
myPropInit.File = true;
public function set File(value : String) : void {
_File = value;
myPropInit.File = true;
init();
[Inspectable(name="File",defaultValue="",type="String")]
File end
Width start
public function get Width() : Number {
return width;
myPropInit.Width = true;
public function set Width(value : Number) : void {
width = value;
//trace("setWidth >>>" + width);
myPropInit.Width = true;
[Inspectable(name="Width",defaultValue="250",type="Number")]
Width end
Height start
public function get Height() : Number {
return height;
myPropInit.Height = true;
public function set Height(value : Number) : void {
height = value;
trace("setHeight >>>" + height);
myPropInit.Height = true;
[Inspectable(name="Height",defaultValue="50",type="Number")]
Height end
ScrollTime start
public function get ScrollTime() : Number {
return _ScrollTime;
myPropInit.ScrollTime = true;
public function set ScrollTime(value : Number) : void {
_ScrollTime = value;
myPropInit.ScrollTime = true;
[Inspectable(name="ScrollTime",defaultValue="0.2",type="Number")]
ScrollTime end
ScrollInit start
public function get ScrollInit() : String {
return _ScrollInit;
myPropInit.ScrollInit = true;
public function set ScrollInit(value : String) : void {
_ScrollInit = value;
myPropInit.ScrollInit = true;
[Inspectable(name="ScrollInit",defaultValue="_x",type="String")]
ScrollInit end
PicSize start
public function get PictureRatio() : String {
return _PictureSize;
myPropInit.PictureSize = true;
public function set PictureRatio(value : String) : void {
_PictureSize = value;
myPropInit.PictureSize = true;
[Inspectable(name="PictureSize",defaultValue="",type="String")]
PictureSize end
Step Controll start
public function get StepControl() : Boolean {
return _StepControl;
myPropInit.StepControl = true;
public function set StepControl(value : Boolean) : void {
_StepControl = value;
myPropInit.StepControl = true;
[Inspectable(name="StepControl",defaultValue="false",type="Boolean")]
Step Controll end
Step Behaviour start
public function get StepBehaviour() : String {
return _StepBehaviour;
myPropInit.StepBehaviour = true;
public function set StepBehaviour(value : String) : void {
_StepBehaviour = value;
myPropInit.StepBehaviour = true;
[Inspectable(name="StepBehaviour",defaultValue="easeInOutQuad",type="String")]
Step Behaviour end
DataProviderstart
public function get DataProvider() : Object {
return DataProvider;
public function set DataProvider(value : Object) : void {
DataProvider = value;
myPropInit.StepBehaviour = true;
[Inspectable(name="DataProvider",defaultValue="",type="Collection")]
DataProvider end
>> end get set INSPECTABLES
private function init() : void {
myModel .handleData();
public override function toString() : String {
return super.toString();
[/as]
bw
matthias

How to handle children of custom component

Hi,
does anybody know an example of how to develop a custom UIComponent which is able to render any kind of child? For example:
<x:mycomponent columns="3" valu="#{list-of-items} var="item">
<h:graphicImage url="#{item.url}/>
<h:selectBooleanCheckbox />
</x:mycomponent>
The result should be a table with 3 columns where each table-cell contains the result of the rendering process of its children, in this case a picture with a checkbox.
I have tried it and managed to get the correct html-result. But I do not get the input of the checkbox if the above code snippet is a part of a html-form.
So what I realy like to have is the sourcecode of some kind of UIComponent which does something like this.
Kind Regards,
Tobias

Thanks for the swift reply Craig
My custom component has 3 elements hence the currentTarget
could be either the folder icon, the status icon or the text field.
Is there some way of finding the parent of which ever of
these sub items of the cusom component is clicked?
Here is the code for my custom component
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="
http://www.adobe.com/2006/mxml"
width="240" height="60" cornerRadius="15" borderStyle="none"
backgroundColor="#ffffff" themeColor="#ff0000">
<mx:Script>
<![CDATA[
[Bindable]
public var studentName:String ="Student Name";
]]>
</mx:Script>
<mx:Text x="64" y="24" text="{studentName}" />
<mx:SWFLoader x="10" y="10" width="32" height="24"
source="@Embed('assets/folderIcon.swf')" />
<mx:SWFLoader x="19" y="42" width="11" height="11"
source="@Embed('assets/cfStatusIcon.swf')" />
</mx:Canvas>

Navigation from within a custom component ???

Hi All
I am working on a new project in Flex 4 and i have a Viewstack on my main page. Then i have 6 custom components in the viewstack, the first being the home page. In this homepage custom component i have linkbuttons which i want the user to click on to navigate the viewstack ..
So what would be the best way to do this ?
                         <fx:Script>
                              <![CDATA[
                                   ]]>
                         </fx:Script>
               <mx:ViewStack id="vs" width="800" height="1000">
                    <s:NavigatorContent width="100%">
                         <v:VHome id="vHome" />
                                        <v:VHome id="vAbout" />
                                        <v:VHome id="vShop" />
                                        <v:VHome id="vProducts" />
                                        <v:VHome id="vSupport" />
                                        <v:VHome id="vContact" />
                         </s:NavigatorContent>
               </mx:ViewStack>
<s:Group 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="100%">
     <s:layout>
          <s:VerticalLayout />
     </s:layout>
     <fx:Declarations>
          
     </fx:Declarations>
          <mx:Spacer height="10" />
          <s:Panel title="Welcome" width="100%">
          </s:Panel>
          <s:HGroup>
               <s:Panel width="397" height="200">
                    <MX:LinkButton />
               </s:Panel>
               <s:Panel width="397" height="200">
                    <MX:LinkButton />
               </s:Panel>
          </s:HGroup>
          <s:HGroup>
               <s:Panel width="397" height="200">
                    <MX:LinkButton />
               </s:Panel>
               <s:Panel width="397" height="200">
                    <MX:LinkButton />
               </s:Panel>
          </s:HGroup>
          <s:HGroup>
               <s:Panel width="397" height="200">
                    <MX:LinkButton />
               </s:Panel>
               <s:Panel width="397" height="200" >
                    <MX:LinkButton />
               </s:Panel>
          </s:HGroup>
</s:Group>
Many Thanks

If I am understanding this correctly, you have three choices.
1. Do something like ViewStack.selectedIndex(id of tab in viewstack), but not sure if selectedIndex is correct but whatever the method name is.
2. Fire an event and set up listeners
3. Go with a framework and use its notifications or event system
If this is a production app I suggest fighting the urge to go the easy route and use a framework as before you know it you will in the middle of spaghetti code.

Button in custom component not showing

I made a very simple custom component with a TextField and Button but when I add multiple instances of it to a Layout, only the first Button shows up while the other show only when I focus the corresponding TextField. I'm quite new to fx and I'm not sure I did everything correctly but I don't see any obvious error in my code.
The component:
public class TestComponent extends BorderPane {
    @FXML
    private Button browseButton;
    @FXML
    private TextField textField;
    public TestComponent() {
        FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("TestComponent.fxml"));
        fxmlLoader.setRoot(this);
        fxmlLoader.setController(this);
        try {
            fxmlLoader.load();
        } catch (IOException exception) {
            throw new RuntimeException(exception);
The fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.HBox?>
<fx:root type="javafx.scene.layout.BorderPane" xmlns:fx="http://javafx.com/fxml/1"
    xmlns="http://javafx.com/javafx/2.2">
    <center>
        <TextField fx:id="textField" prefWidth="200.0" />
    </center>
    <right>
        <Button fx:id="browseButton" mnemonicParsing="false" maxHeight="-Infinity"
            minHeight="-Infinity" prefHeight="${textField.height}" text="Browse"
            textAlignment="CENTER" />
    </right>
</fx:root>
and the test code
@Override
    public void start(Stage primaryStage) {
        VBox box = new VBox(5);
        box.setPadding(new Insets(5));
        TestComponent a = new TestComponent();
        TestComponent b = new TestComponent();
        TestComponent c = new TestComponent();
        box.getChildren().addAll(a, b, c);
        Scene scene = new Scene(box);
        primaryStage.setScene(scene);
        primaryStage.show();
I'm running on Ubuntu with jdk-8-ea-bin-b111-linux-i586-10_oct_2013. I tested with jdk 1.7.0_40 and the buttons don't show.
I'd include screenshots but the button to add images is disabled.
Thanks for the help

The issue is with the bind definition in the FXML, if you remove that definition, the buttons will display.
   prefHeight="${textField.height}"
I think the binding is working, but when there is some kind of error (bug) in the layout process such that the scene is not automatically laid out correctly when the binding occurs.
You can get exactly the same behaviour by removing the binding definition in FXML and placing it in code after the load.
            browseButton.prefHeightProperty().bind(textField.heightProperty());
When the scene is initially displayed, the height of all of the text fields is 0, as they have not been laid out yet, and the browser button prefHeight gets set to 0 through the binding.
That's OK and expected.
Then the scene is shown and a layout pass occurs, which sets the height of the text fields to 26 and the prefHeight of all of the browser buttons adjust correctly.
That's also OK and expected.
Next the height of one of the buttons is adjusted via a layout pass.
That's also OK and expected.
But the height of the other buttons is not adjusted to match their preferred height (probably because a layout pass is not run on them).
That is not OK and not expected (and I think a bug).
If you manually trigger a layout pass on one of the components which did not render completely, the button will be displayed - but that should not be necessary.
You can file a bug against the Runtime project at:
   https://javafx-jira.kenai.com/
You will need to sign up at the link on the login page, but anybody can sign up and log a bug.
Here is some sample code.
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class ComponentTestApp extends Application {
@Override
public void start(Stage primaryStage) {
    VBox box = new VBox(5);
    box.setPadding(new Insets(5));
    TestComponent a = new TestComponent();
    TestComponent b = new TestComponent();
    TestComponent c = new TestComponent();
    box.getChildren().addAll(a, b, c);
    Scene scene = new Scene(box);
    primaryStage.setScene(scene);
    primaryStage.show();
    b.requestLayout(); // I don't understand why this call is necessary -> looks like a bug to me . . .
public static void main(String[] args) {
    launch(args);
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import java.io.IOException;
public class TestComponent extends BorderPane {
    private static int nextComponentNum = 1;
    private final int componentNum = nextComponentNum;
    @FXML
    private TextField textField;
    @FXML
    private Button browseButton;
    public TestComponent() {
      nextComponentNum++;
        FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("TestComponent.fxml"));
        fxmlLoader.setRoot(this);
        fxmlLoader.setController(this);
        try {
            fxmlLoader.load();
            browseButton.prefHeightProperty().bind(textField.heightProperty());
            System.out.println(componentNum + " " + browseButton + " prefHeight " + browseButton.getPrefHeight());
            textField.heightProperty().addListener(new ChangeListener<Number>() {
              @Override
              public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
                System.out.println(componentNum + " " + textField + " height " + newValue);
            browseButton.prefHeightProperty().addListener(new ChangeListener<Number>() {
              @Override
              public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
                System.out.println(componentNum + " " + browseButton + " prefHeight " + newValue);
            browseButton.heightProperty().addListener(new ChangeListener<Number>() {
              @Override
              public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
                System.out.println(componentNum + " " + browseButton + " height " + newValue);
                new Exception("Not a real exception - just a debugging stack trace").printStackTrace();
        } catch (IOException exception) {
            throw new RuntimeException(exception);
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.HBox?>
<fx:root type="javafx.scene.layout.BorderPane" xmlns:fx="http://javafx.com/fxml/1"
         xmlns="http://javafx.com/javafx/2.2">
    <center>
        <TextField fx:id="textField" prefWidth="200.0" />
    </center>
    <right>
        <Button fx:id="browseButton" mnemonicParsing="false" maxHeight="-Infinity"
                minHeight="-Infinity" text="Browse"
                textAlignment="CENTER" />
        
                
                
    </right>
</fx:root>
Here is the output of the sample code:
1 Button[id=browseButton, styleClass=button]'Browse' prefHeight 0.0
2 Button[id=browseButton, styleClass=button]'Browse' prefHeight 0.0
3 Button[id=browseButton, styleClass=button]'Browse' prefHeight 0.0
1 Button[id=browseButton, styleClass=button]'Browse' prefHeight 26.0
1 TextField[id=textField, styleClass=text-input text-field] height 26.0
2 Button[id=browseButton, styleClass=button]'Browse' prefHeight 26.0
2 TextField[id=textField, styleClass=text-input text-field] height 26.0
3 Button[id=browseButton, styleClass=button]'Browse' prefHeight 26.0
3 TextField[id=textField, styleClass=text-input text-field] height 26.0
2 Button[id=browseButton, styleClass=button]'Browse' height 26.0
java.lang.Exception: Not a real exception - just a debugging stack trace
at testcomponent.TestComponent$3.changed(TestComponent.java:69)
at testcomponent.TestComponent$3.changed(TestComponent.java:65)
at com.sun.javafx.binding.ExpressionHelper$Generic.fireValueChangedEvent(ExpressionHelper.java:347)
at com.sun.javafx.binding.ExpressionHelper.fireValueChangedEvent(ExpressionHelper.java:80)
at javafx.beans.property.ReadOnlyDoubleWrapper$ReadOnlyPropertyImpl.fireValueChangedEvent(ReadOnlyDoubleWrapper.java:177)
at javafx.beans.property.ReadOnlyDoubleWrapper.fireValueChangedEvent(ReadOnlyDoubleWrapper.java:143)
at javafx.beans.property.DoublePropertyBase.markInvalid(DoublePropertyBase.java:113)
at javafx.beans.property.DoublePropertyBase.set(DoublePropertyBase.java:146)
at javafx.scene.layout.Region.setHeight(Region.java:915)
at javafx.scene.layout.Region.resize(Region.java:1362)
at javafx.scene.layout.BorderPane.layoutChildren(BorderPane.java:583)
at javafx.scene.Parent.layout(Parent.java:1063)
at javafx.scene.Parent.layout(Parent.java:1069)
at javafx.scene.Scene.doLayoutPass(Scene.java:564)
at javafx.scene.Scene$ScenePulseListener.pulse(Scene.java:2341)
at com.sun.javafx.tk.Toolkit.firePulse(Toolkit.java:329)
at com.sun.javafx.tk.quantum.QuantumToolkit.pulse(QuantumToolkit.java:479)
at com.sun.javafx.tk.quantum.QuantumToolkit.pulse(QuantumToolkit.java:460)
at com.sun.javafx.tk.quantum.QuantumToolkit$13.run(QuantumToolkit.java:327)
at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)
java.lang.Exception: Not a real exception - just a debugging stack trace
at testcomponent.TestComponent$3.changed(TestComponent.java:69)
at testcomponent.TestComponent$3.changed(TestComponent.java:65)
at com.sun.javafx.binding.ExpressionHelper$Generic.fireValueChangedEvent(ExpressionHelper.java:347)
at com.sun.javafx.binding.ExpressionHelper.fireValueChangedEvent(ExpressionHelper.java:80)
at javafx.beans.property.ReadOnlyDoubleWrapper$ReadOnlyPropertyImpl.fireValueChangedEvent(ReadOnlyDoubleWrapper.java:177)
at javafx.beans.property.ReadOnlyDoubleWrapper.fireValueChangedEvent(ReadOnlyDoubleWrapper.java:143)
at javafx.beans.property.DoublePropertyBase.markInvalid(DoublePropertyBase.java:113)
at javafx.beans.property.DoublePropertyBase.set(DoublePropertyBase.java:146)
at javafx.scene.layout.Region.setHeight(Region.java:915)
at javafx.scene.layout.Region.resize(Region.java:1362)
at javafx.scene.layout.BorderPane.layoutChildren(BorderPane.java:583)
at javafx.scene.Parent.layout(Parent.java:1063)
at javafx.scene.Parent.layout(Parent.java:1069)
at javafx.scene.Scene.doLayoutPass(Scene.java:564)
at javafx.scene.Scene$ScenePulseListener.pulse(Scene.java:2341)
at com.sun.javafx.tk.Toolkit.firePulse(Toolkit.java:329)
at com.sun.javafx.tk.quantum.QuantumToolkit.pulse(QuantumToolkit.java:479)
at com.sun.javafx.tk.quantum.QuantumToolkit.pulse(QuantumToolkit.java:460)
at com.sun.javafx.tk.quantum.QuantumToolkit$13.run(QuantumToolkit.java:327)
at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)
1 Button[id=browseButton, styleClass=button]'Browse' height 26.0

Autosizing Height in custom component

Similar Messages

Maybe you are looking for