Possible to use Flex Framework/Components without using MXML? - apache-flex

Is it possible to use the Flex Framework and Components, without using MXML? I know ActionScript pretty decently, and don't feel like messing around with some new XML language just to get some simple UI in there. Can anyone provide an example consisting of an .as file which can be compiled (ideally via FlashDevelop, though just telling how to do it with the Flex SDK is ok too) and uses the Flex Framework? For example, just showing a Flex button that pops open an Alert would be perfect.
If it's not possible, can someone provide a minimal MXML file which will bootstrap a custom AS class which then has access to the Flex SDK?

I did a simple bootstrap similar to Borek (see below). I would love to get rid of the mxml file, but if I don't have it, I don't get any of the standard themes that come with Flex (haloclassic.swc, etc). Does anybody know how to do what Theo suggests and still have the standard themes applied?
Here's my simplified bootstrapping method:
main.mxml
<?xml version="1.0" encoding="utf-8"?>
<custom:ApplicationClass xmlns:custom="components.*"/>
ApplicationClass.as
package components {
import mx.core.Application;
import mx.events.FlexEvent;
import flash.events.MouseEvent;
import mx.controls.Alert;
import mx.controls.Button;
public class ApplicationClass extends Application {
public function ApplicationClass () {
addEventListener (FlexEvent.CREATION_COMPLETE, handleComplete);
}
private function handleComplete( event : FlexEvent ) : void {
var button : Button = new Button();
button.label = "My favorite button";
button.styleName="halo"
button.addEventListener(MouseEvent.CLICK, handleClick);
addChild( button );
}
private function handleClick(e:MouseEvent):void {
Alert.show("You clicked on the button!", "Clickity");
}
}
}
Here are the necessary updates to use it with Flex 4:
main.mxml
<?xml version="1.0" encoding="utf-8"?>
<local:MyApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:local="components.*" />
MyApplication.as
package components {
import flash.events.MouseEvent;
import mx.controls.Alert;
import mx.events.FlexEvent;
import spark.components.Application;
import spark.components.Button;
public class MyApplication extends Application {
public function MyApplication() {
addEventListener(FlexEvent.CREATION_COMPLETE, creationHandler);
}
private function creationHandler(e:FlexEvent):void {
var button : Button = new Button();
button.label = "My favorite button";
button.styleName="halo"
button.addEventListener(MouseEvent.CLICK, handleClick);
addElement( button );
}
private function handleClick(e:MouseEvent):void {
Alert.show("You clicked it!", "Clickity!");
}
}
}

This is a very simple app that does only the basic bootstrapping in MXML. This is the MXML:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()">
<mx:Script source="Script.as" />
</mx:Application>
This is the Script.as:
import mx.controls.Button;
import flash.events.MouseEvent;
import mx.controls.Alert;
import mx.core.Application;
private function onCreationComplete() : void {
var button : Button = new Button();
button.label = "Click me";
button.addEventListener(MouseEvent.CLICK, function(e : MouseEvent) : void {
Alert.show("Clicked");
});
Application.application.addChild(button);
}

NOTE: The below answer will not actually work unless you initialize the Flex library first. There is a lot of code involved to do that. See the comments below, or other answers for more details.
The main class doesn't even have to be in MXML, just create a class that inherits from mx.core.Application (which is what an MXML class with a <mx:Application> root node is compiled as anyway):
package {
import mx.core.Application;
public class MyFancyApplication extends Application {
// do whatever you want here
}
}
Also, any ActionScript code compiled with the mxmlc compiler -- or even the Flash CS3 authoring tool -- can use the Flex classes, it's just a matter of making them available in the classpath (refering to the framework SWC when using mxmlc or pointing to a folder containing the source when using either). Unless the document class inherits from mx.core.Application you might run in to some trouble, though, since some things in the framework assume that this is the case.

Yes, you just need to include the flex swc in your classpath. You can find flex.swc in the flex sdk in frameoworks/lib/flex.swc
edit: One more thing: if you're using Flex Builder you can simply create a new ActionScript project, which will essentially do the same as above.

Related

How can I import symbols from Flash CS in MXML?

I'm writing a mobile app in Flex with FlashDevelop and using Flash CS6 to create the visual assets. I created a symbol in Flash CS6 and exported it as AC3 into an SWC, which I imported into my FlashDevelop project. I then created a class for it, like so:
package com
{
import flash.display.Sprite;
public class volmeter_class extends Sprite
{
private var design:volmeter;
public function volmeter_class()
{
trace("I'm a MySymbol instance called", name);
design = new volmeter();
addChild(design);
}
}
}
I'm now seeking to display the symbol I created on a page of my app. To do this, I suspect I am expected to somehow import it in my MXML, but I have no idea how to do so. Can someone give me a few tips on how to get started doing this?
In Flash Pro, assure AS Linkage is specified for the symbol.
Using the published SWC from Flash Pro in the ActionScript Build Path of a project, the symbol may be instantiated by AS Linkage. Or, symbols may be embedded from the published SWF of Flash Pro.
Pure ActionScript example:
package
{
import flash.display.Sprite;
public class AppExample extends Sprite
{
public function AppExample()
{
var exampleSymbol:ExampleSymbol = new ExampleSymbol();
addChild(exampleSymbol);
}
}
}
Flex MXML example:
<?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"
creationComplete="creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function creationCompleteHandler(event:FlexEvent):void
{
var exampleSymbol:ExampleSymbol = new ExampleSymbol();
symbol.addChild(exampleSymbol);
}
]]>
</fx:Script>
<s:SpriteVisualElement id="symbol" />
</s:Application>
Another approach would be to embed the symbol by linking a SWF from Flash Pro.
Flex MXML embed example:
<?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">
<fx:Script>
<![CDATA[
[Embed('assets/library.swf', symbol = 'ExampleSymbol')]
[Bindable]
public static var ExampleSymbolClass:Class;
]]>
</fx:Script>
<s:Image source="{ExampleSymbolClass}" />
</s:Application>

How to use repeater for componets inside swc

I build a swc file by Flash CS5 contains some interface component like TextInput, Label.
And then I use it in a flex program.
But I meet the problem when I want use flex repeater for this component.
Following is the a component defined by myself in swc file using Flash CS.
package {
import fl.controls.TextInput;
......
public dynamic class MyWindow extends UIMovieClip {
public var txt1 : TextInput;
......
}
}
}
Then I use it in my flex program like this:
<local:MyWindow id="myWindow"/>
<fx:Script>
<![CDATA[
......
private function Init() : void {
myWindow.txt1.text = "myText";
}
......
]]>
</fx:Script>
it works well.
But how can I use txt1 in mxml directly? like this:
<local:MyWindow id="myWindow" txt1.text="myText"/>
I know it doesn't work, but I want use repeater to create some similar MyWindow, it need bind the dataProvider. I wrote flex code like this:
<mx:VBox>
<mx:Repeater x="10" y="10" id="multiWindow">
<local:MyWindow txt1.text="{multiWindow.currentItem}"/>
</mx:Repeater>
</mx:VBox>
But it can't work.
Does anyone know how to make it work? Thanks.
=================================================================================
Update code, multiWindow complete code is :
package {
import fl.controls.TextInput;
import mx.flash.UIMovieClip;
import flash.display.DisplayObject;
import flash.events.EventDispatcher;
import flash.display.Sprite;
import flash.display.InteractiveObject;
import flash.display.MovieClip;
import flash.display.DisplayObjectContainer;
public dynamic class MyWindow extends UIMovieClip {
public var txt1 : TextInput;
public var txt2 : TextInput;
public var txt3 : TextInput;
}
}
Any component that you want to use withing an MX container needs to implement IUIComponent. I believe that Flash has a built in base class that you can extend for use with Flex, but you can also just do something like this:
<mx:VBox>
<mx:Repeater x="10" y="10" id="multiWindow">
<mx:UIComponent>
<local:MyWindow txt1.text="{multiWindow.currentItem}"/>
</mx:UIComponent>
</mx:Repeater>
</mx:VBox>
Note that if you haven't given thought to the Flex Component life cycle and layout system, it might not play well.

AddChild with Dynamic DispalyObject in Flex

I am pretty sure that this is totally what i need, however I can not get it to work for some reason. What i would like to do is call an arbitrary component that extends Canvas. Since there may be a variety of components named TestCanvasA, TestCanvasC, TestCanvasC which i won't know till run-time I figured this would be the way to go about it. Here is what i have.
<mx:Script>
<![CDATA[
import component.TestCanvas;
import mx.containers.Canvas;
import flash.display.Sprite;
import flash.utils.getDefinitionByName;
private function init(evt:Event):void{
var Type:String="TestCanvas";
var controlClass:Class = getDefinitionByName(Type) as Class;
this.addChild(new controlClass() as Canvas);
}
]]>
</mx:Script>
Any ideas would be awesome!
Give it the fully qualified class name:
var type:String="component.TestCanvas";
var controlClass:Class = getDefinitionByName(Type) as Class;
Also a mere import statement need not include the definition of the class in the compiled SWF unless there are references to the class inside the application. Just declare (need not initialize) a variable of that type somewhere in the SWF to make sure that the definition is indeed included.
var dummy:TestCanvas;

Access WindowedApplication from package class

I'm developing an AIR application, where i need to access
WindowedApplication's function from the package class.
This is the Main application (Partial code)
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="initApplication()">
<mx:Script>
<![CDATA[
import mx.events.CloseEvent;
import messages.MessageWindow
public function undock():void {
stage.nativeWindow.visible = true;
stage.nativeWindow.orderToFront();
//Clearing the bitmaps array also clears the applcation icon from the systray
NativeApplication.nativeApplication .icon.bitmaps = [];
}
]]>
</mx:Script>
</mx:WindowedApplication>
Package: (Partial code)
package messages
{
public class MessageWindow extends NativeWindow
{
public function MessageWindow():void
{
stage.addEventListener(MouseEvent.MOUSE_DOWN,onClick);
}
private function onClick(event:MouseEvent):void
{
****** Need to call the undock method from here. *****
}
}
}
Is it possible to call this way or suggest any other solution
Thanks in advance
Senling.
Even if I don't recommend this for the sake of your code design, you can access your method like this:
Application.application.undock()
(if your undock() method is public in the WindowedApplication )
Cant see why it shouldnt work. Go ahead and give it a try, and if any errors come up, post it here.
What you can maybe try is to add parentApplication in front of stage in the MessageWindow method, like this..
parentApplication.stage.addEventListener(MouseEvent.MOUSE_DOWN,onClick);
and then call the undock() method from the onClick() method

Problem with pulling out icons from resource bundle in Flex

I'm having trouble with getting icons from resource bundle in Flex. Here's the scenario:
Directory structure looks like this:
-ResourceManagerTest
-resources
-icons
-icon1.png
-icon2.png
-icons.properties
-src
-MyButton.as
-ResourceManagerTest.mxml
In icons.properties I have:
CIRCLE_FILLED=Embed("icon1.png")
CIRCLE_CONTOUR=Embed("icon2.png")
I'd like to create ToggleButtonBar with buttons whose icons are pulled out from resource bundle.
Here's the source of programmatically created button:
package
{
import mx.resources.ResourceManager;
public class MyButton extends Object
{
public var icon:Class;
public function MyButton()
{
super();
icon = ResourceManager.getInstance().getClass("icons", "CIRCLE_FILLED");
}
}
}
And here is ResourceManagerTest where I define the ToggleButtonBar:
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
[Bindable]
public var dataProvider:Array;
public function onCreationComplete():void {
dataProvider = new Array();
dataProvider.push(new MyButton());
dataProvider.push(new MyButton());
tgb.dataProvider = dataProvider;
}
]]>
</mx:Script>
<mx:ToggleButtonBar id="tgb"/>
Buttons do appear, however without any icons. What am I doing wrong?
Firstly it looks like you are not including the resource bundle in your build. You're probably going to need something like
<mx:Metadata>
[ResourceBundle("RegistrationForm")]
</mx:Metadata>
in the MXML or just
[ResourceBundle("RegistrationForm")]
at the top of your class
Once you've done that make sure you have the bundle... try adding just a string resource and see if you can get that. If you have the bundle and it still doesn't work have a play with different paths for you icons. They may not be relative to the resource (with out playing with it i can never remember what is relative to what).
The best resource I've found for information about how to setup ResourceBundle in Flex 3 is "Using Resources" in Adobe's livedocs.
[ResourceBundle("icons")]
In addition to including the resource bundle, you need to make sure you include the resource path at compile time. Read Adobe's docs for more information.

Resources