Windows 7 Desktop Integration mit Internet Explorer 9: Sprunglisten

  • Article

Die nahtlose Integration von Webseiten in Windows 7 stellt eine Reihe von neuen Funktionen zur Verfügung. In meinem Artikel Anheften von Webseiten zeigte ich, wie sich mit Hilfe von Internet Explorer 9 Webseiten an die Taskleiste heften, auf den Desktop legen und in das Startmenü integrieren lassen. Als nächsten Schritt erweitern wir die angeheftete Webseite mit Aufgaben in der Sprungliste (Jump List Tasks), welche beim rechten Mausklick auf das Icon in der Taskleiste angeboten werden.

Sprunglisten

Über Aufgaben in der Sprungliste können angeheftete Webseiten spezifische Aktionen für die am häufigsten genutzten Funktionen anbieten. Basierend auf den Angeboten der Webseite kann man zum Beispiel die Hauptnavigation und/oder Elemente, die Besucher am häufigsten nutzen, integrieren. Anwender müssen dann nicht mehr den Webbrowser starten, die Webseite aufrufen und langwierig innerhalb der Webseite navigieren, um derartige Funktionen schnell nutzen zu können.

IE9-Sprungliste-Xing

Stattdessen reicht in Zukunft ein rechter Mausklick auf das Icon der an der Taskleiste angehefteten Webseite, um die gewünschte Funktion aufrufen zu können, ohne dass der Webbrowser vorher manuell geöffnet werden muss. Hier ein Screenshot der Implementierung unseres Partners XING:

Aufgaben

Alle Aufgaben einer Sprungliste können als statische URLs über einfache HTML Metatags innerhalb der .website Datei hinterlegt werden. Beim Anheften der Webseite werden diese ausgewertet und zwischengespeichert. Jedes Element lässt sich problemlos von der Webseite durch Verändern des jeweiligen Metatags beeinflussen, wobei die Änderung beim nächsten Start der angehefteten Webseite durch Klicken auf das Icon umgesetzt wird. Wir empfehlen daher, als Aufgaben nur Bereiche der Webseite zu integrieren, die sich nicht sehr häufig ändern, damit Anwender, welche sich an die Nutzung gewöhnt haben, eine konsistente Bedienung vorfinden.

Die URLs sind dabei nicht beschränkt auf die jeweils zu der angehefteten Webseite gehörende Domain. Das folgende Beispiel illustriert die Nutzung durch Definition von zwei Aufgaben: Aufgabe 1 und Aufgabe 2. Wenn der Besucher Aufgabe 1 anwählt,  wird die angeheftete Webseite geöffnet und Seite1.html dargestellt. Bei der Anwahl von Aufgabe 2 wird dagegen eine Seite2.html einer anderen Domain (in diesem Beispiel microsoft.de) geöffnet.

    1:  <META name="msapplication-task" content="name=Aufgabe 1;action-uri=https://server/Seite1.html;icon-uri=https://server/icon1.ico"/>

    2:  <META name="msapplication-task" content="name=Aufgabe 2;action-uri=https://microsoft.de/Seite2.html;icon-uri=https://server/icon2.ico"/>

Die angeheftete Webseite öffnet alle Aufgaben innerhalb der eigenen Registerkarte im aktuellen Fenster. Sollte noch keine Browserinstanz der angehefteten Webseite geöffnet sein, wird eine neue gestartet. Um die Sprungliste nicht zu unübersichtlich werden zu lassen, können maximal 5 Aufgaben pro Webseite definiert werden. Relative URLs im action-uri Feld werden zur Laufzeit aufgelöst mit dem URI der Webseite, welche die Metatags enthält.

Zur Veranschaulichung des obigen Beispiels hier der Quellcode für die Implementierung der Aufgaben des obigen Beispiels von XING:

    1:  <meta name="msapplication-navbutton-color" content="#006567" />

    2:  <meta name="msapplication-starturl" content="https://www.xing.com" />

    3:  <meta name="msapplication-task" content="name=Nachrichten;action-uri=https://www.xing.com/app/message;icon-uri=https://www.xing.com/img/n/ie9/icn_messages.ico" />

    4:  <meta name="msapplication-task" content="name=Meine Kontakte;action-uri=https://www.xing.com/app/contact;icon-uri=https://www.xing.com/img/n/ie9/icn_requests.ico" />

    5:  <meta name="msapplication-task" content="name=Persönliche Jobangebote;action-uri=https://www.xing.com/jobs/personal_postings;icon-uri=https://www.xing.com/img/n/ie9/icn_jobs.ico" />

    6:  <meta name="msapplication-task" content="name=Meine Events;action-uri=https://www.xing.com/events/my_events;icon-uri=https://www.xing.com/img/n/ie9/icn_events.ico" />

Eigene Kategorien

Eine weitere Möglichkeit der Integration in Windows 7 ist die Nutzung einer eigenen Kategorie innerhalb der Sprunglisten. In obigem Beispiel von XING wird zum Beispiel die selbsterstellte Kategorie Benachrichtigungen verwendet. Eine eigene Kategorie erlaubt die dynamische Integration von Information für Besucher, die Internet Explorer 9 nutzen.

Neue Einträge können einer eigenen Kategorie von jeder Webseite der gleichen Domain hinzugefügt werden. Sie werden visuell getrennt von den Aufgaben der Sprungliste dargestellt und können vom Besucher direkt beeinflusst werden. Er kann einzelne Einträge direkt über einen linken Mausklick öffnen, wobei dieser Eintrag dann in einer neuen Registerkarte innerhalb der gleichen Browserinstanz dargestellt wird. Mit Hilfe eines rechten Mausklicks kann er den Eintrag permanent an die Liste anheften oder auch aus der Liste entfernen.

Die eigene Kategorie kann man innerhalb der Sprungliste als kontextabhängige Navigationshilfe in Form von Zielen oder Aktionen nutzen. Ziele können der Zugriff auf Dateien, Dokumente oder spezifische URLs sein, während Aktionen zum Beispiel auch kontextabhängige Interaktionen oder Benachrichtigungen mit dem Backend beinhalten können:

  • Neue empfangene Emails
  • Freunde, die online sind
  • Erinnerungen an anstehende Aufgaben und Termine
  • ...

Dabei kann auch auf den bisherigen Verlauf zugegriffen werden. Einträge innerhalb der Kategorie stellen URLs mit nutzerspezifischen Inhalten dar. Das können – wie im obigen Beispiel – Elemente der Profilseite eines Social Networks sein. Es könnten aber genauso gut die Top 5 Radiostationen eines Musik Streaming-Angebots sein.

Ein weiterer Vorteil bei der Verwendung einer eigenen Kategorie ist die Tatsache, dass alle Einträge nach dem Schließen des Webbrowsers erhalten bleiben und Besuchern kontextsensitiven Zugriff auf Bereiche der Webseite anbieten, auch wenn die angeheftete Webseite nicht ausgeführt wird. Hier ein Screenshot der Implementierung unseres Partners XING:

IE9-Sprungliste-Kategorien

mit dem dazugehörigen Quellcode für die Implementierung der eigenen Kategorie Benachrichtigungen mit benutzerspezifischen Inhalten. XING hat den dafür notwendigen Quellcode in das Script sitemode.js ausgelagert, welches man mit Hilfe der Developer Tools über F12 im Internet Explorer 9 einsehen und mit Hilfe der Funktion JavaScript formatieren lesbar darstellen lässt:

IE9-Sprungliste-sitemode,js

    1:  var xing=xing||{};

    2:  xing.controls=xing.controls||{};

    3:  xing.controls.SiteMode={

    4:      _ids:{

    5:          MESSAGES:"header-messages",REQUESTS:"header-contacts"

    6:      }

    7:      ,_icons:{

    8:          UPDATE:"/img/n/ie9/icn_updates.ico",MESSAGE:"/img/n/ie9/icn_messages.ico",REQUEST:"/img/n/ie9/icn_requests.ico"

    9:      }

   10:      ,_urls:{

   11:          INBOX:"/app/message?box=inbox",UNCONFIRMED_CONTACTS:"/app/contact?op=toconfirm"

   12:      }

   13:      ,initialize:function(a){

   14:          try{

   15:              var b=window.external.msIsSiteMode()

   16:          }

   17:          catch(c){

   18:              return

   19:          }

   20:          if(b){

   21:              this._options=a;

   22:              this._messagesWrapper=$(this._ids.MESSAGES);

   23:              this._requestsWrapper=$(this._ids.REQUESTS);

   24:              this._control();

   25:              this._observe()

   26:          }

   27:      }

   28:      ,

   29:      _observe:function(){

   30:          Event.Notifications.observe("my_xing.update_counter",this._control.bind(this))

   31:      }

   32:      ,_control:function(){

   33:          var a=this._messagesWrapper&&Number(this._messagesWrapper.innerHTML),b=this._requestsWrapper&&Number(this._requestsWrapper.innerHTML);

   34:          if(a||b){

   35:              this._displayOverlayIcon(this._icons.UPDATE);

   36:              this._createJumplist({

   37:                  messages:a,requests:b

   38:              })

   39:          }

   40:          else this._clear()

   41:      }

   42:      ,_displayOverlayIcon:function(a){

   43:          window.external.msSiteModeSetIconOverlay(a)

   44:      }

   45:      ,_createJumplist:function(a){

   46:          window.external.msSiteModeClearJumpList();

   47:          window.external.msSiteModeCreateJumpList(this._options.notifications);

   48:          a.messages&&window.external.msSiteModeAddJumpListItem(this._options.new_messages+" ("+a.messages+")",this._urls.INBOX,this._icons.MESSAGE);

   49:          a.requests&&window.external.msSiteModeAddJumpListItem(this._options.new_requests+" ("+a.requests+")",this._urls.UNCONFIRMED_CONTACTS,this._icons.REQUEST);

   50:          window.external.msSiteModeShowJumpList()

   51:      }

   52:      ,_clear:function(){

   53:          window.external.msSiteModeClearIconOverlay();

   54:          window.external.msSiteModeClearJumpList()

   55:      } 

   56:  };

Umsetzung

In meinem Artikel Anheften von Webseiten zeigte ich anhand der Beispielseite winfuture.de, wie die neuen Funktionen mit Hilfe von Internet Explorer 9 umgesetzt werden können. Das dort beschriebene Verfahren zum Anfeten der Webseite und die Integration eines Icons mit unterschiedlich hochauflösenden Bildern ist mittlerweile umgesetzt. Jetzt möchte ich anhand der gleichen Webseite zeigen, wie einfach sich Aufgaben in Sprunglisten mit einer eigenen Kategorie umsetzen lassen:

Erstellen der Kategorie

Mit Hilfe der Methode msSiteModeCreateJumplist wird im ersten Schritt eine neue Kategorie mit der Bezeichnung MyWinFuture erstellt:

    1:  window.external.msSiteModeCreateJumplist('MyWinFuture');

Die neue Kategorie wird erst sichtbar, wenn mindestens ein Eintrag hinzugefügt wird. Jede weitere ersetzt die jeweils vorher erstellte Kategorie.

Anlegen eines Eintrages

Im zweiten Schritt füge ich die neuen Einträge MyWinFuture anzeigen und Öffentliches Profil hinzu. Der erste Parameter legt dabei den Namen, der zweite die URL fest, wenn der Eintrag ausgewählt wird. Über den dritten Parameter kann ein eigenes Icon angegeben werden, welches bei der Darstellung des Eintrages in der eigenen Kategorie der Sprungliste genutzt wird:

    1:  window.external.msSiteModeAddJumpListItem('MyWinFuture anzeigen', 'https://winfuture.de/mywinfuture.html', 'https://i.wfcdn.de/5/MyWinFuture.ico');

    2:  window.external.msSiteModeAddJumpListItem('Öffentliches Profil', 'https://winfuture.de/mywinfuture,115515.html', 'https://i.wfcdn.de/5/Profil.ico');

Über einen optionalen vierten Parameter window-type kann die Darstellung beeinflusst werden:

  • tab – in einer neuen Registerkarte (default)
  • self – in der aktuellen Registerkarte
  • window – in einem neuen Fenster der angehefteten Webseite
Anzeigen des Eintrages

Nach dem Aufruf der Methode msSiteModeShowJumplist aktualisiert Windows automatisch die Sprungliste:

    1:  window.external.msSiteModeShowJumplist();
Löschen der Liste

Der Aufruf der Methode msSiteModeClearJumplist löscht sofort alle Einträge der eigenen Kategorie in der Sprungliste.

    1:   window.external.msSiteModeClearJumplist();

Darstellung

Die APIs der angehefteten Webseiten erlaubt die Darstellung von maximal 20 Einträgen gleichzeitig in einer eigenen Kategorie. Ab dem 21ten Eintrag werden die als erstes hinzugefügten Einträge überschrieben. Schon bestehende Einträge werden dabei nicht doppelt erzeugt, sondern an in der Sprungliste ganz nach oben geschoben. Dabei kann jede Webseite der gleichen Domain Einträge der Sprungliste über die JavaScript APIs modifizieren.

In besonderen Fällen werden jedoch auch weniger Einträge angezeigt, wenn zum Bespiel die Bildschirmauflösung oder Schriftgröße die Darstellung aller Einträge nicht erlaubt. Dann wird die Liste von oben soweit gekürzt, bis die verbleibenden Einträge vollständig dargestellt werden können.

Alle Webseiten sind prinzipiell für die Inhalte ihrer Sprunglisten selbst verantwortlich. Wie oben schon erwähnt können Besucher jedoch auch einzelne Einträge manuell entfernen. Über diesen Vorgang kann die Webseite sich benachrichtigen lassen, solange sie sich für eines der folgenden Events registriert:

    1:  document.addEventListener('mssitemodejumplistitemremoved', removed, false);

    2:  document.attachEvent('onmssitemodejumplistitemremoved', removed);

Dadurch wird ein Callback mit einem URL-Parameter erzeugt:

    1:  function removed(url) { … }

Allerdings kann dadurch nicht die Benutzeraktion abgefangen oder von Windows ein Shell Event zurückgeliefert werden. Das Event wird erst dann erstellt, wenn der Besucher einen Eintrag in der Sprungliste verändert und die Webseite die Methode msSiteModeShowJumplist aufruft. Danach wird die API die Sprungliste synchronisieren.

Weitere Informationen

  1. Anheften von Webseiten
  2. Sprunglisten
  3. Benachrichtigungen und Steuerfunktionen

Have fun!

Daniel