How to use an MXML component in my as3 code? - actionscript-3

I have made a lot of research on this topic but I could not find any helping answer to my issue. I currently have a 100% as3 application. I would like to add a spark component to my stage eg a datagrid (because it is way more simple and clean to create it with mxml).
FileName : MXMLPractice.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:DataGrid x="0" y="0" width="50" height="50"
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:columns>
<s:ArrayList>
<s:GridColumn dataField="dataField1" headerText="ColumnName1"></s:GridColumn>
<s:GridColumn dataField="dataField2" headerText="ColumnName2"></s:GridColumn>
<s:GridColumn dataField="dataField3" headerText="ColumnName3"></s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
How can I add this component to the stage in my as3 code?
Given my difficulties to find a matching answer, I guess I might be trying to do something not recommended. If that is the case, could you please advise me what to do instead?
My tests so far (compiling but not displaying anything) :
package
{
import flash.display.Sprite;
import mx.events.FlexEvent;
public class Main extends Sprite
{
private var practice:MXMLPractice;
public function Main()
{
practice = new MXMLPractice();
stage.addChild(practice);
}
}
}

In pure AS3 project, you should use AS3 components, that also extend UIComponent as flex components, but designed for pure as3 project. For this task, you will need fl.controls package. You can copy/past ui classes from the installation directory of Flash Professional:
c:\Program Files\Adobe\Adobe Flash CC\Common\Configuration\Component Source\ActionScript 3.0\User Interface\
Next step will be export view representation of ui components to the library in Flash IDE from components window CTRL+F7

It's really hard task.
If you want to use some simple class from Flex SDK like ObjectUtil just copy it to your classes. It will work fine because doesn't have imports.
But visual components are linked with many other classes. For components like grid you have to copy dozens of classes. Each of them also have dependencies and so on.
Probably it's better to modify Flash component or find open source solution.

Related

Flash compiled with Flex SDK very big file size

I had a simple flash video player I was compiling using Adobe Flash Builder , but now I am compiling it using Flex SDK 4.6 . Flash filesize was 20KB when I was compiling with FB . Now it's 280KB . I know that it adds some swc files to swf build , I have disabled debug etc instructions provided here http://livedocs.adobe.com/flex/3/html/help.html?content=performance_06.html . Is it possible to somehow convert fla components without using mxml ?
Here is my mxml code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application backgroundColor="#000000" xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" minWidth="320" minHeight="240" creationComplete="initApp()">
<fx:Script>
public function initApp():void{
var p = new video_player(uic);
}
</fx:Script>
<mx:UIComponent id="uic" />
</mx:Application>
video_player.as
....Import statements
public class video_player{
private var uic:UIComponent
var fullScreen:Image;
var rtmpApplication:String;
var streamName:String;
public function video_player(_uic:UIComponent) {
uic=_uic;
if (FlexGlobals.topLevelApplication.parameters.hasOwnProperty("applicationName")) {
rtmpApplication=FlexGlobals.topLevelApplication.parameters.applicationName;
}
if (FlexGlobals.topLevelApplication.parameters.hasOwnProperty("streamName")) {
streamName=FlexGlobals.topLevelApplication.parameters.streamName;
}
vPlayer=new Video(playerwidth,playerheight);
uic.addChild(vPlayer);
init();
}
public function init(){
//add fullscreen image in flash top right , and event handler
//Code to connect to live application and play video using NetConnection and NetStream
}
}
Is there any way around this?
Also I have added option -static-link-runtime-shared-libraries=true so it wont download anything runtime . Without that flash size is 49KB
By setting the above option, you have told the compiler to include all of the Flex framework classes (that are used by your application) in the application SWF. So your SWF grows from 49KB to 280KB.
This is the "RSL" thing (runtime shared library) that #Reboog711 and I were talking about. If you use the Flex RSL's, then all of that Flex framework code is not included in your application SWF. The Flex framework RSL's are signed by Adobe and can be cached by the Flash Player. So using them is always preferable. (Note: I'm assuming this all still works with Apache Flex)
Finally, I wish to reiterate that in Flash Builder there are two basic kind of projects you can create: Flex project, Actionscript project. I'm ignoring the mobile options, but the same applies to them:
An Actionscript project will, in general, result in a smaller SWF because you are not relying on any of the Flex framework classes. It sounds like you could make your video player app even smaller (closer to the 20KB size you originally had) if you were to create an Actionscript project.

photoshop activeDocument

I am writing a Photoshop plug in in ActionScript 3.
I am having a very confusing and frustrating issue with app.activeDocument. My code works perfectly with Photoshop for Windows but on a Mac I get the "General Photoshop errooccurreded. This Functionality may not be available in this version of Photoshop." error.
To try and get to the root of the issue, I wrote a class just to get the document reference and called it from a test panel. The class call worked perfectly. I then included the same class in my main panel project and it breaks.
This is my class: -
package DocRefGetter
{
import com.adobe.csawlib.photoshop.Photoshop;
import com.adobe.photoshop.*;
public class DocRefPhotoshop
{
public static function getDocRef():Document
{
var app:Application = Photoshop.app;
var thisDoc:Document = app.activeDocument;
//var thisDoc:Document = app.documents.index(0); //Tried this method too
return thisDoc;
}
}
}
For the purpose of posting here, I have simplified things a little, i.e. I have removed things like the "try, catch" statements but essentially this is the code that does not work in the context of my panel. I also tried the equivalent call to JSX code with exactly the same result, worked perfectly for Windows, worked in a test panel on Mac, would not work in my main project on Mac.
As I said, inside a test, this works perfectly. Here is the test mxml code: -
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" historyManagementEnabled="false">
<mx:Script>
<![CDATA[
import DocRefGetter.DocRefPhotoshop;
import com.adobe.photoshop.Document;
[Bindable]
private var hostName:String = HostObject.mainExtension;
protected function button1_clickHandler(event:MouseEvent):void
{
var thisDocRef:Document = DocRefPhotoshop.getDocRef();
testLabel.text = String(thisDocRef);
}
]]>
</mx:Script>
<mx:VBox height="100%" width="100%" verticalAlign="middle" horizontalAlign="center">
<mx:Button label="Run PS code" click="button1_clickHandler(event)" />
<mx:Label id="testLabel" width="182" text="Label"/>
</mx:VBox>
</mx:Application>
I can't post the main application that it isn't working in as it is extremely large and complicated so what I am asking is has anyone come across a situation before where somehow something is conflicting with this type of document reference? I have been trying to resolve this for over a week now. I have tried many different solutions but nothing has worked. Mac Photoshop just simply doesn't want to see the open document.
Any suggestions are welcome but I am hoping most that someone has come across this exact situation before and has a precise solution.
Many thanks for taking the trouble to take a look at this.
so what I am asking is has anyone come across a situation before where somehow something is conflicting with this type of document reference?
Use one of the following checks:
Is docref null?
Is the document loaded asynchronously?
Is the document large enough to warrant a timeout?
References
Scripting Photoshop: Working with the document model
Adobe Photoshop CS5 Scripting Guide (pdf)
JavaScript development toolkit | Download Adobe ExtendScript Toolkit CC

Flash Builder (Flex) Air Project mx.* libraries swc Class mx.logging.targets::LineFormattedTarget could not be found

A teammate on my project added a swc that had some mx logging classes in it, and now my project won't compile. Error:
Class mx.logging.targets::LineFormattedTarget could not be found.
I'm on the latest Flash Builder 4.6, fresh install. I notice when I go to project > properties > Actionscript Compiler then select Libraries, there is no options to select MX like there was before. Anybody know how to solve this problem. I thought the idea behind swc's is that they are self-contained and wouldn't need to me add extra imports. Thanks.
Yah very strange... so after discussing above a bit I threw together a sample project and this compiles fine against the 4.6.0 SDK I'm using, I can see the LineFormattedTarget class within my framework.swc when I expand it in the libraries in the navigator on the left:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="windowedapplication1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.core.mx_internal;
import mx.events.FlexEvent;
import mx.logging.targets.LineFormattedTarget;
protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
{
var test:LineFormattedTarget = new LineFormattedTarget();
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:WindowedApplication>
I would check to make sure it shows the framework.swc inside of the 4.6 referenced library, if the swc isn't there try removing and re-adding the framework to the library path, if that fails with the same result I would look at pulling down the SDK fresh.

How to add MXML components to an ActionScript application?

I'm building an ActionScript 3 project, and have found that writing some components in MXML would simplify things.
It seems like I'd need to extend the Flex Application class in order to do that. If that is right, how should I do that?
Currently my Main object extends Sprite. Other Sprites are then added to it with addChild(), and I'd like Flex components in one of those. Surely there is a way without rewriting my application completely in MXML?
Edit As posted in the comments my explanation here is mostly regarding transitioning to a Spark application, the same kinds of ideas apply going to MX Application except with MX you could stick with addChild, generally speaking there you would need to implement IUIComponent to use containers see docs:
Note: While the child argument to the method is specified as of type
DisplayObject, the argument must implement the IUIComponent interface
to be added as a child of a container. All Flex components implement
this interface.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/Container.html#addChild()
End Edit
You can switch your base class to Application instead of Sprite, but when adding elements to a Flex 4 application it expects that they implement IVisualElement. Generally speaking you would switch your addChild calls to addElement, and you would have to change your other classes that currently extend Sprite/MovieClip/DisplayObject to extend something like Group so that they implement the necessary interfaces for Flex Application to work with them (generally it expects more things than lower level Flash objects provide since it has the LayoutManager, PopUpManager, Component Life cycle, etc.). The issue here is you'll be adding some weight to your components, if this is meant for the web or desktop I wouldn't be too concerned but this will affect performance on mobile devices, noticeably.
Unfortunately it's not a turn-key type solution, it requires some manual modification of the code since you have to make the call on what to change each object to based on it's functionality, sometimes Group is the right way to go other times you might get more benefit out of other containers or controls. In some cases you may want to stick with your current lower level extension (say extending Sprite) and just implement IVisualElement yourself.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/Container.html#addElement()
If you wanted to wholesale switch to using an MXML file for your application you could also create a basic MXML application file, and have it include a script block with your existing code (modified so constructor code is moved into creation complete). Alternatively you can have a base .as file that extends application then use that as the base class for your MXML, I'll throw together some examples.
Example 1 A very basic MXML Application file
<?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:Script>
<![CDATA[
]]>
</fx:Script>
</s:Application>
Example 2 An AS3 Class extending application and an MXML class extending that
[Main.mxml]
<?xml version="1.0" encoding="utf-8"?>
<MyBaseApp
xmlns="*"
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">
<s:Button id="btnControl"/>
</MyBaseApp>
[MyBaseApp.as]
package
{
import mx.events.FlexEvent;
import spark.components.Application;
import spark.components.Button;
public class MyBaseApp extends Application
{
public var btnControl:Button;
public function MyBaseApp()
{
super();
addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
}
private function creationCompleteHandler(event:FlexEvent):void
{
btnControl.label = "something I set in AS3";
}
}
}

learning flex 4 facing problem with namespaces

I am trying to learn flex4 from adobe document and I am very confused while using three namespaces.. there is no way i can keep track of when to use what often ending up using fx inside mx or s or similarly making some stupid goofed up combinations of {fx,mx,s}.
Adobe document is huge and i am looking for some good starting point for learning flex .
Your question is quite large; however, some basic explanation about the 3 namespaces you've cited:
<fx> tags are typically programmatic functionality and not visual display objects. You'd use it for declaring a script block in a MXML document or defining variables in a declarative way.
<fx:Script>
<![CDATA[
[Bindable]
public var myVariable:String = "Hello, World!";
]]>
</fx:Script>
<fx:Declarations>
<fx:Object id="variableName"
property1="myCustomProperty"
property2="anotherCustomProperty" />
</fx:Declarations>
When declaring visual elements and UIComponents on the display list, you'll typically want Spark architecture; therefore, you'd use the Spark namespace.
<s:Group />
MX architecture is important, but is generally deprecated by Spark. If a component is available as Spark, you should use that implementation.
<mx:Box />
All are just packages of the framework, and really no difference than importing packages in ActionScript. Your custom components will use their package name as a namespace, or you declare a namespace for your Flex MXML library.
If you're using an IDE like Flash Builder, you usually don't have to worry about the namespaces.
In an MXML file, enter the start tag (ie: <), skip the namespace and start typing the class you're after. In the above examples, I'd hit <s for "script" and the intellisense will show you completion options that will insert the namespace for you.
If the auto completion options do not appear, hit [ctrl]+[space-bar].
Let Flash Builder help with namespaces by completing them for you.
Probably doesn't go far to helping you out, but hopefully this helps a little.
Have you tried http://www.adobe.com/devnet/flex.html especially Getting Started part?