Monday, December 29, 2008

I miei preferiti tra i plugin di JQuery

. Monday, December 29, 2008
3 commenti

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

    TableSorter  
    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:


    quicksearch
    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:
    lightBox
    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


    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:

    jQModal 

  • Progress Bar
    Una semplice progress bar:

    ProgressBar


  • E i vostri preferiti quali sono?

Read More »»

Monday, December 22, 2008

Link .Net #11

. Monday, December 22, 2008
0 commenti

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. en

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.
en

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.
en

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. fr

Read More »»

Sunday, December 21, 2008

Un coniglio in Outlook 2007

. Sunday, December 21, 2008
0 commenti

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:

nabaztag
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:

nabaztag1 
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:

nabaztag2
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:


nabaztag3 
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:

nabaztag4 
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 »»

Saturday, December 20, 2008

Doppio click con JQuery

. Saturday, December 20, 2008
0 commenti

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:

blurfocusload
resizescrollunload
beforeunloadclickdblclick
mousedownmouseupmousemove
mouseovermouseoutmouseenter
mouseleavechangeselect
submitkeydownkeypress
keyuperror 


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 »»