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>
Related
I am trying to create a Header for DataGrid which will show the Label and TextInput. The code is:
<?xml version="1.0" encoding="utf-8"?>
<s:DefaultGridHeaderRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:VBox paddingLeft="5" paddingTop="5" paddingRight="5" paddingBottom="5">
<s:Label text="{data.headerText}"/>
<s:TextInput width="100%" />
</mx:VBox>
</s:DefaultGridHeaderRenderer>
It somehow works but the problem is I am loosing the styles on the headers and the background is showing as white instead of the nice grey gradient.
I think I have to add the styling manually. Is there an easy way to do so?
Thanks
Styles are handled by ActionScript code in the item renderer. It's up to you to write that code in your own item renderer. For an example view the source code for the default header renderer. Or you can ignore styles, and just add a Rect behind the Vbox and set its fill properties to whatever you like.
How can I set up the LabelItemRenderer or use any other item renderer that wouldn't truncate the overflowing text but would word wrap it?
UPDATE:
This blog post solved it:
http://flexponential.com/2011/08/21/adding-multiline-text-support-to-labelitemrenderer/
What version of the SDK are you using? You can just make a custom renderer and use a label in it and it'll work, use ItemRenderer as the base class
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer width="100%"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:Label text="{data}"
width="100%"/>
</s:ItemRenderer>
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()" ?
I must be making a simple mistake (new to Flex). Here is main.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
backgroundColor="#ff0000">
<mx:Style source="/testing123.css"/>
<mx:Canvas top="0" bottom="0" left="0" right="0" styleName="bg-lowlight" >
</mx:Canvas>
</mx:Application>
and here is testing123.css:
.bg-lowlight
{
backgroundColor: #003366;
}
The Canvas renders fine in design mode (a nice deep blue) but when I run the application (either in the browser or in the Flash Player) the frame is red (the color from the Application tag). If I specify the color for the Canvas directly, instead of through the styleName, it works as expected (blue canvas at runtime).
I'm using FlexBuilder3, and would much rather put colors in a .css file than on every Flex element!
Help!!!
*** Additional problem description ... has nothing to do with an external .css file. Even if I declare the CSS styles within the main.xml file, it still looks fine in Design mode and wrong when it runs. I am completely stymied.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#ff0000">
<mx:Style >
.bg-lowlight
{
backgroundColor: #003366;
}
</mx:Style>
<mx:Canvas top="0" bottom="0" left="0" right="0" styleName="bg-lowlight" id="canvas1">
</mx:Canvas>
</mx:Application>
The active directory changes when you run the application, so "/testing123.css/" no longer refers to the correct file.
EDIT: It's actually REALLY annoying.
So...with CookieOfFortune's help I tracked down the root of the problem:
the CSS class name (bg-lowlight) was invalid. The '-' is not allowed
that's what happens, I guess, when you guess at what is logical!
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>