GitHub Sale: sign up for any paid plan this week and pay nothing until January 1, 2009!  [ hide ]

public
Description: a tiny graphical app kit for ruby
Homepage: http://code.whytheluckystiff.net/shoes
Clone URL: git://github.com/why/shoes.git
 * static/manual.txt: starting a new page in the manual -- the styles 
 master list.
 * shoes/ruby.c: fix play_id warning.
why (author)
Sun Oct 12 23:45:55 -0700 2008
commit  eb59de24a86d7d472090d845dae9a75ea0cec34c
tree    d83bf7282d448c6720188ada506e221949d0a69c
parent  d8e5c50261f26a77b51782ab7600472ca79205aa
...
1329
1330
1331
1332
 
1333
1334
1335
...
1329
1330
1331
 
1332
1333
1334
1335
0
@@ -1329,7 +1329,7 @@ shoes_video_draw(VALUE self, VALUE c, VALUE actual)
0
         self_t->init = 1;
0
 
0
 #ifdef VLC_0_8
0
- int play_id = libvlc_playlist_add(self_t->vlc,
0
+ libvlc_playlist_add(self_t->vlc,
0
           RSTRING_PTR(self_t->path), NULL, &self_t->excp);
0
 #else
0
         libvlc_media_t *play = libvlc_media_new(shoes_world->vlc,
...
739
740
741
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
742
743
744
...
857
858
859
860
 
861
862
863
...
952
953
954
955
 
956
957
958
...
1360
1361
1362
1363
 
1364
1365
1366
...
1400
1401
1402
1403
 
1404
1405
1406
...
1441
1442
1443
1444
 
1445
1446
1447
...
1520
1521
1522
1523
 
1524
1525
1526
...
1835
1836
1837
1838
 
1839
1840
1841
...
2028
2029
2030
2031
 
2032
2033
2034
...
2074
2075
2076
2077
 
2078
2079
2080
...
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
...
1100
1101
1102
 
1103
1104
1105
1106
...
1195
1196
1197
 
1198
1199
1200
1201
...
1603
1604
1605
 
1606
1607
1608
1609
...
1643
1644
1645
 
1646
1647
1648
1649
...
1684
1685
1686
 
1687
1688
1689
1690
...
1763
1764
1765
 
1766
1767
1768
1769
...
2078
2079
2080
 
2081
2082
2083
2084
...
2271
2272
2273
 
2274
2275
2276
2277
...
2317
2318
2319
 
2320
2321
2322
2323
0
@@ -739,6 +739,249 @@ Changes the location, in order to view a different Shoes URL.
0
 
0
 Absolute URLs (such as http://google.com) are okay, but Shoes will be expecting a Shoes application to be at that address. (So, google.com won't work, as it's an HTML app.)
0
 
0
+== The Styles Master List ==
0
+
0
+You want to mess with the look of things? Well, throughout Shoes, styles are used to change the way elements appear. In some cases, you can even style an entire class of elements. (Like giving all paragraphs a certain font.)
0
+
0
+Styles are easy to spot. They usually show up when the element is created.
0
+
0
+{{{
0
+ Shoes.app :title => "A Styling Sample" do
0
+ para "Red with an underline", :stroke => red, :underline => "single"
0
+ end
0
+}}}
0
+
0
+Here we've got a `:title` style on the app. And on the paragraph inside the app, a red `:stroke` style and an `:underline` style.
0
+
0
+The style hash can also be changed by using the [[Common.style]] method, available on every element and slot.
0
+
0
+{{{
0
+ Shoes.app :title => "A Styling Sample" do
0
+ @text = para "Red with an underline"
0
+ @text.style(:stroke => red, :underline => "single")
0
+ end
0
+}}}
0
+
0
+Most styles can also be set by calling them as methods. (I'd use the manual search to find the method.)
0
+
0
+{{{
0
+ Shoes.app :title => "A Styling Sample" do
0
+ @text = para "Red with an underline"
0
+ @text.stroke = red
0
+ @text.underline = "single"
0
+ end
0
+}}}
0
+
0
+Rather than making you plow through the whole manual to figure out what styles go where, this helpful page speeds through every style in Shoes and suggests where that style is used.
0
+
0
+=== :angle » a number ===
0
+
0
+For: ''background, border, gradient''.
0
+
0
+=== :attach » a slot or element ===
0
+
0
+For: ''flow, stack''.
0
+
0
+=== :autoplay » true or false ===
0
+
0
+For: ''video''.
0
+
0
+=== :bottom » a number ===
0
+
0
+For: ''all slots and elements''.
0
+
0
+=== :cap » :curve or :rect or :project ===
0
+
0
+For: ''arc, arrow, border, flow, image, mask, rect, star, shape, stack''.
0
+
0
+=== :center » true or false ===
0
+
0
+For: ''arc, image, oval, rect, shape''.
0
+
0
+=== :checked » true or false ===
0
+
0
+For: ''check, radio''.
0
+
0
+=== :choose » a string ===
0
+
0
+For: ''list_box''.
0
+
0
+=== :click » a proc ===
0
+
0
+For: ''all slots and elements''.
0
+
0
+Wait, no, this needs to be split into `change` event as well.
0
+
0
+=== :curve » a number ===
0
+
0
+For: ''background, border, rect''.
0
+
0
+=== :displace_left » a number ===
0
+
0
+For: ''all slots and elements''.
0
+
0
+Moves a shape, text block or any other kind of object to the left or right. A positive number displaces to the right by the given number of pixels; a negative number displaces to the left. Displacing an object doesn't effect the actual layout of the page. Before using this style, be sure to read the [[Position.displace]] docs, since its behavior can be a bit surprising.
0
+
0
+=== :displace_top » a number ===
0
+
0
+For: ''all slots and elements''.
0
+
0
+Moves a shape, text block or any other kind of object up or down. A positive number moves the object down by this number of pixels; a negative number moves it up. Displacing doesn't effect the actual layout of the page or the object's true coordinates. Read the [[Position.displace]] docs, since its behavior can be a bit surprising.
0
+
0
+=== :emphasis » a string ===
0
+
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+
0
+=== :family » a string ===
0
+
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+
0
+=== :fill » a hex code, a Shoes::Color or a range of either ===
0
+
0
+For: ''arc, arrow, background, banner, caption, code, del, em, flow, image, ins, inscription, line, link, mask, oval, para, rect, shape, span, stack, star, strong, sub, sup, subtitle, tagline, title''.
0
+
0
+The color of the background pen. For shapes, this is the fill color, the paint inside the shape. For text stuffs, this color is painted in the background (as if marked with a highlighter pen.)
0
+
0
+=== :font » a string ===
0
+
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+
0
+=== :group » a string ===
0
+
0
+For: ''radio''.
0
+
0
+=== :height » a number ===
0
+
0
+For: ''all slots and elements''.
0
+
0
+Sets the pixel height of this object. If the number is a decimal number, the height becomes a percentage of its parent's height (with 0.0 being 0% and 1.0 being 100%.)
0
+
0
+=== :hidden » a number ===
0
+
0
+For: ''all slots and elements''.
0
+
0
+=== :inner » a number ===
0
+
0
+For: ''star''.
0
+
0
+=== :items » an array ===
0
+
0
+For: ''list_box''.
0
+
0
+=== :kerning » a number ===
0
+
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+
0
+=== :leading » a number ===
0
+
0
+For: ''banner, caption, inscription, para, subtitle, tagline, title''.
0
+
0
+=== :left » a number ===
0
+
0
+For: ''all slots and elements''.
0
+
0
+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 slot containing it. If this style is left unset (or set to `nil`,) the object will flow in with the other objects surrounding it.
0
+
0
+=== :margin » a number or an array of four numbers ===
0
+
0
+For: ''all slots and elements''.
0
+
0
+=== :margin_bottom » a number ===
0
+
0
+For: ''all slots and elements''.
0
+
0
+=== :margin_left » a number ===
0
+
0
+For: ''all slots and elements''.
0
+
0
+=== :margin_right » a number ===
0
+
0
+For: ''all slots and elements''.
0
+
0
+=== :margin_top » a number ===
0
+
0
+For: ''all slots and elements''.
0
+
0
+=== :outer » a number ===
0
+
0
+For: ''star''.
0
+
0
+=== :points » a number ===
0
+
0
+For: ''star''.
0
+
0
+=== :radius » a number ===
0
+
0
+For: ''arc, arrow, background, border, gradient, oval, rect, shape''.
0
+
0
+=== :right » a number ===
0
+
0
+For: ''all slots and elements''.
0
+
0
+=== :rise » a number ===
0
+
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+
0
+=== :scroll » true or false ===
0
+
0
+For: ''flow, stack''.
0
+
0
+=== :size » a number ===
0
+
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+
0
+=== :state » a string ===
0
+
0
+For: ''button, check, edit_box, edit_line, list_box, radio''.
0
+
0
+=== :stretch » a string ===
0
+
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+
0
+=== :strikethrough » a string ===
0
+
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+
0
+=== :stroke » a hex code, a Shoes::Color or a range of either ===
0
+
0
+For: ''arc, arrow, banner, border, caption, code, del, em, flow, image, ins, inscription, line, link, mask, oval, para, rect, shape, span, stack, star, strong, sub, sup, subtitle, tagline, title''.
0
+
0
+The color of the foreground pen. In the case of shapes, this is the color the lines are drawn with. For paragraphs and other text, the letters are printed in this color.
0
+
0
+=== :strokewidth » a number ===
0
+
0
+For: ''arc, arrow, border, flow, image, line, mask, oval, rect, shape, star, stack''.
0
+
0
+The thickness of the stroke, in pixels, of the line defining each of these shapes. For example, the number two would set the strokewidth to 2 pixels.
0
+
0
+=== :text » a string ===
0
+
0
+For: ''button, edit_box, edit_line, list_box''.
0
+
0
+=== :top » a number ===
0
+
0
+For: ''all slots and elements''.
0
+
0
+Sets the top coordinate for an object, relative to its parent slot. If an object is set with `:top => 40`, this means the object's top edge will be placed 40 pixels beneath the top edge of the slot that contains it. If no `:top` style is given, the object is automatically placed in the natural flow of its slot.
0
+
0
+=== :underline » a string ===
0
+
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+
0
+=== :variant » a string ===
0
+
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+
0
+=== :weight » a number ===
0
+
0
+For: ''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''.
0
+
0
+=== :width » a number ===
0
+
0
+For: ''all slots and elements''.
0
+
0
+Sets the pixel width for the element. If the number is a decimal, the width is converted to a percentage (with 0.0 being 0% and 1.0 being 100%.) A width of 100% means the object fills its parent slot.
0
+
0
 == Classes List ==
0
 
0
 Here is a complete list of all the classes introduced by Shoes. This chart is laid out according to how classes inherits from each other. Subclasses are indented one level to the right, beneath their parent class.
0
@@ -857,7 +1100,7 @@ Draws a line using the current line color (aka "stroke") starting at coordinates
0
 
0
 === oval(left, top, radius) » Shoes::Shape ===
0
 
0
-Draws a circular form at pixel coordinates (left, top) with a width and height of `radius` pixels. The line and fill colors are used to draw the shape.
0
+Draws a circular form at pixel coordinates (left, top) with a width and height of `radius` pixels. The line and fill colors are used to draw the shape. By default, the coordinates are for the oval's leftmost, top corner, but this can be changed by calling the [[Art.transform]] method or by using the `:center` style on the next method below.
0
 
0
 {{{
0
  #!ruby
0
@@ -952,7 +1195,7 @@ A shape can also contain other shapes. So, you can place an [[Art.oval]], a [[A
0
 
0
 === star(left, top, points = 10, outer = 100.0, inner = 50.0) » Shoes::Shape ===
0
 
0
-Draws a star using the stroke and fill colors. The star is positioned at coordinates (left, top) with a certain number of `points`. The `outer` width defines the full radius of the star; the `inner` width specifies the radius of the star's middle, where points stem from.
0
+Draws a star using the stroke and fill colors. The star is positioned with its center point at coordinates (left, top) with a certain number of `points`. The `outer` width defines the full radius of the star; the `inner` width specifies the radius of the star's middle, where points stem from.
0
 
0
 === stroke(pattern) » pattern ===
0
 
0
@@ -1360,7 +1603,7 @@ Adds elements to the beginning of a slot.
0
 
0
 The `para` element is added to the beginning of the `@slot`.
0
 
0
-== Styles of a Slot ==
0
+== Position of a Slot ==
0
 
0
 Like any other element, slots can be styled and customized when they are created.
0
 
0
@@ -1400,7 +1643,7 @@ The vertical size of the viewable slot in pixels. So, if this is a scrolling sl
0
 
0
 === hide() » self ===
0
 
0
-Hides the slot, so that it can't be seen. See also [[Styles.show]] and [[Styles.toggle]].
0
+Hides the slot, so that it can't be seen. See also [[Position.show]] and [[Position.toggle]].
0
 
0
 === left() » a number ===
0
 
0
@@ -1441,7 +1684,7 @@ Scrolls the slot to a certain coordinate. This must be between zero and `scroll
0
 
0
 === show() » self ===
0
 
0
-Reveals the slot, if it is hidden. See also [[Styles.hide]] and [[Styles.toggle]].
0
+Reveals the slot, if it is hidden. See also [[Position.hide]] and [[Position.toggle]].
0
 
0
 === style() » styles ===
0
 
0
@@ -1520,7 +1763,7 @@ gives you back an Image object. Use the methods of the Image object to change th
0
 
0
 A few methods are shared by every little element in Shoes. Moving, showing, hiding. Removing an element. Basic and very general things. This list encompasses those common commands.
0
 
0
-One of the most general methods of all is the `style` method (which is also covered as the [[Styles.style]] method for slots.)
0
+One of the most general methods of all is the `style` method (which is also covered as the [[Position.style]] method for slots.)
0
 
0
 {{{
0
  #!ruby
0
@@ -1835,7 +2078,7 @@ Okay, let's add to the above example.
0
 {{{
0
  #!ruby
0
  Shoes.app do
0
- @list = ['Frances Johnson', 'Ignatius J. Reilly',
0
+ @list = ['Frances Johnson', 'Ignatius J. Reilly',
0
      'Winston Niles Rumfoord']
0
 
0
    stack do
0
@@ -2028,7 +2271,7 @@ So, the basic size of a list box is about 200 pixels wide and 28 pixels high. Y
0
      :width => 120, :choose => "Apricots" do |list|
0
        @fruit.text = list.text
0
    end
0
-
0
+
0
    @fruit = para "No fruit selected"
0
  end
0
 }}}
0
@@ -2074,7 +2317,7 @@ A simple progress bar is 200 pixels wide, but you can use the `:width` style (as
0
    stack :margin => 0.9 do
0
      title "Progress example"
0
      @p = progress :width => 1.0
0
-
0
+
0
      animate do |i|
0
        @p.fraction = (i % 100) / 100.0
0
      end

Comments

    No one has commented yet.