Blog Interface utilisateur Yahoo! (YUIBlog)

Dans la Galerie YUI 3: Widget Editor en vrac

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!