I want to change Property Of Custom Component Popup From Main.mxml (Main Application)
My Custom Component is ->
public class PropertyPanel extends Panel
.....
in it I have
public function minimisePanel(e:MouseEvent):void{
effResize.heightTo = previousHeight;
effResize.widthTo = 200;
this.x = parentApplication.width - 320;
effResize.play([this]);
}
In Main Application I Called It As -->
private function AddPropertiesPanel():void{
var PropWindow:IFlexDisplayObject;
PropWindow = PopUpManager.createPopUp(this, Property_Panel, false);
/*Property_Panel is Property_Panel.mxml*/
}
And In Main Application I Want to -->
public function setCurrObj(event:TransformEvent):void{
/*Some Magical Stuff Required Here*/
}
Instead of storing the popup as a variable local to the function; store it as an instance variable on the Main.mxml class:
public var PropWindow:IFlexDisplayObject;
The AddPropertiesPanel() method will change like this:
private function AddPropertiesPanel():void{
PropWindow = PopUpManager.createPopUp(this, Property_Panel, false);
/*Property_Panel is Property_Panel.mxml*/
}
And then you can easily access properties on the panel instance in other methods:
public function setCurrObj(event:TransformEvent):void{
PropWindow.someProperty = someValue
}
Related
//Base.as
public class Base
{
private var _foo:String;
[Bindable]
public function set foo(value:String):void
{
_foo = value;
}
public function get foo():String
{
return _foo;
}
/*
Many many setter/getter, methods, events
*/
}
//Control.as
public class MyControl extends Group
{
public function MyControl()
{
}
}
//Window.as
public class MyWindow extends spark.components.Window
{
public function MyWindow()
{
}
}
//Module
public class MyModule extends spark.modules.Module
{
public function MyModule()
{
}
}
I want to expose (friendly) Base properties, methods and events on the other classes. Something like this:
var window:MyWindow = new MyWindow();
window.foo = 'Hello World!';
var module:MyModule = new MyModule();
module.foo = 'bar';
<namespace:MyControl foo="Hello World!"/>
I don't want define all the properties in each class because they are many and the same for all of them.
Ideally would define something like:
public class MyControl extends Group, Base
{
public function MyControl()
{
}
}
(I know it can't be done.)
Thanks!
UPDATE:
Thanks again!
Maybe this clarify more my need... On business layer I have a variable called processID (and businessID, operationID, localityID, etc.) what be passed to Window from Menu, and Window passes it to Module. On Module Container, I have a CustomComponent what query database using this variable as parameter. This applied for all (almost) Components on Module. These variables are defined as level business layer, then I define a Class to store and manage these variables (and some related methods operating with these variables using business logic), so I can make a standalone class (or library) for every environment to reusing my common components. The idea is... insert a new CustomComponent and set these variables via mxml, like this:
<custom:MyCustomComponent id="zzz" processID="{processID}" businessID="{businessID}"/>
Module has the business logic for set (o not) any of the variables.
Otherwise, I would have to implement different logic for the CustomComponent (and Module) for read parent's variables and define these variables only in MyWindow (using composite pattern).
You can get your answer from following link -
http://flexinonroids.wordpress.com/2009/05/27/flex-3-dynamically-loading-components-at-runtime/
http://thecomcor.blogspot.in/2007/11/adobe-flex-dynamically-loading-classes.html
Or you can follow below approach -
1) Create an Interface as base
2) Extend your class with interface
3) Load class at runtime with SWFLoader.loaderContext.applicationDomain.getDefinition method
Thanks,
Varun
You can place your classes that require friendly access in the same package as your Base class, and define private fields without any access modifier( it is equivalent to internal modifier).
Otherwise, you can define your namespace like that:
namespace my_internal;
and then define class members like that:
my_internal var _foo:String;
after that, those members will be hidden for all code, except for code that contains
use namespace my_internal;
You can read more here:
http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7f9e.html#WS5b3ccc516d4fbf351e63e3d118a9b90204-7f91
However, using 'friend access' can be an evidence of bad design, so if I were you I'd think twice before defining namespaces.
Update:
pseudo-superclass 1:
package proxy
{
public class Simple1
{
public var x:int;
public var y:int;
}
}
pseudo-superclass 2:
package proxy
{
import mx.controls.Alert;
public class Simple2
{
public var name:String = 'noname';
public function doAlert():void{
Alert.show(name);
}
//not normal method to replace 'this' with proxy
Simple2.prototype.doCrossClass = function doCrossClass():void{
Alert.show(''+(Number(this['x'])+Number(this['y'])));
}
}
}
Code for testing the result (looks as what you are expecting?):
var mega:Mega = new Mega();
mega.x = 100;
mega.y = 200;
mega.name = 'Multiple inheritance';
mega.doAlert();
mega.doCrossClass(); //300
And now pseudo-subclass with multiple inheritance:
package proxy
{
import flash.utils.Proxy;
import flash.utils.flash_proxy;
public dynamic class Mega extends Proxy
{
public function Mega()
{
super();
}
public var superArray:Array = [new Simple1(), new Simple2()];
flash_proxy override function getProperty(name:*):*{
for each(var superClass:Object in superArray){
if( name in superClass){
return superClass[name];
}
}
throw new Error('no such property');
}
flash_proxy override function setProperty(name:*, value:*):void{
for each(var superClass:Object in superArray){
if( name in superClass){
superClass[name] = value;
return;
}
}
throw new Error('no such property');
}
flash_proxy override function callProperty(name:*, ...args):*{
for each(var superClass:Object in superArray){
if( name in superClass){
var f:Function = superClass[name] as Function;
return f.apply(this, args);
}
}
throw new Error('no such function');
}
}
}
You can also want to use javascript-like class construction(i.e. just using simple Object and assigning properties and functions to it in any combinations you want).
I'm (slowly) learning Flex 4 and working on skinning a custom component that extends SkinnableComponent. The component is all in ActionScript and essentially looks like this:
package components
{
import spark.components.supportClasses.SkinnableComponent
[SkinState("normal")]
[SkinState("over")]
[SkinState("selected")]
public class AccountSummary extends SkinnableComponent
{
[Bindable]
public var itemIndex:int = 0;
[Bindable]
public var accountName:String = "";
[Bindable]
public var accountNumber:String = "";
[Bindable]
public var currentBalance:String = "";
[SkinPart(required="true")]
public var lblAccountName:Label;
[SkinPart(required="true")]
public var lblCurrentBalance:Label;
[SkinPart(required="true")]
public var lblAccountNumber:Label;
[SkinPart(required="true")]
public var lblLastUpdated:Label;
public function AccountSummary()
{
super();
lblAccountName.text = accountName;
lblCurrentBalance.text = currentBalance;
lblAccountNumber.text = "Acc: " + accountNumber;
lblLastUpdated.text = "Last Updated: ";
}
override protected function getCurrentSkinState():String
{
return "normal";
}
}
}
The issue I'm having is on NULL REFERENCES in the Constructor for the various SkinParts, because they're not created yet. I'm trying to find out when is the best time to access them to assign their .text values. I know I can override partAdded() and add the .text value as each part is added, but I'd rather just listen for some magic event that is dispatched when they're all available.
I'm not sure whether or not it matters, but the accountName, accountNumber variables are assigned by using a repeater with a dataProvider on the host component. I'm not sure if that too has something to do with when the data is available to the AccountSummary component - which may also needed to be waited on. I was able to successfully use FlexEvent.CREATION_COMPLETE to assign all my .text values to the SkinParts, but is that the right event/best practice? Any help would be greatly appreciated!
You need to read up on the Flex 4 Component LifeCycle, specifically the piece about component instantiation. Nothing will be created at the time the constructor executes. The values you are referencing (accountName, lblCurrentBalance. etc...) will not have moved beyond the default states either.
You want to set your default values in the partAdded() method. Rewrite your constructor code to something like this:
public function AccountSummary()
{
super();
}
override protected function partAdded(partName : String, instance: Object):void{
super.partAdded(partName, instance);
if(instance == lblAccountName){
lblAccountName.text = accountName;
else if(instance == lblCurrentBalance){
} else if (instance == lblCurrentBalance){
lblCurrentBalance.text = currentBalance;
} else if (instance == lblAccountNumber){
lblAccountNumber.text = "Acc: " + accountNumber;
} else if (instance == lblLastUpdated){
lblLastUpdated.text = "Last Updated: ";
}
}
If you're a new programmer, you may want to devote some time to learning some basic programming concepts. This ActionScript 3 Guide may help you get started. If you have experience in other languages, but are new to Flex, I strongly suggest spending a couple of days reading through the full flex documentation to help get your head around it.
I am building a AS3 only project and got runtime error that said "Cannot access a property or method of a null object reference."
Here is my code:
main.as
public class videoMain extends Sprite{
private var videoPlayer:Player;
public function videoMain (){
loadPlayer()
loadProgress();
}
private function loadProgress():void{
//the code below gave me null object error.....
var byteLoaded:Number=videoPlayer.videoBytesLoaded; //the problem code
var byteTotal:Number=videoPlayer.videoBytesTotal; //the problem code
var percent:Number=Math.floor(byteLoaded/byteTotal)*100;
}
private function loadPlayer():void{
videoPlayer= new Player();
videoPlayer.createPlayer();
}
}
Player.as
public function createPlayer():void{
_loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
_loader.load(new URLRequest(playerType));
}
public function get videoBytesLoaded():Number{
return _Player.getVideoBytesLoaded(); //youtube api method
}
public function get videoBytesTotal():Number{
return _Player.getVideoBytesTotal; //youtube api method
}
private function onLoaderInit(event:Event):void {
_Player=_loader.content;
//only show part of codes....
}
I appreciate any help....Thanks!!!!!
_Player is only defined after the Event.INIT has fired so any call before the _Player value is defined will throw an error.
You should, at the minimum , have this:
public function videoMain (){
loadPlayer()
}
private function onLoaderInit(event:Event):void {
_Player=_loader.content;
//only show part of codes....
loadProgress();
}
but progress events are not static so really you should have an enterFrame event listener in order to listen to the changing values...
private function onLoaderInit(event:Event):void {
_Player=_loader.content;
//only show part of codes....
addEventListener(Event.ENTER_FRAME , enterFrameListener);
}
private function enterFrameListener(event:Event):void
{
loadProgress();
// and here you add some way to remove this event listener when
// the video is fully loaded
}
in main.mxml :
public function init():void
{
PopUpManager.createPopUp(this,login,true);
}
<mx:ViewStack id="vs" label="content" >
<local:FrontPanel id="Fpanel" />
<local:SlavePanel id="Spanel" />
<local:AdminPanel id="Mpanel" />
</mx:ViewStack>
In Login.mxml :
public function authenticateRH(event:ResultEvent):void
{
var replyMsg:String=event.result as String;
switch(replyMsg)
{
case "Master" :
here i want invoke Mpanel from Main.mxml
break;
case "Slave" :
here i want invoke Spanel from Main.mxml
break;
case "fail" :
Alert.show("Login Incorrect!!");
return;
}
}
How can i selectchild of main.mxml's Viewstack from login.mxml ?
I would use events (and interfaces), that way your forms don't need to know as much about one and other. It also gives you more control on what happens after your popup closes (IMHO).
Here is a little example (if I can get the code to paste correctly). This example does not use an interface that would help decouple things. I also use dynamic events that make prototyping faster but you will want to define a formal event.
simulate your main:
import mx.events.DynamicEvent;
import mx.managers.PopUpManager;
private function btnClick(e:Event):void
{
vs.selectedIndex = 0;
var myLogin:myPopup = new myPopup();
myLogin.addEventListener
(
"WAS_CLOSED",
function(e:DynamicEvent):void { vs.selectedIndex = e.byButton; }
);
PopUpManager.addPopUp(myLogin, this, true);
PopUpManager.centerPopUp(myLogin);
}
simulate your login:
import mx.events.DynamicEvent;
import mx.managers.PopUpManager;
private var eClose:DynamicEvent = new DynamicEvent("WAS_CLOSED");
private function closeMe(byButton:int):void
{
eClose.byButton = byButton;
dispatchEvent(eClose);
PopUpManager.removePopUp(this);
}
<mx:Button x="122" y="250" label="Thing 1" click="closeMe(1);" />
<mx:Button x="195" y="250" label="Thing 2" click="closeMe(2);" />
public function init():void
{
var popup:IFlexDisplayObject = PopUpManager.createPopUp(this, Login, true);
popup.addEventListener(Event.SELECT, onSelect);
}
private function onSelect(e:CustomEvent):void
{
if(e.item == CustomEvent.MASTER)
{
vs.selectedItem = Mpanel;
}
else if(e.item == CustomEvent.SLAVE)
{
vs.selectedItem = Spanel;
}
//remove popup
PopUpManager.removePopUp(IFlexDisplayObject(e.target));
}
//Login.mxml :
public function authenticateRH(event:ResultEvent):void
{
var replyMsg:String=event.result as String;
switch(replyMsg)
{
case "Master" :
dispatchEvent(new CustomEvent(CustomEvent.MASTER));
break;
case "Slave" :
dispatchEvent(new CustomEvent(CustomEvent.MASTER));
break;
case "fail" :
//remove popup
PopUpManager.removePopUp(this);
Alert.show("Login Incorrect!!");
return;
}
}
//CustomEvent.as
public class CustomEvent extends Event
{
public static const MASTER:String = "master";
public static const SLAVE:String = "slave";
public var item:String;
public function CustomEvent(item:String)
{
super(Event.SELECT);
this.item = item;
}
}
I'm assuming your problem is that you don't have a reference to your ViewStack while in your authenticateRH method. One way you can fix this is to give your login popup some more information after you create it:
public function init():void
{
var loginPopup:login = PopUpManager.createPopUp(this,login,true) as login;
loginPopup.setUsefulInformation(referenceToViewStack);
}
You'd have to add the setUsefulInformation() method to login.mxml. It's up to you what information you want to pass to solve the problem.
first, i believe you're creating your pop-up incorrectly. you seem to have the first two parameters switched. should be:
PopUpManager.createPopUp(login,this,true);
docs: http://livedocs.adobe.com/flex/3/langref/mx/managers/PopUpManager.html#addPopUp%28%29
second, you need to either explicitly give your Login class a reference to your Main class or if your Login class is on the same display chain as your Main class you can use a custom event with Bubbles set to true.
In a previous application that I had written, I had a Class that extended AdvancedDataGrid (ADG). It contained the following code:
package
{
public class CustomADG extends AdvancedDataGrid
{
....
// This function serves as the result handler for a webservice call that retrieves XML data.
private function webServiceResultHandler(event:ResultEvent):void
{
var resultXML:XML = new XML(event.result);
dataProvider = new HierarchicalData(resultXML.children);
}
....
public function setOpenNodes(maxDepth:int = 0):void
{
var dataCursor:IHierarchicalCollectionViewCursor = dataProvider.createCursor();
while (dataCursor.current != null)
{
if (dataCursor.currentDepth < maxDepth)
dataProvider.openNode(dataCursor.current);
dataCursor.moveNext();
}
dataProvider.refresh();
}
}
}
In this implementation, the function setOpenNodes() worked fine - it did exactly what I intended it to do - pass it a number, and open all nodes in the dataProvider at or below that level.
Now, I am creating a new ADG Class and want to reproduce this functionality:
package view
{
import mx.collections.IHierarchicalCollectionViewCursor;
public class ReportADG extends AdvancedDataGrid
{
public function ReportADG()
{
super();
}
public function setOpenNodes(maxDepth:int = 0):void
{
var dataCursor:IHierarchicalCollectionViewCursor =
dataProvider.createCursor();
while (dataCursor.current != null)
{
if (dataCursor.currentDepth < maxDepth)
dataProvider.openNode(dataCursor.current);
dataCursor.moveNext();
}
dataProvider.refresh();
}
}
}
The dataProvider is set in the parent component:
<view:ReportADG id="reportADG" dataProvider="{reportData}" />
reportData is set in another file:
reportData = new HierarchicalData(resultXML.children);
However, I am getting runtime errors:
TypeError: Error #1034: Type Coercion failed: cannot convert ListCollectionViewCursor#6f14031 to mx.collections.IHierarchicalCollectionViewCursor.
I've tried casting dataProvider as ICollectionView. I've tried then casting the ICollectionView as IHierarchicalCollectionView. I've tried all sorts of casting, but nothing seems to work. Why won't this work in this new implementation as it did in the past implementation? What do I need to do?
*** Update:
I started debugging this. I added an override setter to my ADG Class to see when dataProvider was being set:
override public function set dataProvider(value:Object):void
{
super.dataProvider = value;
}
I added a breakpoint to this setter and to my setOpenNodes() function. Sure enough, the dataProvider is being set BEFORE setOpenNodes() is called, and it is HierarchicalData. But, when the setOpenNodes() the debugger says that the dataProvider is a null ArrayCollection. It seems like this is the root issue.
I needed to call commitProperties before attempting to access the dataProvider property.
public function setOpenNodes(maxDepth:int = 0):void
{
super.commitProperties();
var dataCursor:IHierarchicalCollectionViewCursor =
dataProvider.createCursor();
while (dataCursor.current != null)
{
if (dataCursor.currentDepth < maxDepth)
dataProvider.openNode(dataCursor.current);
dataCursor.moveNext();
}
dataProvider.refresh();
}