<?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>Simon Koelsch &#187; closure</title>
	<atom:link href="http://www.simon-koelsch.de/tag/closure/feed" rel="self" type="application/rss+xml" />
	<link>http://www.simon-koelsch.de</link>
	<description>coding software, using gadgets</description>
	<lastBuildDate>Mon, 20 Jun 2011 09:38:29 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Google JavaScript Bibliothek Closure Library</title>
		<link>http://www.simon-koelsch.de/91-google-javascript-bibliothek-closure-library</link>
		<comments>http://www.simon-koelsch.de/91-google-javascript-bibliothek-closure-library#comments</comments>
		<pubDate>Mon, 09 Nov 2009 00:41:53 +0000</pubDate>
		<dc:creator>Simon Koelsch</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[closure]]></category>
		<category><![CDATA[closure-library]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.simon-koelsch.de/?p=91</guid>
		<description><![CDATA[Google realisiert in seinen Webanwendungen das Interface durch intensiven Gebrauch von Javascript. Man denke dabei an Google Mail, Google Maps oder Google Wave. Ein Teil der Werkzeuge die dabei benutzt werden sind jetzt als Closure Tools veröffentlicht worden. Closure Tools besteht aus den folgenden Teilprojekten: Der Closure Compiler übersetzt JavaScript Code in eine kompaktere Form. [...]]]></description>
			<content:encoded><![CDATA[<p>Google realisiert in seinen Webanwendungen das Interface durch intensiven Gebrauch von Javascript. Man denke dabei an <a title="Gmail" href="http://mail.google.com">Google Mail</a>, <a title="Maps" href="http://maps.google.com">Google Maps</a> oder<a title="Google Wave" href="http://wave.google.com"> Google Wave</a>. Ein Teil der Werkzeuge die dabei benutzt werden sind jetzt als <a title="Closure Tools bei Google Labs" href="http://code.google.com/closure/">Closure Tools </a>veröffentlicht worden.</p>
<p>Closure Tools besteht aus den folgenden Teilprojekten:</p>
<p>Der <a title="Closure Compiler bei Google Labs" href="http://code.google.com/closure/compiler/">Closure Compiler</a> übersetzt JavaScript Code in eine kompaktere Form. Dadurch werden die Scripte kleiner und damit auch schneller. Es wird toter Code entfernt und nach üblichen Fehler gesucht. Eine Erweiterung für Firebug ist auch verfügbar.</p>
<p>Mit <a title="Closure Templates bei Google Labs" href="http://code.google.com/closure/templates/">Closure Templates</a> gibt es eine einfache Möglichkeit dynamisch HTML zu generieren. Die Templates sind fertig kompiliert als Java und JavaScript.</p>
<p>In diesem Posting geht es um den dritten Teil des Closure Projekts: <a title="Closure Library bei Google Code" href="http://code.google.com/p/closure-library/">Closure Library</a>. Die veröffentlichte Bibliothek enthält eine breite Sammlung von Funktionen und ist kompatibel zu den gängigen Browsern.<br />
Außerdem bringt sie noch ein paar andere nette Konzepte mit.<br />
<span id="more-91"></span></p>
<h3>Abhängigkeiten</h3>
<p>Closure Library besitzt ein simples Abhängigkeits-Konzept. Mit <code>goog.provide()</code> wird ein eigener Namensraum für eine Funktion geschaffen. Mit <code>goog.require()</code> ist es dann möglich auf die vorher definierten Funktionen zuzugreifen.<br />
Dabei sind <code>goog.provide()</code> und <code>goog.require()</code> nicht nur als vereinfachte Include Funktionen zu sehen. Mit der Bibliothek kommt ein Python Script welches eine JavaScript Datei analysiert und mit den benötigten Abhängigkeiten ein grosses Script erstellt.<br />
Dieses Script kann bei Bedarf dann mit dem Closure Compiler weiter optimiert werden.</p>
<h3>Events</h3>
<p>JavaScript sendet bei einer Benutzerinteraktion mit einem DOM-Element ein Event an dieses Element. Zum Beispiel bei einem Klick oder einem Kontakt mit dem Mauszeiger. Auf diese Events lässt sich dann im Programmcode reagieren. Leider sind Events bei jedem Browser ein wenig anderst implementiert. Auf diese Unterschiede müsste man eigentlich bei der Entwicklung achten. Closure umgeht dieses Problem mit einem eigenen Eventmodell. Dieses Modell funktioniert dann mit allen gängigen Browsern gleich.<br />
Es ist auch möglich eigene Eventtypen zu erstellen und zu benutzen.<br />
Die Demo <a title="Closure JavaScript Mausrad Demo" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/mousewheelhandler.html">goog.events.MouseWheelHandler</a> zeigt zum Beispiel eine Reaktion auf Events des Mausrads.</p>
<h3>Vererbung</h3>
<p>Ein rudimentäres Vererbungskonzept wird mit <code>goog.inerhits(child, parent)</code> ermöglicht. Soll eine Klasse von einer anderen abgeleitet werden, muss <code>goog.inerhits(child, parent)</code> eine Refernz auf beide Klassen übergeben werden. Danach sind die vererbeten Funktionen sichtbar. Den Konstruktor der Vaterklasse muss man allerdings noch selbst aufrufen.</p>
<p>Ein Beispielcode aus der <a title="Einfuehrung in Closure" href="http://code.google.com/closure/library/docs/introduction.html">Dokumentation</a>:</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;">goog.<span style="color: #006633;">ui</span>.<span style="color: #006633;">MenuButton</span> <span style="color: #339933;">=</span> function<span style="color: #009900;">&#40;</span>content, opt_menu, opt_renderer, opt_domHelper<span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#123;</span>
  goog.<span style="color: #006633;">ui</span>.<span style="color: #003399;">Button</span>.<span style="color: #006633;">call</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">this</span>, content, opt_renderer <span style="color: #339933;">||</span>
      goog.<span style="color: #006633;">ui</span>.<span style="color: #006633;">MenuButtonRenderer</span>.<span style="color: #006633;">getInstance</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>, opt_domHelper<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #666666; font-style: italic;">// Menu buttons support the OPENED state.</span>
  <span style="color: #000000; font-weight: bold;">this</span>.<span style="color: #006633;">setSupportedState</span><span style="color: #009900;">&#40;</span>goog.<span style="color: #006633;">ui</span>.<span style="color: #003399;">Component</span>.<span style="color: #006633;">State</span>.<span style="color: #006633;">OPENED</span>, <span style="color: #000066; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>opt_menu<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">this</span>.<span style="color: #006633;">setMenu</span><span style="color: #009900;">&#40;</span>opt_menu<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
  <span style="color: #000000; font-weight: bold;">this</span>.<span style="color: #006633;">timer_</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> goog.<span style="color: #003399;">Timer</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">500</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  <span style="color: #666666; font-style: italic;">// 0.5 sec</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
goog.<span style="color: #006633;">inherits</span><span style="color: #009900;">&#40;</span>goog.<span style="color: #006633;">ui</span>.<span style="color: #006633;">MenuButton</span>, goog.<span style="color: #006633;">ui</span>.<span style="color: #003399;">Button</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Hier erbt die Komponente MenuButton von Button. Zeile 3 zeigt den Aufruf des Konstruktor der Vaterklasse mit call().</p>
<h3>Funktionen</h3>
<p>Closure besitzt Funktionen für sehr viele Anwendungsfälle. Allein <code>goog.ui</code> enthält 138 verschiedene Komponenten. Dabei sind einfache Elemente wie ein <a title="Benutzerdialog Demo" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/prompt.html#">Benutzerdialog</a> genauso enthalten, wie eine Komponente zur <a title="Spellchecking Demo Closure" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/richtextspellchecker.html">Rechtschreibkorrektur</a>, einer <a title="Baumstruktur Closure" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/tree/demo.html">Baumstruktur </a>oder einem kompletten <a title="Closure Editor Demo" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/editor/editor.html">WYSIWYG-Editor</a>.<br />
Es sind Datumsfunktionen vorhanden, einfache Iteratoren, komplexere Datentypen wie Maps und Sets, i18n-Funktionen zur Lokalisierung und einfache Effekte.</p>
<p>Wer sich selbst mit den Möglichkeiten vertraut machen will, dem Empfehle ich die <a title="Closure API und Demos" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/index.html">API und die darin enthaltenen Demos</a>.</p>
<p>Die komplette Bibliothek ist über Subversion verfügbar:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">svn</span> checkout http:<span style="color: #000000; font-weight: bold;">//</span>closure-library.googlecode.com<span style="color: #000000; font-weight: bold;">/</span>svn<span style="color: #000000; font-weight: bold;">/</span>trunk<span style="color: #000000; font-weight: bold;">/</span> closure-library-read-only</pre></div></div>

<p>Achtung: Es sind hier auch alle Beispiele und Tests enthalten. Aus diesem Grund werden 156 MB heruntergeladen.</p>
<p>Closure Library ist verfügbar unter der <a title="Apache 2.0 Lizenz" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.simon-koelsch.de/91-google-javascript-bibliothek-closure-library/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

