Blog Interface utilisateur Yahoo! (YUIBlog)

YUI Theater - Jeff Craig: «Démystifier Loader: Configuration Module d'approfondissement" (31 min.)

16 décembre 2011 à 10h10 par Ryan Grove | En développement , de YUI Theater | Les Pas de commentaires

Dans cet exposé, à partir YUIConf 2011, Meebo ingénieur et YUI contributeur Jeff Craig ( @ foxxtrot ) révèle tout ce que vous avez toujours voulu savoir sur le chargeur YUI, mais jamais oser le demander. Il s'agit d'un must pour tous ceux qui font la performance critique des travaux avec YUI 3.

Liens

• Voir en HD sur YouTube
• Diapositives
• Plein YUIConf 2011 la playlist sur ​​YouTube

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

YUI: Heures d'ouverture jeu. déc 15e

13 décembre 2011 à 11:59 par Eric Ferraiuolo | En développement , les horaires d'ouverture | Les Pas de commentaires

YUI 3.5.0 PR1

YUI 3.5.0 PR1 est maintenant disponible ! Il s'agit de la première des trois Communiqués Aperçu pour 3.5.0.

Pour cette Heures d'ouverture que nous allons mettre en évidence ce qu'il ya dans PR1 et de discuter la façon dont vous pouvez vous impliquer afin de s'assurer 3.5.0 est solide comme un roc. Nous allons également demander un show-de-mains des développeurs impressionnants qui ont déjà commencé à utiliser 3.5.0 PR1 (qui est sur ​​le CDN ). Venez jeudi, ne pas se faire attraper avec votre main vers le bas :)

En outre, le site de YUI Staging Bibliothèque a été mis à jour avec les nouveaux guides d'utilisation et documentation de l'API, et en réponse à la rétroaction de ces dernières heures ouvertes , nous sommes maintenant en utilisant notre wiki GitHub pour suivre les discussions en cours de développement .

Enregistrement

L'enregistrement est disponible sur le canal YouTube YUILibrary .

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

Changements cadre de cette appli dans YUI 3.5.0

12 décembre 2011 à 3:40 pm par Ryan Grove | En développement | 1 Commentaire

Depuis la publication initiale de la politique de partenariat actif dans YUI 3.4.0, nous avons été étonnés par la rapidité avec laquelle il a été adopté. Dans les projets de grandes et petites , les deux utilisateurs de longue date YUI et ceux qui sont tout à fait nouveau à la bibliothèque ont été avec enthousiasme en utilisant des composants MVC du Cadre App et fournir une rétroaction et des rapports de bogues grande. Je vous remercie!

Dans YUI 3.5.0, le Cadre App recevrez beaucoup de corrections de bugs et quelques améliorations importantes. Eric Ferraiuolo couvert bon nombre des changements à venir dans son discours YUIConf fantastique , mais nous voulons les mettre en évidence ici, si bien que vous saurez ce qui va arriver et ce que vous devriez préparer si vous prévoyez de mettre à niveau App-cadre basé sur le code de 3.4.x à 3.5.0. Ces changements sont déjà en YUI 3.5.0 PR1 , qui a été publié aujourd'hui, alors c'est maintenant le moment idéal pour commencer à les tester.

Y.Controller est maintenant Y.Router

"Contrôleur" était un nom ridicule et déroutant pour un composant qui préoccupe vraiment lui-même plus avec routage d'URL basée, en particulier compte tenu du rôle plus traditionnellement comme contrôleur que joue Y.View. Nous avons décidé de mordre la balle et renommer la classe Y.Controller à Y.Router en 3.5.0. Y.Controller deviendra un alias afin de préserver la compatibilité ascendante, mais cet alias sera éventuellement supprimée, de sorte que vous devez mettre à jour votre code pour désigner le nouveau nom.

Nouvelle signature gestionnaire d'itinéraire

La signature de la méthode pour les fonctions de gestionnaire d'itinéraire dans Y.Router a été légèrement modifié pour le rendre plus semblable à exprimer et à faire API routeur plus naturel lorsqu'il est utilisé sur le serveur (une fonctionnalité que nous travaillons actuellement sur ​​des 3.5.0).

Auparavant, une fonction gestionnaire d'itinéraire a reçu deux arguments: req (un objet de requête) et next (une fonction). En 3.5.0, les gestionnaires de route recevra trois arguments: req , res (un objet de réponse), puis next .

Pour des raisons de compatibilité ascendante, la nouvelle res argument est également une fonction qui se comporte exactement comme next , de sorte que les gestionnaires de route à l'ancienne qui attendent next que l'arg seconde, continuera à fonctionner correctement dans 3.5.0. Toutefois, cette cale de compatibilité sera éventuellement supprimée, il ne faut pas attendre trop longtemps pour mettre à jour votre code.

Certaines propriétés sont maintenant des attributs

Nous avons expérimenté avec un pas-tout-YUI-comme le style de l'utilisation des propriétés des options configurables dans les composants de cette appli-cadres en 3.4.0, mais cela s'est avéré être un peu déroutant et plus de limiter un peu, puisque les propriétés ne bénéficient pas à partir des événements de modification, setters, et les validateurs comme attributs faire. Donc, en 3.5.0, nous en convertissant nombre de ces propriétés à des attributs.

Malheureusement, ce changement n'est pas rétrocompatible, le code existant qui utilise donc Y.Controller (maintenant Y.Router) ou Y.View peut-être besoin d'être mis à jour. Plus précisément, Y.Router l ' html5 , root , et routes sont maintenant des propriétés des attributs, et Y.View l ' container , model , et modelList propriétés sont maintenant des attributs ainsi.

En plus de cela, Y.View 's container l'attribut traite maintenant les valeurs de chaîne en tant que sélecteurs CSS utilisée pour trouver des noeuds sur la page. Dans 3.4.x, il a assumé une valeur de chaîne représenté HTML brut qui doit être converti en un noeud. Pour obtenir l'ancien comportement, il suffit de changer vos valeurs de chaîne existants HTML à partir de '<div>foo</div>' à Y.Node.create('<div>foo</div>') .

Documentation pour 3.5.0 PR1

Travail en cours de documentation pour ces changements et d'autres changements dans YUI 3.5.0 PR1 peut être trouvée sur notre site la mise en scène . Voici quelques liens vers des docs mise en scène pertinente qui comprennent des informations sur deprecations cadre de cette appli en 3.5.0 et les détails sur comment mettre à jour votre code:

• Routeur
• Voir

Notez que le contenu à stage.yuilibrary.com reflète les travaux en cours en cours et peuvent être incomplètes ou même parfois brisés comme des slideshows test, nous avons de nouveau. Vous trouverez toujours la documentation pour la dernière version stable sur notre site de production, yuilibrary.com .

Qu'y at-il de neuf?

Dans ce blog je l'ai résumé les deprecations importants à venir pour le Cadre App 3.5.0, mais il ya aussi beaucoup d'améliorations de fonctionnalités et moins-le-capot corrections de bugs. Pour une liste complète des changements cadre de cette appli en 3.5.0 PR1, consulter le dossier HISTOIRE .

En outre, la recherche d'un billet de blog de Eric bientôt sur Y.App, un impressionnant nouvelle composante de haut niveau du Cadre App qui enveloppe routage d'URL basée sur la gestion et de vue dans un unique et facile à utiliser l'API que vous obtenez de zéro à une demande de travail en un temps.

Nous espérons que vous aimez la libération aperçu, et nous aimerions entendre parler de vous! Vous pouvez nous envoyer vos commentaires en les forums , dans un rapport de bogue , sur Twitter , sur le canal # yui IRC sur Freenode, ou tout simplement le carillon ici avec un commentaire.

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

YUI 3.5.0 PR1 est maintenant disponible

12 décembre 2011 à 15h36 par Allen Rabinovich | En développement | Les Pas de commentaires

Communiqué YUI 3.5.0 Aperçu 1 a été déployé pour les tests et les commentaires de la communauté des développeurs. Vous pouvez le trouver sur le CDN à Yahoo! yui.yahooapis.com/3.5.0pr1/build/yui/yui-min.js , ou télécharger un fichier zip si vous envisagez d'héberger vous-même.

Le correctif cumulatif des changements introduits dans PR1 est disponible sur notre Wiki GitHub. En outre, vous pouvez consulter la liste des billets qui ont été résolus dans cette version .

Les travaux en-cours des guides utilisateurs et documentation de l'API pour 3.5.0 peuvent être trouvés sur notre site la mise en scène, mais méfiez-vous que ces docs peuvent être incomplètes ou même brisé, car c'est là que nous testons des slideshows nouveaux. Docs officiel pour la dernière version stable peut toujours être trouvée sur notre site de production, yuilibrary.com .

D'autres changements seront introduits dans les versions à venir de prévisualisation YUI 3.5.0; certains d'entre eux sont actuellement dans les branches propres développeurs "et sont disponibles pour examen initial par l'intermédiaire des demandes d'attraction suivants:

• New DataTable Architecture et mise en œuvre
• Module de touches de New

Pour soumettre des bogues contre le présent communiqué, s'il vous plaît visitez notre système de suivi des bogues . Si vous souhaitez formuler des commentaires sur ces modules et l'avenir, les discussions en cours sur divers sujets ayant trait à la libération 3.5.0 se passe sur notre wiki GitHub.

Si tout se passe selon le plan, nous espérons sortir YUI 3.5.0 PR2 le 30 Janvier, 2012. Joyeuses fêtes!

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

YUI Theater - Allen Rabinovich: "YUI Calendrier - Une étude de cas de la construction de modules avec style» (47 min.)

8 décembre 2011 à 13h02 par Ryan Grove | En développement , de YUI Theater | Les Pas de commentaires

Dans cet exposé, à partir YUIConf 2011, YUI ingénieur Allen Rabinovich ( @ allenr ) partage le processus qu'il a utilisé à l'architecte et la construction du nouveau widget Agenda de YUI 3, et explique comment vous pouvez utiliser un processus similaire pour construire vos propres widgets. Il montre également au large de la nouvelle composante et révèle un truc intelligent des performances utilisée pour accélérer le rendu de plusieurs calendriers.

Liens

• Voir en HD sur YouTube
• Plein YUIConf 2011 la playlist sur ​​YouTube

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

YUI Theater - Pat Cavit: "Optimisations Site Web Automatisation" (32 min.)

6 décembre 2011 à 14h58 par Ryan Grove | En développement , de YUI Theater | Les 2 Commentaires

Pat Cavit ( @ tivac ), un ingénieur frontend à ArenaNet et un contributeur actif YUI et membre de la communauté, nous a rejoints à YUIConf 2011 à donner cette conférence sur l'automatisation des optimisations du site de construction le temps, telles que la concaténation des fichiers, minification, renommer, et plus l'aide de la Ant outil.

Liens

• Voir en HD sur YouTube
• Plein YUIConf 2011 la playlist sur ​​YouTube

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

Dans la Galerie YUI 3: Widget Editor en vrac

5 décembre 2011 à 13h01 par John Lindal | En développement , de YUI 3 Galerie | Les Pas de commentaires

Le plug-in d'édition rapide pour YUI 3 DataTable , il est facile de modifier une page entière de dossiers que d'une opération atomique. Cependant, parfois vous avez besoin de faire encore plus. Par exemple, vous pourriez avoir à modifier simultanément plus de disques que vous pouvez confortablement tenir sur une seule page. Ou vous pourriez avoir besoin pour appuyer l'ajout, la duplication et la suppression d'enregistrements dans le cadre de l'opération atomique. Ou vous pourriez souhaiter regrouper visuellement les champs en les plaçant dans une cellule de tableau unique. Le rédacteur en vrac widget supporte toutes ces possibilités.

( Cliquez sur la capture d'écran pour jouer avec cet exemple .)

Vue d'ensemble

Le widget éditeur en vrac est constitué de trois composants:

Data source

Cette enveloppe une YUI DataSource et gère les changements: les insertions, les suppressions et les valeurs ont changé.

Base widget

Ceci fournit la structure de base pour l'édition par la gestion des dossiers et des champs dans chaque enregistrement. Les classes dérivées sont responsables de rendre chaque enregistrement dans une ligne distincte, qui pourrait être un div, un tbody, ou tout autre récipient.

HTML table implementation

Cela étend le widget de base pour rendre chaque enregistrement dans un tbody dans un tableau HTML. La configuration de colonne qui détermine champ est affichée dans chaque colonne de la table. Un formateur de cellule personnalisé peut être utilisé pour rendre plusieurs champs dans une cellule de tableau unique.

Configuration

Dans l'exemple qui a généré la capture d'écran ci-dessus, la configuration a été maintenu aussi simple que possible:

fields définit les valeurs modifiables dans chaque enregistrement. Le type par défaut est entrée. Les autres types valides sont SELECT et textarea. (Sélectionnez exige une liste de valeurs.) De validation de base est fournie par le formulaire Gestionnaire de module de galerie. Ce couvre champs obligatoires, les restrictions de longueur, et les plages numériques . Validation plus complexe peut être réalisée en spécifiant regex ou votre propre fonction ( fn ). Voici un extrait de l'exemple en direct:

 var = champs
 {
	 Titre:
	 {
		 type: 'textarea'
	 },
	 année:
	 {
		 de validation:
		 {
			 css: «yiv-entier: [1500,2100]»
		 }
	 },
	 couleur:
	 {
		 Type: 'select',
		 valeurs:
		 [
			 {Valeur: «rouge», le texte: 'Red'},
			 {Valeur: «verte», le texte: «verte»},
			 {Valeur: 'bleu', texte: 'Blue'}
		 ]
	 }
 };

Y.BulkEditDataSource requiert une instance de Y.DataSource et les paramètres suivants:

uniqueIdKey

Le nom d'une clé qui identifie de manière unique chaque enregistrement.

generateRequest

Une fonction pour générer des paramètres de requête pour Y.DataSource . (Ceci est vide dans l'exemple, parce Y.DataSource.Local retourne toujours toutes les données.)

extractTotalRecords

Une fonction d'extraire le nombre total d'enregistrements dans le Y.DataSource réponse.

Comme l'exemple utilise Y.DataSource.Local , totalRecordsReturnExpr est également nécessaire. Cette expression OGNL spécifie où dans la réponse à stocker le nombre total d'enregistrements. (Notez que extractTotalRecords lit cette valeur.)

 var ds = new Y.BulkEditDataSource (
 {
	 ds: raw_ds, les
	 uniqueIdKey: 'id',
	 GenerateRequest: function () {},
	 totalRecordsReturnExpr: «. meta.totalRecords»,
	 extractTotalRecords: fonction (réponse)
	 {
		 retourner response.meta.totalRecords;
	 }
 });

Y.HTMLTableBulkEditor nécessite la source de données, la configuration de champ, et la configuration de colonnes. Dans la configuration de colonnes, la clé est le nom du champ, sauf si vous spécifiez un formateur personnalisé. Le label est utilisé comme titre de la colonne. Voici un extrait de l'exemple en direct:

 var = colonnes
 [
	 {
		 clé: «case»,
		 l'étiquette: «<input type="checkbox" id="select-all" /> ',
		 formateur: function (o)
		 {
			 var markup = '<input type="checkbox" class="record-select" id="{id}" />';
			 o.cell.set ('innerHTML', Y.Lang.sub (balisage,
			 {
				 Identifiant: this.getRecordId (o.record)
			 }));
		 }
	 },
	 {Clé: 'title', label: "Titre"},
	 {Clé: «année», l'étiquette: 'Année'},
	 {Clé: «couleur», l'étiquette: 'Couleur'}
 ];

(Notez que l'exemple en direct définit une extension mineure de Y.HTMLTableBulkEditor à manipuler la colonne case à cocher.)

Vous pouvez également passer une instance de Y.Paginator à Y.BulkEditDataSource . Cela est démontré dans un document distinct, plus compliqué par exemple en direct .

Locaux vs distance des sources de données

Lorsque vous décidez d'utiliser un local ou un source de données distante, vous devez examiner soigneusement les arbitrages. Le compromis évident est que la source de données locale est plus rapide lors de la pagination, mais le chargement de la page initiale aura plus, et il nécessite plus de mémoire sur le client.

Le widget éditeur en vrac impose des arbitrages supplémentaires, cependant.

Tout d'abord, la source de données YUI doit renvoyer des données immuables. Ceci est automatique pour les sources de données locales, mais peut être difficile à mettre en œuvre des sources de données à distance. Vous aurez besoin de verrouiller les lignes de votre table de base de données pour la durée de l'opération en bloc édition si plus d'un utilisateur est autorisé à les modifier.

Deuxièmement, le choix entre la source de données locale et à distance affecte la façon dont vous êtes autorisé à enregistrer les données. Lorsque vous utilisez une source de données locale, vous pouvez faire économiser meilleur effort, c'est à dire, sauf tous les enregistrements valides sur le serveur, les retirer de la source de données locale, et permettre à l'utilisateur de se concentrer sur les dossiers qui ont des valeurs non valides. Lorsque vous utilisez une source de données à distance, l'exigence immuabilité ne vous permet de faire tout ou rien épargné, c'est à dire, les données ne peuvent être sauvés, après tout les données sont valides.

Cas d'utilisation dans le monde réel

La motivation originale pour le widget éditeur en vrac était de permettre aux post-traitement d'une feuille de calcul transféré. L'introduction d'une étape de post-traitement élimine la nécessité pour les valeurs du tableur pour être parfait. Les erreurs peuvent être signalées et fixe dans le widget éditeur en vrac au lieu de rejeter le téléchargement complet. En outre, le traitement sur le serveur peut faire de mieux-guess cession de valeurs supplémentaires requis pour chaque enregistrement, et l'utilisateur peut vérifier et corriger ces valeurs supplémentaires avant l'enregistrement. Cela simplifie la création initiale de la feuille de calcul.

Dans ce scénario, une source de données à distance est le meilleur choix. Les données téléchargées sont stockées dans un espace de travail, et est donc garanti immuable, puisque aucun autre utilisateur ne puisse le voir. "Tout ou rien" économie est approprié: Une fois que toutes les erreurs ont été corrigées, l'opération de sauvegarde est atomique, tout comme une opération de téléchargement standard.

À propos de l'auteur: John Lindal ( @ jafl5272 sur Twitter) est l'un des ingénieurs de plomb construire le fondement sur ​​lequel Yahoo! APT est construit. Auparavant, il a travaillé sur le Yahoo! Publisher Network.

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!