migrating from Flex 3.6 to 4.6 - apache-flex

I'm currently working on an Adobe Flex Air Project, which was created with Flex 3.6! But now it should become an App for IPad, but Flash Builder can only export projects as App since Flex 4.6. So I'm trying to convert the project from Flex 3.6 to 4.6, what should be easy to do, I guess, but there are some problems with libraries and/or namespaces, which confuse me. This is how my Main-mxml starts:
<s:Application xmlns:mx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:MyComp="*"
xmlns:local="*"
xmlns:srv="generated.webservices.*"
width="1366"
applicationComplete="init()"
backgroundGradientColors="[0xffffff,0xffffff]"
borderColor="#ffffff"
color="#eaeaea"
fontSize="14"
horizontalScrollPolicy="off"
layout="absolute"
paddingBottom="0"
paddingLeft="0"
paddingRight="0"
paddingTop="0"
verticalScrollPolicy="off">
But I get the error:
`Attribute "mx" bound to namespace "http://www.w3.org/2000/xmlns/" was already specified for element "s:Application".`
But if I remove the line
`xmlns:mx="library://ns.adobe.com/flex/mx"`
then of course I can't use e.g. mx:VBox any more and would have to refactor the whole project.
I tried some test examples using Flex 4.6, e.g.
<?xml version="1.0"?>
<!-- containers\layouts\BoxSimple.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<mx:Box direction="vertical"
borderStyle="solid"
paddingTop="10"
paddingBottom="10"
paddingLeft="10"
paddingRight="10">
<mx:Button id="fname" label="Button 1"/>
<mx:Button id="lname" label="Button 2"/>
<mx:Button id="addr1" label="Button 3"/>
<mx:ComboBox id="state">
<mx:ArrayList>
<fx:String>ComboBox 1</fx:String>
</mx:ArrayList>
</mx:ComboBox>
</mx:Box>
</s:Application>
But here I get the error
`"Could not resolve <mx:Button> to a component implementation." `and more like this.
Now my question(s):
1. It's possible to use all three namespaces
`(xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark")`
Right? I saw this on several examples on the internet so I think it must work.
Do I have to reference/add external libraries to use Flex 4.6 with these 3 namespaces?
Is there an easy general way for migrating from Flex 3.6 to 4.6? Is it at all necessary to make changes or must it work in 4.6, even though developed in 3.6?
Besides, I'm relatively new to Flex, though it's not difficult I think.
Thanks in advance
Regards,
Max B

Max - to answer your question specifically it is absolutely possible to use MX components within Flex 4 apps. Your example seems to work fine with a regular flex 4.6 project. You might need to ensure you have the right library path settings.

Flex isn't difficult, but migrating between major verions can be a pain in the ass and may require a more seasoned developer. The fact is you have to know both frameworks, what are their differences and how you can fix those differences.
So Is there an easy general way for migrating? Well, ... no (or yes if you're willing to compromise, more on that later).
As for the namespaces: you can use all three of them together in one application and there's nothing special you have to do for that. That is, if you're building a traditional web app. If you're building a mobile app, some other framework libraries are used which do not inculde the components from the mx age. The reason is that Spark components or much more efficient and mobile devices just aren't as powerful as desktops yet.
Which means you'll have to convert your entire application to the Spark namespace. If your views haven't completely been separated from the business logic, you might as well rewrite it from scratch.
You can force the compiler to include the mx libraries however, even when compiling for mobile. But this will come at a performance cost.
That said, all I've said until now was on a technical level. From a UX point of view you can not expect an application that was designed for a big screen to be pleasant to use on a small one. In most of the cases these 'simple' conversions are complete failures.

Related

Flex: empty window on HelloWorld app

I'm totally new to flex and tried to create helloWorld app unsuccessfully.
Steps:
1) Create flex project within flash builder;
2) Added <s:Label text="Hello World" x="100" y="100" /> to HelloWorld.mxml file in default package;
3) runned project with Flash Builder;
4) saw an empty flash page in browser window;
Did I miss something?
HelloWorld.mxml:
<?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">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label text="Hello World" x="100" y="100" />
</s:Application>
P.S.
- Flash Builder 4.6;
- SDK 4.5.1;
- Other flash page do work correctly in browser (Chrome);
Ok, reposted from comment.
Did you try to open this swf in different browser?
Make sure to clear browser cache when your swf is not opened anywhere, and you
can try to delete files manually.
Sometimes it's easy to forget to save edited file, this isn't your case, is it?
Reliable approach to
see if your swf is updated or not is to Alert.show('version') or to
draw big red line across your app with graphics.

Flex 4 load multiple modules in sequence

I'm planning to break my Flex applications into different modules and need some advice regarding the loading of modules.
Currently, on load of the application, I need to add 5 modules as children to HGroups under a viewstack.
I'm using a ModuleManager to perform this and listens to the ModuleEvent to add the elements as IVisualElement under the HGroup.
Is there a way to add several modules without creating several IModuleInfo objects and multiple event listeners?
Please provide your inputs.
Here is the simplest way:
<mx:TabNavigator width="300" height="300">
<mx:ModuleLoader url="com/sample/Module1.swf"/>
<mx:ModuleLoader url="com/sample/Module2.swf"/>
<mx:ModuleLoader url="com/sample/Module3.swf"/>
</mx:TabNavigator>
Code of Module1, all others are the same:
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:Label text="Module 1"/>
</mx:Module>

I can't get MXMLC to work on Ubuntu

Okay, I downloaded the Flex 4 SDK from Adobe and extracted the contents to ~/Documents/flex4_sdk.
Now I have the following simple MXML file:
<?xml version="1.0"?>
<!-- usingas/StatementSyntax.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Label id="label1"/>
</mx:Application>
When I compile it with mxmlc /path/to/file.mxml, I get:
Loading configuration file ~/Documents/flex4_sdk/frameworks/flex-config.xml
/path/to/file.mxml (38642 bytes)
However, the resultant SWF file is blank. (Basically just a white canvas.)
I get the same results if I Try to compile similar code using Flash Builder on Windows.
Try to give the label a value so there is actual a visual piece on your application
<mx:Label id="label1" text="Label1"/>
If at all possible I strongly recommend using the Flex 4 spark Application instead of the old mx approach. Your app might look like this:
<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">
<s:Label text="label1" />
</s:Application>

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.

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.

Resources