Yahoo! User Interface Blog (YUIBlog)

Treeble con YUI 3 DataTable

La versione beta di DataTable in YUI 3.3.0 ci dà una componente molto potente per giocare. Per lanciare le gomme in un modo utile, ho deciso di aggiornare i miei Treeble esempi da utilizzare DataTable. (Treeble consente la visualizzazione di dati gerarchici in una tabella .)

Con mia grande gioia, era un gioco da ragazzi! Tutto il lavoro duro è fatto in TreebleDataSource , che si estende YUI 3 DataSource, quindi tutto quello che dovevo fare era collegare in DataTable utilizzando Y.Plugin.DataTableDataSource e quindi configurare le colonne:

 var ds = new Y.TreebleDataSource (...),
	 pg = new Y.Paginator (...),
	 tabella;

 sendRequest funzione () {
	 table.datasource.load ({
		 richiesta: {
			 startIndex: pg.getStartIndex (),
			 resultCount: pg.getRowsPerPage ()
		 }
	 });
 }

 var cols = [
     {Key: 'yui33-hack', label:''},
     {
         key: 'treeblenub', etichetta:'',
         formatter: Y.Treeble.buildTwistdownFormatter (sendRequest)
     },
     {
         key: 'title', label: 'Titolo',
         formatter: Y.Treeble.treeValueFormatter
     },
     ...
 ];

 table = new Y.DataTable.Base ({columnset: cols});
 table.plug (Y.Plugin.DataTableDataSource, {datasource: ds});

Per vedere il codice sorgente completo, fare riferimento alla esempio dal vivo .

Le mosche solo nel unguento sono:

• Il yui33-hack colonna. A causa di un bug in YUI 3.3.0 DataTable , il td elemento passato a un formattatore colonna è in realtà dalla colonna precedente. Così, la prima colonna della tabella mostra il twistdown, e la seconda colonna è vuota.
• I valori non definiti nei dati vengono visualizzati come {value} invece di spazi ( bug 2529858 ).

Al fine di rendere Treeble più facile da usare, ho aggiunto una pelle di Sam, che gli stili alle classi CSS scritte dai Y.Treeble formattatori.

Buon divertimento!

Circa l'autore: John Lindal ( @ jafl5272 su Twitter) è uno degli ingegneri di piombo costruire le fondamenta su cui Yahoo! APT è stato costruito. In precedenza, ha lavorato sul Yahoo! Publisher Network.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

YUI: Orario di apertura giovedì 27 gennaio

Il prossimo YUI: Orario di apertura sarà il prossimo Giovedi, 27.

La settimana scorsa abbiamo cercato di confezionare troppo nel ridotto uno slot time ore, e corse fuori del tempo prima che uno dei segmenti più importanti: la YUI 2011 3 di feedback tabella di marcia e parte suggestione. Quindi stiamo andando a riprendere da dove avevamo lasciato, con Satyen notare eventuali aggiornamenti alla tabella di marcia approssimativa della scorsa settimana, allora è tutto quello che pensi.

Allora venite con domande e suggerimenti. Vogliamo sentire cosa sono le vostre priorità per il prossimo anno e come possiamo aiutare, e quali sono i vostri pensieri sono a fare YUI come un prodotto (o famiglia di prodotti) più completa e straordinaria.

Saremo on-line 10:00-11:00 PDT Giovedi. I dettagli di connessione sono le stesse come al solito.

1. Comporre al 1-888-371-8922 (Skype funziona alla grande per non statunitensi partecipanti *)
2. Inserire il codice partecipante 47188953 #
3. Partecipa alla sessione di condivisione dello schermo (questa vi verrà chiesto di installare il plugin Adobe Connect se questa è la prima volta ad usarlo). Nota: Questo URL è cambiato, quindi per favore aggiornare i vostri segnalibri se si sta ancora utilizzando il vecchio URL.

Greh Hinch ha ottenuto la conversazione iniziata Nei forum , in modo da arrivare a un brainstorming e già ci vediamo Giovedi!

UPDATE (1/26)

Potete trovare la bozza della roadmap 2011 che Satyen discusso la settimana scorsa sul wiki YUILibrary.com. Non trascorre molto tempo alla sua revisione, in modo da avere uno sguardo prima della chiamata.

* - Se Skype non è un'opzione, mandatemi una email per un numero locale.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Annunciando Yahoo! User Interface Biblioteca 2.x Cookbook

Packt Publishing è lieta di annunciare l'uscita del mio nuovo libro, Yahoo! User Interface Biblioteca 2.x Cookbook . Il libro contiene numerose ricette di codifica, fornendo ai lettori con esempi dettagliati per oltre 25 YUI componenti 2.x, inclusi Container , Drag & Drop , Connection Manager , DataTable , TreeView , e molto altro ancora.

Cosa si può imparare da questo libro

Ho scritto questo libro in modo che vi aiuterà a imparare come usare YUI 2.x per costruire ricchi e applicazioni web più interattive in grado di impressionare i clienti e stupire i vostri amici. Ha ricette spiegare più di venticinque componenti YUI, mostrando come usarli e come configurarli in modo da soddisfare le vostre esigenze. Ogni componente coperta avrà esempi di codice estraibili che mostrano dei modi più comuni che il componente viene utilizzato.

Inoltre, completo di codice funzionante può essere scaricato separatamente per ogni capitolo, così è più facile da seguire. Per ciascuna delle ricette, c'è un esempio introduttivo, poi esempi più avanzati, seguita da una spiegazione di come il componente funziona e cosa sta facendo YUI. Per maggiori sviluppatori esperti, la maggior parte delle ricette includono anche un ulteriore approfondimento della soluzione, che spiega come personalizzare ulteriormente e migliorare il componente.

Pratico e pieno di facili da seguire, le ricette, il libro vi aiuterà a creare moderne applicazioni rich internet utilizzando i componenti più potenti della Biblioteca Yahoo! User Interface (YUI).

Chi ha questo libro è stato scritto per

Il libro è particolarmente adatto per gli sviluppatori JavaScript che sono relativamente nuova per YUI 2 o interessati a iniziare rapidamente. Tuttavia, contiene esempi di quasi ogni componente ed è adatto sia come riferimento per sviluppatori esperti che desiderano rispolverare o esplorare alcune delle caratteristiche più potenti di ogni componente.

Sconto del 15%!

Packt Publishing offre uno sconto del 15% a qualsiasi lettore YUIBlog, e troverete il mio libro è disponibile sia in formato eBook e tradizionali. Per ricevere lo sconto, è sufficiente acquistare Yahoo! User Interface Cookbook Biblioteca 2.x attraverso Packt Publishing, e fornire il codice YUI2XCBK15 al momento del checkout. (Nota: Devi effettuare il login per far funzionare il codice.)

Vuoi un esempio?

Per aiutarvi a ottenere un tatto per il contenuto fornito all'interno del mio libro, Packt è abbastanza generosa di fornire un campione di quello che ci si può aspettare:

" YUI 2.X: Uso Component Event "

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

YUI Theater - Satyen Desai: (. 55 min), "'un telefono, un Tablet Laptop e una passeggiata in un bar ...' Approach-YUI per lo sviluppo Web Mobile"

Satyen Desai ( @ dezziness ), creatore della componente 3 YUI e sottosistemi di widget, discute l'approccio YUI a sostenere la nuova serie di web-enabled dispositivi oggi sul mercato, e come ci piace pensare a loro in termini di caratteristiche e ai vincoli invece di uno spazio problema isolato.

Se il video qui sotto incorporare non viene visualizzato correttamente nel vostro lettore RSS di scelta, essere sicuri di scegliere attraverso per visualizzare la versione ad alta risoluzione del video su YUI Theater .

• Scaricare video HD (480p ~ 392MB)
• Scarica il video (m4v)
• Scarica le diapositive
• Una versione ad alta risoluzione di questo discorso è disponibile su YUI Theater .

Altri recenti YUI Theater Video:

• Luke Smith: YUI 3: Sotto la superficie - Luke Smith, un ingegnere del team YUI, offre uno degli interventi più apprezzati a YUIConf 2010, guardando dentro alcuni dei modelli di base e pezzi di infrastrutture che si trovano al centro della YUI 3.
• Ryan Grove: Introducing YUI 3 di completamento automatico - In questo discorso da YUIConf 2010, YUI 3 AutoComplete autore Ryan Grove ti porta in un tour di alcuni dei tanti modelli di completamento automatico reso possibile da questo componente e fornisce una immersione profonda nella sua nuova potente integrazione YQL , filtraggio, ed evidenziando capacità.
• Paul Donnelly e Nagesh Susarla: YQL + YUI: costruzione End-to-end - Durante lo sviluppo di widget, non è come utilizzare i dati YQL che viene come una domanda, ma piuttosto come accedervi. In questo YUIConf sessione 2010, YQL ingegneri Paul Donnelly e Nagesh Susarla riesame di iniziare la vostra ricerca nel YQL console, l'accesso ai dati YQL attraverso i vari endpoint, e passando attraverso gli strati YQL di autenticazione diversi.
• Eric Ferraiuolo: TipTheWeb.org: Heavy Duty 3 e YUI YQL - In questa sessione YUIConf dal 2010, cofondatore e TipTheWeb YUI contributor Eric Ferraiuolo discute la creazione di un progetto di scala codebase con 3 YUI, YUI 3 Galleria e YQL.
• Burke Reid: Yeti: Interfaccia semplice YUI Testing - Test di cross-browser applicazioni web è stato troppo difficile per troppo tempo: Stai ricaricare manualmente browser o alle prese con complicati software di automazione. In questa sessione da YUIConf 2010, YUI ingegnere Burke Reid parla di come YUI Yeti progetto contribuisce a risolvere questi problemi. Reid discute quando è necessario utilizzare test automatici per il codice frontend, come Yeti lavora con YUI test, come impostare cross-browser testing in pochi minuti e in che modo il team Yeti YUI utilizza per spedire un prodotto migliore.

Contenuti CC / Usato per gentile concessione:

• http://www.flickr.com/photos/franksvalli/5172709191/~~V
• http://www.flickr.com/photos/uberlife/5165672718/~~V

Iscrizione a YUI Theater:

• YUI Theater RSS feed
• YUI Theater su iTunes

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

YUI Theater - Luke Smith: "YUI 3: Sotto la superficie" (48 min.)

In questo teatro YUI video, YUI engineer Luke Smith ( @ ls_n ) offre uno degli interventi più apprezzati a YUIConf 2010, guardando dentro alcuni dei modelli di base e pezzi di infrastrutture che si trovano al centro della YUI 3.

Se il video qui sotto incorporare non viene visualizzato correttamente nel lettore RSS, assicurati di scegliere attraverso per visualizzare la versione ad alta risoluzione del video su YUI Theater .

• Scaricare video HD (480p ~ 345MB)
• Scarica il video (m4v)
• Scarica le diapositive
• Una versione ad alta risoluzione di questo discorso è disponibile su YUI Theater .

Altri recenti YUI Theater Video:

• Satyen Desai: 'un telefono, un Tablet e una passeggiata computer portatile in un bar ...' Approach-YUI a Mobile Development Web - Satyen Desai, creatore della componente 3 YUI e sottosistemi di widget, discute l'approccio YUI a sostenere la nuova serie di web abilitato dispositivi oggi sul mercato, e come ci piacerebbe pensare a loro in termini di caratteristiche e vincoli in contrasto con uno spazio problema isolato.
• Ryan Grove: Introducing YUI 3 di completamento automatico - In questo discorso da YUIConf 2010, YUI 3 AutoComplete autore Ryan Grove ti porta in un tour di alcuni dei tanti modelli di completamento automatico reso possibile da questo componente e fornisce una immersione profonda nella sua nuova potente integrazione YQL , filtraggio, ed evidenziando capacità.
• Paul Donnelly e Nagesh Susarla: YQL + YUI: costruzione End-to-end - Durante lo sviluppo di widget, non è come utilizzare i dati YQL che viene come una domanda, ma piuttosto come accedervi. In questo YUIConf sessione 2010, YQL ingegneri Paul Donnelly e Nagesh Susarla riesame di iniziare la vostra ricerca nel YQL console, l'accesso ai dati YQL attraverso i vari endpoint, e passando attraverso gli strati YQL di autenticazione diversi.
• Eric Ferraiuolo: TipTheWeb.org: Heavy Duty 3 e YUI YQL - In questa sessione YUIConf dal 2010, cofondatore e TipTheWeb YUI contributor Eric Ferraiuolo discute la creazione di un progetto di scala codebase con 3 YUI, YUI 3 Galleria e YQL.
• Burke Reid: Yeti: Interfaccia semplice YUI Testing - Test di cross-browser applicazioni web è stato troppo difficile per troppo tempo: Stai ricaricare manualmente browser o alle prese con complicati software di automazione. In questa sessione da YUIConf 2010, YUI ingegnere Burke Reid parla di come YUI Yeti progetto contribuisce a risolvere questi problemi. Reid discute quando è necessario utilizzare test automatici per il codice frontend, come Yeti lavora con YUI test, come impostare cross-browser testing in pochi minuti e in che modo il team Yeti YUI utilizza per spedire un prodotto migliore.

Contenuti CC / Usato per gentile concessione:

• http://www.flickr.com/photos/franksvalli/5172658517/~~V
• http://www.flickr.com/photos/allenr/5185408676/~~V

Iscrizione a YUI Theater:

• YUI Theater RSS feed
• YUI Theater su iTunes

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

YUI: Orario di apertura Lun Gen 19

Accogliere nel 2011, YUI: Orario di apertura inizierà di nuovo, e la prima rata del nuovo anno sarà il prossimo Mercoledì, 19.

Naturalmente, con il rilascio di YUI 3.3.0 , che sarà l'argomento principale di prime ore di apertura di quest'anno. Io vado a cercare di disputare il maggior numero di team di YUI e collaboratori esterni, come posso partecipare alla chiamata, e andremo sui nostri riflessi preferiti quindi aprire la conversazione a cui può interessare quello che hai già giocato con il preview rilasci. Avremo un aggiornamento sul 2,9, allora (e sono molto entusiasta di questa), cominciare a parlare 3.x roadmap per il 2011. E vogliamo le vostre idee, le vostre risposte. Dove vuoi andare a vedere YUI quest'anno? Quali sono gli articoli del biglietto caldi tua lista dei desideri?

Allora venite a parlare con il team di YUI su ciò che è nuovo e cosa sarà il futuro!

In altre notizie dal fronte della logistica del programma, ci saranno alcune modifiche al formato Open Ore:

• In primo luogo, saremo accorciando la chiamata da 2 ore ad un più business-ore-friendly 1 ora
• Io vado a incorporare un focus sezione di implementazione di stile ad ogni chiamata, in modo che tutti possano imparare come YUI 3 viene utilizzato nelle trincee (soggetto a temi particolari, come le nuove versioni
• E infine e incredibilmente, Eric Ferraiuolo , di TipTheWeb fama, mi sarà di poter diventare un cohost permanente. E 'stato vivere il sogno di YUI 3 dal 3.0 beta 1, e aggiungere la voce e l'esperienza di applicazioni del mondo reale.

Saremo on-line dalle 10 alle 23:00 PST a meno che la conversazione è troppo bello per fermarsi. I dettagli di connessione sono le stesse come al solito.

1. Comporre al 1-888-371-8922 (Skype funziona alla grande per non statunitensi partecipanti *)
2. Inserire il codice partecipante 47188953 #
3. Partecipa alla sessione di condivisione dello schermo (questa vi verrà chiesto di installare il plugin Adobe Connect se questa è la prima volta ad usarlo)

Non dimenticate di sottoscrivere il calendario YUI e seguire @ yuilibrary su Twitter per gli ultimi aggiornamenti sugli orari di apertura e altri interestingness YUI.

Vi aspettiamo!

* - Se Skype non è un'opzione, mandatemi una email per un numero locale.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Statistiche di tabella piè di pagina per YUI due DataTable

Il YUI due DataTable fa un sacco. Ma una delle cose che non fa è qualcosa con un piè di tavolo, dove ci si potrebbe aspettare di trovare totali, medie o altri dati di riepilogo. Così ho esteso DataTable per aggiungere i dati di riepilogo per i dati numerici.

Come andando

In primo luogo, usarlo: avrete bisogno di qualche codice da github - ci sono tre file js, e avrete bisogno di tutti loro nella pagina dopo che il file js YUI DataTable. E si potrebbe desiderare di modificare lo spazio - usiamo YAHOO.LPLT.DataTable come l'estensione di YAHOO.widget.DataTable . Mi spiego un po 'più su questi file qui sotto.

È possibile impostare la tua datatable come al solito, ma ci sono tre cose che dovete fare per ottenere il riepilogo di lavoro:

1. Assicurati che il tuo datasource specifica "numero" parser per tutti i campi che si desidera per riassumere, in particolare se si sta facendo la modifica in linea cell:

     myDataSource.responseSchema = {fields: [
       {Key: "quantità", parser: "numero"}
       / * Ecc ..  * /
    ]};
   

2. Aggiungere un config chiave-valore di columnStats: true nel tuo array colonna di definizione:

     var myColumnDefs = [
        {Key: "quantità", label: "Quantità", columnStats: true} 
        / * Ecc ..  * /
    ];
   

   per le colonne che vorresti sintesi. (Il totale della colonna 'id' probabilmente non è molto utile!).
3. Dite al datatable che le statistiche per il calcolo:

    var = new MyDataTable YAHOO.LPLT.DataTable ("exampleEl",
        myColumnDefs, 
        MyDataSource, 
        {ColumnStats: {on: vero, le statistiche: ['somma']}}
    );
   

   Questo è il modo più semplice possibile configurare le statistiche di colonna, ma è possibile aggiungere ulteriori statistiche, personalizzare le etichette, e altro ancora.

C'è un esempio su github con cui giocare.

Alcuni punti:

• Il piè di pagina cambierà con la vostra tavola. Quindi, se mostrare / nascondere le colonne, spostarli, aggiungerne di nuove, aggiungere / rimuovere righe, ordinare o usare editor di cellule in linea, il piè di pagina si aggiornerà l'interfaccia utente e le statistiche di conseguenza.
• È possibile aggiungere righe come molti al piè di pagina come ti piace, una riga per ogni statistica. Così com'è, si può avere media, mediana, somma, min, max, gamma, DEV.ST, varianza, o varianceUnbiased. Il 'statistiche' elemento della configurazione è un array: basta aggiungere le statistiche che desideri a questo array (ad esempio stats: ["min", "median", "stdev"] ).
• Il piè di pagina tabella usare formattatori specificati per quella colonna.
• Se avete un paginator, è possibile scegliere se le statistiche visualizzate sono per l'intera tabella o solo la pagina attualmente visibile. Aggiungi pagedTotals: true ai columnStats opporsi ad avere le statistiche della pagina.
• La matrice 'stats' nell'oggetto di configurazione può includere anche letterali oggetto, con 'label' chiavi e 'fn'. fn è la funzione che calcola le statistiche - sia una stringa come 'min' o una funzione che restituisce un numero. L'esempio a github mostra come si potrebbe fare dati utilizzando una 'totale ponderato' da due colonne.

Più sul codice attuale estensione

Il file principale, YAHOO_DataTable_colStats.js, aggiunge un paio di proprietà protette al datatable, alcuni metodi protetti, e due metodi pubblici, colStatsRefresh che si ri-calcolare il piè di pagina e ridisegnare tavolo e colStatsGetRecordSet , che restituisce una matrice sia di tutti record, o solo quelli visibili, a seconda del valore di pagedTotals . Il primo può essere utile se si apportano modifiche alla tabella che non vengono attivati ​​gli eventi utili (ad esempio modificare direttamente i dati nel recordset sottostante), la seconda se si sta utilizzando funzioni di riepilogo personalizzate.

YAHOO_DataSource_patch.js aggiunge una parseField(key, value) metodo DataSource. Questo è necessario quando si dispone di editor delle cellule in linea casella di testo per i dati numerici, l'editor restituisce una stringa, che non viene analizzato automaticamente, e quindi non può essere aggiunto. Il parseField fornisce l'accesso ai parser specificati nel DataSource, per convertire i dati modificati.

YAHOO_util_Stats.js fornisce una standalone YAHOO.util.Stats classe che avvolge uno (in ordine) array di dati numerici e fornisce le statistiche riassuntive. E 'solo dipendenza è YAHOO.lang. Un'istanza YAHOO.util.Stats è mantenuto dal DataTable per ogni colonna che deve essere riassunto, e memorizza nella cache alcune delle più difficili matematica per migliorare le prestazioni. Le stringhe passato alla matrice stats ('min', 'media', ecc) sono i metodi della classe YAHOO.util.Stats, così si potrebbe facilmente aggiungere quelli supplementari aggiungendo al prototipo. Nota però che essi abbiano accesso solo ai dati di 'loro' colonna.

E infine

Sono abbastanza sicuro che questo non è andare a lavorare con DataTable scorrimento, quindi non ho nemmeno provato! Ma se avete dei problemi o delle idee, si prega di fare metterli sulla issue tracker github.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!