Yahoo! User Interface Blog (YUIBlog)

Annunciando YUI 3.1.0

Il team di YUI è lieta di annunciare il rilascio di YUI 3.1.0 .

Punti salienti di questa versione includono:

• Infrastrutture Component - L'infrastruttura Widget per YUI 3 è ora ampiamente in atto. Satyen Desai si è concentrato su questo lavoro nel corso degli ultimi mesi, e l'approccio che ha discusso a YUICONF 2009 è ora pienamente realizzato come i Base , Attribute , plugin e widget moduli della componente infrastrutturale stato del gruppo GA portata di mano. Satyen ha fornito una guida dettagliata sviluppatore per chi è interessato a saperne di più l'infrastruttura componente.

• Internazionalizzazione utility - Satyen ha lavorato con l'ingegnere Norbert Yahoo internazionalizzazione Lindenberg sulla nuova utility Internazionalizzazione per la 3.1.0. Questo componente introduce l'approccio YUI 3 di internazionalizzazione, che consente l'esternalizzazione dei fasci di lingua modulo risorse che possono essere forniti separatamente dal codice, con un supporto per loader Adam Moore per specificare le preferenze di lingua. Continueremo a sviluppare e costruire su questo approccio, come abbiamo introdotto YUI 3 widgets con interfacce utente più complesse.
• Visualizzazione a scheda come un widget di riferimento - Matt Sweeney Visualizzazione a scheda viene aggiornato e costituisce un buon riferimento per l'attuazione YUI 3 a base di Widget, comprese l'approccio che stiamo assumendo progressive enhancement.

  

• Miglioramenti Pale Adam Moore ha migliorato loader YUI 3 di sostenere meglio il YUI 3 Galleria . A partire da 3.1.0, ora è possibile caricare qualsiasi modulo Galleria fornito prima 3.1.0, senza ulteriori configurazioni semplicemente facendo riferimento al modulo in use() dichiarazione.
• YUI 2 in 3 - Adam esteso il potere di use() ancora di più con la YUI 2 in 3 progetti . Con il rilascio della 3.1.0, è ora possibile includere YUI 2 moduli direttamente dal vostro use() istruzione, portando una versione completamente sandbox di YUI 2 nella vostra YUI 3 istanza. Questo lavoro supporta gli sviluppatori che stanno compiendo la transizione verso YUI 3, ma sono ancora dipendenti da alcuni componenti che sono unici per YUI 2, compreso il popolare YUI due DataTable .
• New Sortable utility - Sortable è una nuova utility da Glass Dav che sfrutta Drag and Drop per implementare liste ordinabili. Il supporto è fornito per le liste di singoli o liste multiple in cui gli elementi possono essere trascinati da una lista all'altra.

  

• Trattamenti visivi per Slider - visual designer Jeff Conniff ha lavorato con l'ingegnere YUI Luke Smith sul Slider componente per 3.1.0, il cui risultato fu una serie di trattamenti alternativi visivi per Slider. Luke ha anche aggiornato Slider per sfruttare i miglioramenti nelle infrastrutture Widget generale.

  

• Nuove API per la creazione di eventi DOM sintetici - Luca ha aggiunto il Y.Event.define() metodo per rendere più facile agli sviluppatori di definire nuovi eventi DOM nell'ecosistema 3 YUI. Utilizzare questa opzione per colmare le lacune nella nativa lista degli eventi DOM o comunque di etichette comuni momenti di interazione degli utenti, quindi iscriversi e cancellarsi, come si farebbe con qualsiasi altro evento.

Come sempre, YUI program manager Georgiann Puckett ha fornito un completo changelog per la YUI 3.1.0 release - fare riferimento a tale documento per informazioni dettagliate su cosa è cambiato per tutta la famiglia 3 YUI.

Cosa c'è di nuovo?

Tra il rilascio di YUI 3.0.0 e 3.1.0, più di 50 liberi, open-source moduli sono stati aggiunti alla Gallery 3 YUI . Oggi, tutto questo contenuto è accessibile a voi da qualsiasi istanza di YUI 3.1.0 . Come iniziare il nostro lavoro per YUI 3.2.0, la stessa biblioteca sarà tutt'altro che statica - attualmente, YUI 3 sta crescendo più rapidamente di contributi comunitari che dal lavoro del core team, e quei contributi sono accessibili a una scala senza precedenti.

Nelle prossime settimane, ci aggiornare il YUI 3 roadmap e il calendario con gli obiettivi iniziali e tempi della nostra pianificazione 3.2.0. 3.2.0 sarà un widget incentrata rilascio come la maggior parte del core team rivolge la sua attenzione ai blocchi dell'interfaccia utente di elevato valore di costruzione che sono familiari dal mondo 2 YUI.

Nel frattempo, attendiamo i vostri commenti su YUI 3.1.0. Unisciti a noi nel forum YUILibrary.com e fateci sapere tramite il bug tracker se scoprite problemi nel comunicato.

Trova le conversazioni: bloglines | technorati

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

Prossime conferenze di settore

Amiamo grandi conferenze tecnologia, e sappiamo che molti di voi hanno cose incredibili da condividere. Così ho messo insieme questo elenco di conferenze e barcamp arrivo con i quali sono alla ricerca di altoparlanti o di partecipazione.

Stiamo per essere in alcuni di questi e speriamo di vedere molti di voi non ci parlare o meno.

Conferenze professionali

Web 2.0 Expo di New York 2010

Scadenza: 12 Aprile 2010
Web 2.0 Expo di New York Submission Pagina
Conferenza Data: 18 - 21nd ottobre 2010
Location: New York, NYC, USA

EuroPython 2010

Scadenza: 30 Aprile 2010
EuroPython Submission Pagina
Data Conference: 19 - 22 Giugno 2010
Location: Birmingham Conservatoire, Birmingham, UK

Barcamp

• 3 aprile - MobileCamp Boston
• 10 aprile - BarCamp Rochester
• 10 aprile - BarCamp Charlotte
• 17-18 aprile - BarCamp Boston
• 1 maggio - BarCamp Missoula
• 25 Set - BarCamp Jonesboro

Vi terremo aggiornati sui evento parlando scadenze sono venuti fuori. Fatemi sapere cosa mi sono perso nella sezione commenti e faremo in modo che il vostro evento è incluso qui.

Trova le conversazioni: bloglines | technorati

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

Nella Galleria YUI 3: Plugin Resize Matt Parker

Usiamo un sacco dei diversi YUI 2 widgets e componenti della nostra applicazione principale, e li ama! Ma avevo pensato che fosse giunto il momento di iniziare a ricevere alle prese con YUI 3 , e ho deciso che avrei un andare a portare Utility Resize YUI 2 di YUI verso 3. Ho anche progetti a lungo termine di scrivere un widget diario, e se sarebbe stato in YUI 3 sarebbe bisogno di qualche resizableness.

Il risultato: My YUI 3 plug Resize Galleria . La sorgente è disponibile su GitHub , ed ecco un esempio funzionale .

Ho deciso di farlo come un plugin, piuttosto che un widget. Per quanto posso dire, i plugin sono come una bella borsa o un paio di scarpe in pelle di struzzo, ma piuttosto di un elemento esistente, ma non sono l'essere-tutto-e-all-end. Creazione di un elemento ridimensionabile sentivo come un plugin per me.

Per usare Resize, includere il codice nella pagina:

 <Script

Una volta che il modulo della pagina, facendo un elemento ridimensionabile è facile come collegarlo in:

 YUI (). Utilizzare ("galleria-resize", function (Y) {
   Y.one ("# elementId") il tappo (Y.Plugin.Resize).;
 });

Sembrava molto importante per me che la configurazione e la API di YUI 3 versioni di componenti che esistono in YUI 2 dovrebbe essere simile, almeno, o tanto quanto possono essere all'interno dell'approccio 3 YUI. Quindi è possibile utilizzare gli stessi oggetti di configurazione con questo plugin, come con la versione 2 YUI, e ho fornito i metodi di API stessi. Ho scritto il codice del plugin da zero, ma il CSS viene copiato direttamente da YUI 2, cambiando solo il prefisso da yui- a yui3- . Ciò dovrebbe ridurre al minimo la curva di apprendimento per le persone che fanno il YUI 2 a 3 YUI transizione.

Ecco un esempio con alcune altre opzioni, passato come un oggetto come secondo argomento a plug() :

 YUI (). Utilizzare ("galleria-resize", function (Y) {

   Y.one ("# elementId")
    . Spina (Y.Plugin.Resize,
          {Trascinabili: true,
             Rapporto: false,
             altezza: 150,
             proxy: vero,
             fantasma: true,
             animare: true,
             autoRatio: true,
             maniglie: ["t", "b", "l", "r", "tl", "tr", "bl", "br"],
             hiddenHandles: false,
             hover: true,
             knobHandles: true,
             useShim: true,
             Stato: true,
             / / Questa è una novità: un selettore per trovare gli elementi figlio all'interno # elementId
             / / Che dovrebbe essere ridimensionato in proporzione alla involucro.
             wrappedEls: "img",
             / / È quindi questo: dovrebbe 'abbraccio' l'involucro avvolto l'elemento?
             / / Questo sarà solo lavorare con un elemento avvolto.
             hugWrappedEl: true
              });
  });

C'è una sola eccezione alla coerenza con YUI 2: elementi di avvolgimento. Il mio modulo Galleria Resize aggiunge alcune div elementi all'interno dell'elemento che si sta ridimensionata per dare si trascina maniglie. Questo va bene fino a quando l'elemento accetta nodi figlio, ma le immagini, TextArea e simili no. In YUI 2, la Utility Ridimensiona automaticamente (o se lo dico) aggiunge un elemento wrapper per l'immagine (o qualsiasi altra cosa) per renderlo ridimensionabile.

Questo va bene, ma non è così buono con un approccio plugin. Plugins collegarlo a un nodo particolare, e sono accessibili come una proprietà di quel nodo. Ma se il mio plugin inizia a creare nuovi nodi padre e si attacca e il suo comportamento al genitore, l'interfaccia è un po 'rotto, e diventa confuso da utilizzare. Così la linea di fondo è che bisogna avvolgere le immagini da soli, per ora. Questo potrebbe essere lanciato come un vantaggio, l'elemento wrapper può contenere un mucchio di immagini, ad esempio, e tutti possono essere ridimensionati con il wrapper, ma le didascalie per loro potrebbe essere lasciato solo.

Mi piacerebbe un feedback da parte degli utenti ( nel nuovo forum Galleria marca Resize ) se l'approccio plugin funziona per voi - che è, ti piace la convenienza o si preferisce la comodità aggiuntiva di una utility che automaticamente ha gestito la confezione di immagini e TextArea? Ho qualche altra cose da fare ancora, così, ad esempio, non ho ancora preso cablata gli eventi, ci sono alcune ri-organizzare cianfrusaglie (tirando fuori i nomi di classe CSS), e alcune ottimizzazioni di prestazioni e dimensioni ancora fare. Non ho completato cross-browser testing, o, se si sta utilizzando Resize con un Mac, in particolare, mi piacerebbe un feedback su come sta funzionando per voi.

Trova le conversazioni: bloglines | technorati

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

Andrew Bialecki Vince il YUI 3 Galleria Contest 2010 con modulo di effetti

Congratulazioni a Andrew Bialecki ( @ abialecki su Twitter ), la cui Scriptaculous di ispirazione modulo di effetti ha vinto il YUI 3 Contest Gallery 2010 .

Andrew, che vive nella zona di Washington, sarà presente JSConf 2010 il mese prossimo con un biglietto omaggio da Yahoo! Developer Network . (Grazie, @ YDN !)

The Winning Entry: Effetti

Progetto di Andrew si basa sulla 3 Animation YUI componente, aggiungendo ad esso uno strato di zucchero ispirato alla API Scriptaculous. L'idea sarà un ambiente familiare (e gradita) uno per chi è abituato a questo tipo di sintassi:

  . Y.one ("# main_demo") spostare ({x: 300}) dissolvenza ();. 

I giudici hanno apprezzato l'utilità e l'opportunità di questo pacchetto. Gli sviluppatori apprezzeranno la concisione della sintassi e la reperibilità degli effetti, soprattutto se hanno esperienza di lavoro con essa in altre librerie.

Abbiamo anche ammirato la professionalità di Andrea della documentazione prevista per il modulo . Documentazione non è mai un compito facile, ma è touchpoint il primo realizzatore con il tuo codice, e accuratamente documentare il progetto dice al pubblico che si sta prendendo sul serio le sue esigenze. Andrew facilmente eliminato quel bar per noi.

Possiamo vedere gallery-effects che mostra in un sacco di use() dichiarazioni in futuro, e questo è stato uno dei fattori decisivi. Utile, espressivo e convincente documentato - in questo caso, una combinazione vincente.

Grazie ad Andrea per la sua presentazione. Scopri tutti i contributi di Andrew galleria su YUILibrary.com .

Menzioni d'onore

La qualità dei moduli che abbiamo giudicati per il concorso fatto questa una scelta difficile - c'è un sacco di lavoro interessante in questo gruppo. Abbiamo individuato alcune altre voci di rilievo degni di lode particolare:

• Utilità: Slideshow YUI - Josh Lizarraga di YUI modulo Slideshow (ispirato dal plugin jQuery Cycle) è pulito, elegante e ben documentato. Questo è un forte se siete alla ricerca di un cycler un'immagine basata su YUI 3.
• Unicità: Radial Menu - Matt Snider del menu radiale è un nuovo approccio per guardare un portafoglio di oggetti in miniatura o medie dimensioni. Il caso d'uso per questo componente è probabilmente più stretto per alcuni widget UI, ma schierato nel giusto contesto potrebbe essere molto incisivo e distintivo.
• Qualità Codice: Component Manager - Eric Ferraiuolo di Component Manager ci ha colpito come ben scritto e come un progetto che aiuta gli sviluppatori a gestire la propria struttura del codice. Anche se non farà la tua pagina lucido, potrebbe contribuire a rendere la vostra applicazione funzionare meglio, e questo è degna di una menzione d'onore nel nostro libro.
• Documentazione: YUISand - Lauren Smith YUISand modulo, che è un'implementazione nera ispirata Quicksand per jQuery, era sia ben documentata e interessante. Ha condiviso un punteggio elevato nella categoria documentazione con Base encomiabile e modulare Slideshow James Punteney s / Slideshow tandem animato , Josh del ciclo in stile Slideshow , e molti altri.

16 moduli in 17 giorni

Questa era una breve gara di running, ma nonostante la stretta finestra c'erano 16 moduli ammissibili presentati, e nessuno di loro delusi. In realtà, molti di loro potrebbero finire un contributo interessante per uno dei tuoi futuri YUI 3 applicazioni. C'era una lente di ingrandimento di immagini , due video di moduli, un wrapper per YUI 3 DataSource per farlo funzionare con YUI 2 componenti, un widget di giostra e un DOM per la creazione di moduli di zucchero e altro ancora.

Con questi ultimi arrivi (insieme a molti altri provenienti dalle scorse settimane che non erano ammissibili contest), YUI 3 Gallery è fino a 82 moduli . Si va dalla fondamentale alla capricciosa, ma la risorsa stessa è già uno degli aspetti più importanti del portafoglio 3 sviluppatore YUI. ( E può diventare ancora più preziosa abbastanza presto .) Ricordati, a partire dal prossimo rilascio della versione 3.1 (poche settimane di distanza) sarete in grado di utilizzare tutti i moduli direttamente dal tuo use() dichiarazione senza alcuna configurazione aggiuntiva o sovraccarico.

Grazie a tutti coloro che hanno presentato i moduli. Andrew, divertirsi al JSConf!

Trova le conversazioni: bloglines | technorati

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

Ada Lovelace Day 2010: Julie London, Diana Liu, Helena Rajan, Shweta Hayatnagarkar e Betty Tso di Yahoo! Finanza

Le donne di Yahoo! Finanza frontend team di progettazione sono alcuni degli ingegneri più talentuosi che abbia mai avuto il privilegio di lavorare. La loro passione per le migliori pratiche, l'accessibilità e l'utente finale rendere cantiere finanza più grande e migliore del mondo, un piacere assoluto. Alla vigilia della spedizione di un aggiornamento massiccio al sito Yahoo! Finance che prenderà il nostro codice di base globale e spingerlo nei data center in tutto il mondo, mi trovo sento incredibilmente fortunato a lavorare con queste donne in un giorno per giorno. Ho chiesto alle donne della squadra frontend Yahoo! Finanza pensare a quello che li ha portati alla progettazione front-end e che cosa vuol dire lavorare su uno dei siti web più visitati al mondo.

Julie London

Ho costruito il mio primo sito nel 1998, quando GIF animate sono stati considerati all'avanguardia. Stavo lavorando come un antropologo, al momento e mai immaginato che le 5 pagine web scadenti poco che ho costruito per San Francisco State University potrebbe essere l'inizio di un percorso che avrebbe portato a Yahoo!.

Amo engineering frontend perché amo essere messo in discussione e mi piace risolvere i puzzle. Il mio lavoro non è mai noioso. Il paesaggio è sempre in movimento e per eccellere bisogna continuare ad imparare.

Lavorare in Yahoo! mantiene il mio ego sotto controllo. Io lavoro con persone brillanti in un sito che viene utilizzato da milioni di persone.

Diana Liu

La prima volta ho coinvolto con la programmazione web, quando ho lavorato come co-op studente durante i miei studi universitari. Stavo lavorando a Hewlett-Packard sui propri siti web interni e strumenti web. Sono stato esposto a una grande varietà di compiti, ma ben presto mi trovai attratto engineering frontend. Mi piace essere in grado di scrivere poche righe di codice, premere il pulsante di refresh del browser, e visualizzare immediatamente i risultati. La soddisfazione immediata è schiacciante. Mi piace lavorare nel livello più vicino agli utenti. E 'importante per me che ho grandi esperienze di fornire agli utenti, e come un ingegnere frontend posso spesso influenzano l'usabilità e la progettazione di pagine web.

Yahoo offre una formazione completa nel campo delle tecnologie frontend, e ha anche un elevato standard per il codice che scriviamo. Yahoo ci spinge a scrivere codice accessibile. Per me, è molto gratificante sapere che le persone con disabilità siano in grado di accedere alle funzionalità di Yahoo! Finanza perché scrivere codice in grado di supportare le tecnologie assistive.

Sono orgoglioso di dire alla gente che lavora sul più grande sito web della finanza in rete. Si tratta di una grande responsabilità, sapendo che scrivo codice per milioni di utenti in tutto il mondo. Al tempo stesso, è una sensazione incredibile sapere che sto aiutando le persone fare le cose più facili a causa del codice che scrivo.

Helena Rajan

Tutti noi conosciamo il proverbio, "Face è l'indice della mente". Vorrei confrontare engineering frontend per il volto e l'ingegneria backend per la mente. Questo dice tutto. Il sito è in primo luogo giudicato dal look and feel, viene poi le altre caratteristiche ... e questo è ciò che ho dentro e questo è ciò che mantiene la mia vita quotidiana interessante.

E 'un'esperienza impressionante di lavorare nella finanza. Non tutte le persone l'opportunità di lavorare su un prodotto che viene visto da milioni di persone nel mondo ogni giorno, e sono grato di avere questa opportunità. Questo progetto mi ha dato il privilegio di lavorare con alcuni grandi tecnologi e mi aiuta a imparare qualcosa di nuovo ogni giorno.

Shweta Hayatnagarkar

Front-end engineering è un dominio incredibile - si arriva a sviluppare il più cool software che gli utenti finali effettivamente vedere e apprezzare. Si sta costantemente sviluppando caratteristiche che impatto l'esperienza dell'utente. Inoltre, si arriva a imparare e lavorare su all'avanguardia, state-of-the-art tecnologie che sono in continua evoluzione. Yahoo! fornisce una solida piattaforma per l'ingegneria frontend.

E 'una lama a doppio taglio - da un lato si ottiene una soddisfazione che tutto ciò che si sviluppano saranno utilizzati da milioni di utenti in tutto il mondo, d'altra parte bisogna essere costantemente sulle dita dei piedi per assicurarsi che il sito è eseguito alla perfezione . Quindi è più soddisfacente e al tempo stesso.

Yahoo è un posto fantastico per essere un ingegnere frontend. L'infrastruttura di frontend e di ricerca frontend in continua evoluzione, per non parlare dei milioni di utenti, rende Yahoo! sviluppando uno più interessante, esperienza di lavoro stimolante e soddisfacente.

Betty Tso

Ho anche iniziato a siti di costruzione nel periodo in cui gif animate sono state un successo. Dopo aver studiato Computer Science, mi sono concentrato in alto sviluppo del sito web performance. Sono entrato in Yahoo! come un ingegnere frontend, ed è stato molto gratificante vedere come le tecnologie si sono evolute diverse frontend l'esperienza online degli utenti e reso il web una parte quotidiana della vita delle persone.

La mia attenzione alla squadra di frontend Yahoo! Finance comprende l'analisi e lo sviluppo di modi per migliorare le prestazioni del sito e l'esperienza utente. Ho anche aiutare gli altri servizi di Yahoo! per identificare i colli di bottiglia delle prestazioni e proporre soluzioni di miglioramento. Mi piace condividere lo spirito viola con persone al di fuori della società, e io ero uno dei rappresentanti del Massachusetts Institute of programma di tecnologia di reclutamento universitario.

Sta andando essere il mio 4 ° anno a Yahoo! in un mese e, guardando indietro, è stato un viaggio appagante. Ho potuto lavorare su un sito web che ha un impatto milioni di vita quotidiana delle persone, e ho potuto lavorare con un po 'grande talento in un accogliente, animata, ambiente della squadra pazza e divertente.

Trova le conversazioni: bloglines | technorati

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

Ada Lovelace Day 2010: Sadaf Shahsahebi di Yahoo! Developer Network

Cresciuto nel cuore della Silicon Valley, si potrebbe sostenere che Sadaf Shahsahebi era sempre destinato a lavorare con la tecnologia. Suo padre portò a casa il suo primo computer quando aveva 7 anni e da scuola media lei era già in programmazione Pascal a scuola, tenendo corsi estivi per imparare il C + +. Anche così, una parte di Sadaf era ugualmente disegnato verso la medicina e il potenziale per contribuire a trattare e curare i bambini. Non è stato fino a poco prima del college quando ha definitivamente deciso di puntare sulla tecnologia. Perdita La professione medica si rivelò essere il guadagno Yahoo! 's.

Uno stage estivo chance di Yahoo! in seguito al suo secondo anno al college ha iniziato una relazione che durò fino alla laurea, quando ha deciso di lavorare per il tempo pieno Yahoo!. Anche se i suoi stage non sono stati concentrati sulla progettazione frontend, ha gravitato verso la disciplina quando ha imparato a conoscere il programma Juku. Sadaf trascorso diversi mesi imparare gli angoli più riposti di ingegneria frontend prima della laurea con la prima classe Juku.

Sadaf poi aderito Yahoo! Application Platform (YAP) squadra come uno dei loro ingegneri frontend primi. Ha fatto parte del team che ha creato YAP da zero ed è cresciuto alla piattaforma ricca di funzionalità che gli sviluppatori godiamo oggi. Piuttosto una realizzazione per chiunque, figuriamoci per il primo lavoro di qualcuno di college.

A causa della sua profonda conoscenza in merito YAP, Sadaf è stato anche il compito di lavorare per l'integrazione tecnica di YAP nel Mio Yahoo! Ha lavorato a stretto contatto con il mio team Yahoo! per creare una esperienza senza soluzione di continuità con il prodotto già esistente, facendo un enorme impatto sul I miei milioni di utenti Yahoo! in tutto il mondo.

Ruolo attuale Sadaf come parte di Yahoo! Developer Network squadra ha il suo sviluppo e mantenimento degli strumenti di sviluppo che permettono di sviluppatori di terze parti per creare e gestire le loro applicazioni YAP. Basti dire, se avete mai creato una domanda di Yap, allora siete grati per il lavoro di Sadaf.

Cosa Sadaf porta il suo lavoro è evidente quando parla: la passione per il Web, un amore di sfide, e una sete di conoscenza. Lei si ritrovano regolarmente cercando di espandere la propria intelligenza di tutto il software le cose, come lei è un avido lettore e solo di recente ha iniziato un programma di Master in informatica.

La sfida del Web, un costante cambiamento, in continua evoluzione regno di API è perfettamente in sintonia con notevole talento di Sadaf. Anche se è facile ammettere che IE6 spinge i suoi dadi, la passione Sadaf per front-end engineering e la sua dedizione per continuare ad imparare assicura un futuro brillante per lei e nessuno dei suoi progetti futuri.

Trova le conversazioni: bloglines | technorati

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

Nella Galleria YUI 3: Form Manager di John Lindal

Forme sono state un punto fermo sui siti web per un tempo molto lungo. Nei primi tempi, erano molto semplice: l'utente ha immesso i valori e poi ha aspettato mentre il server ha elaborato i valori o sputare indietro errori. L'ascesa del Web 2.0 ha migliorato significativamente l'esperienza, in particolare pre-validazione sul client. Questo fornisce un feedback immediato ed evita inutili connessioni al server.

Pre-convalida è solo un aspetto delle forme, comunque. L'intero ciclo è:

1. pre-compilare il modulo con i valori di default;
2. pre-convalidare l'ingresso nel browser;
3. presentare i dati del modulo al server in modo sincrono o asincrono;
4. visualizzare i risultati restituiti dal server (buon fine o errori).

In combinazione con YUI 3 IO , il modulo di YUI 3 Galleria Form Manager supporta il ciclo completo. Puoi giocare con la funzionalità lato client qui .

Inizializzazione

Il primo passo, pre-compilazione del modulo con i valori predefiniti, è ovviamente meglio farlo impostando i valori direttamente nel markup, perché funziona anche quando JavaScript è disattivato. Tuttavia, è possibile anche passare una mappa di valori predefiniti, digitato sui nomi degli elementi del modulo, al costruttore Form Manager. Quando si chiama prepareForm() , che unisce i valori predefiniti del DOM con i valori di default passati al costruttore, con il costruttore i valori che ha la precedenza. Il risultato viene salvato in modo da poter ripristinare questi valori chiamando populateForm() . È inoltre possibile modificare le impostazioni predefinite memorizzate: setDefaultValues() e setDefaultValue() , o saveCurrentValuesAsDefault() . (Si noti che questo è diverso da quello nativo del browser reset funzione, dal momento che utilizza solo i valori codificati nel DOM. Form Manager fornisce clearForm() come wrapper per reset .)

Un'altra funzione utile per chiamare durante l'inizializzazione è initFocus() . Questa imposta si concentrano sul primo elemento nel modulo. Se la compilazione del modulo è la ragione principale per visitare la pagina, questo consente di risparmiare all'utente un clic. Ovviamente, se avete più di una forma sulla pagina, si dovrebbe chiamare solo initFocus() per uno di loro.

Pre-convalida

Pre-convalida dell'input utente è un affare complicato . Nella mia esperienza, l'approccio più semplice è meglio: controllare tutto dopo che l'utente dice che ho finito questo modo si evita la necessità di filtrare il flusso di input (KeyUp è facile da prendere, ma pasta è notoriamente difficile, e porta tutto inaspettata. comportamenti caso limite) e, soprattutto, non interrompe il flusso dell'utente. Questo è il motivo Form Manager fornisce una singola funzione per convalidare tutto ciò che nella forma (rullo di tamburi, please): validateForm() .

A differenza di altre soluzioni, Form Manager memorizza la maggior parte della configurazione di convalida nel DOM. Per marcare un campo per la convalida, applicare una o più delle seguenti classi CSS direttamente al campo:

yiv-required

Il valore non deve essere vuoto.

yiv-length:[x,y]

Stringa di caratteri deve essere di almeno x e y maggior parte dei personaggi. Almeno uno di X e Y deve essere specificato.

yiv-integer:[x,y]

Il valore deve essere un numero intero, e il valore deve essere almeno x e al massimo y. x e y sono entrambi opzionali.

yiv-decimal:[x,y]

Il valore deve essere un decimale, e il valore deve essere almeno x e al massimo y. Esponenti non sono ammessi. x e y sono entrambi opzionali.

Ad esempio, se un campo deve essere compilato, e accetta solo tra 6 e 10 caratteri, la classe CSS sarebbe yiv-required yiv-length:[6,10] .

Un bel vantaggio di codifica convalida in classi CSS è che può essere applicato in situazioni correlate, per esempio, quando si modificano i campi creati dinamicamente in una tabella. (Spero di postare un esempio per YUI due DataTable al più presto.) FormManager espone la funzione statica validateFromCSSData() in modo da non dover reinventare la ruota.

Se avete bisogno di usare una espressione regolare per convalidare un campo, registrarsi chiamando setRegex() . Per qualsiasi altra cosa, è possibile associare una funzione ad un campo chiamando setFunction() . Se è necessario eseguire i controlli che comprendono più campi, è possibile ignorare postValidateForm() sull'istanza di Y.FormManager .

Una nota finale: Come suggerisce il nome, pre-convalida non è la convalida reale. JavaScript è relativamente facile da sovvertire (o disattivare completamente), quindi il server non deve mai fidarsi di nulla che riceve dal client. Inoltre, alcuni controlli può avvenire solo sul server, per esempio, tutto ciò che richiede accedere al database.

Errori Visualizzazione

Ovviamente, se uno dei due pre-validazione sul client o sul server di convalida non riesce, allora avete bisogno di informare l'utente, idealmente, mettendo in evidenza i campi che richiedono attenzione. Form Manager supporta questa tramite la funzione displayMessage() .

Questa funzione si aspetta certe classi CSS marcatori sul DOM surrouning ogni elemento o forma strettamente accoppiati insieme di elementi di un form. Il mio preferito è il layout:

 <div class=" formmgr-row>
   Elemento label ... ...
   <span class=" formmgr-message-text "> </ span>
   ... Elemento form contrassegnati con classe CSS formmgr campo ...
 </ Div>

Questo localizza bene, dal momento che l'etichetta è sopra il campo, e quando un messaggio di errore viene visualizzato, è molto chiaro a quale settore si applica l'errore. To see it in action, follow this link and click the Validate button in the upper left corner of the page.

But that is just my preference. You can arrange the DOM elements any way you want inside the container marked by formmgr-row , as long as somewhere inside is another container marked by formmgr-message-text , and the field itself is marked by formmgr-field .

Message Types

One important point is that displayMessage() requires a message type. The supported types are stored in Y.FormManager.status_order in order of precedence. The default is [ 'error', 'warn', 'success', 'info' ] , but you can modify this to suit your needs. The ordering is important because, if you call displayMessage() with a higher precedence type and the field is already displaying a message with a lower precedence, then the new message will replace the original message. Similarly, a lower precedence message will be ignored if a higher precedence message is already displayed. This allows you to toss messages at each field with abandon, secure in the knowledge that errors will override warnings.

When a message is displayed, the container marked with formmgr-row and the field marked with formmgr-field both get an extra CSS class: formmgr-has type , where type is the message type. This allows you to style the message, field, label, etc. in a different way for each message type. In addition, the fieldset containing the form field also gets the same class. This can be used to direct the user's attention when the form is large. (If several fields within a fieldset have different types of messages, the highest precedence type is set on the fieldset.)

Messaggi

Form Manager includes a default set of error messages for all the validations that can be encoded in CSS. These strings are stored in Y.FormManager.Strings , so you can modify and/or localize them.

You can also specify custom messages for individual fields by calling setErrorMessages() .

Note that there is no default message for a regular expression validator, because anything generic like The value does not match the required pattern. is utterly meaningless to the user. If you do not set a message for the type regex before setting the regular expression itself, Form Manager will log an error to remind you.

Submitting the Form

Regardless of whether you submit the data synchronously (via form.submit() ) or asynchronously (via Y.io ), you will probably want to disable the form while the data is being processed. Form Manager automatically finds all buttons inside the <form> element. If you have additional buttons elsewhere on the page, you can register them by calling registerButton() . All known buttons will be disabled when you call disableForm() . (If you use XHR, call enableForm() after you receive the response from the server!)

If you submit the form synchronously, then you will serve the same page again if there are errors. In order to work without JavaScript, you should write the errors directly into the DOM, the same way that Form Manager does it.

If you submit via XHR, then you know that JavaScript is enabled, so you can use displayMessage() to highlight the values which the server rejected. Obviously, this requires that the response from the server include detailed error information!

As a final note, if the form is in an overlay, then you should only close the overlay if the server response with success ; ie, display errors in the overlay, but display a success message somewhere prominent on the main page.

Trova le conversazioni: bloglines | technorati

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