/trunk/api/js/dojo1.0/dojox/dtl/demos/demo_Animation.html |
---|
New file |
0,0 → 1,47 |
<html> |
<head> |
<title>Testing dojox.dtl using animation to change attributes</title> |
<script src="../../../dojo/dojo.js" djConfig="parseOnLoad: true, usePlainJson: true"></script> |
<script> |
dojo.require("dojox.dtl.widget"); |
dojo.provide("demo"); |
dojo.declare("demo.Animation", dojox.dtl._Widget, |
{ |
buffer: 0, // Note: Sensitivity is 0 by default, but this is to emphasize we're not doing any buffering |
constructor: function(props, node){ |
this.context = new dojox.dtl.Context({ x: 0, y: 0 }); |
this.template = new dojox.dtl.HtmlTemplate(dojo.moduleUrl("dojox.dtl.demos.templates", "animation.html")); |
}, |
postCreate: function(){ |
this.render(this.template, this.context); |
var anim = new dojo._Animation({ |
curve: [0, 300], |
rate: 10, |
duration: 5000, |
easing: dojo._defaultEasing |
}); |
dojo.connect(anim, "onAnimate", this, "_reDraw"); |
anim.play(); |
}, |
_reDraw: function(obj){ |
this.context.x = obj; |
this.context.y = Math.sqrt(obj) * 10; |
dojo.style(this.blue, "left", this.context.x); |
dojo.style(this.blue, "top", this.context.y + 10); |
this.render(this.template, this.context); |
} |
}); |
dojo.require("dojo.parser"); |
</script> |
</head> |
<body> |
<div dojoType="dojox.dtl.AttachPoint"> |
<div dojoType="demo.Animation" /> |
</div> |
</body> |
</html> |
/trunk/api/js/dojo1.0/dojox/dtl/demos/json/blog/get_blog_3.json |
---|
New file |
0,0 → 1,0 |
{"teaser":"There was SO much sand","body":"I tried to walk so fast that I wouldn't leave foot prints.","date":1190245842601,"author":"jim"} |
/trunk/api/js/dojo1.0/dojox/dtl/demos/json/blog/get_page_about.json |
---|
New file |
0,0 → 1,0 |
{"title":"About Jim","body":"<p>Jim is an avid golfer, enjoys long walks on the beach, and eating hot pockets</p><p>When he's not scalding his mouth, you'll find him throwing rocks at pigeons.</p>"} |
/trunk/api/js/dojo1.0/dojox/dtl/demos/json/blog/get_blog_list.json |
---|
New file |
0,0 → 1,0 |
{"blog_list":{"3":{"title":"My Trip to the Beach"},"1":{"title":"If I Were a Robot"}}} |
/trunk/api/js/dojo1.0/dojox/dtl/demos/json/blog/get_blog_1.json |
---|
New file |
0,0 → 1,0 |
{"teaser":"I'd be able to write a lot faster.","body":"I think I wouldn't be able to think.","date":1189125242601,"author":"jim"} |
/trunk/api/js/dojo1.0/dojox/dtl/demos/demo_Blog.html |
---|
New file |
0,0 → 1,114 |
<html> |
<head> |
<title>Testing dojox.dtl using a blog example</title> |
<script src="../../../dojo/dojo.js" djConfig="parseOnLoad: true, usePlainJson: true"></script> |
<script> |
dojo.require("dojox.dtl.widget"); |
dojo.provide("demo"); |
dojo.declare("demo.Blog", dojox.dtl._Widget, |
{ |
buffer: dojox.dtl.render.html.sensitivity.NODE, |
constructor: function(props, node){ |
this.contexts = { |
list: false, |
blogs: {}, |
pages: {} |
} |
this.templates = { |
list: new dojox.dtl.HtmlTemplate(dojo.moduleUrl("dojox.dtl.demos.templates", "blog_list.html")), |
detail: new dojox.dtl.HtmlTemplate(dojo.moduleUrl("dojox.dtl.demos.templates", "blog_detail.html")), |
page: new dojox.dtl.HtmlTemplate(dojo.moduleUrl("dojox.dtl.demos.templates", "blog_page.html")) |
} |
}, |
postCreate: function(){ |
if(this.contexts.list){ |
this.render(this.templates.list, this.contexts.list); |
}else{ |
dojo.xhrGet({ |
url: dojo.moduleUrl("dojox.dtl.demos.json.blog", "get_blog_list.json"), |
handleAs: "json" |
}).addCallback(this, "_loadList"); |
} |
}, |
_showList: function(obj){ |
this.render(this.templates.list, this.contexts.list); |
}, |
_showDetail: function(obj){ |
var key = obj.target.className.substring(5); |
if(this.contexts.blogs[key]){ |
this.render(this.templates.detail, this.contexts.blogs[key]); |
}else{ |
dojo.xhrGet({ |
url: dojo.moduleUrl("dojox.dtl.demos.json.blog", "get_blog_" + key + ".json"), |
handleAs: "json", |
load: function(data){ |
data.key = key; |
return data; |
} |
}).addCallback(this, "_loadDetail"); |
} |
}, |
_showPage: function(obj){ |
var key = obj.target.className.substring(5); |
if(this.contexts.pages[key]){ |
this.render(this.templates.page, this.contexts.pages[key]); |
}else{ |
dojo.xhrGet({ |
url: dojo.moduleUrl("dojox.dtl.demos.json.blog", "get_page_" + key + ".json"), |
handleAs: "json", |
load: function(data){ |
data.key = key; |
return data; |
} |
}).addCallback(this, "_loadPage"); |
} |
}, |
_loadList: function(data){ |
this.contexts.list = new dojox.dtl.Context(data).extend({ |
title: "Blog Posts", |
base: { |
url: dojo.moduleUrl("dojox.dtl.demos.templates", "blog_base.html"), |
shared: true |
} |
}); |
this.render(this.templates.list, this.contexts.list); |
}, |
_loadDetail: function(data){ |
var context = { |
title: "Blog Post", |
blog: data |
} |
context.blog.date = new Date(context.blog.date); |
context.blog.title = this.contexts.list.get("blog_list", {})[data.key].title; |
this.contexts.blogs[data.key] = new dojox.dtl.Context(context).extend({ |
base: { |
url: dojo.moduleUrl("dojox.dtl.demos.templates", "blog_base.html"), |
shared: true |
} |
}); |
this.render(this.templates.detail, this.contexts.blogs[data.key]); |
}, |
_loadPage: function(data){ |
this.contexts.pages[data.key] = new dojox.dtl.Context(data).extend({ |
base: { |
url: dojo.moduleUrl("dojox.dtl.demos.templates", "blog_base.html"), |
shared: true |
} |
}); |
this.render(this.templates.page, this.contexts.pages[data.key]); |
} |
}); |
dojo.require("dojo.parser"); |
</script> |
</head> |
<body> |
<div dojoType="dojox.dtl.AttachPoint"> |
<div dojoType="demo.Blog" /> |
</div> |
</body> |
</html> |
/trunk/api/js/dojo1.0/dojox/dtl/demos/templates/animation.html |
---|
New file |
0,0 → 1,4 |
<div> |
<div tstyle="top: {{ y }}px; left: {{ x }}px;" style="width: 10px; height: 10px; background: red; position: absolute;"> </div> |
<div attach="blue" style="top: 10px; left: 0; width: 10px; height: 10px; background: blue; position: absolute;"> </div> |
</div> |
/trunk/api/js/dojo1.0/dojox/dtl/demos/templates/blog_page.html |
---|
New file |
0,0 → 1,7 |
<!--{% extends "shared:templates/blog_base.html" %}--> |
<!--{% block body %}--> |
<div> |
<!--{% html body %}--> |
</div> |
<!--{% endblock %}--> |
/trunk/api/js/dojo1.0/dojox/dtl/demos/templates/blog_detail.html |
---|
New file |
0,0 → 1,10 |
<!--{% extends base %}--> |
<!--{% block body %}--> |
<div> |
<h3><!--{{ blog.title }}--></h3> |
<div><small>posted on <!--{{ blog.date|date }}--> by <!--{{ blog.author }}--></small></div> |
<p><!--{{ blog.teaser }}--></p> |
<p><!--{{ blog.body }}--></p> |
</div> |
<!--{% endblock %}--> |
/trunk/api/js/dojo1.0/dojox/dtl/demos/templates/blog_base.html |
---|
New file |
0,0 → 1,8 |
<div> |
<h1><!--{{ title }}--></h1> |
<ul style="float: left; width: 100px; height: 300px; margin-right: 20px; border: 1px solid #666;"> |
<li><a onclick="_showList" style="cursor: pointer;">Home</a></li> |
<li><a onclick="_showPage" style="cursor: pointer;" class="page-about">About Jim</a></li> |
</ul> |
<!--{% block body %}--><!--{% endblock %}--> |
</div> |
/trunk/api/js/dojo1.0/dojox/dtl/demos/templates/blog_list.html |
---|
New file |
0,0 → 1,8 |
<!--{% extends base %}--> |
<!--{% block body %}--> |
<ul> |
<!--{% for blog in blog_list %}--> |
<li onclick="_showDetail" class="blog-{{ forloop.key }}" style="cursor: pointer;">{{ blog.title }}</li> |
<!--{% endfor %}--> |
</ul> |
<!--{% endblock %}--> |