Passa ai contenuti principali

Facciamo lampeggiale l’overlay icon di IE9

IE9 introduce il concetto di “pinned site” (post) con il quale gli sviluppatori possono far sembrare le proprie web application delle applicazioni desktop.

Il fatto che un sito sia “pinnabile” è fornito “di serie” con IE9 cioè qualsiasi sito è agganciabile alla task bar di Windows.

Oltre a questa funzionalità, abbiamo modo di interagire, in un certo qual modo, con l’icona presente nella task bar di Windows grazie a dei metodi Javascript della classe window.external.

In particolare il metodo msSiteModeSetIconOverlay permette di visualizzare una overlay icon (cioè una iconetta in sovraimpressione) sull’icona del sito posizionata nella task bar. Questo ci permette di attrarre l’attenzione dei nostri utenti per segnalare l’accadimento di qualcosa.

L’istruzione:

  1. window.external.msSiteModeSetIconOverlay('/images/red.ico', 'Icona in sovraimpressione!!');

ci permette di visualizzare, al di sopra dell’icona del nostro sito “pinned”, l’icona red.ico.

L’istruzione ha l’effetto desiderato se la pagina da cui è stata invocata è stata aperta utilizzando l’icona della task bar e le icone della task bar siano nel formato “grande”.

In caso positivo otteniamo una cosa del genere:

image

Possiamo utilizzare qualsiasi formato di icona poichè ci pensa IE9 ad ridimensionare opportunamente l’icona da noi utilizzata.

Inoltre possiamo utilizzare il metodo più volte ottenendo sovraimpressioni multiple.

Infine, possimao rimuovere l’icona (o le icone) visualizzate utilizzando il metodo msSiteModeClearIconOverlay. Questo metodo, a prescindere da quante icone abbiamo visualizzato, riporta la situazione alla sola visualizzazione dell’icona del sito (la favicon.ico, tanto per intenderci).

L’idea che può venirci in mente è quella di far lampeggiare l’icona utilizzando alternativamente i due comandi e l’istruzione Javascript  setInterval per ripetere il tutto un certo numero di volte:

  1. function blinkOverlayIcon(numberOfBlinks, blinkInterval, icona) {
  2.     if (window.external.msIsSiteMode) {
  3.         if (numberOfBlinks >= 0) {
  4.             try {
  5.                 if (numberOfBlinks % 2 == 0) {
  6.                     window.external.msSiteModeSetIconOverlay(icona, "");
  7.                 } else {
  8.                     window.external.msSiteModeClearIconOverlay();
  9.                 }
  10.             } catch (e) {
  11.  
  12.             }
  13.             numberOfBlinks--;
  14.             var func = "blinkOverlayIcon(" + numberOfBlinks + "," + blinkInterval + ",'" + icona + "')"
  15.             setTimeout(func, blinkInterval);
  16.  
  17.         } else {
  18.             clearTimeout();
  19.             try {
  20.                 window.external.msSiteModeClearIconOverlay();
  21.             } catch (e) {
  22.             }
  23.         }
  24.     }
  25. }

In pratica il bottone:

  1. <input type="button" name="name" value="Lampeggia" onclick="javascript:blinkOverlayIcon(20,500,'/images/red.ico');" />

Permette di ripetere 20 volte la funzione (per un totale di 10 lampeggi) con un intervallo di mezzo secondo ciascuna.

Ulteriore possibilità è quella di alternare due o più icone in modo da ottenere effetti sempre più complessi. In particolare per alternare due immagini possiamo utilizzare questa funzione

  1. function alternateOverlayIcon(numberOfBlinks, blinkInterval, icona1, icona2) {
  2.     if (window.external.msIsSiteMode) {
  3.         if (numberOfBlinks >= 0) {
  4.             try {
  5.                 var icona = '';
  6.                 if (numberOfBlinks % 2 == 0) {
  7.                     icona = icona1;
  8.                 } else {
  9.                     icona = icona2;
  10.                 }
  11.                 window.external.msSiteModeClearIconOverlay();
  12.                 window.external.msSiteModeSetIconOverlay(icona, "");
  13.             } catch (e) {
  14.  
  15.             }
  16.             numberOfBlinks--;
  17.             var func = "alternateOverlayIcon(" + numberOfBlinks + "," + blinkInterval + ",'" + icona1 + "','" + icona2 + "')"
  18.             setTimeout(func, blinkInterval);
  19.  
  20.         } else {
  21.             clearTimeout();
  22.             try {
  23.                 window.external.msSiteModeClearIconOverlay();
  24.             } catch (e) {
  25.             }
  26.         }
  27.     }
  28. }

In questo caso, il bottone:

  1. <input type="button" name="name" value="Alterna" onclick="javascript:alternateOverlayIcon(20,250,'/images/red.ico', '/images/yellow.ico');" />

alterna le icone rossa e gialla per 20 volte, ciascuna della durata di 250 millisecondi.

Evidentemente unico freno è la fantasia e, al limite, possiamo pensare di eseguire una vera e propria animazione alternando tutti i frame della stessa.

Un limite è che, poichè IE9 esegue di suo un effetto fade sulla visualizzazione dell’icona di overlay, il tempo tra una visualizzazione e l’altra non può essere piccolo a piacere.

 

Commenti

Post popolari in questo blog

VB.NET: Convertire un file DOC in RTF e PDF con office interop

In questo post vorrei proporvi del codice per poter convertire un file .doc in un file .rtf oppure .pdf utilizzando le API di interoperabilità di Office.Creeremo una classe, DocConverter, che esporrà le due funzionalità sopra citate.Cominciamo con il prevedere un attributo privato della classe che rappresenterà l’applicazione Word che utilizzeremo per la conversione. Creeremo l’istanza dell’attributo privato all’interno del costruttore della classe:PublicSubNew()
IfNot CreateWordApp() Then
ThrowNew ApplicationException("Assembly di interoperabilità con Office non trovato!")
EndIf
EndSub
Private _wordApp As Word.ApplicationClass
ProtectedFunction CreateWordApp() AsBoolean
Dim retval = True
Try
_wordApp = New Word.ApplicationClass()
_wordApp.Visible = False
Catch ex As System.Exception
_wordApp = Nothing
retval = False
EndTry
Return retval
EndFunction

La conversione del file doc sarà effettuata aprendo il file stesso ed eseguendo un’operazione di SaveAs:

Pr…

VB.NET for Dummies: Gli Eventi

Vorrei iniziare con questo post una serie dedicata ad aspetti di VB.NET di base che possono essere utile a coloro che si avvicinano al mondo .NET e che, in genere, non vengono trattati a livello base.La serie di post non ha la pretesa di essere assolutamente esaustivi sugli argomenti che tratteròIn questo primo post parleremo degli eventi.Cosa sono e a cosa servonoUn evento è la “notifica” dell’accadimento di qualcosa.Quando, ad esempio, premiamo un bottone della finestra di un’applicazione, dietro le quinte, il bottone stesso “notifica” al mondo circostante che qualcuno, in quell’istante, lo ha premuto.Sta, poi, al mondo circostante preoccuparsi di “intercettare” l’evento stesso per gestirlo (tramite un gestore di evento).Attenzione a non confondere la pressione del tasto con la “notifica” della pressione del tasto: l’evento è la “notifica” dell’accadimento, non l’accadimento stesso.Ma a cosa serve tutto ciò?Utilizzare gli eventi è un modo per disaccoppiare due o più attori del nostr…

Creare uno shortcut con VB.NET

Prendendo spunto da un post comparso sul forum MSDN vorrei proporvi un tip su come creare uno shortcut utilizzando VB.NET.Per poter creare uno shortcut possiamo procedere in due modi: o ci studiamo la struttura del file .lnk e scriviamo una classe che è in grado di ricreare tale struttura oppure utilizziamo Windows Scripting Host.La prima soluzione è percorribile ma laboriosa perchè la struttura di un file lnk non è banale. Chi fosse interessato a vedere come è composto, internamente, un file lnk può scaricare la seguente reference guide (link).Io vorrei proporvi la seconda strada e realizzerò una classe che incapsula l’utilizzo di Windows Scripting Host.L’object model di Windows Scripting Host è contenuto nella dll IWshRuntimeLibrary che può essere referenziata, nel nostro progetto, utilizzando il tab COM della finestra di aggiunta delle reference:Tra gli oggetti che troviamo all’interno della libreria utilizzeremo la classe WshShell e la classe WshShortcut.La prima delle due rappres…