{"id":88,"date":"2007-06-01T12:40:00","date_gmt":"2007-06-01T20:40:00","guid":{"rendered":"http:\/\/dougmccune.com\/blog\/2007\/06\/01\/new-component-canvasbutton-added-to-flexlib\/"},"modified":"2008-11-02T14:05:13","modified_gmt":"2008-11-02T22:05:13","slug":"new-component-canvasbutton-added-to-flexlib","status":"publish","type":"post","link":"https:\/\/dougmccune.com\/blog\/2007\/06\/01\/new-component-canvasbutton-added-to-flexlib\/","title":{"rendered":"New Component: CanvasButton added to FlexLib"},"content":{"rendered":"<p>I just made a quick new component and added it to <a href=\"http:\/\/flexlib.net\">FlexLib<\/a>. It&#8217;s a Button component, but it allows you to add any child UI components to the button via MXML. So if you find the single icon and label format of the button to be a bit too restrictive, you can use this component to layout your button however you want. This is in response to a <a href=\"http:\/\/tech.groups.yahoo.com\/group\/flexcoders\/message\/76219\">recent question<\/a> asked on flexcoders.<\/p>\n<p>So for example, in the sample below the top button is created like this:<\/p>\n<pre>\r\n<code>\r\n<flexlib:CanvasButton width=\"150\">\r\n\r\n\t<mx:VBox height=\"100%\" width=\"100%\" verticalGap=\"0\" >\r\n\r\n\t\t<mx:Label text=\"This is a\" width=\"100%\" textAlign=\"left\" \/>\r\n\r\n\t\t<mx:VBox width=\"100%\" horizontalAlign=\"center\">\r\n\r\n\t\t\t<mx:Canvas cornerRadius=\"5\" \r\n\t\t\t\tbackgroundColor=\"0xff0000\" backgroundAlpha=\".5\" \r\n\t\t\t\tborderStyle=\"solid\">\r\n\r\n\t\t\t\t<mx:Label text=\"crazy\" width=\"100%\"\r\n\t\t\t\t\tfontSize=\"20\" fontStyle=\"italic\" \r\n\t\t\t\t\tfontWeight=\"bold\"  \/>\r\n\r\n\t\t\t<\/mx:Canvas>\r\n\r\n\t\t<\/mx:VBox>\r\n\r\n\t\t<mx:Label text=\"button!\" width=\"100%\" textAlign=\"right\" \/>\r\n\r\n\t<\/mx:VBox>\r\n\r\n<\/flexlib:CanvasButton>\r\n<\/code>\r\n<\/pre>\n<p><a href=\"http:\/\/flexlib.googlecode.com\/svn\/trunk\/src\/flexlib\/controls\/CanvasButton.as\">View the source<\/a><br \/>\n<a href=\"http:\/\/flexlib.googlecode.com\/svn\/trunk\/docs\/flexlib\/controls\/CanvasButton.html\">View the documentation<\/a><\/p>\n<p>Note: this has been added to the <a href=\"http:\/\/code.google.com\/p\/flexlib\/source\">SVN repository<\/a> for FlexLib but is not yet in the distribution zip. The distribution zip will get updated once we have a bigger changeset (oh, and it&#8217;s coming&#8230;)<\/p>\n<p><div id=\"swf53f81\">This movie requires Flash Player 9.<\/div>\n<script type=\"text\/javascript\">\n\tswfobject.embedSWF(\"http:\/\/flexlib.googlecode.com\/svn\/trunk\/examples\/CanvasButton\/CanvasButton_Sample.swf\", \"swf53f81\", \"250\", \"200\", \"9.0.0\", \"\", {}, {wmode: \"window\", menu: \"false\", quality: \"high\", bgcolor: \"#FFFFFF\", allowScriptAccess: \"always\"}, {});\n<\/script>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I just made a quick new component and added it to FlexLib. It&#8217;s a Button component, but it allows you to add any child UI components to the button via MXML. So if you find the single icon and label format of the button to be a bit too restrictive, you can use this component [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[3],"class_list":["post-88","post","type-post","status-publish","format-standard","hentry","category-flex","tag-flexlib"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/posts\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/comments?post=88"}],"version-history":[{"count":2,"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/posts\/88\/revisions"}],"predecessor-version":[{"id":348,"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/posts\/88\/revisions\/348"}],"wp:attachment":[{"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/media?parent=88"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/categories?post=88"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dougmccune.com\/blog\/wp-json\/wp\/v2\/tags?post=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}