Yahoo! User Interface Blog (YUIBlog)

In Galleria 3 YUI: Widget Editor di massa

Il plug-in QuickEdit per YUI 3 DataTable rende facile modificare una pagina intera di record come operazione atomica. Tuttavia, a volte è necessario fare ancora di più. Per esempio, potrebbe essere necessario modificare contemporaneamente più record di quello che può comodamente stare su una sola pagina. Oppure potrebbe essere necessario sostenere l'aggiunta, la duplicazione, e la rimozione di record come parte della operazione atomica. Oppure si potrebbe desiderare di campi gruppo visivamente mettendoli in una cella singola tabella. L' editor di massa supporta tutti i widget di queste possibilità.

( Cliccare lo screenshot di giocare con questo esempio .)

Panoramica

Il widget dell'editor di massa costituito da tre componenti:

Data source

Questo avvolge una YUI DataSource e gestire i cambiamenti: inserimenti, rimozioni e valori modificati.

Base widget

Questo fornisce la struttura di base per l'editing di gestione di record e campi all'interno di ogni record. Le classi derivate è quello di visualizzare ogni record in una riga separata, che potrebbe essere un div, un tbody, o qualche altro contenitore.

HTML table implementation

Questo si estende il widget di base per rendere ogni record in un tbody in una tabella HTML. La configurazione colonna determina quale campo viene visualizzato in ogni colonna della tabella. Un formattatore cellulare personalizzato può essere utilizzato per rendere più campi in una cella singola tabella.

Configurazione

Nell'esempio che ha generato la schermata qui sopra, la configurazione è stato mantenuto il più semplice possibile:

fields definisce i valori modificabili in ogni record. Il tipo predefinito è di input. Gli altri tipi validi sono selezionate e textarea. (Seleziona richiede un elenco di valori.) Convalida di base è fornita dal Responsabile Modulo modulo galleria. Questo copre i campi richiesti, limiti di lunghezza, e intervalli numerici . Validazione più complesse possono essere eseguite specificando regex o la propria funzione ( fn ). Ecco un estratto dal vivo esempio:

 var campi =
 {
	 titolo:
	 {
		 Tipo: 'textarea'
	 },
	 anno:
	 {
		 convalida:
		 {
			 css: 'yiv-intero: [1500,2100]'
		 }
	 },
	 colore:
	 {
		 Tipo: 'selezionare',
		 valori:
		 [
			 {Valore: 'rosso', text: 'Red'},
			 {Valore: 'verde', text: 'Verde'},
			 {Valore: 'blu', text: 'Blue'}
		 ]
	 }
 };

Y.BulkEditDataSource richiede un'istanza di Y.DataSource e dei seguenti parametri:

uniqueIdKey

Il nome di una chiave che identifica in modo univoco ogni record.

generateRequest

Una funzione per generare i parametri di richiesta di Y.DataSource . (Questa è vuoto l'esempio, perché Y.DataSource.Local restituisce sempre tutti i dati.)

extractTotalRecords

Funzione per estrarre il numero totale di record dal Y.DataSource risposta.

Poiché l'esempio utilizza Y.DataSource.Local , totalRecordsReturnExpr è anche necessario. Questa espressione OGNL specifica dove nella risposta per memorizzare il numero totale di record. (Si noti che extractTotalRecords legge questo valore).

 var ds = new Y. BulkEditDataSource (
 {
	 ds: raw_ds,
	 uniqueIdKey: 'id',
	 GenerateRequest: function () {},
	 totalRecordsReturnExpr: '. meta.totalRecords',
	 extractTotalRecords: funzione (risposta)
	 {
		 ritorno response.meta.totalRecords;
	 }
 });

Y.HTMLTableBulkEditor richiede l'origine dei dati, la configurazione del campo, e la configurazione della colonna. Nella configurazione di colonna, la chiave è il nome del campo, a meno che non si specifica una formattazione personalizzata. L'etichetta viene utilizzato come titolo della colonna. Ecco un estratto dal vivo esempio:

 colonne var =
 [
	 {
		 chiave: 'casella',
		 etichetta: '<input type="checkbox" id="select-all" />',
		 formattatore: funzione (o)
		 {
			 var tag = '<input type="checkbox" class="record-select" id="{id}" />';
			 o.cell.set ('innerHTML', Y.Lang.sub (markup,
			 {
				 id: this.getRecordId (o.record)
			 }));
		 }
	 },
	 {Chiave: 'title', etichetta: 'Titolo'},
	 {Chiave: 'Anno', etichetta: 'Anno'},
	 {Chiave: 'color', etichetta: 'Colore'}
 ];

(Si noti che l'esempio vivo definisce una estensione minore di Y.HTMLTableBulkEditor per gestire la casella di colonna.)

È inoltre possibile passare un'istanza di Y.Paginator a Y.BulkEditDataSource . Questo è dimostrato in un separato, più complicato esempio dal vivo .

Locale vs Remote Data Sources

Al momento di decidere se utilizzare un locale o un telecomando origine dati, è necessario valutare attentamente il trade-off. L'evidente trade-off è che un locale datasource è più veloce quando impaginazione, ma il caricamento della pagina iniziale richiederà più tempo, e richiede più memoria sul client.

Il widget dell'editor di massa impone ulteriori compromessi, però.

In primo luogo, la YUI DataSource deve restituire i dati immutabili. Questo è automatica per origini dati locali, ma può essere difficile da implementare per origini dati remote. Avrete bisogno di bloccare le righe nella tabella di database per la durata delle operazioni di modifica collettiva se più di un utente può modificarli.

In secondo luogo, la scelta tra locale e remota origine dei dati influisce sul modo si è permesso di salvare i dati. Quando si utilizza una fonte locale dei dati, si può fare risparmiare best effort, cioè, salvare tutti i record valido per il server, rimuoverle dalla datasource locale, e consentire all'utente di concentrarsi sul record che hanno valori non validi. Quando si utilizza una sorgente remota dei dati, il requisito di immutabilità permette solo di fare tutto o niente risparmio, cioè, i dati possono essere salvati solo dopo che tutti i dati sono validi.

Mondo reale Caso d'uso

La motivazione originale del widget Editor di massa era quello di permettere la post-elaborazione di un foglio caricato. L'introduzione di una post-elaborazione passo elimina la necessità per i valori foglio di calcolo per essere perfetto. Gli errori possono essere segnalati e fissato nel widget Editor di massa invece di rifiutare il caricamento intero. Inoltre, l'elaborazione sul server possono fare meglio di indovinare assegnazione di ulteriori valori necessari per ogni record, e l'utente può controllare e correggere questi valori in più prima di salvare. Questo semplifica la creazione iniziale del foglio di calcolo.

In questo scenario, una fonte di dati remoti è la scelta migliore. I dati caricati vengono memorizzati in uno spazio zero, ed è quindi garantito immutabile, dal momento che nessun altro utente può vedere. "Tutto o niente" il risparmio è appropriato: una volta che tutti gli errori sono stati corretti, l'operazione di salvataggio è atomica, proprio come una operazione di caricamento standard.

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

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark with del.icio.us | Digg it! | reddit!

YUI: Aperto Ore gio 1 dicembre

YUI 3.5.0 Tabella di marcia

Ora che YUIConf 2011 è finita (e è stato fantastico !), la squadra è tornata a lavorare sodo, lavorare su 3.5.0.

Abbiamo delineato i obiettivi di alto livello per il rilascio , e si può parlare di alcuni di loro, ma quello che vorremmo mettere a fuoco in questa Orario alcuni nuovi metodi per la condivisione e coinvolgente con la comunità nella fase di progettazione questo lavoro. In particolare, si vedrà Richieste tirare di più e GIST dal team di YUI previsioni di sviluppo nuovi e guidare lo sviluppo in corso sul nostro forche sviluppo e rispettivi rami.

Ecco alcune delle discussioni in corso in corso che sono aperte per i vostri commenti:

• DataTable progettazione panoramica
• Pulsante Proposta - CSS-only pulsanti e Y.Button ( fonte e gli esempi )
• Y.WidgetStringRenderer - Rende Widget di stringhe di codice HTML al posto di nodi DOM
• Y.App - Un top-level componente dell'applicazione che gestisce la navigazione e punti di vista
• App quadro URL Jazz
• Yeti Avanti

Ci piacerebbe ricevere i tuoi commenti in questi forum, il vostro GIST proprio e tirare le richieste, i vostri suggerimenti e per altri modi in cui possiamo fare 3.5.0 la versione più trasparente e collaborativo ancora!

Time & Dettagli

Saremo online su Giovedi dalle 10 alle 11:00 PST.

Partecipare alla riunione

Registrazione

La registrazione è disponibile nel canale di YouTube YUILibrary .

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark with del.icio.us | Digg it! | reddit!

YUI Teatro - Satyen Desai: "Learnings Livestand" (63 min.)

In questo discorso da YUIConf 2011, YUI ingegnere Satyen Desai discute quello che ha imparato a conoscere prestazioni mobili - e come tali apprendimenti verranno feed back in YUI - quando ha trascorso alcuni mesi di lavoro con l' Yahoo! Livestand squadra sulle loro splendide (e veloce acceso!) iPad nuovo.

Link

• Visualizza in HD su YouTube
• Pieno YUIConf 2011 playlist su YouTube

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark with del.icio.us | Digg it! | reddit!

YUI Teatro - Dave Herman: "Il futuro di JavaScript" (48 min.)

Mozilla Labs ingegnere e TC39 rappresentante Dave Herman uniti a noi a YUIConf 2011 per dare a questo discorso programmatico sul futuro di JavaScript, che copre molte delle nuove funzionalità attualmente allo studio per ES6, la prossima edizione dello standard ECMAScript.

Link

• Visualizza in HD su YouTube
• Pieno YUIConf 2011 playlist su YouTube

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark with del.icio.us | Digg it! | reddit!

YUI Teatro - Eric Ferraiuolo: "YUI Framework App: Hai voluto questo" (46 min.)

In uno dei colloqui più popolari YUIConf 2011, YUI ingegnere Eric Ferraiuolo discute i componenti MVC delle App YUI Framework e alcune delle nuove funzionalità in arrivo YUI 3.5.0 e successivi, compreso manubrio a base di template e di un nuovo App Y. componente che rende la creazione di applicazioni MVC più facile che mai sul desktop, mobile e il server.

Link

• Visualizza in HD su YouTube
• Diapositive
• Foto Near Me demo app
• Foto Near Me codice sorgente su GitHub
• Pieno YUIConf 2011 playlist su YouTube

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark with del.icio.us | Digg it! | reddit!

YUI Teatro - Douglas Crockford: "Crockford su JavaScript - Sezione 8: lo stile di programmazione e il tuo cervello" (67 min.)

In questo discorso programmatico da YUIConf 2011, e la voce 8 ° nella Crockford su JavaScript serie, Yahoo! JavaScript architetto Douglas Crockford alcune gocce scienza a spiegare perché lo stile è importante nel codice di programmazione - in particolare in JavaScript - e come strumenti come JSLint può aiutare.

Link

• Visualizza in HD su YouTube
• Pieno YUIConf 2011 playlist su YouTube
• Pieno Crockford su JavaScript playlist su YouTube

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark with del.icio.us | Digg it! | reddit!

YUI Teatro - Luca Rossi: "Una madre di Classe e modelli Composizione YUI" (54 min.)

In questo elevato rating parla da YUIConf 2011, YUI ingegnere Luke Smith fornisce una panoramica profondamente tecnico delle varie eredità classe JavaScript e schemi di composizione (che vanno da pseudoclassical a prototipale a una miscela di entrambi) supportato da YUI.

Link

• Visualizza in HD su YouTube
• Diapositive
• Pieno YUIConf 2011 playlist su YouTube

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark with del.icio.us | Digg it! | reddit!