I have a View class EmployeeList as follows:
<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:parsley="http://www.spicefactory.org/parsley"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
<fx:Script>
<![CDATA[
import cafeparsley.model.EmployeeListPM;
[Inject]
[Bindable]
public var model : EmployeeListPM;
[Init]
public function init () : void {
model.init();
}
]]>
</fx:Script>
<s:Panel title="Employee List" horizontalCenter="0">
<s:HGroup paddingTop="50">
<s:Button label="Add New Employee" click="model.addNewEmployee()" />
<mx:Spacer width="100%" />
<s:Button label="Logout" click="model.logout()" />
<mx:Spacer width="100%" height="20" />
</s:HGroup>
<s:List id="empList" dataProvider="{ model.employees }" labelFunction="model.properName"
change="model.initUpdateEmployee(empList.selectedItem);empList.selectedIndex = -1;" width="100%" />
<s:Label id="error" color="0xFF0000" />
</s:Panel>
</s:NavigatorContent>
The PM looks like this:
package cafeparsley.model
{
import cafeparsley.events.EmployeeEvent;
import cafeparsley.events.NavigationEvent;
import cafeparsley.services.impl.EmployeeServiceImpl;
import cafeparsley.vo.Employee;
import flash.events.EventDispatcher;
import mx.collections.ArrayCollection;
import mx.rpc.IResponder;
[Bindable]
[Event(name="navigationEvent", type="cafeparsley.events.NavigationEvent")]
[ManagedEvents("navigationEvent")]
public class EmployeeListPM extends EventDispatcher implements IResponder
{
public var employeeService : EmployeeServiceImpl = new EmployeeServiceImpl();
public var employees : ArrayCollection;
public function init() : void
{
loadEmployees();
}
public function EmployeeListPM()
{
}
public function loadEmployees():void
{
employeeService.loadEmployees( this );
}
Regardless of whether I use or autowiring to perform injection, when I run this I get a the following error message:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at cafeparsley.view::EmployeeList/_EmployeeList_List1_i()[C:\dev\code\workspace\Examples\CafeParsley\src\cafeparsley\view\EmployeeList.mxml:29]
at cafeparsley.view::EmployeeList/_EmployeeList_Array2_c()
at mx.core::DeferredInstanceFromFunction/getInstance()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\DeferredInstanceFromFunction.as:105]
at spark.components::SkinnableContainer/createDeferredContent()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:985]
at spark.components::SkinnableContainer/createContentIfNeeded()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:1014]
at spark.components::SkinnableContainer/createChildren()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:827]
at mx.core::UIComponent/initialize()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UIComponent.as:7349]
at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UIComponent.as:7241]
at mx.core::UIComponent/addChildAt()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UIComponent.as:6947]
at spark.components::Group/addDisplayObjectToDisplayList()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\Group.as:1825]
at spark.components::Group/http://www.adobe.com/2006/flex/mx/internal::elementAdded()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\Group.as:1416]
at spark.components::Group/setMXMLContent()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\Group.as:512]
at spark.components::Group/set mxmlContent()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\Group.as:452]
at spark.components::SkinnableContainer/set mxmlContent()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:604]
at spark.components::SkinnableContainer/createDeferredContent()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:986]
at spark.components::SkinnableContainer/createContentIfNeeded()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:1014]
at spark.components::SkinnableContainer/createChildren()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:827]
at spark.components::NavigatorContent/createChildren()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\NavigatorContent.as:225]
at mx.core::UIComponent/initialize()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UIComponent.as:7349]
at cafeparsley.view::EmployeeList/initialize()
So the employeeListPM is null when the error is thrown. However if I comment out the
<s:List> component, rerun and set a breakpoint in the init method, init() will get called. So it's not that my context config is wrong, it's just that the PM hasn't been injected in time and the error is thrown. But according to the Parsley manual if I use autowiring or <parsley:configure/> the PM should be injected by the time it is needed.
I can't see what is I am doing wrong in what I thought was a relatively trivial dependency injection scenario. Can you help?
A couple of points here:
Your example doesn't include the <Configure /> or <FastInject /> tags, however since you mention them in your post I'll assume that they're just missing from the sample code. (If not, then you need to add one of these for this to work).
However, more likely, you have race conditions in your code.
Specifically, these lines:
labelFunction="model.properName"
change="model.initUpdateEmployee(empList.selectedItem);empList.selectedIndex = -1;"
Model is an injected property, however it's not guaranteed to have been injected at the time that the code is first run.
Instead, move the code into script within the class which performs a null check, and then defers logic back to the PM.
ie:
labelFunction="nameFunction"
private function nameFunction(item:Object):String
{
return (model) ? model.properName(item) : "";
}
Another thing to consider is that you are calling model.init() from the View's function marked with the Parsley [Init] metatag. I would suggest that you apply the same [Init] metatag to the init() method of the Model.
[Init]
public function loadEmployees():void {
employeeService.loadEmployees( this );
}
Do this rather than calling model.init() from the view. Altho the Lifecycle documentation states:
The methods marked with [Init] get invoked after the object has been instantiated and all injections have been processed.
I've had much more consistent results not calling any init() methods between injected objects directly but rather utilizing the metadata tag approach.
Related
I am currently trying to put together a simple Illustrator plugin, and coming from a design background this is proving to be quite a task, I have experience with JS, but not with Flex.
What I want to do is to have a panel in Illustrator, with an input field and a button. You type something in the input and press the button and a text frame with the desired text is added to the canvas.
But how do I pass the value from a mx:Textinput to the Controller.as file? I couldn't find an answer on the web.
This is my main.mxml file:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" historyManagementEnabled="false">
<mx:Script>
<![CDATA[
private var c:Controller = new Controller();
]]>
</mx:Script>
<mx:VBox height="100%" width="100%" verticalAlign="middle" horizontalAlign="center">
<mx:Label text="myVariable"></mx:Label>
<mx:TextInput name="TextValue"/> // I want the text value to be passed to the Controller class so I can pass it on to my JSX function
<mx:Button label="Run" click="c.run()"/>
</mx:VBox>
</mx:Application>
And this is my Controller.as file:
package
{
import flash.external.HostObject;
public class Controller
{
[ Embed (source="myScript.jsx" , mimeType="application/octet-stream" )]
private static var myScriptClass:Class;
public function run():void {
var jsxInterface:HostObject = HostObject.getRoot(HostObject.extensions[0]);
jsxInterface.eval( new myScriptClass ().toString());
//calling from AS to JSX
jsxInterface.myJSXFunction (myVariable); //This is where I want the value to be passed to
}
}
}
You might also pass the string directly to the c.run() call.
public function run(myString:String):void {
...
jsxInterface.myJSXFunction (myString)
...
and then
<mx:TextInput id="TextValue"/>
<mx:Button label="Run" click="c.run(TextValue.text)"/>
Just another approach.
Loic
First declare public property public var myTextValue : String; in your Controller.
Then declare bidirectional binding in your MXML <mx:TextInput text="#{c.myTextValue}"/>
Now you have myTextValue property always containing the actual value.
But bidirectional binding was introduced not that long time ago.
Alternatively, you can add a change event listener to your TextInput instance <mx:TextInput id="myTextInput" change="c.myTextValue = myTextInput.text"/>
I'm trying to figure out the right approach for "Code behind" using flash builder for a mobile app:
I'm creating a flex mobile AIR project (Based on the "Tabbed view" template)
setting my UI in design mode
now I want all the logic to be in a separate class that will change the UI look accordingly
Sounds easy, however I can't really get the approach for doing it, any help is appreciated :)
Update:
main app:
<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160">
<s:ViewNavigator label="a" width="100%" height="100%" firstView="views.aView"/>
<s:ViewNavigator label="b" width="100%" height="100%" firstView="views.bView"/>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:TabbedViewNavigatorApplication>
view A:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="a">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label id="txt" x="280" y="139" text="Label"/>
</s:View>
So now I want MyClass to change txt textField according to my logic, what is the right approach?
An elegant way would be implementing IMXMLObject. When implementing this interface, the IMXMLObject#initialize method will take the component (named document of type Object) and an optional id (of type String) as arguments and u can easily implement this pattern. The big advantage is, that you use composition over inheritance and when using interfaces, you can use it as some sort of type save mix-in as view behavior:
package net.icodeapp.examples.views
{
import flash.events.MouseEvent;
import mx.core.IMXMLObject;
import mx.events.FlexEvent;
public class ViewBaseModel implements IMXMLObject
{
//-------------------------------------------------------------------------
//
// Properties
//
//-------------------------------------------------------------------------
private var _id:String;
private var _viewBase:ViewBase;
protected function set viewBase(value:ViewBase):void
{
_viewBase = value;
if (!_viewBase)
throw new ArgumentError('View must be instance of ViewBase');
if (!_viewBase.initialized)
_viewBase.addEventListener(FlexEvent.CREATION_COMPLETE, viewBase_creationCompleteHandler, false, 0, true);
else
viewCreationCompleted();
}
//-------------------------------------------------------------------------
//
// Constructor
//
//-------------------------------------------------------------------------
public function ViewBaseModel()
{
}
//-------------------------------------------------------------------------
//
// Methods
//
//-------------------------------------------------------------------------
public function initialized(document:Object, id:String):void
{
viewBase = document as ViewBase;
_id = id;
}
private function viewCreationCompleted():void
{
_viewBase.addEventListener(MouseEvent.CLICK, viewBase_clickHandler);
}
//-------------------------------------------------------------------------
//
// Event Handler
//
//-------------------------------------------------------------------------
private function viewBase_creationCompleteHandler(event:FlexEvent):void
{
viewCreationCompleted();
}
private function viewBase_clickHandler(event:MouseEvent):void
{
// todo: do some action
}
}
}
The model is initialized and references are set by the framework. When taking a peek at the generated ActionScript code you'll see, that IMXMLObject#initialize it called in the constructor after the model is instantiated.
<?xml version="1.0"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:views="net.icodeapp.examples.views.*">
<fx:Declarations>
<views:ViewBaseModel/>
</fx:Declarations>
</s:Group>
The model would receive by events by the view and can call methods on it.
All you do is make an AS file that has the same base class as whatever your MXML object was initially set up as, for example if it's a VGroup make MyBaseClass extends VGroup, then change the VGroup to MyBaseClass.
Example
[Main.mxml]
<main:MainBase
xmlns:main="*"
...>
</main:MainBase>
[MainBase.as]
public class MainBase extends Application
Think of your Code Behind as a base class (or an Abstract Class). In an Abstract Class, it is really common for the actual implementation of methods or the "real objects" behind properties to be left to the extending class(es) to supply.
This is exactly like what you do when you set a base class in Flash to your custom Class, but the actual member objects (buttons, etc.) are provided on the stage of the MovieClip whose library instance is linked to your clip.
For more on code behind, check out my blog post here. If you'd like to check out the code for the template component described there, look here. Though template components are less useful in the Spark world (IMO).
I have a CustomDataGrid that extends from DataGrid and CustomDataGridColumn that extends from DataGridColumn.
CustomDataGridColumn has member variables of type Function.
Inside my view, I inject a presentation model using parsley.
The code is as follows:
<fx:Declarations>
<spicefactory:Configure/>
</fx:Declarations>
<fx:Script>
[Inject(id="associatedDocumentsPM")]
[Bindable]
public var model:AssociatedDocumentsPM;
</fx:Script>
<customDataGrid:CustomDataGrid id="AssocDocGrid"
width="100%" height="{(documentDataList.length+2)*20}"
doubleClickEnabled="true" enabled="{modeHandler.appEnable}"
dataP="{documentDataList}"
sortableColumns="false">
<customDataGrid:columnList>
<customDataGrid:CustomDataGridColumn
textAlign="left"
dataFieldIdentifier="documentName"
headerText="Document Type"
modifyLabelField="{model.modifyLabelField}"
dataField="documentName"
isNaNZero="true"
showDataTips="true"
editable="false"/>
...more columns here...
</customDataGrid:columnList>
</customDataGrid:CustomDataGrid>
The AssociatedDocumentsPM has functions defined and these are set in the columns.
One example being for attribute modifyLabelField="{model.modifyLabelField}"
CustomDataGridColumn.myLabelField is of type Function. myLabelField inside AssociatedDocumentsPM is a public function.
The Parsley Context file is in the parent of the above file and declares the PM as follows:
AssocDocPMFactory is a class with a sole function decorated with [Factory].
So the problem is the following:
When I debug the application and check the columnList of the DataGrid, the variable modifyLabelField is null.
Are function bindings treated differently than variables? I'm using Flex 4.5.1 together with Parsley 2.4.1
I understand that injection could happen after creationComplete is invoked but I thought the binding would take care of that.
I have a feeling that the model - the PM - is null until much much later and the function binding is not triggered.
I tried to use FastInject as well but to no avail.
Is this a problem with function pointers and Flex binding?
No it isn't. If you have these kind of doubts, it's always a good idea to quickly set up a simple isolated test situation that verifies your assumption. I created the following to test yours:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="onCreationComplete()" >
<fx:Script>
<![CDATA[
private function onCreationComplete():void {
test = function(item:*):String {
return "AAA";
}
}
[Bindable]
private var test:Function;
]]>
</fx:Script>
<s:List labelFunction="{test}">
<s:dataProvider>
<s:ArrayList>
<fx:String>A</fx:String>
<fx:String>B</fx:String>
<fx:String>C</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:Application>
If the test Function variable is declared Bindable, you'll see 3 times "AAA". If you remove the Bindable metadata, you'll see "A", "B", "C".
So clearly binding works with function pointers too (and you'll have to look elsewhere to find your nullpointer).
Please enlighten this flex noob. I have a remoteobject within my main.mxml. I can call a function on the service from an init() function on my main.mxml, and my java debugger triggers a breakpoint. When I move the remoteobject declaration and function call into a custom component (that is declared within main.mxml), the remote function on java-side no longer gets called, no breakpoints triggered, no errors, silence.
How could this be? No spelling errors, or anything like that. What can I do to figure it out?
mxml code:
< mx:RemoteObject id="myService"
destination="remoteService"
endpoint="${Application.application.home}/messagebroker/amf" >
< /mx:RemoteObject >
function call is just 'myService.getlist();'
when I move it to a custom component, I import mx.core.Application; so the compiler doesn't yell
my child component: child.mxml
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" >
<mx:Script>
<![CDATA[
import mx.core.Application;
public function init():void {
helloWorld.sayHello();
}
]]>
</mx:Script>
<mx:RemoteObject id="helloWorld" destination="helloService" endpoint="$(Application.application.home}/messagebroker/amf" />
<mx:Label text="{helloWorld.sayHello.lastResult}" />
</mx:Panel>
my main.mxml:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" xmlns:test="main.flex.*" >
<mx:Script>
<![CDATA[
[Bindable]
public var home:String;
[Bindable]
public var uName:String;
public function init():void {
//passed in by wrapper html
home = Application.application.parameters.appHome;
uName = Application.application.parameters.uName;
}
]]>
</mx:Script>
<test:child />
</mx:Application>
The child components are calling creationComplete before the parent (so home is null). A solution is to throw an event (like InitDataCompleted) from the parent after you read the data, and in the child components listen for this event (so don't rely on creationcomplete in the child).
However more important than that is how can you diagnose in future this kind of problems. A simple tool like a proxy (eg Charles) should help.
For your endpoint value you've got
endpoint="$(Application.application.home}/messagebroker/amf"
Why are you using $( before Application.application... This should be a { as in:
endpoint="{Application.application.home}/messagebroker/amf"
I have several components where I want to enable buttons based on passing a username to a function. I want to dynamically bind the "enabled" property on a button so that if the "somethingChanged" event fires, a button may become enabled or disabled.
But, I'm not sure where to fire the "somethingChanged" event. It's possible that I may need to fire the "somethingChanged" event from several places in the application. Is this possible with a bound static function?
Am I going about this the right way or is there a better solution?
EventManager.as
public class EventManager():void
{
[Bindable(event="somethingChanged")]
public static function hasAccess(myVal:String):Boolean
{
}
}
testform1.mxml
<s:Button id="testButton1" enabled="{EventFunction.hasAccess("john")}" />
<s:Button id="testButton2" enabled="{EventFunction.hasAccess("mary")}" />
<s:Button id="testButton3" enabled="{EventFunction.hasAccess("beth")}" />
testform2.mxml
<s:Button id="testButton4" enabled="{EventFunction.hasAccess("tom")}" />
<s:Button id="testButton5" enabled="{EventFunction.hasAccess("bill")}" />
<s:Button id="testButton6" enabled="{EventFunction.hasAccess("jerry")}" />
Something like this would work.
package
{
import flash.events.Event;
import flash.events.EventDispatcher;
public class EventManager extends EventDispatcher
{
[Bindable(event="somethingChanged")]
public var hasAccess:Boolean = true;
public static var instance:EventManager = new EventManager();
public static function setHasAccess(hasAccess:Boolean):void
{
instance.hasAccess = hasAccess;
instance.dispatchEvent(new Event("somethingChanged"));
}
}
}
Which would be used like so:
<?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/halo">
<fx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void
{
EventManager.setHasAccess( false );
}
]]>
</fx:Script>
<mx:Button click="button1_clickHandler(event)" enabled="{EventManager.instance.hasAccess}"/>
</s:Application>
I don't know that this approach is a good one. This type of functionality would probably be better served inside a proper MVC structure. This is essentially creating a singleton. To implement it as you describe, you'd probably want some sort of instance per user I suppose. You aren't going to be able to bind to a static function though.