Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit fe86a81c9b1af4e14cfd6fad6be72bb6d7252ce2 @ashbb committed Oct 26, 2008
Showing with 2,867 additions and 0 deletions.
  1. +77 −0 README.mdown
  2. +20 −0 html/README.txt
  3. BIN images/cy.png
  4. BIN images/footracer_screenshot.jpg
  5. BIN images/jellybeans.jpg
  6. BIN images/kamome.png
  7. BIN images/loogink.png
  8. BIN images/sample1.png
  9. BIN images/sample10.png
  10. BIN images/sample11.png
  11. BIN images/sample12.png
  12. BIN images/sample13.png
  13. BIN images/sample15.png
  14. BIN images/sample16.png
  15. BIN images/sample19-1.png
  16. BIN images/sample19.png
  17. BIN images/sample2.png
  18. BIN images/sample20.png
  19. BIN images/sample21.png
  20. BIN images/sample22.png
  21. BIN images/sample23-1.png
  22. BIN images/sample23.png
  23. BIN images/sample24.png
  24. BIN images/sample25.png
  25. BIN images/sample26.png
  26. BIN images/sample27.png
  27. BIN images/sample28.png
  28. BIN images/sample3.png
  29. BIN images/sample30.png
  30. BIN images/sample31.png
  31. BIN images/sample32.png
  32. BIN images/sample33.png
  33. BIN images/sample34-1.png
  34. BIN images/sample34.png
  35. BIN images/sample35-1.png
  36. BIN images/sample35.png
  37. BIN images/sample36.png
  38. BIN images/sample37.png
  39. BIN images/sample38.png
  40. BIN images/sample39.png
  41. BIN images/sample4.png
  42. BIN images/sample40-1.png
  43. BIN images/sample40.png
  44. BIN images/sample41.png
  45. BIN images/sample42.png
  46. BIN images/sample43.png
  47. BIN images/sample5.png
  48. BIN images/sample6.png
  49. BIN images/sample7-1.png
  50. BIN images/sample7.png
  51. BIN images/sample8.png
  52. BIN images/sample9.png
  53. BIN images/sample91.png
  54. BIN images/sample92.png
  55. BIN images/sample93.png
  56. BIN images/shaha.png
  57. BIN images/shoes_console.png
  58. BIN images/shoes_download_test.png
  59. BIN images/shoes_gem.png
  60. BIN images/shoes_help.png
  61. BIN images/shoes_manual-html.png
  62. BIN images/shoes_manual-html2.png
  63. BIN images/shoes_package.png
  64. BIN images/shoes_shy-1.png
  65. BIN images/shoes_shy.png
  66. BIN images/shoes_version.png
  67. BIN images/simple-slide.png
  68. BIN images/twitter_listener_snapshot.png
  69. BIN images/yar.png
  70. +8 −0 mdowns/00100_Introduction.mdown
  71. +6 −0 mdowns/00200_Download_Shoes.mdown
  72. +6 −0 mdowns/00300_First_step.mdown
  73. +8 −0 mdowns/00401_Concept.mdown
  74. +45 −0 mdowns/00402_No.1_para.mdown
  75. +61 −0 mdowns/00403_No.2_3_stack_and_flow.mdown
  76. +21 −0 mdowns/00404_No.4_button.mdown
  77. +15 −0 mdowns/00405_No.5_image.mdown
  78. +35 −0 mdowns/00406_No.6_edit_line.mdown
  79. +15 −0 mdowns/00407_No.7_link.mdown
  80. +34 −0 mdowns/00408_No.8_background.mdown
  81. +39 −0 mdowns/00409_No.9_Shoes.url.mdown
  82. +45 −0 mdowns/00410_No.10_clear.mdown
  83. +24 −0 mdowns/00501_Open_Shoes_built-in_manual_and_Shoes_console_window.mdown
  84. +17 −0 mdowns/00502_Output_messages_on_the_Shoes_console_window.mdown
  85. +66 −0 mdowns/00503_shoes_--help.mdown
  86. +44 −0 mdowns/00504_App_object_and_coding_style.mdown
  87. +13 −0 mdowns/00505_Built-in_Constants_and_methods.mdown
  88. +38 −0 mdowns/00506_Scope__A_tip_of_using_the_YAML_file.mdown
  89. +63 −0 mdowns/00507_keypress,_mouse_and_clipboard.mdown
  90. +35 −0 mdowns/00508_the_Widget_class.mdown
  91. +31 −0 mdowns/00509_shape.mdown
  92. +30 −0 mdowns/00510_mask.mdown
  93. +37 −0 mdowns/00511_Drawing_directly_on_to_images.mdown
  94. +42 −0 mdowns/00512_Style.mdown
  95. +23 −0 mdowns/00513_Shoes.setup.mdown
  96. +30 −0 mdowns/00514_Downloader.mdown
  97. +32 −0 mdowns/00515_Assign_Shoes_URL_dynamically.mdown
  98. +26 −0 mdowns/00516_Classes_List_and_Colors_List.mdown
  99. +30 −0 mdowns/00517_start,_stop_and_restart.mdown
  100. +151 −0 mdowns/00518_Combination_of_image_objects_show_hide_and_mouse_hover_leave.mdown
  101. +37 −0 mdowns/00519_arc_and_cap.mdown
  102. +31 −0 mdowns/00520_widget_with_block.mdown
  103. +43 −0 mdowns/00521_text_message_slide-in.mdown
  104. +25 −0 mdowns/00522____shoes.mdown
  105. +98 −0 mdowns/00523_loading_widgets_from_other_files_.mdown
  106. +70 −0 mdowns/00524_optional_arguments.mdown
  107. +20 −0 mdowns/00525_slot_with_scrollbar.mdown
  108. +33 −0 mdowns/00526_The__state_style.mdown
  109. +30 −0 mdowns/00527_Shoes__FONTS_and_External_Fonts.mdown
  110. +13 −0 mdowns/00601_External_Fonts.mdown
  111. +7 −0 mdowns/00602_Locking_edit_box.mdown
  112. +7 −0 mdowns/00603_Styling_Master_List.mdown
  113. +21 −0 mdowns/00701_Assignment_1_twitter_client__reader_.mdown
  114. +19 −0 mdowns/00702_Assignment_2_footracer.mdown
  115. +15 −0 mdowns/00800_Relevant_web_sites__Links_.mdown
  116. +44 −0 mdowns/00900_Appendix.mdown
  117. +144 −0 mdowns/01000_Trivia.mdown
  118. +7 −0 src/gangs.yml
  119. +14 −0 src/make_sample19_yaml.rb
  120. +8 −0 src/sample1.rb
  121. +4 −0 src/sample10.rb
  122. +28 −0 src/sample11.rb
  123. +13 −0 src/sample12.rb
  124. +19 −0 src/sample13.rb
  125. +4 −0 src/sample14.rb
  126. +8 −0 src/sample15.rb
  127. +5 −0 src/sample16.rb
  128. +10 −0 src/sample17.rb
  129. +10 −0 src/sample18.rb
  130. +8 −0 src/sample19-1.rb
  131. +8 −0 src/sample19.rb
  132. +9 −0 src/sample2.rb
  133. +16 −0 src/sample20.rb
  134. +5 −0 src/sample21.rb
  135. +25 −0 src/sample22.rb
  136. +10 −0 src/sample23.rb
  137. +18 −0 src/sample24.rb
  138. +22 −0 src/sample25.rb
  139. +31 −0 src/sample26.rb
  140. +8 −0 src/sample27.rb
  141. +17 −0 src/sample28.rb
  142. +22 −0 src/sample29.rb
  143. +12 −0 src/sample3.rb
  144. +11 −0 src/sample30.rb
  145. +21 −0 src/sample31.rb
  146. +31 −0 src/sample32.rb
  147. +30 −0 src/sample33.rb
  148. +50 −0 src/sample34-1.rb
  149. +48 −0 src/sample34.rb
  150. +14 −0 src/sample35.rb
  151. +22 −0 src/sample36.rb
  152. +28 −0 src/sample37.rb
  153. +3 −0 src/sample38-1.rb
  154. +6 −0 src/sample38.rb
  155. +21 −0 src/sample39.rb
  156. +61 −0 src/sample39_creature.rb
  157. +29 −0 src/sample4.rb
  158. +30 −0 src/sample40-1.rb
  159. +11 −0 src/sample40.rb
  160. +11 −0 src/sample41.rb
  161. +24 −0 src/sample42.rb
  162. +12 −0 src/sample43.rb
  163. +6 −0 src/sample5.rb
  164. +5 −0 src/sample6.rb
  165. +7 −0 src/sample7-1.rb
  166. +10 −0 src/sample7.rb
  167. +6 −0 src/sample8.rb
  168. +9 −0 src/sample9.rb
  169. +6 −0 src/sample91.rb
  170. +15 −0 src/sample92.rb
  171. +23 −0 src/sample93.rb
  172. +25 −0 tools/mkhtml.rb
  173. +50 −0 tools/mkmdown.rb
  174. +77 −0 tools/table_of_contents.txt
@@ -0,0 +1,77 @@
+Shoes Tutorial Note
+===================
+**- For the Shoes App Rookie Creators -**
+
+October 26th, 2008 by ashbb (Satoshi Asakawa)
+
+Table of contents
+-----------------
+1. [Introduction](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00100_Introduction.mdown)
+2. [Download Shoes](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00200_Download_Shoes.mdown)
+3. [First step](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00300_First_step.mdown)
+4. Birds-eye view (Survey basic features)
+ - [Concept](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00401_Concept.mdown)
+ - [No.1 para](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00402_No.1_para.mdown)
+ - [No.2&3 stack and flow](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00403_No.2_3_stack_and_flow.mdown)
+ - [No.4 button](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00404_No.4_button.mdown)
+ - [No.5 image](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00405_No.5_image.mdown)
+ - [No.6 edit_line](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00406_No.6_edit_line.mdown)
+ - [No.7 link](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00407_No.7_link.mdown)
+ - [No.8 background](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00408_No.8_background.mdown)
+ - [No.9 Shoes.url](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00409_No.9_Shoes.url.mdown)
+ - [No.10 clear](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00410_No.10_clear.mdown)
+5. Tips for creating our original Shoes apps
+ - [Open Shoes built-in manual and Shoes console window](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00501_Open_Shoes_built-in_manual_and_Shoes_console_window.mdown)
+ - [Output messages on the Shoes console window](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00502_Output_messages_on_the_Shoes_console_window.mdown)
+ - [shoes --help](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00503_shoes_--help.mdown)
+ - [App object and coding style](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00504_App_object_and_coding_style.mdown)
+ - [Built-in Constants and methods](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00505_Built-in_Constants_and_methods.mdown)
+ - [Scope: A tip of using the YAML file](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00506_Scope__A_tip_of_using_the_YAML_file.mdown)
+ - [keypress, mouse and clipboard](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00507_keypress,_mouse_and_clipboard.mdown)
+ - [the Widget class](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00508_the_Widget_class.mdown)
+ - [shape](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00509_shape.mdown)
+ - [mask](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00510_mask.mdown)
+ - [Drawing directly on to images](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00511_Drawing_directly_on_to_images.mdown)
+ - [Style](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00512_Style.mdown)
+ - [Shoes.setup](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00513_Shoes.setup.mdown)
+ - [Downloader](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00514_Downloader.mdown)
+ - [Assign Shoes URL dynamically](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00515_Assign_Shoes_URL_dynamically.mdown)
+ - [Classes List and Colors List](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00516_Classes_List_and_Colors_List.mdown)
+ - [start, stop and restart](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00517_start,_stop_and_restart.mdown)
+ - [Combination of image objects show/hide and mouse hover/leave](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00518_Combination_of_image_objects_show_hide_and_mouse_hover_leave.mdown)
+ - [arc and cap](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00519_arc_and_cap.mdown)
+ - [widget with block](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00520_widget_with_block.mdown)
+ - [text message slide-in](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00521_text_message_slide-in.mdown)
+ - [#! shoes](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00522____shoes.mdown)
+ - [loading widgets from other files?](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00523_loading_widgets_from_other_files_.mdown)
+ - [optional arguments](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00524_optional_arguments.mdown)
+ - [slot with scrollbar](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00525_slot_with_scrollbar.mdown)
+ - [The :state style](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00526_The__state_style.mdown)
+ - [Shoes::FONTS and External Fonts](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00527_Shoes__FONTS_and_External_Fonts.mdown)
+6. Hot Topics in the Shoes ML and Shoooes.net
+ - [External Fonts](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00601_External_Fonts.mdown)
+ - [Locking edit_box](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00602_Locking_edit_box.mdown)
+ - [Styling Master List](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00603_Styling_Master_List.mdown)
+7. Assignment
+ - [Assignment 1 twitter client (reader)](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00701_Assignment_1_twitter_client__reader_.mdown)
+ - [Assignment 2 footracer](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00702_Assignment_2_footracer.mdown)
+8. [Relevant web sites (Links)](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00800_Relevant_web_sites__Links_.mdown)
+9. [Appendix](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/00900_Appendix.mdown)
+10. [Trivia](http://github.com/ashbb/shoes_tutorial_html/tree/master/mdowns/01000_Trivia.mdown)
+
+Change log:
+-----------
+Oct 26th, 2008: Modified sample 8, changed the path of image.
+Oct 24th, 2008: Revised tools and modified .mdown files for the easy eBook maker.<br>
+Oct 23th, 2008: Added a new sample 43.
+
+To do list:
+-----------
+Under consideration, now. :)
+
+Let's enjoy Ruby and Shoes programming!!
+----------------------------------------
+:-D
+
+ashbb
+
@@ -0,0 +1,20 @@
+This subdirectory is used to store .html files created by the tool: mkhtml.rb
+
+Run the following command line on the console (terminal) window.
+
+ C:\> ruby mkhtml.rb
+
+Then it'll create .html files here.
+
+You can read whole Shoes Tutorial Note offline.
+And you can run whole sample apps with Shoes, too. :-D
+
+ashbb
+
+ps. mkhtml.rb uses BlueCloth
+
+ C:\> gem install BlueCloth
+
+
+
+
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
@@ -0,0 +1,8 @@
+Introduction
+------------
+
+Shoes is a cross-platform tiny graphics and windowing toolkit for the Ruby programming language written by [_why](http://en.wikipedia.org/wiki/Why_the_lucky_stiff).
+
+All sample programs and data files in this tutorial are able to download from [here](http://github.com/ashbb/shoes_tutorial/tree/master).
+
+Some sample programs are the same in the NKS (The first public manual of Shoes. See chapter 8.)
@@ -0,0 +1,6 @@
+Download Shoes
+--------------
+
+Download Shoes from [this web site](http://shoooes.net/downloads/) and pick [the installer](http://help.shoooes.net/Introducing.html).
+
+We use the latest revision, **Shoes-0.r1057**, in this tutorial.
@@ -0,0 +1,6 @@
+First step
+----------
+
+There is [a tutorial written by _why](http://shoooes.net/tutorial/).
+
+Now, copy and paste the whole 16 sample programs and run one by one. No need to understand the code meaning. Just run and look at the app window. This tutorial has screenshots, but be sure to run all 16 samples. Not later. Do it now, before going to the next, please. This is the most important step, I believe.
@@ -0,0 +1,8 @@
+Birds-eye view (Survey basic features)
+--------------------------------------
+
+Concept
+-------
+
+Shoes is a tiny graphics toolkit. It's simple and was born to be easy! So, Shoes doesn't have many elements (like tabbed controls, toolbars, horizontal scrollbars.) But can be simulated with images.
+**There are ten essential methods to get going with Shoes.**
@@ -0,0 +1,45 @@
+No.1 para
+---------
+
+banner : Charactor size 48 pixels <br>
+title : 34 <br>
+subtitle : 26 <br>
+tagline : 18 <br>
+caption : 14 <br>
+para (paragraph) : 12 <br>
+inscription : 10 <br>
+
+ # sample1.rb
+ Shoes.app :width => 230, :height => 80 do
+ para 'Testing, test, test. ',
+ 'Breadsticks. ',
+ 'Breadsticks. ',
+ 'Breadsticks. ',
+ 'Very good.'
+ end
+
+**sample1.png**
+
+![sample1.png](http://github.com/ashbb/shoes_tutorial_html/tree/master%2Fimages%2Fsample1.png?raw=true)
+
+
+strong : bold <br>
+em (emphasized) : italics <br>
+code : monospeced font <br>
+ins (inserted) : single underline <br>
+sub (subscript) : lowering the text by 10 pixels, x-small font <br>
+
+ # sample2.rb
+ Shoes.app :width => 240, :height => 95 do
+ para 'Testing, test, test. ',
+ strong('Breadsticks. '),
+ em('Breadsticks. '),
+ code('Breadsticks. '),
+ strong(ins('EVEN BETTER.')),
+ sub('fine!')
+ end
+
+**sample2.png**
+
+![sample2.png](http://github.com/ashbb/shoes_tutorial_html/tree/master%2Fimages%2Fsample2.png?raw=true)
+
@@ -0,0 +1,61 @@
+No.2&3 stack and flow
+---------------------
+
+At first, read the following web page:
+[http://github.com/why/shoes/wikis/stacksandflows](http://github.com/why/shoes/wikis/stacksandflows)
+
+But use (run) the following sample code instead of the one on the above web page. Because the method Shoes#text is obsolete and need to correct the path of image file.
+
+ # sample3.rb
+ Shoes.app do
+ stack do
+ image "http://hackety.org/images/hackety-org-header.png"
+ end
+ stack :width => 200 do
+ para "column 1"
+ end
+ stack :width => -200 do
+ para "column 2"
+ end
+ end
+
+**sample3.png**
+
+![sample3.png](http://github.com/ashbb/shoes_tutorial_html/tree/master%2Fimages%2Fsample3.png?raw=true)
+
+More complex sample code is:
+
+ # sample4.rb
+ Shoes.app :width => 250, :height => 150 do
+ background gray
+ flow :width => "90%" do
+ background brown
+
+ flow :width => "70%" do
+ background purple
+ stack do
+ background green
+ para "stack 0"
+ end
+ stack :width => "30%" do
+ background red
+ para "stack 1"
+ end
+ stack :width => "-30%" do
+ background blue
+ para "stack 2"
+ end
+ end
+
+ stack :width => "20%" do
+ background yellow
+ para "stack 3"
+ end
+ end
+ end
+
+
+**sample4.png**
+
+![sample4.png](http://github.com/ashbb/shoes_tutorial_html/tree/master%2Fimages%2Fsample4.png?raw=true)
+
@@ -0,0 +1,21 @@
+No.4 button
+-----------
+
+button("Press Me") <br>
+which creates a new button and <br>
+button("Press Me"){ alert("clicked")} <br>
+how the block fires when clicked and <br>
+button("Press Me", :left => 50, :top => 20) <br>
+will place the button at coordinates (50, 20). <br>
+That's it.
+
+ # sample5.rb
+ Shoes.app :width => 200, :height => 50 do
+ button("Press Me", :left => 50, :top => 20) do
+ alert("clicked")
+ end
+ end
+
+**sample5.png**
+
+![sample5.png](http://github.com/ashbb/shoes_tutorial_html/tree/master%2Fimages%2Fsample5.png?raw=true)
@@ -0,0 +1,15 @@
+No.5 image
+----------
+
+An image is a picture in PNG, JPEG or GIF format.
+We can use the directory path and URL.
+
+ # sample6.rb
+ Shoes.app :width => 680, :height => 460 do
+ image '../images/loogink.png'
+ image "http://hacketyhack.net/images/design/Hacky-Mouse-Hand.png"
+ end
+
+**sample6.png**
+
+![sample6.png](http://github.com/ashbb/shoes_tutorial_html/tree/master%2Fimages%2Fsample6.png?raw=true)
@@ -0,0 +1,35 @@
+No.6 edit_line
+--------------
+
+
+Edit boxes are wide, rectangular boxes for entering text.
+Edit lines are a slender, little box for entering text.
+
+ # sample7.rb
+ Shoes.app :width => 250, :height => 300 do
+ stack do
+ @msg = para 'Hello'
+ @el = edit_line "We love Ruby."
+ button('ok'){ @msg.text = @el.text}
+ @eb = edit_box "We love Shoes."
+ button('ok'){ @msg.text = @eb.text}
+ end
+ end
+
+**sample7.png**
+
+![sample7.png](http://github.com/ashbb/shoes_tutorial_html/tree/master%2Fimages%2Fsample7.png?raw=true)
+
+We can use :secret in the edit_line area.
+
+ # sample7-1.rb
+ Shoes.app :width => 235, :height => 80 do
+ para 'password: '
+ @el = edit_line :width => 100, :secret => true
+ button('ok'){@input.replace em(@el.text)}
+ @input = para ''
+ end
+
+**sample7-1.png**
+
+![sample7-1.png](http://github.com/ashbb/shoes_tutorial_html/tree/master%2Fimages%2Fsample7-1.png?raw=true)
@@ -0,0 +1,15 @@
+No.7 link
+---------
+
+Hyperlinks. We have three way to write the links.
+
+ # sample8.rb
+ Shoes.app :width => 250, :height => 60 do
+ para link('RubyLearning.org'){visit "http://www.rubylearning.org/"}
+ para link('Google', :click => "http://google.com")
+ image '../images/loogink.png', :click => "http://shoooes.net/"
+ end
+
+**sample8.png**
+
+![sample8.png](http://github.com/ashbb/shoes_tutorial_html/tree/master%2Fimages%2Fsample8.png?raw=true)
@@ -0,0 +1,34 @@
+No.8 background
+---------------
+
+Backgrounds and borders are both just patterns.
+They are actual elements, not styles.
+A pattern is made with a color, a gradient or an image.
+
+ # sample9.rb
+ Shoes.app :width => 200, :height => 140 do
+ background '#FF9900'
+ background rgb(192, 128, 0), :left => 40
+ background gray(0.6), :left => 80
+ background red, :left => 120
+ background '#FAD'..'#ADD', :left => 160
+ border '../images/loogink.png', :strokewidth => 15
+ end
+
+**sample9.png**
+
+![sample9.png](http://github.com/ashbb/shoes_tutorial_html/tree/master%2Fimages%2Fsample9.png?raw=true)
+
+In NKS(Nobody Knows Shoes), just give the background a radius. <br>
+Background blue, :radius => 12 <br>
+But it is obsolete. Now we can use :curve instead of :radius. And can also use :angle for gradient. <br>
+
+ # sample10.rb
+ Shoes.app :width => 200, :height => 70 do
+ background "#D0A"..darkorange.to_s, :angle => 45, :curve => 30
+ end
+
+**sample10.png**
+
+![sample10.png](http://github.com/ashbb/shoes_tutorial_html/tree/master%2Fimages%2Fsample10.png?raw=true)
+
Oops, something went wrong.

0 comments on commit fe86a81

Please sign in to comment.