Yahoo! User Interface Blog (YUIBlog)

YUI Theater - Jeff Craig: "demystificatie Loader: Advanced Configuration Module" (31 min.).

In dit gesprek uit YUIConf 2011, Meebo ingenieur en YUI medewerker Jeff Craig ( @ foxxtrot ) onthult alles wat je altijd al wilde weten over de YUI Loader, maar nooit durfde te vragen. Dit is een must-see voor iedereen die bezig performance-kritische werk met YUI 3.

Links

• Bekijk in HD op YouTube
• Dia's
• Volledige YUIConf 2011 afspeellijst op YouTube

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | digg it! | reddit!

YUI: Openingstijden don 15 december

YUI 3.5.0 PR1

YUI 3.5.0 PR1 is nu beschikbaar ! Dit is de eerste van de drie Preview-versies voor 3.5.0.

Voor deze Open Hours zullen we benadrukken wat er in PR1 en bespreken hoe u kunt meedoen om ervoor te zorgen 3.5.0 staat als een huis. We zullen dan ook vragen om een show-of-handen van de ontzagwekkende ontwikkelaars die al hebt begonnen met 3.5.0 PR1 (die is op de CDN ). Kom donderdag, laat je niet betrappen met je hand naar beneden:)

Ook de YUI Bibliotheek Staging website is bijgewerkt met de nieuwste handleidingen en API docs, en in reactie op de feedback van de laatste Open Hours , we zijn nu met behulp van onze GitHub wiki op te sporen voortdurende ontwikkeling discussies .

Opname

De opname is beschikbaar op de YUILibrary YouTube kanaal .

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | digg it! | reddit!

App Framework Veranderingen in YUI 3.5.0

Sinds de eerste release van de App Framework in YUI 3.4.0, hebben we versteld van hoe snel het is aangenomen. In projecten groot en klein , hebben beide lange tijd YUI gebruikers en degenen die volledig nieuw zijn in de bibliotheek is enthousiast gebruik van de App Framework MVC-componenten en het verstrekken van goede feedback en bug reports. Dank je wel!

In YUI 3.5.0, zal de App Framework ontvangen veel bug fixes en een aantal belangrijke verbeteringen. Eric Ferraiuolo bedekt veel van de komende veranderingen in zijn fantastische YUIConf praten , maar we willen hier benadrukken ze net zo goed, zodat u weet wat er gaat komen en wat je moet voorbereiden voor als u van plan App Framework-gebaseerde code upgrade van 3.4.x naar 3.5.0. Deze veranderingen zijn al in YUI 3.5.0 PR1 , die werd uitgebracht vandaag, dus is nu een goed moment om te beginnen met testen.

Y. Controller is nu Y. Router

"Controller" was een dom en verwarrende naam voor een onderdeel dat echt zelf meer bezighoudt met URL-gebaseerde routing, in het bijzonder de meer traditionele controller-achtige rol die Y. View speelt gegeven. We hebben besloten om de knoop door te hakken en de Y. Controller class te hernoemen naar Router Y. in 3.5.0. Y. Controller zal een alias voor achterwaartse compatibiliteit te behouden, maar dit alias zal uiteindelijk verwijderd worden, dus u moet uw code bij te werken om te verwijzen naar de nieuwe naam.

Nieuwe route handler handtekening

De methode handtekening voor route handler functies in Y. Router is iets veranderd zodat het meer lijkt op Express en om router API natuurlijker bij gebruik op de server (een functie zijn we momenteel aan voor 3.5.0).

Voorheen een route handler functie kreeg twee argumenten: req (een object request) en next (een functie). In 3.5.0 zal route handlers krijgt drie argumenten: req , res (een respons object), en dan next .

Omwille van de backwards compatibility, de nieuwe res argument is ook een functie die gedraagt ​​zich precies zoals next , zodat oude stijl route handlers die verwachten dat next de tweede arg blijft goed te werken in 3.5.0. Echter, deze compatibiliteit shim uiteindelijk zal worden verwijderd, dus niet te lang wachten om uw code bij te werken.

Sommige eigenschappen zijn nu attributen

We hebben geëxperimenteerd met een niet-volledig-YUI-achtige stijl van het gebruik van eigenschappen voor configureerbare opties in de App Framework componenten in 3.4.0, maar dit bleek te zijn een beetje verwarrend en meer dan een beetje te beperken, omdat eigenschappen niet ten goede van verandering gebeurtenissen, setters, en validators zoals attributen te doen. Dus in 3.5.0, we zetten veel van deze eigenschappen aan attributen.

Helaas, deze verandering is niet backwards compatible, zodat de bestaande code die Y. Controller (nu Y. Router) of Y. View moet mogelijk worden bijgewerkt gebruikt. In het bijzonder, Y. Router 's html5 , root , en de routes eigenschappen zijn nu attributen, en Y. Bekijk 's container , model , en modelList eigenschappen zijn nu attributen ook.

In aanvulling op deze, Y. Bekijk 's container attribuut behandelt nu tekenreekswaarden als CSS selectors gebruikt om nodes op de pagina te vinden. In 3.4.x, is uitgegaan van een string waarde vertegenwoordigde rauwe HTML die moeten worden omgezet in een knoop. Om het oude gedrag, verander dan gewoon je bestaande HTML-reeks waarden van '<div>foo</div>' naar Y.Node.create('<div>foo</div>') .

Documentatie voor 3.5.0 PR1

Work-in-progress documentatie voor deze veranderingen en andere veranderingen in YUI 3.5.0 PR1 kunt u vinden op onze website staging . Hier zijn enkele links naar relevante enscenering documenten die informatie over de App Framework deprecations in 3.5.0 en details over hoe u uw code te upgraden zijn onder andere:

• Router
• Zicht

Merk op dat de inhoud op stage.yuilibrary.com de lopende werkzaamheden in uitvoering weerspiegelt en kunnen onvolledig zijn of zelfs zo nu en dan verbroken omdat we nieuwe dingen te testen. Je zult altijd de documenten voor de laatste stabiele versie op onze productielocatie, yuilibrary.com .

Wat is nieuw?

In deze blogpost heb ik een samenvatting van de belangrijkste deprecations komt naar de App Framework 3.5.0, maar er zijn ook tal van verbeteringen en voorzien van onder-de-motorkap bug fixes. Voor een volledige lijst van veranderingen in de App Framework 3.5.0 PR1, de historiek bestand .

Ook al snel op zoek naar een blog post van Eric over Y. App, een geweldig nieuw high-level component van de App Framework dat wraps up URL-gebaseerde routing en bekijk het beheer in een enkele makkelijk te gebruiken API die krijgt u van nul tot een werkende applicatie in een mum van tijd.

Wij hopen dat u graag de preview release, en we horen graag van je! U kunt ons feedback in de forums , in een bug rapport , op Twitter , op de # yui IRC kanaal op Freenode, of gewoon hier klokkenspel met een reactie.

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | digg it! | reddit!

YUI 3.5.0 PR1 Is nu beschikbaar

YUI 3.5.0 Voorbeeld Release 1 is ingezet voor het testen en feedback van de gemeenschap van ontwikkelaars. U kunt deze vinden op de Yahoo! CDN op yui.yahooapis.com/3.5.0pr1/build/yui/yui-min.js , of downloaden van een zip-bestand als u van plan te hosten het zelf.

De rollup van de wijzigingen die in PR1 is beschikbaar op onze GitHub Wiki. Daarnaast kunt u herziening van de lijst van de tickets die werden opgelost in deze release .

Work-in-progress gebruikershandleidingen en de API docs voor 3.5.0 is te vinden op onze staging site, maar pas op dat deze documenten kan onvolledig of zelfs gebroken, omdat dit is waar we testen nieuwe dingen. Officiële documenten voor de laatste stabiele versie is altijd te vinden op onze productielocatie, yuilibrary.com .

Meer veranderingen zullen worden ingevoerd in de komende preview releases van YUI 3.5.0, sommige van hen zijn op dit moment in de eigen vestigingen ontwikkelaars en zijn beschikbaar voor een eerste toetsing via de volgende pull aanvragen:

• Nieuwe DataTable Architectuur en implementatie
• Nieuwe module Button

Naar een bestand bugs tegen dit persbericht kunt u terecht op onze bug tracking systeem . Als u wilt input op deze en toekomstige modules bieden, worden de lopende discussies over verschillende onderwerpen met betrekking tot de 3.5.0 versie er op onze GitHub wiki.

Als alles volgens plan verloopt, hopen we YUI 3.5.0 PR2 release op 30 januari 2012. Fijne feestdagen!

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | digg it! | reddit!

YUI Theater - Allen Rabinovich: "YUI Calendar - een case study van Building Modules met Style" (47 min.).

In dit gesprek uit YUIConf 2011, YUI ingenieur Allen Rabinovich ( @ allenr ) aandelen van het proces die hij gebruikte om architect en bouw van de nieuwe kalender widget in YUI 3, en legt uit hoe je een soortgelijk proces gebruiken om je eigen widgets te bouwen. Hij toont ook uit de nieuwe component en onthult een slimme truc gebruikt om de prestaties versnellen van de weergave van meerdere agenda's.

Links

• Bekijk in HD op YouTube
• Volledige YUIConf 2011 afspeellijst op YouTube

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | digg it! | reddit!

YUI Theater - Pat Cavit: "automatiseren Website Optimalisaties" (32 min.).

Pat Cavit ( @ tivac ), een frontend engineer bij ArenaNet en een actieve bijdrage YUI en lid van de gemeenschap, bij ons op YUIConf 2011 tot en met deze toespraak te geven op het automatiseren van bouw-time website optimalisaties, zoals bestanden samenvoegen, minification, hernoemen, en nog veel meer gebruik van de Ant build tool.

Links

• Bekijk in HD op YouTube
• Volledige YUIConf 2011 afspeellijst op YouTube

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | digg it! | reddit!

In de YUI 3 Gallery: Bulk Editor Widget

De QuickEdit plugin voor YUI 3 DataTable maakt het gemakkelijk om een hele pagina van records als een atomaire operatie. Echter, soms moet je zelfs nog meer te doen. Bijvoorbeeld, kan je tegelijkertijd bewerken meer records dan kunt u comfortabel past op een enkele pagina. Of je moet misschien toe te voegen, dupliceren en verwijderen van records als onderdeel van de atomaire operatie te ondersteunen. Of u zou willen visueel te groeperen velden door ze in een tabel cel. De Bulk Editor widget ondersteunt al deze mogelijkheden.

( Klik op de afbeelding om te spelen met dit voorbeeld .)

Overzicht

De Bulk-editor widget bestaat uit drie componenten:

Data source

Deze wraps DataSource een YUI en beheert de veranderingen: inserties, verhuizingen, en veranderde waarden.

Base widget

Dit biedt de basisstructuur voor het bewerken door het beheer van records en velden in elke record. Afgeleide klassen zijn verantwoordelijk voor de rendering elke record in een aparte rij, dat kan een div, een tbody, of een andere container worden.

HTML table implementation

Hierdoor wordt de basis widget om elke record renderen in een tbody in een HTML-tabel. De kolom configuratie bepaalt welk veld wordt weergegeven in elke kolom van de tabel. Een aangepaste cel formatter kan gebruikt worden om meerdere velden maken in een tabel cel.

Configuratie

In het voorbeeld dat de bovenstaande screenshot gegenereerd, is de configuratie is zo eenvoudig mogelijk:

fields definieert het bewerkbare waarden elke record. Het standaard type is ingevoerd. De andere geldige types zijn te selecteren en textarea. (Selecteer vereist een lijst met waarden.) Basic validatie wordt verzorgd door Form Manager gallery module. Dit omvat verplichte velden, lengte beperkingen en numerieke bereiken . Meer complexe validatie kan worden uitgevoerd door het specificeren regex of je eigen functie ( fn ). Hier is een uittreksel uit de live-voorbeeld:

 var velden =
 {
	 titel:
	 {
		 type: 'textarea'
	 },
	 jaar:
	 {
		 validatie:
		 {
			 css: 'yiv-integer: [1500,2100]'
		 }
	 },
	 kleur:
	 {
		 type: 'selecteer',
		 waarden:
		 [
			 {Value: 'rood', tekst: 'Red'},
			 {Value: 'groen', text: 'Green'},
			 {Value: 'blauw', text: 'Blue'}
		 ]
	 }
 };

Y.BulkEditDataSource vraagt ​​om een voorbeeld van Y.DataSource en de volgende parameters:

uniqueIdKey

De naam van een sleutel, die een unieke identificatie voor elke record.

generateRequest

Een functie om request parameters te genereren voor Y.DataSource . (Dit is leeg in het voorbeeld, want Y.DataSource.Local altijd geeft alle gegevens.)

extractTotalRecords

Een functie om het totale aantal records uittreksel uit de Y.DataSource reactie.

Sinds het voorbeeld gebruikt Y.DataSource.Local , totalRecordsReturnExpr is ook vereist. Dit OGNL expressie moet worden waar in de reactie op te slaan van het totale aantal records. (Merk op dat extractTotalRecords deze waarde leest.)

 var ds = new Y. BulkEditDataSource (
 {
	 ds: raw_ds,
	 uniqueIdKey: 'id',
	 generateRequest: function () {},
	 totalRecordsReturnExpr: '. meta.totalRecords',
	 extractTotalRecords: functie (respons)
	 {
		 return response.meta.totalRecords;
	 }
 });

Y.HTMLTableBulkEditor vereist dat de gegevensbron, het veld configuratie, en de kolom configuratie. In de kolom configuratie, de sleutel is de veldnaam, tenzij u een aangepaste formatter. Het label wordt gebruikt als de kolom titel. Hier is een uittreksel uit de live-voorbeeld:

 var columns =
 [
	 {
		 key: 'aan',
		 label: '<input type="checkbox" id="select-all" />',
		 formatter: functie (o)
		 {
			 var markup = '<input type="checkbox" class="record-select" id="{id}" />';
			 o.cell.set ('innerHTML', Y.Lang.sub (markup,
			 {
				 id: this.getRecordId (o.record)
			 }));
		 }
	 },
	 {Key: 'title', label: 'Titel'},
	 {Key: 'jaar', label: 'Jaar'},
	 {Key: 'kleur', label: 'Kleur'}
 ];

(Merk op dat de live-voorbeeld een kleine uitbreiding van definieert Y.HTMLTableBulkEditor aan de checkbox kolom af te handelen.)

U kunt ook slagen voor een voorbeeld van Y.Paginator aan Y.BulkEditDataSource . Dit is aangetoond in een aparte, meer gecompliceerde leven bijvoorbeeld .

Lokale vs Remote Data Sources

Bij de beslissing of u een lokale of een externe datasource gebruiken, moet u zorgvuldig overwegen van de trade-offs. De voor de hand liggende trade-off is dat een DataSource lokaal is sneller als paginating, maar de eerste pagina te laden zal langer duren, en het vereist meer geheugen op de client.

De Bulk-editor widget legt extra trade-offs, echter.

Ten eerste, de YUI DataSource moet terugkeren onveranderlijke gegevens. Dit is automatisch voor lokale gegevensbronnen, maar kan lastig zijn te implementeren voor remote data bronnen. U moet de rijen sluiten in uw database tabel voor de duur van de bulk bewerken operatie als meer dan een gebruiker is toegestaan ​​om ze te wijzigen.

Ten tweede, de keuze tussen lokale en externe gegevensbron van invloed op hoe u toegestaan ​​om de gegevens op te slaan. Wanneer u een lokale gegevensbron gebruiken, kunt u best effort sparen te doen, dat wil zeggen, op te slaan alle geldige records naar de server, verwijder ze uit de plaatselijke DataSource, en laat de gebruiker zich te richten op de records die ongeldige waarden. Als u een remote data bron te gebruiken, alleen de onveranderlijkheid eis stelt u in staat te doen alles of niets sparen, dat wil zeggen, kunnen de gegevens alleen worden opgeslagen nadat alle gegevens geldig is.

Real-world Use Case

De oorspronkelijke motivatie voor de Bulk Editor widget is aan post-processing van een geüpload spreadsheet mogelijk te maken. Introductie van een post-processing stap verwijdert de noodzaak voor de spreadsheet waarden perfect zijn. Fouten kunnen gemarkeerd en gefixeerd zijn in de Bulk-editor widget in plaats van afwijzing van de gehele uploaden. Daarnaast kan de verwerking van op de server doen best guess toewijzen van extra waarden die nodig zijn voor elke record, en de gebruiker kan controleren en deze extra waarden herstellen voordat u deze opslaat. Dit vergemakkelijkt het initiële creatie van de spreadsheet.

In dit scenario, een remote data bron is de beste keuze. De geüploade gegevens worden opgeslagen in een scratch ruimte, en is dus gegarandeerd onveranderlijk, want geen enkele andere gebruiker kan zien. "Alles of niets" besparing van toepassing: Als alle fouten zijn verholpen, het opslaan is atomair, net als een standaard uploaden operatie.

Over de auteur: John Lindal ( @ jafl5272 op Twitter) is een van de lead engineers de bouw van de basis waarop Yahoo! APT is gebouwd. Daarvoor werkte hij op de Yahoo! Publisher Network.

Zoek gesprekken: Bloglines | technorati

Delen en uit te breiden: Bookmark met del.icio.us | digg it! | reddit!