Permalink
Browse files

More docs, more efficiency, more better.

  • Loading branch information...
ialexi committed Apr 17, 2010
1 parent a21c640 commit 7272301d9a193f2f004a7af22df130bbab687165
@@ -1,11 +1,12 @@
{
- "title": "Writing Touch Applications",
+ "title": "Touch Application Guide",
"sections": [
{
"title": "Introduction",
"articles": [
"articles/touch/a-brief-touch",
- "articles/touch/touch-events"
+ "articles/touch/touch-events",
+ "articles/touch/multitouch"
]
},
{

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -4,7 +4,7 @@ Hedwig.ArticleView = SC.View.extend(Hedwig.TouchHelper, {
mouseDown: function(evt) {
this._mouseStart = { x: evt.pageX, y: evt.pageY };
- return YES;
+ return NO;
},
mouseUp: function(evt) {
@@ -52,9 +52,9 @@ Hedwig.ArticleView = SC.View.extend(Hedwig.TouchHelper, {
borderStyle: SC.BORDER_NONE,
contentView: SC.StaticContentView.design({
contentBinding: "Hedwig.articleController.html",
- contentDidChange: function() {
+ didUpdateLayer: function() {
sc_super();
- this.invokeLater("processContent", 1);
+ this.processContent();
}.observes("content"),
processContent: function() {
@@ -65,7 +65,7 @@ Hedwig.ArticleView = SC.View.extend(Hedwig.TouchHelper, {
touchStart: function(touch) { return this.mouseDown(touch); },
mouseDown: function(evt) {
- evt.preventDefault();
+
var el = document.elementFromPoint(evt.pageX, evt.pageY), demoNode = null;
while (el) {
@@ -79,6 +79,7 @@ Hedwig.ArticleView = SC.View.extend(Hedwig.TouchHelper, {
if (demoNode) {
Hedwig.sendAction("openDemo", demoNode.getAttribute("href"));
+ evt.preventDefault();
return YES;
}
@@ -88,11 +88,28 @@
</style>
</head><body><div class="header"><a href="../../index.html" class="img"><img src="../../resources/logo.png" /></a><a href="../../index.html" class="here">Documentation
</a><a href="../../reference/index.html" class="item">SproutCore Reference
-</a></div><div class="content"><h1>A Brief Touch on Touches</h1>
+</a></div><div class="content"><h1>A Brief Touch</h1>
-<p>Some text goes here.</p>
+<p>It is very possible to build <em>awesome</em> touch-enabled applications in SproutCore.</p>
-<p>Note that links like the below must appear on empty lines with no preceding whitespace.</p>
+<p>But, what makes an awesome touch-enabled application? Sure, it must accept touches,
+but with SproutCore's (constantly growing) touch support, this is now pretty easy:
+many existing interfaces, if built with newer SproutCore varieties, will function fine (or mostly fine),
+on both larger-screened touch devices (such as iPad) and the traditional desktop environment.</p>
-<p><a href='touch-demo.js' class='demo'>touch-demo.js</a></p>
+<p>But there are many differences between desktop and touch platforms:</p>
+
+<ul>
+<li><strong>Precision.</strong> Touches are less precise than clicks. To compensate, controls should be larger.</li>
+<li><strong>Performance.</strong> Touch-based devices tend to be slow (for now). To get around this just takes
+some elbow grease: there are many techniques to speed things up... many of which SproutCore will
+handle for you.</li>
+<li><strong>Animation.</strong> Lack of animation looks okay on desktop (even if animation is cool)... but on
+touch devices, non-animated interfaces look strange: touch is so much more realistic than mouse,
+but sudden changes without transitions are not realistic at all.</li>
+<li><strong>Coolness.</strong> Touch-based interfaces are cool. That is all.</li>
+</ul>
+
+<p>In this guide, we go over each of these&emdash;except for the last, which is rather vague; you'll have to figure out
+your own meaning of "coolness".</p>
</div><div class="footer"></div></body></html>
@@ -1 +1 @@
-{"content":"<h1>A Brief Touch on Touches</h1>\n\n<p>Some text goes here.</p>\n\n<p>Note that links like the below must appear on empty lines with no preceding whitespace.</p>\n\n<p><a href='touch-demo.js' class='demo'>touch-demo.js</a></p>","errors":[],"demos":{"touch-demo.js":{"ex":"var Dot = SC.View.extend({\n touchStart: function(touch) {\n var f = this.get(\"frame\");\n this._touch = {\n start: { x: touch.pageX, y: touch.pageY },\n ourStart: { x: f.x, y: f.y, width: f.width, height: f.height }\n };\n return YES; // or we won't get touchesDragged\n },\n \n touchesDragged: function(evt, touches) {\n var t = this._touch;\n this.set(\"layout\", { \n left: t.ourStart.x + evt.pageX - t.start.x,\n top: t.ourStart.y + evt.pageY - t.start.y,\n width: t.ourStart.width,\n height: t.ourStart.height\n });\n }\n});\nvar MyExampleView = SC.View.extend({\n backgroundColor: \"white\",\n childViews: \"dot1 dot2\".w(),\n dot1: Dot.design({\n backgroundColor: \"red\",\n layout: { left: 10, top: 10, width: 100, height: 100 }\n }),\n dot2: Dot.design({\n backgroundColor: \"blue\",\n layout: { right: 10, bottom: 10, width: 100, height: 100 }\n })\n});\n\n// bootstrap code :)\nexports.getDemoView = function() {\n return MyExampleView;\n};\n","highlighted":"<span class=\"keyword\">var</span> <span class=\"class\">Dot</span> = <span class=\"class\">SC</span>.<span class=\"class\">View</span>.<span class=\"variable\">extend</span>({\n <span class=\"variable\">touchStart</span>: <span class=\"keyword\">function</span>(<span class=\"variable\">touch</span>) {\n <span class=\"keyword\">var</span> <span class=\"variable\">f</span> = <span class=\"this\">this</span>.<span class=\"variable\">get</span>(<span class=\"string\">&quot;frame&quot;</span>);\n <span class=\"this\">this</span>.<span class=\"variable\">_touch</span> = {\n <span class=\"variable\">start</span>: { <span class=\"variable\">x</span>: <span class=\"variable\">touch</span>.<span class=\"variable\">pageX</span>, <span class=\"variable\">y</span>: <span class=\"variable\">touch</span>.<span class=\"variable\">pageY</span> },\n <span class=\"variable\">ourStart</span>: { <span class=\"variable\">x</span>: <span class=\"variable\">f</span>.<span class=\"variable\">x</span>, <span class=\"variable\">y</span>: <span class=\"variable\">f</span>.<span class=\"variable\">y</span>, <span class=\"variable\">width</span>: <span class=\"variable\">f</span>.<span class=\"variable\">width</span>, <span class=\"variable\">height</span>: <span class=\"variable\">f</span>.<span class=\"variable\">height</span> }\n };\n <span class=\"keyword\">return</span> <span class=\"class\">YES</span>; <span class=\"comment\">// or we won't get touchesDragged</span>\n },\n \n <span class=\"variable\">touchesDragged</span>: <span class=\"keyword\">function</span>(<span class=\"variable\">evt</span>, <span class=\"variable\">touches</span>) {\n <span class=\"keyword\">var</span> <span class=\"variable\">t</span> = <span class=\"this\">this</span>.<span class=\"variable\">_touch</span>;\n <span class=\"this\">this</span>.<span class=\"variable\">set</span>(<span class=\"string\">&quot;layout&quot;</span>, { \n <span class=\"variable\">left</span>: <span class=\"variable\">t</span>.<span class=\"variable\">ourStart</span>.<span class=\"variable\">x</span> + <span class=\"variable\">evt</span>.<span class=\"variable\">pageX</span> - <span class=\"variable\">t</span>.<span class=\"variable\">start</span>.<span class=\"variable\">x</span>,\n <span class=\"variable\">top</span>: <span class=\"variable\">t</span>.<span class=\"variable\">ourStart</span>.<span class=\"variable\">y</span> + <span class=\"variable\">evt</span>.<span class=\"variable\">pageY</span> - <span class=\"variable\">t</span>.<span class=\"variable\">start</span>.<span class=\"variable\">y</span>,\n <span class=\"variable\">width</span>: <span class=\"variable\">t</span>.<span class=\"variable\">ourStart</span>.<span class=\"variable\">width</span>,\n <span class=\"variable\">height</span>: <span class=\"variable\">t</span>.<span class=\"variable\">ourStart</span>.<span class=\"variable\">height</span>\n });\n }\n});\n<span class=\"keyword\">var</span> <span class=\"class\">MyExampleView</span> = <span class=\"class\">SC</span>.<span class=\"class\">View</span>.<span class=\"variable\">extend</span>({\n <span class=\"variable\">backgroundColor</span>: <span class=\"string\">&quot;white&quot;</span>,\n <span class=\"variable\">childViews</span>: <span class=\"string\">&quot;dot1 dot2&quot;</span>.<span class=\"variable\">w</span>(),\n <span class=\"variable\">dot1</span>: <span class=\"class\">Dot</span>.<span class=\"variable\">design</span>({\n <span class=\"variable\">backgroundColor</span>: <span class=\"string\">&quot;red&quot;</span>,\n <span class=\"variable\">layout</span>: { <span class=\"variable\">left</span>: <span class=\"number integer\">10</span>, <span class=\"variable\">top</span>: <span class=\"number integer\">10</span>, <span class=\"variable\">width</span>: <span class=\"number integer\">100</span>, <span class=\"variable\">height</span>: <span class=\"number integer\">100</span> }\n }),\n <span class=\"variable\">dot2</span>: <span class=\"class\">Dot</span>.<span class=\"variable\">design</span>({\n <span class=\"variable\">backgroundColor</span>: <span class=\"string\">&quot;blue&quot;</span>,\n <span class=\"variable\">layout</span>: { <span class=\"variable\">right</span>: <span class=\"number integer\">10</span>, <span class=\"variable\">bottom</span>: <span class=\"number integer\">10</span>, <span class=\"variable\">width</span>: <span class=\"number integer\">100</span>, <span class=\"variable\">height</span>: <span class=\"number integer\">100</span> }\n })\n});\n\n<span class=\"comment\">// bootstrap code :)</span>\n<span class=\"variable\">exports</span>.<span class=\"variable\">getDemoView</span> = <span class=\"keyword\">function</span>() {\n <span class=\"keyword\">return</span> <span class=\"class\">MyExampleView</span>;\n};\n","original":"var Dot = SC.View.extend({\n touchStart: function(touch) {\n var f = this.get(\"frame\");\n this._touch = {\n start: { x: touch.pageX, y: touch.pageY },\n ourStart: { x: f.x, y: f.y, width: f.width, height: f.height }\n };\n return YES; // or we won't get touchesDragged\n },\n \n touchesDragged: function(evt, touches) {\n var t = this._touch;\n this.set(\"layout\", { \n left: t.ourStart.x + evt.pageX - t.start.x,\n top: t.ourStart.y + evt.pageY - t.start.y,\n width: t.ourStart.width,\n height: t.ourStart.height\n });\n }\n});\nvar MyExampleView = SC.View.extend({\n backgroundColor: \"white\",\n childViews: \"dot1 dot2\".w(),\n dot1: Dot.design({\n backgroundColor: \"red\",\n layout: { left: 10, top: 10, width: 100, height: 100 }\n }),\n dot2: Dot.design({\n backgroundColor: \"blue\",\n layout: { right: 10, bottom: 10, width: 100, height: 100 }\n })\n});\n\n// bootstrap code :)\nexports.getDemoView = function() {\n return MyExampleView;\n};\n"}},"articleDirectory":"articles/touch/","outputDirectory":"build/","title":"A Brief Touch on Touches","any":"metadata","goes":"Here","damn":"gruber","this":"is still eye-readable","and":"He is wrong about touch apps."}
+{"content":"<h1>A Brief Touch</h1>\n\n<p>It is very possible to build <em>awesome</em> touch-enabled applications in SproutCore.</p>\n\n<p>But, what makes an awesome touch-enabled application? Sure, it must accept touches,\nbut with SproutCore's (constantly growing) touch support, this is now pretty easy:\nmany existing interfaces, if built with newer SproutCore varieties, will function fine (or mostly fine),\non both larger-screened touch devices (such as iPad) and the traditional desktop environment.</p>\n\n<p>But there are many differences between desktop and touch platforms:</p>\n\n<ul>\n<li><strong>Precision.</strong> Touches are less precise than clicks. To compensate, controls should be larger.</li>\n<li><strong>Performance.</strong> Touch-based devices tend to be slow (for now). To get around this just takes \nsome elbow grease: there are many techniques to speed things up... many of which SproutCore will\nhandle for you.</li>\n<li><strong>Animation.</strong> Lack of animation looks okay on desktop (even if animation is cool)... but on\ntouch devices, non-animated interfaces look strange: touch is so much more realistic than mouse,\nbut sudden changes without transitions are not realistic at all.</li>\n<li><strong>Coolness.</strong> Touch-based interfaces are cool. That is all.</li>\n</ul>\n\n<p>In this guide, we go over each of these&emdash;except for the last, which is rather vague; you'll have to figure out\nyour own meaning of \"coolness\".</p>","errors":[],"demos":{},"articleDirectory":"articles/touch/","outputDirectory":"build/","title":"A Brief Touch","any":"metadata","goes":"Here","damn":"gruber","this":"is still eye-readable","and":"He is wrong about touch apps."}
@@ -6,10 +6,26 @@
"and": "He is wrong about touch apps."
}
-A Brief Touch on Touches
-========================
-Some text goes here.
+A Brief Touch
+=============
-Note that links like the below must appear on empty lines with no preceding whitespace.
+It is very possible to build _awesome_ touch-enabled applications in SproutCore.
-{{demo:sc|touch-demo.js}}
+But, what makes an awesome touch-enabled application? Sure, it must accept touches,
+but with SproutCore's (constantly growing) touch support, this is now pretty easy:
+many existing interfaces, if built with newer SproutCore varieties, will function fine (or mostly fine),
+on both larger-screened touch devices (such as iPad) and the traditional desktop environment.
+
+But there are many differences between desktop and touch platforms:
+
+- **Precision.** Touches are less precise than clicks. To compensate, controls should be larger.
+- **Performance.** Touch-based devices tend to be slow (for now). To get around this just takes
+ some elbow grease: there are many techniques to speed things up... many of which SproutCore will
+ handle for you.
+- **Animation.** Lack of animation looks okay on desktop (even if animation is cool)... but on
+ touch devices, non-animated interfaces look strange: touch is so much more realistic than mouse,
+ but sudden changes without transitions are not realistic at all.
+- **Coolness.** Touch-based interfaces are cool. That is all.
+
+In this guide, we go over each of these—except for the last, which is rather vague; you'll have to figure out
+your own meaning of "coolness".
Oops, something went wrong.

0 comments on commit 7272301

Please sign in to comment.