Maxund ichhaben einige Kundenprojekte, bei welchen eine Integration der neuen Internet Explorer 8 Features (Web Slices, Accelerators und Open Search) gefordert wird, zum Anlass genommen, eine All-In-One Demo zur Verfügung zu stellen, welche darstellt, wie die neuen Funktionen des IE8 in eigene Web Pages und Sites integriert werden können.
Das Nette an der Sache besteht meiner Meinung nach darin, dass diese neuen Funktionen für IE8-Nutzer wirklich hilfreich sind, dass sie mehr als einfach in bestehende Web Sites integriert werden können und vor allem dass sie andere Browser in keinster Weise stören, wenn der Benutzer eben nicht den IE als Browser verwendet.
Download des Beispiels von Max und mir – hier klicken!
In den nächsten Abschnitten beschreiben wir, wie Sie die neuen Features des Internet Explorer 8 in Ihren Web Anwendungen allen Nutzern zur Verfügung stellen können.
Accelerators – Ein einfaches XML-File
Offizielle Dokumentation:
http://msdn.microsoft.com/en-us/library/dd464677(VS.85).aspx
Eine erste wirklich nette Sache sind Accelerators. Diese sind nichts anderes als Smart-Tags wie wir sie auch schon von Office-Anwendungen wie Word kennen. Über Accelerators können Sie einfach direkt aus markiertem Text, Links oder dem aktuellen Dokument auf andere Web Pages springen und Parameter für beliebige Aktionen mitgeben. Die Parameter werden einfach als Query-Strings entsprechend Ihrer Accelerator-Definition and die Ziel-URL übergeben.
Typische Anwendungsfälle sind etwa der Sprung auf eine Such-Seite mit dem selektierten Text als Suchbegriff oder auch der Sprung auf eine Karte um einen bestimmten Ort zu suchen, dessen Name dem selektierten Text entspricht. Natürlich können Sie so auch einen Sprung auf eine “Business-Page” realisieren, die beispielsweise jenen Kunden anzeigt, dessen Name dem selektierten Text entspricht etc.
Die Erstellung eines Accelerators erfordert zwei einfache Schritte von uns:
(1) Erstellung eines XML-Files mit Beschreibungsinformationen zum Accelerator
(2) Aufruf einer JavaScript-Methode aus dem HTML UI zur Einrichtung
Nachfolgend finden Sie die Accelerator-Beschreibung des Beispiels, welches Max und ich entwickelt haben. Dieses XML legen Sie einfach in einer XML-Datei in einem beliebigen Verzeichnis Ihrer Web Site ab:
1: <?xml version="1.0" encoding="UTF-8"?>
2: <openServiceDescription
3: xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
4: <homepageUrl>http://localhost:5681/IE8Integration/</homepageUrl>
5: <display>
6: <name>Search with codefest.at</name>
7: <icon>http://www.codefest.at/themes/MSDN/favicon.ico</icon>
8: </display>
9: <activity category="Search">
10: <activityAction context="selection" >
11: <preview action="http://localhost:5681/IE8Integration/AcceleratorPreview.aspx">
12: <parameter name="q" value="{selection}" />
13: <parameter name="r" value="false" />
14: </preview>
15: <execute action="http://localhost:5681/IE8Integration/AcceleratorPreview.aspx">
16: <parameter name="q" value="{selection}" type="text" />
17: <parameter name="r" value="true" />
18: </execute>
19: </activityAction>
20: </activity>
21: </openServiceDescription>
Das XML beinhaltet lediglich beschreibende Informationen wie etwa den Title sowie Informationen über die aufzurufenden Web Pages mit deren Query-String-Parametern. Wesentlich ist dabei, dass die URLs aller Aktionen und Vorschau-Aktionen in diesem XML in der durch das Tag <homepageUrl /> angegebenen Domain liegen müssen!
Nachdem Sie das Accelerator-XML erstellt und gespeichert haben, müssen Sie es noch irgendwie verwenden. Dieses XML wird vom IE zur Einrichtung des Accelerators im UI verwendet. D.h. also, Sie benötigen eine JavaScript-Methode zur Einrichtung des Accelerators sowie ein UI-Element, über welches der Benutzer die Einrichtung anstoßen kann. Im nachfolgenden Beispiel finden Sie genau das benötigte Script sowie einen Button, der das Script aufruft und über welchen der Benutzer den Accelerator somit einrichten kann:
1: <script type="text/javascript" language="javascript"> 1:
2:
3: function InstallAccelerator() { 4: if(typeof(window.external.AddService) != "undefined") { 5: window.external.AddService('AcceleratorDemo.xml'); 6: } else { 7: alert("Accelerators are not supported by this browser!"); 8: }
9: }
10:
</script>
2:
3: <!-- ... other code ... -->
4:
5: <input type="button" value="Install accelerator" onclick="javascript:InstallAccelerator()" />
6:
7: <!-- ... other code ... -->
Mit diesen Zeilen HTML und JavaScript stellt sich die User Experience dem Endbenutzer nun wie in nachfolgender Abbildung gezeigt dar. Der Benutzer klickt den Button worauf er gefragt wird, ob er den Accelerator installieren möchte. Danach steht der Accelerator zur Verfügung, wenn der Benutzer etwa Text Markiert und auf den “halb-transparent” erscheinenden, blauen Accelerator klickt. Ist recht praktisch und eigentlich total einfach zu implementieren. Nachfolgend die User Experience dargestellt (klicken zum Vergrößern):
![Accelerator[1]](http://www.codefest.at/image.axd?picture=Accelerator%5B1%5D.jpg "Accelerator[1]")
Search Provider Integration basierend auf Open Search Standard
Offizielle Dokumentation:
http://msdn.microsoft.com/en-us/library/dd464679(VS.85).aspx
Als nächstes betrachten wir den meiner Meinung nach coolsten Teil der IE8-Möglichkeiten – die Integration eines Search Providers nach dem Open Search Standard. Auch hier beginnen wir mit der Erstellung eines einfachen XML-Dokuments, welches alle Informationen über den Search-Provider für den Browser beinhaltet:
1: <?xml version="1.0" encoding="utf-8" ?>
2: <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
3: xmlns:ie="http://schemas.microsoft.com/Search/2008/">
4: <ShortName>Codefest Search Provider</ShortName>
5: <Image height="16" width="16" type="image/icon">http://www.codefest.at/themes/MSDN/favicon.ico</Image>
6: <Url type="text/html" template="http://localhost:5681/IE8Integration/AcceleratorPreview.aspx?q={searchTerms}&r=true"/>
7: <!--<Url type="application/x-suggestions+json" template="http://suggestions.example.com/search.aspx?q={searchTerms}"/>-->
8: <Url type="application/x-suggestions+xml" template="http://localhost:5681/IE8Integration/SuggestionDemo.aspx?q={searchTerms}"/>
9: <ie:PreviewUrl type="text/html" template="http://localhost:5681/IE8Integration/AcceleratorPreview.aspx?q={searchTerms}&r=false"/>
10: </OpenSearchDescription>
Das XML-Dokument beinhaltet den Titel des Providers, jene URL mit Query String Parametern, die zur Suche aufgerufen werden muss sowie eine separate URL für sogenannte Suggestions, die während des Tippens in der Search-Bar des Browsers bereits angezeigt werden.
Optional kann man den Search-Provider auch über ein HTML-UI-Element manuell installieren (wie auch den Accelerator) und damit dem Benutzer ein “prominentes” Element auf der Web Page zur Installation des Providers anbieten. Dafür benötigt man wieder ein kleines JavaScript Fragment, welches dann wiederum von einem beliebigen HTML-Element aufgerufen werden kann:
1: <script type="text/javascript" language="javascript"> 1:
2:
3: function InstallSearchProvider() { 4: if (typeof (window.external.AddSearchProvider) != "undefined") { 5: window.external.AddSearchProvider('SearchProviderDemo.xml'); 6: } else { 7: alert("Search providers are not supported by this browser!"); 8: }
9: }
10:
</script>
2:
3: <!-- ... -->
4:
5: <input type="button" value="Install search provider" onclick="javascript:InstallSearchProvider()" />
6:
7: <!-- ... –>
In nachfolgenden Screen-Shots sehen Sie, wie sich das Einbinden dieser Funktionalität auswirkt (klicken zum Vergrößern):
![OpenSearch[1]](http://www.codefest.at/image.axd?picture=OpenSearch%5B1%5D.jpg "OpenSearch[1]")
Web Slices – Kinderspiel für HTML-Götter;)
Offizielle Dokumentation:
http://msdn.microsoft.com/en-us/library/cc956158(VS.85).aspx
Als letztes betrachten wir noch Web Slices. Die sind für alle HTML-Freaks ein Kinderspiel. Denn grundsätzlich sind WebSlices nichts anderes als HTML-Inhalte, die der Internet Explorer 8 mit Vorschaufunktion in die Favoriten-Leiste des Browsers einbinden kann. Diese Inhalte werden vom IE8 mittels vordefinierter, spezieller Style-Sheet Klasse erkannt, auf deren Basis der IE das Web Slice für die Favorites Bar unter dem Button zur Subscription von Feeds anbietet. In unserer Demo haben wir ein webslice eingebaut, welches in ein unsichtbares <div />-Tag gepackt ist. Dieses verwendet die spezielle Style-Sheet-Klasse hslice:
1: <!--
2: -----------------
3: --- Web Slice ---
4: -----------------
5:
6: This is a invisible div used as a web slice, but if not
7: using the display: none style you can make visible parts of your
8: web page to a web slice, as well!
9: -->
10: <div id="testwebslice" class="hslice" style="display: none">
11: <span class="entry-title">Max & Mario Web Slice</span>
12: <div class="entry-content">
13: <div style="font-family: Verdana">
14: Here goes our cool web slice content!
15: <br />
16: Current time: <% 1: = DateTime.Now.ToLongTimeString()
%>
17: </div>
18: </div>
19: <a rel="Bookmark" href="http://www.codefest.at" />
20: <span class="ttl">20</span>
21: <!--<abbr class="endtime" title="2009-10-30T15:54:00+01:00" />-->
22: </div>
Das ist alles. Natürlich lassen sich auf diese Weise auch mehrere WebSlices in eine Web Page integrieren. Es besteht natürlich auch die Möglichkeit, sichtbaren Inhalt einer Page als WebSlice zur Verfügung zu stellen. In diesem Fall würden Sie einfach anstatt des Styles display:none einen alternativen Style für das <div /> in obigen Beispiel verwenden.
Außerdem lassen sich durch untergeordnete Elemente mit vordefinierten Style-Sheet-Klassen bestimmte Verhaltensweisen des Slices kontrollieren. Diese sind alle auf der MSDN hier dokumentiert.
Natürlich kann man auch WebSlices manuell über JavaScript installieren und somit dem Benutzer die Einrichtung des Slices prominent über seine Web Page anbieten. Sobald das Slice eingerichtet ist, sind Sie mit Ihrer Web Page dann auch immer in der Favorites-Symbolleiste sichtbar, sobald der User seinen Browser öffnet.
1: <script> 1:
2: function InstallWebSlice() { 3: if (typeof (window.external.AddToFavoritesBar) != "undefined") { 4: window.external.AddToFavoritesBar('http://localhost:5681/IE8Integration/Default.aspx#testwebslice', 'Loading Mario and Max Slice...', 'slice'); 5: } else { 6: alert("Web slices are not supported by your browser, please use IE8:)"); 7: }
8: }
</script>
2:
3: <!-- ... -->
4:
5: <input type="button" value="Install test slice" onclick="javascript:InstallWebSlice()" />
6:
7: <!-- ... -->
Nachfolgend sehen Sie die User Experience, die durch dieses sehr einfache Prinzip ermöglicht wird (klicken um zu vergrößern):
![WebSlice[1]](http://www.codefest.at/image.axd?picture=WebSlice%5B1%5D.jpg "WebSlice[1]")
Abschließende Bemerkungen
Man kann sagen was man will, die Integration der Internet Explorer 8 Funktionen in eigene Web Sites ist wirklich sehr einfach – und sie stört andere Browser auch keineswegs. D.h. man kann eigentlich nur gewinnen...
Zudem kommt noch, dass mittlerweile auch schon Plug-Ins zur Unterstützung dieser Funktionen für andere Browser in Entwicklung sind. Es ist also nur eine Frage der Zeit, bis nachgezogen wird. Was auch wiederum zeigt, dass WebSlices, Accelerators und natürlich Open Search gute Ideen sind, die vom Markt angenommen werden. Ach ja, Open Search wird übrigens auch schon von den meisten anderen Browsern unterstützt, der IE8 hat mit Visual Search (Images etc.) nur etwas drauf gelegt und bleibt trotzdem kompatibel;)
In diesem Sinne hoffen wir, Ihnen mit diesem Artikel interessante Neuerungen vorgestellt zu haben und hoffen, Ihnen die Integration dieser Neuerungen in Ihre Web Sites auch entsprechend zu vereinfachen:)
Liebe Grüße
Mario & Max
Subscribe