Using dojo dojox/dtl in AMD outside of a widget - dojo

I want to use dojo doxox/dtl in AMD, OUTSIDE OF A WIDGET!
Currently (2012-02-10) the documentation is not updated to dojo 1.7 AMD (http://dojotoolkit.org/reference-guide/dojox/dtl.html).
In the old documentation the non-AMD example is:
dojo.require("dojox.dtl");
dojo.require("dojox.dtl.Context");
var template = new dojox.dtl.Template("Hello {{ place }}!");
var context = new dojox.dtl.Context({ place: "World" });
console.debug(template.render(context)); // Hello World!
To produce the same output with the new Dojo 1.7 framework, my solution would be to subclass "dojox/dtl/_Templated" and in the constructor of the new class set the template value to the attribute "templateString".
My question is:
Can anybody help me doing dtl templates outside of a widget without subclassing "dojox/dtl/_Templated"?
Thanks alot in advance
Wolfgang

I found the solution:
define(["dojox/dtl/_base", "dojox/dtl/Context"], function (dtl, Context) {
var compiledTemplate, templateObj, contextObj;
templateObj = new dtl.Template ("Hello {{ place }}!");
contextObj = new Context({ place: "World" });
compiledTemplate = templateObj.render(contextObj);
...

Related

Wheelnav adding OnMouseDown event to Spreader

My donut chart works excellent I am using the wheel nav but I can't seem to find anywhere in the docs info on onmousedown for the spreader. When the spreader is in I'd like to add a pop up on mousedown. Any ideas?
I tried to use an on clock method but that didn't seem to work. Great library but very little info on how to manipulate it without changing the entire source.
You can achieve your needs via onmouseup event:
var wheel = new wheelnav("wheelDiv");
wheel.spreaderEnable = true;
wheel.createWheel(["This", "is", "custom", "spreader"]);
var wheelspreader = document.getElementById("wheelnav-wheelDiv-spreader");
var wheelspreadertitle = document.getElementById("wheelnav-wheelDiv-spreadertitle");
wheelspreader.onmouseup = function() {alert("spread it!");}
wheelspreadertitle.onmouseup = function() {alert("spread it!");}
Here is a JS Bin sample.

Need a simple Flash preloader for Actionscript 2 using ProgressBar component

I've been looking for an ActionScript 2.0 preloader using the ProgressBar component, and I can't find an example of this. Can anyone direct me to a nice tutorial for this? I just want to add a simple preloader to the beginning of my movie. It doesn't load any external movies. Thanks!!
I finally tracked down the coded I needed to use with the ProgressBar component:
myProgressBarListener = new Object();
myProgressBarListener = function (eventObject) {
myProgressBar._visible = false;
gotoAndPlay(2);
};
myProgressBar.addEventListener("complete", myProgressBarListener);
myProgressBar.mode = "polled";
myProgressBar.source = "_root";
myProgressBar.conversion = "1";
myProgressBar.label = "LOADING %3%%";
myProgressBar.direction = "right";
myProgressBar.labelPlacement = "bottom";
stop();
This is good for AS 2.0 and I'm using CS6. I'm not sure how this works for other versions of Flash.

Windows 8 app with FabricJS Free Drawing Support?

I'm trying to implement free drawing in my windows 8 app but I keep getting this error:
"0x800a01bd - JavaScript runtime error: Object doesn't support this action
File: fabric.js, Line: 12857, Column: 7"
Adding images to the canvas etc. all works as it does in the demos but in VS when I hovered over "fabric" in this code, fabric.Shadow is not shown as an option in the list:
setShadow: function(options) {
return this.set('shadow', new fabric.Shadow(options));
},
Does anyone know why this isn't working for me? I created a build of the api from www.fabricjs.com and included all modules. I've copied the code from the free drawing demo (http://fabricjs.com/freedrawing/) but no joy. I also tried removing any reference to creating a shadow as I don't plan on using that functionality but it still crashes. Thank you
Thank you! It's working for me now. I did have to change the JavaScript provided by the demo to make it work though. Just as a reference to anyone who may want to use it with Windows 8 in future, the jquery code needs to be made more strict for it to update the selectors.
Provided code:
var $ = function(id){return document.getElementById(id)};
var drawingModeEl = $('drawing-mode'),
drawingOptionsEl = $('drawing-mode-options'),
drawingColorEl = $('drawing-color'),
drawingShadowColorEl = $('drawing-shadow-color'),
drawingLineWidthEl = $('drawing-line-width'),
drawingShadowWidth = $('drawing-shadow-width'),
drawingShadowOffset = $('drawing-shadow-offset'),
clearEl = $('clear-canvas');
I did away with the above and just used the standard jquery selector $('#drawing-mode') each time I needed it. Then the events were provided as:
drawingModeEl.onclick = function() {}
drawingColorEl.onchange = function() {}
so I changed the above to:
$('#drawing-mode').on('click', function () {});
$('#drawing-color').change(function (){});
Now everything works as it does in the demo. Love this API, thank you!

programmatic view transition in dojo mobile

I would like to perform a programmatic view transition.
Here is a code I've tried :
var v = registry.byId('myenergy-pane');
v.transitionTo("home-pane");
Here is another one
var v = registry.byId('myenergy-pane');
v.performTransition("home-pane",1,"slide",null);
None of them is working.
Thanks for your help.
The second code you provided should work, but that's considering the following facts:
The code is executed after the DOM is loaded and the views are parsed by the dojo/parser. The correct way to indicate that is by using dojo/ready, for example:
require(["dojo/ready"], function(ready) {
var v = registry.byId('myenergy-pane');
v.performTransition("home-pane", 1, "slide", null);
});
Both given IDs (myenergy-pane and home-pane) are related to a widget (not only a DOM node) and are both views (dojox/mobile/View or inheriting from).
Make sure you are loading dijit/registry and the registry module alias is actually mapped to the correct module.
I also made a JSFiddle to demonstrate that it should be working: http://jsfiddle.net/g00glen00b/3JMnC/

Programmatic form dojo -- example?

I am new to dojo.. can anyone give me a reference of how to build a form in dojo programmatically which should contain label and a textarea
Thanks in advance
My advice is to get a copy of the Dojo API so you can view it, but usually any dojo form follows this format:
var foo = new dijit.form.xxx(/* Object */ params,
/* DomNode?|String? */ srcNodeRef);
For example:
foo = new dijit.form.Textarea({text: 'this is a text'}, "textnode");
foo.startup();
got it..have a look at this
http://jsfiddle.net/user_13g/gask3