Flash datagrid : Multiline headers
Le composant datagrid fait encore parler de lui. Bien pratique pour monter des interfaces d'administration et de data mining, il pose néanmoins pas mal de problèmes de formatage aux utilisateurs occasionnels.
=> Le grand classique des problèmes évoqués est de pouvoir afficher des conten us multi-lignes dans les cellules. Heureusement, vous avez déjà du localier la note technique qui y répond chez Adobe : http://www.adobe.com/support/documentation/en/flash/fl8/samples.html . le principe est d'utiliser l'API "CellRenderer", et cela fonctionne plutôt pas mal.
=> Mais la deuxième question corollaire est un peu plus ardue : Comment mettre en oeuvre des têtes de colonnes multi-lignes cette fois-ci ? Pas pareil ...
Nous avons été amenés, Lily et moi, à chercher une solution à l'occasion d'un projet de catalogue produits compilé sous Zinc. Cette solution, la voici :=> On verrouille le redimensionnement des colonnes du datagrid,=> Sur un calque situé au-dessus du datagrid, on dessine des têtes de colonnes sur mesure, avec aucune difficulté pour placer les titres sur plusieurs lignes.=> Dans ce clip, et sur chaque cellule de tête de colonne, on place un bouton transparent : Ils vont permettre de récupérer l'affichage du curseur doigt au survol, et de reprogrammer les comportements de tri de colonne.=> Pour trier les colonnes dynamiquement, il suffit d'agir sur le tableau qui sert de dataProvider au datagrid : Flash propose une méthode rès pratique, "Array.sortOn()". Imaginons ainsi que mon dataset comporte 3 champs comme suit :
ma_liste = [{nom:"quad", prenom:"damage", ville:"marseille"}, {nom:"lily", prenom:"virus", ville:"lyon"} ];
Si l'on souhaite trier suivant le nom, il suffit d'exécuter la commande
ma_liste.sortOn("nom");
Par défaut le tri est ascendant, et pour préciser l'ordre inverse, il suffit d'indiquer
ma_liste.sortOn("nom", Array.DESCENDING);
Simple, non ?
La dernière étape consiste alors à raffraichir explicitement l'affichage du datagrid en indiquant :
mon_datagrid.dataProvider=ma_liste;
La cerise sur le gâteau est ensuite d'ajouter les petites flèches visuelles indiquant le sens de tri, mais çà, vous savez faire ...
[swf src=http://web.infostrates.fr/infolabs/media/blogs/quad/datagrid_multiline_header.swf width=300 height=300 id=test version=7]
Les sources de l'exemple sont ici : datagrid_multiline_header.zip
3D Actu de nos clients AJAX Apache / Tomcat api google Apple - Mac OS X Benchmark Sites Web Blender Bureautique Cartographie CD-DVD Challenge Obelix CMS Coup de pouce Coupe du monde Football Cryptographie DADVSI & Libertés Déconne Développement Divers Eclipse eZ Publish Flash Flex Flex - RIA FLV et streaming Google Google Analytics Graphisme Groupware Insolite Internet Javascript Jeux Joomla Lambda calcul Lectures Les echecs Logiciel Logique Mac osX - leopard Magento Marketing Materiel mysql News Nom de domaines Open Office Open source PDA Penguins ! Perso PHP Podcasting Pré-presse Ressources Roxbury Guys Script Php Sécurité statistiques Stratégie Streaming video Systèmes et matériels Technocentre Utilitaires Veille & Intelligence Vidéo Vie citoyenne Volonté Zen Vision
Derniers articles
- GOOGLE ARRÊTE LE PROJET COLLABORATIF GOOGLE WAVE
- MAGENTO 1.4 - GESTION TTC ET TVA
- INSTALLATION DE MAGENTO 1.4 SOUS MAMP / WAMP
- 7 NOUVELLES FONCTIONNALITÉS POUR VOTRE COMPTE GOOGLE ANALYTICS
- HOW TO SEND HTML EMAIL USING OUTLOOK
- UN EDITEUR MYSQL ULTRA LITE
- CHANGER LA LANGUE EN COURS DE SCRIPT EZ PUBLISH
- GESTION DE LA PAGE PRÉCÉDENTE DANS EZ PUBLISH
- GOOGLE WAVE
- MANIPULER LES FLV SOUS MAC
- PROBLÈME DE COMPATIBILITÉ ENTRE SUITCASE FUSION ET 10.5.6
- UN OURS BLANC A BLOQUÉ LE VIEUX PORT ...
Commentaires
Authentifiez vous pour commenter.