Integrating Actionscript classes into Flex - apache-flex

I am trying to learn Flex and Actionscript. I found the Moock quiz example in Flash and want to turn it into a Flex application. I am trying to understand the relationship between the actionscript and the mxml. How do I take the class QuizApp and place its contents in a container in the mxml file?
MXML
<fx:Script>
<![CDATA[
import QuizApp;
var ms:QuizApp = new QuizApp;
protected function init():void
{
msc.addChild(ms);
}
]]>
</fx:Script>
<mx:VBox id="msc" />
Class
package {
import flash.display.Sprite;
import mx.controls.Button;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
public class QuizApp extends Sprite {
//for managing questions:
private var quizQuestions:Array;
private var currentQuestion:QuizQuestion;
private var currentIndex:int = 0;
public function QuizApp() {
quizQuestions = new Array();
createQuestions();
createButtons();
createStatusBox();
addAllQuestions();
hideAllQuestions();
firstQuestion();
}
... etc
}
}

I am trying to understand the relationship between the actionscript
and the mxml.
MXML is an ActionScript code generation language. When you write MXML, the Flex compiler does some "magic" to turn your MXML file into an ActionScript class. You can save this generated code by specifying the 'keep-generated-actionscript' argument to the Flex Compiler. I'll often shorten it to'-keep' and it works fine.
MXML masks a lot of the complexity that is going on under the scenes.
I hope that helps set your frame of expectations.
To use your "Flex agnostic" ActionScript Sprite Class inside of a MX Flex Container, you should be able to use it just like any other class you create. First, import the namespace at your top level tag of your component:
myNamespace:xmlns="*"
Then you should be able to use it, like this:
<myNamespace:QuizApp id="quizAppInstance" />
If you're using a Flex 4 Spark Container, you need something that implements IVisualElement; which a Sprite does not. However, you can wrap your own class inside of a SpriteVisualElement class without too much effort.

Related

Using mx components in spark skins

Since fontSharpness and fontThickness don't work in Flex 4, as it says here (though I'd like to be proven wrong), I have replaced every <s:Label/> in my application with <mx:Label/>.
Though it works well in panels and dialogs, it doesn't work in skins.
When I add skin parts to skins, they should extend a predefined class.
Say for promptDisplay in TextInputSkin I cannot use this:
<mx:Label id="promptDisplay"/>
where this:
<s:Label id="promptDisplay"/>
is supposed to be, because promptDisplay should extend an IDisplayText.
What is the best workaround for this?
Well, I suppose the quickest workaround would be to create your own Label class by subclassing mx Label and implementing IDisplayText. Something like this:
import mx.controls.Label;
public class MyLabel extends Label implements IDisplayText {
public function get isTruncated():Boolean {
return false;
}
}
Now you can use MyLabel wherever an IDisplayText is required and apply fontSharpness and fontThickness to it, since those two styles are inherited.
Be warned though that this will not work if a TextBase is required.

Flex : Unable to rotate header text in Datagrid

I'm having trouble in rotating the header text in my datagrid. I don't know understand the reason why its failing.Can someone help?
Datagrid column AS3 code:
dgc=new DataGridColumn();
dgc.dataField=columnName.gene;
dgc.labelFunction=gridLabelFunction
dgc.headerText=columnName.gene;
//dgc.headerWordWrap=true;
dgc.headerRenderer=new ClassFactory(VDGHeader);
dgc.width=20;
_datagridColumnsArray.push(dgc);
Please find my Header Renderer component below
import mx.controls.dataGridClasses.DataGridColumn;
import mx.managers.SystemManager;
[Bindable] private var text:String;
[Bindable] private var src:String;
override public function set data(value:Object):void{
var col:DataGridColumn = value as DataGridColumn;
text = col.headerText;
}
]]>
</fx:Script>
<mx:Label id="txtLbl" text="{text}" rotation="10" width="100%" />
This actually doesn't have anything to do with column headers.
To rotate text in Flex you must embed the font. Otherwise the rotation will simply be ignored.
See Adobe's docs on Embedding Fonts

How can I use TweenLite to implement effect of Flex's PopUpManager?

How can I use TweenLite to implement effect of Flex's PopUpManager?
I am using greensock tweenlite for sample
here a code for creating simple tweenlite effect on popup using PopUpManager
import com.greensock.TweenLite;
import mx.managers.PopUpManager;
import mx.containers.TitleWindow;
[Bindable]
private var titleWindow:TitleWindow;
private function createTweenlitePopup():void{
titleWindow=TitleWindow(PopUpManager.createPopUp(this,TitleWindow,true));
titleWindow.title = "This is my title window";
TweenLite.to(titleWindow, 1.5, {x:100});
}
and button calling createTweenlitePopup() to create popup is
<mx:Button click="{createPopup()}"/>
Hopes that helps

Making buttons link - Adobe flex - Blackberry Playbook

Maybe a simple question but I'm having alot of trouble making a button change the view of a Flex blackberry playbook app. I am coding it entirely in actionscript, no MXML.
myButton.addEventListener(MouseEvent.CLICK, doSomethingOnClick);
private function doSomethingOnClick(e:MouseEvent):void {
navigator.pushView(view.Login, "testdata");
}
When I try this I get:
1120: Access of undefined property navigator.
Which is weird as it works in a MXML file. How do I change views in actionscript?
Thanks
Phil
EDIT:
Cheer J_A_X, but now i have:
navigator = new ViewNavigator();
navigator.pushView(net.airpoint.assessments.view.Login, " ");
TypeError: Error #1009: Cannot access a property or method of a null object reference.
Apologies, as I realise this is really simple stuff but it just isnt clicking!
Update 2
*Assessments.as*
package
{
import flash.display.Sprite;
import flash.events.Event;
import net.airpoint.assessments.view.*;
import qnx.ui.core.Container;
import qnx.ui.core.ContainerAlign;
import qnx.ui.core.ContainerFlow;
import qnx.ui.core.Containment;
import qnx.ui.text.Label;
import spark.components.ViewNavigator;
[SWF(height="600", width="1024", frameRate="30", backgroundColor="#FFFFFF")]
/* Main Layout */
public class Assessments extends Sprite
{
//containers
private var main:Container;
private var menu:Container
private var firstLabel:Label;
private var navigator:ViewNavigator;
public function Assessments()
{
initializeUI();
}
private function initializeUI():void
{
main = new Container();
main.padding = Vector.<Number>([20,20,20,20]);
main.flow = ContainerFlow.HORIZONTAL;
main.debugColor = 0xFFCC00;
firstLabel = new Label();
firstLabel.text = "First label";
firstLabel.size=35;
main.addChild(firstLabel);
addChild(main);
navigator = new ViewNavigator();
navigator.pushView(Login, " ");
}
}
}
Login.as
package net.airpoint.assessments.view
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import qnx.ui.buttons.Button;
import qnx.ui.core.Container;
import qnx.ui.text.Label;
import qnx.ui.text.TextInput;
import spark.components.View;
public class Login extends View
{
private var usernameLabel:Label;
public function Login()
{
initializeUI();
}
public function initializeUI():void
{
usernameLabel.text = "test";
this.addChild(usernameLabel);
}
}
}
Something isn't right. If it's a Flex Mobile Project, you need an Application at the top level (you know, like how Flash Builder created the project with an mxml file). Either you create an actionscript file that extends Application as mentioned here or you just use an mxml file for the root component.
However, your argument to 'not use mxml' is redundant if you're using Flex components. If you're using Flex components, you're using mxml no matter what, so there's no performance increase. If anything, RIM is recommending to use AS only because their SDK is AS only (which is idiotic anyways). You could always add their UI component through AS in mxml files.
So really, the point is moot and you should just use mxml anyways since it's better than straight AS for UI layout and skinning. Either that or go Pure AS with no Flex components.
I think using Sprite is ok in an ActionScript project.
But if you're using ActionScript instead of Flex just because of the QNX components, then you could switch your project to Flex and follow these instructions to use the QNX components there: Using qnx.ui.picker.Picker in mobile Flex Hero project for Blackberry Playbook

Set window size for standalone application

I want to set the default window size for a flex application that runs with a standalone player.
I set width and height to 100% to be able to get the ResizeEvent and being able to adjust the layout if the user changes the window size. But I'd like to also define a default size.
There's two ways to set the default size of a swf:
1) add a compiler argument:
-default-size=800,600
2) use metadata in your flex main mxml or class
mxml:
<mx:Metadata>
[SWF(width='800', height='600')]
</mx:Metadata>
class:
[SWF(width='800', height='600')]
public class Main extends Application {}
This will tell the compiler what values to put in the header tag of the swf.
I solved it this way:
setting the application to a fixed size on startup, and adjusting it when the stage (here: the window) is resized
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="900" height="600"
applicationComplete="appComplete();">
<mx:Script>
<![CDATA[
private function appComplete():void {
stage.addEventListener(Event.RESIZE, onStageResize);
}
private function onStageResize(e:Event):void
{
this.width = this.stage.stageWidth;
this.height = this.stage.stageHeight;
validateNow();
}
I'm not sure you can. You can do it with air though. Why would you want a standalone flex app that isn't air? The setting is the air xml file

Resources