{"id":44,"date":"2008-07-15T00:15:07","date_gmt":"2008-07-15T05:15:07","guid":{"rendered":"http:\/\/billdwhite.com\/?p=44"},"modified":"2008-07-15T00:15:07","modified_gmt":"2008-07-15T05:15:07","slug":"custom-component-with-degrafa-skinning","status":"publish","type":"post","link":"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/","title":{"rendered":"Custom Component with Degrafa Skinning"},"content":{"rendered":"<p>This demo shows my initial attempt at using <a href=\"http:\/\/www.degrafa.org\">Degrafa<\/a> skinning.  I wanted to customize the tiles in the list so that they would look unique and also provide a nifty way of displaying a list of options for the selected tile.  You can see the result by clicking on the lower right corner of each tile to reveal the hidden options.  This is similar to a pop-up button, but it is skinned and masked to slide out to the side.  I&#8217;ve added sound effects and included some filtering animations that I pinched and tweaked from other demos I\u2019ve come across.  As always, the source is included.  Enjoy. \ud83d\ude42<br \/> <!--more--><\/p>\n<p><a href=\"http:\/\/billdwhite.com\/wp-content\/demos\/TileOptionsDemo\/srcview\/index.html\">View Source<\/a><\/p>\n<p id=\"tileOptionsDemoParagraph\" align=\"center\">[SWF]\/wordpress\/wp-content\/demos\/TileOptionsDemo\/TileOptionsDemo.swf, 560, 575[\/SWF]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This demo shows my initial attempt at using Degrafa skinning. I wanted to customize the tiles in the list so that they would look unique and also provide a nifty way of displaying a list of options for the selected tile. You can see the result by clicking on the lower right corner of each\u2026 <span class=\"read-more\"><a href=\"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[19,24,25,26,36,37],"class_list":["post-44","post","type-post","status-publish","format-standard","hentry","category-adobe-flex","tag-adobe-flex","tag-degrafa","tag-flash","tag-flex","tag-ria","tag-rich-internet-applications"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Custom Component with Degrafa Skinning - Bill White<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom Component with Degrafa Skinning - Bill White\" \/>\n<meta property=\"og:description\" content=\"This demo shows my initial attempt at using Degrafa skinning. I wanted to customize the tiles in the list so that they would look unique and also provide a nifty way of displaying a list of options for the selected tile. You can see the result by clicking on the lower right corner of each\u2026 Read More &raquo;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/\" \/>\n<meta property=\"og:site_name\" content=\"Bill White\" \/>\n<meta property=\"article:published_time\" content=\"2008-07-15T05:15:07+00:00\" \/>\n<meta name=\"author\" content=\"Bill White\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bill_d_white\" \/>\n<meta name=\"twitter:site\" content=\"@bill_d_white\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bill White\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/\"},\"author\":{\"name\":\"Bill White\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"headline\":\"Custom Component with Degrafa Skinning\",\"datePublished\":\"2008-07-15T05:15:07+00:00\",\"dateModified\":\"2008-07-15T05:15:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/\"},\"wordCount\":123,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"keywords\":[\"Adobe Flex\",\"Degrafa\",\"Flash\",\"Flex\",\"RIA\",\"Rich Internet Applications\"],\"articleSection\":[\"Adobe Flex\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/\",\"url\":\"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/\",\"name\":\"Custom Component with Degrafa Skinning - Bill White\",\"isPartOf\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#website\"},\"datePublished\":\"2008-07-15T05:15:07+00:00\",\"dateModified\":\"2008-07-15T05:15:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/billdwhite.com\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom Component with Degrafa Skinning\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#website\",\"url\":\"https:\/\/billdwhite.com\/wordpress\/\",\"name\":\"Bill White's Blog\",\"description\":\"UI Development and Data Visualization:  Angular \/ React \/ D3 \/ Typescript \/ Javascript \/ UI \/ UX \/ Etc\",\"publisher\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/billdwhite.com\/wordpress\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\",\"name\":\"Bill White\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g\",\"caption\":\"Bill White\"},\"logo\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/www.billdwhite.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Custom Component with Degrafa Skinning - Bill White","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/","og_locale":"en_US","og_type":"article","og_title":"Custom Component with Degrafa Skinning - Bill White","og_description":"This demo shows my initial attempt at using Degrafa skinning. I wanted to customize the tiles in the list so that they would look unique and also provide a nifty way of displaying a list of options for the selected tile. You can see the result by clicking on the lower right corner of each\u2026 Read More &raquo;","og_url":"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/","og_site_name":"Bill White","article_published_time":"2008-07-15T05:15:07+00:00","author":"Bill White","twitter_card":"summary_large_image","twitter_creator":"@bill_d_white","twitter_site":"@bill_d_white","twitter_misc":{"Written by":"Bill White","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/#article","isPartOf":{"@id":"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/"},"author":{"name":"Bill White","@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"headline":"Custom Component with Degrafa Skinning","datePublished":"2008-07-15T05:15:07+00:00","dateModified":"2008-07-15T05:15:07+00:00","mainEntityOfPage":{"@id":"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/"},"wordCount":123,"commentCount":9,"publisher":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"keywords":["Adobe Flex","Degrafa","Flash","Flex","RIA","Rich Internet Applications"],"articleSection":["Adobe Flex"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/","url":"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/","name":"Custom Component with Degrafa Skinning - Bill White","isPartOf":{"@id":"https:\/\/billdwhite.com\/wordpress\/#website"},"datePublished":"2008-07-15T05:15:07+00:00","dateModified":"2008-07-15T05:15:07+00:00","breadcrumb":{"@id":"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/billdwhite.com\/wordpress\/2008\/07\/15\/custom-component-with-degrafa-skinning\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/billdwhite.com\/wordpress\/"},{"@type":"ListItem","position":2,"name":"Custom Component with Degrafa Skinning"}]},{"@type":"WebSite","@id":"https:\/\/billdwhite.com\/wordpress\/#website","url":"https:\/\/billdwhite.com\/wordpress\/","name":"Bill White's Blog","description":"UI Development and Data Visualization:  Angular \/ React \/ D3 \/ Typescript \/ Javascript \/ UI \/ UX \/ Etc","publisher":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/billdwhite.com\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314","name":"Bill White","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g","caption":"Bill White"},"logo":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/www.billdwhite.com"]}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts\/44","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/comments?post=44"}],"version-history":[{"count":0,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts\/44\/revisions"}],"wp:attachment":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/media?parent=44"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/categories?post=44"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/tags?post=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}