Layer id to component id in Flex

For designers is imperative to give individual names to layers, the thing is that these "names" in Flex continue as layer ids instead of being used as component ids (which would cut ALOT of work!!!). Please! Change this!!!!!

Well it would help save time in the development stage just by allready exporting components ids that can be used by Flex, instead of having to create from scratch the ids. I found this helpfull because i'm working with a developer and he noticed that, as every good designer, my layers have a logical naming that he could use as components ids IF Flex could use the layer's id as a component id (since the component in FC ocuppies a layer that I name specificly. If Flex could use the "search and change key words" to search for the layer's ids and automatacly change them to component's ids it wouldn't matter, but since Flex doesn't do that, and since every great FC project has to pass through Flex....
The point is that instead of having the both of us entering ids it would only be necessary for me to do it.
Or at least have a Flex transition window where i could, in FC, atribute the id i want to the component.
If i've not made myself clear i'm not talking about a generic component as you can se in the library. What i'm talking about is, for example, if I had 3 main buttons, all from the same component, in different layers (of corse), and if i named those 3 layers as "home_bt", "contacts_bt" and "faq_bt", when the project got imported to Flex, Flex would recognize the layer's ids as being each duplicate component's id in Flex....
I hope you understood me. My guess is that you guys are trying to make FC as a softer flash for non-flash users/ designers, and Flex as the developers tool, separating the too worlds that today are a bit mixed, demanding programing skills for designers and designing skills for programmers....my guess is that this is a pertinent issue in the separation of these two worlds....and me, as a designer, can help in the developing stage better and faster

Similar Messages

[svn:fx-trunk] 7765: Fixing up some copyrights, adding copyrights, and fixing up some legal-eese for the Flash Component Kit For Flex.

Revision: 7765
Author:   [email protected]
Date:     2009-06-11 15:58:18 -0700 (Thu, 11 Jun 2009)
Log Message:
Fixing up some copyrights, adding copyrights, and fixing up some legal-eese for the Flash Component Kit For Flex.
Also, updating the MXP to get latest changes to base classes.
QE Notes: -
Doc Notes: -
Bugs: SDK-21670
Reviewer: No one (just header updates)
tests: checkintest (seem to fail due to local changes to ScrollBar, which I'm not checking in here)
Ticket Links:
    http://bugs.adobe.com/jira/browse/SDK-21670
Modified Paths:
    flex/sdk/trunk/frameworks/flash-integration/FlexComponentKit.mxp
    flex/sdk/trunk/frameworks/flash-integration/readme.txt
    flex/sdk/trunk/frameworks/projects/flash-integration/FlexComponentKit.mxi
    flex/sdk/trunk/frameworks/projects/flash-integration/JSFL/Convert Symbol to Flex Component.jsfl
    flex/sdk/trunk/frameworks/projects/flash-integration/JSFL/Convert Symbol to Flex Container.jsfl
    flex/sdk/trunk/frameworks/projects/flash-integration/JSFL/MakeFlexComponent.jsfl
    flex/sdk/trunk/frameworks/projects/flash-integration/readme.txt
    flex/sdk/trunk/frameworks/projects/flash-integration/src/mx/flash/ContainerMovieClip.as
    flex/sdk/trunk/frameworks/projects/flash-integration/src/mx/flash/UIMovieClip.as

How to add interface to customlize MXML Component when use Flex Builder 3?

How to add interface to customlize MXML Component when use
Flex Builder 3?

David,
I don't believe you can add the interface via the creation
dialog in FlexBuilder 3. You can always manually add the
"implements" property to your MXML Component root tag. Something
like this: <mx:VBox implements="com.mycorp.IMyInterface">
If you want autogeneration of the interface, then create an
ActionScript class with that interface and then copy the generated
functions and setter/getters into the script block of your MXML
component.

Component Creation in Flex / Xcelsius

Hi Experts,
Although I've used Xcelsius fairly extensively over the past year or so, I haven't really had much interaction with Flex or designing my own components. I have a project coming up shortly where I will need to create a large map of their operations, with hundreds of control point 'hot-spots'. This can't be achieved in any scalable way via workarounds without absolutely destroying the performance.
This implies that I will need to create my own component. Are there any resources out there that outline fairly clearly (read: simplistically) the steps in creating an Xcelsius component, or even the conversion of a Flex 2 component to Xcelsius (as I can likely find some Flex tutorials)?
Thanks for the help!
-Brian

Sounds like a large XY or Bubble chart!
My experience is that you cannot just download the Flex demo and expect to be able to build your own components. It's a lot more involved than that, even if you do a Flex course it will not be geared towards an Xcelsius design process. Although built in Flex the actual language used is ActionScript for the Components and MXML (with some Actionscript) for the Properties sheet. So I would suggest a course in ActionScript first as the programming involved can be quite confusing and if you've been out of programming for a while (in my case a long while!) it will take time to understand fully what is happening. Time which I cannot afford to put in, so I have done the courses so that I can talk to developers in their language and write accurate informed specifications for components.
For a basic overview of Flex take a look at the great Introduction to Flex videos over at Lee Brimlow's site www.gotoandlearn.com. Also there are a lot of good learning resources from Adobe with their Flex in a Week videos: http://www.adobe.com/devnet/flex/videotraining/
I'd would jump at the chance of attending a BO Xcelsius Component Development course though.
Best of Luck
Charles

Error in application: custom component Localization in flex library project

Hi!
I created custom component in flex library project and I created resource bundle for it. Now it all compiles, but when I add the component to other project I get an error: Unable to resolve resource bundle "Guestbook" for locale "en_US".
So can someone help me with this?

Where are your resource bundles located in relation to your Flex project src folder?
You may need to add the path to the bundles using Project - Properties - Flex Build Path and then add the parent folder to the resource bundles.
If this post answers your question or helps, please mark it as such.
Greg Lafrance - Flex 2 and 3 ACE certified
www.ChikaraDev.com
Flex / AIR Development, Training, and Support Services

Display layer of new AS components in Flex

When I create a new Flex component using Actionscript the
component always appears on top of exisitng components.
ex:
var newPanel:Panel = new Panel();
newPanel.width=300;
newPanel.height=300;
newPanel.x=40;
newPanel.y=40;
this.addChild(newPanel);
If I do this 2 times I'll see the second one on top of the
first.
I'm trying to figure out a way to have newly created
components display behind the older ones.
I'm also curious on how to bring a component to the top or
send it to the back.
Thanks!

I'm not much good at this stuff but look into
container.swapChildren();
Tracy

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.

Using Jumpeye Component in Flex

Hi,
has anyone successfully used Jumpeye's Drop Down Tree Menu
Component V3 in Flex 3? It's a great component to use in flash, the
submenus open and close on rollover/rollout (something I have not
been able to acheive with the Flex menubar). I used the flex
component kit to export the Jumpeye component from flash and
imported the swc into flex builder (I also imported the relevant
classes etc, inc faking an instance of mx.core.UIComponent(as per a
document I found on afcomponent's site). It works great on a simple
level (i.e. using defaults) but fails when I try to set any style
properties (these are done via an xml file with tags predefined by
Jumpeye in the component shim). I'm pretty new to Flex and am
obviously doing something very wrong, however, Jumpeye were not
able to help me as their focus is flash, although they commented
that clients of theirs have used the component successfully within
Flex.
Any help would be greatly appreciated.
Julie

>>You will need to put a little code here to better
understand, but as a guess, you might not have wrapped the
MovieClip in a UIComponent before adding it to the Flex display
list.
No. If the symbol in Flash was converted to a Flex Component,
this step is already taken care of.
Follow the example by Peter Ent to check if you have setup
the symbol in Flash correctly.
http://weblogs.macromedia.com/pent/archives/2007/04/example_of_the.html

Flex 4 mx:Component could not resolve

Hi, I am using flash builder 4 to run sample application from "Getting Started with FLEX 3", but the code can't run because there is one place that FB4 can't resolve, I guess this is because the library has been obsolete but after a tons of search I can't find the solution.
Thanks. Bin

<fx:Component
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

Speech bubble like component in flex

I need to use a speech bubble like component in my flex project.Due to timing constraints i am not position to invest my time in creating a component like that from scratch.Anyone knows any flex speech bubble component which is free to use?

Here are some things to check:
1) -use-network=true Project - Properties - Flex Compiler - Additional compiler arguments, add -use-network=true
2) Verify that the relative paths to the video files are correct on the server.
3) Could be a timing issue. If the video is not streaming and its not loaded yet, black screen could be the result.
If this post answers your question or helps, please mark it as such.

How to repaint a portion of a component?

I am working with JLayeredPane and several overlapping components which I draw a selection rectangle around when the user clicks on a component to indicate that it is "selected". If the user selects another component I need to wipe out the selection rectangle on the previously selected component. I'm not sure what the best approach for this is.
If the initially selected component was underneath (in a lower layer than) another component, I can't simply repaint it without repainting all of the components that are above it. This seems like it could be too much painting just to remove a selection box. Can someone recommend a good approach for this problem?
Thanks,
Jonathan

Thanks for the response. The components should be on separate layers (added via JLayeredPane.add(JComponent) ) so if the painter takes the layers into account, then there must be something else wrong. Here's a quick demo program of what I'm doing:
import java.awt.*;
import java.awt.event.MouseEvent;
import javax.swing.*;
import javax.swing.event.MouseInputAdapter;
public class LayerDemo {
private ControlMouseInputAdapter controlMouseInputAdapter = new ControlMouseInputAdapter();
private static void createAndShowGUI() {
LayerDemo layerDemo = new LayerDemo();
JFrame mainFrame = new JFrame();
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (Exception e) {;}
mainFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
mainFrame.setSize(400, 400);
JLayeredPane layeredPane = mainFrame.getLayeredPane();
layeredPane.add(layerDemo.createColoredLabel("test1", Color.RED, new Point(20, 20)));
layeredPane.add(layerDemo.createColoredLabel("test2", Color.BLUE, new Point(40, 40)));
mainFrame.setVisible(true);
private JLabel createColoredLabel(String text, Color color,
Point origin) {
JLabel label = new JLabel();
label.addMouseListener(controlMouseInputAdapter);
label.setText(text);
label.setOpaque(true);
label.setBackground(color);
label.setBounds(origin.x, origin.y, 140, 140);
return label;
public static void main(String[] args) throws Exception {
SwingUtilities.invokeLater(new Runnable() {
public void run() {createAndShowGUI();}
private class ControlMouseInputAdapter extends MouseInputAdapter {
public void mouseEntered(MouseEvent e) {
JComponent component = (JComponent) e.getSource();
component.setBorder(BorderFactory.createLineBorder(Color.black));
public void mouseExited(MouseEvent e) {
JComponent component = (JComponent) e.getSource();
component.setBorder(null);
}

Flash IDE Components in Flex 3 Design Mode. Can they be visible there?

Hi,
Im exploring Flex to get a grasp on its concepts and am currently looking into building components in the Flash IDE. Though i guess its likely that when you're more familiar with Flex you build your components in Flex, like said Im exploring its concepts and like to know where and how the Flash IDE fits in its workflow.
I made a simple Flex Component in the Flex IDE, which shows up fine when I run the Flex project. But it does not show in Flex Design Mode.
I have exported the component from Flash as an SWC and added the SWC to the Flex library path. The symbol in the Flash IDE extends UIMovieClip. Now I read in 'Using Adobe FlexBuilder 3' (p.67) that the Flex Components panel only lists visible components, according to the documentation 'components that extend UIComponent'.
Note that my question is about being visible on the stage in Design Mode, not in the component panel. As UIMovieClip doesnt inherit from UIComponent (and the UIComponent class doesnt seem to be available in the Flash IDE), is this also the cause that the Flash IDE component is not visible on the Flex stage in Design Mode?
Can someone confirm, or deny this?
Regards,
Marcel

Hi Latha,
thanks for your feedback. Reading it back though, Im still not sure whether Flex components build in the Flash IDE (using the Flex Component Kit for Flash CS3) can be visible in Flex 3 Design Mode.Maybe you can be a bit more specific and save a lot of Flex beginners a lot of headaches.
I understand that MXML components can be used in Design Mode. I also understand that if your component is AS you have to create a Library and link that to your project to make them visible in Design Mode. I also understand that Flash Builder 4 does "support rendering of UIMovieClip objects which are in library (swc) and added to the project build path"
This actually doesnt answer my question really. Does this mean there is no way to render Flex components build in the Flash IDE (using the Flex Component Kit for Flash CS3) in Flex 3 Design Mode?
Regards,
Marcel

How do I add custom style to custom AS3 component via .css file?

Hi all,
I have created a flex application which displays a custom component I created in actionscript. My custom component is just an extended canvas component which displays a gradient background. When I add the component to my flex app, see code below, the component works great.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="http://localhost/mycomps">
    <ns1:GradientCanvas fillColors="[#ffffff, #000000]" />
</mx:Application>
However, I also want to support css styles to add the gradient colors to my component, like so
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="http://localhost/mycomps">
    <mx:Style source="test.css" />
    <ns1:GradientCanvas styleName="gradientCanvas" />
</mx:Application>
test.css
.gradientCanvas {
    fill-colors: #ffffff, #000000;
When I try this my component doesn't display a gradient. I have followed the tutorials online that I could find but it seems to be the same example from Adobe repeated on multiple site and it doesn't work.
My component code is added below, if anyone could show me how to get this to work it would be much appreciated.
Thanks in advance,
Xander
GradientCanvas.as
package mycomps {
    import flash.display.GradientType;
    import flash.geom.Matrix;
    import mx.containers.Canvas;
    import mx.styles.CSSStyleDeclaration;
    import mx.styles.StyleManager;
    public class GradientCanvas extends Canvas {
        private static var classConstructed:Boolean = constructStyle();
        public function GradientCanvas() {
            super();
            this.width = 100;
            this.height = 20;
        private static function constructStyle():Boolean {
            var style:CSSStyleDeclaration = StyleManager.getStyleDeclaration("GradientCanvas");
            if (style) {
                if (style.getStyle("fill-colors") == undefined) {
                    style.setStyle("fill-colors", [0xffffff, 0x000000]);
            } else {
                style = new CSSStyleDeclaration();
                style.defaultFactory = function():void {
                    this._fillColours = [0xffffff, 0x000000];
                StyleManager.setStyleDeclaration("GradientCanvas", style, true);
            return true;
        override public function styleChanged(styleProp:String):void {
            super.styleChanged(styleProp);
            if (styleProp == "fill-colors") {
                this._fillColours = getStyle("fill-colors");
                this._fillColoursChanged = true;
                this.invalidateDisplayList();
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if (this._fillColoursChanged == true) {
                var direction:Number = 90 * (Math.PI / 180);
                var matrix:Matrix = new Matrix();
                matrix.createGradientBox(unscaledWidth, unscaledHeight, direction, 0, 0);
                graphics.clear();
                graphics.beginGradientFill(GradientType.LINEAR, this._fillColours, [1,1], [0, 255], matrix, "pad", "rgb", -1);
                graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
                graphics.endFill();
                this._fillColoursChanged = false;
        [Inspectable(category="Gradient", type="Array", format="Color", name="Fill Colours")]
        private var _fillColours:Array;
        private var _fillColoursChanged:Boolean = false;
        public function get fillColours():Array {
            return this._fillColours;
        public function set fillColours(value:Array):void {
            this._fillColours = value;
            this._fillColoursChanged = true;
            this.invalidateProperties();
            this.invalidateDisplayList();

Never mind, I've discovered how to do it for myself.
Thanks...

Is there a way of merging cells (not columns) in a Flex Datagrid?

Hello everyone!
I'm new to Flex and I have been searching for a solution to this problem for two days now, so any help would be really appreciated!
I have a datagrid of, lets say x columns of fixed size, with the ability to add or remove rows dynamically. When adding a row o popup comes up and lets the user determine the positions(order) and widths of the desired cells of the row. So what I want to do is to be able to merge cells of the new Datagrid row appropriately, to satisfy the user's choices. Thats the general idea.
Is there a way to have a Datagrid (or other similar component) with different cell number and widths for each row in Flex? I need a component similar to the Datagrid because I want to be able to select rows and process their data.
Any idea would be very helpful as I'm pressed for time and I could use someone's experience to search in the right direction and not loose time.
Thanks in advance!

Thank you very much for your response. I finally did what I wanted without using a Datagrid. I used a Table Flex Component (which extends Flex Grid) that I found here:
http://code.google.com/p/flex-table/#Demo
I downloaded the source and changed some things to make it work as I need.

How to get the parent of a component in fx?

Here is an example:
Index.fx:
Stage {
    title: "Online book library";
    width: 1024
    height: 768
    scene:Scene {
    fill: Color.WHITE
    content: [
       banner ,
       login = Login{translateX:715 translateY:135}
};Login.fx:
var logOn : Button = Button {
        translateX:25 translateY: 170
        text: "Log On"
        font: Font {size:11 name: "Verdana Bold"}
        action: function() {
            showHello();
function showHello(){
   // add a label in index.fx whose text is "welcome!";
    }I want to show something on the index.fx but I don't know how to get the parent from the child component?
In Flex, we use parent or parentApplication, Is there a similar function in JavaFX?

Reusing the same Tile example, I had no problems, I suppose I was doing wrong the first time:
def IMAGES_WIDTH = 100;
def IMAGES_HEIGHT = 100;
var COLUMN_NB = 3;
var ROW_NB = 3;
var scene: Scene;
var previews: Container;
Stage
title: "Test of Tile layout"
scene: scene = Scene
    width: 500
    height: 500
    fill: Color.LAVENDER
    content:
      previews = Tile
        hgap: 10
        vgap: 10
        layoutX: bind (scene.width - previews.width) / 2
        layoutY: bind (scene.height - previews.height) / 2
        columns: COLUMN_NB
        content: for (i in [ 1 .. COLUMN_NB * ROW_NB ])
          ImageView
            id: "IV{i}"
            image: Image
              url: "{__DIR__}clock.gif"
              width: IMAGES_WIDTH
              preserveRatio: true
            onMousePressed: Hide
function Hide(evt: MouseEvent): Void
println("{evt.node} ({evt.node.id}) - {evt.node.parent}");
var nm: Node = evt.node.parent.lookup("IV5"); // Middle node
nm.visible = false;
var ntl: Node = evt.node.parent.lookup("IV1"); //Top left node
(ntl as ImageView).viewport = Rectangle2D { height: IMAGES_WIDTH/2, width: IMAGES_WIDTH/2 };
(evt.node.parent as Tile).hgap = 20; // Strange effect, but works
}

Layer id to component id in Flex

Similar Messages

Maybe you are looking for