Yahoo! User Interface Blogg (YUIBlog)

YUI Theater - Jeff Craig: "Demystifying Loader: Advanced Modulkonfigurasjon" (31 min.)

I dette foredraget fra YUIConf 2011, Meebo ingeniør og YUI bidragsyter Jeff Craig ( @ foxxtrot avslører) alt du alltid har ønsket å vite om YUI Loader, men var redd for å spørre. Dette er en må-se for alle som gjør performance-kritisk arbeid med YUI tre.

Lenker

• Vis i HD på YouTube
• Slides
• Full YUIConf 2011 Playlist på YouTube

Finn samtaler: Bloglines | technorati

Del og utvide: bokmerke med del.icio.us | Digg it! | reddit!

YUI: Åpningstider to des 15.

YUI 3.5.0 PR1

YUI 3.5.0 PR1 er nå tilgjengelig ! Dette er den første av tre Preview-versjoner for 3.5.0.

For denne åpningstider vil vi markere hva som er i PR1 og diskutere hvordan du kan bli involvert for å sikre at 3.5.0 er bunnsolid. Vi vil også be om en show-of-hender fra de awesome utviklere som allerede har begynt å bruke 3.5.0 PR1 (som er på CDN ). Kom torsdag, ikke blir tatt med hånden nede :)

Også YUI biblioteket Staging nettstedet er oppdatert med de nyeste brukerhåndbøker og API docs, og som svar på tilbakemeldingene fra de siste åpningstider , vi bruker nå vår GitHub wiki å spore pågående utviklingsprosjekter diskusjoner .

Opptak

Innspillingen er tilgjengelig på YUILibrary YouTube-kanal .

Finn samtaler: Bloglines | technorati

Del og utvide: bokmerke med del.icio.us | Digg it! | reddit!

App Framework Endringer i YUI 3.5.0

Siden den første utgivelsen av App Framework i YUI 3.4.0, har vi blitt forbauset over hvor fort det har blitt vedtatt. I prosjekter store og små , ​​har begge lang tid Yui brukere og de ​​som er helt ny på biblioteket vært entusiastisk bruker App Framework sin MVC komponenter og gir gode tilbakemeldinger og feilrapporter. Takk!

I YUI 3.5.0, vil App Framework får mange feilrettinger og noen store forbedringer. Eric Ferraiuolo dekket mange av de kommende endringene i hans fantastiske YUIConf diskusjon , men vi ønsker å fremheve dem her også slik at du vet hva som kommer og hva du bør forberede deg på hvis du planlegger å oppgradere App Framework-basert kode fra 3.4.x til 3.5.0. Disse endringene er allerede i YUI 3.5.0 PR1 , som ble offentliggjort i dag, er det nå en fin tid å begynne å teste dem.

Y.Controller er nå Y.Router

"Controller" var en dum og forvirrende navn for en komponent som egentlig dreier seg mer med URL-basert ruting, spesielt på grunn av mer tradisjonelt kontrolleren-aktig rolle som Y.View spiller. Vi har besluttet å bite the bullet og endre navn på Y.Controller klassen til Y.Router i 3.5.0. Y.Controller vil bli et alias for å bevare bakoverkompatibilitet, men dette aliaset vil etterhvert bli fjernet, så du bør oppdatere koden for å referere til det nye navnet.

Ny rute handler signatur

Metoden signatur for rute Føreren funksjoner i Y.Router har endret litt for å gjøre det mer likt Express og gjøre Router API mer naturlig når de brukes på serveren (en funksjon vi for tiden jobber på for 3.5.0).

Tidligere fikk en rute behandlingsprogram funksjon to argumenter: req (en forespørsel objekt) og next (en funksjon). I 3.5.0, vil rute handlers få tre argumenter: req , res (en respons objekt), og deretter next .

For ordens skyld bakoverkompatibilitet, den nye res er argumentet også en funksjon som oppfører seg akkurat som next , så gammel stil rute behandlingsprogrammer som forventer at next som andre arg vil fortsette å fungere fint i 3.5.0. Men dette kompatibilitet mellomlegg til slutt vil bli fjernet, så ikke vent for lenge med å oppdatere koden.

Noen egenskaper er nå attributter

Vi eksperimenterte med en ikke-helt-YUI-aktig stil å bruke egenskaper for konfigurerbare valg i App rammeforskriften komponentene i 3.4.0, men dette viste seg å være litt forvirrende og mer enn en litt begrensende, siden eiendommer ikke nytte fra endring hendelser, settere, og validatorer som attributter gjøre. Så i 3.5.0, vi konvertere mange av disse egenskapene til attributter.

Dessverre er denne endringen ikke bakoverkompatibel, så kan eksisterende kode som bruker Y.Controller (nå Y.Router) eller Y.View må oppdateres. Spesielt Y.Router 's html5 , root , og routes eiendommer er nå attributter, og Y.View 's container , model , og modelList eiendommer er nå attributter også.

I tillegg til dette, Y.View 's container behandler attributt nå strengverdier som CSS selectors brukes til å finne noder på siden. I 3.4.x, antas det en streng verdi utgjorde rå HTML som skal omgjøres til en node. For å få den gamle atferden, bare endre de eksisterende HTML strengverdier fra '<div>foo</div>' til Y.Node.create('<div>foo</div>') .

Dokumentasjon for 3.5.0 PR1

Work-in-progress dokumentasjon for disse og andre endringer i YUI 3.5.0 PR1 kan bli funnet på vår oppsetning nettside . Her er noen linker til aktuelle oppsetningen docs som inkluderer informasjon om App Framework deprecations i 3.5.0 og detaljer om hvordan du oppgraderer din kode:

• Router
• Vis

Merk at innholdet på stage.yuilibrary.com reflekterer arbeidet som pågår i fremgang og kan være ufullstendig eller til og med noen ganger ødelagt som vi tester nye ting. Du vil alltid finne dokumenter for den siste stabile utgaven på vårt produksjonssted, yuilibrary.com .

Hva annet er nytt?

I dette blogginnlegget har jeg oppsummert de viktigste deprecations kommer til App Framework i 3.5.0, men det finnes også mange funksjonsforbedringer og under panseret feilrettinger. For en fullstendig liste over App Framework endringer i 3.5.0 PR1, konsultere historikken .

Se også etter et blogginnlegg fra Eric snart om Y.App, en kjempeflott ny høyt nivå komponent av App Framework som brytes opp URL-basert ruting og utsikt ledelse i én enkel å bruke API som vil få deg fra null til et fungerende program på kort tid.

Vi håper du elsker forhåndsvisningen utgivelsen, og vi vil gjerne høre fra deg! Du kan sende oss tilbakemeldinger i forumet , i en feilrapport , på Twitter , på # YUI IRC-kanal på Freenode, eller bare i diskusjonen her med en kommentar.

Finn samtaler: Bloglines | technorati

Del og utvide: bokmerke med del.icio.us | Digg it! | reddit!

YUI 3.5.0 PR1 er nå tilgjengelig

YUI 3.5.0 Preview Release 1 har vært deployert for testing og tilbakemeldinger fra utviklere. Du finner den på Yahoo! CDN ved yui.yahooapis.com/3.5.0pr1/build/yui/yui-min.js , eller laste ned en zip-fil hvis du planlegger å være vert for det selv.

Den samlingen av endringer innført i PR1 er tilgjengelig på vår GitHub Wiki. I tillegg kan du se gjennom listen av billetter som ble løst i denne versjonen .

Arbeid-in-progress brukerhåndbøker og API docs for 3.5.0 kan bli funnet på vår oppsetning stedet, men pass på at disse dokumentene kan være ufullstendig eller til og med brutt, siden det er der vi teste nye ting. Offisiell docs for den siste stabile utgaven kan alltid finnes på vår produksjonssted, yuilibrary.com .

Flere endringer vil bli innført i de kommende Preview-versjoner av YUI 3.5.0, noen av dem er for tiden i utviklernes egne filialer og er tilgjengelig for første gjennomgang via følgende pull forespørsler:

• Ny DataTable arkitektur og implementering
• Ny knapp modul

Til fil bugs mot denne utgivelsen, vennligst besøk vår bug tracking system . Hvis du ønsker å gi innspill på disse og fremtidige moduler, blir de pågående diskusjoner om forskjellige temaer knyttet til 3.5.0 utgivelsen skjer på vår GitHub wiki.

Hvis alt går etter planen, håper vi å slippe YUI 3.5.0 PR2 30. januar 2012. God jul!

Finn samtaler: Bloglines | technorati

Del og utvide: bokmerke med del.icio.us | Digg it! | reddit!

YUI Theater - Allen Rabinovich: "YUI Calendar - A Case Study of Byggmoduler med stil" (47 min.)

I dette foredraget fra YUIConf 2011, YUI ingeniør Allen Rabinovich ( @ allenr aksjer) prosessen han brukte til arkitekt og bygge den nye kalenderen widget i YUI 3, og forklarer hvordan du kan bruke en lignende prosess for å bygge dine egne widgets. Han viser også utenfor den nye komponenten og avslører en smart ytelse triks som brukes til å fremskynde gjengivelse av flere kalendere.

Lenker

• Vis i HD på YouTube
• Full YUIConf 2011 Playlist på YouTube

Finn samtaler: Bloglines | technorati

Del og utvide: bokmerke med del.icio.us | Digg it! | reddit!

YUI Theater - Pat Cavit: "Automatisere Nettside optimaliseringer" (32 min.)

Pat Cavit ( @ tivac ), en frontend ingeniør ved ArenaNet og en aktiv YUI bidragsyter og medlem i fellesskapet kom oss på YUIConf 2011 for å gi dette snakk om å automatisere build-time nettside optimaliseringer som fil sammensetning, minification, endre navn, og mer bruk av Ant bygge verktøy.

Lenker

• Vis i HD på YouTube
• Full YUIConf 2011 Playlist på YouTube

Finn samtaler: Bloglines | technorati

Del og utvide: bokmerke med del.icio.us | Digg it! | reddit!

I YUI 3 Gallery: Bulk Editor Widget

Den Hurtigredigering plugin for YUI 3 DataTable gjør det enkelt å redigere en hel side med poster som en atomisk operasjon. Men noen ganger trenger du å gjøre enda mer. For eksempel, må du kanskje samtidig redigere flere poster enn du kan godt passe på en enkelt side. Eller du kanskje trenger å støtte legge til, duplisere og fjerne poster som en del av atom operasjonen. Eller du kan ønske å visuelt gruppere felter ved å plassere dem i en enkelt tabellcelle. Den Bulk Editor widgeten støtter alle disse mulighetene.

( Klikk på bildet for å leke med dette eksempelet .)

Oversikt

Den Bulk Redaktør widgeten består av tre komponenter:

Data source

Dette brytes en YUI DataSource og forvalter de endringer: innsettinger, flytting og endrede verdier.

Base widget

Dette gir den grunnleggende strukturen for redigering ved å styre poster og felt innenfor hver post. Avledede klasser er ansvarlig for å gjengi hver post i en egen rad, noe som kan være en div, en TBODY, eller en annen beholder.

HTML table implementation

Dette utvider basen widgeten til å gjengi hver post til en TBODY i en HTML-tabell. Kolonnen konfigurasjon avgjør hvilket felt vises i hver kolonne av tabellen. En tilpasset celle formateringskortet kan brukes til å gjengi flere felt i en enkelt tabellcelle.

Konfigurasjon

I eksempelet som genererte skjermbildet over har konfigurasjon blitt holdt så enkelt som mulig:

fields definerer redigerbare verdiene i hver post. Standardtypen er inngang. De andre gyldige typene er utvalgt og tekstfeltet. (Velg krever en liste over verdier.) Basic validering leveres av Form leder galleri modul. Dette dekker nødvendige felt, lengde begrensningene og numeriske områder . Mer kompleks validering kan utføres ved å angi regex eller din egen funksjon ( fn ). Her er et utdrag fra det levende eksempel:

 Var felt =
 {
	 tittel:
	 {
		 type: "textarea"
	 },
	 år:
	 {
		 Validering:
		 {
			 CSS: 'yiv-heltall: [1500,2100]'
		 }
	 },
	 farge:
	 {
		 type: "Velg",
		 verdier:
		 [
			 {Verdi: "rød", tekst: 'Red'},
			 {Verdi: 'grønn', text: 'Green'},
			 {Verdi: "blå", tekst: 'Blue'}
		 ]
	 }
 };

Y.BulkEditDataSource krever en forekomst av Y.DataSource og følgende parametere:

uniqueIdKey

Navnet på en nøkkel som unikt identifiserer hver post.

generateRequest

En funksjon for å generere forespørsel parametere for Y.DataSource . (Dette er tomt i eksempelet, fordi Y.DataSource.Local alltid returnerer alle data.)

extractTotalRecords

En funksjon for å trekke ut det totale antall poster fra Y.DataSource respons.

Siden eksempelet bruker Y.DataSource.Local , totalRecordsReturnExpr er også nødvendig. Dette OGNL uttrykket angir hvor i responsen å lagre det totale antallet poster. (Legg merke til at extractTotalRecords leser denne verdien.)

 Var ds = ny Y.BulkEditDataSource (
 {
	 DS: raw_ds og
	 uniqueIdKey: 'id',
	 generateRequest: funksjon () {},
	 totalRecordsReturnExpr: '. meta.totalRecords' på
	 extractTotalRecords: Funksjon (respons)
	 {
		 tilbake response.meta.totalRecords;
	 }
 });

Y.HTMLTableBulkEditor krever datakilden, feltet konfigurasjon, og kolonnen konfigurasjon. I kolonnen konfigurasjonen, er nøkkelen feltnavnet, med mindre du angir en egendefinert formateringskortet. Etiketten blir brukt som kolonnen tittelen. Her er et utdrag fra det levende eksempel:

 Var kolonner =
 [
	 {
		 nøkkel: 'boksen',
		 label: «<input type="checkbox" id="select-all" /> ',
		 Formateringskortet: funksjon (o)
		 {
			 Var markup = '<input type="checkbox" class="record-select" id="{id}" />';
			 o.cell.set ('innerHTML', Y.Lang.sub (markering,
			 {
				 id: this.getRecordId (o.record)
			 }));
		 }
	 },
	 {Nøkkel: 'title', etiketten: 'Tittel'},
	 {Nøkkel: «år», etiketten: 'År'},
	 {Nøkkel: 'farge', etiketten: 'Color'}
 ];

(Merk at levende eksempel definerer en mindre utvidelse Y.HTMLTableBulkEditor å håndtere avmerkingsboksen kolonnen.)

Du kan også passere en forekomst av Y.Paginator til Y.BulkEditDataSource . Dette er demonstrert i en egen, mer komplisert levende eksempel .

Lokale vs fjerntliggende datakilder

Ved avgjørelsen av om du skal bruke en lokal eller en ekstern datakilde, må du nøye vurdere trade-offs. Den åpenbare trade-off er at en lokal datakilde er raskere når paginating, men den første siden belastningen vil ta lengre tid, og det krever mer minne på klienten.

Den Bulk Editor widgeten stiller ekstra trade-offs, imidlertid.

Først må YUI DataSource returnere uforanderlige data. Dette er automatisk for lokale datakilder, men kan være vanskelig å gjennomføre for eksterne datakilder. Du må låse radene i databasen tabellen for varigheten av bulk edit operasjonen hvis mer enn én bruker har lov til å modifisere dem.

For det andre påvirker valget mellom lokal og ekstern datakilde hvordan du har lov til å lagre dataene. Når du bruker en lokal datakilde, kan du gjøre best mulig innsats sparing, dvs. lagre alle gyldige postene til serveren, fjerne dem fra den lokale datakilden, og tillater brukeren å fokusere på de postene som har ugyldige verdier. Når du bruker en ekstern datakilde, den uforanderlighet kravet bare lar deg gjøre alt eller ingenting å spare, dvs. kan dataene bare lagres etter all data er gyldige.

Real-verden Use Case

Den opprinnelige motivasjonen for Bulk Editor widgeten var å tillate etterprosessering av et opplastet regneark. Vi presenterer en etterbehandling steg fjerner behovet for regnearket verdier å være perfekt. Feil kan bli flagget og fast i Bulk redaktør widgeten i stedet for å avvise hele opplastingen. I tillegg kan behandle på serveren gjør best gjetning tildeling av ekstra verdier som kreves for hver post, og brukeren kan kontrollere og løse disse ekstra verdier før sparing. Dette forenkler den første etableringen av regnearket.

I dette scenariet er en ekstern datakilde det beste valget. Den opplastede data lagres i en ripe plass, og er dermed garantert uforanderlig, siden ingen andre brukere kan se det. "Alt eller ingenting" sparing er hensiktsmessig: Når alle feilene har blitt fikset, lagreoperasjonen er atomic, akkurat som en standard opplastingen.

Om forfatteren: John Lindal ( @ jafl5272 på Twitter) er en av de ledende ingeniørene konstruere det grunnlaget som Yahoo! APT er bygget. Tidligere jobbet han på Yahoo! Publisher Network.

Finn samtaler: Bloglines | technorati

Del og utvide: bokmerke med del.icio.us | Digg it! | reddit!