Posts by category: JavaScript

by in / ASP.NET / JavaScript
No peoples think this is good
Knockout.js: MVVM in JavaScript

Knockout.js: MVVM in JavaScript

Volete velocizzare la vostra applicazione web scrivendo meno codice possibile?
Provate Knockout.js, un’API JavaScript che facilita lo sviluppo di interfacce utente introducendo lato client il pattern MVVM. Vediamo come:

Knockout.js si integra perfettamente con ASP.NET MVC3 grazie all’utilizzo di AJAX, JSON e del ModelBinder.

Scarica il progetto con il codice di esempio >> Download

 

/ Read Article /
by in / JavaScript
1 people think this is good

Verificare l’esistenza di una variabile in una pagina con JavaScript

Ecco come verificare in JavaScript se una certa variabile è stata definita all’interno della pagina:

/ Read Article /
by in / JavaScript
No peoples think this is good

Eseguire codice JavaScript contenuto in una response Ajax

Ajax consente l’aggiornamento dinamico di una pagina web, ma se nel contenuto della response è presente del codice JavaScript questo non viene eseguito.
Come possiamo risolvere questo problema?

Cercando in rete ho trovato che la soluzione più semplice è quella di estrarre con una regular expression il codice all’interno del tag <script> e di passarlo alla funzione eval(). Vediamo in dettaglio un esempio utilizzando per la chiamata Ajax la libreria prototype:

/ Read Article /
by in / JavaScript
No peoples think this is good

Ajax TreeView con Yahoo! User Interface Library via JSON

E’ incredibile la facilità con cui è possibile soddisfare funzionalità applicative anche complesse utilizzando opportunamente le API della libreria Yahoo! User Interface. Ecco ad esempio come possiamo ottenere un controllo TreeView in grado di caricare dinamicamente i nodi tramite Ajax:

Al costruttore passiamo l’id dell’elemento contenitore (tipicamente un div), la lista dei nodi “radice” in formato JSON, il percorso dei nodi da aprire per arrivare al nodo corrente e l’action a cui far puntare il link dell’etichetta di un nodo.
Nel pezzo di codice seguente vediamo come estendere l’oggetto TreeView di Yahoo! per aggiungere il caricamento dinamico dei nodi:

Il metodo buildTreeDynamically riceve i nodi radice dal costruttore e li salva in un array locale tramite la funzione parse dell’API JSON (riga 08). Poi imposta la funzione di caricamento dinamico dei nodi (vedi snippet seguente). Successivamente per ogni elemento dell’array controlla se il nodo è attivo (riga 13), se non lo è viene definito come foglia ed impostato il link a null (righe 27-30). Se il nodo è attivo controlla se è quello corrente o se fa parte del percorso per arrivare al nodo corrente, in quest’ultimo caso lo espande (riga 22).

La funzione loadNodeData viene chiamata all’espansione di un nodo del TreeView e corrisponde ad una GET (righe 52-53) verso un servizio applicativo che mette nella risposta HTTP la collezione di nodi da caricare in formato JSON. Questi nodi vengono poi interpretati nella funzione di callback in modo analogo a come visto per i nodi radice.

A completamento dell’esempio qui di seguito vediamo il codice che definisce la struttura del DynamicNode ovvero una specializzazione dell’oggetto Node di Yahoo! al quale sono state aggiunte informazioni specifiche come lo stato di inattività.

In conclusione questo esempio dimostra ancora una volta come sia semplice estendere le API di Yahoo! integrandone le funzionalità a vantaggio dell’interfaccia utente.

/ Read Article /
by in / JavaScript
No peoples think this is good

Autosave del contenuto di una textarea in un cookie con Yahoo! User Interface Library

Può essere utile avere a disposizione nelle applicazioni web un sistema di salvataggio automatico del testo, vediamo come ottenerlo con l’aiuto della Yahoo! User Interface Library.

Utilizziamo per l’occasione il componente Rich Text Editor e l’utility di gestione dei cookie. Con lo snippet seguente dichiariamo l’editor e poi ne salviamo il testo ad intervalli regolari in un cookie:

Analizziamo il codice passaggio per passaggio: prima creo una istanza del Rich Text Editor di Yahoo! (righe 01-14) poi all’evento KeyDown dell’editor associo un handler che faccia partire ad intervalli regolari la funzione che esegue il salvataggio del testo nel cookie (righe 15-21). Infine nella funzione di salvataggio (righe 22-31) prendo il testo contenuto nell’editor e lo salvo nel cookie attraverso il metodo Cookie.set dell’utility messa a disposizione dall’API Yahoo! YUI.

Per recuperare i dati dal cookie aggiungo un pulsante all’editor (vedi riga 11 snippet precedente) al click del quale visualizzo in un div i dati presenti nel cookie prelevati precedentemente attraverso il metodo Cookie.get.

Ma andiamo con ordine. Prima vediamo la struttura del div utilizzato per visualizzare il contenuto del cookie:

Il div ha una struttura ben definita che usufruisce degli skin messi a disposizione dall’API di Yahoo! e nel suo corpo accede al DOM per inserire nell’html il contenuto del cookie.

Successivamente da codice javascript istanzio su quel div un oggetto Panel inizialmente non visibile ed al click del pulsante dell’editor definito per l’occasione lo visualizzo attraverso il metodo show():

Per rendere del tutto user-friendly il recupero dei dati salvati ho aggiunto una funzione che chiamata da un pulsante all’interno del Panel consente di incollare il contenuto del cookie direttamente nell’area di testo dell’editor:

In conclusione aggiungo che per far funzionare il tutto è necessario linkare nell’head i file sorgenti della libreria Yahoo! YUI e precisamente:

E questo è davvero tutto!

/ Read Article /