| OLD | NEW |
| (Empty) |
| 1 // Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file | |
| 2 // for details. All rights reserved. Use of this source code is governed by a | |
| 3 // BSD-style license that can be found in the LICENSE file. | |
| 4 | |
| 5 library trydart.samples; | |
| 6 | |
| 7 const String EXAMPLE_HELLO = r''' | |
| 8 // Go ahead and modify this example. | |
| 9 | |
| 10 var greeting = "Hello, World!"; | |
| 11 | |
| 12 // Prints a greeting. | |
| 13 void main() { | |
| 14 // The [print] function displays a message in the "Console" box. | |
| 15 // Try modifying the greeting above and watch the "Console" box change. | |
| 16 print(greeting); | |
| 17 } | |
| 18 '''; | |
| 19 | |
| 20 const String EXAMPLE_HELLO_HTML = r''' | |
| 21 // Go ahead and modify this example. | |
| 22 | |
| 23 import "dart:html"; | |
| 24 | |
| 25 var greeting = "Hello, World!"; | |
| 26 | |
| 27 // Displays a greeting. | |
| 28 void main() { | |
| 29 // This example uses HTML to display the greeting and it will appear | |
| 30 // in a nested HTML frame (an iframe). | |
| 31 document.body.append(new HeadingElement.h1()..appendText(greeting)); | |
| 32 } | |
| 33 '''; | |
| 34 | |
| 35 const String EXAMPLE_FIBONACCI = r''' | |
| 36 // Go ahead and modify this example. | |
| 37 | |
| 38 // Computes the nth Fibonacci number. | |
| 39 int fibonacci(int n) { | |
| 40 if (n < 2) return n; | |
| 41 return fibonacci(n - 1) + fibonacci(n - 2); | |
| 42 } | |
| 43 | |
| 44 // Prints a Fibonacci number. | |
| 45 void main() { | |
| 46 int i = 20; | |
| 47 String message = "fibonacci($i) = ${fibonacci(i)}"; | |
| 48 // Print the result in the "Console" box. | |
| 49 print(message); | |
| 50 } | |
| 51 '''; | |
| 52 | |
| 53 const String EXAMPLE_FIBONACCI_HTML = r''' | |
| 54 // Go ahead and modify this example. | |
| 55 | |
| 56 import "dart:html"; | |
| 57 | |
| 58 // Computes the nth Fibonacci number. | |
| 59 int fibonacci(int n) { | |
| 60 if (n < 2) return n; | |
| 61 return fibonacci(n - 1) + fibonacci(n - 2); | |
| 62 } | |
| 63 | |
| 64 // Displays a Fibonacci number. | |
| 65 void main() { | |
| 66 int i = 20; | |
| 67 String message = "fibonacci($i) = ${fibonacci(i)}"; | |
| 68 | |
| 69 // This example uses HTML to display the result and it will appear | |
| 70 // in a nested HTML frame (an iframe). | |
| 71 document.body.append(new HeadingElement.h1()..appendText(message)); | |
| 72 } | |
| 73 '''; | |
| 74 | |
| 75 // Test that math.png is displayed correctly (centered without 3d border). | |
| 76 // Test that slider works and changes size of sunflower. | |
| 77 const String EXAMPLE_SUNFLOWER = ''' | |
| 78 // Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file | |
| 79 // for details. All rights reserved. Use of this source code is governed by a | |
| 80 // BSD-style license that can be found in the LICENSE file. | |
| 81 | |
| 82 library sunflower; | |
| 83 | |
| 84 import "dart:html"; | |
| 85 import "dart:math"; | |
| 86 | |
| 87 const String SEED_COLOR = "orange"; | |
| 88 const int SEED_RADIUS = 2; | |
| 89 const int SCALE_FACTOR = 4; | |
| 90 const num TAU = PI * 2; | |
| 91 const int MAX_D = 300; | |
| 92 const num centerX = MAX_D / 2; | |
| 93 const num centerY = centerX; | |
| 94 | |
| 95 final InputElement slider = query("#slider"); | |
| 96 final Element notes = query("#notes"); | |
| 97 final num PHI = (sqrt(5) + 1) / 2; | |
| 98 int seeds = 0; | |
| 99 final CanvasRenderingContext2D context = | |
| 100 (query("#canvas") as CanvasElement).context2D; | |
| 101 | |
| 102 void main() { | |
| 103 document.head.append(new StyleElement()..appendText(STYLE)); | |
| 104 document.body.innerHtml = BODY; | |
| 105 ImageElement img = document.querySelector("#math_png"); | |
| 106 img.src = MATH_PNG; | |
| 107 slider.onChange.listen((e) => draw()); | |
| 108 draw(); | |
| 109 } | |
| 110 | |
| 111 /// Draw the complete figure for the current number of seeds. | |
| 112 void draw() { | |
| 113 seeds = int.parse(slider.value); | |
| 114 context.clearRect(0, 0, MAX_D, MAX_D); | |
| 115 for (var i = 0; i < seeds; i++) { | |
| 116 final num theta = i * TAU / PHI; | |
| 117 final num r = sqrt(i) * SCALE_FACTOR; | |
| 118 drawSeed(centerX + r * cos(theta), centerY - r * sin(theta)); | |
| 119 } | |
| 120 notes.text = "\${seeds} seeds"; | |
| 121 } | |
| 122 | |
| 123 /// Draw a small circle representing a seed centered at (x,y). | |
| 124 void drawSeed(num x, num y) { | |
| 125 context..beginPath() | |
| 126 ..lineWidth = 2 | |
| 127 ..fillStyle = SEED_COLOR | |
| 128 ..strokeStyle = SEED_COLOR | |
| 129 ..arc(x, y, SEED_RADIUS, 0, TAU, false) | |
| 130 ..fill() | |
| 131 ..closePath() | |
| 132 ..stroke(); | |
| 133 } | |
| 134 | |
| 135 const String MATH_PNG = | |
| 136 "https://raw.githubusercontent.com/dart-lang/sample-sunflower/f808fcf68e523e
a69631d2e61fd26be3296a1a8f/web/math.png"; | |
| 137 const String BODY = """ | |
| 138 <h1>drfibonacci\'s Sunflower Spectacular</h1> | |
| 139 | |
| 140 <p>A canvas 2D demo.</p> | |
| 141 | |
| 142 <div id="container"> | |
| 143 <canvas id="canvas" width="300" height="300" class="center"></canvas> | |
| 144 <form class="center"> | |
| 145 <input id="slider" type="range" max="1000" value="500"/> | |
| 146 </form> | |
| 147 <br/> | |
| 148 <img id="math_png" width="350px" height="42px" class="center"> | |
| 149 </div> | |
| 150 | |
| 151 <footer> | |
| 152 <p id="summary"> </p> | |
| 153 <p id="notes"> </p> | |
| 154 </footer> | |
| 155 """; | |
| 156 | |
| 157 const String STYLE = r""" | |
| 158 body { | |
| 159 background-color: #F8F8F8; | |
| 160 font-family: \'Open Sans\', sans-serif; | |
| 161 font-size: 14px; | |
| 162 font-weight: normal; | |
| 163 line-height: 1.2em; | |
| 164 margin: 15px; | |
| 165 } | |
| 166 | |
| 167 p { | |
| 168 color: #333; | |
| 169 } | |
| 170 | |
| 171 #container { | |
| 172 width: 100%; | |
| 173 height: 400px; | |
| 174 position: relative; | |
| 175 border: 1px solid #ccc; | |
| 176 background-color: #fff; | |
| 177 } | |
| 178 | |
| 179 #summary { | |
| 180 float: left; | |
| 181 } | |
| 182 | |
| 183 #notes { | |
| 184 float: right; | |
| 185 width: 120px; | |
| 186 text-align: right; | |
| 187 } | |
| 188 | |
| 189 .error { | |
| 190 font-style: italic; | |
| 191 color: red; | |
| 192 } | |
| 193 | |
| 194 img { | |
| 195 border: 1px solid #ccc; | |
| 196 margin: auto; | |
| 197 } | |
| 198 | |
| 199 .center { | |
| 200 display: block; | |
| 201 margin: 0px auto; | |
| 202 text-align: center; | |
| 203 } | |
| 204 """; | |
| 205 '''; | |
| OLD | NEW |