How do I tie a custom-component to a class?

In flash there's this great way of seperating code from
content: In the properties menu of a movieclip in your library, you
can assign a class name to the movie. So something I very regularly
do is:
class MyMovieClip extends MovieClip{
//etc..
so I'd have all the code that manages my movies nicely tucked
away in some .as files, no code in the fla. That's the way I like
it.
So I was wondering if you can do a similar thing in Flex. I
most definitely don't want the code for my application in the .mxml
file, I actually want to inherit the Application class. Similarly,
I'd like to inherit the Canvas class, yet have the nice gui for
dragging all the visuall elements in place. Is there a way?
Regard, and thanks in advance,
Karel

If you look in the library panel, there should be an entry for your custom component - probably something like CustomComponent1.mxml. Drag this out onto the artboard to create a new instance of the component.
In the case of a custom component, you can't change much on the second instance. If you have something like a text input skin though, you can change the text it is displaying for each instance.
We are working on making this sort of thing easier in the future, so stay tuned

Similar Messages

How Do I Link to Custom Component States From Scrolling Content Buttons?

Hi there, I'm in need of some help as i've got a deadline to meet within the next few weeks and im stuck!
Basically what I've done is i've made a scrolling content lists, containing about 10 products in each one, my plan was to turn each product into a button so that users could click on that product, and take them to a new page containing more detailed information on that product; when they've finished looking at that product they can click a button to return them to the list they were on previously. However I can't just make a brand new state for each product as there is a limit to 20 states, and I will need around 50 of them.
So, from what i've read I will need to create custom components. the only trouble with doing this is that I can't link to the custom component on a different main timeline state (I dont get the option to link to the states of the custom component).
If i put the image of the detailed product into the scroll panel I am able to link to it, however, it's inside the scrolling content and it just scrolls around and stuff which isn't what I want; as it makes it look messy.
- Basically I just need to link from the buttons in the scrolling list, to a more detailed page for that product. Then be able to return to the list using a button.
If anybody has any input on how to achieve this, please help me out. Starting to panic now as this needs to be finished before september :s
Btw i'm happy to share my .fxp file it that helps.
Thanks alot, Hoping for some helpful replies on this topic
- Tom

Hi Tom,
Adding this back here to share my wireframe with the community.
Have put a quick .fxp together based on the 'product' section of your project.
Take a look at how the product lists are linking into the product detail pages within their custom components.
Using this model you should be able to expand out to infinite product detail states. If a particular product area has more than the maximum allowed states, just start a new custom component (part 2 for that product section).
Let me know if you have any questions. Hope this sets you on a path to getting your project complete. It's looking nice.
Tanya

How can I make a custom component focusable?

Hi all,
I'm using a custom made component that consists of a JLabel
and a JTextField. I want to make this component focusable,
and when it's in focus I want the JTextField to have the
focus so that the user can start typing immediately.
I've looked at the java tutorial
(http://java.sun.com/docs/books/tutorial/uiswing/misc/focus.html#focusable).
When my component gets the focus I request the focus to the
JTextField. The problem is: whenever i check if my custom
component has the focus, it hasn't because JTextField has it
(the focus, i mean :-) ) Which isn't strange i think, but
how can i solve this problem?

I want to make this component focusable, and when it's in focus I want the JTextField to have the focus
The problem is: whenever i check if my custom component has the focus, it hasn't because JTextField has it (the focus, i mean :-) So whats the problem the textField has focus as desired.
You don't need to make the containing panel focusable in order for the text field to receive focus. The FocusManager is smart enough to place focus on the first focusable component contained in the panel. If you make the panel focusable then you will need to use the tab key twice, once to move focus to the panel and a second time to move focus to the text field.

How to use a flex custom component in an AS3 Class?

Our software team has been developing flash applications using AS3 (via the FlashDevelop IDE and the free Flex SDK). Recently, some members of the team started exploring FlexBuilder and Flex (wow... why did we wait so long?). The problem is that some folks continue to develop using pure Action Script 3 (FlashDevelop) while others are creating custom components in FlexBuilder.
How do the AS3 developers use the Flex Custom components built in FlexBuilder in their AS3 Applications?

SwapnilVJ,
Your suggestions enabled me to make progress, but I'm still having a problem. Based on you suggestion, I learned how to make a swc using Flex Builder. I successfully added the swc to the lib resource in my AS3 project (FlashDevelop). I was able to instantiate one of my new components (code hinting even picked it up from the lib).
When I run my app, my component is not visible. I can trace properties of it and the values are correct. Any thought why I might not be seeing my custom component?
package trainer.games.board.MatchThree {
import flash.display.Sprite;
public class Test extends Sprite{
private var cp:MatchingGameControlPanel; // <<< this is my swc custom component created in Flex
public function Test() {
   cp = new MatchingGameControlPanel();
   cp.visible = true;
   addChild(cp);
   trace("width: ",cp.width); // <<< works and displays valid data for the component.

How do I reuse a custom component in Flash Catalyst?

All-
I'm sure this is easy, I simply can't figure it out. I've created a custom component in Flash Catalyst with two states, open and closed. I'd like to reuse this component in my app with different text assest. How is this done? Duplicating the component isn't available in this version...do I need to recreate the whole thing with different text?
Cheers,
`me

If you look in the library panel, there should be an entry for your custom component - probably something like CustomComponent1.mxml. Drag this out onto the artboard to create a new instance of the component.
In the case of a custom component, you can't change much on the second instance. If you have something like a text input skin though, you can change the text it is displaying for each instance.
We are working on making this sort of thing easier in the future, so stay tuned

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>

How do I automate a custom component not implementing UIComponent?

I have tried using Adobe's instructions for automating custom components by creating a delegate class to use as a mixin, but
1) the super() statement in the delegate of the constructor is not recognized by the compiler,
2) I am not able to use a DisplayObject as an argument to init(),
3) I am not able to return the custom component as a IAutomationObject from the parent component's getAutomationChildAt method.
Is it simply not possible to automate a custom component not implementing UIComponent?

If you look in the library panel, there should be an entry for your custom component - probably something like CustomComponent1.mxml. Drag this out onto the artboard to create a new instance of the component.
In the case of a custom component, you can't change much on the second instance. If you have something like a text input skin though, you can change the text it is displaying for each instance.
We are working on making this sort of thing easier in the future, so stay tuned

How to manage focus in custom component

Hallo. As you know some flex components have native focus, like buttons, textinput etc.. I have created a custom component which is a borderContainer.. As you know, by default, if user press TAB my BorderContainer will never receive the focus.. I tryied to set some property like setFocus() and tabFobusEnabled to true but i still have some focus problems with my borderContainer .. It is like my App knows that my Custom component is not a native component.. Is there a way for my component to receive focus without problems??.. Which is the best way for doing that??
Thx a lot
Max

Components must implement IFocusManagerComponent in order to receive focus.

How do I duplicate a custom component w/minor change?

I want to use the same custom component created in Flex in Xcelsius with a slight modification from the original, but the Add on Manager is saying it is a duplicate. What do I need to change in the code to resolve this?

i was always having the same issue before
1. change the class name into the Flex Code
2. DONT copy paste the Add on Manager FIle, XLP,,, you have to create a new one :)... this is the idea
3. give a new name into the Add on Manager.
thanks
Amr

How do you create a Custom Component?

I've made use of a few custom components available on the web
(IE. a custom fire component from gskinner.com) which made me
realize I haven't come across any way to make my own components. I
don't have anything particular in mind at this time, but I can see
it as an important tool in generating standard re-useable effects.
Anyone know of the basic process?

Dear Alberto,
Check this post.
Might help.
PCD content of Netweaver 7.0 available in Netweaver 7.3
Kind Regards
/Ricardo Quintas

How to get change a GUI component from another class?

Hi there,
I'm currently trying to change a GUI component in my 'Application' class from my 'Dice' class.
So the Application class sets up some GUI including a JLabel that initially displays "Change".
The 'Dice' class contains the ActionPerformed() method for when the 'Change' button (made from Application class) is clicked.
And it returns an 'int' between 1 and 6.
Now I want to set this number back int he JLabel from the Application class.
APPLICATION CLASS
import javax.swing.*;
import java.awt.*;
import java.util.Random;
import java.awt.event.*;
public class Application extends JFrame implements ActionListener{
     public JPanel rollDicePanel = new JPanel();
     public JLabel dice = new JLabel("Loser");
     public Container contentPane = getContentPane();
     public JButton button = new JButton("Change");
     public Dice diceClass = new Dice();
     public Application() {}
     public static void main(String[] args)
          Application application = new Application();
          application.addGUIComponents();
     public void addGUIComponents()
          contentPane.setLayout(new BorderLayout());
          rollDicePanel.add(dice);
        button.addActionListener(diceClass);
        contentPane.add(rollDicePanel, BorderLayout.SOUTH);
        contentPane.add(button,BorderLayout.NORTH);
          this.setSize(460, 655);
          this.setVisible(true);
          this.setResizable(false);
     public void changeDice()
          dice.setText("Hello");
     public void actionPerformed(ActionEvent e) {}
}DICE
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
public class Dice implements ActionListener
     public Dice() {}
     public void actionPerformed(ActionEvent e)
          //super.actionPerformed(e);
          String event = e.getActionCommand();
          if(event.equals("Change"))
               System.out.println("Will be about to change the 'dice' label");
               Application application = new Application();
               application.dice.setText("Hello");
}

It's all about references, baby. The Dice object needs a way to communicate with the Application object, and so Dice needs a reference to Application. There are many ways to pass this. In my example I pass the application object directly to Dice, but a better way would use interfaces and some indirection. Look up the Observer pattern for a better way to do this that scales much better than my brute-force approach.
import javax.swing.*;
import java.awt.*;
public class Application extends JFrame // *** implements ActionListener
    // *** make all of these fields private ***
    private JPanel rollDicePanel = new JPanel();
    private JLabel dice = new JLabel("Loser");
    private Container contentPane = getContentPane();
    private JButton button = new JButton("Change");
    // *** pass a reference to your application ("this")
    // *** to your Dice object:
    private Dice diceClass = new Dice(this);
    public Application()
    public static void main(String[] args)
        Application application = new Application();
        application.addGUIComponents();
    public void addGUIComponents()
        contentPane.setLayout(new BorderLayout());
        rollDicePanel.add(dice);
        button.addActionListener(diceClass);
        contentPane.add(rollDicePanel, BorderLayout.SOUTH);
        contentPane.add(button, BorderLayout.NORTH);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setPreferredSize(new Dimension(460, 655));
        pack();
        setLocationRelativeTo(null);
        setVisible(true);
        setResizable(false);
    // *** I'm not sure what this is supposed to be doing, so I commented it out.
    //public void changeDice()
        //dice.setText("Hello");
    // *** ditto. I strongly dislike making a GUI class implement ActionListeenr
    //public void actionPerformed(ActionEvent e)
    // *** here's the public method that the Dice object calls
    public void setTextDiceLabel(String text)
        dice.setText(text);
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
public class Dice implements ActionListener
    // *** have a variable that holds a reference to your application object
    private Application application;
    private boolean hello = true;
    public Dice(Application application)
        // *** get that reference via a constructor parameter (one way to do this)
        this.application = application;
    public void actionPerformed(ActionEvent e)
        String event = e.getActionCommand();
        if (event.equals("Change"))
            System.out.println("Will be about to change the 'dice' label");
            if (hello)
                // *** call the application's public method
                application.setTextDiceLabel("Hello");
            else
                application.setTextDiceLabel("Goodbye");
            hello = !hello;
            //Application application = new Application();
            //application.dice.setText("Hello");
}

How to set the default focus component using FocusTraversalPolicy class??

hi all...
I have a JPanel, of which setFocusCycleRoot() has been made true. I am trying to make sure that whenever I open this panel, the first JTextField must have the focus.
the problem is that I have to hit the tab key once, ay satrtuptime. after that all works fine. Kindly rell me a way to eliminate this first-time tab key hitting.
please note that I have extended FocusTraversalPolicy class and have defined all its methods accordingly....
thanx...

try this at the end of your constructor:
myTextField.requestFocusInWindow();
it works in my login panel that wants to focus the second password field after i added the panel to the internal frame.

Custom component/tag class: ---which setters/getters do what?

Hi
I'm trying to create a custom component, but, there is a major concept that I do not understand...
---What are the setters/getters in the "component" class used for?...
---What are the setters/getters in the "tag" class used for?
Another way of asking is...
---Which setters/getters are used simply to keep track of attribute name/id/key?
---Which setters and getters refer to the actual objects that the attribute names point to?
The reason for my confusion is that nearly all "custom component" examples I've seen thus far, utilize attributes that point to "String" objects... (i.e., as opposed to ArrayList, HashMap, etc)...
This makes it difficult for me to distinguish whether the String values in the getters/setters are referring to the String name/"id" of the attribute...or, the String "value" of the attribute...
I have not been able to verify how I should code the getter/setters (and type casts) for other kinds of objects like ArrayLists, HashMaps, etc
For example, a typical logic mechanism Ive seen in the custom "tag" examples is as follows...
in a "tag" class...
        if( tabledata != null )
            if (isValueReference (tabledata))
                FacesContext context = FacesContext.getCurrentInstance ();
                Application app = context.getApplication ();
                ValueBinding vb = app.createValueBinding (tabledata);
                component.setValueBinding ("tabledata", vb);
            else
                component.getAttributes ().put ("tabledata", tabledata);
in the "component" class...
    public void setTabledata (List tabledata)
        this.tabledata = tabledata;
    public List getTabledata ()
        if(null != tabledata)
            return tabledata;
        ValueBinding _vb = getValueBinding ("tabledata");
        if(_vb != null)
            return (List)_vb.getValue (getFacesContext ());
        else
            return null;
    }...considering the above code,
---when/where should the "tabledata" variable be referring the "name/id" of the attribute?...
---when/where should the "tabledata" variable be referring to the "value" of the attribute?...
...as, I need to change the type casting to adjust to what it should be...
***NOTE: This is one error that I'm getting, and I believe it is because I do not understand how getter/setter is used in "component" and "tag" classe, i.e., :
"org.apache.jasper.JasperException: jsp.error.beans.property.conversion
     org.apache.jasper.runtime.JspRuntimeLibrary.getValueFromPropertyEditorManager(JspRuntimeLibrary.java:885)"...
Thanks for any help on this!
sd

The "tabledata" variable always refers the local value of the attribute.
When using a value binding to some backing bean,
the local value is null and the model value is owned by the bean.
You don't need any casting in the tag class nor the component class.
The setters/getters in the component class specify the type of the attributes.
Conversion from/to String to/from the type is done automatically if possible.
When the automatic conversion is impossible, you should specify f:converter
for the attribute.

Scrolling a custom Component (e.g. JPanel) with overridden paint(Graphic g)

Hi.
I’m creating an application for modelling advanced electrical systems in a house. Until now I have focused on the custom canvas using Java2D to draw my model. I can move the model components around, draw lines between them, and so on.
But now I want to implement a JScrollPane to be able to scroll a large model. I’m currently using a custom JPanel with a complete override of the paint(Graphic g) method.
Screen-shot of what I want to scroll:
http://pchome.grm.hia.no/~aalbre99/ScreenShot.png
Just adding my custom JPanel to a JScrollPane will obviously not work, since the paint(Graphic g) method for the JPanel would not be used any more, since the JScrollPane now has to analyze which components inside the container (JPanel) to paint.
So my question is therefore: How do you scroll a custom Component (e.g. JPanel) where the paint(Graphic g) method is totally overridden.
I believe the I have to paint on a JViewport instructing the JScrollPane my self, but how? Or is there another solution to the problem?
Thanks in advance for any suggestions.
Aleksander.

I�m currently using a custom JPanel with a complete override of the paint(Graphic g) method. Althought this isn't your problem, you should be overriding the paintComponent(..) method, not the paint(..) method.
But now I want to implement a JScrollPane to be able to scroll a large model.When you create a custom component to do custom painting then you are responsible for determining the preferredSize of the component. So, you need to override the getPreferredSize(...) method to return the preferredSize of your component. Then scrolling will happen automatically when the component is added to a scrollPane.

Create complex custom component

Hi everyone!
I'm trying to create my own custom component in JSF. However I have several questions :
- It is not mandatory to create a renderer class, right ? the component can draw itself ?
- How can I create a custom component which would have several "values" inside ? for example let us supppose I want to create a custom JSF component to enter a IBAN. The IBAN is divided into several parts : BBAN, country code, key, Bank adresse,... but any tutorial I've found explain how to create a input component with only one simple value (for example the classical "CreditCardInputComponent").
Josselin

Hi,
did you find a solution for your "composite" component problem?
I am also trying to create a custom component that contains several standard jsf components such as HtmlCommandLink and HtmlInputText.
I build all the standard components within my component programmatically using things like:
HtmlCommandLink link = (HtmlCommandLink) application.createComponent(HtmlCommandLink.COMPONENT_TYPE);
Also at the beginning of the encodeBegin I clear all children from my custom component using getChildren().clear()
and rerender the component based on my new internal model which I updated during the previous decoding of my component.
As a simple jsf custom tag it works ok, however, I am facing deep problems with action events as soon as I use the component within a jsf HtmlDataTable tag.
Am I missing something here?
Any ideas? Help is really really appreciated. This different behavior in different contexts is slowly but constantly driving me nuts.
cheers
hans

How do I tie a custom-component to a class?

Similar Messages

Maybe you are looking for