Permalink
Browse files

Add ScrollView article+demo.

  • Loading branch information...
1 parent ef3927e commit 463a752034cfc12e739ea477898a4d4177b4d259 @ialexi ialexi committed Apr 17, 2010
@@ -16,14 +16,21 @@ Hedwig.guidesController = SC.ObjectController.create(
currentGuide: null,
loadGuide: function(path) {
- console.error(path);
+ // quick hack to make things work offline, properly.
+ var g = window.localStorage["hedwig-current-guide"];
+ if (g) {
+ this.set("currentGuide", g);
+ }
+
+
SC.Request.getUrl(path).json().notify(this, "didLoadGuide").send();
},
didLoadGuide: function(response) {
// obviously I have no error handling right now. Did I mention I'm in a bit of a hurry?
// /me crosses fingers
if (SC.ok(response)) {
+ window.localStorage["hedwig-current-guide"] = response.get("body");
this.set("currentGuide", response.get("body"));
}
}
View
@@ -20,8 +20,9 @@ Hedwig = SC.Application.create(
// of your model data. You can also set a data source on this store to
// connect to a backend server. The default setup below connects the store
// to any fixtures you define.
- store: SC.Store.create().from(SC.Record.fixtures)
+ store: SC.Store.create().from(SC.Record.fixtures),
- // TODO: Add global constants or singleton objects needed by your app here.
+ // THIS IS A HACK BECAUSE DOCS CAN'T HAVE IMAGES YET
+ SAMPLE_IMAGE: sc_static("sample_image.jpg")
}) ;

Large diffs are not rendered by default.

Oops, something went wrong.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -89,4 +89,35 @@
</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>ScrollView Touch Support</h1>
+
+<p>SproutCore's ScrollView comes with built-in support for touch-based
+scrolling, including momentum and bouncing. In addition, it has (somewhat experimental)
+support for scaling.</p>
+
+<p>For many cases, just putting a view inside a ScrollView will "just work". Still, you may want
+to set some settings.</p>
+
+<h2>Bouncing</h2>
+
+<p>By default, ScrollView will <em>always</em> bounce when scrolling vertically, regardless of the
+content's height, but only bounce horizontally <em>if</em> the content is wider than the ScrollView.
+This is controlled by two properties:</p>
+
+<ul>
+<li>alwaysBounceHorizontal, which defaults to NO.</li>
+<li>alwaysBounceVertical, which defaults to YES.</li>
+</ul>
+
+<h2>Scaling</h2>
+
+<p>ScrollView has support for scaling, which you can use through a few properties:</p>
+
+<ul>
+<li>canScale. Specifies whether the content may be scaled. If YES, using two fingers
+(in that classic "pinch gesture") will zoom the content.</li>
+<li>minimumScale: The minimum scale value. Default: 0.25.</li>
+<li>maximumScale: The maximum scale value. Default: 2.0.</li>
+</ul>
+
+<p><a href='touch.js' class='demo'>touch.js</a></p>
</div><div class="footer"></div></body></html>
@@ -0,0 +1,19 @@
+/*globals Hedwig*/
+var MyExampleView = SC.ScrollView.extend({
+ horizontalAlign: SC.ALIGN_CENTER,
+ verticalAlign: SC.ALIGN_MIDDLE,
+ backgroundColor: "#555",
+
+ canScale: YES,
+ alwaysBounceVertical: NO,
+
+ contentView: SC.ImageView.design({
+ layout: { left: 0, top: 0, width: 1357, height: 2048 },
+ value: Hedwig.SAMPLE_IMAGE
+ })
+});
+
+// bootstrap code :)
+exports.getDemoView = function() {
+ return MyExampleView;
+};
@@ -1 +1 @@
-{"content":"<h1>ScrollView Touch Support</h1>","errors":[],"demos":{},"articleDirectory":"articles/controls/scroll/","outputDirectory":"build/","title":"ScrollView Touch Support"}
+{"content":"<h1>ScrollView Touch Support</h1>\n\n<p>SproutCore's ScrollView comes with built-in support for touch-based\nscrolling, including momentum and bouncing. In addition, it has (somewhat experimental)\nsupport for scaling.</p>\n\n<p>For many cases, just putting a view inside a ScrollView will \"just work\". Still, you may want\nto set some settings.</p>\n\n<h2>Bouncing</h2>\n\n<p>By default, ScrollView will <em>always</em> bounce when scrolling vertically, regardless of the\ncontent's height, but only bounce horizontally <em>if</em> the content is wider than the ScrollView.\nThis is controlled by two properties:</p>\n\n<ul>\n<li>alwaysBounceHorizontal, which defaults to NO.</li>\n<li>alwaysBounceVertical, which defaults to YES.</li>\n</ul>\n\n<h2>Scaling</h2>\n\n<p>ScrollView has support for scaling, which you can use through a few properties:</p>\n\n<ul>\n<li>canScale. Specifies whether the content may be scaled. If YES, using two fingers\n(in that classic \"pinch gesture\") will zoom the content.</li>\n<li>minimumScale: The minimum scale value. Default: 0.25.</li>\n<li>maximumScale: The maximum scale value. Default: 2.0.</li>\n</ul>\n\n<p><a href='touch.js' class='demo'>touch.js</a></p>","errors":[],"demos":{"touch.js":{"ex":"/*globals Hedwig*/\nvar MyExampleView = SC.ScrollView.extend({\n horizontalAlign: SC.ALIGN_CENTER,\n verticalAlign: SC.ALIGN_MIDDLE,\n backgroundColor: \"#555\",\n \n canScale: YES,\n alwaysBounceVertical: NO,\n \n contentView: SC.ImageView.design({\n layout: { left: 0, top: 0, width: 1357, height: 2048 },\n value: Hedwig.SAMPLE_IMAGE\n })\n});\n\n// bootstrap code :)\nexports.getDemoView = function() {\n return MyExampleView;\n};\n","highlighted":"<span class=\"multiline comment\">/*globals Hedwig*/</span>\n<span class=\"keyword\">var</span> <span class=\"class\">MyExampleView</span> = <span class=\"class\">SC</span>.<span class=\"class\">ScrollView</span>.<span class=\"variable\">extend</span>({\n <span class=\"variable\">horizontalAlign</span>: <span class=\"class\">SC</span>.<span class=\"class\">ALIGN_CENTER</span>,\n <span class=\"variable\">verticalAlign</span>: <span class=\"class\">SC</span>.<span class=\"class\">ALIGN_MIDDLE</span>,\n <span class=\"variable\">backgroundColor</span>: <span class=\"string\">&quot;#555&quot;</span>,\n \n <span class=\"variable\">canScale</span>: <span class=\"class\">YES</span>,\n <span class=\"variable\">alwaysBounceVertical</span>: <span class=\"class\">NO</span>,\n \n <span class=\"variable\">contentView</span>: <span class=\"class\">SC</span>.<span class=\"class\">ImageView</span>.<span class=\"variable\">design</span>({\n <span class=\"variable\">layout</span>: { <span class=\"variable\">left</span>: <span class=\"number integer\">0</span>, <span class=\"variable\">top</span>: <span class=\"number integer\">0</span>, <span class=\"variable\">width</span>: <span class=\"number integer\">1357</span>, <span class=\"variable\">height</span>: <span class=\"number integer\">2048</span> },\n <span class=\"variable\">value</span>: <span class=\"class\">Hedwig</span>.<span class=\"class\">SAMPLE_IMAGE</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":"/*globals Hedwig*/\nvar MyExampleView = SC.ScrollView.extend({\n horizontalAlign: SC.ALIGN_CENTER,\n verticalAlign: SC.ALIGN_MIDDLE,\n backgroundColor: \"#555\",\n \n canScale: YES,\n alwaysBounceVertical: NO,\n \n contentView: SC.ImageView.design({\n layout: { left: 0, top: 0, width: 1357, height: 2048 },\n value: Hedwig.SAMPLE_IMAGE\n })\n});\n\n// bootstrap code :)\nexports.getDemoView = function() {\n return MyExampleView;\n};\n"}},"articleDirectory":"articles/controls/scroll/","outputDirectory":"build/","title":"ScrollView Touch Support"}
@@ -1,2 +1,30 @@
ScrollView Touch Support
-=========================
+=========================
+SproutCore's ScrollView comes with built-in support for touch-based
+scrolling, including momentum and bouncing. In addition, it has (somewhat experimental)
+support for scaling.
+
+For many cases, just putting a view inside a ScrollView will "just work". Still, you may want
+to set some settings.
+
+Bouncing
+----------
+By default, ScrollView will _always_ bounce when scrolling vertically, regardless of the
+content's height, but only bounce horizontally _if_ the content is wider than the ScrollView.
+This is controlled by two properties:
+
+- alwaysBounceHorizontal, which defaults to NO.
+- alwaysBounceVertical, which defaults to YES.
+
+
+Scaling
+--------
+ScrollView has support for scaling, which you can use through a few properties:
+
+- canScale. Specifies whether the content may be scaled. If YES, using two fingers
+ (in that classic "pinch gesture") will zoom the content.
+- minimumScale: The minimum scale value. Default: 0.25.
+- maximumScale: The maximum scale value. Default: 2.0.
+
+
+{{demo:sc|touch.js}}

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,19 @@
+/*globals Hedwig*/
+var MyExampleView = SC.ScrollView.extend({
+ horizontalAlign: SC.ALIGN_CENTER,
+ verticalAlign: SC.ALIGN_MIDDLE,
+ backgroundColor: "#555",
+
+ canScale: YES,
+ alwaysBounceVertical: NO,
+
+ contentView: SC.ImageView.design({
+ layout: { left: 0, top: 0, width: 1357, height: 2048 },
+ value: Hedwig.SAMPLE_IMAGE
+ })
+});
+
+// bootstrap code :)
+exports.getDemoView = function() {
+ return MyExampleView;
+};
@@ -1,2 +1,30 @@
ScrollView Touch Support
-=========================
+=========================
+SproutCore's ScrollView comes with built-in support for touch-based
+scrolling, including momentum and bouncing. In addition, it has (somewhat experimental)
+support for scaling.
+
+For many cases, just putting a view inside a ScrollView will "just work". Still, you may want
+to set some settings.
+
+Bouncing
+----------
+By default, ScrollView will _always_ bounce when scrolling vertically, regardless of the
+content's height, but only bounce horizontally _if_ the content is wider than the ScrollView.
+This is controlled by two properties:
+
+- alwaysBounceHorizontal, which defaults to NO.
+- alwaysBounceVertical, which defaults to YES.
+
+
+Scaling
+--------
+ScrollView has support for scaling, which you can use through a few properties:
+
+- canScale. Specifies whether the content may be scaled. If YES, using two fingers
+ (in that classic "pinch gesture") will zoom the content.
+- minimumScale: The minimum scale value. Default: 0.25.
+- maximumScale: The maximum scale value. Default: 2.0.
+
+
+{{demo:sc|touch.js}}

0 comments on commit 463a752

Please sign in to comment.