lacci 0.2.1 → 0.2.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (570) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile +0 -2
  3. data/Gemfile.lock +72 -0
  4. data/Rakefile +1 -4
  5. data/lib/lacci/scarpe_cli.rb +70 -0
  6. data/lib/lacci/scarpe_core.rb +21 -0
  7. data/lib/lacci/version.rb +13 -0
  8. data/lib/shoes/app.rb +91 -14
  9. data/lib/{scarpe → shoes}/background.rb +1 -1
  10. data/lib/{scarpe → shoes}/border.rb +1 -1
  11. data/lib/{scarpe → shoes}/colors.rb +1 -1
  12. data/lib/shoes/constants.rb +5 -2
  13. data/lib/{scarpe → shoes}/display_service.rb +8 -9
  14. data/lib/{scarpe → shoes}/download.rb +5 -5
  15. data/lib/shoes/log.rb +71 -0
  16. data/lib/{scarpe → shoes}/spacing.rb +1 -1
  17. data/lib/shoes/widget.rb +28 -19
  18. data/lib/{scarpe → shoes/widgets}/alert.rb +2 -2
  19. data/lib/{scarpe → shoes/widgets}/arc.rb +6 -4
  20. data/lib/{scarpe → shoes/widgets}/button.rb +2 -2
  21. data/lib/shoes/widgets/check.rb +28 -0
  22. data/lib/{scarpe → shoes/widgets}/document_root.rb +3 -3
  23. data/lib/{scarpe → shoes/widgets}/edit_box.rb +1 -1
  24. data/lib/{scarpe → shoes/widgets}/edit_line.rb +1 -1
  25. data/lib/{scarpe → shoes/widgets}/flow.rb +6 -2
  26. data/lib/{scarpe → shoes/widgets}/font.rb +1 -1
  27. data/lib/{scarpe → shoes/widgets}/image.rb +2 -8
  28. data/lib/shoes/widgets/line.rb +18 -0
  29. data/lib/{scarpe → shoes/widgets}/link.rb +1 -1
  30. data/lib/{scarpe → shoes/widgets}/list_box.rb +1 -1
  31. data/lib/{scarpe → shoes/widgets}/para.rb +1 -25
  32. data/lib/shoes/widgets/radio.rb +35 -0
  33. data/lib/shoes/widgets/shape.rb +37 -0
  34. data/lib/shoes/widgets/slot.rb +75 -0
  35. data/lib/{scarpe → shoes/widgets}/span.rb +1 -1
  36. data/lib/{scarpe → shoes/widgets}/stack.rb +5 -1
  37. data/lib/{scarpe → shoes/widgets}/star.rb +5 -8
  38. data/lib/{scarpe → shoes/widgets}/subscription_item.rb +1 -1
  39. data/lib/shoes/{text_widget.rb → widgets/text_widget.rb} +2 -3
  40. data/lib/{scarpe → shoes/widgets}/video.rb +1 -1
  41. data/lib/shoes/widgets.rb +29 -0
  42. data/lib/shoes.rb +71 -9
  43. metadata +38 -555
  44. data/.rubocop.yml +0 -85
  45. data/.ruby-version +0 -1
  46. data/.vscode/extensions.json +0 -5
  47. data/.yardopts +0 -12
  48. data/CHANGELOG.md +0 -19
  49. data/CODE_OF_CONDUCT.md +0 -84
  50. data/CONTRIBUTING.md +0 -20
  51. data/LICENSE.txt +0 -21
  52. data/README.md +0 -178
  53. data/bin/console +0 -15
  54. data/bin/setup +0 -8
  55. data/dev.yml +0 -7
  56. data/docs/static/PKGBUILD +0 -47
  57. data/docs/static/Shoes.icns +0 -0
  58. data/docs/static/avatar.png +0 -0
  59. data/docs/static/code_highlighter.js +0 -188
  60. data/docs/static/code_highlighter_ruby.js +0 -26
  61. data/docs/static/icon-debug.png +0 -0
  62. data/docs/static/icon-error.png +0 -0
  63. data/docs/static/icon-info.png +0 -0
  64. data/docs/static/icon-warn.png +0 -0
  65. data/docs/static/listbox_button1.png +0 -0
  66. data/docs/static/listbox_button2.png +0 -0
  67. data/docs/static/man-app.png +0 -0
  68. data/docs/static/man-builds.png +0 -0
  69. data/docs/static/man-builds1.png +0 -0
  70. data/docs/static/man-editor-notepad.png +0 -0
  71. data/docs/static/man-editor-osx.png +0 -0
  72. data/docs/static/man-ele-background.png +0 -0
  73. data/docs/static/man-ele-border.png +0 -0
  74. data/docs/static/man-ele-button.png +0 -0
  75. data/docs/static/man-ele-check.png +0 -0
  76. data/docs/static/man-ele-editbox.png +0 -0
  77. data/docs/static/man-ele-editline.png +0 -0
  78. data/docs/static/man-ele-image.png +0 -0
  79. data/docs/static/man-ele-listbox.png +0 -0
  80. data/docs/static/man-ele-progress.png +0 -0
  81. data/docs/static/man-ele-radio.png +0 -0
  82. data/docs/static/man-ele-shape.png +0 -0
  83. data/docs/static/man-ele-textblock.png +0 -0
  84. data/docs/static/man-ele-video.png +0 -0
  85. data/docs/static/man-intro-dmg.png +0 -0
  86. data/docs/static/man-intro-exe.png +0 -0
  87. data/docs/static/man-look-tiger.png +0 -0
  88. data/docs/static/man-look-ubuntu.png +0 -0
  89. data/docs/static/man-look-vista.png +0 -0
  90. data/docs/static/man-run-osx.png +0 -0
  91. data/docs/static/man-run-vista.png +0 -0
  92. data/docs/static/man-run-xp.png +0 -0
  93. data/docs/static/man-shot1.png +0 -0
  94. data/docs/static/manual-en.txt +0 -3529
  95. data/docs/static/manual-ja.txt +0 -2829
  96. data/docs/static/manual.css +0 -171
  97. data/docs/static/manual.md +0 -3528
  98. data/docs/static/menu-corner1.png +0 -0
  99. data/docs/static/menu-corner2.png +0 -0
  100. data/docs/static/menu-gray.png +0 -0
  101. data/docs/static/menu-left.png +0 -0
  102. data/docs/static/menu-right.png +0 -0
  103. data/docs/static/menu-top.png +0 -0
  104. data/docs/static/shoes-dmg.jpg +0 -0
  105. data/docs/static/shoes-icon-blue.png +0 -0
  106. data/docs/static/shoes-icon.png +0 -0
  107. data/docs/static/shoes-manual-apps.gif +0 -0
  108. data/docs/static/shoes_main_window.png +0 -0
  109. data/docs/static/stripe.png +0 -0
  110. data/docs/static/stubs/blank.exe +0 -0
  111. data/docs/static/stubs/blank.hfz +0 -0
  112. data/docs/static/stubs/blank.run +0 -375
  113. data/docs/static/stubs/cocoa-install +0 -0
  114. data/docs/static/stubs/sh-install +0 -49
  115. data/docs/static/stubs/shoes-stub-inject.exe +0 -0
  116. data/docs/static/stubs/shoes-stub.exe +0 -0
  117. data/docs/static/tutor-back.png +0 -0
  118. data/docs/yard/catscradle.md +0 -44
  119. data/docs/yard/template/default/fulldoc/html/setup.rb +0 -13
  120. data/docs/yard/template/default/layout/html/setup.rb +0 -9
  121. data/examples/backdround_with_image.rb +0 -16
  122. data/examples/bloopsaphone/working/1901_by_Aanand_Prasad.rb +0 -478
  123. data/examples/bloopsaphone/working/b1.rb +0 -64
  124. data/examples/bloopsaphone/working/b2.rb +0 -36
  125. data/examples/bloopsaphone/working/bloops_test.rb +0 -41
  126. data/examples/bloopsaphone/working/bloopsaphone_theme_song_by_why.rb +0 -31
  127. data/examples/bloopsaphone/working/feepogram.rb +0 -67
  128. data/examples/bloopsaphone/working/simpsons_theme_song_by_why.rb +0 -14
  129. data/examples/bloopsaphone/working/tune_cheeky_drat.rb +0 -210
  130. data/examples/button.rb +0 -10
  131. data/examples/button_alert.rb +0 -6
  132. data/examples/button_go_away.rb +0 -6
  133. data/examples/button_with_position_and_size.rb +0 -7
  134. data/examples/coffee.rb +0 -14
  135. data/examples/download.rb +0 -5
  136. data/examples/download_and_show_image.rb +0 -28
  137. data/examples/edit_box.rb +0 -8
  138. data/examples/edit_line.rb +0 -8
  139. data/examples/fill.rb +0 -25
  140. data/examples/flow.rb +0 -11
  141. data/examples/fonts.rb +0 -6
  142. data/examples/gen.rb +0 -140
  143. data/examples/get_headers.rb +0 -10
  144. data/examples/hello_world.rb +0 -3
  145. data/examples/highlander.rb +0 -87
  146. data/examples/image/clickable_image.rb +0 -5
  147. data/examples/image/image.rb +0 -3
  148. data/examples/image/image_size.rb +0 -7
  149. data/examples/image/image_with_position_and_size.rb +0 -3
  150. data/examples/info.rb +0 -9
  151. data/examples/legacy/not_checked/expert/colours.rb +0 -105
  152. data/examples/legacy/not_checked/expert/curve-animation.rb +0 -31
  153. data/examples/legacy/not_checked/expert/curve-control-point.rb +0 -51
  154. data/examples/legacy/not_checked/expert/custom-list-box.rb +0 -53
  155. data/examples/legacy/not_checked/expert/definr.rb +0 -23
  156. data/examples/legacy/not_checked/expert/funnies.rb +0 -56
  157. data/examples/legacy/not_checked/expert/minesweeper.rb +0 -267
  158. data/examples/legacy/not_checked/expert/othello.rb +0 -318
  159. data/examples/legacy/not_checked/expert/pong.rb +0 -62
  160. data/examples/legacy/not_checked/expert/tankspank.rb +0 -385
  161. data/examples/legacy/not_checked/expert/tooltips.rb +0 -45
  162. data/examples/legacy/not_checked/expert/url.rb +0 -37
  163. data/examples/legacy/not_checked/expert/video-player.rb +0 -256
  164. data/examples/legacy/not_checked/good/_why-stories.rb +0 -44
  165. data/examples/legacy/not_checked/good/_why-stories.yaml +0 -387
  166. data/examples/legacy/not_checked/good/arc.rb +0 -37
  167. data/examples/legacy/not_checked/good/cardflip.rb +0 -141
  168. data/examples/legacy/not_checked/good/clock.rb +0 -51
  169. data/examples/legacy/not_checked/good/console.rb +0 -21
  170. data/examples/legacy/not_checked/good/follow.rb +0 -26
  171. data/examples/legacy/not_checked/good/image-rotate.rb +0 -14
  172. data/examples/legacy/not_checked/good/paris.svg +0 -7236
  173. data/examples/legacy/not_checked/good/path-animation.rb +0 -46
  174. data/examples/legacy/not_checked/good/plots.rb +0 -100
  175. data/examples/legacy/not_checked/good/reminder.rb +0 -174
  176. data/examples/legacy/not_checked/good/svgview.rb +0 -113
  177. data/examples/legacy/not_checked/good/vjot.rb +0 -56
  178. data/examples/legacy/not_checked/shoes-contrib/.gitignore +0 -2
  179. data/examples/legacy/not_checked/shoes-contrib/README.md +0 -34
  180. data/examples/legacy/not_checked/shoes-contrib/animation/animate-ovals.rb +0 -21
  181. data/examples/legacy/not_checked/shoes-contrib/animation/flowers.rb +0 -59
  182. data/examples/legacy/not_checked/shoes-contrib/animation/happy-trails.rb +0 -31
  183. data/examples/legacy/not_checked/shoes-contrib/animation/mice-satellites.rb +0 -27
  184. data/examples/legacy/not_checked/shoes-contrib/animation/oval-motion.rb +0 -12
  185. data/examples/legacy/not_checked/shoes-contrib/animation/pink-bubbles.rb +0 -34
  186. data/examples/legacy/not_checked/shoes-contrib/animation/pulsate.rb +0 -18
  187. data/examples/legacy/not_checked/shoes-contrib/animation/rotating-star.rb +0 -18
  188. data/examples/legacy/not_checked/shoes-contrib/app/download-and-save.rb +0 -11
  189. data/examples/legacy/not_checked/shoes-contrib/app/download.rb +0 -10
  190. data/examples/legacy/not_checked/shoes-contrib/app/get-google.rb +0 -11
  191. data/examples/legacy/not_checked/shoes-contrib/app/mouse-detection.rb +0 -7
  192. data/examples/legacy/not_checked/shoes-contrib/app/resizeable-false.rb +0 -6
  193. data/examples/legacy/not_checked/shoes-contrib/art/bubble-bullseye.rb +0 -23
  194. data/examples/legacy/not_checked/shoes-contrib/art/faded.rb +0 -17
  195. data/examples/legacy/not_checked/shoes-contrib/art/fill-oval.rb +0 -5
  196. data/examples/legacy/not_checked/shoes-contrib/art/mask.rb +0 -15
  197. data/examples/legacy/not_checked/shoes-contrib/art/oval-gradient.rb +0 -6
  198. data/examples/legacy/not_checked/shoes-contrib/art/star-gradient.rb +0 -4
  199. data/examples/legacy/not_checked/shoes-contrib/basic/basic-edit-box.rb +0 -8
  200. data/examples/legacy/not_checked/shoes-contrib/basic/basic-new-window.rb +0 -8
  201. data/examples/legacy/not_checked/shoes-contrib/basic/basic-oval-image.rb +0 -8
  202. data/examples/legacy/not_checked/shoes-contrib/basic/basic-oval-shape.rb +0 -8
  203. data/examples/legacy/not_checked/shoes-contrib/basic/basic-oval.rb +0 -6
  204. data/examples/legacy/not_checked/shoes-contrib/basic/class-book.rb +0 -43
  205. data/examples/legacy/not_checked/shoes-contrib/basic/class-book.yaml +0 -387
  206. data/examples/legacy/not_checked/shoes-contrib/basic/clock.rb +0 -6
  207. data/examples/legacy/not_checked/shoes-contrib/basic/edit-stack +0 -14
  208. data/examples/legacy/not_checked/shoes-contrib/basic/gradient-shoes.rb +0 -7
  209. data/examples/legacy/not_checked/shoes-contrib/basic/list_box-shape-report.rb +0 -19
  210. data/examples/legacy/not_checked/shoes-contrib/basic/rect-arrow.rb +0 -7
  211. data/examples/legacy/not_checked/shoes-contrib/basic/scribble.rb +0 -8
  212. data/examples/legacy/not_checked/shoes-contrib/basic/search.rb +0 -32
  213. data/examples/legacy/not_checked/shoes-contrib/basic/shoes-notes.rb +0 -16
  214. data/examples/legacy/not_checked/shoes-contrib/basic/url-shoes-subclassing.rb +0 -24
  215. data/examples/legacy/not_checked/shoes-contrib/browser.rb +0 -21
  216. data/examples/legacy/not_checked/shoes-contrib/elements/background-column.rb +0 -3
  217. data/examples/legacy/not_checked/shoes-contrib/elements/background.rb +0 -4
  218. data/examples/legacy/not_checked/shoes-contrib/elements/basic-fps.rb +0 -6
  219. data/examples/legacy/not_checked/shoes-contrib/elements/border-cat.rb +0 -6
  220. data/examples/legacy/not_checked/shoes-contrib/elements/button-block.rb +0 -8
  221. data/examples/legacy/not_checked/shoes-contrib/elements/check-mate.rb +0 -15
  222. data/examples/legacy/not_checked/shoes-contrib/elements/common-styles.rb +0 -13
  223. data/examples/legacy/not_checked/shoes-contrib/elements/displace-animation.rb +0 -13
  224. data/examples/legacy/not_checked/shoes-contrib/elements/edit_box-character-count.rb +0 -7
  225. data/examples/legacy/not_checked/shoes-contrib/elements/edit_line-character-count.rb +0 -7
  226. data/examples/legacy/not_checked/shoes-contrib/elements/image-icon.rb +0 -3
  227. data/examples/legacy/not_checked/shoes-contrib/elements/list_box-select-class.rb +0 -13
  228. data/examples/legacy/not_checked/shoes-contrib/elements/list_box.rb +0 -6
  229. data/examples/legacy/not_checked/shoes-contrib/elements/move-flow-animate.rb +0 -13
  230. data/examples/legacy/not_checked/shoes-contrib/elements/phat-button.rb +0 -7
  231. data/examples/legacy/not_checked/shoes-contrib/elements/popup.rb +0 -7
  232. data/examples/legacy/not_checked/shoes-contrib/elements/progress-bar.rb +0 -10
  233. data/examples/legacy/not_checked/shoes-contrib/elements/radio-dreamcast-favs.rb +0 -17
  234. data/examples/legacy/not_checked/shoes-contrib/elements/timer.rb +0 -6
  235. data/examples/legacy/not_checked/shoes-contrib/elements/width-introspec.rb +0 -8
  236. data/examples/legacy/not_checked/shoes-contrib/events/background-hover.rb +0 -11
  237. data/examples/legacy/not_checked/shoes-contrib/events/motion-detect.rb +0 -9
  238. data/examples/legacy/not_checked/shoes-contrib/events/pressed-key.rb +0 -6
  239. data/examples/legacy/not_checked/shoes-contrib/expert/expert-funnies.rb +0 -51
  240. data/examples/legacy/not_checked/shoes-contrib/expert/expert-irb.rb +0 -112
  241. data/examples/legacy/not_checked/shoes-contrib/expert/expert-othello.rb +0 -319
  242. data/examples/legacy/not_checked/shoes-contrib/good/good-arc.rb +0 -37
  243. data/examples/legacy/not_checked/shoes-contrib/good/good-clock.rb +0 -51
  244. data/examples/legacy/not_checked/shoes-contrib/good/good-follow.rb +0 -26
  245. data/examples/legacy/not_checked/shoes-contrib/good/good-reminder.rb +0 -174
  246. data/examples/legacy/not_checked/shoes-contrib/good/good-vjot.rb +0 -56
  247. data/examples/legacy/not_checked/shoes-contrib/kernel/ask.rb +0 -4
  248. data/examples/legacy/not_checked/shoes-contrib/kernel/ask_color.rb +0 -4
  249. data/examples/legacy/not_checked/shoes-contrib/kernel/ask_open_file.rb +0 -4
  250. data/examples/legacy/not_checked/shoes-contrib/kernel/ask_save_file.rb +0 -7
  251. data/examples/legacy/not_checked/shoes-contrib/kernel/confirm.rb +0 -3
  252. data/examples/legacy/not_checked/shoes-contrib/kernel/debug.rb +0 -4
  253. data/examples/legacy/not_checked/shoes-contrib/kernel/exit.rb +0 -5
  254. data/examples/legacy/not_checked/shoes-contrib/kernel/font.rb +0 -5
  255. data/examples/legacy/not_checked/shoes-contrib/kernel/fonts.rb +0 -3
  256. data/examples/legacy/not_checked/shoes-contrib/manipulation/append-slot.rb +0 -9
  257. data/examples/legacy/not_checked/shoes-contrib/manipulation/clear-slot.rb +0 -6
  258. data/examples/legacy/not_checked/shoes-contrib/manipulation/prepend-slot.rb +0 -6
  259. data/examples/legacy/not_checked/shoes-contrib/manipulation/roll.rb +0 -17
  260. data/examples/legacy/not_checked/shoes-contrib/position/gutter-margin.rb +0 -5
  261. data/examples/legacy/not_checked/shoes-contrib/position/stack-width.rb +0 -3
  262. data/examples/legacy/not_checked/shoes-contrib/simple/simple-accordion.rb +0 -75
  263. data/examples/legacy/not_checked/shoes-contrib/simple/simple-anim-shapes.rb +0 -17
  264. data/examples/legacy/not_checked/shoes-contrib/simple/simple-anim-text.rb +0 -13
  265. data/examples/legacy/not_checked/shoes-contrib/simple/simple-arc.rb +0 -23
  266. data/examples/legacy/not_checked/shoes-contrib/simple/simple-bounce.rb +0 -24
  267. data/examples/legacy/not_checked/shoes-contrib/simple/simple-calc.rb +0 -70
  268. data/examples/legacy/not_checked/shoes-contrib/simple/simple-chipmunk.rb +0 -26
  269. data/examples/legacy/not_checked/shoes-contrib/simple/simple-control-sizes.rb +0 -24
  270. data/examples/legacy/not_checked/shoes-contrib/simple/simple-curve.rb +0 -26
  271. data/examples/legacy/not_checked/shoes-contrib/simple/simple-dialogs.rb +0 -29
  272. data/examples/legacy/not_checked/shoes-contrib/simple/simple-downloader.rb +0 -27
  273. data/examples/legacy/not_checked/shoes-contrib/simple/simple-draw.rb +0 -13
  274. data/examples/legacy/not_checked/shoes-contrib/simple/simple-editor.rb +0 -28
  275. data/examples/legacy/not_checked/shoes-contrib/simple/simple-form.rb +0 -28
  276. data/examples/legacy/not_checked/shoes-contrib/simple/simple-form.shy +0 -0
  277. data/examples/legacy/not_checked/shoes-contrib/simple/simple-mask.rb +0 -21
  278. data/examples/legacy/not_checked/shoes-contrib/simple/simple-menu.rb +0 -31
  279. data/examples/legacy/not_checked/shoes-contrib/simple/simple-menu1.rb +0 -35
  280. data/examples/legacy/not_checked/shoes-contrib/simple/simple-rubygems.rb +0 -29
  281. data/examples/legacy/not_checked/shoes-contrib/simple/simple-slide.rb +0 -45
  282. data/examples/legacy/not_checked/shoes-contrib/simple/simple-sphere.rb +0 -28
  283. data/examples/legacy/not_checked/shoes-contrib/simple/simple-sqlite3.rb +0 -13
  284. data/examples/legacy/not_checked/shoes-contrib/simple/simple-timer.rb +0 -13
  285. data/examples/legacy/not_checked/shoes-contrib/simple/simple-video.rb +0 -13
  286. data/examples/legacy/not_checked/shoes-contrib/styles/alignment.rb +0 -4
  287. data/examples/legacy/not_checked/shoes-contrib/styles/attachment.rb +0 -5
  288. data/examples/legacy/not_checked/shoes-contrib/styles/emphasis.rb +0 -3
  289. data/examples/legacy/not_checked/shoes-contrib/styles/gradient-angle.rb +0 -3
  290. data/examples/legacy/not_checked/shoes-contrib/styles/para-methods.rb +0 -5
  291. data/examples/legacy/not_checked/shoes-contrib/styles/para-red-underlined.rb +0 -3
  292. data/examples/legacy/not_checked/shoes-contrib/styles/para-style-method.rb +0 -4
  293. data/examples/legacy/not_checked/shoes-dep-samples/expert-game-of-life.rb +0 -243
  294. data/examples/legacy/not_checked/shoes-dep-samples/expert-othello.rb +0 -319
  295. data/examples/legacy/not_checked/shoes-dep-samples/good-clock.rb +0 -51
  296. data/examples/legacy/not_checked/shoes-dep-samples/good-follow.rb +0 -26
  297. data/examples/legacy/not_checked/shoes-dep-samples/good-reminder.rb +0 -174
  298. data/examples/legacy/not_checked/shoes-dep-samples/good-vjot.rb +0 -56
  299. data/examples/legacy/not_checked/shoes-dep-samples/simple-accordion.rb +0 -75
  300. data/examples/legacy/not_checked/shoes-dep-samples/simple-anim-shapes.rb +0 -17
  301. data/examples/legacy/not_checked/shoes-dep-samples/simple-anim-text.rb +0 -13
  302. data/examples/legacy/not_checked/shoes-dep-samples/simple-arc.rb +0 -23
  303. data/examples/legacy/not_checked/shoes-dep-samples/simple-bounce.rb +0 -24
  304. data/examples/legacy/not_checked/shoes-dep-samples/simple-calc.rb +0 -70
  305. data/examples/legacy/not_checked/shoes-dep-samples/simple-chipmunk.rb +0 -26
  306. data/examples/legacy/not_checked/shoes-dep-samples/simple-control-sizes.rb +0 -24
  307. data/examples/legacy/not_checked/shoes-dep-samples/simple-curve.rb +0 -26
  308. data/examples/legacy/not_checked/shoes-dep-samples/simple-dialogs.rb +0 -29
  309. data/examples/legacy/not_checked/shoes-dep-samples/simple-draw.rb +0 -13
  310. data/examples/legacy/not_checked/shoes-dep-samples/simple-editor.rb +0 -28
  311. data/examples/legacy/not_checked/shoes-dep-samples/simple-form.rb +0 -28
  312. data/examples/legacy/not_checked/shoes-dep-samples/simple-form.shy +0 -0
  313. data/examples/legacy/not_checked/shoes-dep-samples/simple-mask.rb +0 -21
  314. data/examples/legacy/not_checked/shoes-dep-samples/simple-menu.rb +0 -31
  315. data/examples/legacy/not_checked/shoes-dep-samples/simple-menu1.rb +0 -35
  316. data/examples/legacy/not_checked/shoes-dep-samples/simple-rubygems.rb +0 -29
  317. data/examples/legacy/not_checked/shoes-dep-samples/simple-slide.rb +0 -45
  318. data/examples/legacy/not_checked/shoes-dep-samples/simple-sphere.rb +0 -28
  319. data/examples/legacy/not_checked/shoes-dep-samples/simple-sqlite3.rb +0 -13
  320. data/examples/legacy/not_checked/shoes-dep-samples/simple-timer.rb +0 -13
  321. data/examples/legacy/not_checked/shoes-dep-samples/simple-video.rb +0 -13
  322. data/examples/legacy/not_checked/shoes3-tests/AnemicCinema1926marcelDuchampCut.mp4 +0 -0
  323. data/examples/legacy/not_checked/shoes3-tests/button/button.rb +0 -53
  324. data/examples/legacy/not_checked/shoes3-tests/cache/cache.rb +0 -41
  325. data/examples/legacy/not_checked/shoes3-tests/combo/combo.rb +0 -24
  326. data/examples/legacy/not_checked/shoes3-tests/curl/bare.rb +0 -34
  327. data/examples/legacy/not_checked/shoes3-tests/curl/downloader.rb +0 -40
  328. data/examples/legacy/not_checked/shoes3-tests/curl/m1.rb +0 -11
  329. data/examples/legacy/not_checked/shoes3-tests/curl/m2.rb +0 -12
  330. data/examples/legacy/not_checked/shoes3-tests/curl/m3.rb +0 -11
  331. data/examples/legacy/not_checked/shoes3-tests/curl/m4.rb +0 -5
  332. data/examples/legacy/not_checked/shoes3-tests/curl/typ.rb +0 -30
  333. data/examples/legacy/not_checked/shoes3-tests/cursor/c1.rb +0 -21
  334. data/examples/legacy/not_checked/shoes3-tests/decoration.rb +0 -14
  335. data/examples/legacy/not_checked/shoes3-tests/dialogs/ask.rb +0 -6
  336. data/examples/legacy/not_checked/shoes3-tests/dialogs/confirm.rb +0 -6
  337. data/examples/legacy/not_checked/shoes3-tests/editbox/editbox.rb +0 -36
  338. data/examples/legacy/not_checked/shoes3-tests/editline/editline.rb +0 -27
  339. data/examples/legacy/not_checked/shoes3-tests/events/button.rb +0 -32
  340. data/examples/legacy/not_checked/shoes3-tests/events/button.yaml +0 -40
  341. data/examples/legacy/not_checked/shoes3-tests/events/capture.rb +0 -57
  342. data/examples/legacy/not_checked/shoes3-tests/events/chipmunk.yaml +0 -47
  343. data/examples/legacy/not_checked/shoes3-tests/events/event0.rb +0 -8
  344. data/examples/legacy/not_checked/shoes3-tests/events/event1.rb +0 -51
  345. data/examples/legacy/not_checked/shoes3-tests/events/event1.yaml +0 -26
  346. data/examples/legacy/not_checked/shoes3-tests/events/event2.rb +0 -46
  347. data/examples/legacy/not_checked/shoes3-tests/events/event3.rb +0 -44
  348. data/examples/legacy/not_checked/shoes3-tests/events/event4.rb +0 -65
  349. data/examples/legacy/not_checked/shoes3-tests/events/event5.rb +0 -17
  350. data/examples/legacy/not_checked/shoes3-tests/events/event6.rb +0 -51
  351. data/examples/legacy/not_checked/shoes3-tests/events/replay.rb +0 -60
  352. data/examples/legacy/not_checked/shoes3-tests/gapp/fullscreen.rb +0 -38
  353. data/examples/legacy/not_checked/shoes3-tests/gapp/icon.rb +0 -56
  354. data/examples/legacy/not_checked/shoes3-tests/gapp/mon1.rb +0 -46
  355. data/examples/legacy/not_checked/shoes3-tests/gapp/settings1.rb +0 -22
  356. data/examples/legacy/not_checked/shoes3-tests/gapp/title1.rb +0 -34
  357. data/examples/legacy/not_checked/shoes3-tests/indian.m4a +0 -0
  358. data/examples/legacy/not_checked/shoes3-tests/menus/event.rb +0 -33
  359. data/examples/legacy/not_checked/shoes3-tests/menus/menu1.rb +0 -8
  360. data/examples/legacy/not_checked/shoes3-tests/menus/menu2.rb +0 -25
  361. data/examples/legacy/not_checked/shoes3-tests/menus/menu3.rb +0 -103
  362. data/examples/legacy/not_checked/shoes3-tests/menus/menu4.rb +0 -41
  363. data/examples/legacy/not_checked/shoes3-tests/menus/tests.txt +0 -42
  364. data/examples/legacy/not_checked/shoes3-tests/opacity.rb +0 -13
  365. data/examples/legacy/not_checked/shoes3-tests/plot/^IRX.R +0 -5219
  366. data/examples/legacy/not_checked/shoes3-tests/plot/^SPX +0 -5219
  367. data/examples/legacy/not_checked/shoes3-tests/plot/cstest.rb +0 -51
  368. data/examples/legacy/not_checked/shoes3-tests/plot/gr1.rb +0 -73
  369. data/examples/legacy/not_checked/shoes3-tests/plot/gr2.rb +0 -40
  370. data/examples/legacy/not_checked/shoes3-tests/plot/gr3.rb +0 -47
  371. data/examples/legacy/not_checked/shoes3-tests/plot/gr4.rb +0 -35
  372. data/examples/legacy/not_checked/shoes3-tests/plot/gr5.rb +0 -31
  373. data/examples/legacy/not_checked/shoes3-tests/plot/gr6.rb +0 -35
  374. data/examples/legacy/not_checked/shoes3-tests/plot/gr7.rb +0 -37
  375. data/examples/legacy/not_checked/shoes3-tests/plot/grcsv.rb +0 -219
  376. data/examples/legacy/not_checked/shoes3-tests/plot/manual.rb +0 -40
  377. data/examples/legacy/not_checked/shoes3-tests/progress/progress.rb +0 -29
  378. data/examples/legacy/not_checked/shoes3-tests/radio/clear.rb +0 -20
  379. data/examples/legacy/not_checked/shoes3-tests/radio/group.rb +0 -18
  380. data/examples/legacy/not_checked/shoes3-tests/radio/multiple.rb +0 -32
  381. data/examples/legacy/not_checked/shoes3-tests/radio/nogroup.rb +0 -9
  382. data/examples/legacy/not_checked/shoes3-tests/simpletest.svg +0 -14
  383. data/examples/legacy/not_checked/shoes3-tests/spinner.rb +0 -15
  384. data/examples/legacy/not_checked/shoes3-tests/svg.rb +0 -208
  385. data/examples/legacy/not_checked/shoes3-tests/switch/switch.rb +0 -28
  386. data/examples/legacy/not_checked/shoes3-tests/systray/back.rb +0 -20
  387. data/examples/legacy/not_checked/shoes3-tests/systray/note.rb +0 -17
  388. data/examples/legacy/not_checked/shoes3-tests/terminal/cursor.rb +0 -27
  389. data/examples/legacy/not_checked/shoes3-tests/terminal/ed.rb +0 -65
  390. data/examples/legacy/not_checked/shoes3-tests/terminal/el.rb +0 -50
  391. data/examples/legacy/not_checked/shoes3-tests/terminal/logattr.rb +0 -31
  392. data/examples/legacy/not_checked/shoes3-tests/tests_color.rb +0 -138
  393. data/examples/legacy/not_checked/shoes3-tests/tests_svg.rb +0 -228
  394. data/examples/legacy/not_checked/shoes3-tests/tests_video_vlc.rb +0 -186
  395. data/examples/legacy/not_checked/shoes3-tests/tooltips.rb +0 -20
  396. data/examples/legacy/not_checked/shoes3-tests/video_vlc.rb +0 -242
  397. data/examples/legacy/not_checked/shoes3-tests/wheel/wheel1.rb +0 -21
  398. data/examples/legacy/not_checked/simple/accordion.rb +0 -81
  399. data/examples/legacy/not_checked/simple/anim-shapes.rb +0 -17
  400. data/examples/legacy/not_checked/simple/anim-text.rb +0 -13
  401. data/examples/legacy/not_checked/simple/arc.rb +0 -23
  402. data/examples/legacy/not_checked/simple/bounce.rb +0 -24
  403. data/examples/legacy/not_checked/simple/chipmunk.rb +0 -26
  404. data/examples/legacy/not_checked/simple/control-sizes.rb +0 -24
  405. data/examples/legacy/not_checked/simple/curve-control-points.rb +0 -24
  406. data/examples/legacy/not_checked/simple/curve.rb +0 -26
  407. data/examples/legacy/not_checked/simple/dialogs.rb +0 -29
  408. data/examples/legacy/not_checked/simple/downloader.rb +0 -40
  409. data/examples/legacy/not_checked/simple/downloader1.rb +0 -31
  410. data/examples/legacy/not_checked/simple/draw.rb +0 -13
  411. data/examples/legacy/not_checked/simple/editor.rb +0 -28
  412. data/examples/legacy/not_checked/simple/form.rb +0 -30
  413. data/examples/legacy/not_checked/simple/image.rb +0 -21
  414. data/examples/legacy/not_checked/simple/info.rb +0 -78
  415. data/examples/legacy/not_checked/simple/mask.rb +0 -21
  416. data/examples/legacy/not_checked/simple/mask2.rb +0 -27
  417. data/examples/legacy/not_checked/simple/menu.rb +0 -31
  418. data/examples/legacy/not_checked/simple/menu1.rb +0 -35
  419. data/examples/legacy/not_checked/simple/slide.rb +0 -45
  420. data/examples/legacy/not_checked/simple/sphere.rb +0 -28
  421. data/examples/legacy/not_checked/superleg.rb +0 -244
  422. data/examples/legacy/working/shoes-contrib/basic/a-poem.rb +0 -24
  423. data/examples/legacy/working/shoes-contrib/basic/basic-blocks-instances.rb +0 -7
  424. data/examples/legacy/working/shoes-contrib/basic/basic-blocks.rb +0 -7
  425. data/examples/legacy/working/shoes-contrib/basic/basic-slot.rb +0 -8
  426. data/examples/legacy/working/shoes-contrib/basic/intro.rb +0 -20
  427. data/examples/legacy/working/shoes-contrib/basic/two-column.rb +0 -12
  428. data/examples/legacy/working/shoes-contrib/elements/edit_box.rb +0 -6
  429. data/examples/legacy/working/shoes-contrib/kernel/alert.rb +0 -3
  430. data/examples/legacy/working/simple/calc.rb +0 -71
  431. data/examples/legacy/working/simple/sqlite3.rb +0 -27
  432. data/examples/legacy/working/simple/timer.rb +0 -13
  433. data/examples/line.rb +0 -5
  434. data/examples/link.rb +0 -20
  435. data/examples/list_box.rb +0 -8
  436. data/examples/local_fonts.rb +0 -4
  437. data/examples/local_images.rb +0 -4
  438. data/examples/motion_events.rb +0 -20
  439. data/examples/para/collection_of_arguments.rb +0 -9
  440. data/examples/para/hello_world.rb +0 -5
  441. data/examples/para/hide_and_show.rb +0 -9
  442. data/examples/para/rainbow.rb +0 -11
  443. data/examples/para/rainbow_2.rb +0 -11
  444. data/examples/para/sizes.rb +0 -11
  445. data/examples/para/sizes_2.rb +0 -12
  446. data/examples/para/strong.rb +0 -3
  447. data/examples/para_text_widgets.rb +0 -4
  448. data/examples/parse_xl_funnies.rb +0 -58
  449. data/examples/pirate.png +0 -0
  450. data/examples/raw_flow.rb +0 -11
  451. data/examples/ruby_racer.rb +0 -50
  452. data/examples/selfitude.rb +0 -18
  453. data/examples/shapes/arc.rb +0 -8
  454. data/examples/shapes/shapes.rb +0 -8
  455. data/examples/shapes/shapes_fill.rb +0 -10
  456. data/examples/shapes/star.rb +0 -5
  457. data/examples/shoes_school.rb +0 -66
  458. data/examples/shoes_splorer.rb +0 -150
  459. data/examples/simple_slides.rb +0 -73
  460. data/examples/skip_ci/parrot.rb +0 -22
  461. data/examples/skip_ci/say.rb +0 -20
  462. data/examples/sleepless.rb +0 -26
  463. data/examples/slots.rb +0 -10
  464. data/examples/spacing.rb +0 -18
  465. data/examples/span.rb +0 -6
  466. data/examples/stack/background.rb +0 -35
  467. data/examples/stack/border.rb +0 -11
  468. data/examples/stack/gradients.rb +0 -6
  469. data/examples/stack/raw_stack.rb +0 -8
  470. data/examples/stack/stack.rb +0 -27
  471. data/examples/text_change.rb +0 -4
  472. data/examples/text_sizes.rb +0 -10
  473. data/examples/timmy.rb +0 -109
  474. data/examples/title_and_resize.rb +0 -3
  475. data/examples/video.rb +0 -10
  476. data/exe/scarpe +0 -107
  477. data/fonts/Pacifico.ttf +0 -0
  478. data/lib/scarpe/base64.rb +0 -27
  479. data/lib/scarpe/cats_cradle.rb +0 -255
  480. data/lib/scarpe/fill.rb +0 -23
  481. data/lib/scarpe/glibui/README.md +0 -34
  482. data/lib/scarpe/glibui/alert.rb +0 -65
  483. data/lib/scarpe/glibui/app.rb +0 -27
  484. data/lib/scarpe/glibui/background.rb +0 -18
  485. data/lib/scarpe/glibui/border.rb +0 -22
  486. data/lib/scarpe/glibui/button.rb +0 -38
  487. data/lib/scarpe/glibui/dimensions.rb +0 -22
  488. data/lib/scarpe/glibui/document_root.rb +0 -33
  489. data/lib/scarpe/glibui/edit_box.rb +0 -44
  490. data/lib/scarpe/glibui/edit_line.rb +0 -43
  491. data/lib/scarpe/glibui/flow.rb +0 -33
  492. data/lib/scarpe/glibui/html.rb +0 -77
  493. data/lib/scarpe/glibui/image.rb +0 -36
  494. data/lib/scarpe/glibui/link.rb +0 -29
  495. data/lib/scarpe/glibui/local_display.rb +0 -62
  496. data/lib/scarpe/glibui/para.rb +0 -84
  497. data/lib/scarpe/glibui/spacing.rb +0 -41
  498. data/lib/scarpe/glibui/stack.rb +0 -33
  499. data/lib/scarpe/glibui/text_widget.rb +0 -30
  500. data/lib/scarpe/glibui/widget.rb +0 -81
  501. data/lib/scarpe/glibui.rb +0 -29
  502. data/lib/scarpe/libui/alert.rb +0 -9
  503. data/lib/scarpe/libui/button.rb +0 -18
  504. data/lib/scarpe/libui/colors.rb +0 -157
  505. data/lib/scarpe/libui/core.rb +0 -66
  506. data/lib/scarpe/libui/flow.rb +0 -16
  507. data/lib/scarpe/libui/libui.rb +0 -45
  508. data/lib/scarpe/libui/notepad.md +0 -26
  509. data/lib/scarpe/libui/para.rb +0 -154
  510. data/lib/scarpe/libui/stack.rb +0 -34
  511. data/lib/scarpe/line.rb +0 -25
  512. data/lib/scarpe/logger.rb +0 -159
  513. data/lib/scarpe/promises.rb +0 -405
  514. data/lib/scarpe/shape.rb +0 -20
  515. data/lib/scarpe/slot.rb +0 -7
  516. data/lib/scarpe/unit_test_helpers.rb +0 -236
  517. data/lib/scarpe/version.rb +0 -5
  518. data/lib/scarpe/widgets.rb +0 -35
  519. data/lib/scarpe/wv/alert.rb +0 -65
  520. data/lib/scarpe/wv/app.rb +0 -104
  521. data/lib/scarpe/wv/arc.rb +0 -57
  522. data/lib/scarpe/wv/background.rb +0 -27
  523. data/lib/scarpe/wv/border.rb +0 -24
  524. data/lib/scarpe/wv/button.rb +0 -50
  525. data/lib/scarpe/wv/control_interface.rb +0 -147
  526. data/lib/scarpe/wv/control_interface_test.rb +0 -234
  527. data/lib/scarpe/wv/dimensions.rb +0 -22
  528. data/lib/scarpe/wv/document_root.rb +0 -8
  529. data/lib/scarpe/wv/edit_box.rb +0 -44
  530. data/lib/scarpe/wv/edit_line.rb +0 -43
  531. data/lib/scarpe/wv/fill.rb +0 -30
  532. data/lib/scarpe/wv/flow.rb +0 -24
  533. data/lib/scarpe/wv/font.rb +0 -36
  534. data/lib/scarpe/wv/html.rb +0 -108
  535. data/lib/scarpe/wv/image.rb +0 -41
  536. data/lib/scarpe/wv/line.rb +0 -38
  537. data/lib/scarpe/wv/link.rb +0 -29
  538. data/lib/scarpe/wv/list_box.rb +0 -50
  539. data/lib/scarpe/wv/para.rb +0 -90
  540. data/lib/scarpe/wv/shape.rb +0 -35
  541. data/lib/scarpe/wv/shape_helper.rb +0 -44
  542. data/lib/scarpe/wv/slot.rb +0 -81
  543. data/lib/scarpe/wv/spacing.rb +0 -41
  544. data/lib/scarpe/wv/span.rb +0 -66
  545. data/lib/scarpe/wv/stack.rb +0 -24
  546. data/lib/scarpe/wv/star.rb +0 -64
  547. data/lib/scarpe/wv/subscription_item.rb +0 -50
  548. data/lib/scarpe/wv/text_widget.rb +0 -30
  549. data/lib/scarpe/wv/video.rb +0 -42
  550. data/lib/scarpe/wv/web_wrangler.rb +0 -683
  551. data/lib/scarpe/wv/webview_local_display.rb +0 -73
  552. data/lib/scarpe/wv/webview_relay_display.rb +0 -185
  553. data/lib/scarpe/wv/widget.rb +0 -185
  554. data/lib/scarpe/wv/wv_display_worker.rb +0 -65
  555. data/lib/scarpe/wv.rb +0 -43
  556. data/lib/scarpe/wv_local.rb +0 -6
  557. data/lib/scarpe/wv_relay.rb +0 -6
  558. data/lib/scarpe.rb +0 -29
  559. data/logger/debug_web_wrangler.json +0 -4
  560. data/logger/scarpe_wv_test.json +0 -4
  561. data/scarpe-0.2.0.gem +0 -0
  562. data/scarpe.gemspec +0 -44
  563. data/scarpegen.rb +0 -193
  564. data/sig/scarpe.rbs +0 -4
  565. data/templates/basic_class_template.erb +0 -38
  566. data/templates/class_template_with_event_bind.erb +0 -27
  567. data/templates/class_template_with_shapes.erb +0 -43
  568. data/templates/example_template.erb +0 -3
  569. data/templates/module_template.erb +0 -12
  570. data/templates/webview_template.erb +0 -27
@@ -1,3528 +0,0 @@
1
- # Hello!
2
-
3
- Shoes is a tiny graphics toolkit. It's simple and straightforward. Shoes was
4
- born to be easy! Really, it was made for absolute beginners. There's really
5
- nothing to it.
6
-
7
- You see, the trivial Shoes program can be just one line:
8
-
9
- ```ruby
10
- #!ruby
11
- Shoes.app { button("Click me!") { alert("Good job.") } }
12
- ```
13
-
14
- Shoes programs are written in a language called Ruby. When Shoes is handed
15
- this simple line of Ruby code, a window appears with a button inside reading
16
- "Click me!" When the button is clicked, a message pops up.
17
-
18
- On Linux, here's how this might look: ![man-shot1.png](man-shot1.png)
19
-
20
- While lots of Shoes apps are graphical games and art programs, you can also
21
- layout text and edit controls easily. ![shoes-manual-apps.gif](shoes-manual-apps.gif)
22
-
23
- And, ideally, Shoes programs will run on any of the major platforms out there.
24
- Microsoft Windows, Apple's Mac OS X, Linux and many others.
25
-
26
- __So, welcome to Shoes' built-in manual. This manual is a Shoes program itself!__
27
-
28
- ## Introducing Shoes
29
-
30
- How does Shoes look on OS X and Windows? Does it really look okay? Is it all
31
- ugly and awkward? People must immediately convulse! It must be so watered down
32
- trying to do everything.
33
-
34
- Well, before getting into the stuff about installing and running Shoes, time to
35
- just check out some screenshots, to give you an idea of what you can do.
36
-
37
- #### Mac OS X
38
-
39
- Shoes runs on Apple Mac OS X Leopard, as well as Tiger. Shoes supports PowerPC
40
- machines as well, however, there is no video support on that platform.
41
- !man-look-tiger.png!
42
-
43
- This is the `simple-sphere.rb` sample running on Tiger. Notice that the app
44
- runs inside a normal OS X window border.
45
-
46
- The whole sphere is drawn with blurred ovals and shadows. You can draw and
47
- animate shapes and apply effects to those shapes in Shoes.
48
-
49
- #### Windows
50
-
51
- Shoes runs on all versions of `'Microsoft Windows XP`', `'Windows Vista`',
52
- `'Windows 7`', and anything else `'Windows 2000`' compatible.
53
- !man-look-vista.png!
54
-
55
- Above is pictured the `simple-clock.rb` sample running on Windows Vista. This
56
- example is also draws ovals and lines to build the clock, which is animated to
57
- repaint itself several times each second.
58
-
59
- Notice the text on the top of the app, showing the current time. Shoes has the
60
- skills to layout words using any color, bold, italics, underlines, and supports
61
- loading fonts from a file.
62
-
63
- #### Linux
64
-
65
- Here's a screenshot of the `simple-downloader.rb` sample running on `'Ubuntu
66
- Linux`'. !man-look-ubuntu.png!
67
-
68
- Notice the buttons and progress bars. These types of controls look different on
69
- OS X and Windows. The text and links would look the same, though.
70
-
71
- Shapes, text, images and videos all look the same on every platforms. However,
72
- native controls (like edit lines and edit boxes) will match the look of the
73
- window theme. Shoes will try to keep native controls all within the size you
74
- give them, only the look will vary.
75
-
76
- ## Installing Shoes
77
-
78
- Okay, on to installing Shoes. I'm sure you're wondering: do I need to install
79
- Ruby? Do I need to unzip anything? What commands do I need to type?
80
-
81
- Nope. You don't need Ruby. You don't need WinZip. Nothing to type.
82
-
83
- On most systems, starting Shoes is just a matter of running the installer and
84
- clicking the Shoes icon. Shoes comes with everything built in. We'll talk
85
- through all the steps, though, just to be clear about it.
86
-
87
- #### Step 1: Installing Shoes
88
-
89
- You'll want to visit [the site of Shoes](http://shoesrb.com/) to download
90
- the Shoes installer. Usually, you'll just want one of the installers on the
91
- downloads page of the site. !man-builds1.png!
92
-
93
- Here's how to run the installer:
94
-
95
- * On `'Mac OS X`', you'll have a file ending with `'.dmg`'. Double-click this file and a window should appear with a `'Shoes`' icon and an `'Applications`' folder. Following the arrow, drag the Shoes icon into the `'Applications`' folder. !man-intro-dmg.png!
96
- * On `'Windows`', you'll download a `'.exe`' file. Double-click this file and follow the instructions. !man-intro-exe.png!
97
- * On `'Linux`', you'll need to compile your own Shoes. Check out [this page](https://github.com/shoes/shoes/wiki/Building-Shoes-on-Linux) for more. We want to provide packages eventually!
98
-
99
- #### Step 2: Start a New Text File
100
-
101
- Shoes programs are just plain text files ending with a `'.rb`' extension.
102
-
103
- Here are a few ways to create a blank text file:
104
-
105
- * On `'Mac OS X`', visit your `'Applications`' folder and double-click on the `'TextEdit`' app. A blank editor window should come up. Now, go to the `'Format`' menu and select the `'Make Plain Text`' option. Okay, you're all set! !man-editor-osx.png!
106
- * On `'Windows`', go to the Start menu. Select `'All Programs`', then `'Accessories`', then `'Notepad`'. !man-editor-notepad.png!
107
- * On `'Linux`', most distros come with `'gedit`'. You might try running that. Or, if your distro is KDE-based, run `'kate`'.
108
-
109
- Now, in your blank window, type in the following:
110
-
111
- ```ruby
112
- Shoes.app do
113
- background "#DFA"
114
- para "Welcome to Shoes"
115
- end
116
- ```
117
-
118
- Save to your desktop as `welcome.rb`.
119
-
120
- #### Step 3: Run It! Go Shoes!
121
-
122
- To run your program:
123
-
124
- * On `'Mac OS X`', visit your `'Applications`' folder again. This time, double-click the `'Shoes`' icon in that folder. You should see the red shoes icon appear in the dock. Drag your `welcome.rb` from the desktop on to that dock icon. !man-run-osx.png!
125
- * On `'Windows`', get to the Start menu. Go into `'All Programs`', then `'Shoes`', then `'Shoes`'. A file selector box should come up. Browse to your desktop and select `welcome.rb`. Click `'OK`' and you're on your way. !man-run-xp.png! !man-run-vista.png!
126
- * On `'Linux`', run Shoes just like you did in step one. You should see a file selector box. Browse to your desktop, select `welcome.rb` and hit `'OK`'.
127
-
128
- So, not much of a program yet. But it's something! You've got the knack of it, at least!
129
-
130
- #### What Can You Make With Shoes?
131
-
132
- Well, you can make windowing applications. But Shoes is inspired by the web, so
133
- applications tend to use images and text layout rather than a lot of widgets.
134
- For example, Shoes doesn't come with tabbed controls or toolbars. Shoes is a
135
- `tiny` toolkit, remember?
136
-
137
- Still, Shoes does have a few widgets like buttons and edit boxes. And many
138
- missing elements (like tabbed controls or toolbars) can be simulated with
139
- images.
140
-
141
- Shoes is written in part thanks to a very good art engine called Cairo, which
142
- is used for drawing with shapes and colors. In this way, Shoes is inspired by
143
- NodeBox and Processing, two very good languages for drawing animated graphics.
144
-
145
- ## The Rules of Shoes
146
-
147
- Time to stop guessing how Shoes works. Some of the tricky things will come
148
- back to haunt you. I've boiled down the central rules to Shoes. These are the
149
- things you MUST know to really make it all work.
150
-
151
- These are general rules found throughout Shoes. While Shoes has an overall
152
- philosophy of simplicity and clarity, there are a few points that need to be
153
- studied and remembered.
154
-
155
- #### Shoes Tricky Blocks
156
-
157
- Okay, this is absolutely crucial. Shoes does a trick with blocks. This trick
158
- makes everything easier to read. But it also can make blocks harder to use
159
- once you're in deep.
160
-
161
- `'Let's take a normal Ruby block:`'
162
-
163
- ```ruby
164
- ary = ['potion', 'swords', 'shields']
165
- ary.each do |item|
166
- puts item
167
- end
168
- ```
169
-
170
- In Shoes, these sorts of blocks work the same. This block above loops through
171
- the array and stores each object in the `item` variable. The `item` variable
172
- disappears (goes out of scope) when the block ends.
173
-
174
- One other thing to keep in mind is that `self` stays the same inside normal
175
- Ruby blocks. Whatever `self` was before the call to `each`, it is the same
176
- inside the `each` block.
177
-
178
- `'Both of these things are also true for most Shoes blocks.`'
179
-
180
- ```ruby
181
- Shoes.app do
182
- stack do
183
- para "First"
184
- para "Second"
185
- para "Third"
186
- end
187
- end
188
- ```
189
-
190
- Here we have two blocks. The first block is sent to `Shoes.app`. This `app`
191
- block changes `self`.
192
-
193
- The other block is the `stack` block. That block does NOT change self.
194
-
195
- `'For what reason does the `app` block change self?`' Let's start by
196
- spelling out that last example completely.
197
-
198
- ```ruby
199
- Shoes.app do
200
- self.stack do
201
- self.para "First"
202
- self.para "Second"
203
- self.para "Third"
204
- end
205
- end
206
- ```
207
-
208
- All of the `self`s in the above example are the App object. Shoes uses Ruby's
209
- `instance_eval` to change self inside the `app` block. So the method calls to
210
- `stack` and `para` get sent to the app.
211
-
212
- `'This also is why you can use instance variables throughout a Shoes app:`'
213
-
214
- ```ruby
215
- Shoes.app do
216
- @s = stack do
217
- @p1 = para "First"
218
- @p2 = para "Second"
219
- @p3 = para "Third"
220
- end
221
- end
222
- ```
223
-
224
- These instance variables will all end up inside the App object.
225
-
226
- `'Whenever you create a new window, `self` is also changed.`' So, this means
227
- the [[Element.window]] and [[Element.dialog]] methods, in addition to
228
- Shoes.app.
229
-
230
- ```ruby
231
- Shoes.app title: "MAIN" do
232
- para self
233
- button "Spawn" do
234
- window title: "CHILD" do
235
- para self
236
- end
237
- end
238
- end
239
- ```
240
-
241
- #### Block Redirection
242
-
243
- The `stack` block is a different story, though. It doesn't change `self` and
244
- it's basically a regular block.
245
-
246
- `'But there's a trick:`' when you attach a `stack` and give it a block, the
247
- App object places that stack in its memory. The stack gets popped off when the
248
- block ends. So all drawing inside the block gets `'redirected`' from the
249
- App's top slot to the new stack.
250
-
251
- So those three `para`s will get drawn on the `stack`, even though they actually
252
- get sent to the App object first.
253
-
254
- ```ruby
255
- Shoes.app do
256
- stack do
257
- para "First"
258
- para "Second"
259
- para "Third"
260
- end
261
- end
262
- ```
263
-
264
- A bit tricky, you see? This can bite you even if you know about it.
265
-
266
- One way it'll get you is if you try to edit a stack somewhere else in your
267
- program, outside the `app` block.
268
-
269
- Like let's say you pass around a stack object. And you have a class that edits
270
- that object.
271
-
272
- ```ruby
273
- class Messenger
274
- def initialize(stack)
275
- @stack = stack
276
- end
277
- def add(msg)
278
- @stack.append do
279
- para msg
280
- end
281
- end
282
- end
283
- ```
284
-
285
- So, let's assume you pass the stack object into your Messenger class when the
286
- app starts. And, later, when a message comes in, the `add` method gets used to
287
- append a paragraph to that stack. Should work, right?
288
-
289
- Nope, it won't work. The `para` method won't be found. The App object isn't
290
- around any more. And it's the one with the `para` method.
291
-
292
- Fortunately, each Shoes object has an `app` method that will let you reopen the
293
- App object so you can do somefurther editing.
294
-
295
- ```ruby
296
- class Messenger
297
- def initialize(stack)
298
- @stack = stack
299
- end
300
- def add(msg)
301
- @stack.app do
302
- @stack.append do
303
- para msg
304
- end
305
- end
306
- end
307
- end
308
- ```
309
-
310
- As you can imagine, the `app` method changes `self` to the App object.
311
-
312
- So the rules here are:
313
-
314
- 1. `'Methods named "app" or which create new windows alter `self` to the App
315
- object.`'[[BR]](This is true for both Shoes.app and Slot.app, as well as
316
- [[Element.window]] and [[Element.dialog]].)[[BR]]
317
- 2. `'Blocks attached to stacks, flows or any manipulation method (such as
318
- append) do not change self. Instead, they pop the slot on to the app's editing
319
- stack.`'
320
-
321
- #### Careful With Fixed Heights
322
-
323
- Fixed widths on slots are great so you can split the window into columns.
324
-
325
- ```ruby
326
- Shoes.app do
327
- flow do
328
- stack width: 200 do
329
- caption "Column one"
330
- para "is 200 pixels wide"
331
- end
332
- stack width: -200 do
333
- caption "Column two"
334
- para "is 100% minus 200 pixels wide"
335
- end
336
- end
337
- end
338
- ```
339
-
340
- Fixed heights on slots should be less common. Usually you want your text and
341
- images to just flow down the window as far as they can. Height usually happens
342
- naturally.
343
-
344
- The important thing here is that fixed heights actually force slots to behave
345
- differently. To be sure that the end of the slot is chopped off perfectly, the
346
- slot becomes a `'nested window`'. A new layer is created by the operating
347
- system to keep the slot in a fixed square.
348
-
349
- One difference between normal slots and nested window slots is that the latter
350
- can have scrollbars.
351
-
352
- ```ruby
353
- Shoes.app do
354
- stack width: 200, height: 200, scroll: true do
355
- background "#DFA"
356
- 100.times do |i|
357
- para "Paragraph No. #{i}"
358
- end
359
- end
360
- end
361
- ```
362
-
363
- These nested windows require more memory. They tax the application a bit more.
364
- So if you're experiencing some slowness with hundreds of fixed-height slots,
365
- try a different approach.
366
-
367
- #### Image and Shape Blocks
368
-
369
- Most beginners start littering the window with shapes. It's just easier to
370
- throw all your rectangles and ovals in a slot.
371
-
372
- `'However, bear in mind that Shoes will create objects for all those
373
- shapes!`'
374
-
375
- ```ruby
376
- Shoes.app do
377
- fill black(0.1)
378
- 100.times do |i|
379
- oval i, i, i * 2
380
- end
381
- end
382
- ```
383
-
384
- In this example, one-hundred Oval objects are created. This isn't too bad.
385
- But things would be slimmer if we made these into a single shape.
386
-
387
- ```ruby
388
- Shoes.app do
389
- fill black(0.1)
390
- shape do
391
- 100.times do |i|
392
- oval i, i, i * 2
393
- end
394
- end
395
- end
396
- ```
397
-
398
- Oh, wait. The ovals aren't filled in this time! That's because the ovals have
399
- been combined into a single huge shape. And Shoes isn't sure where to fill in
400
- this case.
401
-
402
- So you usually only want to combine into a single shape when you're dealing
403
- strictly with outlines.
404
-
405
- Another option is to combine all those ovals into a single image.
406
-
407
- ```ruby
408
- Shoes.app do
409
- fill black(0.1)
410
- image 300, 300 do
411
- 100.times do |i|
412
- oval i, i, i * 2
413
- end
414
- end
415
- end
416
- ```
417
-
418
- There we go! The ovals are all combined into a single 300 x 300 pixel image.
419
- In this case, storing that image in memory might be much bigger than having
420
- one-hundred ovals around. But when you're dealing with thousands of shapes,
421
- the image block can be cheaper.
422
-
423
- The point is: it's easy to group shapes together into image or shape blocks, so
424
- give it a try if you're looking to gain some speed. Shape blocks particularly
425
- will save you some memory and speed.
426
-
427
- #### UTF-8 Everywhere
428
-
429
- Ruby itself isn't Unicode aware. And UTF-8 is a type of Unicode. (See
430
- [Wikipedia](http://en.wikipedia.org/wiki/UTF-8) for a full explanation of
431
- UTF-8.)
432
-
433
- However, UTF-8 is common on the web. And lots of different platforms support
434
- it. So to cut down on the amount of conversion that Shoes has to do, Shoes
435
- expects all strings to be in UTF-8 format.
436
-
437
- This is great because you can show a myriad of languages (Russian, Japanese,
438
- Spanish, English) using UTF-8 in Shoes. Just be sure that your text editor
439
- uses UTF-8!
440
-
441
- To illustrate:
442
-
443
- ```ruby
444
- Shoes.app do
445
- stack margin: 10 do
446
- @edit = edit_box width: 1.0 do
447
- @para.text = @edit.text
448
- end
449
- @para = para ""
450
- end
451
- end
452
- ```
453
-
454
- This app will copy anything you paste into the edit box and display it in a
455
- Shoes paragraph. You can try copying some foreign text (such as Greek or
456
- Japanese) into this box to see how it displays.
457
-
458
- This is a good test because it proves that the edit box gives back UTF-8
459
- characters. And the paragraph can be set to any UTF-8 characters.
460
-
461
- `'Important note:`' if some UTF-8 characters don't display for you, you will
462
- need to change the paragraph's font. This is especially common on OS X.
463
-
464
- So, a good Japanese font on OS X is `'AppleGothic`' and on Windows is `'MS
465
- UI Gothic`'.
466
-
467
- ```ruby
468
- Shoes.app do
469
- para "てすと (te-su-to)", font: case RUBY_PLATFORM
470
- when /mingw/; "MS UI Gothic"
471
- when /darwin/; "AppleGothic, Arial"
472
- else "Arial"
473
- end
474
- end
475
- ```
476
-
477
- Again, anything which takes a string in Shoes will need a UTF-8 string. Edit
478
- boxes, edit lines, list boxes, window titles and text blocks all take UTF-8. If
479
- you give a string with bad characters in it, an error will show up in the
480
- console.
481
-
482
- #### The Main App and Its Requires
483
-
484
- `'NOTE:`' This rule is for Raisins. Policeman uses TOPLEVEL_BINDING. So, you
485
- can get `main`, Ruby top-level object, with the first snippet. Although you
486
- need to use `Shoes::Para` instead of `Para` outside `Shoes.app` block.
487
-
488
- Each Shoes app is given a little room where it can create itself. You can
489
- create classes and set variables and they won't be seen by other Shoes
490
- programs. Each program runs inside its own anonymous class.
491
-
492
- ```ruby
493
- main = self
494
- Shoes.app do
495
- para main.to_s
496
- end
497
- ```
498
-
499
- This anonymous class is called `(shoes)` and it's just an empty, unnamed class.
500
- The `Shoes` module is mixed into this class (using `include Shoes`) so that you
501
- can use either `Para` or `Shoes::Para` when referring to the paragraph class.
502
-
503
- The advantages of this approach are:
504
-
505
- * Shoes apps cannot share local variables.
506
- * Classes created in the main app code are temporary.
507
- * The Shoes module can be mixed in to the anonymous class, but not the top-level environment of Ruby itself.
508
- * Garbage collection can clean up apps entirely once they complete.
509
-
510
- The second part is especially important to remember.
511
-
512
- ```ruby
513
- class Storage; end
514
-
515
- Shoes.app do
516
- para Storage.new
517
- end
518
- ```
519
-
520
- The `Storage` class will disappear once the app completes. Other apps aren't
521
- able to use the Storage class. And it can't be gotten to from files that are
522
- loaded using `require`.
523
-
524
- When you `require` code, though, that code will stick around. It will be kept
525
- in the Ruby top-level environment.
526
-
527
- So, the rule is: `'keep your temporary classes in the code with the app and
528
- keep your permanent classes in requires.`'
529
-
530
- # Shoes
531
-
532
- Shoes is all about drawing windows and the stuff inside those windows. Let's
533
- focus on the window itself, for now. The other sections [[Slots]] and
534
- [[Elements]] cover everything that goes inside the window.
535
-
536
- For here on, the manual reads more like a dictionary. Each page is mostly a
537
- list of methods you can use for each topic covered. The idea is to be very
538
- thorough and clear about everything.
539
-
540
- So, if you've hit this far in the manual and you're still hazy about getting
541
- started, you should probably either go back to the [[Hello! beginning]] of the
542
- manual. Or you could try [Nobody Knows Shoes](https://github.com/downloads/shoes/shoes/nks.pdf), the beginner's leaflet PDF.
543
-
544
- #### Finding Your Way
545
-
546
- This section covers:
547
-
548
- * [[Built-in Built-in methods]] - general methods available anywhere in a Shoes program.
549
- * [[App The App window]] - methods found attached to every main Shoes window.
550
- * [[Styles The Styles Master List]] - a complete list of every style in Shoes.
551
- * [[Classes The Classes list]] - a chart showing what Shoes classes subclass what.
552
- * [[Colors The Colors list]] - a chart of all built-in colors and the [[Built-in.rgb]] numbers for each.
553
-
554
- If you find yourself paging around a lot and not finding something, give the
555
- [[Search]] page a try. It's the quickest way to get around.
556
-
557
- After this general reference, there are two other more specific sections:
558
-
559
- * [[Slots]] - covering [[Element.stack]] and [[Element.flow]], the two types of slots.
560
- * [[Elements]] - documentation for all the buttons, shapes, images, and so on.
561
-
562
- Two really important pages in there are the [[Element Element Creation]] page
563
- (which lists all the elements you can add) and the [[Common Common Methods]]
564
- page (which lists methods you'll find on any slot or element.)
565
-
566
- ## Built-in Methods
567
-
568
- These methods can be used anywhere throughout Shoes programs.
569
-
570
- All of these commands are unusual because you don't attach them with a dot.
571
- `'Every other method in this manual must be attached to an object with a dot.`'
572
- But these are built-in methods (also called: Kernel methods.) Which means no dot!
573
-
574
- A common one is `alert`:
575
-
576
- ```ruby
577
- #!ruby
578
- alert "No dots in sight"
579
- ```
580
-
581
- Compare that to the method `reverse`, which isn't a Kernel method and is only
582
- available for Arrays and Strings:
583
-
584
- ```ruby
585
- #!ruby
586
- "Plaster of Paris".reverse
587
- #=> "siraP fo retsalP"
588
- [:dogs, :cows, :snakes].reverse
589
- #=> [:snakes, :cows, :dogs]
590
- ```
591
-
592
- Most Shoes methods for drawing and making buttons and so on are attached to
593
- slots. See the section on [[Slots]] for more.
594
-
595
- #### Built-in Constants
596
-
597
- Shoes also has a handful of built-in constants which may prove useful if you
598
- are trying to sniff out what release of Shoes is running.
599
-
600
- `'Shoes::RELEASE_NAME`' contains a string with the name of the Shoes release.
601
- All Shoes releases are named, starting with Curious.
602
-
603
- `'Shoes::RELEASE_ID`' contains a number representing the Shoes release. So,
604
- for example, Curious is number 1, as it was the first official release.
605
-
606
- `'Shoes::REVISION`' is the Subversion revision number for this build.
607
-
608
- `'Shoes::FONTS`' is a complete list of fonts available to the app. This list
609
- includes any fonts loaded by the [[Built-in.font]] method.
610
-
611
- ### alert(message: a string) » nil
612
-
613
- Pops up a window containing a short message.
614
-
615
- ```ruby
616
- #!ruby
617
- alert("I'm afraid I must interject!")
618
- ```
619
-
620
- Please use alerts sparingly, as they are incredibly annoying! If you are using
621
- alerts to show messages to help you debug your program, try checking out the
622
- [[Built-in.debug]] or [[Built-in.info]] methods.
623
-
624
- ### ask(message: a string) » a string
625
-
626
- Pops up a window and asks a question. For example, you may want to ask someone
627
- their name.
628
-
629
- ```ruby
630
- #!ruby
631
- name = ask("Please, enter your name:")
632
- ```
633
-
634
- When the above script is run, the person at the computer will see a window with
635
- a blank box for entering their name. The name will then be saved in the `name`
636
- variable.
637
-
638
- ### ask_color(title: a string) » Shoes::Color
639
-
640
- Pops up a color picker window. The program will wait for a color to be picked,
641
- then gives you back a Color object. See the `Color` help for some ways you can
642
- use this color.
643
-
644
- ```ruby
645
- #!ruby
646
- backcolor = ask_color("Pick a background")
647
- Shoes.app do
648
- background backcolor
649
- end
650
- ```
651
-
652
- ### ask_open_file() » a string
653
-
654
- Pops up an "Open file..." window. It's the standard window which shows all of
655
- your folders and lets you select a file to open. Hands you back the name of the
656
- file.
657
-
658
- ```ruby
659
- #!ruby
660
- filename = ask_open_file
661
- Shoes.app do
662
- para File.read(filename)
663
- end
664
- ```
665
-
666
- ### ask_save_file() » a string
667
-
668
- Pops up a "Save file..." window, similiar to `ask_open_file`, described
669
- previously.
670
-
671
- ```ruby
672
- #!ruby
673
- save_as = ask_save_file
674
- ```
675
-
676
- ### ask_open_folder() » a string
677
-
678
- Pops up an "Open folder..." window. It's the standard window which shows all of
679
- your folders and lets you select a folder to open. Hands you back the name of
680
- the folder.
681
-
682
- ```ruby
683
- #!ruby
684
- folder = ask_open_folder
685
- Shoes.app do
686
- para Dir.entries(folder)
687
- end
688
- ```
689
-
690
- ### ask_save_folder() » a string
691
-
692
- Pops up a "Save folder..." window, similiar to `ask_open_folder`, described
693
- previously. On OS X, this method currently behaves like an alias of
694
- `ask_open_folder`.
695
-
696
- ```ruby
697
- #!ruby
698
- save_to = ask_save_folder
699
- ```
700
-
701
-
702
- ### confirm(question: a string) » true or false
703
-
704
- Pops up a yes-or-no question. If the person at the computer, clicks `'yes`',
705
- you'll get back a `true`. If not, you'll get back `false`.
706
-
707
- ```ruby
708
- #!ruby
709
- if confirm("Draw a circle?")
710
- Shoes.app{ oval top: 0, left: 0, radius: 50 }
711
- end
712
- ```
713
-
714
- ### debug(message: a string) » nil
715
-
716
- Sends a debug message to the Shoes console. You can bring up the Shoes console
717
- by pressing `Alt-/` on any Shoes window (or `⌘-/` on OS X.)
718
-
719
- ```ruby
720
- #!ruby
721
- debug("Running Shoes on " + RUBY_PLATFORM)
722
- ```
723
-
724
- Also check out the [[Built-in.error]], [[Built-in.warn]] and [[Built-in.info]]
725
- methods.
726
-
727
- ### error(message: a string) » nil
728
-
729
- Sends an error message to the Shoes console. This method should only be used
730
- to log errors. Try the [[Built-in.debug]] method for logging messages to
731
- yourself.
732
-
733
- Oh, and, rather than a string, you may also hand exceptions directly to this
734
- method and they'll be formatted appropriately.
735
-
736
- ### exit()
737
-
738
- Stops your program. Call this anytime you want to suddenly call it quits.
739
-
740
- `'PLEASE NOTE:`' If you need to use Ruby's own `exit` method (like in a
741
- forked Ruby process,) call `Kernel.exit`.
742
-
743
- ### font(message: a string) » an array of font family names
744
-
745
- Loads a TrueType (or other type of font) from a file. While TrueType is
746
- supported by all platforms, your platform may support other types of fonts.
747
- Shoes uses each operating system's built-in font system to make this work.
748
-
749
- Here's a rough idea of what fonts work on which platforms:
750
-
751
- * Bitmap fonts (.bdf, .pcf, .snf) - Linux
752
- * Font resource (.fon) - Windows
753
- * Windows bitmap font file (.fnt) - Linux, Windows
754
- * PostScript OpenType font (.otf) - Mac OS X, Linux, Windows
755
- * Type1 multiple master (.mmm) - Windows
756
- * Type1 font bits (.pfb) - Linux, Windows
757
- * Type1 font metrics (.pfm) - Linux, Windows
758
- * TrueType font (.ttf) - Mac OS X, Linux, Windows
759
- * TrueType collection (.ttc) - Mac OS X, Linux, Windows
760
-
761
- If the font is properly loaded, you'll get back an array of font names found in
762
- the file. Otherwise, `nil` is returned if no fonts were found in the file.
763
-
764
- Also of interest: the `Shoes::FONTS` constant is a complete list of fonts
765
- available to you on this platform. You can check for a certain font by using
766
- `include?`.
767
-
768
- ```ruby
769
- if Shoes::FONTS.include? "Helvetica"
770
- alert "Helvetica is available on this system."
771
- else
772
- alert "You do not have the Helvetica font."
773
- end
774
- ```
775
-
776
- If you have trouble with fonts showing up, make sure your app loads the font
777
- before it is used. Especially on OS X, if fonts are used before they are
778
- loaded, the font cache will tend to ignore loaded fonts.
779
-
780
- ### gradient(color1, color2) » Shoes::Pattern
781
-
782
- Builds a linear gradient from two colors. For each color, you may pass in a
783
- Shoes::Color object or a string describing the color.
784
-
785
- ### gray(the numbers: darkness, alpha) » Shoes::Color
786
-
787
- Create a grayscale color from a level of darkness and, optionally, an alpha
788
- level.
789
-
790
- ```ruby
791
- black = gray(0.0)
792
- white = gray(1.0)
793
- ```
794
-
795
- ### info(message: a string) » nil
796
-
797
- Logs an informational message to the user in the Shoes console. So, where
798
- debug messages are designed to help the program figure out what's happening,
799
- `info` messages tell the user extra information about the program.
800
-
801
- ```ruby
802
- #!ruby
803
-
804
- info("You just ran the info example on Shoes #{Shoes::RELEASE_NAME}.")
805
- ```
806
-
807
- For example, whenever a Shy file loads, Shoes prints an informational message
808
- in the console describing the author of the Shy and its version.
809
-
810
- ### rgb(a series of numbers: red, green, blue, alpha) » Shoes::Color
811
-
812
- Create a color from red, green and blue components. An alpha level (indicating
813
- transparency) can also be added, optionally.
814
-
815
- When passing in a whole number, use values from 0 to 255.
816
-
817
- ```ruby
818
- blueviolet = rgb(138, 43, 226)
819
- darkgreen = rgb(0, 100, 0)
820
- ```
821
-
822
- Or, use a decimal number from 0.0 to 1.0.
823
-
824
- ```ruby
825
- blueviolet = rgb(0.54, 0.17, 0.89)
826
- darkgreen = rgb(0, 0.4, 0)
827
- ```
828
-
829
- This method may also be called as `Shoes.rgb`.
830
-
831
- ### warn(message: a string) » nil
832
-
833
- Logs a warning for the user. A warning is not a catastrophic error (see
834
- [[Built-in.error]] for that.) It is just a notice that the program will be
835
- changing in the future or that certain parts of the program aren't reliable
836
- yet.
837
-
838
- To view warnings and errors, open the Shoes console with `Alt-/` (or `⌘-/` on
839
- OS X.)
840
-
841
- ## The App Object
842
-
843
- An App is a single window running code at a URL. When you switch URLs, a new
844
- App object is created and filled up with stacks, flows and other Shoes
845
- elements.
846
-
847
- The App is the window itself. Which may be closed or cleared and filled with
848
- new elements. ![man-app.png](man-app.png)
849
-
850
- The App itself, in slot/box terminology, is a flow. See the `Slots` section
851
- for more, but this just means that any elements placed directly at the
852
- top-level will flow.
853
-
854
- ### Shoes.app(styles) { ... } » Shoes::App
855
-
856
- Starts up a Shoes app window. This is the starting place for making a Shoes
857
- program. Inside the block, you fill the window with various Shoes elements
858
- (buttons, artwork, etc.) and, outside the block, you use the `styles` to
859
- describe how big the window is. Perhaps also the name of the app or if it's
860
- resizable.
861
-
862
- ```ruby
863
- #!ruby
864
- Shoes.app(title: "White Circle",
865
- width: 200, height: 200, resizable: false) {
866
- background black
867
- fill white
868
- oval top: 20, left: 20, radius: 160
869
- }
870
- ```
871
-
872
- In the case above, a small window is built. 200 pixels by 200 pixels. It's
873
- not resizable. And, inside the window, two elements: a black background and a
874
- white circle.
875
-
876
- Once an app is created, it is added to the [[App.Shoes.APPS]] list. If you
877
- want an app to spawn more windows, see the [[Element.window]] method and the
878
- [[Element.dialog]] method.
879
-
880
- ### Shoes.APPS() » An array of Shoes::App objects
881
-
882
- Builds a complete list of all the Shoes apps that are open right now. Once an
883
- app is closed, it is removed from the list. Yes, you can run many apps at once
884
- in Shoes. It's completely encouraged.
885
-
886
- ### clipboard() » a string
887
-
888
- Returns a string containing all of the text that's on the system clipboard.
889
- This is the global clipboard that every program on the computer cuts and pastes
890
- into.
891
-
892
- ### clipboard = a string
893
-
894
- Stores `a string` of text in the system clipboard.
895
-
896
- ### close()
897
-
898
- Closes the app window. If multiple windows are open and you want to close the
899
- entire application, use the built-in method `exit`.
900
-
901
- ### download(url: a string, styles)
902
-
903
- Starts a download thread (much like XMLHttpRequest, if you're familiar with
904
- JavaScript.) This method returns immediately and runs the download in the
905
- background. Each download thread also fires `start`, `progress` and `finish`
906
- events. You can send the download to a file or just get back a string (in the
907
- `finish` event.)
908
-
909
- If you attach a block to a download, it'll get called as the `finish` event.
910
-
911
- ```ruby
912
- #!ruby
913
- Shoes.app do
914
- stack do
915
- title "Searching Google", size: 16
916
- @status = para "One moment..."
917
-
918
- # Search Google for 'shoes' and print the HTTP headers
919
- download "http://www.google.com/search?q=shoes" do |goog|
920
- @status.text = "Headers: " + goog.response.headers.inspect
921
- end
922
- end
923
- end
924
- ```
925
-
926
- And, if we wanted to use the downloaded data, we'd get it using
927
- `goog.response.body`. This example is truly the simplest form of `download`:
928
- pulling some web data down into memory and handling it once it's done.
929
-
930
- Another simple use of `download` is to save some web data to a file, using the
931
- `:save` style.
932
-
933
- ```ruby
934
- #!ruby
935
- Shoes.app do
936
- stack do
937
- title "Downloading Google image", size: 16
938
- @status = para "One moment..."
939
-
940
- download "http://www.google.com/logos/nasa50th.gif",
941
- save: "nasa50th.gif" do
942
- @status.text = "Okay, is downloaded."
943
- end
944
- end
945
- end
946
- ```
947
-
948
- In this case, you can still get the headers for the downloaded file, but
949
- `response.body` will be `nil`, since the data wasn't saved to memory. You will
950
- need to open the file to get the downloaded goods.
951
-
952
- If you need to send certain headers or actions to the web server, you can use
953
- the `:method`, `:headers` and `:body` styles to customize the HTTP request.
954
- (And, if you need to go beyond these, you can always break out Ruby's OpenURI
955
- class.)
956
-
957
- ```ruby
958
- #!ruby
959
- Shoes.app do
960
- stack do
961
- title "GET Google", size: 16
962
- @status = para "One moment..."
963
-
964
- download "http://www.google.com/search?q=shoes",
965
- method: "GET" do |dump|
966
- @status.text = dump.response.body
967
- end
968
- end
969
- end
970
- ```
971
-
972
- As you can see from the above example, Shoes makes use of the "GET" method to
973
- query google's search engine.
974
-
975
- ### location() » a string
976
-
977
- Gets a string containing the URL of the current app.
978
-
979
- ### mouse() » an array of numbers: button, left, top
980
-
981
- Identifies the mouse cursor's location, along with which button is being
982
- pressed.
983
-
984
- ```ruby
985
- #!ruby
986
- Shoes.app do
987
- @p = para
988
- animate do
989
- button, left, top = self.mouse
990
- @p.replace "mouse: #{button}, #{left}, #{top}"
991
- end
992
- end
993
- ```
994
-
995
- ### owner() » Shoes::App
996
-
997
- Gets the app which launched this app. In most cases, this will be `nil`. But
998
- if this app was launched using the [[Element.window]] method, the owner will be
999
- the app which called `window`.
1000
-
1001
- ### started?() » true or false
1002
-
1003
- Has the window been fully constructed and displayed? This is useful for
1004
- threaded code which may try to use the window before it is completely built.
1005
- (Also see the `start` event which fires once the window is open.)
1006
-
1007
- ### visit(url: a string)
1008
-
1009
- Changes the location, in order to view a different Shoes URL.
1010
-
1011
- Absolute URLs (such as http://google.com) are okay, but Shoes will be expecting
1012
- a Shoes application to be at that address. (So, google.com won't work, as it's
1013
- an HTML app.)
1014
-
1015
- ## The Styles Master List
1016
-
1017
- You want to mess with the look of things? Well, throughout Shoes, styles are
1018
- used to change the way elements appear. In some cases, you can even style an
1019
- entire class of elements. (Like giving all paragraphs a certain font.)
1020
-
1021
- Styles are easy to spot. They usually show up when the element is created.
1022
-
1023
- ```ruby
1024
- Shoes.app title: "A Styling Sample" do
1025
- para "Red with an underline", stroke: red, underline: "single"
1026
- end
1027
- ```
1028
-
1029
- Here we've got a `:title` style on the app. And on the paragraph inside the
1030
- app, a red `:stroke` style and an `:underline` style.
1031
-
1032
- The style hash can also be changed by using the [[Common.style]] method,
1033
- available on every element and slot.
1034
-
1035
- ```ruby
1036
- Shoes.app title: "A Styling Sample" do
1037
- @text = para "Red with an underline"
1038
- @text.style(stroke: red, underline: "single")
1039
- end
1040
- ```
1041
-
1042
- Most styles can also be set by calling them as methods. (I'd use the manual
1043
- search to find the method.)
1044
-
1045
- ```ruby
1046
- Shoes.app title: "A Styling Sample" do
1047
- @text = para "Red with an underline"
1048
- @text.stroke = red
1049
- @text.underline = "single"
1050
- end
1051
- ```
1052
-
1053
- Rather than making you plow through the whole manual to figure out what styles
1054
- go where, this helpful page speeds through every style in Shoes and suggests
1055
- where that style is used.
1056
-
1057
- ### :align » a string
1058
-
1059
- For: `banner, caption, code, del, em, ins, inscription, link, para, span,
1060
- strong, sub, sup, subtitle, tagline, title`
1061
-
1062
- The alignment of the text. It is either:
1063
-
1064
- * "left" - Align the text to the left.
1065
- * "center" - Align the text in the center.
1066
- * "right" - Align the text to the right.
1067
-
1068
- ### :angle » a number
1069
-
1070
- For: `background, border, gradient`.
1071
-
1072
- The angle at which to apply a gradient. Normally, gradient colors range from
1073
- top to bottom. If the `:angle` is set to 90, the gradient will rotate 90
1074
- degrees counter-clockwise and the gradient will go from left to right.
1075
-
1076
- ### :attach » a slot or element
1077
-
1078
- For: `flow, stack`.
1079
-
1080
- Pins a slot relative to another slot or element. Also, one may write `attach: Window` to position the slot at the window's top, left corner. Taking this
1081
- a bit further, the style `top: 10, left: 10, attach: Window` would
1082
- place the slot at (10, 10) in the window's coordinates.
1083
-
1084
- If a slot is attached to an element that moves, the slot will move with it. If
1085
- the attachment is reset to `nil`, the slot will flow in with the other objects
1086
- that surround, as normal.
1087
-
1088
- ### :autoplay » true or false
1089
-
1090
- For: `video`.
1091
-
1092
- Should this video begin playing after it appears? If set to `true`, the video
1093
- will start without asking the user.
1094
-
1095
- ### :bottom » a number
1096
-
1097
- For: `all slots and elements`.
1098
-
1099
- Sets the pixel coordinate of an element's lower edge. The edge is placed
1100
- relative to its container's lower edge. So, `bottom: 0` will align the
1101
- element so that its bottom edge and the bottom edge of its slot touch.
1102
-
1103
- ### :cap » :curve or :rect or :project
1104
-
1105
- For: `arc, arrow, border, flow, image, mask, rect, star, shape, stack`.
1106
-
1107
- Sets the shape of the line endpoint, whether curved or square. See the
1108
- [[Art.cap]] method for more explanation.
1109
-
1110
- ### :center » true or false
1111
-
1112
- For: `arc, image, oval, rect, shape`.
1113
-
1114
- Indicates whether the `:top` and `:left` coordinates refer to the center of the
1115
- shape or not. If set to `true`, this is similar to setting the
1116
- [[Art.transform]] method to `:center`.
1117
-
1118
- ### :change » a proc
1119
-
1120
- For: `edit_box, edit_line, list_box`.
1121
-
1122
- The `change` event handler is stored in this style. See the [[EditBox.change]]
1123
- method for the edit_box, as an example.
1124
-
1125
- ### :checked » true or false
1126
-
1127
- For: `check, radio`.
1128
-
1129
- Is this checkbox or radio button checked? If set to `true`, the box is
1130
- checked. Also see the [[Check.checked=]] method.
1131
-
1132
- ### :choose » a string
1133
-
1134
- For: `list_box`.
1135
-
1136
- Sets the currently chosen item in the list. More information at
1137
- [[ListBox.choose]].
1138
-
1139
- ### :click » a proc
1140
-
1141
- For: `arc, arrow, banner, button, caption, check, flow, image, inscription,
1142
- line, link, mask, oval, para, radio, rect, shape, stack, star, subtitle,
1143
- tagline, title`.
1144
-
1145
- The `click` event handler is stored in this style. See the [[Events.click]]
1146
- method for a description.
1147
-
1148
- ### :curve » a number
1149
-
1150
- For: `background, border, rect`.
1151
-
1152
- The radius of curved corners on each of these rectangular elements. As an
1153
- example, if this is set to 6, the corners of the rectangle are given a curve
1154
- with a 6-pixel radius.
1155
-
1156
- ### :displace_left » a number
1157
-
1158
- For: `all slots and elements`.
1159
-
1160
- Moves a shape, text block or any other kind of object to the left or right. A
1161
- positive number displaces to the right by the given number of pixels; a
1162
- negative number displaces to the left. Displacing an object doesn't effect the
1163
- actual layout of the page. Before using this style, be sure to read the
1164
- [[Position.displace]] docs, since its behavior can be a bit surprising.
1165
-
1166
- ### :displace_top » a number
1167
-
1168
- For: `all slots and elements`.
1169
-
1170
- Moves a shape, text block or any other kind of object up or down. A positive
1171
- number moves the object down by this number of pixels; a negative number moves
1172
- it up. Displacing doesn't effect the actual layout of the page or the object's
1173
- true coordinates. Read the [[Position.displace]] docs, since its behavior can
1174
- be a bit surprising.
1175
-
1176
- ### :emphasis » a string
1177
-
1178
- For: `banner, caption, code, del, em, ins, inscription, link, para, span,
1179
- strong, sub, sup, subtitle, tagline, title`.
1180
-
1181
- Styles the text with an emphasis (commonly italicized.)
1182
-
1183
- This style recognizes three possible settings:
1184
-
1185
- * "normal" - the font is upright.
1186
- * "oblique" - the font is slanted, but in a roman style.
1187
- * "italic" - the font is slanted in an italic style.
1188
-
1189
- ### :family » a string
1190
-
1191
- For: `banner, caption, code, del, em, ins, inscription, link, para, span,
1192
- strong, sub, sup, subtitle, tagline, title`.
1193
-
1194
- Styles the text with a given font family. The string should contain the family
1195
- name or a comma-separated list of families.
1196
-
1197
- ### :fill » a hex code, a Shoes::Color or a range of either
1198
-
1199
- For: `arc, arrow, background, banner, caption, code, del, em, flow, image,
1200
- ins, inscription, line, link, mask, oval, para, rect, shape, span, stack, star,
1201
- strong, sub, sup, subtitle, tagline, title`.
1202
-
1203
- The color of the background pen. For shapes, this is the fill color, the paint
1204
- inside the shape. For text stuffs, this color is painted in the background (as
1205
- if marked with a highlighter pen.)
1206
-
1207
- ### :font » a string
1208
-
1209
- For: `banner, caption, code, del, em, ins, inscription, link, para, span,
1210
- strong, sub, sup, subtitle, tagline, title`.
1211
-
1212
- Styles the text with a font description. The string is pretty flexible, but
1213
- can take the form "[FAMILY-LIST] [STYLE-OPTIONS] [SIZE]", where FAMILY-LIST is
1214
- a comma separated list of families optionally terminated by a comma,
1215
- STYLE_OPTIONS is a whitespace separated list of words where each WORD describes
1216
- one of style, variant, weight, stretch, or gravity, and SIZE is a decimal
1217
- number (size in points) or optionally followed by the unit modifier "px" for
1218
- absolute size. Any one of the options may be absent. If FAMILY-LIST is absent,
1219
- then the default font family (Arial) will be used.
1220
-
1221
- ### :group » a string
1222
-
1223
- For: `radio`.
1224
-
1225
- Indicates what group a radio button belongs to. Without this setting, radio
1226
- buttons are grouped together with other radio buttons in their immediate slot.
1227
- "Grouping" radio buttons doesn't mean they'll be grouped next to each other on
1228
- the screen. It means that only one radio button from the group can be selected
1229
- at a time.
1230
-
1231
- By giving this style a string, the radio button will be grouped with other
1232
- radio buttons that have the same group name.
1233
-
1234
- ### :height » a number
1235
-
1236
- For: `all slots and elements`.
1237
-
1238
- Sets the pixel height of this object. If the number is a decimal number, the
1239
- height becomes a percentage of its parent's height (with 0.0 being 0% and 1.0
1240
- being 100%.)
1241
-
1242
- ### :hidden » true or false
1243
-
1244
- For: `all slots and elements`.
1245
-
1246
- Hides or shows this object. Any object with `hidden: true` are not
1247
- displayed on the screen. Neither are its children.
1248
-
1249
- ### :inner » a number
1250
-
1251
- For: `star`.
1252
-
1253
- The size of the inner radius (in pixels.) The inner radius describes the solid
1254
- circle within the star where the points begin to separate.
1255
-
1256
- ### :items » an array
1257
-
1258
- For: `list_box`.
1259
-
1260
- The list of selections in the list box. See the [[Element.list_box]] method
1261
- for an example.
1262
-
1263
- ### :justify » true or false
1264
-
1265
- For: `banner, caption, code, del, em, ins, inscription, link, para, span,
1266
- strong, sub, sup, subtitle, tagline, title`
1267
-
1268
- Evenly spaces the text horizontally.
1269
-
1270
- ### :kerning » a number
1271
-
1272
- For: `banner, caption, code, del, em, ins, inscription, link, para, span,
1273
- strong, sub, sup, subtitle, tagline, title`.
1274
-
1275
- Adds to the natural spacing between letters, in pixels.
1276
-
1277
- ### :leading » a number
1278
-
1279
- For: `banner, caption, inscription, para, subtitle, tagline, title`.
1280
-
1281
- Sets the spacing between lines in a text block. Defaults to 4 pixels.
1282
-
1283
- ### :left » a number
1284
-
1285
- For: `all slots and elements`.
1286
-
1287
- Sets the left coordinate of this object to a specific pixel. Setting `left: 10` places the object's left edge ten pixels away from the left edge of the
1288
- slot containing it. If this style is left unset (or set to `nil`,) the object
1289
- will flow in with the other objects surrounding it.
1290
-
1291
- You might also want to give it a :top, if it's acting a bit funny. Sometimes it needs both. :)
1292
-
1293
- ### :margin » a number or an array of four numbers
1294
-
1295
- For: `all slots and elements`.
1296
-
1297
- Margins space an element out from its surroundings. Each element has a left,
1298
- top, right, and bottom margin. If the `:margin` style is set to a single
1299
- number, the spacing around the element uniformly matches that number. In other
1300
- words, if `margin: 8` is set, all the margins around the element are set to
1301
- eight pixels in length.
1302
-
1303
- This style can also be given an array of four numbers in the form `[left, top,
1304
- right, bottom]`.
1305
-
1306
- ### :margin_bottom » a number
1307
-
1308
- For: `all slots and elements`.
1309
-
1310
- Sets the bottom margin of the element to a specific pixel size.
1311
-
1312
- ### :margin_left » a number
1313
-
1314
- For: `all slots and elements`.
1315
-
1316
- Sets the left margin of the element to a specific pixel size.
1317
-
1318
- ### :margin_right » a number
1319
-
1320
- For: `all slots and elements`.
1321
-
1322
- Sets the right margin of the element to a specific pixel size.
1323
-
1324
- ### :margin_top » a number
1325
-
1326
- For: `all slots and elements`.
1327
-
1328
- Sets the top margin of the element to a specific pixel size.
1329
-
1330
- ### :outer » a number
1331
-
1332
- For: `star`.
1333
-
1334
- Sets the outer radius (half of the `total` width) of the star, in pixels.
1335
-
1336
- ### :points » a number
1337
-
1338
- For: `star`.
1339
-
1340
- How many points does this star have? A style of `points: 5` creates a
1341
- five-pointed star.
1342
-
1343
- ### :radius » a number
1344
-
1345
- For: `arc, arrow, background, border, gradient, oval, rect, shape`.
1346
-
1347
- Sets the radius (half of the diameter or total width) for each of these
1348
- elements. Setting this is equivalent to setting both `:width` and `:height` to
1349
- double this number.
1350
-
1351
- ### :right » a number
1352
-
1353
- For: `all slots and elements`.
1354
-
1355
- Sets the pixel coordinate of an element's right edge. The edge is placed
1356
- relative to its container's rightmost edge. So, `right: 0` will align the
1357
- element so that its own right edge and the right edge of its slot touch.
1358
- Whereas `right: 20` will position the right edge of the element off to the
1359
- left of its slot's right edge by twenty pixels.
1360
-
1361
- ### :rise » a number
1362
-
1363
- For: `banner, caption, code, del, em, ins, inscription, link, para, span,
1364
- strong, sub, sup, subtitle, tagline, title`.
1365
-
1366
- Lifts or plunges the font baseline for some text. For example, a
1367
- [[Element.sup]] has a `:rise` of 10 pixels. Conversely, the [[Element.sub]]
1368
- element has a `:rise` of -10 pixels.
1369
-
1370
- ### :scroll » true or false
1371
-
1372
- For: `flow, stack`.
1373
-
1374
- Establishes this slot as a scrolling slot. If `scroll: true` is set, the
1375
- slot will show a scrollbar if any of its contents go past its height. The
1376
- scrollbar will appear and disappear as needed. It will also appear inside the
1377
- width of the slot, meaning the slot's width will never change, regardless of
1378
- whether there is a scrollbar or not.
1379
-
1380
- ### :secret » true or false
1381
-
1382
- For: `ask, edit_line`.
1383
-
1384
- Used for password fields, this setting keeps any characters typed in from
1385
- becoming visible on the screen. Instead, a replacement character (such as an
1386
- asterisk) is show for each letter typed.
1387
-
1388
- ### :size » a number
1389
-
1390
- For: `banner, caption, code, del, em, ins, inscription, link, para, span,
1391
- strong, sub, sup, subtitle, tagline, title`.
1392
-
1393
- Sets the pixel size for the font used inside this text block or text fragment.
1394
-
1395
- Font size may also be augmented, through use of the following strings:
1396
-
1397
- * "xx-small" - 57% of present size.
1398
- * "x-small" - 64% of present size.
1399
- * "small" - 83% of present size.
1400
- * "medium" - no change in size.
1401
- * "large" - 120% of present size.
1402
- * "x-large" - 143% of present size.
1403
- * "xx-large" - 173% of present size.
1404
-
1405
- ### :state » a string
1406
-
1407
- For: `button, check, edit_box, edit_line, list_box, radio`.
1408
-
1409
- The `:state` style is for disabling or locking certain controls, if you don't
1410
- want them to be edited.
1411
-
1412
- Here are the possible style settings:
1413
-
1414
- * nil - the control is active and editable.
1415
- * "readonly" - the control is active but cannot be edited.
1416
- * "disabled" - the control is not active (grayed out) and cannot be edited.
1417
-
1418
- ### :stretch » a string
1419
-
1420
- For: `banner, caption, code, del, em, ins, inscription, link, para, span,
1421
- strong, sub, sup, subtitle, tagline, title`.
1422
-
1423
- Sets the font stretching used for a text object.
1424
-
1425
- Possible settings are:
1426
-
1427
- * "condensed" - a smaller width of letters.
1428
- * "normal" - the standard width of letters.
1429
- * "expanded" - a larger width of letters.
1430
-
1431
- ### :strikecolor » a Shoes::Color
1432
-
1433
- For: `banner, caption, code, del, em, ins, inscription, link, para, span,
1434
- strong, sub, sup, subtitle, tagline, title`.
1435
-
1436
- The color used to paint any lines stricken through this text.
1437
-
1438
- ### :strikethrough » a string
1439
-
1440
- For: `banner, caption, code, del, em, ins, inscription, link, para, span,
1441
- strong, sub, sup, subtitle, tagline, title`.
1442
-
1443
- Is this text stricken through? Two options here:
1444
-
1445
- * "none" - no strikethrough
1446
- * "single" - a single-line strikethrough.
1447
-
1448
- ### :stroke » a hex code, a Shoes::Color or a range of either
1449
-
1450
- For: `arc, arrow, banner, border, caption, code, del, em, flow, image, ins,
1451
- inscription, line, link, mask, oval, para, rect, shape, span, stack, star,
1452
- strong, sub, sup, subtitle, tagline, title`.
1453
-
1454
- The color of the foreground pen. In the case of shapes, this is the color the
1455
- lines are drawn with. For paragraphs and other text, the letters are printed
1456
- in this color.
1457
-
1458
- ### :strokewidth » a number
1459
-
1460
- For: `arc, arrow, border, flow, image, line, mask, oval, rect, shape, star, stack`.
1461
-
1462
- The thickness of the stroke, in pixels, of the line defining each of these
1463
- shapes. For example, the number two would set the strokewidth to 2 pixels.
1464
-
1465
- ### :text » a string
1466
-
1467
- For: `button, edit_box, edit_line`.
1468
-
1469
- Sets the message displayed on a button control, or the contents of an edit_box
1470
- or edit_line.
1471
-
1472
- ### :top » a number
1473
-
1474
- For: `all slots and elements`.
1475
-
1476
- Sets the top coordinate for an object, relative to its parent slot. If an
1477
- object is set with `top: 40`, this means the object's top edge will be
1478
- placed 40 pixels beneath the top edge of the slot that contains it. If no
1479
- `:top` style is given, the object is automatically placed in the natural flow
1480
- of its slot.
1481
-
1482
- You should probably give it a :left, too, if it's acting strange. It likes to have both. :)
1483
-
1484
- ### :undercolor » a Shoes::Color
1485
-
1486
- For: `banner, caption, code, del, em, ins, inscription, link, para, span,
1487
- strong, sub, sup, subtitle, tagline, title`.
1488
-
1489
- The color used to underline text.
1490
-
1491
- ### :underline » a string
1492
-
1493
- For: `banner, caption, code, del, em, ins, inscription, link, para, span,
1494
- strong, sub, sup, subtitle, tagline, title`.
1495
-
1496
- Dictates the style of underline used in the text.
1497
-
1498
- The choices for this setting are:
1499
-
1500
- * "none" - no underline at all.
1501
- * "single" - a continuous underline.
1502
- * "double" - two continuous parallel underlines.
1503
- * "low" - a lower underline, beneath the font baseline. (This is generally recommended only for single characters, particularly when showing keyboard accelerators.)
1504
- * "error" - a wavy underline, usually found indicating a misspelling.
1505
-
1506
- ### :variant » a string
1507
-
1508
- For: `banner, caption, code, del, em, ins, inscription, link, para, span,
1509
- strong, sub, sup, subtitle, tagline, title`.
1510
-
1511
- Vary the font for a group of text. Two choices:
1512
-
1513
- * "normal" - standard font.
1514
- * "smallcaps" - font with the lower case characters replaced by smaller variants of the capital characters.
1515
-
1516
- ### :weight » a string
1517
-
1518
- For: `banner, caption, code, del, em, ins, inscription, link, para, span,
1519
- strong, sub, sup, subtitle, tagline, title`.
1520
-
1521
- Set the boldness of the text. Commonly, this style is set to one of the
1522
- following strings:
1523
-
1524
- * "ultralight" - the ultralight weight (= 200)
1525
- * "light" - the light weight (= 300)
1526
- * "normal" - the default weight (= 400)
1527
- * "semibold" - a weight intermediate between normal and bold (= 600)
1528
- * "bold" - the bold weight (= 700)
1529
- * "ultrabold" - the ultrabold weight (= 800)
1530
- * "heavy" - the heavy weight (= 900)
1531
-
1532
- However, you may also pass in the numerical weight directly.
1533
-
1534
- ### :width » a number
1535
-
1536
- For: `all slots and elements`.
1537
-
1538
- Sets the pixel width for the element. If the number is a decimal, the width is
1539
- converted to a percentage (with 0.0 being 0% and 1.0 being 100%.) A width of
1540
- 100% means the object fills its parent slot.
1541
-
1542
- ### :wrap » a string
1543
-
1544
- For: `banner, caption, code, del, em, ins, inscription, link, para, span,
1545
- strong, sub, sup, subtitle, tagline, title`
1546
-
1547
- How should the text wrap when it fills its width? Possible options are:
1548
-
1549
- * "word" - Break lines at word breaks.
1550
- * "char" - Break lines between characters, thus breaking some words.
1551
- * "trim" - Cut the line off with an ellipsis if it goes too long.
1552
-
1553
- ## Classes List
1554
-
1555
- Here is a complete list of all the classes introduced by Shoes. This chart is
1556
- laid out according to how classes inherits from each other. Subclasses are
1557
- indented one level to the right, beneath their parent class.
1558
-
1559
- {INDEX}
1560
-
1561
- ## Colors List
1562
-
1563
- The following list of colors can be used throughout Shoes. As background
1564
- colors or border colors. As stroke and fill colors. Most of these colors come
1565
- from the X11 and HTML palettes.
1566
-
1567
- All of these colors can be used by name. (So calling the `tomato` method from
1568
- inside any slot will get you a nice reddish color.) Below each color, also
1569
- find the exact numbers which can be used with the [[Built-in.rgb]] method.
1570
-
1571
- {COLORS}
1572
-
1573
- # Slots
1574
-
1575
- Slots are boxes used to lay out images, text and so on. The two most common
1576
- slots are `stacks` and `flows`. Slots can also be referred to as "boxes" or
1577
- "canvases" in Shoes terminology.
1578
-
1579
- Since the mouse wheel and PageUp and PageDown are so pervasive on every
1580
- platform, vertical scrolling has really become the only overflow that matters.
1581
- So, in Shoes, just as on the web, width is generally fixed. While height goes
1582
- on and on.
1583
-
1584
- Now, you can also just use specific widths and heights for everything, if you
1585
- want. That'll take some math, but everything could be perfect.
1586
-
1587
- Generally, I'd suggest using stacks and flows. The idea here is that you want
1588
- to fill up a certain width with things, then advance down the page, filling up
1589
- further widths. You can think of these as being analogous to HTML's "block" and
1590
- "inline" styles.
1591
-
1592
- #### Stacks
1593
-
1594
- A stack is simply a vertical stack of elements. Each element in a stack is
1595
- placed directly under the element preceding it.
1596
-
1597
- A stack is also shaped like a box. So if a stack is given a width of 250, that
1598
- stack is itself an element which is 250 pixels wide.
1599
-
1600
- To create a new stack, use the [[Element.stack]] method, which is available
1601
- inside any slot. So stacks can contain other stacks and flows.
1602
-
1603
- #### Flows
1604
-
1605
- A flow will pack elements in as tightly as it can. A width will be filled, then
1606
- will wrap beneath those elements. Text elements placed next to each other will
1607
- appear as a single paragraph. Images and widgets will run together as a series.
1608
-
1609
- Like the stack, a flow is a box. So stacks and flows can safely be embedded
1610
- and, without respect to their contents, are identical. They just treat their
1611
- contents differently.
1612
-
1613
- Making a flow means calling the [[Element.flow]] method. Flows may contain
1614
- other flows and stacks.
1615
-
1616
- Last thing: The Shoes window itself is a flow.
1617
-
1618
- ## Art for Slots
1619
-
1620
- Each slot is like a canvas, a blank surface which can be covered with an
1621
- assortment of colored shapes or gradients.
1622
-
1623
- Many common shapes can be drawn with methods like `oval` and `rect`. You'll
1624
- need to set up the paintbrush colors first, though.
1625
-
1626
- The `stroke` command sets the line color. And the `fill` command sets the
1627
- color used to paint inside the lines.
1628
-
1629
- ```ruby
1630
- #!ruby
1631
- Shoes.app do
1632
- stroke red
1633
- fill blue
1634
- oval top: 10, left: 10,
1635
- radius: 100
1636
- end
1637
- ```
1638
-
1639
- That code gives you a blue pie with a red line around it. One-hundred pixels
1640
- wide, placed just a few pixels southeast of the window's upper left corner.
1641
-
1642
- The `blue` and `red` methods above are Color objects. See the section on
1643
- Colors for more on how to mix colors.
1644
-
1645
- #### Inspiration from Processing and NodeBox
1646
-
1647
- The artful methods generally come verbatim from NodeBox, a drawing kit for
1648
- Python. In turn, NodeBox gets much of its ideas from Processing, a Java-like
1649
- language for graphics and animation. I owe a great debt to the creators of
1650
- these wonderful programs!
1651
-
1652
- Shoes does a few things differently from NodeBox and Processing. For example,
1653
- Shoes has different color methods, including having its own Color objects,
1654
- though these are very similar to Processing's color methods. And Shoes also
1655
- allows images and gradients to be used for drawing lines and filling in shapes.
1656
-
1657
- Shoes also borrows some animation ideas from Processing and will continue to
1658
- closely consult Processing's methods as it expands.
1659
-
1660
- ### arc(left, top, width, height, angle1, angle2) » Shoes::Shape
1661
-
1662
- Draws an arc shape (a section of an oval) at coordinates (left, top). This
1663
- method just give you a bit more control than [[oval]], by offering the
1664
- `:angle1` and `:angle2` styles. (In fact, you can mimick the `oval` method by
1665
- setting `:angle1` to 0 and `:angle2` to `Shoes::TWO_PI`.)
1666
-
1667
- ### arrow(left, top, width) » Shoes::Shape
1668
-
1669
- Draws an arrow at coordinates (left, top) with a pixel `width`.
1670
-
1671
- ### cap(:curve or :rect or :project) » self
1672
-
1673
- Sets the line cap, which is the shape at the end of every line you draw. If
1674
- set to `:curve`, the end is rounded. The default is `:rect`, a line which ends
1675
- abruptly flat. The `:project` cap is also fat, but sticks out a bit longer.
1676
-
1677
- ### fill(pattern) » pattern
1678
-
1679
- Sets the fill bucket to a specific color (or pattern.) Patterns can be colors,
1680
- gradients or images. So, once the fill bucket is set, you can draw shapes and
1681
- they will be colored in with the pattern you've chosen.
1682
-
1683
- To draw a star with an image pattern:
1684
-
1685
- ```ruby
1686
- #!ruby
1687
- Shoes.app do
1688
- fill "static/avatar.png"
1689
- star 200, 200, 5
1690
- end
1691
- ```
1692
-
1693
- To clear the fill bucket, use `nofill`. And to set the line color (the border
1694
- of the star,) use the `stroke` method.
1695
-
1696
- ### nofill() » self
1697
-
1698
- Blanks the fill color, so that any shapes drawn will not be filled in.
1699
- Instead, shapes will have only a lining, leaving the middle transparent.
1700
-
1701
- ### nostroke() » self
1702
-
1703
- Empties the line color. Shapes drawn will have no outer line. If `nofill` is
1704
- also set, shapes drawn will not be visible.
1705
-
1706
- ### line(left, top, x2, y2) » Shoes::Shape
1707
-
1708
- Draws a line using the current line color (aka "stroke") starting at
1709
- coordinates (left, top) and ending at coordinates (x2, y2).
1710
-
1711
- ### oval(left, top, radius) » Shoes::Shape
1712
-
1713
- Draws a circular form at pixel coordinates (left, top) with a width and height
1714
- of `radius` pixels. The line and fill colors are used to draw the shape. By
1715
- default, the coordinates are for the oval's leftmost, top corner, but this can
1716
- be changed by calling the [[Art.transform]] method or by using the `:center`
1717
- style on the next method below.
1718
-
1719
- ```ruby
1720
- #!ruby
1721
- Shoes.app do
1722
- stroke blue
1723
- strokewidth 4
1724
- fill black
1725
- oval 10, 10, 50
1726
- end
1727
- ```
1728
-
1729
- To draw an oval of varied proportions, you may also use the syntax: `oval(left, top, width, height)`.
1730
-
1731
- ### oval(styles) » Shoes::Shape
1732
-
1733
- Draw circular form using a style hash. The following styles are supported:
1734
-
1735
- * `top`: the y-coordinate for the oval pen.
1736
- * `left`: the x-coordinate for the oval pen.
1737
- * `radius`: the width and height of the circle.
1738
- * `width`: a specific pixel width for the oval.
1739
- * `height`: a specific pixel height for the oval.
1740
- * `center`: do the coordinates specific the oval's center? (true or false)
1741
-
1742
- These styles may also be altered using the `style` method on the Shape object.
1743
-
1744
- ### rect(top, left, width, height, corners = 0) » Shoes::Shape
1745
-
1746
- Draws a rectangle starting from coordinates (top, left) with dimensions of
1747
- width x height. Optionally, you may give the rectangle rounded corners with a
1748
- fifth argument: the radius of the corners in pixels.
1749
-
1750
- As with all other shapes, the rectangle is drawn using the stroke and fill colors.
1751
-
1752
- ```ruby
1753
- #!ruby
1754
- Shoes.app do
1755
- stroke rgb(0.5, 0.5, 0.7)
1756
- fill rgb(1.0, 1.0, 0.9)
1757
- rect 10, 10, self.width - 20, self.height - 20
1758
- end
1759
- ```
1760
-
1761
- The above sample draws a rectangle which fills the area of its parent box,
1762
- leaving a margin of 10 pixels around the edge. Also see the `background`
1763
- method for a rectangle which defaults to filling its parent box.
1764
-
1765
- ### rect(styles) » Shoes::Shape
1766
-
1767
- Draw a rectangle using a style hash. The following styles are supported:
1768
-
1769
- * `top`: the y-coordinate for the rectangle.
1770
- * `left`: the x-coordinate for the rectangle.
1771
- * `curve`: the pixel radius of the rectangle's corners.
1772
- * `width`: a specific pixel width for the rectangle.
1773
- * `height`: a specific pixel height for the rectangle.
1774
- * `center`: do the coordinates specific the rectangle's center? (true or false)
1775
-
1776
- These styles may also be altered using the `style` method on the Shape object.
1777
-
1778
- ### rotate(degrees: a number) » self
1779
-
1780
- Rotates the pen used for drawing by a certain number of `degrees`, so that any
1781
- shapes will be drawn at that angle.
1782
-
1783
- In this example below, the rectangle drawn at (30, 30) will be rotated 45 degrees.
1784
-
1785
- ```ruby
1786
- #!ruby
1787
- Shoes.app do
1788
- fill "#333"
1789
- rotate 45
1790
- rect 30, 30, 40, 40
1791
- end
1792
- ```
1793
-
1794
- ### shape(left, top) { ... } » Shoes::Shape
1795
-
1796
- Describes an arbitrary shape to draw, beginning at coordinates (left, top) and
1797
- continued by calls to `line_to`, `move_to`, `curve_to` and `arc_to` inside the
1798
- block. You can look at it as sketching a shape with a long line that curves
1799
- and arcs and bends.
1800
-
1801
- ```ruby
1802
- #!ruby
1803
- Shoes.app do
1804
- fill red(0.2)
1805
- shape do
1806
- move_to(90, 55)
1807
- arc_to(50, 55, 50, 50, 0, PI/2)
1808
- arc_to(50, 55, 60, 60, PI/2, PI)
1809
- arc_to(50, 55, 70, 70, PI, TWO_PI-PI/2)
1810
- arc_to(50, 55, 80, 80, TWO_PI-PI/2, TWO_PI)
1811
- end
1812
- end
1813
- ```
1814
-
1815
- A shape can also contain other shapes. So, you can place an [[Art.oval]], a
1816
- [[Art.rect]], a [[Art.line]], a [[Art.star]] or an [[Art.arrow]] (and all of
1817
- the other methods in this [[Art]] section) inside a shape, but they will not be
1818
- part of the line. They will be more like a group of shapes are all drawn as
1819
- one.
1820
-
1821
- ### star(left, top, points = 10, outer = 100.0, inner = 50.0) » Shoes::Shape
1822
-
1823
- Draws a star using the stroke and fill colors. The star is positioned with its
1824
- center point at coordinates (left, top) with a certain number of `points`. The
1825
- `outer` width defines the full radius of the star; the `inner` width specifies
1826
- the radius of the star's middle, where points stem from.
1827
-
1828
- ### stroke(pattern) » pattern
1829
-
1830
- Set the active line color for this slot. The `pattern` may be a color, a
1831
- gradient or an image, all of which are categorized as "patterns." The line
1832
- color is then used to draw the borders of any subsequent shape.
1833
-
1834
- So, to draw an arrow with a red line around it:
1835
-
1836
- ```ruby
1837
- #!ruby
1838
- Shoes.app do
1839
- stroke red
1840
- arrow 0, 100, 10
1841
- end
1842
- ```
1843
-
1844
- To clear the line color, use the `nostroke` method.
1845
-
1846
- ### strokewidth(a number) » self
1847
-
1848
- Sets the line size for all drawing within this slot. Whereas the `stroke`
1849
- method alters the line color, the `strokewidth` method alters the line size in
1850
- pixels. Calling `strokewidth(4)` will cause lines to be drawn 4 pixels wide.
1851
-
1852
- ### transform(:center or :corner) » self
1853
-
1854
- Should transformations (such as `skew` and `rotate`) be performed around the
1855
- center of the shape? Or the corner of the shape? Shoes defaults to `:corner`.
1856
-
1857
- ### translate(left, top) » self
1858
-
1859
- Moves the starting point of the drawing pen for this slot. Normally, the pen
1860
- starts at (0, 0) in the top-left corner, so that all shapes are drawn from that
1861
- point. With `translate`, if the starting point is moved to (10, 20) and a
1862
- shape is drawn at (50, 60), then the shape is actually drawn at (60, 80) on the
1863
- slot.
1864
-
1865
- ## Element Creation
1866
-
1867
- Shoes has a wide variety of elements, many cherry-picked from HTML. This page
1868
- describes how to create these elements in a slot. See the Elements section of
1869
- the manual for more on how to modify and use these elements after they have
1870
- been placed.
1871
-
1872
- ### animate(fps) { |frame| ... } » Shoes::Animation
1873
-
1874
- Starts an animation timer, which runs parallel to the rest of the app. The
1875
- `fps` is a number, the frames per seconds. This number dictates how many times
1876
- per second the attached block will be called.
1877
-
1878
- The block is given a `frame` number. Starting with zero, the `frame` number
1879
- tells the block how many frames of the animation have been shown.
1880
-
1881
- ```ruby
1882
- #!ruby
1883
- Shoes.app do
1884
- @counter = para "STARTING"
1885
- animate(24) do |frame|
1886
- @counter.replace "FRAME #{frame}"
1887
- end
1888
- end
1889
- ```
1890
-
1891
- The above animation is shown 24 times per second. If no number is given, the
1892
- `fps` defaults to 10.
1893
-
1894
- ### background(pattern) » Shoes::Background
1895
-
1896
- Draws a Background element with a specific color (or pattern.) Patterns can be
1897
- colors, gradients or images. Colors and images will tile across the
1898
- background. Gradients stretch to fill the background.
1899
-
1900
- `'PLEASE NOTE:`' Backgrounds are actual elements, not styles. HTML treats
1901
- backgrounds like styles. Which means every box can only have one background.
1902
- Shoes layers background elements.
1903
-
1904
- ```ruby
1905
- #!ruby
1906
- Shoes.app do
1907
- background black
1908
- background white, width: 50
1909
- end
1910
- ```
1911
-
1912
- The above example paints two backgrounds. First, a black background is painted
1913
- over the entire app's surface area. Then a 50 pixel white stripe is painted
1914
- along the left side.
1915
-
1916
- ### banner(text) » Shoes::Banner
1917
-
1918
- Creates a Banner text block. Shoes automatically styles this text to 48 pixels high.
1919
-
1920
- ### border(text, strokewidth: a number) » Shoes::Border
1921
-
1922
- Draws a Border element using a specific color (or pattern.) Patterns can be
1923
- colors, gradients or images. Colors and images will tile across the border.
1924
- Gradients stretch to fill the border.
1925
-
1926
- `'PLEASE NOTE:`' Like Backgrounds, Borders are actual elements, not styles.
1927
- HTML treats backgrounds and borders like styles. Which means every box can
1928
- only have one borders. Shoes layers border and background elements, along with
1929
- text blocks, images, and everything else.
1930
-
1931
- ### button(text) { ... } » Shoes::Button
1932
-
1933
- Adds a push button with the message `text` written across its surface. An
1934
- optional block can be attached, which is called if the button is pressed.
1935
-
1936
- ### caption(text) » Shoes::Caption
1937
-
1938
- Creates a Caption text block. Shoes styles this text to 14 pixels high.
1939
-
1940
- ### check() » Shoes::Check
1941
-
1942
- Adds a check box.
1943
-
1944
- ### code(text) » Shoes::Code
1945
-
1946
- Create a Code text fragment. This text defaults to a monospaced font.
1947
-
1948
- ### del(text) » Shoes::Del
1949
-
1950
- Creates a Del text fragment (short for "deleted") which defaults to text with a
1951
- single strikethrough in its middle.
1952
-
1953
- ### dialog(styles) { ... } » Shoes::App
1954
-
1955
- Opens a new app window (just like the [[Element.window]] method does,) but the
1956
- window is given a dialog box look.
1957
-
1958
- ### edit_box(text) » Shoes::EditBox
1959
-
1960
- Adds a large, multi-line textarea to this slot. The `text` is optional and
1961
- should be a string that will start out the box. An optional block can be
1962
- attached here which is called any type the user changes the text in the box.
1963
-
1964
- ```ruby
1965
- #!ruby
1966
- Shoes.app do
1967
- edit_box
1968
- edit_box "HORRAY EDIT ME"
1969
- edit_box "small one", width: 100, height: 160
1970
- end
1971
- ```
1972
-
1973
- ### edit_line(text) » Shoes::EditLine
1974
-
1975
- Adds a single-line text box to this slot. The `text` is optional and should be
1976
- a string that will start out the box. An optional block can be attached here
1977
- which is called any type the user changes the text in the box.
1978
-
1979
- ### em(text) » Shoes::Em
1980
-
1981
- Creates an Em text fragment (short for "emphasized") which, by default, is
1982
- styled with italics.
1983
-
1984
- ### every(seconds) { |count| ... } » Shoes::Every
1985
-
1986
- A timer similar to the `animation` method, but much slower. This timer fires a
1987
- given number of seconds, running the block attached. So, for example, if you
1988
- need to check a web site every five minutes, you'd call `every(300)` with a
1989
- block containing the code to actually ping the web site.
1990
-
1991
- ### flow(styles) { ... } » Shoes::Flow
1992
-
1993
- A flow is an invisible box (or "slot") in which you place Shoes elements. Both
1994
- flows and stacks are explained in great detail on the main [[Slots]] page.
1995
-
1996
- Flows organize elements horizontally. Where one would use a [[Element.stack]]
1997
- to keep things stacked vertically, a flow places its contents end-to-end across
1998
- the page. Once the end of the page is reached, the flow starts a new line of
1999
- elements.
2000
-
2001
- ### image(path) » Shoes::Image
2002
-
2003
- Creates an [[Image]] element for displaying a picture. PNG, JPEG and GIF
2004
- formats are allowed.
2005
-
2006
- The `path` can be a file path or a URL. All images loaded are temporarily
2007
- cached in memory, but remote images are also cached locally in the user's
2008
- personal Shoes directory. Remote images are loaded in the background; as with
2009
- browsers, the images will not appear right away, but will be shown when they
2010
- are loaded.
2011
-
2012
- ### imagesize(path) » [width, height]
2013
-
2014
- Quickly grab the width and height of an image. The image won't be loaded into
2015
- the cache or displayed.
2016
-
2017
- URGENT NOTE: This method cannot be used with remote images (loaded from HTTP,
2018
- rather than the hard drive.)
2019
-
2020
- ### ins(text) » Shoes::Ins
2021
-
2022
- Creates an Ins text fragment (short for "inserted") which Shoes styles with a
2023
- single underline.
2024
-
2025
- ### inscription(text) » Shoes::Inscription
2026
-
2027
- Creates an Inscription text block. Shoes styles this text at 10 pixels high.
2028
-
2029
- ### link(text, click: proc or string) » Shoes::Link
2030
-
2031
- Creates a Link text block, which Shoes styles with a single underline and
2032
- colors with a #06E (blue) colored stroke.
2033
-
2034
- The default LinkHover style is also single-underlined with a #039 (dark blue) stroke.
2035
-
2036
- ### list_box(items: [strings, ...]) » Shoes::ListBox
2037
-
2038
- Adds a drop-down list box containing entries for everything in the `items`
2039
- array. An optional block may be attached, which is called if anything in the
2040
- box becomes selected by the user.
2041
-
2042
- ```ruby
2043
- #!ruby
2044
- Shoes.app do
2045
- stack margin: 10 do
2046
- para "Pick a card:"
2047
- list_box items: ["Jack", "Ace", "Joker"]
2048
- end
2049
- end
2050
- ```
2051
-
2052
- Call `ListBox#text` to get the selected string. See the `ListBox` section
2053
- under `Native` controls for more help.
2054
-
2055
- ### progress() » Shoes::Progress
2056
-
2057
- Adds a progress bar.
2058
-
2059
- ### para(text) » Shoes::Para
2060
-
2061
- Create a Para text block (short for "paragraph") which Shoes styles at 12
2062
- pixels high.
2063
-
2064
- ### radio(group name: a string or symbol) » Shoes::Radio
2065
-
2066
- Adds a radio button. If a `group name` is given, the radio button is
2067
- considered part of a group. Among radio buttons in the same group, only one
2068
- may be checked. (If no group name is given, the radio button is grouped with
2069
- any other radio buttons in the same slot.)
2070
-
2071
- ### span(text) » Shoes::Span
2072
-
2073
- Creates a Span text fragment, unstyled by default.
2074
-
2075
- ### stack(styles) { ... } » Shoes::Stack
2076
-
2077
- Creates a new stack. A stack is a type of slot. (See the main [[Slots]] page
2078
- for a full explanation of both stacks and flows.)
2079
-
2080
- In short, stacks are an invisible box (a "slot") for placing stuff. As you add
2081
- things to the stack, such as buttons or images, those things pile up
2082
- vertically. Yes, they stack up!
2083
-
2084
- ### strong(text) » Shoes::Strong
2085
-
2086
- Creates a Strong text fragment, styled in bold by default.
2087
-
2088
- ### sub(text) » Shoes::Sub
2089
-
2090
- Creates a Sub text fragment (short for "subscript") which defaults to lowering
2091
- the text by 10 pixels and styling it in an x-small font.
2092
-
2093
- ### subtitle(text) » Shoes::Subtitle
2094
-
2095
- Creates a Subtitle text block. Shoes styles this text to 26 pixels high.
2096
-
2097
- ### sup(text) » Shoes::Sup
2098
-
2099
- Creates a Sup text fragment (short for "superscript") which defaults to raising
2100
- the text by 10 pixels and styling it in an x-small font.
2101
-
2102
- ### tagline(text) » Shoes::Tagline
2103
-
2104
- Creates a Tagline text block. Shoes styles this text to 18 pixels high.
2105
-
2106
- ### timer(seconds) { ... } » Shoes::Timer
2107
-
2108
- A one-shot timer. If you want to schedule to run some code in a few seconds
2109
- (or minutes, hours) you can attach the code as a block here.
2110
-
2111
- To display an alert box five seconds from now:
2112
-
2113
- ```ruby
2114
- #!ruby
2115
- Shoes.app do
2116
- timer(5) do
2117
- alert("Your five seconds are up.")
2118
- end
2119
- end
2120
- ```
2121
-
2122
- ### title(text) » Shoes::Title
2123
-
2124
- Creates a Title text block. Shoes styles these elements to 34 pixels high.
2125
-
2126
- ### video(path or url) » Shoes::Video
2127
-
2128
- Embeds a movie in this slot.
2129
-
2130
- ### window(styles) { ... } » Shoes::App
2131
-
2132
- Opens a new app window. This method is almost identical to the
2133
- [[App.Shoes.app]] method used to start an app in the first place. The
2134
- difference is that the `window` method sets the new window's [[App.owner]]
2135
- property. (A normal Shoes.app has its `owner` set to `nil`.)
2136
-
2137
- So, the new window's `owner` will be set to the Shoes::App which launched the
2138
- window. This way the child window can call the parent.
2139
-
2140
- ```ruby
2141
- #!ruby
2142
- Shoes.app title: "The Owner" do
2143
- button "Pop up?" do
2144
- window do
2145
- para "Okay, popped up from #{owner}"
2146
- end
2147
- end
2148
- end
2149
- ```
2150
-
2151
- ## Events
2152
-
2153
- Wondering how to catch stray mouse clicks or keyboard typing? Events are sent
2154
- to a slot whenever a mouse moves inside the slot. Or whenever a key is
2155
- pressed. Even when the slot is created or destroyed. You can attach a block
2156
- to each of these events.
2157
-
2158
- Mouse events include `motion`, `click`, `hover` and `leave`. Keyboard typing
2159
- is represented by the `keypress` event. And the `start` and `finish` events
2160
- indicate when a canvas comes into play or is discarded.
2161
-
2162
- So, let's say you want to change the background of a slot whenever the mouse
2163
- floats over it. We can use the `hover` event to change the background when the
2164
- mouse comes inside the slot. And `leave` to change back when the mouse floats
2165
- away.
2166
-
2167
- ```ruby
2168
- #!ruby
2169
- Shoes.app do
2170
- s = stack width: 200, height: 200 do
2171
- background red
2172
- hover do
2173
- s.clear { background blue }
2174
- end
2175
- leave do
2176
- s.clear { background red }
2177
- end
2178
- end
2179
- end
2180
- ```
2181
-
2182
- ### click { |button, left, top| ... } » self
2183
-
2184
- The click block is called when a mouse button is clicked. The `button` is the
2185
- number of the mouse button which has been pressed. The `left` and `top` are
2186
- the mouse coordinates at which the click happened.
2187
-
2188
- To catch the moment when the mouse is unclicked, see the [[Events.release]] event.
2189
-
2190
- ### finish { |self| ... } » self
2191
-
2192
- When a slot is removed, it's finish event occurs. The finish block is
2193
- immediately handed `self`, the slot object which has been removed.
2194
-
2195
- ### hover { |self| ... } » self
2196
-
2197
- The hover event happens when the mouse enters the slot. The block gets `self`,
2198
- meaning the object which was hovered over.
2199
-
2200
- To catch the mouse exiting the slot, check out the [[Events.leave]] event.
2201
-
2202
- ### keypress { |key| ... } » self
2203
-
2204
- Whenever a key (or combination of keys) is pressed, the block gets called. The
2205
- block is sent a `key` which is a string representing the character (such as the
2206
- letter or number) on the key. For special keys and key combos, a Ruby symbol
2207
- is sent, rather than a string.
2208
-
2209
- So, for example, if `Shift-a` is pressed, the block will get the string `"A"`.
2210
-
2211
- However, if the F1 key is pressed, the `:f1` symbol is received. For
2212
- `Shift-F1`, the symbol would be `:shift_f1`.
2213
-
2214
- The modifier keys are `control`, `shift` and `alt`. They appear in that order.
2215
- If `Shift-Control-Alt-PgUp` is pressed, the symbol will be
2216
- `:control_shift_alt_page_up`.
2217
-
2218
- One thing about the shift key. You won't see the shift key on most keys. On
2219
- US keyboards, `Shift-7` is an ampersand. So you'll get the string `"&"` rather
2220
- than `:shift_5`. And, if you press `Shift-Alt-7` on such a keyboard, you'll
2221
- get the symbol: `:alt_&`. You'll only see the shift modifier on the special
2222
- keys listed a few paragraphs down.
2223
-
2224
- ```ruby
2225
- #!ruby
2226
- Shoes.app do
2227
- @info = para "NO KEY is PRESSED."
2228
- keypress do |k|
2229
- @info.replace "#{k.inspect} was PRESSED."
2230
- end
2231
- end
2232
- ```
2233
-
2234
- Keep in mind that Shoes itself uses a few hotkeys. Alt-Period (`:alt_.`),
2235
- Alt-Question (`:alt_?`) and Alt-Slash (`:alt_/`) are reserved for Shoes.
2236
-
2237
- The list of special keys is as follows: `:escape`, `:delete`, `:backspace`,
2238
- `:tab`, `:page_up`, `:page_down`, `:home`, `:end`, `:left`, `:up`, `:right`,
2239
- `:down`, `:f1`, `:f2`, `:f3`, `:f4`, `:f5`, `:f6`, `:f7`, `:f8`, `:f9`, `:f10`,
2240
- `:f11` and `:f12`.
2241
-
2242
- One caveat to all of those rules: normally the Return key gives you a string
2243
- `"\n"`. When pressed with modifier keys, however, you end up with
2244
- `:control_enter`, `:control_alt_enter`, `:shift_alt_enter` and the like.
2245
-
2246
- ### leave { |self| ... } » self
2247
-
2248
- The leave event takes place when the mouse cursor exits a slot. The moment it
2249
- no longer is inside the slot's edges. When that takes place, the block is
2250
- called with `self`, the slot object which is being left.
2251
-
2252
- Also see [[Events.hover]] if you'd like to detect the mouse entering a slot.
2253
-
2254
- ### motion { |left, top| ... } » self
2255
-
2256
- The motion block gets called every time the mouse moves around inside the slot.
2257
- The block is handed the cursor's `left` and `top` coordinates.
2258
-
2259
- ```ruby
2260
- #!ruby
2261
- Shoes.app width: 200, height: 200 do
2262
- background black
2263
- fill white
2264
- @circ = oval 0, 0, 100, 100
2265
-
2266
- motion do |top, left|
2267
- @circ.move top - 50, left - 50
2268
- end
2269
- end
2270
- ```
2271
-
2272
- ### release { |button, left, top| ... } » self
2273
-
2274
- The release block runs whenever the mouse is unclicked (on mouse up). When the
2275
- finger is lifted. The `button` is the number of the button that was depressed.
2276
- The `left` and `top` are the coordinates of the mouse at the time the button
2277
- was released.
2278
-
2279
- To catch the actual mouse click, use the [[Events.click]] event.
2280
-
2281
- ### start { |self| ... } » self
2282
-
2283
- The first time the slot is drawn, the start event fires. The block is handed
2284
- `self`, the slot object which has just been drawn.
2285
-
2286
- ## Manipulation Blocks
2287
-
2288
- The manipulation methods below make quick work of shifting around slots and
2289
- inserting new elements.
2290
-
2291
- ### append() { ... } » self
2292
-
2293
- Adds elements to the end of a slot.
2294
-
2295
- ```ruby
2296
- #!ruby
2297
- Shoes.app do
2298
- @slot = stack { para 'Good Morning' }
2299
- timer 3 do
2300
- @slot.append do
2301
- title "Breaking News"
2302
- tagline "Astronauts arrested for space shuttle DUI."
2303
- end
2304
- end
2305
- end
2306
- ```
2307
-
2308
- The `title` and `tagline` elements will be added to the end of the `@slot`.
2309
-
2310
- ### after(element) { ... } » self
2311
-
2312
- Adds elements to a specific place in a slot, just after the `element` which is
2313
- a child of the slot.
2314
-
2315
- ### before(element) { ... } » self
2316
-
2317
- Adds elements to a specific place in a slot, just before the `element` which is
2318
- a child of the slot.
2319
-
2320
- ### clear() » self
2321
-
2322
- Empties the slot of any elements, timers and nested slots. This is effectively
2323
- identical to looping through the contents of the slot and calling each
2324
- element's `remove` method.
2325
-
2326
- ### clear() { ... } » self
2327
-
2328
- The clear method also takes an optional block. The block will be used to
2329
- replace the contents of the slot.
2330
-
2331
- ```ruby
2332
- #!ruby
2333
- Shoes.app do
2334
- @slot = stack { para "Old text" }
2335
- timer 3 do
2336
- @slot.clear { para "Brand new text" }
2337
- end
2338
- end
2339
- ```
2340
-
2341
- In this example, the "Old text" paragraph will be cleared out, replaced by the
2342
- "Brand new text" paragraph.
2343
-
2344
- ### prepend() { ... } » self
2345
-
2346
- Adds elements to the beginning of a slot.
2347
-
2348
- ```ruby
2349
- #!ruby
2350
- Shoes.app do
2351
- @slot = stack { para 'Good Morning' }
2352
- timer 3 do
2353
- @slot.prepend { para "Your car is ready." }
2354
- end
2355
- end
2356
- ```
2357
-
2358
- The `para` element is added to the beginning of the `@slot`.
2359
-
2360
- ## Position of a Slot
2361
-
2362
- Like any other element, slots can be styled and customized when they are created.
2363
-
2364
- To set the width of a stack to 150 pixels:
2365
-
2366
- ```ruby
2367
- #!ruby
2368
- Shoes.app do
2369
- stack(width: 150) { para "Now that's precision." }
2370
- end
2371
- ```
2372
-
2373
- Each style setting also has a method, which can be used to grab that particular
2374
- setting. (So, like, the `width` method returns the width of the slot in
2375
- pixels.)
2376
-
2377
- ### displace(left: a number, top: a number) » self
2378
-
2379
- A shortcut method for setting the :displace_left and :displace_top styles.
2380
- Displacing is a handy way of moving a slot without altering the layout. In
2381
- fact, the `top` and `left` methods will not report displacement at all. So,
2382
- generally, displacement is only for temporary animations. For example,
2383
- jiggling a button in place.
2384
-
2385
- The `left` and `top` numbers sent to `displace` are added to the slot's own
2386
- top-left coordinates. To subtract from the top-left coordinate, use negative
2387
- numbers.
2388
-
2389
- ### gutter() » a number
2390
-
2391
- The size of the scrollbar area. When Shoes needs to show a scrollbar, the
2392
- scrollbar may end up covering up some elements that touch the edge of the
2393
- window. The `gutter` tells you how many pixels to expect the scrollbar to
2394
- cover.
2395
-
2396
- This is commonly used to pad elements on the right, like so:
2397
-
2398
- ```ruby
2399
- #!ruby
2400
- Shoes.app do
2401
- stack margin_right: 20 + gutter do
2402
- para "Insert fat and ratified declaration of independence here..."
2403
- end
2404
- end
2405
- ```
2406
-
2407
- ### height() » a number
2408
-
2409
- The vertical size of the viewable slot in pixels. So, if this is a scrolling
2410
- slot, you'll need to use `scroll_height()` to get the full size of the slot.
2411
-
2412
- ### hide() » self
2413
-
2414
- Hides the slot, so that it can't be seen. See also [[Position.show]] and [[Position.toggle]].
2415
-
2416
- ### left() » a number
2417
-
2418
- The left pixel location of the slot. Also known as the x-axis coordinate.
2419
-
2420
- ### move(left, top) » self
2421
-
2422
- Moves the slot to specific coordinates, the (left, top) being the upper left
2423
- hand corner of the slot.
2424
-
2425
- ### remove() » self
2426
-
2427
- Removes the slot. It will no longer be displayed and will not be listed in its
2428
- parent's contents. It's gone.
2429
-
2430
- ### scroll() » true or false
2431
-
2432
- Is this slot allowed to show a scrollbar? True or false. The scrollbar will
2433
- only appear if the height of the slot is also fixed.
2434
-
2435
- ### scroll_height() » a number
2436
-
2437
- The vertical size of the full slot, including any of it which is hidden by scrolling.
2438
-
2439
- ### scroll_max() » a number
2440
-
2441
- The top coordinate which this slot can be scrolled down to. The top coordinate
2442
- of a scroll bar is always zero. The bottom coordinate is the full height of
2443
- the slot minus one page of scrolling. This bottom coordinate is what
2444
- `scroll_max` returns.
2445
-
2446
- This is basically a shortcut for writing `slot.scroll_height - slot.height`.
2447
-
2448
- To scroll to the bottom of a slot, use `slot.scroll_top = slot.scroll_max`.
2449
-
2450
- ### scroll_top() » a number
2451
-
2452
- The top coordinate which this slot is scrolled down to. So, if the slot is
2453
- scrolled down twenty pixels, this method will return `20`.
2454
-
2455
- ### scroll_top = a number
2456
-
2457
- Scrolls the slot to a certain coordinate. This must be between zero and
2458
- `scroll_max`.
2459
-
2460
- ### show() » self
2461
-
2462
- Reveals the slot, if it is hidden. See also [[Position.hide]] and
2463
- [[Position.toggle]].
2464
-
2465
- ### style() » styles
2466
-
2467
- Calling the `style` method with no arguments returns a hash of the styles
2468
- presently applied to this slot.
2469
-
2470
- While methods such as `height` and `width` return the true pixel dimensions of
2471
- the slot, you can use `style[:height]` or `style[:width]` to get the dimensions
2472
- originally requested.
2473
-
2474
- ```ruby
2475
- #!ruby
2476
- Shoes.app do
2477
- @s = stack width: "100%"
2478
- para @s.style[:width]
2479
- end
2480
- ```
2481
-
2482
- In this example, the paragraph under the stack will display the string "100%".
2483
-
2484
- ### style(styles) » styles
2485
-
2486
- Alter the slot using a hash of style settings. Any of the methods on this page
2487
- (aside from this method, of course) can be used as a style setting. So, for
2488
- example, there is a `width` method, thus there is also a `width` style.
2489
-
2490
- ```ruby
2491
- #!ruby
2492
- Shoes.app do
2493
- @s = stack { background green }
2494
- @s.style(width: 400, height: 200)
2495
- end
2496
- ```
2497
-
2498
- ### toggle() » self
2499
-
2500
- Hides the slot, if it is shown. Or shows the slot, if it is hidden.
2501
-
2502
- ### top() » a number
2503
-
2504
- The top pixel location of the slot. Also known as the y-axis coordinate.
2505
-
2506
- ### width() » a number
2507
-
2508
- The horizontal size of the slot in pixels.
2509
-
2510
- ## Traversing the Page
2511
-
2512
- You may find yourself needing to loop through the elements inside a slot. Or
2513
- maybe you need to climb the page, looking for a stack that is the parent of an
2514
- element.
2515
-
2516
- On any element, you may call the `parent` method to get the slot directly above
2517
- it. And on slots, you can call the `contents` method to get all of the
2518
- children. (Some elements, such as text blocks, also have a `contents` method
2519
- for getting their children.)
2520
-
2521
- ### contents() » an array of elements
2522
-
2523
- Lists all elements in a slot.
2524
-
2525
- ### parent() » a Shoes::Stack or Shoes::Flow
2526
-
2527
- Gets the object for this element's container.
2528
-
2529
- # Elements
2530
-
2531
- Ah, here's the stuff of Shoes. An element can be as simple as an oval shape. Or
2532
- as complex as a video stream. You've encountered all of these elements before
2533
- in the Slots section of the manual.
2534
-
2535
- Shoes has seven native controls: the Button, the EditLine, the EditBox, the
2536
- ListBox, the Progress meter, the Check box and the Radio. By "native"
2537
- controls, we mean that each of these seven elements is drawn by the operating
2538
- system. So, a Progress bar will look one way on Windows and another way on OS
2539
- X.
2540
-
2541
- Shoes also has seven basic other types of elements: Background, Border, Image,
2542
- Shape, TextBlock, Timer and Video. These all should look and act the same on
2543
- every operating system.
2544
-
2545
- Once an element is created, you will often still want to change it. To move it
2546
- or hide it or get rid of it. You'll use the commands in this section to do that
2547
- sort of stuff. (Especially check out the [[Common Common Methods]] section for
2548
- commands you can use on any element.)
2549
-
2550
- So, for example, use the `image` method of a Slot to place a PNG on the screen.
2551
- The `image` method gives you back an Image object. Use the methods of the Image
2552
- object to change things up.
2553
-
2554
- ## Common Methods
2555
-
2556
- A few methods are shared by every little element in Shoes. Moving, showing,
2557
- hiding. Removing an element. Basic and very general things. This list
2558
- encompasses those common commands.
2559
-
2560
- One of the most general methods of all is the `style` method (which is also
2561
- covered as the [[Position.style]] method for slots.)
2562
-
2563
- ```ruby
2564
- #!ruby
2565
- Shoes.app do
2566
- stack do
2567
- # Background, text and a button: both are elements!
2568
- @back = background green
2569
- @text = banner "A Message for You, Rudy"
2570
- @press = button "Stop your messin about!"
2571
-
2572
- # And so, both can be styled.
2573
- @text.style size: 12, stroke: red, margin: 10
2574
- @press.style width: 400
2575
- @back.style height: 10
2576
- end
2577
- end
2578
- ```
2579
-
2580
- For specific commands, see the other links to the left in the Elements section.
2581
- Like if you want to pause or play a video file, check the [[Video]] section,
2582
- since pausing and playing is peculiar to videos. No sense pausing a button.
2583
-
2584
- ### displace(left: a number, top: a number) » self
2585
-
2586
- Displacing an element moves it. But without changing the layout around it.
2587
- This is great for subtle animations, especially if you want to reserve a place
2588
- for an element while it is still animating. Like maybe a quick button shake or
2589
- a slot sliding into view.
2590
-
2591
- When you displace an element, it moves relative to the upper-left corner where
2592
- it was placed. So, if an element is at the coordinates (20, 40) and you
2593
- displace it 2 pixels left and 6 pixels on top, you end up with the coordinates
2594
- (22, 46).
2595
-
2596
- ```ruby
2597
- #!ruby
2598
- Shoes.app do
2599
- flow margin: 12 do
2600
- # Set up three buttons
2601
- button "One"
2602
- @two = button "Two"
2603
- button "Three"
2604
-
2605
- # Bounce the second button
2606
- animate do |i|
2607
- @two.displace(0, (Math.sin(i) * 6).to_i)
2608
- end
2609
- end
2610
- end
2611
- ```
2612
-
2613
- Notice that while the second button bounces, the other two buttons stay put.
2614
- If we used a normal `move` in this situation, the second button would be moved
2615
- out of the layout and the buttons would act as if the second button wasn't
2616
- there at all. (See the [[Common.move]] example.)
2617
-
2618
- `'Of particular note:`' if you use the `left` and `top` methods to get the
2619
- coordinates of a displaced element, you'll just get back the normal
2620
- coordinates. As if there was no displacement. Displacing is just intended for
2621
- quick animations!
2622
-
2623
- ### height() » a number
2624
-
2625
- The vertical screen size of the element in pixels. In the case of images, this
2626
- is not the full size of the image. This is the height of the element as it is
2627
- shown right now.
2628
-
2629
- If you have a 150x150 pixel image and you set the width to 50 pixels, this
2630
- method will return 50.
2631
-
2632
- Also see the [[Common.width]] method for an example and some other comments.
2633
-
2634
- ### hide() » self
2635
-
2636
- Hides the element, so that it can't be seen. See also [[Common.show]] and
2637
- [[Common.toggle]].
2638
-
2639
- ### left() » a number
2640
-
2641
- Gets you the pixel position of the left edge of the element.
2642
-
2643
- ### move(left: a number, top: a number) » self
2644
-
2645
- Moves the element to a specific pixel position within its slot. The element is
2646
- still inside the slot. But it will no longer be stacked or flowed in with the
2647
- other stuff in the slot. The element will float freely, now absolutely
2648
- positioned instead.
2649
-
2650
- ```ruby
2651
- #!ruby
2652
- Shoes.app do
2653
- flow margin: 12 do
2654
- # Set up three buttons
2655
- button "One"
2656
- @two = button "Two"
2657
- button "Three"
2658
-
2659
- # Bounce the second button
2660
- animate do |i|
2661
- @two.move(40, 40 + (Math.sin(i) * 6).to_i)
2662
- end
2663
- end
2664
- end
2665
- ```
2666
-
2667
- The second button is moved to a specific place, allowing the third button to
2668
- slide over into its place. If you want to move an element without shifting
2669
- other pieces, see the [[Common.displace]] method.
2670
-
2671
- ### parent() » a Shoes::Stack or Shoes::Flow
2672
-
2673
- Gets the object for this element's container. Also see the slot's
2674
- [[Traversing.contents]] to do the opposite: get a container's elements.
2675
-
2676
- ### remove() » self
2677
-
2678
- Removes the element from its slot. (In other words: throws it in the garbage.)
2679
- The element will no longer be displayed.
2680
-
2681
- ### show() » self
2682
-
2683
- Reveals the element, if it is hidden. See also [[Common.hide]] and
2684
- [[Common.toggle]].
2685
-
2686
- ### style() » styles
2687
-
2688
- Gives you the full set of styles applied to this element, in the form of a
2689
- Hash. While methods like `width` and `height` and `top` give you back specific
2690
- pixel dimensions, using `style[:width]` or `style[:top]`, you can get the
2691
- original setting (things like "100%" for width or "10px" for top.)
2692
-
2693
- ```ruby
2694
- #!ruby
2695
- Shoes.app do
2696
- # A button which take up the whole page
2697
- @b = button "All of it", width: 1.0, height: 1.0
2698
-
2699
- # When clicked, show the styles
2700
- @b.click { alert(@b.style.inspect) }
2701
- end
2702
- ```
2703
-
2704
- ### style(styles) » styles
2705
-
2706
- Changes the style of an element. This could include the `:width` and `:height`
2707
- of an element, the font `:size` of some text, the `:stroke` and `:fill` of a
2708
- shape. Or any other number of style settings.
2709
-
2710
- ### toggle() » self
2711
-
2712
- Hides an element if it is shown. Or shows the element, if it is hidden.
2713
-
2714
- ### top() » a number
2715
-
2716
- Gets the pixel position of the top edge of the element.
2717
-
2718
- ### width() » a number
2719
-
2720
- Gets the pixel width for the full size of the element. This method always
2721
- returns an exact pixel size. In the case of images, this is not the full width
2722
- of the image, just the size it is shown at. See the [[Common.height]] method
2723
- for more.
2724
-
2725
- Also, if you create an element with a width of 100% and that element is inside
2726
- a stack which is 120 pixels wide, you'll get back `120`. However, if you call
2727
- `style[:width]`, you'll get `"100%"`.
2728
-
2729
- ```ruby
2730
- #!ruby
2731
- Shoes.app do
2732
- stack width: 120 do
2733
- @b = button "Click me", width: "100%" do
2734
- alert "button.width = #{@b.width}\n" +
2735
- "button.style[:width] = #{@b.style[:width]}"
2736
- end
2737
- end
2738
- end
2739
- ```
2740
-
2741
- In order to set the width, you'll have to go through the [[Common.style]]
2742
- method again. So, to set the button to 150 pixels wide: `@b.style(width: 150)`.
2743
-
2744
- To let Shoes pick the element's width, go with `@b.style(width: nil)` to
2745
- empty out the setting.
2746
-
2747
- ## Background
2748
-
2749
- A background is a color, a gradient or an image that is painted across an
2750
- entire slot. Both backgrounds and borders are a type of Shoes::Pattern.
2751
- ![man-ele-background.png](man-ele-background.png)
2752
-
2753
- Even though it's called a `background`, you may still place this element in
2754
- front of other elements. If a background comes after something else painted on
2755
- the slot (like a `rect` or an `oval`,) the background will be painted over that
2756
- element.
2757
-
2758
- The simplest background is just a plain color background, created with the
2759
- [[Element.background]] method, such as this black background:
2760
-
2761
- ```ruby
2762
- #!ruby
2763
- Shoes.app do
2764
- background black
2765
- end
2766
- ```
2767
-
2768
- A simple background like that paints the entire slot that contains it. (In
2769
- this case, the whole window is painted black.)
2770
-
2771
- You can use styles to cut down the size or move around the background to your liking.
2772
-
2773
- To paint a black background across the top fifty pixels of the window:
2774
-
2775
- ```ruby
2776
- #!ruby
2777
- Shoes.app do
2778
- background black, height: 50
2779
- end
2780
- ```
2781
-
2782
- Or, to paint a fifty pixel column on the right-side of the window:
2783
-
2784
- ```ruby
2785
- #!ruby
2786
- Shoes.app do
2787
- background black, width: 50, right: 50
2788
- end
2789
- ```
2790
-
2791
- Since Backgrounds are normal elements as well, see also the start of the
2792
- [[Elements]] section for all of its other methods.
2793
-
2794
- ### to_pattern() » a Shoes::Pattern
2795
-
2796
- Yanks out the color, gradient or image used to paint this background and places
2797
- it in a normal Shoes::Pattern object. You can then pass that object to other
2798
- backgrounds and borders. Reuse it as you like.
2799
-
2800
- ## Border
2801
-
2802
- A border is a color, gradient or image painted in a line around the edge of any
2803
- slot. Like the Background element in the last section, a Border is a kind of
2804
- Shoes::Pattern. ![man-ele-border.png](man-ele-border.png)
2805
-
2806
- The first, crucial thing to know about border is that all borders paint a line
2807
- around the `'inside`' of a slot, not the outside. So, if you have a slot
2808
- which is fifty pixels wide and you paint a five pixel border on it, that means
2809
- there is a fourty pixel wide area inside the slot which is surrounded by the
2810
- border.
2811
-
2812
- This also means that if you paint a Border on top of a [[Background]], the
2813
- edges of the background will be painted over by the border.
2814
-
2815
- Here is just such a slot:
2816
-
2817
- ```ruby
2818
- #!ruby
2819
- Shoes.app do
2820
- stack width: 50 do
2821
- border black, strokewidth: 5
2822
- para "=^.^=", stroke: green
2823
- end
2824
- end
2825
- ```
2826
-
2827
- If you want to paint a border around the outside of a slot, you'll need to wrap
2828
- that slot in another slot. Then, place the border in the outside slot.
2829
-
2830
- ```ruby
2831
- #!ruby
2832
- Shoes.app do
2833
- stack width: 60 do
2834
- border black, strokewidth: 5
2835
- stack width: 50 do
2836
- para "=^.^=", stroke: green
2837
- end
2838
- end
2839
- end
2840
- ```
2841
-
2842
- In HTML and many other languages, the border is painted on the outside of the
2843
- box, thus increasing the overall width of the box. Shoes was designed with
2844
- consistency in mind, so that if you say that a box is fifty pixels wide, it
2845
- stays fifty pixels wide regardless of its borders or margins or anything else.
2846
-
2847
- Please also check out the [[Elements]] section for other methods used on borders.
2848
-
2849
- ### to_pattern() » a Shoes::Pattern
2850
-
2851
- Creates a basic pattern object based on the color, gradient or image used to
2852
- paint this border. The pattern may then be re-used in new borders and
2853
- backgrounds.
2854
-
2855
- ## Button
2856
-
2857
- Buttons are, you know, push buttons. You click them and they do something.
2858
- Buttons are known to say "OK" or "Are you sure?" And, then, if you're sure,
2859
- you click the button. ![man-ele-button.png](man-ele-button.png)
2860
-
2861
- ```ruby
2862
- #!ruby
2863
- Shoes.app do
2864
- button "OK!"
2865
- button "Are you sure?"
2866
- end
2867
- ```
2868
-
2869
- The buttons in the example above don't do anything when you click them. In
2870
- order to get them to work, you've got to hook up a block to each button.
2871
-
2872
- ```ruby
2873
- #!ruby
2874
- Shoes.app do
2875
- button "OK!" do
2876
- append { para "Well okay then." }
2877
- end
2878
- button "Are you sure?" do
2879
- append { para "Your confidence is inspiring." }
2880
- end
2881
- end
2882
- ```
2883
-
2884
- So now we've got blocks for the buttons. Each block appends a new paragraph to
2885
- the page. The more you click, the more paragraphs get added.
2886
-
2887
- It doesn't go much deeper than that. A button is just a clickable phrase.
2888
-
2889
- Just to be pedantic, though, here's another way to write that last example.
2890
-
2891
- ```ruby
2892
- #!ruby
2893
- Shoes.app do
2894
- @b1 = button "OK!"
2895
- @b1.click { para "Well okay then." }
2896
- @b2 = button "Are you sure?"
2897
- @b2.click { para "Your confidence is inspiring." }
2898
- end
2899
- ```
2900
-
2901
- This looks dramatically different, but it does the same thing. The first
2902
- difference: rather than attaching the block directly to the button, the block
2903
- is attached later, through the `click` method.
2904
-
2905
- The second change isn't related to buttons at all. The `append` block was
2906
- dropped since Shoes allows you to add new elements directly to the slot. So we
2907
- can just call `para` directly. (This isn't the case with the `prepend`,
2908
- `before` or `after` methods.)
2909
-
2910
- Beside the methods below, buttons also inherit all of the methods that are
2911
- [[Common]].
2912
-
2913
- ### click() { |self| ... } » self
2914
-
2915
- When a button is clicked, its `click` block is called. The block is handed
2916
- `self`. Meaning: the button which was clicked.
2917
-
2918
- ### focus() » self
2919
-
2920
- Moves focus to the button. The button will be highlighted and, if the user
2921
- hits Enter, the button will be clicked.
2922
-
2923
- ## Check
2924
-
2925
- Check boxes are clickable square boxes than can be either checked or unchecked.
2926
- A single checkbox usually asks a "yes" or "no" question. Sets of checkboxes
2927
- are also seen in to-do lists. ![man-ele-check.png](man-ele-check.png)
2928
-
2929
- Here's a sample checklist.
2930
-
2931
- ```ruby
2932
- #!ruby
2933
- Shoes.app do
2934
- stack do
2935
- flow { check; para "Frances Johnson" }
2936
- flow { check; para "Ignatius J. Reilly" }
2937
- flow { check; para "Winston Niles Rumfoord" }
2938
- end
2939
- end
2940
- ```
2941
-
2942
- You basically have two ways to use a check. You can attach a block to the
2943
- check and it'll get called when the check gets clicked. And/or you can just
2944
- use the `checked?` method to go back and see if a box has been checked or not.
2945
-
2946
- Okay, let's add to the above example.
2947
-
2948
- ```ruby
2949
- #!ruby
2950
- Shoes.app do
2951
- @list = ['Frances Johnson', 'Ignatius J. Reilly',
2952
- 'Winston Niles Rumfoord']
2953
-
2954
- stack do
2955
- @list.map! do |name|
2956
- flow { @c = check; para name }
2957
- [@c, name]
2958
- end
2959
-
2960
- button "What's been checked?" do
2961
- selected = @list.map { |c, name| name if c.checked? }.compact
2962
- alert("You selected: " + selected.join(', '))
2963
- end
2964
- end
2965
- end
2966
- ```
2967
-
2968
- So, when the button gets pressed, each of the checks gets asked for its status,
2969
- using the `checked?` method.
2970
-
2971
- Button methods are listed below, but also see the list of [[Common]] methods,
2972
- which all elements respond to.
2973
-
2974
- ### checked?() » true or false
2975
-
2976
- Returns whether the box is checked or not. So, `true` means "yes, the box is checked!"
2977
-
2978
- ### checked = true or false
2979
-
2980
- Marks or unmarks the check box. Using `checked = false`, for instance,
2981
- unchecks the box.
2982
-
2983
- ### click() { |self| ... } » self
2984
-
2985
- When the check is clicked, its `click` block is called. The block is handed
2986
- `self`, which is the check object which was clicked.
2987
-
2988
- Clicks are sent for both checking and unchecking the box.
2989
-
2990
- ### focus() » self
2991
-
2992
- Moves focus to the check. The check will be highlighted and, if the user hits
2993
- Enter, the check will be toggled between its checked and unchecked states.
2994
-
2995
- ## EditBox
2996
-
2997
- Edit boxes are wide, rectangular boxes for entering text. On the web, they
2998
- call these textareas. These are multi-line edit boxes for entering longer
2999
- descriptions. Essays, even![man-ele-editbox.png](man-ele-editbox.png)
3000
-
3001
- Without any other styling, edit boxes are sized 200 pixels by 108 pixels. You
3002
- can also use `:width` and `:height` styles to set specific sizes.
3003
-
3004
- ```ruby
3005
- #!ruby
3006
- Shoes.app do
3007
- edit_box
3008
- edit_box width: 100, height: 100
3009
- end
3010
- ```
3011
-
3012
- Other controls (like [[Button]] and [[Check]]) have only click events, but both
3013
- [[EditLine]] and EditBox have a `change` event. The `change` block is called
3014
- every time someone types into or deletes from the box.
3015
-
3016
- ```ruby
3017
- #!ruby
3018
- Shoes.app do
3019
- edit_box do |e|
3020
- @counter.text = e.text.size
3021
- end
3022
- @counter = strong("0")
3023
- para @counter, " characters"
3024
- end
3025
- ```
3026
-
3027
- Notice that the example also uses the [[EditBox.text]] method inside the block.
3028
- That method gives you a string of all the characters typed into the box.
3029
-
3030
- More edit box methods are listed below, but also see the list of [[Common]]
3031
- methods, which all elements respond to.
3032
-
3033
- ### change() { |self| ... } » self
3034
-
3035
- Each time a character is added to or removed from the edit box, its `change`
3036
- block is called. The block is given `self`, which is the edit box object which
3037
- has changed.
3038
-
3039
- ### focus() » self
3040
-
3041
- Moves focus to the edit box. The edit box will be highlighted and the user will
3042
- be able to type into the edit box.
3043
-
3044
- ### text() » self
3045
-
3046
- Return a string of characters which have been typed into the box.
3047
-
3048
- ### text = a string
3049
-
3050
- Fills the edit box with the characters of `a string`.
3051
-
3052
- ## EditLine
3053
-
3054
- Edit lines are a slender, little box for entering text. While the EditBox is
3055
- multi-line, an edit line is just one. Line, that is. Horizontal, in fact.
3056
- ![man-ele-editline.png](man-ele-editline.png)
3057
-
3058
- The unstyled edit line is 200 pixels wide and 28 pixels wide. Roughly. The
3059
- height may vary on some platforms.
3060
-
3061
- ```ruby
3062
- #!ruby
3063
- Shoes.app do
3064
- stack do
3065
- edit_line
3066
- edit_line width: 400
3067
- end
3068
- end
3069
- ```
3070
-
3071
- You can change the size by styling both the `:width` and the `:height`.
3072
- However, you generally only want to style the `:width`, as the height will be
3073
- sized to fit the font. (And, in current versions of Shoes, the font for edit
3074
- lines and edit boxes cannot be altered anyway.)
3075
-
3076
- If a block is given to an edit line, it receives `change` events. Check out the
3077
- [[EditBox]] page for an example of using a change block. In fact, the edit box
3078
- has all the same methods as an edit line. Also see the list of [[Common]]
3079
- methods, which all elements respond to.
3080
-
3081
- ### change() { |self| ... } » self
3082
-
3083
- Each time a character is added to or removed from the edit line, its `change`
3084
- block is called. The block is given `self`, which is the edit line object which
3085
- has changed.
3086
-
3087
- ### focus() » self
3088
-
3089
- Moves focus to the edit line. The edit line will be highlighted and the user
3090
- will be able to type into the edit line.
3091
-
3092
- ### text() » self
3093
-
3094
- Return a string of characters which have been typed into the box.
3095
-
3096
- ### text = a string
3097
-
3098
- Fills the edit line with the characters of `a string`.
3099
-
3100
- ## Image
3101
-
3102
- An image is a picture in PNG, JPEG or GIF format. Shoes can resize images or
3103
- flow them in with text. Images can be loaded from a file or directly off the
3104
- web. ![man-ele-image.png](man-ele-image.png)
3105
-
3106
- To create an image, use the `image` method in a slot:
3107
-
3108
- ```ruby
3109
- #!ruby
3110
- Shoes.app do
3111
- para "Nice, nice, very nice. Busy, busy, busy."
3112
- image "static/shoes-manual-apps.gif"
3113
- end
3114
- ```
3115
-
3116
- When you load any image into Shoes, it is cached in memory. This means that if
3117
- you load up many image elements from the same file, it'll only really load the
3118
- file once.
3119
-
3120
- You can use web URLs directly as well.
3121
-
3122
- ```ruby
3123
- #!ruby
3124
- Shoes.app do
3125
- image "http://hacketyhack.heroku.com/images/logo.png"
3126
- end
3127
- ```
3128
-
3129
- When an image is loaded from the web, it's cached on the hard drive as well as
3130
- in memory. This prevents a repeat download unless the image has changed. (In
3131
- case you're wondering: Shoes keeps track of modification times and etags just
3132
- like a browser would.)
3133
-
3134
- Shoes also loads remote images in the background using system threads. So,
3135
- using remote images will not block Ruby or any intense graphical displays you
3136
- may have going on.
3137
-
3138
- ### full_height() » a number
3139
-
3140
- The full pixel height of the image. Normally, you can just use the
3141
- [[Common.height]] method to figure out how many pixels high the image is. But
3142
- if you've resized the image or styled it to be larger or something, then
3143
- `height` will return the scaled size.
3144
-
3145
- The `full_height` method gives you the height of image (in pixels) as it was
3146
- stored in the original file.
3147
-
3148
- ### full_width() » a number
3149
-
3150
- The full pixel width of the image. See the [[Image.full_height]] method for an
3151
- explanation of why you might use this method rather than [[Common.width]].
3152
-
3153
- ### path() » a string
3154
-
3155
- The URL or file name of the image.
3156
-
3157
- ### path = a string
3158
-
3159
- Swaps the image with a different one, loaded from a file or URL.
3160
-
3161
- ## ListBox
3162
-
3163
- List boxes (also called "combo boxes" or "drop-down boxes" or "select boxes" in
3164
- some places) are a list of options that drop down when you click on the box.
3165
- ![man-ele-listbox.png](man-ele-listbox.png)
3166
-
3167
- A list box gets its options from an array. An array (a list) of strings,
3168
- passed into the `:items` style.
3169
-
3170
- ```ruby
3171
- #!ruby
3172
- Shoes.app do
3173
- para "Choose a fruit:"
3174
- list_box items: ["Grapes", "Pears", "Apricots"]
3175
- end
3176
- ```
3177
-
3178
- So, the basic size of a list box is about 200 pixels wide and 28 pixels high.
3179
- You can adjust this length using the `:width` style.
3180
-
3181
- ```ruby
3182
- #!ruby
3183
- Shoes.app do
3184
- para "Choose a fruit:"
3185
- list_box items: ["Grapes", "Pears", "Apricots"],
3186
- width: 120, choose: "Apricots" do |list|
3187
- @fruit.text = list.text
3188
- end
3189
-
3190
- @fruit = para "No fruit selected"
3191
- end
3192
- ```
3193
-
3194
- Next to the `:width` style, the example uses another useful option. The
3195
- `:choose` option tells the list box which of the items should be highlighted
3196
- from the beginning. (There's also a [[ListBox.choose]] method for highlighting
3197
- an item after the box is created.)
3198
-
3199
- List boxes also have a [[ListBox.change]] event. In the last example, we've got
3200
- a block hooked up to the list box. Well, okay, see, that's a `change` block.
3201
- The block is called each time someone changes the selected item.
3202
-
3203
- Those are the basics. Might you also be persuaded to look at the [[Common]]
3204
- methods page, a complete list of the methods that all elements have?
3205
-
3206
- ### change() { |self| ... } » self
3207
-
3208
- Whenever someone highlights a new option in the list box (by clicking on an
3209
- item, for instance,) its `change` block is called. The block is given `self`,
3210
- which is the list box object which has changed.
3211
-
3212
- ### choose(item: a string) » self
3213
-
3214
- Selects the option in the list box that matches the string given by `item`.
3215
-
3216
- ### focus() » self
3217
-
3218
- Moves focus to the list box. The list box will be highlighted and, if the user
3219
- hits the up and down arrow keys, other options in the list will be selected.
3220
-
3221
- ### items() » an array of strings
3222
-
3223
- Returns the complete list of strings that the list box presently shows as its options.
3224
-
3225
- ### items = an array of strings
3226
-
3227
- Replaces the list box's options with a new list of strings.
3228
-
3229
- ### text() » a string
3230
-
3231
- A string containing whatever text is shown highlighted in the list box right
3232
- now. If nothing is selected, `nil` will be the reply.
3233
-
3234
- ## Progress
3235
-
3236
- Progress bars show you how far along you are in an activity. Usually, a
3237
- progress bar represents a percentage (from 0% to 100%.) Shoes thinks of
3238
- progress in terms of the decimal numbers 0.0 to 1.0. ![man-ele-progress.png](man-ele-progress.png)
3239
-
3240
- A simple progress bar is 200 pixels wide, but you can use the `:width` style
3241
- (as with all Shoes elements) to lengthen it.
3242
-
3243
- ```ruby
3244
- Shoes.app do
3245
- stack margin: 0.1 do
3246
- title "Progress example"
3247
- @p = progress width: 1.0
3248
-
3249
- animate do |i|
3250
- @p.fraction = (i % 100) / 100.0
3251
- end
3252
- end
3253
- end
3254
- ```
3255
-
3256
- Take a look at the [[Common]] methods page for a list of methods found an all
3257
- elements, including progress bars.
3258
-
3259
- ### fraction() » a decimal number
3260
-
3261
- Returns a decimal number from 0.0 to 1.0, indicating how far along the progress bar is.
3262
-
3263
- ### fraction = a decimal number
3264
-
3265
- Sets the progress to a decimal number between 0.0 and 1.0.
3266
-
3267
- ## Radio
3268
-
3269
- Radio buttons are a group of clickable circles. Click a circle and it'll be
3270
- marked. Only one radio button can be marked at a time. (This is similar to the
3271
- ListBox, where only one option can be selected at a time.) ![man-ele-radio.png](man-ele-radio.png)
3272
-
3273
- So, how do you decide when to use radio buttons and when to use list boxes?
3274
- Well, list boxes only show one highlighted item unless you click on the box and
3275
- the drop-down appears. But radio buttons are all shown, regardless of which is
3276
- marked.
3277
-
3278
- ```ruby
3279
- #!ruby
3280
- Shoes.app do
3281
- para "Among these films, which do you prefer?\n"
3282
- radio; para strong("The Taste of Tea"), " by Katsuhito Ishii\n"
3283
- radio; para strong("Kin-Dza-Dza"), " by Georgi Danelia\n"
3284
- radio; para strong("Children of Heaven"), " by Majid Majidi\n"
3285
- end
3286
- ```
3287
-
3288
- Only one of these three radios can be checked at a time, since they are grouped
3289
- together in the same slot (along with a bunch of `para`.)
3290
-
3291
- If we move them each into their own slot, the example breaks.
3292
-
3293
- ```ruby
3294
- #!ruby
3295
- Shoes.app do
3296
- stack do
3297
- para "Among these films, which do you prefer?"
3298
- flow { radio; para "The Taste of Tea by Katsuhito Ishii" }
3299
- flow { radio; para "Kin-Dza-Dza by Georgi Danelia" }
3300
- flow { radio; para "Children of Heaven by Majid Majidi" }
3301
- end
3302
- end
3303
- ```
3304
-
3305
- This can be fixed, though. You can group together radios from different slots,
3306
- you just have to give them all the same group name.
3307
-
3308
- Here, let's group all these radios in the `:films` group.
3309
-
3310
- ```ruby
3311
- #!ruby
3312
- Shoes.app do
3313
- stack do
3314
- para "Among these films, which do you prefer?"
3315
- flow do
3316
- radio :films
3317
- para "The Taste of Tea by Katsuhito Ishii"
3318
- end
3319
- flow do
3320
- radio :films
3321
- para "Kin-Dza-Dza by Georgi Danelia"
3322
- end
3323
- flow do
3324
- radio :films
3325
- para "Children of Heaven by Majid Majidi"
3326
- end
3327
- end
3328
- end
3329
- ```
3330
-
3331
- For more methods beyond those listed below, also look into the [[Common]]
3332
- methods page. Because you get those methods on every radio as well.
3333
-
3334
- ### checked?() » true or false
3335
-
3336
- Returns whether the radio button is checked or not. So, `true` means "yes, it
3337
- is checked!"
3338
-
3339
- ### checked = true or false
3340
-
3341
- Marks or unmarks the radio button. Using `checked = false`, for instance,
3342
- clears the radio.
3343
-
3344
- ### click() { |self| ... } » self
3345
-
3346
- When the radio button is clicked, its `click` block is called. The block is
3347
- handed `self`, which is an object representing the radio which was clicked.
3348
-
3349
- Clicks are sent for both marking and unmarking the radio.
3350
-
3351
- ### focus() » self
3352
-
3353
- Moves focus to the radio. The radio will be highlighted and, if the user hits
3354
- Enter, the radio will be toggled between its marked and unmarked states.
3355
-
3356
- ## Shape
3357
-
3358
- A shape is a path outline usually created by drawing methods like `oval` and
3359
- `rect`. ![man-ele-shape.png](man-ele-shape.png)
3360
-
3361
- See the [[Common]] methods page. Shapes respond to all of those methods.
3362
-
3363
- ## TextBlock
3364
-
3365
- The TextBlock object represents a group of text organized as a single element.
3366
- A paragraph containing bolded text, for example. A caption containing links and
3367
- bolded text. (So, a `caption` is a TextBlock type. However, `link` and
3368
- `strong` are TextClass types.) ![man-ele-textblock.png](man-ele-textblock.png)
3369
-
3370
- All of the various types of TextBlock are found on the [[Element Element
3371
- Creation]] page.
3372
-
3373
- * [[Element.banner]], a 48 pixel font.
3374
- * [[Element.title]], a 34 pixel font.
3375
- * [[Element.subtitle]], a 26 pixel font.
3376
- * [[Element.tagline]], an 18 pixel font.
3377
- * [[Element.caption]], a 14 pixel font.
3378
- * [[Element.para]], a 12 pixel font.
3379
- * [[Element.inscription]], a 10 pixel font.
3380
-
3381
- ### contents() » an array of elements
3382
-
3383
- Lists all of the strings and styled text objects inside this block.
3384
-
3385
- ### replace(a string)
3386
-
3387
- Replaces the text of the entire block with the characters of `a string`.
3388
-
3389
- ### text() » a string
3390
-
3391
- Return a string of all of the characters in this text box. This will strip off
3392
- any style or text classes and just return the actual characters, as if seen on
3393
- the screen.
3394
-
3395
- ### text = a string
3396
-
3397
- Replaces the text of the entire block with the characters of `a string`.
3398
-
3399
- ### to_s() » a string
3400
-
3401
- An alias for [[TextBlock.text]]. Returns a flattened string of all of this
3402
- TextBlock's contents.
3403
-
3404
- ## Timers
3405
-
3406
- Shoes contains three timer classes: the Animation class, the Every class and
3407
- the Timer class. Both Animations and Everies loop over and over after they
3408
- start. Timers happen once. A one-shot timer.
3409
-
3410
- Animations and Everies are basically the same thing. The difference is that
3411
- Animations usually happen many, many times per second. And Everies happen only
3412
- once every few seconds or rarely.
3413
-
3414
- ### start() » self
3415
-
3416
- Both types of timers automatically start themselves, so there's no need to use
3417
- this normally. But if you [[Timers.stop]] a timer and would like to start it up
3418
- again, then by all means: use this!
3419
-
3420
- ### stop() » self
3421
-
3422
- Pauses the animation or timer. In the case of a one-shot timer that's already
3423
- happened, it's already stopped and this method will have no effect.
3424
-
3425
- ### toggle() » self
3426
-
3427
- If the animation or timer is stopped, it is started. Otherwise, if it is
3428
- already running, it is stopped.
3429
-
3430
- ## Video
3431
-
3432
- Shoes supports embedding of QuickTime, Flash video (FLV), DivX, Xvid and
3433
- various other popular video formats. This is all thanks to VideoLAN and ffmpeg,
3434
- two sensational open source libraries. Use the `video` method on a slot to
3435
- setup a Shoes::Video object. ![man-ele-video.png](man-ele-video.png)
3436
-
3437
- In addition to video formats, some audio formats are also supported, such as
3438
- MP3, WAV and Ogg Vorbis.
3439
-
3440
- Video support is optional in Shoes and some builds do not support video. For
3441
- example, video support is unavailable for PowerPC. When you download Shoes, the
3442
- build for your platform will be marked `novideo` in the filename if no video
3443
- support is available.
3444
-
3445
- ### hide() » self
3446
-
3447
- Hides the video. If already playing, the video will continue to play. This just
3448
- turns off display of the video. One possible use of this method is to collapse
3449
- the video area when it is playing an audio file, such as an MP3.
3450
-
3451
- ### length() » a number
3452
-
3453
- The full length of the video in milliseconds. Returns nil if the video is not
3454
- yet loaded.
3455
-
3456
- ### move(left, top) » self
3457
-
3458
- Moves the video to specific coordinates, the (left, top) being the upper left
3459
- hand corner of the video.
3460
-
3461
- ### pause() » self
3462
-
3463
- Pauses the video, if it is playing.
3464
-
3465
- ### playing?() » true of false
3466
-
3467
- Returns true if the video is currently playing. Or, false if the video is
3468
- paused or stopped.
3469
-
3470
- ### play() » self
3471
-
3472
- Starts playing the video, if it isn't already playing. If already playing, the
3473
- video is restarted from the beginning.
3474
-
3475
- ### position() » a decimal
3476
-
3477
- The position of the video as a decimanl number (a Float) between the beginning
3478
- (0.0) and the end (1.0). For instance, a Float value of 0.5 indicates the
3479
- halfway point of the video.
3480
-
3481
- ### position = a decimal
3482
-
3483
- Sets the position of the video using a Float value. To move the video to its
3484
- 25% position: `@video.position = 0.25`.
3485
-
3486
- ### remove() » self
3487
-
3488
- Removes the video from its slot. This will stop the video as well.
3489
-
3490
- ### show() » self
3491
-
3492
- Reveals the video, if it has been hidden by the `hide()` method.
3493
-
3494
- ### stop() » self
3495
-
3496
- Stops the video, if it is playing.
3497
-
3498
- ### time() » a number
3499
-
3500
- The time position of the video in milliseconds. So, if the video is 10 seconds
3501
- into play, this method would return the number 10000.
3502
-
3503
- ### time = a number
3504
-
3505
- Set the position of the video to a time in milliseconds.
3506
-
3507
- ### toggle() » self
3508
-
3509
- Toggles the visibility of the video. If the video can be seen, then `hide` is
3510
- called. Otherwise, `show` is called.
3511
-
3512
- # AndSoForth
3513
-
3514
- A place for some other information.
3515
-
3516
- ## Sample Apps
3517
-
3518
- Have fun!
3519
-
3520
- {SAMPLES}
3521
-
3522
- ## FAQ
3523
-
3524
- Hope this helps:
3525
-
3526
- * You can join [Shoes ML](http://librelist.com/browser/shoes/) and feel free ask your questions.
3527
- * [Official Current Source Code](http://github.com/shoes/shoes/) is on GitHub.
3528
- * [Wiki](https://github.com/shoes/shoes/wiki) for Shoes general info.