Calling function in a mxml component from a main flex application - actionscript

In my main application I have a viewstack with 3 child views. In the viewstack change handler, I programmatically change the selectedchild property.
I understand that the initialize method for the view is not called every time I change the selectedChild Property. So I tried to invoke the init method programmatically too..
view1.mxml
<fx:Script>
<![CDATA[
public function init():void{
//something
}
]]>
</fx:Script>
main.mxml
viewStack.selectedChild = viewStack.getChildByName("viewname") as NavigatorContent;
var v1:view1 = new view1();
v1.init();
But I get a null pointer error. Am I missing anything?
Any help would be appreciated. I am a beginner here.

In your main.mxml app, you are creating a new instance of the view1 component and what you need is to execute the init() method of the current instance of the viewstack.
Why don't you try doing somethig like this:
var view:View1 = viewStack.getChildByName("viewname").getChildByName("yourComponentId") as View1;
view.init();
where yourComponentId is your component inside the navigatorContent inside your Viewstack.
Anyway you should't be doing this, at least not this way.
Greetings!
Gabriel.-

I used
FlexGlobals.topLevelApplication.[viewId].init();
And it works!!

Related

How to set a component published attribute

I have a dart-polymer component mediator-form that I would like to add programmatically to another component. That I have done successfully. However, mediator-form is used several times. For my purpose I would like to pass #published data in the form
<mediator-form mediator='Medication'>
where the published mediator data is used.
My problem is I don't know how to set the mediator='Medication' programmatically.
My attempt is shown below
.html
<link rel='import' href='mediator_form.html'>
.dart
var newElem = new Element.tag('mediator-form')
..attributes['mediator'] = 'Medication';
does not work. newElement does not have a setProperty() method so it does not seem possible.
Any help is appreciated. Thanks.
This should work
var newElem = new Element.tag('mediator-form')
..attributes['mediator'] = 'Medication';
maybe it only works after you added it to the DOM (haven't tried myself this way).
This should also work:
var newElem = (new Element.tag('mediator-form') as MediatorForm)
..mediator = 'Medication';
If it doesn't you probably haven't imported the element.
You can set value directly on dart object, but to have that object you have to wait at least one cycle of event loop to give polymer a chance to instantiate your object in a DOM:
document.body.append(new Element.tag("mediator-form"));
// Delaying the following after element is instantiated
Timer.run((){
MediatorForm form = document.body.querySelector('mediator-form');
form.mediator = "Medication";
});

Does MvvmCross allow binding of ViewModel properties to controls created on the fly?

I have an application in which most of the controls are created in code and then added to the layout using AddView method. Does the framework allow binding of ViewModel properties to controls using code or it has to be done in the axml file only?
Alright, after a lot of struggle I finally got the answer.
I had to do the following things.
1) Added an import statement :
using Cirrious.MvvmCross.Binding.BindingContext;
2) Added the following code:
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.Hello);
TableLayout containerLayout = this.FindViewById<TableLayout>(Resource.Id.containerLayout);
if (containerLayout != null)
{
TableRow newRow = new TableRow(base.ApplicationContext);
newRow.SetMinimumHeight(50);
var txtRace = new EditText(ApplicationContext);
txtRace.Hint = "Race";
var bindingSet = this.CreateBindingSet<HelloView, HelloViewModel>();
bindingSet.Bind(txtRace).To(vm => vm.Race);
bindingSet.Apply();
newRow.AddView(txtRace);
containerLayout.AddView(newRow);
}
}
I already have a "TableLayout" in my HelloView.axml file and all that I am doing in this is creating a new EditText box control (txtRace) and adding it to the view and at the same time binding it to the "Race" property of HelloViewModel object.
I spend a lot of time trying to figure out in what namespace CreateBindingSet() method exists because VS2012 was not giving me any intelliscence on that.
Hope this helps someone facing similar issue.
Yes MvvmCross supports binding properties to controls created at runtime. You can watch this tutorial by the awesome Mr. Stuart in his N+1 series.
http://www.youtube.com/watch?feature=player_embedded&v=cYu_9rcAJU4
Note: He has shown this many a times in the series but I remember this one on the top of my head right now.

Why isn't the keydown event firing?

I'm trying to attach an event handler to the keyDown event in a canvas element. Here is a simplified version of my code.
class CanvasFun{
CanvasElement canvas;
CanvasFun(this.canvas){
print("Game is loading!");
this.canvas.onKeyDown.listen(handleInput);
}
void handleInput(e)
{
//breakpoint is never hit
print(e.keyCode);
}
}
I've removed some of the drawing code. In my main function I simply query the canvas element and pass it to my CanvasFun constructor.
I've also tried doing it this way:
void main() {
var canvas = query("#Game");
canvas.onKeyDown.listen(handleInput);
var canvasFun = new CanvasFun(canvas);
}
void handleInput(e)
{
print(e.keyCode);
}
The reason why the event is not firing is because the focus is on the document (or some other element like an input, for example). And in fact, canvas element even when focused does not fire an event. Some elements do, like input elements.
The solution is to listen to key down events from the document or window:
window.onKeyDown.listen(handleInput);
document.onKeyDown.listen(handleInput); // You already noticed this worked.
John McCutchan has written a nice Dart package to help handle keyboard input. You can read more about it here: http://dartgamedevs.org/blog/2012/12/11/keyboard-input/
Note that this library helps you handle input "correctly". You do not want to do any "work" in the input handling, instead you simply want to register that a key was pressed. You can check the state of any key presses inside of your requestAnimationFrame callback.
Hope that helps!
There exists a workaround to get the canvas-element accept KeyboardEvents:
Problems handling KeyboardEvents on DartFlash
Once you add the tabindex-attribute to your canvas-element, it can get the focus and then it will receive KeyboardEvents.
It looks like I can get it to work if I register the event on the document rather than the canvas element.
document.onKeyDown.listen(handleInput);

ShareThis setting properties in callback don't work

I'm using the ShareThis widget. I need to change the url property after the object has been created so I'm using the callback function option. In the callback function, I attempt to change the url property but the email that goes out still contains the old value.
Has anyone been able to solve this problem? If so, I would appreciate your help!
Here's a code sample
<script type="text/javascript">
SHARETHIS.addEntry({
title: 'ShareThis'},
{ onclick: myCustomCallback }
function myCustomCallback(SharedObject) {
SharedObject.properties.url = "http://www.myurl.com";
return true;
};
</script>
Use this:
$('span[class^="st_"]').html(''); // Empty span contents
$('span[class^="st_"]').attr('st_processed',null); // Reset ST plugin
$('span[class^="st_"]').attr('st_url',url); // Set new url
stButtons.makeButtons(); // Renew buttons
It's not possible to change the URL dynamically. If you want to do something funky, you'll need to create a new button with the new URL. This can be accomplished a few ways, the simplest being creating an element to contain the button and trigger creation of a custom button element every time something happens that should trigger the URL change.
I can show you a sample implementation that we put together for HP a few weeks ago. They actually call the "share" function from inside a Flash movie, but this prototype triggers it from a button.
You can reach me at sragan#sharethis.com

How to call a MXML class in ActionScript3.0 in Flex 3

I have a page made of custom components. In that page I have a button. If I click the button I have to call another page (page.mxml consisting of custom components). Then click event handler is written in Action-script, in a separate file.
How to make a object of an MXML class, in ActionScript? How to display the object (i.e. the page)?
My code:
page1.mxml
<comp:BackgroundButton x="947" y="12" width="61" height="22"
paddingLeft="2" paddingRight="2" label="logout" id="logout"
click="controllers.AdminSession.logout()"
/>
This page1.mxml has to call page2.mxml using ActionScript code in another class:
static public function logout():void {
var startPage:StartSplashPage = new StartSplashPage();
}
Your Actionscript class needs a reference to the display list in order to add your component to the stage. MXML is simply declarative actionscript, so there is no difference between creating your instance in Actionscript or using the MXML notation.
your function:
static public function logout():void {
var startPage:StartSplashPage = new StartSplashPage();
}
could be changed to:
static public function logout():StartSplashPage {
return new StartSplashPage();
}
or:
static public function logout():void {
var startPage:StartSplashPage = new StartSplashPage();
myReferenceToDisplayListObject.addChild( startPage );
}
If your actionscript does not have a reference to the display list, than you cannot add the custom component to the display list. Adding an MXML based custom component is no different than adding ANY other DisplayObject to the display list:
var mySprite:Sprite = new Sprite();
addChild(mySprite)
is the same as:
var startPage:StartSplashPage = new StartSplashPage();
myReferenceToDisplayListObject.addChild( startPage );
Both the Sprite and the StartSplashPage are extensions of DisplayObject at their core.
You reference MVC in the comments to another answer. Without knowing the specific framework you've implemented, or providing us with more code in terms of the context you are trying to perform this action in, it is difficult to give a more specific answer.
I assume that you are on a page with a set of components and want to replace this set of components on the page with a different set of components. My apologies in advance if this is not what you are trying to do.
You can do this using ViewStacks and switching the selected index on selection -- this can be done either by databinding or by firing an event in controllers.AdminSession.logout() and listening for that event in the Main Page and switching the selectedIndex of the view stack in the handler function.
MainPage.mxml
<mx:ViewStack>
<views:Page1...>
...
<comp:BackgroundButton x="947" y="12" width="61" height="22"
paddingLeft="2" paddingRight="2" label="logout" id="logout"
click="controllers.AdminSession.logout()"/>
</views:Page1...>
<views:Page2 ...>
...
<comp:Comp1 .../>
<comp:Comp2 .../>
</views:Page2>
I think you may use state to do you work.
You may take a look at http://blog.flexexamples.com/2007/10/05/creating-view-states-in-a-flex-application/#more-221
Edit:
I am not sure I fully understand your case.
As I know, you may make a new state in page1.mxml, and name it, eg. secondPageState, and then put the custom component page2.mxml in the secondPageState.
In the controller, you need an import statement to import the page1 component and make a public var for the page1 component, eg. firstPage.
Then, the code will similar to:
public function logout():voild
{
firstPage.currentState = "secondPageState";
}
Another solution:
If you don't like the change state solution, you may try to use the addchild, to add the custom component to your application.

Resources