<?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 &#60;style&#62;</description>
	<lastBuildDate>Thu, 02 Sep 2010 01:56:30 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<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>
