I've been out of Flex development for a while, and I'm trying to understand some code I'm coming across. I've included an example below, but the gist of it is, why are they using {} in the event handler? Isn't that binding? What's it binding for?
In the example below, what's the difference between using anEvent="{doSomething(event)}" and using anEvent="doSomething(event)"?
<mx:Script>
<![CDATA[
private static function doSomething(e:CustomEvent):void {
trace("something happens here");
}
]]>
</mx:Script>
<myComponents:CustomComponent
anEvent="{doSomething(event)}"
/>
// custom component definition
<?xml version="1.0" encoding="utf-8"?>
<mx:UIComponent
xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%"
height="100%">
<mx:Metadata>
[Event(name="anEvent", type="com.mydomain.CustomEvent")]
</mx:Metadata>
<mx:Script>
<![CDATA[
private function test():void
{
var e:Customevent = new CustomEvent("custom_event_name");
dispatchEvent(e);
}
/** #inheritDoc **/
override protected function commitProperties():void
{
super.commitProperties();
test();
}
]]>
</mx:Script>
</mx:UIComponent>
I don't think there is any difference in the two approaches in your case here. Method binding is helpful when you want to bind a particular property of a component to always use a return value from a function.
For example if you had a label and you wanted to bind it's text to a function which returns a string based on a bindable value, it would be useful in such a case.
Have a look here : http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf64c3d-7ff3.html#WS2db454920e96a9e51e63e3d11c0bf64c3d-7ff2
In the case you have presented above, it's just an event handler and since it's not returning any value (void), I do not see how the binding can really create a benefit here, hence it should not be used.
Moreover your event handler is a static method and as far as I know binding does not work with static methods
Hope this helps.
Related
I have built an extensive library to render complex data from several XML sources, and have abstracted some of these sources as classes which just extend Object. As an experiment, I began extending XMLListCollection in an attempt to make the data-handling implementation more integrated and Flex-like, but thus far mxmlc does not cooperate with a useful message.
The compilation which generates an error:
(fcsh) mxmlc -use-network=true -omit-trace-statements=false -debug=true xmllist_test.mxml
fcsh: Assigned 1 as the compile target id
Loading configuration file /dev/Flex SDK/frameworks/flex-config.xml
Recompile: xmllist_test.mxml
Reason: The source file wasn't fully compiled.
Files changed: 0 Files affected: 1
xmllist_test.mxml(-1): Error: Incorrect number of arguments. Expected 1.
<?xml version="1.0" encoding="utf-8" ?>
(fcsh)
The offending mxml, xmllist_test.mxml:
<?xml version="1.0" encoding="utf-8" ?>
<!-- xmllist_test -->
<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"
xmlns:maf="mafComponents.*"
creationComplete="makeItSo()"
backgroundColor="#FFFFFF">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mafComponents.examples.*;
public var maf:XML = MafExamples.ghp010; // defined statically in the package
public function makeItSo():void
{
trace('name', maf.#name);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- a comment -->
<mx:XMLListCollection id="mafSource1" source="{maf.block}"/> <!-- no problem -->
<maf:MafXMLListCollection id="mafSource2" metasource="maf}"/> <!-- won't compile -->
</fx:Declarations>
</s:Application>
I included in the above xmllist_test.mxml code an example which works using <mx:XMLListCollection>, but the whole compilation fails at the presence of my custom component <maf:MafXMLListCollection>.
I don't know how to interpret the compiler message, considering that xmllist_test.mxml(-1) seems to indicate an error before lines were counted, and the reporting of the xml declaration line.
I couldn't find any documentation on how to use fx:Declarations in this way, although it is stated as a place reserved for non-visual components, which mine is:
package mafComponents
{
import mx.collections.*;
/**
* An extension of XMLListCollection that specifically serializes the "block" elements of a MAF, while processing other information as well.
**/
public class MafXMLListCollection extends XMLListCollection
{
public var maf:XML;
public var mafXMLList:XMLList;
public var name:String;
private var _metasource:*;
/**
* Process the sequence of "blocks" in datasource to an XMLList to use as the parent class's "source" attribute
**/
public function set metasource(datasource:*):void
{
// multiple options for source, get it to the point of an XML with "maf" at the root
if (datasource is XML)
{
maf = datasource as XML;
}
mafXMLList = maf.block; // this expression returns an XMLList
name = 'MafXMLListCollection_' + maf.#name;
source = mafXMLList;
// do other stuff with the data structure here
// ...
}
/**
* #private
**/
public function get metasource():* { return _metasource; }
public function MafXMLListCollection(datasource:*)
{
super();
metasource = datasource;
// make the main list from the sequence of "block" sections in the XML
trace(name + '.length: ' + length);
}
}
}
Despite this problem, I can use the custom component through actionscript in the <fx:Script> tag without compilation errors. I just don't understand if the MXML compilation fails because I am making a syntactic error, or if my misunderstanding is at the philosophical level and I have attempted something that just isn't implemented.
Thank you in advance for any perspective you might offer on the subject.
1) Since MafXMLListCollection doesn't implement IVisualElement, it can't be included in the visual element declaration (hence the warning about the tag being required).
2) Since MafXMLListCollection has parameters to the constructor, you can't use the MXML format declaration. You must create the variable inside your <Script> block:
public var mafSource2:MafXMLListCollection = new MafXMLListCollection(maf);
Or, you could change MafXMLListCollection to have a default constructor, and use the metasource property (which you're already doing in the MXML).
The proposed UX I am trying to achieve is this:
user clicks menu item (via a listBase subclass: e.g. ButtonBar or TabBar)
prevent initial selection
validate if user needs to address issues (e.g. unsaved data on a form, etc.)
if valid, take selection and set the listBase to that selectedIndex, otherwise present warnings to user and cancel out the selection process altogether
This does not work as you'd expect. Utilizing the IndexChangeEvent.CHANGING type and the preventDefault works to kill the selection, but at step 4, when I am programmatically setting the selectedIndex of the listBase, it then tries to redispatch the CHANGING event (this despite what the API docs claim).
Here is a sample application src code if you'd like to try this for yourself. I look forward to your comments & solutions.
Thanks.
J
http://snipt.org/vUji3#expand
<?xml version="1.0" encoding="utf-8"?>
<s:Application minWidth="955" minHeight="600"
xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import flash.utils.setTimeout;
import mx.core.mx_internal;
import spark.events.IndexChangeEvent;
use namespace mx_internal;
[Bindable]
private var doPreventDefault:Boolean;
[Bindable]
private var delayMS:uint = 500;
private function buttonbar_changingHandler( event:IndexChangeEvent ):void
{
// TODO Auto-generated method stub
if ( doPreventDefault )
{
event.preventDefault();
setTimeout( delayedLogic, delayMS, event.newIndex );
}
}
private function delayedLogic( index:int ):void
{
//disabling this results in an endless loop of trying to set the selected index
// doPreventDefault = false;
//this should NOT be hitting the changing handler since we're supposed to be dispatching a value commit event instead.
bb.setSelectedIndex( index, false );
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>
<s:ButtonBar id="bb"
changing="buttonbar_changingHandler(event)">
<s:dataProvider>
<s:ArrayList>
<fx:String>btn 0</fx:String>
<fx:String>btn 1</fx:String>
<fx:String>btn 2</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:ButtonBar>
<s:CheckBox label="preventDefault?"
selected="#{ doPreventDefault }"/>
<s:NumericStepper maximum="5000" minimum="500"
stepSize="500" value="#{ delayMS }"/>
</s:Application>
Looking at the SDK, the IndexChangeEvent.CHANGING event is actually preventable - despite the documentation here says that cancelable is false, so my bad on that (although ASDoc went a little sideways), however things get a little interesting from here.
In ListBase #1296 this is only ever dispatched from the commitSelection(dispatchEvents:Boolean = true) method. In ButtonBarBase:dataProvider_changeHandler() is the only place that specifically calls to not dispatch the event, but in ListBase, it's called in commitProperties #939 when there is a proposedSelectionIndex.
So from your code above, if you are trying to set the selection - this is going to call the commitSelection, which I believe is causing the call stack issue. The Timer delay is just going to exacerbate the issue, since at 500ms the UI will have gone through its invalidation cycle at least once, meaning the commitSelection will be executed again because of an invalidateProperties flag is being set from the proprosedSelectionIndex eventually stemming from setSelectedIndex #729
So how to fix this.
I would look at only doing the prevent if the validation fails, otherwise allow it to proceed as normal. If it does fail, call the prevent, set an errorString or equivalent, but don't attempt to change the selection.
[edit] Read RiaStar's comment, and I just concurred with the same 'solution'.
Please understand: I am a total beginner at Actionscript and anything like Actionscript, and though I generally have some idea of what I'm doing as a programmer, I'm having some setbacks in self-learning this language and Flex Builder. Right now I'm trying to make a very simple implementation where a label effectively has its text added to multiple times over the first few seconds that the program is run. The problem I'm running into is that I can't just put all that into one function + one call on that function, as changes to the label's text are apparently not seen until that function runs its full course.
So I tried using a viewstack and cloning the canvas a few times, giving each canvas's version of that label a different bit of text. Then I set the initialize function for the viewstack to change the canvases on regular intervals over the first few seconds. But that didn't work either, as the difference isn't seen until the function runs its full course.
So then I tried putting function calls on the individual canvases' initialize attributes, and those functions aren't being called at all apparently.
What the heck? I know this probably isn't even the way that you're supposed to animate something in ActionScript or Flex, but I still would like to know how to approach the problem this way for future reference. What am I missing? Thanks!
As you've noticed, changes to the displayed output of your program can't happen in the middle of executing a function that you've written. ActionScript is single-threaded, which means that none of the framework code that updates the screen can run while your function is running.
If you're interested in learning exactly what happens in order to update the screen, do a search for "flex component lifecycle" and read some of the stuff you find. It's a bit advanced, but it was the thing that really helped me understand how the Flex framework works.
Anyway, on to your real question - how to animate something. There are many ways, but for your case of progressively adding text to a label, I'd probably use the Timer class.
Here is an 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"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
private var timer:Timer;
private var words:Array = ["The", "quick", "brown", "fox"];
private function startTimer(event:FlexEvent):void
{
timer = new Timer(1000, 1);
timer.addEventListener(TimerEvent.TIMER, updateText);
timer.start();
}
private privatefunction updateText(event:TimerEvent):void
{
theLabel.text += words.shift() + " ";
if (words.length > 0)
{
timer.reset();
timer.start();
}
}
]]>
</fx:Script>
<s:Label id="theLabel" text="" creationComplete="startTimer(event)"/>
</s:Application>
A basic approach would be to use data binding for the label value, and setTimeout() or setInterval() to cause the delay between updates.
Here is an 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"
initialize="init()"
minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
[Bindable]
private var displayString:String = "Detonation in ";
private var count:int = 5;
private var timer:uint;
private function init():void {
timer = setInterval(updateDisplay, 1000);
}
private function updateDisplay():void {
displayString += count + ".. ";
if (--count == 0) {
clearInterval(timer);
}
}
]]>
</fx:Script>
<s:Label text="{displayString}"/>
</s:Application>
I'm trying to get my Actionscript 3.0 model that links to an SQLite database using Probertson's SQLRunner class to talk to my flex component; I'm really unsure of how best to accomplish this. I have worked off a few examples, but I don't know the simplest way to tell my component the results of the SQL query. Anyone have any recommendations?
Here is some of the code, to give you an idea of what I'm working with right now.
Component
<fx:Declarations>
<model:Patient id="editedPatient" FirstName="{FirstName.text}" />
</fx:Declarations>
<fx:Script>
<![CDATA[
/*imports*/
protected var _patient:Patient;
public function get patient():Patient
{
return _patient;
}
[Bindable]
public function set patient(value:Patient):void
{
_patient = value;
}
private function creationCompleteHandler(event:FlexEvent):void{
_patient.getPatient(currentUser);
}
protected function save_clickHandler(event:MouseEvent):void
{
_patient.update(editedPatient);
}
]]>
</fx:Script>
<s:TextInput id="FirstName" text="{patient.FirstName}" />
<s:Button id="save" label="save" click="save_clickHandler(event)" />
Model
public function getPatient(PatientId:int):void {
var stmt:String = new String();
stmt = "SELECT * FROM Patient WHERE PatientID= #PatiendId;";
sqlRunner.execute(stmt, {PatientId:PatientId}, loadPatient_result, Patient);
}
private function loadPatient_result(result:SQLResult):void
{
if (result.data != null && result.data.length > 0)
{
var Patient:Patient = result.data[0];
}
}
There's a few things you can do...
First, I would create a Model that follows the Singleton pattern so you can bind to any data changes in any view, or component.
Second, I would then update that singleton'd model with in the loadPatient_result method you call.
If you want to de-couple from the result and the component, you could dispatch a custom event manually that contains the patient record, have the component listen for that kind of event and update itself accordingly. Or have that view listen for that event and update accordingly really.
You're on the right track. I think Singleton is what you need.
I've got a really simple flex application, with a main file Rec.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="215" minHeight="138" width="215" height="138" backgroundAlpha="0.0">
<fx:Script>
<![CDATA[
var rec:LRec = new LRec();
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:Application>
And an AS3 class:
package
{
import mx.core.Application;
import mx.events.FlexEvent;
public class LRec extends Application
{
public function LRec()
{
trace("CONSTRUCTED");
addEventListener(FlexEvent.APPLICATION_COMPLETE, this.mainInit);
}
/**
* After the application startup is complete, debug
*/
public function mainInit(event:FlexEvent):void {
trace("COMPLETE");
}
}
}
The trace ("CONSTRUCTED") is printed, but not "COMPLETE" -- it looks like the FlexEvent.APPLICATION_COMPLETE event is never registering. Any ideas why?
Also, this is the first time I've really done this sort of programming, so if anything else looks wrong, please tell me!
I've updated your code below with some comments on where you were going wrong. If you have any other questions feel free to ask.
Test.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="215" minHeight="138" width="215" height="138" backgroundAlpha="0.0"
initialize="handle_initialize(event)"
>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
// Probably want to keep your rec object around
private var rec:LRec;
// Construct your LRec instance in the Application's inititialize state,
// rather than declaring it statically.
protected function handle_initialize(event:FlexEvent):void
{
// Construct a new LRec instance, assign it to our private variable.
this.rec = new LRec();
// The <s:Applicaiton instance we define in this mxml is the object that
// will actually dispatch the applicationComplete event, so we want to
// listen for that here and pass it on to our LRec instance's mainInit
// method when it fires.
this.addEventListener(FlexEvent.APPLICATION_COMPLETE, this.rec.mainInit);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:Application>
LRec.as
package
{
import mx.events.FlexEvent;
// Don't inherit from Application, as you've already defined your application
// in your mxml, and you should have only one Application instance per application.
public class LRec
{
public function LRec()
{
trace("CONSTRUCTED");
// Doesn't need the event listener anymore.
// Do any instantiation needed.
}
/**
* After the application startup is complete, debug
*/
public function mainInit(event:FlexEvent):void {
trace("COMPLETE");
// Do any of the work that needs to wait for the applicationComplete
// event to fire.
}
}
}
Here's a good article (though a bit dated) on the Flex Instantiation Model.