Yahoo! User Interface Blog (YUIBlog)

YUI Theater - Jeff Craig: "Duidelijkheid over Loader: Advanced Module configuratie" (31 min.).

16 december 2011 om 10:10 uur door Ryan Grove | In Ontwikkeling , YUI Theater | No Comments

In dit gesprek uit YUIConf 2011, Meebo ingenieur en YUI bijdrage 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 te doen prestatie-kritische werk met YUI 3.

Links

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

Zoek gesprekken: Bloglines | technorati

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

YUI: Open uur don 15 december

13 december 2011 om 11:59 uur door Eric Ferraiuolo | In Ontwikkeling , Openingsuren | No Comments

YUI 3.5.0 PR1

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

Voor deze Open uur zullen we de nadruk wat er in PR1 en het bespreken van hoe je kunt meedoen om ervoor te zorgen 3.5.0 staat als een huis. We zullen ook vragen om een show-of-handen van de ontzagwekkende ontwikkelaars die al zijn begonnen met 3.5.0 PR1 (dat 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 uur , we zijn nu met behulp van onze GitHub wiki op te sporen voortdurende ontwikkeling discussies .

Opname

De opname is te vinden 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

12 december 2011 om 15:40 door Ryan Grove | In Ontwikkeling | 1 Reactie

Sinds de eerste release van de App kader van YUI 3.4.0, hebben we versteld van hoe snel het wordt aangenomen. In projecten groot en klein , hebben beide lange tijd YUI gebruikers en degenen die volledig nieuw zijn in de bibliotheek enthousiast gebruik gemaakt van MVC componenten de App Framework 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 vallen veel van de komende veranderingen in zijn fantastische YUIConf praten , maar we willen hier benadrukken ze net zo goed zodat je weet wat er komen gaat en wat je moet voorbereiden als u van plan naar App Framework-gebaseerde code upgraden van 3.4.x naar 3.5.0. Deze veranderingen zijn al in YUI 3.5.0 PR1 , die werd uitgebracht vandaag, dus is het 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 houdt zich meer met URL-gebaseerde routing, vooral gezien de meer traditioneel-controller-achtige rol die Y.View speelt. We hebben besloten om de knoop door te hakken en de Y.Controller klasse naam te geven Y.Router in 3.5.0. Y.Controller zal een alias voor achterwaartse compatibiliteit te behouden, maar dit alias zal uiteindelijk worden verwijderd, dus moet u 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 lichtjes veranderd zodat het meer lijkt op Express en om ervoor te router API natuurlijker bij gebruik op de server (een functie die we momenteel aan voor 3.5.0).

Voorheen een route handlerfunctie ontvangen twee argumenten: req (een verzoek object) en de next (een functie). In 3.5.0 zal route handlers krijgt drie argumenten: req , res (een reactie object), en dan next .

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

Sommige eigenschappen zijn nu attributen

We experimenteerden met een niet-geheel-YUI-achtige stijl van het gebruik van eigenschappen voor configureerbare opties in de App kader componenten in 3.4.0, maar dat bleek een beetje verwarrend en meer dan een beetje te beperken, omdat eigenschappen niet ten goede komen 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 niet is neerwaarts compatibel, kan zo de bestaande code die Y.Controller (nu Y.Router) of Y.View gebruikt moeten worden bijgewerkt. In het bijzonder Y.Router 's html5 , root , en de routes eigenschappen zijn nu attributen en Y.View 's container , model , en modelList eigenschappen zijn nu attributen ook.

Naast deze, Y.View 's container attribuut behandelt nu tekenreekswaarden als CSS selectors gebruikt om knooppunten op de pagina te vinden. In 3.4.x, is uitgegaan van een string waarde vertegenwoordigd ruwe HTML die moeten worden omgezet in een knooppunt. Om het oude gedrag te krijgen, alleen je bestaande HTML tekenreekswaarden van '<div>foo</div>' om 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 is te vinden op onze website enscenering . Hier zijn enkele links naar relevante staging-documenten die informatie over App Framework afschrijvingen in 3.5.0 en details over hoe u uw code te upgraden zijn:

• Router
• Zien

Merk op dat de inhoud op stage.yuilibrary.com de lopende werkzaamheden in uitvoering geeft en kan onvolledig of zelfs af en toe kapot als we testen van nieuwe spullen. Je zult altijd de documenten over de laatste stabiele versie op onze productielocatie, yuilibrary.com .

Wat is er nieuw?

In deze blogpost heb ik een samenvatting van de belangrijke afschrijvingen komt naar de App Framework 3.5.0, maar er zijn ook tal van verbeterde functies en onder de motorkap bug fixes. Voor een volledige lijst van de App Framework veranderingen in 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 wraps up URL-gebaseerde routing en visie van de directie in een eenvoudig te gebruiken API die krijgt u van nul tot een werkende applicatie in een mum van tijd.

We hopen dat je van de preview release, en we horen graag van u! U kunt ons feedback in de forums , in een bug rapport , op Twitter , op de # yui IRC kanaal op Freenode, of gewoon hier bel 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

12 december 2011 om 15:36 door Allen Rabinovich | In ontwikkeling | No Comments

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

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

Work-in-progress handleidingen en API docs voor 3.5.0 is te vinden op onze staging site, maar pas op dat deze documenten onvolledig of zelfs gebroken, omdat dit is waar we het testen van nieuwe spullen. 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 van ontwikkelaars en zijn beschikbaar voor de eerste beoordeling via de volgende pull aanvragen:

• New DataTable architectuur en implementatie
• Nieuwe Button module

Om bugs tegen deze release te dienen, bezoek dan onze bug tracking systeem . Als u wilt input te geven over deze en toekomstige modules, 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 los 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 casestudy van Bouwen Modules met Stijl" (47 min.).

08 december 2011 om 13:02 door Ryan Grove | In Ontwikkeling , YUI Theater | No Comments

In dit gesprek uit YUIConf 2011, YUI ingenieur Allen Rabinovich ( @ allenr ) deelt het proces dat hij gebruikt voor de architect en bouwen 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 de prestaties gebruikt om het versnellen van de weergave van meerdere agenda's.

Links

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

Zoek gesprekken: Bloglines | technorati

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

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

06 december 2011 om 14:58 door Ryan Grove | In Ontwikkeling , YUI Theater | 2 Commentaren

Pat Cavit ( @ tivac ), een frontend engineer bij ArenaNet en een actieve bijdrage YUI en lid van de gemeenschap, bij ons op YUIConf 2011 tot deze lezing te geven over het automatiseren van build-time web site optimalisatie, zoals bestanden samenvoegen, minification, hernoemen, en nog veel meer met behulp van de Ant te bouwen instrument.

Links

• Bekijk in HD op YouTube
• Volledige YUIConf 2011 Playlist 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

05 december 2011 om 13:01 door John Lindal | In Ontwikkeling , YUI 3 Galerij | No Comments

De QuickEdit plugin voor YUI 3 DataTable maakt het gemakkelijk te bewerken een hele pagina of Records als een atomaire operatie. Maar soms moet je zelfs nog meer te doen. Bijvoorbeeld, moet u mogelijk gelijktijdig te bewerken meer records dan je comfortabel past op een pagina. Of je moet misschien toe te voegen, dupliceren en verwijderen van records als onderdeel van de atomaire operatie te ondersteunen. Of je zou willen visueel groep velden door ze in een tabel cel. De Bulk-editor widget ondersteunt al deze mogelijkheden.

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

Overzicht

De Bulk-editor widget bestaat uit drie componenten:

Data source

Deze wikkelt een YUI DataSource en beheert de wijzigingen: 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 het renderen van elke record in een aparte rij, dat kan een div, een tbody, of een andere container te zijn.

HTML table implementation

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

Configuratie

In het voorbeeld van de bovengenoemde afbeelding gegenereerd is de configuratie is zo eenvoudig mogelijk:

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

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

Y.BulkEditDataSource vereist een instantie van Y.DataSource en de volgende parameters:

uniqueIdKey

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

generateRequest

Een functie op het verzoek van de parameters te genereren voor Y.DataSource . (Dit is leeg voorbeeld omdat Y.DataSource.Local altijd geeft alle gegevens.)

extractTotalRecords

Een functie van het totale aantal records onttrekken de Y.DataSource reactie.

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

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

Y.HTMLTableBulkEditor vereist dat de bron, het veld configuratie en de kolom configuratie. In de kolom configuratie, de sleutel is de veldnaam, tenzij u een eigen formatter. Het wordt gebruikt als kolomtitel. Hier is een fragment uit de live-voorbeeld:

 var columns =
 [
	 {
		 toets: 'aan',
		 label: '<input type="checkbox" id="select-all" />',
		 formatter: function (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 om de checkbox kolom af te handelen.)

U kunt ook langs een instantie van Y.Paginator naar Y.BulkEditDataSource . Dit blijkt uit een afzonderlijke, ingewikkelder levende voorbeeld .

Lokaal versus Remote Data Sources

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

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

Ten eerste moet de YUI DataSource terug onveranderlijke gegevens. Dit is automatisch voor lokale gegevensbronnen, maar kan lastig zijn te implementeren voor remote data bronnen. U moet de rijen in de database tabel te vergrendelen voor de duur van de bulk bewerking ander indien 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 ​​de gegevens op te slaan. Wanneer u een lokale gegevensbron gebruiken, kunt u best effort sparen, dat wil zeggen te doen, alle geldige documenten naar de server op te slaan, verwijder ze uit de lokale datasource, en laat de gebruiker zich te richten op de records die ongeldige waarden hebben. Wanneer u een remote data bron te gebruiken, alleen de onveranderlijkheid eis stelt u in staat om alles te doen 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 was het 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 vaste zijn in de Bulk-editor widget in plaats van afwijzing van de gehele upload. Daarnaast kan verwerken op de server te doen best-guess toewijzing van extra waarden die nodig zijn voor elke record, en de gebruiker kan controleren en deze extra waarden vast te stellen voordat u opslaat. Dit vergemakkelijkt het initiële creatie van de spreadsheet.

In dit scenario een externe gegevensbron is de beste keuze. De geüploade gegevens worden opgeslagen in een kras ruimte, en is dus gegarandeerd onveranderlijk, want geen enkele andere gebruiker kan zien. "Alles of niets" besparing is van toepassing: Als alle fouten zijn hersteld, het opslaan atomaire is, net als een standaard upload operatie.

Over de auteur: John Lindal ( @ jafl5272 op Twitter) is een van de leidende ingenieurs 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!