I miei preferiti tra i plugin di JQuery

Spinto dal bellissimo, nonchè utile articolo di Dave Ward, che consiglio vivamente di leggere, vi presento i miei di preferiti. 
Premetto che ci sono dei plugin JQuery di cui difficilmente uno sviluppatore web può fare a meno, per questo non posso esimermi dall’inserire nella lista i plugin TableSorter, QuickSearch e DatePicker.
Ma vediamo più nello specifico quali sono quelli che più apprezzo nel lavoro di ogni giorno:

• Tablesorter  
  L’avevo segnalato un bel pò di tempo fa in questo post, e tuttora rimane indubbiamente il mio preferito, permettendomi in pochissimo tempo di implementare la funzionalità di ordinamento su una tabella html: 
  
    
  Anche se di facile utilizzo è necessario, nel caso di un controllo GridView di renderizzare l’elemento THEAD tramite il property HeaderRow:
  
  

     1: myGrid.HeaderRow.TableSection = TableRowSection.TableHeader;



• jQuery quickSearch
  Viene aggiunto un campo di ricerca attraverso il quale è possibile filtrare in tempo reale su tabelle, elenchi puntati o in paragrafi:
  
  
  
  Posso garantire che l’accoppiata di quest’ultimo con il plugin TableSorter è estremamente vincente.
  Per chi ne vuole un assaggio consiglio l’articolo di Bill Beckelman correlato di esempio scaricabile.
  


• jQuery lightBox
  Consente di ottenere la sovrapposizione di immagini presenti in una pagina:
  
  Sicuramente è quello che uso meno per via del tipo di applicazioni su cui mi concentro quotidianamente.
  Ad ogni modo un’interessante utilizzo può essere quello in combinata con un controllo GridView. Ad esempio con il seguente markup:
  

     1: <asp:GridView ID="dgrImage" runat="server" 

     2:               AutoGenerateColumns="false"

     3:               EnableViewState="false">

     4:   <Columns>

     5:     <asp:TemplateField>

     6:       <ItemTemplate>

     7:         <asp:HyperLink ID="hlUrl" runat="server" 

     8:                        ImageUrl='<%#Eval("ImageUrl") %>' 

     9:                        NavigateUrl='<%#Eval("Url") %>'>

    10:         </asp:HyperLink>

    11:       </ItemTemplate>

    12:     </asp:TemplateField>

    13:   </Columns>

    14: </asp:GridView>

  
  ed aggiungendo i riferimenti agli script e css:
  
  
  
  

     1: <script src="js/jquery.js" type="text/javascript"></script>
     1:  
     2: <script src="js/jquery.lightbox-0.5.js" type="text/javascript">
     1: </script>
     2: <link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
     3: <script type="text/javascript">
     4:   $(function() {
     5:     $('#dgrImage a').lightBox();
     6:   });
  </script>

  
  otteniamo un elenco di immagini incapsulate in una tabella.
  
  Le immagini all’interno del controllo GridView con id dgrImage vengono sovrapposte semplicemente richiamando la funzione lightBox.
  
  Recentemente sto prendendo in esame anche FlancyBox.


• ClueTip
  
  
  Questo plugin permette di visualizzare un tooltip allo scatenarsi dell’evento mouseover o click.
  
  
  Fra le tante funzionalità merita di essere evidenziata la possibilità di richiamare tramite Ajax il testo da mostrare nel tooltip.
  
  
  
  
  


• jqModal
  Estremamente utile nel caso si voglia visualizzare dialog box di alert/conferma, finestre modali:
  
   
  


• Progress Bar
  Una semplice progress bar:
  
  
  
  

E i vostri preferiti quali sono?

Read More »»

Link .Net #11

Undicesimo appuntamento con Link .Net:

Understanding Tracking in Windows Workflow Foundation

Ottimo articolo che mostra come scrivere un'applicazione di monitoraggio dei flussi creati tramite Workflow Foundation 3.0.

Locking the Screen During a Postback

Può capitare che alcune operazioni richiedano “diversi secondi” prima di essere completate ( generazione report, creazione pdf o fogli excel, ecc). In questi casi è sempre bene fornire un feedback all'utente in modo che attenda finchè l'operazione non si è conclusa. In questo articolo viene mostrato come implementare questa funzionalità in una pagina Asp.Net.

Some Tips and Tricks while Using ASP.NET GridView Paging

In moltissimi scenari la paginazione di un controllo Gridview risulta obbligatoria. In questo articolo vengono indicati alcuni tip per implementarla.

Connectez / intégrez votre application et Microsoft Dynamics CRM (Episode 1)
Connectez / intégrez votre application et Microsoft Dynamics CRM (Episode 2)

I primi due episodi che mostrano i passi per installare e configurare su virtual machine Microsoft Dynamics CRM.

Read More »»

Un coniglio in Outlook 2007

Nel 2005 si registrava un boom di vendite di un oggetto tecnologico, a forma di coniglietto sempre connesso ad internet chiamato Nabaztag.
Sul tecno coniglio si trovano tantissime informazioni sulla rete, sono state create delle vere e proprie community, diventando in pochissimo tempo un oggetto fashion ma che presenta ancora oggi un bel pò di pecche.
L’intento di questo post è quello di parlare di un suo particolare aspetto cioè le API attraverso le quali possiamo inviare messaggi o fargli eseguire delle coreografie (luci e movimento delle orecchie) o dargli in pasto in stream un mp3.
Gli ingredienti di questo semplice tutorial sono Outlook 2007 e il Framework .Net.
Ma partiamo con ordine. Prima di tutto bisogna recuperare due informazioni importanti cioè il serial number del Nabaztag e il token cioè una serie di cifre con la funzione di essere un identificatore extra.
Queste due informazioni si possono recuperare dalla pagina di preferenze del coniglio:


Lo scopo è quello di poter usare Outlook per inviare un messaggio al coniglio e per far questo ho creato un progetto di tipo Add-in per Outlook 2007 tramite Visual Studio 2008:

 
Con Office 2007 è stata introdotta una nuova interfaccia utente chiamata Ribbon che ha innescato un notevole cambiamento nella programmazione per Office.
Aggiungo al progetto Add-in un nuovo item di tipo Ribbon:


Per chi vuole approfondire l’argomento Ribbon segnalo questo articolo pubblicato su MSDN Magazine (Febbraio 2007):
Ampliare 2007 Office System con proprie schede e controlli Ribbon

Per semplicità e brevità mostrerò soltanto come sia possibile inviare con queste poche righe di codice un messaggio TTS.
Il primo passo consiste nella creazione di una classe Bunny che presenta una serie di property e un metodo Send che ha la funzione di impacchettare il messaggio da inviare al server. 
Inviare un evento al tecno roditore significa effettuare una richiesta al seguente indirizzo:
http://api.nabaztag.com/vl/FR/api.jsp
passando una serie di parametri che potete trovare nella documentazione delle API.
Nell’esempio oltre al serial e al token invio, il messaggio TTS, la lingua e la voce che leggerà il messaggio.
Quest’ultimo viene indicato tramite il parametro voice.
Alcuni esempi di voci che potete selezionare:

UK - Leonard	UK - Mister muggles	UK - Penelope
UK - Shirley	US-Billye	FR - Archibald

 

   1: using System;

   2: using System.Collections.Generic;

   3: using System.Configuration;

   4: using System.Linq;

   5: using System.Text;

   6: using System.Net;

   7:  

   8: namespace LookNabaztag

   9: {

  10:   public class Bunny

  11:   {

  12:     private string url = "http://api.nabaztag.com/vl/FR/api.jsp?";

  13:  

  14:     private string tts;

  15:     public string TTS

  16:     {

  17:       get

  18:       {

  19:         StringBuilder sbTTS = new StringBuilder();

  20:         if (tts..Trim().Length > 0)

  21:           sbTTS.Append("&tts=" + tts.Trim().Replace(" ", "+"));

  22:         if (voice..Trim().Length > 0)

  23:           sbTTS.Append("&voice=" + voice.Trim());

  24:         return sbTTS.ToString();

  25:        }

  26:        set 

  27:        { 

  28:          tts = value; 

  29:        }

  30:      }

  31:  

  32:      private string voice;

  33:      public string Voice

  34:      {

  35:        get 

  36:        { 

  37:          return voice; 

  38:        }

  39:        set 

  40:        { 

  41:          voice = value; 

  42:        }

  43:     }

  44:  

  45:     public void SendMessage()

  46:     {

  47:       WebRequest request;

  48:       try

  49:       {

  50:         StringBuilder sbUrl = new StringBuilder();

  51:         sbUrl.Append(url);

  52:         sbUrl.Append("sn=");

  53:         //Recupero dall'app.config il seriale

  54:         sbUrl.Append(ConfigurationSettings.AppSettings["serial"]);

  55:         sbUrl.Append("&token=");

  56:         //Recupero dall'app.config il token

  57:         sbUrl.Append(ConfigurationSettings.AppSettings["token"]);

  58:         sbUrl.Append(TTS);

  59:         request = WebRequest.Create(sbUrl.ToString());

  60:         WebResponse response = request.GetResponse();

  61:       }

  62:       catch (Exception exc)

  63:       {

  64:         string error = exc.Message;

  65:       }

  66:     }

  67:   }

  68: }

Adesso ci possiamo concentrare sul Ribbon:


 
Ho evidenziato nell’immagine due aspetti importanti della configurazione del Ribbon:

1) il nome dell’etichetta dell’add-in,

2) la tipologia.

In questo caso le tipologie che ho indicato tramite il property RibbonType sono due: Microsoft.Outlook.Mail.Compose, Microsoft.Outlook.Mail.Read indicando che solo al momento di lettura o composizione del messaggio di posta elettronica l’add-in sarà visibile.

Nel Group1 ho inserito un semplice controllo Button assegnando un’immagine per dargli un aspetto più simpatico.

Sull’evento click del Button vado a recuperare il corpo dell’email tramite il property Body per poi instanziare la classe Bunny vista in precedenza:

   1: using Outlook = Microsoft.Office.Interop.Outlook;

   2: .....

   3: //Recupero testo email

   4: Outlook.MailItem mail = 

   5:   (Outlook.MailItem)Globals.ThisAddIn.Application.Inspectors[1].CurrentItem;

   6: if (mail != null)

   7: {

   8:   Bunny bunny = new Bunny();

   9:   bunny.TTS = mail.Body;

  10:   bunny.Voice = "UK-Shirley";

  11:   bunny.SendMessage();

  12: }

Non ci rimane che osservare il risultato finale:

 
Se non sono presenti i soliti disservizi dei server Violet allora cliccando il tasto Send verrà inviato al coniglio un messaggio contenente il corpo dell’email.

Read More »»

Doppio click con JQuery

In questi giorni sto eseguendo un pò di refactoring di codice javascript presente in un progetto Asp.Net 2.0, facendo uso delle API offerte dal framework JQuery.
Una delle primissime funzioni che ho sostituito completamente è stata quella in cui tramite l’evento doppio click su controlli di tipo Textbox si inseriva la data corrente.
L’Event Model di JQuery è estremamente versatile e ben strutturato oltre che semplice nell’utilizzo.
Se per esempio all’evento onclick di un button vogliamo far apparire un dialog box di alert senza far uso di un particolare framework javascript, dobbiamo scrivere qualcosa di questo tipo:

   1: <input type="button" id="btnTest" value="Click" onclick="javascript:alert( 'test click');" />

Utilizzando l’Event Model JQuery possiamo far uso del comando bind(). L’esempio precedente diventa:

   1: $('#btnTest').bind('click', function(event) { alert('test click'); });

La sintassi del comando bind:

   1: bind( eventType, data, function)

Ritornando alla funzione che accennavo ad inizio post, devo dire che l’utilizzo delle API JQuery mi ha permesso di ridurre sensibilmente il codice migliorando così anche la mantenibilità.

Nello specifico, supponendo di avere un controllo Textbox targato runat server:

   1: <asp:TextBox ID="txtDoubleClick" runat="server" Text=""></asp:TextBox>

Il codice per implementare un gestore di eventi per l’evento double click:

   1: <script type="text/javascript">
   1:  
   2: $(function() {
   3:   $('#txtDoubleClick').bind('dblclick', function(event) { setDateNow() })
   4: });
   5: function setDateNow() {
   6:   var date = new Date();
   7:   var day = date.getDate();
   8:   var month = date.getMonth() + 1;
   9:   var year = date.getFullYear();
  10:   $('#txtDoubleClick').val(day + "/" + month + "/" + year);
  11: }
</script>

E’ possibile passare diversi tipi di eventi:

blur	focus	load
resize	scroll	unload
beforeunload	click	dblclick
mousedown	mouseup	mousemove
mouseover	mouseout	mouseenter
mouseleave	change	select
submit	keydown	keypress
keyup	error

Se invece, volessimo ottenere lo stesso risultato per controlli Textbox presenti per esempio in un controllo GridView:

   1: <asp:GridView ID="dgrTest" runat="server">

   2:   <Columns>

   3:     <asp:TemplateField>

   4:       <ItemTemplate>

   5:         <asp:TextBox ID="txtDoubleClick" runat="server" Text=""></asp:TextBox>

   6:       </ItemTemplate>

   7:     </asp:TemplateField>

   8:   </Columns>

   9: </asp:GridView>

lo script potrebbe essere così modificato:

   1: <script type="text/javascript" src="jquery-1.2.6.min.js"></script>

   2: <script type="text/javascript">

   3:   $(function() {

   4:     $("#dgrTest input[type=text]").bind('dblclick', function(event) { setDateNow($(this)) })

   5:   });

   6:   function setDateNow(id) {

   7:     var date = new Date();

   8:     var day = date.getDate();

   9:     var month = date.getMonth() + 1;

  10:     var year = date.getFullYear();

  11:     id.val(day + "/" + month + "/" + year);}

  12: </script>

Essenzialmente la modifica più sostanziale riguarda il gestore dell’evento applicato a tutti i controlli input di tipo text presenti nella griglia con id dgrTest.
Concludo con un altro comando altrettanto importante one():

   1: one(eventType, data, function)

permette di rimuove l’handler dopo la prima esecuzione dell’evento specificato.

Read More »»