var root = this;
function go(){
createjs.Tween
.get(root.mvpano, {override:true} )
.to({x:100}, duration: **here I want to place a variable**, createjs.Ease.cubicOut);
};
So that... is posible to use a variable to set the tween duration?
You can put a variable in as any property (see this fiddle). Note that once you create the tween, if the variable changes, the tween will not.
function go(duration, position){
createjs.Tween
.get(s, {override:true} )
.to({x:position}, duration, createjs.Ease.cubicOut);
};
Related
I'm trying to respond to a change in one of the properties of the model in a widget. To be clear, when the value of the property changes, I want to run some code to react to the change. In a parent widget I have a date picker which changes the date in the model.
I cannot get the custom setter to be called _setParentPropertyAttr...
If I include this in my widget
<span data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(rel:, 'ParentProperty')">
It works nicely. Changing the date picker outputs the current value to the page. So I can supply the value property to the output widget when the date changes in the model. But what I need to do (I think) is supply a custom property with the date property in the model when the date picker changes the value.
I realise this question is a bit vague but I can't provide the code as it's proprietary.
I've tried to break the problem down by setting a property manually within my widget as:
myProperty:0,
...
constructor
...
_setMyPropertyAttr: function(value):
{
console.log("setting myproperty");
}
....
this.set('myProperty', 5);
....
but that isn't working either.
If you set a property within a widget does that not call the custom setter?
I'm struggling a bit because there aren't so many dojo examples out there any help is much appreciated.
You can bind an event to be called when a widget's property is set/update or you can even use watch to do that.
But this only works using the set function, using someWidget.someProperty = 5; wont work.
Let me show you how dojo do it. The basic about the magic setters and getters is explained here.
_set: function(/*String*/ name, /*anything*/ value){
// summary:
// Helper function to set new value for specified property, and call handlers
// registered with watch() if the value has changed.
var oldValue = this[name];
this[name] = value;
if(this._created && !isEqual(oldValue, value)){
if(this._watchCallbacks){
this._watchCallbacks(name, oldValue, value);
}
this.emit("attrmodified-" + name, {
detail: {
prevValue: oldValue,
newValue: value
}
});
}
}
This peace of code is from dijit/_WidgetBase, the _set function is what dojo calls after a set is called, and is where it finally set the property value this[name] = value; and as you can see, it emit an event that will be called attrmodified-propertyName and also call a watchCallbacks.
For example, if in some place, we have this:
on(someWidget, 'attrmodified-myproperty', function(){
console.log(someWidget.get('myProperty'));
});
and then we use:
someWidget.set('myProperty', 'Hello World!');
The event will be triggered. Note that someWidget.myProperty = 'Hello World!' wont trigger the event registration. Also note that if in our widget we define the magic setter:
_setMyPropertyAttr: function(value) {
//do something here with value
// do more or less with other logic
//but some where within this function we need to cal "_set"
this._set('myProperty', value);
}
without calling _set, the magic wont happen.
As i said at the beginning, we can also use watch:
someWidget.watch('myProperty', function(){
console.log(someWidget.get('myProperty'));
});
Note that we can register to this events or the watch function within the same widget.
Also, as a plus, the magic setter can be triggered when creating the widget with just passing the property name in the constructor object param, this work for the declarative syntax too, for example:
var someWidget = new MyWidget({
'myProperty': 'Hello World!!'
});
and
<div data-dojo-type="MyWidget" data-dojo-props="myProperty: 'Hello World!!'"></div>
both will triggered a call to the _setMyPropertyAttr if exist, or dojo will use the magic setter in the case it doesn't exist.
Hope it helps
Consider using custom setter on your widget, where you can add your custom logic.
Example of definition of custom setter on your widget:
_setOpenAttr: function(/*Boolean*/ open){
// execute some custom logic here
this._set("open", open);
}
Example of setting a property on your widget:
widgetRef.set('open', true);
Alternatively you can could consider using dojo/store/Observable.
dojo/store/Observable store wrapper that adds support for notification of data changes.
You can read more about it on the followign link:
https://dojotoolkit.org/reference-guide/1.10/dojo/store/Observable.html
If figured out the problem. If I set a watch on the model I can then check if indiviual properties have changed in the watch function. I knew it would be something simple!
I have multiple Tweens in CreateJS/TweenJS:
createjs.Tween.get(elem1).to({..});
createjs.Tween.get(elem2).to({..});
In timeline, I need to stop one of Tweens.
I tried:
var tween1 = createjs.Tween.get(elem1).to({..});
var tween2 = createjs.Tween.get(elem2).to({..});
and then:
tween1.setPaused(true);
But it's returns error that: .setPaused() is not a function.
How to stop one of Tweens that I need?
You just need to remove the tween with createjs.Tween.removeTweens(elem)
See doc here: http://createjs.com/docs/tweenjs/classes/Tween.html#method_removeTweens
Are you sure you are referencing the tween correctly?
Here is a quick sample I made to start/stop tweens using setPaused: http://jsfiddle.net/lannymcnie/cm2we3wk/
It creates tweens like this:
var tween1 = createjs.Tween.get(shape, {loop:true})
.to({x:550}, 1000, createjs.Ease.quadOut)
.to({x:50}, 1000, createjs.Ease.quadIn);
And then toggles them using setPaused:
// tween1 is passed in as the tween variable.
if (tween.paused) {
tween.paused = false;
tween.setPaused(false);
} else {
tween.paused = true;
tween.setPaused(true);
}
I want bring to front movieclip on Press
and bring to back movieclip on Release
from movieclip in just one layer
I use
this.swapDepths (depth)
does not work
code:
this.onPress = function(){
this.swapDepths(100);enter code here
}
this.onRelease = function(){this.swapDepths(-100);}
please help me
You may want to use this:
this.onRelease = function() {
this.swapDepths(mc1);
};
this.onRelease = function() {
this.swapDepths(mc2);
};
mc1 and mc2 are the instance names of the 2 movieclips.
use "this.mc1" / "this.mc2" if those movieclips are inside the button object.
That way, they simply trade Depths with each other without you knowing what depth each on has.
Lets say you have this "char" object placed in the screen(not generated dynamically) and you have this "enemy" object attached with the following code :
var enemy = _root.attachMovie("enemyBmp","enemyBmp",1);
Now your problem is that "enemy" object appears in top of your "char" object.
What you need to do now is :
enemy.swapDepths(char);
I am making Titanium mobile project where I want to make one global function which I can use throughout the application. For that I have created other .JS file where I have defined the function and I am including that .JS file where I need to use this function and I am successfully able to call the function.
But My question is :
Can I create new Window in that function? As I have added one Label and one MapView in that window but it is not showing, while at the start of function I have added alert('FunctionCalled'), it is showing me alert but not showing me the label I have added in the window.
So anybody can help me to find out whether we can open window through function. If yes then any sample example, so that I can find out what mistake I am making.
Thanks,
Rakesh Gondaliya
you approach CAN work but is not a best practice, you should create a global namespace, add the function to that namespace and then only include the file with the function once in app.js
// apps.js
var myApp = {};
Ti.include('global.js','ui.js');
myApp.ui.openMainWindow();
then we create a seperate file for our ui functions
//ui.js
(function(){
var ui = {};
ui.openMainWindow = function() {
// do open window stuff
// call global function
myApp.global.globalFunction1();
}
myApp.ui = ui;
})();
here is where we create our global functions, we will not have to include the file everywhere since we are adding it to our global namespace
//global.js
(function(){
var global = {};
global.globalFunction1 = function() {
// do super global stuff
}
myApp.global = global;
})();
this is a simple outline of how it can be implemented, I have a complete code listing on my blog
Yes you can create a new window or add a label or anything else. If you wanted to add a label to the current window then you would do:
var helloWorld = Ti.UI.createLabel({ text: "Hello World", height: "auto", width: 200 });
Ti.UI.currentWindow.add(helloWorld);
It won't matter where the code is executing because Ti.UI.currentWindow will be the active window regardless.
I have a page of checkboxes, in some cases more than 100. I'm currently doing this:
$('form[name=myForm] input[name=myCheckbox]').change(function(){
var numChkd = $('input[name=myCheckbox]:checked').size();
console.log(numChkd);
};
But as you could imagine this can get wicked slow. Is there a better way to bind an event to multiple elements? This works, but I want to know if there is a better way?
You can bind an event to the parent container that will wrap all of the checkboxes and then check if the object that caused an event is a checkbox. This way you only bind one event handler. In jQuery you can use $.live event for this.
Don't recount every time a checkbox changes. Just use a global variable, like this:
var CheckboxesTicked = 0;
$(document).ready(function() {
CheckboxesTicked = $(":checkbox:checked").length;
$(":checkbox").change(function() {
if ($(this).is(":checked")) {
CheckboxesTicked += 1
} else {
CheckboxesTicked -= 1
}
});
});
Btw, the documentation states that you'd better use .length instead of .size() performance wise.
You could create a container element (like a Div with no styling) and attach the event handler to the container. That way, when the change() event happens on one of the checkboxes and percolates up the DOM, you'll catch it at the container level. That's one way to make this faster.
You should use .delegate(). One binding on a parent element can replace all the individual bindings on the child elements. It's perfect for this situation (and also solves the problem of attaching behavior to dynamically-added elements, should the need arise).
$('form[name=myForm]').delegate('input[name=myCheckbox]','change', function(){
var numChkd = $(this).siblings(':checked').length; // assuming siblings
console.log(numChkd);
});
This is how I would approach it:
$('form[name=myForm]').each(function() {
var $form = $(this),
$boxes = $form.find('input[name=myCheckbox]');
$form.delegate('input[name=myCheckbox]', 'change', function() {
var numChkd = $boxes.filter(':checked').length;
console.log(numChkd);
});
});
This takes advantage of caching the $boxes selection. It will look for all the boxes when it sets up the event. It uses .delegate() to attach an event to the form which will get fired anytime an child input[name=myCheckbox] creates a change event. In this event handler, you can easily filter the already obtained list of checkboxes by which ones are :checked and get the length of the matched elements. (The documentation for .size() basically states there is no reason to ever use it... It just returns this.length anyway...)
See this fiddle for a working demo
demo: http://jsfiddle.net/kKUdm/
$(':checkbox').change(function(){
if($(this).is(':checked')){
var name = $(this).attr('name');
var value = $(this).val();
console.log(name + ':' + value);
}
});
Var $chks = $(":checkbox");
Var ChkCount =0;
Var chktimer =0;
Function updateChkCount(){
ChkCount = $chks.filter(":checked").length;
$chks.end();
// do something witb ChkCount
}
$chks.bind("check change", function(){
clearInterval(chktimer);
chktimer = setInterval("updateChkCount()",250);
});