(0) exportieren Drucken
Alle erweitern
0 von 1 fanden dies hilfreich - Dieses Thema bewerten.

Arbeiten mit benutzerdefinierten Symbolüberlagerungen auf angehefteten Websites

.NET Framework 3.0

In dieser Aufgabe erfahren Sie, wie Symbolüberlagerungen erstellt, eingestellt und gelöscht werden, um Benutzer über Aktivitäten innerhalb der angehefteten Website zu benachrichtigen.

Hinweis  Zum Anzeigen einer Symbolüberlagerung müssen sich die Schaltflächen der Taskleiste im Standardmodus für große Symbole befinden. Kleine Taskleistensymbole unterstützen keine Symbolüberlagerungen. Außerdem werden Symbolüberlagerungen nur angezeigt, während das Fenster der angehefteten Website aktiv ist. Wenn Sie das Fenster der angehefteten Website schließen, wird das Symbol von der Schaltfläche der Taskleiste entfernt.

Hinweis  Weitere Informationen zu Benachrichtigungen unter Windows 8 finden Sie unter Benachrichtigungen über eine angeheftete Site in Windows 8.

In dieser Aufgabe verwendete Methoden

Folgende Methoden werden in diesem Thema eingeführt:

msSiteModeSetIconOverlay(bstrIconUrl, bstrDescription)

Mithilfe der window.external.msSiteModeSetIconOverlay-Methode können Sie eine 16 x 16 Pixel große Symbolüberlagerung zur Schaltfläche der Taskleiste mit der angehefteten Website hinzufügen, mit der Sie den Benutzern Hinweise, Benachrichtigungen und den Anwendungsstatus mitteilen können.

msSiteModeClearIconOverlay()

Mit der window.external.msSiteModeClearIconOverlay-Methode wird die Symbolüberlagerung von der Schaltfläche der Taskleiste entfernt.

Erstellen von Symbolüberlagerungen

Ein Überlagerungssymbol ist eine kleine 16 x 16 Pixel große Grafik, die über dem Symbol der Schaltfläche der Taskleiste angezeigt wird. Wahrscheinlich sind Sie mit Symbolüberlagerungen bereits vertraut. Zwei allgemeine Beispiele sind der kleine Pfeil, der Desktopverknüpfungen von Dateien unterscheidet, sowie das Schild auf Anwendungssymbolen für Anwendungen, die zum Ausführen Administratorrechte erfordern. Auf der Taskleiste haben Symbolüberlagerungen eine etwas andere Bedeutung. Hier können Sie sie als Symbole zur "Benachrichtigung" betrachten, da mit ihrer Hilfe Benutzer über Aktivitäten in der Anwendung benachrichtigt werden.

Sie können Symbole für Symbolüberlagerungen mithilfe von X-Icon Editor erstellen, so wie Sie das vom Websitesymbol in Anpassen des Websitesymbols bereits kennen. X-Icon Editor ist eine kostenlose Anwendung (basierend auf HTML5 Canvas), mit der Sie Symbole mit hoher Auflösung direkt im Browser erstellen können. Sie können eine Vielzahl von Bildern in den Editor importieren und diese schnell in Symbole konvertieren. Die folgenden 16 x 16 Pixel großen Symbolüberlagerungen wurden z. B. aus Bildern erstellt.

Stern, Kreis und Gänseblümchen

Um zu beginnen, benötigen Sie nur ein quadratisches Bild—einfach oder ausgefallen—, das dem Stil Ihrer Website entspricht. Nach dem Importieren des Bilds in X-Icon Editor stellen Sie sicher, dass die Hintergrundfarbe entfernt wurde. Dazu können Sie den Hintergrund mit dem Radierer (Eraser Tool) entfernen oder den Hintergrundbereich mithilfe des Füllwerkzeugs (Paint Bucket Tool) mit einer völlig transparenten Farbe ausfüllen. Für eine hohe Detailtreue bearbeiten Sie zuerst das 64 x 64 Pixel große Symbol und kopieren das Bild dann in das 32 x 32 Pixel große Symbol usw. Bevor Sie das Symbol exportieren, löschen Sie die nicht erforderlichen Symbolformate, um die Größe der sich ergebenden Datei zu minimieren.

Verwenden von Symbolen zum Weitergeben von Informationen

Überlegen Sie, wie Sie die Symbole für Ihre Benutzer möglichst intuitiv gestalten. Benachrichtigungssymbole können Informationen zum Zustand einer Anwendung weitergeben, z. B. die Anzahl empfangener Nachrichten, wie bei den folgenden numerischen Symbolüberlagerungen gezeigt.

Numerische Überlagerungssymbole, 1 bis 5 und höher

Bei der Verwendung von numerischen Symbolen gibt es jedoch Einschränkungen. Obwohl einzelne Ziffern problemlos funktionieren, können größere Zahlen schwer zu lesen sein. Außerdem erfordert jede Zahl eine eigene Symbolressource, die schwer zu erstellen und zu verwalten sein kann. Zusätzlich erhöht sie die Anzahl von Dateianforderungen an die Website. Erwägen Sie beim Erstellen numerischer Symbolüberlagerungen das Einbeziehen eines allgemeinen Symbols für Zahlen, die außerhalb des von Ihnen bereitgestellten Bereichs liegen, z. B. den gelben Stern im vorherigen Bild.

Sie können in X-Icon Editor auch numerische Symbole erstellen. Beginnen Sie mit einem Hintergrundbild, das groß genug ist für eine Zahl wie 5 oder 8. Wenden Sie dann eine Zahl an, und exportieren Sie das Symbol. Um das nächste Symbol zu erstellen, klicken Sie einfach auf den Rückgängig-Pfeil (Undo), um die Zahl zu entfernen, bevor Sie die nächste Zahl in der Reihenfolge anwenden.

Hinweis  Seien Sie kreativ! Versuchen Sie, der Anwendung durch die Auswahl der Symbole eine Bedeutung beizusteuern.

Festlegen der Symbolüberlagerung

Sie können ein Überlagerungssymbol mithilfe der msSiteModeSetIconOverlay-Methode anzeigen, wie im folgenden Codebeispiel gezeigt.


function setOverlayIcon(iconUri, descText)
{
    try {
        if (window.external.msIsSiteMode()) {
            window.external.msSiteModeSetIconOverlay(iconUri, descText);
        }
    }
    catch (e) {
        // Fail silently.
    }
}


Hinweis  Der bstrDescription-Parameter bietet eine umgängliche Beschreibung zu den Informationen, die durch die Symbolüberlagerung übermittelt werden. Wählen Sie einen Text aus, der von den Sprachausgaben gelesen werden kann.

Dieser Aufruf ersetzt die vorherige Symbolüberlagerung, sofern eine vorhanden war. Wenn die Schaltfläche der Taskleiste mit anderen Schaltflächen gruppiert ist, zeigt der Stapel nur die letzte Symbolüberlagerung an.

Löschen der Symbolüberlagerung

Rufen Sie die msSiteModeClearIconOverlay-Methode auf, um die Symbolüberlagerung zu entfernen, wie im folgenden Beispiel veranschaulicht.


function clearOverlayIcon()
{
    try {
        if (window.external.msIsSiteMode()) {
            window.external.msSiteModeClearIconOverlay();
        }
    }
    catch (e) {
        // Fail silently.
    }
}


Zusammenfassung

In der Beispielanwendung TweetFeed werden bis zu fünf neue Tweets auf der Grundlage der angegebenen Suchzeichenfolge angezeigt. Benutzer werden mithilfe von Symbolüberlagerungen über aktuelle Aktivitäten informiert. Beispielsweise wird die Lupe angezeigt, wenn die Anwendung nach neuen Tweets sucht.

Suche nach neuen Tweets

Das folgende Skript, das aus dem ursprünglichen TweetFeed-Beispiel leicht abgewandelt wurde, zeigt eine Möglichkeit, um den Code für die Symbolüberlagerung in einer einzigen Funktion zu kapseln. Dieser Code beruht auf den zuvor in dieser Aufgabe definierten Funktionen.


var states = { CLEAR: 0, COMPLETE: 1, ERROR: 2, SEARCH: 3 };
var messages = [ "Waiting...",
                 "Searching tweets...",
                 "Found a tweet!",
                 "Oops! Twitter error." ];

function setStatus(status)
{
    switch (status) {
        case states.CLEAR:
            clearOverlayIcon();
            break;

        case states.COMPLETE:
            if (unreadTweetCounter == 0) {
                clearOverlayIcon();
            }
            else {
                setOverlayIcon('Images/num_' + unreadTweetCounter + '.ico',
                                messages[2]);
            }
            break;

        case states.ERROR:
            if (unreadTweetCounter == 0) {
                setOverlayIcon('Images/error.ico', messages[3]);
                setTimeout("setStatus(states.CLEAR)", 2000);
            }
            break;

        case states.SEARCH:
            setOverlayIcon('Images/search.ico', messages[1]);
            break;
    }
}


Mitunter ist mehr als eine Symbolüberlagerung erforderlich, um sich bemerkbar zu machen. In der Aufgabe Aufblinken der Schaltfläche der Taskleiste mit der angehefteten Website erfahren Sie, wie dringendere Erfordernisse durch Aufblinken der Schaltfläche der Taskleiste angezeigt werden.

Weitere Beispiele

Facebook-Benachrichtigungen

In der folgenden Abbildung wird veranschaulicht, wie Benachrichtigungen in Facebook verwendet werden, um Benutzer über neue Aktivitäten zu informieren:

Facebook-Benachrichtigung, die Benutzer über neue Aktivitäten informiert

Die rotweiße Symbolüberlagerung wird angewendet, wenn der Benutzer eine Nachricht erhält oder ein Beitrag an seiner Pinnwand gepostet wurde oder ein anderer Benutzer einen Beitrag kommentiert hat.

Verwandte Themen

Aufgaben
Anpassen des Websitesymbols
Aufblinken der Schaltfläche der Taskleiste mit der angehefteten Website
Konzepte
Bereitstellen von Benachrichtigungen
Einführung in angeheftete Websites

 

 

Fanden Sie dies hilfreich?
(1500 verbleibende Zeichen)
Vielen Dank für Ihr Feedback.
Microsoft führt eine Onlineumfrage durch, um Ihre Meinung zur MSDN-Website zu erfahren. Wenn Sie sich zur Teilnahme entscheiden, wird Ihnen die Onlineumfrage angezeigt, sobald Sie die MSDN-Website verlassen.

Möchten Sie an der Umfrage teilnehmen?
Anzeigen:
© 2014 Microsoft. Alle Rechte vorbehalten.