Der neue Internet Explorer 9 beinhaltet die Möglichkeit Windows 7 Funktionen der Taskleiste zu verwenden. Dabei benötigt man für die einzelnen Funktionen maximal drei Zeilen Code. Dieser Beitrag stellt diese Funktionen vor und zeigt, wie man diese in seine eigenen Webseiten integrieren kann.

Video-Demonstration

Get Microsoft Silverlight

Festlegen das die Webseite im Standard-Modus dargestellt werden soll

Damit der Internet Explorer die Seite im Standard-Modus darstellt, welche zur bestmöglichen Darstellung beiträgt, muss man der Webseite dies mitteilen. Macht man dies nicht, versucht der Internet Explorer 9 und andere Browser, die Webseite nach eigener Einschätzung darzustellen.

image

Die obige Darstellung zeigt den Internet Explorer, wie er eine Seite darstellt, wenn man keinen Standard auswählt.

Der Sourcecode der Webseite:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Keine Festlegung auf Standard</title>

</head>

<body>

<p>…</p>

</body>

</html>

Die folgende Darstellung zeigt, wie es aussehen kann, wenn der Browser exakt weiß wie die Seite zu rendern ist.

image

Dazu benötigt man lediglich eine weitere Zeile im HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Festlegung auf Standard</title>

<meta http-equiv="X-UA-Compatible" content="IE=9" />

</head>

<body>

<p>…</p>

</body>

</html>

Definieren eines Symbols für die Webseite

Viele Webseiten zeigen neben der Adresse auch ein eigenes Symbol an. Um diese Funktion in seine eigene Webseite ebenfalls zu ermöglichen, ist ebenfalls nur eine Zeile HTML-Code notwendig.

image

Der Source-Code der oben dargestellten Seite:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Festlegung auf Standard</title>

<meta http-equiv="X-UA-Compatible" content="IE=9" />

<link href="/icons/site.ico" rel="shortcut icon" type="image/x-icon" />

</head>

<body>

<p>…</p>

</body>

</html>

Anheften einer Webseite an die Startleiste von Windows 7

Eines der spannendsten neuen Funktionen im Internet Explorer 9, ist die Möglichkeit Webseiten an die Startleiste in Windows 7 anzuheften. Das macht man einfach in dem man das Symbol der Webseite neben der eigentlichen Adresse, oder aber den Karteireiter der Webseite, in die Startleiste zieht.

image

Anschließend hat man die Webseite auf einen Klick parat in der Startleiste

image

Dies kann man übrigens mit jeder Webseite machen. Dazu ist keinerlei HTML-Code notwendig.

Wenn man die Webseite direkt aus der Startleiste startet stehen einem direkt noch viel mehr Funktionen zur Verfügung. Dafür werden im folgendem einige Beispiele demonstriert. Keine dieser Funktionen sorgt dafür, dass eine Webseite nicht in anderen Browsern dargestellt werden kann. Dennoch sollte man vorab prüfen ob die Webseite gerade im Internet Explorer 9 angezeigt wird oder nicht. Je nach dem kann man die Funktionen einfach „hinzuschalten“.

Erkennen, das die Seite im Internet Explorer 9 ausgeführt wird

Wie erkennt man am einfachsten ob die Webseite gerade im Internet Explorer 9 oder in einem anderen Browser angezeigt wird.

Das folgende Beispiel zeigt ein Skript zur Erkennung des Internet Explorer 9.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Wird diese Seite im Internet Explorer 9 dargestellt?</title>

<meta http-equiv="X-UA-Compatible" content="IE=9" />

<script type="text/javascript">

function isIe9() {

var version = getInternetExplorerVersion();

if (version >= 9) {

return true;

}

else {

return false;

}

}

function getInternetExplorerVersion() {

var rv = -1; // Return value assumes failure.

if (navigator.appName == 'Microsoft Internet Explorer') {

var ua = navigator.userAgent;

var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");

if (re.exec(ua) != null)

rv = parseFloat(RegExp.$1);

}

return rv;

}

</script>

</head>

<body>

<p>

<input id="Button1" type="button" value="button" onclick="javascript:alert(isIe9());" />

</p>

</body>

</html>

Diese Seite macht nichts anderes als einen Button darzustellen. Betätigt man diesen, erscheint eine Meldung die Angibt ob die Seite im Internet Explorer angezeigt wird, oder ob man einen anderen Browser benutzt.

Erkennen das man im „Site-Mode“ ist

Was ist der „Site-Mode“? Als Site-Mode bezeichnet man den Modus, wenn man eine Anwendung aus der Startleiste heraus startet. Dadurch kann eine Webseite zusätzliche Funktionen der Windows Startleiste verwenden.

Eine einfache Möglichkeit zu erkennen, ob die Seite im Site-Mode betrieben wird, ist ein kleines JavaScript-Snippet:

function isSiteMode() {

try {

if (window.external.msIsSiteMode()) {

return true;

}

else {

return false;

}

}

catch (e) {

return false;

}

}

Diese Funktion liefert „true“ zurück, wenn die Seite im Site-Mode gestartet wurde. Andernfalls wird „false“ zurück geliefert.

Diese Methode wird in den beigefügten Beispielen verwendet, um die zusätzlichen Funktionen zu aktivieren.

Anpassen der Darstellung der Webseite

Im Site-Mode hat man die Möglichkeit, die Darstellung der eigenen Seite anzupassen. Man kann definieren, wie Navigationsbuttons des Internet Explorer 9 aussehen, wie groß das Fenster beim Starten der Seite sein soll und wie welcher Name und Tooltip in der Startleiste erscheinen soll.

image

Der dazu notwendige HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Festlegung auf Standard</title>

<meta http-equiv="X-UA-Compatible" content="IE=9" />

<link href="/icons/site.ico" rel="shortcut icon" type="image/x-icon" />

<meta name="application-name" content="Sample Site Mode Application"/>

<meta name="msapplication-navbutton-color" content="lightgreen" />

<meta name="msapplication-tooltip" content="Starte die Anwendung" />

<meta name="msapplication-starturl" content="/default.htm" />

<meta name="msapplication-window" content="width=800;height=600" />

</head>

<body>

<p>…</p>

</body>

</html>

Der Parameter msapplicatipon-navbutton-color definiert die Hauptfarbe der Navigationsbuttons. Die Schreibweise für Farben kann nach Namen oder Hexadecimal-Code erfolgen.

Mit dem Parameter msapplication-navbutton-color kann festgelegt warden, welcher Text als Tooltip über dem Symbol der angehefteten Webseite erscheinen soll.

Die Url der Webseite, die gestartet werden soll, kann mit dem Parameter msapplication-starturl definiert werden. Wichtig hierbei ist, dass man jede beliebige Webseite innerhalb der aktuellen Website und auch Links innerhalb einer Seite definiert werden können.

Der Parameter msapplication-window legt fest, wie groß das Fenster sein soll, wenn die Anwendung gestartet wird.

Erstellen von Einträgen in der Sprungliste des Kontextmenüs

Bisher befanden sich im Kontextmenü nur allgemeine Funktionen zu Programmen, wie z.B. Schließen und Verschieben. Seit Windows 7 hat man die Möglichkeit in dieses Kontextmenü eigene Menüpunkte zu integrieren.

image

Die genaue Bezeichnung für solche Funktionen lautet: Sprunglisten. Damit lassen sich Funktionen direkt innerhalb einer bestimmten Website anspringen. Die einzelnen Einträge innerhalb einer Sprungliste können auch in Kategorien gruppiert und mit einzelnen Symbolen versehen werden.

Sprunglisten können auf zwei Arten erstellt werden. Durch Meta-Tags können Sprunglisten direkt erzeugt werden. Verwendet man JavaScript um die Einträge der Sprungliste zu erzeugen, so kann man dies dynamisch zur Laufzeit machen.

Die Meta-Tag Variante sieht wie folgt aus:

<META name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"/>

<META name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"/>

Die JavaScript-Variante sieht wie folgt aus:

window.external.msSiteModeCreateJumplist('Meine Site');

window.external.msSiteModeAddJumpListItem('Funktion 4', '07_jumplist.htm', '/icons/add.ico');

window.external.msSiteModeAddJumpListItem('Funktion 3', '07_jumplist.htm', '/icons/delete.ico');

window.external.msSiteModeAddJumpListItem('Funktion 2', '07_jumplist.htm', '/icons/refresh.ico');

window.external.msSiteModeAddJumpListItem('Funktion 1', '07_jumplist.htm', '/icons/search.ico');

window.external.msSiteModeShowJumplist();

Die Funktion window.external.msSiteModeCreateJumplist erzeigt eine neue Sprungliste. Die Funktion window.external.msSiteModeAddJumpListItem fügt einen neuen Eintrag mit einer Zieladresse und einem Symbol hinzu.

Die Funktion window.external.msSiteModeShowJumplist aktualisiert die Taskleiste.

Anzeigen von Buttons im Overlay

Eine Funktion die man vom Mediaplayer her kennt, ist die Möglichkeit Buttons in der Anwendungsvorschau der Taskleiste, Buttons einbauen zu können. So kann man z.B. den Mediaplayer steuern (nächstes oder vorheriges Lied und Start/Stop) in dem man mit der Maus auf das Symbol in der Symbolleiste geht und sich die Vorschau der Anwendung ansieht. Dadurch muss nicht unbedingt die gesamte Anwendung in den Vordergrund holen.

image

Diese Möglichkeit hat auch jetzt eine Webseite im Internet Explorer 9 unter Windows 7.

Diese Möglichkeit hat auch jetzt eine Webseite im Internet Explorer 9 unter Windows 7.

Der JavaScript-Code sieht dazu wie folgt aus:

<script type="text/javascript">

function createThumbnailButtons() {

if (!isSiteMode()) {

return;

}

alert('createThumbnailButtons');

btn1 = window.external.msSiteModeAddThumbBarButton('/icons/add.ico', 'button 1');

btn2 = window.external.msSiteModeAddThumbBarButton('/icons/delete.ico', 'button 2');

btn3 = window.external.msSiteModeAddThumbBarButton('/icons/edit.ico', 'button 3');

window.external.msSiteModeShowThumbBar();

document.addEventListener('msthumbnailclick', handler1, false);

}

</script>

Kompatibilität mit anderen Browsern

Die neuen Funktionalitäten stehen nur im Internet Explorer zur Verfügung. Allerdings lassen sich die Webseiten ohne Probleme auch, ohne die neue Funktionalität, in anderen Browsern darstellen.

Zusammenfassung

Basiert noch auf der Beta Version des Internet Explorer 9, aber wird auch in der finalen Version enthalten sein.

Weiterführende Links

http://msdn.microsoft.com/library/gg131029(VS.85).aspx

 

Der Sourcecode für das einzelne Projekt kann hier heruntergeladen werden:

http://win7togo.codeplex.com/releases/view/56185 

Dieses und weitere Beispiele befinden sich hier: http://win7togo.codeplex.com