<?xml version="1.0" encoding="UTF-8"?> <rss
version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
><channel><title>CSSKarma &#187; widget</title> <atom:link href="http://www.csskarma.com/blog/tag/widget/feed/" rel="self" type="application/rss+xml" /><link>http://www.csskarma.com/blog</link> <description>display your style</description> <lastBuildDate>Tue, 31 Jan 2012 15:18:44 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <item><title>Cracking open Google Gadgets</title><link>http://www.csskarma.com/blog/cracking-open-google-gadgets/</link> <comments>http://www.csskarma.com/blog/cracking-open-google-gadgets/#comments</comments> <pubDate>Mon, 14 Apr 2008 18:05:50 +0000</pubDate> <dc:creator>Tim</dc:creator> <category><![CDATA[Web Development]]></category> <category><![CDATA[ajax]]></category> <category><![CDATA[google gadgets]]></category> <category><![CDATA[google gears]]></category> <category><![CDATA[javascript]]></category> <category><![CDATA[rss]]></category> <category><![CDATA[widget]]></category> <category><![CDATA[xml]]></category><guid
isPermaLink="false">http://www.csskarma.com/blog/?p=60</guid> <description><![CDATA[A few weeks ago, I decided to do a little research into Google Desktop. Which is basically a Google widget platform competing with Yahoo! widgets. After some exploration and dissecting Google Gadgets, this is what I came out with: The core of the application runs on 2 files main.js main.xml There are also some image [...]]]></description> <content:encoded><![CDATA[<p>A few weeks ago, I decided to do a little research into <a
href="http://www.google.com/ig/directory?synd=open" rel="external">Google Desktop</a>. Which is basically a Google widget platform competing with <a
href="http://widgets.yahoo.com/" rel="external">Yahoo! widgets</a>. After some exploration and dissecting Google Gadgets, this is what I came out with:</p><ul><li>The core of the application runs on 2 files<ul><li>main.js</li><li>main.xml</li></ul></li><li>There are also some image and CSS options readily available, but the guts of it really run on JavaScript and XML</li><li>Overall, it&#8217;s very straightforward, a little playing around with the sample gadgets will give you a good idea of what you can do (endless possibilites)</li></ul><p>The file structure of  some of the sample gadgets leaves a lot of room for improvement. Some seem to be built to handle very large, modular applications, but in most cases, they&#8217;re a little too modular (in my opinion).</p><p>Some of the more useful samples you can go through are:</p><ul><li>Animations</li><li>ComboBox</li><li>Countdown</li><li>DragDrop</li><li>HelloWorld</li><li>HTMLDetailsView</li><li>QueryAPI</li><li>RSS</li><li>XMLDetailsView</li><li>XMLHttpRequest</li></ul><p>There are others too, but these are the one&#8217;s I found most useful. So, lookin at those options, a being an RSS freak, I chose to customize the RSS gadget for CSSKarma</p><p><strong>CSSKarma RSS Gadget</strong></p><p><a
href="http://www.csskarma.com/gadgets/rss/csskarma_rss.gg">Download CSSKarma RSS Gadget</a></p><p>The first thing to do is to make a copy of the RSS sample given with the Google Gadget samples. I did that (as a CSS person), I opened up the theme folder &#8220;default&#8221; and looked for &#8220;details.css&#8221;. I assumed this file would edit all the presentation for the gadget. It doesn&#8217;t. I only edits the flyout menu (after you click on a link in the RSS gadget). OK, that&#8217;s fine. So I enter this CSS:</p><pre><code>body {
  color:#323F4C;
  background:#fff url(http://www.csskarma.com/images/bg_branding.jpg) no-repeat 0 bottom;
  font: 0.8em/1.5 Verdana, Arial, Sans-serif;
}</code></pre><p>That will add my CSSKarma logo to the flyout and add some basic CSS. The other files in the theme folder to deal with are &#8220;entry_item.xml&#8221;, &#8220;theme_config.xml&#8221; and &#8220;title.xml&#8221;. After you look at  &#8220;theme_config.xml&#8221; and &#8220;title.xml&#8221;, you&#8217;ll see why I think this is a little <em>too</em> modular.  I left those two file alone. But I did edit &#8220;entry_item.xml&#8221;, view <a
href="http://www.csskarma.com/gadgets/rss/entry_item.xml">entry_item.xml</a>. I edited some style information in there (one more thing I&#8217;m not thrilled about &#8211; embedding style info into the XML).</p><p>The next folder to tackle is  &#8220;editme&#8221;. It contains 2 files (config_constants.js and entry_item_impl.js). In &#8220;entry_item_impl.js&#8221; you can edit the RSS nodes, if you want. I chose not to. In &#8220;config_constants.js&#8221; you need to edit the URL of the RSS feed you want to use.</p><p>The last thing I wanted to do was to remove the default background image from &#8220;main.xml&#8221;. When I did this, the background was transparent, by default. So in &#8220;main.xml&#8221; I added a background attribute of #FFFFFF to top level div (container). I also edited the height and width attributes of the &#8220;view&#8221; element for when the gadget is undocked from Google Desktop.</p><p>The outcome of this was the <a
href="http://www.csskarma.com/gadgets/rss/csskarma_rss.gg">CSSKarma RSS Gadget</a> (You&#8217;ll probably need Google Desktop installed to use this). A very basic RSS gadget made by making simple modifications to the sample files. Feel free to download, play around with it, and let me know about any errors you find.</p><p><strong>Aptana Jaxter</strong></p><p><a
href="http://www.aptana.com/" rel="external">Aptana Jaxter</a> recently released &#8220;The worlds first Ajax server&#8221; (I have no date to back up the claim that it was recent). I&#8217;ve seen some web apps using this in integrating the Google API, looks promising but there&#8217;s very limited server space right now. I&#8217;d like to see how these can be integrated into the <a
href="http://code.google.com/apis/gears/mobile.html" title="http://code.google.com/apis/gears/mobile.html"  rel="external">Mobile web</a>. I don&#8217;t have too much information on it right now (and I keep losing the damn link).</p><p>That&#8217;s all I have for now.</p><p>With ease<br/>Tim</p> ]]></content:encoded> <wfw:commentRss>http://www.csskarma.com/blog/cracking-open-google-gadgets/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> </channel> </rss>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk: basic
Page Caching using disk: enhanced
Database Caching 7/14 queries in 0.016 seconds using disk: basic

Served from: www.csskarma.com @ 2012-02-04 03:16:11 -->
