how do I import a class to use inside Flex application? - apache-flex

I have an actionscript file that defines a class that I would like to use inside a Flex application.
I have defined some custom controls in a actionscript file and then import them via the application tag:
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:scorecard="com.apterasoftware.scorecard.controls.*"
...
</mx:Application>
but this code is not a flex component, rather it is a library for performing math routines, how do I import this class?

You'd need to import the class inside a script tag.
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
import com.apterasoftware.scorecard.controls.*;
// Other imports go here
// Functions and other code go here
</mx:Script>
<!-- Components and other MXML stuff go here -->
<mx:VBox>
<!-- Just a sample -->
</mx:VBox>
</mx:Application>
Then you'll be able to reference that class anywhere else in your script tag. Depending on how the class is written you may not be able to use binding within the MXML, but you could define your own code to handle that.
Namespace declarations are only used to import other MXML components. AS classes are imported using the import statement either within a Script block or another AS file.

#Herms: To clarify a little, namespace declarations can be used to "import" AS classes as well, when you're going to instantiate them using MXML.
For example, consider having a custom visual component you've written entirely in AS, let's say com.apterasoftware.scorecard.controls.MathVisualizer. To use it within MXML:
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:aptera="com.apterasoftware.scorecard.controls.*">
<aptera:MathVisualizer width="400" height="300" />
</mx:Application>

Related

How to load and run a Flex3 SWF inside Flex4 or vice versa?

I am interested in understanding how to run a Flex-3 SWF inside a Flex-4 SWF.
My Flex-4 host app looks like this:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<mx:SWFLoader source="SimpleFlex3App.swf" loadForCompatibility="true"/>
</s:Application>
And this is the Flex-3 app:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="400">
<mx:Script>
<![CDATA[
private function onClick():void
{
labelField.visible = true;
}
]]>
</mx:Script>
<mx:Button label="Click Me" click="onClick();" horizontalCenter="0" verticalCenter="-20"/>
<mx:Label text="Clicked" visible="false" id="labelField" horizontalCenter="0" verticalCenter="20"/>
</mx:Application>
I get a null object reference where the SWFLoader tries to set up the bridge. I assume it does not get an instance for the IMarshalSystemManager implementation.
IMarshalSystemManager(sm.getImplementation("mx.managers::IMarshalSystemManager")).addChildBridge(_swfBridge, this);
By using the SWFLoader and setting loadForCompatibility to true I was following the adobe documentation:
I must be missing out on something very simple as both, my host and hosted apps, basically don't do anything special.
Further, is it possible to do the opposite and run a Flex-4 based SWF inside a Flex-3 one? In my opinion the adobe doc does not clearly say yes or no.
Thanks.
Flex harUI provided the correct answer here at the adobe forum.
Thanks!
It is possible to do as I built an application that can load AS2 swfs into a Flex 3 SWF.
You may need to set the trustContent property to false. This will mean you swfs are in separate security domains, and communication between the two will need to happen over a shared event bridge, local connection or custom sockets.
Have a look here for more info on this http://www.pixelbox.net/2009/02/11/sub-application-communication-in-air/

Classes must not be nested - MXML

I'm trying to build a simple FLEX application. Unfortunately, I get '1131: Classes must not be nested.' errors even with the simples MXML .... the error pops out at the mx:Application openning tag:
(I'm using PureMVC if it's important)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:view="icm.view.components.*"
viewSourceURL="srcview/index.html"
name="ICM"
layout="absolute"
> //FLEX BUILDER SAYS THE ERROR IS HERE
<mx:Script>
<![CDATA[
import mx.effects.easing.Exponential;
import icm.ApplicationFacade;
public static const NAME:String = "AppSkeleton";
private var facade:ApplicationFacade = ApplicationFacade.getInstance(NAME);
]]>
</mx:Script>
<mx:Move id="slideInEffect" yFrom="5000" easingFunction="{Exponential.easeOut}" duration="1300"/>
<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
<mx:Style source="css/yflexskin.css" />
<mx:Canvas id="mainViewStack" left="0" top="0" right="0" bottom="0" >
<mx:ViewStack id="vwStack" left="0" top="0" right="0" bottom="0" resizeToContent="false" creationPolicy="auto">
<mx:VBox />
<view:SplashScreen id="splashScreen" showEffect="{slideInEffect}" hideEffect="{fadeOut}" />
<view:LoginScreen id="loginScreen" showEffect="{fadeIn}" />
<view:MainScreen id="mainScreen" showEffect="{fadeIn}" />
</mx:ViewStack>
</mx:Canvas>
</mx:Application>
Can someone help me understand why? I've being doing a lot of non-sense tests because I'm not understanding it.
Sometimes if I remove the Script section the compilation suceed, others not.
Thanks
Thank you all for the comments.
The greatest tip at this topic is: build with the SDK!!!
Flex Builder (both, the IDE and the Plugin) seems to lack a lot of features on error treatment and even when it reports an error it's not reliable.
A prompt window for compiling used with the IDE saved me a lot of headaches.
Thank you all again!
I had this problem using a compiler option to exclude/include some code
like -define+=CONFIG::myOption,true
when the option is true (resulting including some code), and you have such thing into your code :
CONFIG::myOption {
import <a package>;
}
this will result in a 1131 error... I have no workaround but not using such conditional compilation directives.
There is a flex compiler option "Enable Strict type checking" just de-select it. I think that can give so a simple solution....
http://blog.gigantt.com/2011/02/how-to-build-flex-sdk.html
Building
Let's create a batch file to set some useful envars: envars.bat
set JAVA_HOME=c:\Program Files\Java\jdk1.6.0_23
set PATH=c:\dev\ant\bin;%PATH%
set ANT_OPTS=-Xmx256m
Open cmd.exe and run it...
Edit c:\dev\sdk\frameworks\build.xml
Look for:
And fix the location of the manifest file from:
"${datavis.dir}/manifest.xml" to:
"${datavis.dir}/manifest_datavisualization.xml"
Run Ant:c:\dev\sdk\frameworks> ant
It should end with such a message: BUILD SUCCESSFUL
Now let's tell Flash Builder where to find this new SDK: c:\dev\sdk
Add it to the "Installed SDKs" settings in Flash Builder
Make sure your project is configured to use this SDK (it was probably created with the original one and still refers to it).
Rebuild your project. It should work.

mx:MediaPlayback Flex tag

I'm trying to compile gui/flex/songs.mxml in the fourth edition of Bruce Eckel's Thinking in Java book and am getting a compilation error with Flex 3.4.
Here is a simplified version of the example that gives the same error:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#B9CAD2">
<mx:MediaPlayback id="songPlayer"
contentPath=""
mediaType="MP3"
height="70"
width="230"
controllerPolicy="on"
autoPlay="false"
visible="false" />
</mx:Application>
Here is the invocation and the error:
>mxmlc.exe songs.mxml
Loading configuration file C:\javaTools\flex_sdk_3.4\frameworks\flex-config.xml
C:\songs.mxml(5):
Error: Could not resolve <mx:MediaPlayback> to a component implementation.
<mx:MediaPlayback id="songPlayer"
What am I doing wrong here?
That component is no longer available in flex, i believe since flex 3.0. There is a video display component built in but you have to set up the controls for it. If you want a more complete pre-built component you need to import one from flash. heres a good tutorial from adobe on how to do that - http://www.adobe.com/devnet/flex/articles/video_flex.html

Importing a SWC for a Flex Project in Flash Develop

I just started using flashdevelop for flex apps (I had been using it for pure as3 projects previously). I can't figure out how to import files and such. I have included them to the library as usually. In this case I have included flexlib.swc and flexmdi.swc. Both are in my lib folder and both have been right clicked and Added to the Library.
Auto complete does not work so I think I am missing a step.
This is my code:
`
<flexmdi:MDICanvas id="mdic" width="500" height="500">
<flexmdi:MDIWindow id="win1" title="Window One" x="10" y="10">
<samples:SampleContent />
</flexmdi:MDIWindow>
<flexmdi:MDIWindow id="win2" title="Window Two" x="250" y="250">
<samples:SampleContent />
</flexmdi:MDIWindow>
<flexmdi:MDIWindow id="win3" title="Window Three" x="100" y="100">
<samples:SampleContent />
</flexmdi:MDIWindow>
</flexmdi:MDICanvas>
`
I also tried to add
<mx:Script>
<![CDATA[
import flexmdi.containers.MDICanvas;
import flexmdi.containers.MDIWindow;
]]>
</mx:Script>
I also get a strange error saying flexmdi:MDICanvas is not bound.
I might be way off here because we're talking about FlashDevelop, but I'm pretty sure you need to add the namespace for the MDICanvas in your MXML root tag, like this:
<?xml version="1.0" encoding="utf-8"?>
<MDICanvas xmlns="flexlib.mdi.containers.*" xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
...
</MDICanvas>
The import statements only apply to .as files or <mx:Script> sections of your MXML code.
Death by repetition, but Flex has two ways to import classes and packages. The MXML way and the AS3 way.
Unfortunately, the latest stable releases of FlashDevelop does not support code completion in MXML, although the feature is fully implemented in AS (you can browse packages in libraries with code completion in actionscript).
If you need help with MXML, I suggest keeping the library's API open side-by-side with FlashDevelop (it's what I prefer to do anyway). Still, you need to make sure that you include all of the XML namespaces. For example, for the Degrafa graphics library, you need to include
xmlns:gfx="http://www.degrafa.com/2007"
in the tag (there is also a similar namespace definition for the namespace "mx" already there).
However, MXML code completion is hopefully going to be implemented in a stable release very soon, and there have already been some ways to get it working.

Flex: Accessing functions / components accross mxml pages

For simplicity lets say I have two flex mxml pages.
form.mxml
button.mxml
If the form.mxml page had the following code, it should work fine:
<custom:SelectView dSource="{_thedata}" id="form" visible="false">
</custom:SelectView>
<mx:LinkButton label="Show" id="lbShow" click="form.visible=true;>
<mx:LinkButton label="Show" id="lbHide" click="form.visible=false;>
But if the code was like:
form.mxml
<custom:SelectView dSource="{_thedata}" id="form" visible="false">
</custom:SelectView>
button.mxml
<mx:LinkButton label="Show" id="lbShow" click="form.visible=true;>
<mx:LinkButton label="Show" id="lbHide" click="form.visible=false;>
how can I make a call from button.mxml to change form.mxml
---- a bit more details ---
My page actually looks like this: where query:AdvancedSearchFields is basically including a flex form into the page, and I want it to show/hide the custom view below after the search is complete.
<query:AdvancedSearchFields searchType="projects" searchCategory="advanced" visible="true" id="AdvancedSearch" />
<custom:SelectView dSource="{_searchResults}" id="sv" visible="false">
You could write a custom method that handles the button click events and raises a custom event. Then in form.mxml you can handle that event.
Splitting it up like this is a bit cleaner, as it makes the button.mxml file work on its own. Having Button.mxml have a direct reference to your form causes a tight-coupling between the two, and generally you should avoid tight-coupling.
EDIT: I just had another thought that also avoids tight-coupling and is a bit simpler:
form.mxml
<custom:SelectView dSource="{_thedata}" id="form" visible="{buttons.showForm}">
</custom:SelectView>
<!-- include your buttons.mxml component using an ID of "buttons" -->
buttons.mxml
<mx:Script>
<![CDATA[
[Bindable] public var showForm:Boolean = true;
]]>
</mx:Script>
<mx:LinkButton label="Show" id="lbShow" click="this.showForm=true;">
<mx:LinkButton label="Hide" id="lbHide" click="this.showForm=false;">
This essentially emulates using a custom event by using variable binding. Any time the showForm variable in buttons changes the visible property of the SelectView will be updated via the bindings. This is lighter-weight than creating a custom event (though I think custom events are a bit better of a design for it).
Your button.mxml class must have a reference to the instance of the 'form' class which will be affected. Then it can operate on it directly:
Button.mxml:
<mx:Script>
<![CDATA[
[Bindable] public var myForm:MyFormClass;
]]>
</mx:Script>
<mx:LinkButton label="Show" id="lbShow" click="myForm.form.visible=true;">
<mx:LinkButton label="Show" id="lbHide" click="myForm.form.visible=false;">
Generally, the most logical place to set this variable is in the parent of your Button class.
If you need to deal with this problem more often, I'd suggest using an MVC framework like PureMVC. It's set up so that you have a Mediator object that listens for events from MXML components, then sends a notification which can be picked up by any other mediator. Then that mediator can manipulate its own visual component based on the notification and its associated data.
In the context of what you're doing (the simple version), you're okay with the basic solution. But once you're dealing with four or five or more components with lots of logic, you will not be happy at all.

Resources