first commit

ashbb · Oct 26, 2008 · fe86a81 · fe86a81
commit fe86a81
Show file tree

Hide file tree

Showing 174 changed files with 2,867 additions and 0 deletions.
diff --git a/README.mdown b/README.mdown
@@ -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
+
diff --git a/html/README.txt b/html/README.txt
@@ -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
+
+
+
+
diff --git a/images/cy.png b/images/cy.png
diff --git a/images/footracer_screenshot.jpg b/images/footracer_screenshot.jpg
diff --git a/images/jellybeans.jpg b/images/jellybeans.jpg
diff --git a/images/kamome.png b/images/kamome.png
diff --git a/images/loogink.png b/images/loogink.png
diff --git a/images/sample1.png b/images/sample1.png
diff --git a/images/sample10.png b/images/sample10.png
diff --git a/images/sample11.png b/images/sample11.png
diff --git a/images/sample12.png b/images/sample12.png
diff --git a/images/sample13.png b/images/sample13.png
diff --git a/images/sample15.png b/images/sample15.png
diff --git a/images/sample16.png b/images/sample16.png
diff --git a/images/sample19-1.png b/images/sample19-1.png
diff --git a/images/sample19.png b/images/sample19.png
diff --git a/images/sample2.png b/images/sample2.png
diff --git a/images/sample20.png b/images/sample20.png
diff --git a/images/sample21.png b/images/sample21.png
diff --git a/images/sample22.png b/images/sample22.png
diff --git a/images/sample23-1.png b/images/sample23-1.png
diff --git a/images/sample23.png b/images/sample23.png
diff --git a/images/sample24.png b/images/sample24.png
diff --git a/images/sample25.png b/images/sample25.png
diff --git a/images/sample26.png b/images/sample26.png
diff --git a/images/sample27.png b/images/sample27.png
diff --git a/images/sample28.png b/images/sample28.png
diff --git a/images/sample3.png b/images/sample3.png
diff --git a/images/sample30.png b/images/sample30.png
diff --git a/images/sample31.png b/images/sample31.png
diff --git a/images/sample32.png b/images/sample32.png
diff --git a/images/sample33.png b/images/sample33.png
diff --git a/images/sample34-1.png b/images/sample34-1.png
diff --git a/images/sample34.png b/images/sample34.png
diff --git a/images/sample35-1.png b/images/sample35-1.png
diff --git a/images/sample35.png b/images/sample35.png
diff --git a/images/sample36.png b/images/sample36.png
diff --git a/images/sample37.png b/images/sample37.png
diff --git a/images/sample38.png b/images/sample38.png
diff --git a/images/sample39.png b/images/sample39.png
diff --git a/images/sample4.png b/images/sample4.png
diff --git a/images/sample40-1.png b/images/sample40-1.png
diff --git a/images/sample40.png b/images/sample40.png
diff --git a/images/sample41.png b/images/sample41.png
diff --git a/images/sample42.png b/images/sample42.png
diff --git a/images/sample43.png b/images/sample43.png
diff --git a/images/sample5.png b/images/sample5.png
diff --git a/images/sample6.png b/images/sample6.png
diff --git a/images/sample7-1.png b/images/sample7-1.png
diff --git a/images/sample7.png b/images/sample7.png
diff --git a/images/sample8.png b/images/sample8.png
diff --git a/images/sample9.png b/images/sample9.png
diff --git a/images/sample91.png b/images/sample91.png
diff --git a/images/sample92.png b/images/sample92.png
diff --git a/images/sample93.png b/images/sample93.png
diff --git a/images/shaha.png b/images/shaha.png
diff --git a/images/shoes_console.png b/images/shoes_console.png
diff --git a/images/shoes_download_test.png b/images/shoes_download_test.png
diff --git a/images/shoes_gem.png b/images/shoes_gem.png
diff --git a/images/shoes_help.png b/images/shoes_help.png
diff --git a/images/shoes_manual-html.png b/images/shoes_manual-html.png
diff --git a/images/shoes_manual-html2.png b/images/shoes_manual-html2.png
diff --git a/images/shoes_package.png b/images/shoes_package.png
diff --git a/images/shoes_shy-1.png b/images/shoes_shy-1.png
diff --git a/images/shoes_shy.png b/images/shoes_shy.png
diff --git a/images/shoes_version.png b/images/shoes_version.png
diff --git a/images/simple-slide.png b/images/simple-slide.png
diff --git a/images/twitter_listener_snapshot.png b/images/twitter_listener_snapshot.png
diff --git a/images/yar.png b/images/yar.png
diff --git a/mdowns/00100_Introduction.mdown b/mdowns/00100_Introduction.mdown
@@ -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.) 
diff --git a/mdowns/00200_Download_Shoes.mdown b/mdowns/00200_Download_Shoes.mdown
@@ -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.
diff --git a/mdowns/00300_First_step.mdown b/mdowns/00300_First_step.mdown
@@ -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.
diff --git a/mdowns/00401_Concept.mdown b/mdowns/00401_Concept.mdown
@@ -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.**
diff --git a/mdowns/00402_No.1_para.mdown b/mdowns/00402_No.1_para.mdown
@@ -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)
+
diff --git a/mdowns/00403_No.2_3_stack_and_flow.mdown b/mdowns/00403_No.2_3_stack_and_flow.mdown
@@ -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)
+
diff --git a/mdowns/00404_No.4_button.mdown b/mdowns/00404_No.4_button.mdown
@@ -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)
diff --git a/mdowns/00405_No.5_image.mdown b/mdowns/00405_No.5_image.mdown
@@ -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)
diff --git a/mdowns/00406_No.6_edit_line.mdown b/mdowns/00406_No.6_edit_line.mdown
@@ -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)
diff --git a/mdowns/00407_No.7_link.mdown b/mdowns/00407_No.7_link.mdown
@@ -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)
diff --git a/mdowns/00408_No.8_background.mdown b/mdowns/00408_No.8_background.mdown
@@ -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)
+