lacci 0.2.1 → 0.3.0

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