I'm getting an odd error from my composite canvas component:
An ActionScript error has occurred:
Error: null
at mx.core::Container/initialize()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\core\Container.as:2560]
at -REMOVED THIS FOR STACK OVERFLOW-.view::EditableCanvas/initialize()[.../view/EditableCanvas
....
It seems to be related to the fact that my composite component has a child and I'm trying to add one in the place I'm using the component. So how can I do this correctly?
Component code looks like this (EditableCanvas.mxml):
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<mx:Image id="editTextImage"
source="#Embed('/../assets/icons/small/edit.png')"/>
</mx:Canvas>
The code that is using the code looks like this:
<view:EditableCanvas
width="290"
height="120"
backgroundColor="#FFFFFF"
horizontalScrollPolicy="off"
borderStyle="solid"
cornerRadius="3">
<mx:Text id="textContentBox" width="270" fontFamily="nautics" fontSize="12" text="{_text}"/>
</view:EditableCanvas>
So I found the solution all by my own from Adobe Flex 3 Help:
If you include child tags of the root container tag in an MXML component file, you cannot add child tags when you use the component as a custom tag in another MXML file. If you define an empty container in an MXML file, you can add child tags when you use the component as a custom tag.
The way to have child elements in a composite component (that also accepts childs from custom tag) is to add them after creationComplete in as3.
Have you tried not binding to the init() function, and instead just having creationComplete="init()" ?
Related
I need to have a group box in flex 3 - simple border with a heading at the top but the heading at the top should not have any border line through it.
I searched on the Net and the closest that I could get with source is
http://keg.cs.uvic.ca/flexdevtips/titledborder/srcview/
But the problem with this is that I can’t view in design mode what is on the group box. Does anyone know how to fix this?
Then I decided to go with canvases and an input box
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:TextInput
text="This should be my label"
x="124" y="72"
width="166" height="32"
borderStyle="solid"
fontWeight="bold"
color="#003366" backgroundColor="#D81010"/>
<mx:Canvas x="107" y="88" width="263" height="200" borderStyle="solid" label="Testst">
</mx:Canvas>
</mx:Application>
But I can't seem to get the Textinput to be ontop of the canvas. There is a line through the box as in the below picture
Does anyone know how to resolve this or have a better idea?
thanks
What you are looking for is a component equivalent to "fieldset" in HTML. It would be easier to use create component for better styling control. For Flex 2/3, you may use jwopitz-lib; but if you could use Flex 4 or above, try the ShinyLib component (specifically the FieldSet class and FieldSet skin). It would be easier if you could migrate the application to Flex 4 or the latest Flex, you would be exposed to a lot more components.
To get a custom component to work in design mode, you need to compile the code into a SWC library. Then reference the SWC library in your application project. I've never bothered to do this, I imagine you may get mixed results. I haven't bothered w/design mode in over 5 years :)
The reason the "window" component (in the URL that you linked to in the question) works in design mode is that it extends the Flex component TitleWindow. Since it extends an existing Flex component, I am assuming design mode knows how to render it.
I have a code in Flex 4 like this
<!-- START >>> middle part: items -->
<mx:Canvas id="itemContainer"
width="100%"
height="100%">
<!-- START >>> Items Display on the page -->
<mx:Repeater id="richTextReapeater"
dataProvider="{_model.current_day.richTextNotes}">
<components:RichTextNoteDisplay theNote="{richTextReapeater.currentItem}" />
</mx:Repeater>
<mx:Repeater id="postItReapeater"
dataProvider="{_model.current_day.positNotes}">
<components:PostItNoteDisplay theNote="{postItReapeater.currentItem}" />
</mx:Repeater>
......
</mx:Canvas>
Mainly it's a MX:Canvas that has inside it reapeaters for multiple custom components I created. Most of these custom components are like this:
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
x="{theNote.x}"
y="{theNote.y}"
width="{theNote.width}"
height="{theNote.height}"
depth="{theNote.depth}"
rotation="{theNote.rotation}"
creationComplete="skinnablecontainer1_creationCompleteHandler(event)" >
Everything works fine (x,y,width,height,rotation) except for depth!
it seems that regardless what the number is it shows as the order it was rendered in the parent container. (MX:Canvas)!
What I want to acheive is that relative to each others, all the items in the mx:Canvas shows in the order of "depth" assigned to them.
How do I do this?
You're using a repeater; which is, in essence, a loop.
It sounds like you're asking to loop over items, but process those items in a different order. Is that correct?
My first recommendation would be that you look into ways to sort your dataProvider items by depth before the repeater 'runs'.
My second recommendation is that you don't use a repeater. A List based class will give you better performance due to renderer recycling.
If you really need to create all children at once, my third recommendation is that you move to an ActionScript implementation which will give you lots more granular control over how and when things are created.
Everytime I've used a repeater I've been unhappy.
Here is some info on lists and itemRenderers with Flex 4.
This is a rough estimate of how I might modify this sample to use a list instead of a repeater:
<!-- START >>> middle part: items -->
<mx:Canvas id="itemContainer"
width="100%"
height="100%">
<!-- START >>> Items Display on the page -->
<s:List id="richTextList"
dataProvider="{_model.current_day.richTextNotes}"
itemRenderer="com.something.myComponent">
</s:List>
</mx:Canvas>
An itemRenderer may be something like this:
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:SkinnableContainer rotation="{data.rotation}"
creationComplete="skinnablecontainer1_creationCompleteHandler(event)" />
</s:ItemRenderer>
The list will determine the width, x, and y positions of the renderer. In most cases it will also determine the height; although the Flex 3 List has a variableRowHeight option.
If you want to use a different renderer based ond ata, look into using an itemRendererFunction
I'm getting the error "could not resolve <local:flashactionscript> to a component implementation"....
This is my mxml code....
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:local="com.*">
<local:flashactionscript x="400" y="400"/>
can anybody help me ?
flashactionscript is the name of actionscript class.
you can use the Image tag and set its source to a flash movie like so:
<mx:Image source="assets/yourFlash.swf"/>
link: http://livedocs.adobe.com/flex/3/langref/mx/controls/Image.html
How to use validator controls like Required validator, integer validator etc in Air application? I tried to use them but I got this error:
Component declarations are not allowed here. (Note: visual children must implement mx.core.IUIComponent)
i have imported the validator like this...
import mx.validators.Validator;
and used like this
<mx:TextArea id="txtQuestCaption" change="txtQuestCaption_change(event)"/>
<mx:Validator id="reqValidator" source="txtQuestCaption">
</mx:Validator>
But i got that above error..
how to use validator in air ?
It seems that this code is nested inside some container tag. Move the <mx:Validator/> tag out of the current position and place it directly within the root mxml tag. Non visual tags like Validator, Style etc should be added as the immediate children of the root mxml tag
<!-- wrong -->
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Canvas>
<mx:TextArea id="txtQuestCaption" change="txtQuestCaption_change(event)"/>
<mx:Validator id="reqValidator" source="txtQuestCaption"/>
</mx:Canvas>
</mx:Panel>
<!-- correct -->
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Canvas>
<mx:TextArea id="txtQuestCaption" change="txtQuestCaption_change(event)"/>
</mx:Canvas>
<mx:Validator id="reqValidator" source="txtQuestCaption"/>
</mx:Panel>
I'm trying to load an mxml component into my main flex project.
I saw that there are many related question regarding this issue but i'm too of a newbie to understand them.
the page contains a vbox on left and right sides and another flash file in the middle.
i want the vbox's that are placed on the left and right sides to be in separated mxml component. how can i do so?
thanks
Create the mxml component for your side boxes. In the following, I based it on VBox since that might be what you're looking for. I gave it an obnoxious backgroundColor that should be easy to spot when we run the app.
SideBox.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="300"
backgroundColor="0x990000">
</mx:VBox>
So in your main mxml application you can include your custom component by telling the application what namespace to look for it (that's what the xmlns:local="*" is for - the word local is just a name so that I can easily remember what it means, you can call it anything, the * essentially means to look in the current/same directory).
Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:local="*" layout="absolute">
<local:SideBox x="40" y="20" />
<local:SideBox x="500" y="20" />
</mx:Application>