{"id":444,"date":"2008-03-23T01:07:52","date_gmt":"2008-03-23T06:07:52","guid":{"rendered":"http:\/\/www.juixe.com\/techknow\/index.php\/2008\/03\/23\/running-with-shoes-tasty-text\/"},"modified":"2008-03-23T01:07:52","modified_gmt":"2008-03-23T06:07:52","slug":"running-with-shoes-tasty-text","status":"publish","type":"post","link":"http:\/\/juixe.com\/techknow\/index.php\/2008\/03\/23\/running-with-shoes-tasty-text\/","title":{"rendered":"Running with Shoes &#8211; Tasty Text"},"content":{"rendered":"<p>The <b>Shoes toolkit<\/b> has a nice rich text format support.  At first sight it might seem that Shoes text support borrows a lot from HTML, for example the most commonly used text block is para.  In addition to the paragraph text block, you can use banner, title, subtitle, tagline, caption, and inscription.<\/p>\n<p>[source:ruby]<br \/>\nShoes.app do<br \/>\n  stack do<br \/>\n    banner &#8220;banner&#8221;<br \/>\n    title &#8220;title&#8221;<br \/>\n    subtitle &#8220;subtitle&#8221;<br \/>\n    tagline &#8220;tagline&#8221;<br \/>\n    caption &#8220;caption&#8221;<br \/>\n    para &#8220;paragraph&#8221;<br \/>\n    inscription &#8220;inscritpion&#8221;<br \/>\n  end<br \/>\nend<br \/>\n[\/source]<\/p>\n<p><span class=\"frame-outer  \"><span><span><span><span><img src='http:\/\/www.juixe.com\/techknow\/wp-content\/uploads\/2008\/03\/text_block.png' alt='shoes toolkit text block' \/><\/span><\/span><\/span><\/span><\/span><\/p>\n<p>As you can see banner is the largest text block, followed by tittle, etc.  The default size for banner, title, subtitle, tagline, caption, para, and inscription is 48, 34, 26, 18, 14, 12, 10 pixels respectively.  You can also change the default size of a text block by using the optional size parameter.<\/p>\n<p>[source:ruby]<br \/>\nShoes.app do<br \/>\n  stack do<br \/>\n    banner &#8220;banner&#8221;, :size => 20<br \/>\n  end<br \/>\nend<br \/>\n[\/source]<\/p>\n<p>Most often you will use the paragraph text block.  If you have to display a great amount of text on a paragraph you pass in variable number of strings parameters.<\/p>\n<p>[source:ruby]<br \/>\nShoes.app do<br \/>\n  stack do<br \/>\n    para &#8220;Lorem ipsum dolor sit amet, &#8220;,<br \/>\n      &#8220;consectetur adipisicing elit&#8221;<br \/>\n  end<br \/>\nend<br \/>\n[\/source]<\/p>\n<p>In addition to text blocks, Shoes supports text formats such as strong, em, code, ins, span, sub, and sup.  Here is an example of using a paragraph block with all of the text formats.<\/p>\n<p>[source:ruby]<br \/>\nShoes.app do<br \/>\n  stack do<br \/>\n    para &#8220;Normal. &#8220;,<br \/>\n      strong(&#8220;Bold. &#8220;),<br \/>\n      em(&#8220;Italics. &#8220;),<br \/>\n      code(&#8220;Code. &#8220;),<br \/>\n      ins(&#8220;Inscription. &#8220;),<br \/>\n      span(&#8220;Span. &#8220;),<br \/>\n      sub(&#8220;Sub. &#8220;),<br \/>\n      sup(&#8220;Sup. &#8220;)<br \/>\n  end<br \/>\nend<br \/>\n[\/source]<\/p>\n<p><span class=\"frame-outer  \"><span><span><span><span><img src='http:\/\/www.juixe.com\/techknow\/wp-content\/uploads\/2008\/03\/text_format.png' alt='shoes toolkit text format' \/><\/span><\/span><\/span><\/span><\/span><\/p>\n<p>In addition to simple text blocks and text formatting methods, you can create hyper links.  Just like the hyper web, links can execute some event or code.<\/p>\n<p>[source:ruby]<br \/>\nShoes.app do<br \/>\n  hyper_link = link &#8220;hyper link&#8221; do<br \/>\n    puts &#8220;link pressed&#8221;<br \/>\n  end<br \/>\n  stack do<br \/>\n    para hyper_link<br \/>\n  end<br \/>\nend<br \/>\n[\/source]<\/p>\n<p>The above code creates a link and assigns it to the hyper_link variable.  The link is later passed on to the paragraph block for display.  If you click on the link &#8216;link pressed&#8217; will be printed on the terminal console.<\/p>\n<p>In addition to executing custom code when a link is pressed, you can also launch the default browser if you use the click parameter.  The code below displays a link and when pressed it will launch the Firefox or your default browser to the given URL.<\/p>\n<p>[source:ruby]<br \/>\nShoes.app do<br \/>\n  stack do<br \/>\n    para(link &#8220;Juixe TechKnow&#8221;, :click => &#8220;http:\/\/www.juixe.com\/techknow&#8221;)<br \/>\n  end<br \/>\nend<br \/>\n[\/source]<\/p>\n<p>All the text formatting methods also accept an option stroke parameter to sent the color.  Here is a simple example of using color with your text.<\/p>\n<p>[source:ruby]<br \/>\nShoes.app do<br \/>\n  stack do<br \/>\n    para em(&#8220;Hello, &#8220;, :stroke => green),<br \/>\n      strong(&#8220;World!&#8221;, :stroke => blue)<br \/>\n  end<br \/>\nend<br \/>\n[\/source]<\/p>\n<p>Here is a recap of the available methods for working with text with the Shoes toolkit.<\/p>\n<p><b>Text Blocks:<\/b><br \/>\npara, banner, title, subtitle, tagline, caption, inscription<\/p>\n<p><b>text formats:<\/b><br \/>\nstrong, em, del, ins, link, span, sub, sup<\/p>\n<p>There are more Shoes GUI tutorials and code samples <a href=\"http:\/\/www.juixe.com\/techknow\/index.php?s=shoes\">here<\/a>.<\/p>\n<p>Technorati Tags: <a href=\"http:\/\/technorati.com\/tag\/ruby\" rel=\"tag\">ruby<\/a>, <a href=\"http:\/\/technorati.com\/tag\/shoes\" rel=\"tag\"> shoes<\/a>, <a href=\"http:\/\/technorati.com\/tag\/gui\" rel=\"tag\"> gui<\/a>, <a href=\"http:\/\/technorati.com\/tag\/ui\" rel=\"tag\"> ui<\/a>, <a href=\"http:\/\/technorati.com\/tag\/toolkit\" rel=\"tag\"> toolkit<\/a>, <a href=\"http:\/\/technorati.com\/tag\/text+block\" rel=\"tag\"> text block<\/a>, <a href=\"http:\/\/technorati.com\/tag\/text+format\" rel=\"tag\"> text format<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Shoes toolkit has a nice rich text format support. At first sight it might seem that Shoes text support borrows a lot from HTML, for example the most commonly used text block is para. In addition to the paragraph text block, you can use banner, title, subtitle, tagline, caption, and inscription. [source:ruby] Shoes.app do [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","footnotes":""},"categories":[22,3],"tags":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p902K-7a","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/444"}],"collection":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/comments?post=444"}],"version-history":[{"count":0,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/444\/revisions"}],"wp:attachment":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/media?parent=444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/categories?post=444"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/tags?post=444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}