Flash Components in Flex - apache-flex

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

Related

Using FXG graphic in a Flex mobile app works with MXML, but not with ActionScript

I have read the Adobe's docs Using FXG and Embedding application assets, but can only embed the FXG through MXML -
MyStars.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.Home">
</s:ViewNavigatorApplication>
Home.mxml (works okay, when embedding FXG through 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"
xmlns:comps="assets.*"
title="Home">
<comps:Star />
</s:View>
Star.fxg (located in src/assets/Star.fxg):
<?xml version='1.0' encoding='UTF-8'?>
<fxg:Graphic xmlns:fxg="http://ns.adobe.com/fxg/2008" version="2">
<fxg:Path x="9.399" y="10.049" data="M 82.016 78.257 L 51.895 69.533 L 27.617 89.351 L 26.621 58.058 L 0.231 41.132 L 29.749 30.52 L 37.714 0.241 L 56.944 24.978 L 88.261 23.181 L 70.631 49.083 Z">
<fxg:fill>
<fxg:SolidColor color="#FFFFFF"/>
</fxg:fill>
<fxg:stroke>
<fxg:SolidColorStroke
caps="none"
color="#4769C4"
joints="miter"
miterLimit="4"
weight="20"/>
</fxg:stroke>
</fxg:Path>
</fxg:Graphic>
When I however try to instansiate the FXG graphic through ActionScript (still in the same Flex mobile project), I get the compile error:
Call to a possibly undefined method Star
Home.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"
xmlns:comps="assets.*"
title="Home">
<fx:Script>
<![CDATA[
import spark.core.SpriteVisualElement;
private static const STAR:SpriteVisualElement = new Star();
]]>
</fx:Script>
<s:BitmapImage source="{STAR}" />
</s:View>
I've also tried import comps; and/or new comps.Star();
When I move the FXG file to src/ and use xmlns:comps="*" everything works.
Import Star in ActionScript, which based on your code I assume will be something like this:
import assets.Star
private static const STAR:SpriteVisualElement = new Star();
I suspect that will get rid of the compiler error. However, I'm not sure if you can use a SpriteVisualElement as the source for a BitmapImage. You may have to add the SpriteVisualElement as a child of the parent container and make use of the Flex Component Lifecycle to do this.
I've done some experimenting around this, and just contributed this code to Apache Flex. The specific class is here. Although, for some reason I missed the fact that FXG elements could be SpriteVisualElements. Using my FXGImage class will not absolve you of the responsibility of having to size and position the component in ActionScript if you create it in ActionScript.
For FXG graphic, pay attention to your artwork size. When you create object using FXG, the white-space around the icon counts. Make sure you set the artwork size to the size of your icon (no extra white-space around the icon). This way, the FXG asset will look much better when you embed to the bitmapImage.

MXML composite container initialization error

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()" ?

Validator Components in Flex3 Air

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>

Must be a simple mistake I'm making: Flex CSS style not working in a trival case

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!

flex: loading mxml component

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>

Resources