// Tenez vous au courant

Composant Flex - FlexCell : gestion de la saisie et des formules, 1/2

Pour accéder à la démo, cliquer sur cette adresse, mais lisez la suite avant peut être, si vous aimez la technique …

L’ambition n’est pas, démesurée, de re-développer en as3 l’ensemble des fonctionnalités d’Excel.

Il est cependant envisageable d’en intégrer une portion significative dans vos applications Flex.

final

Matériel de base :

  • un datagrid, de préférence Spark. Il servira de chargeur pour la représentation de nos cellules
  • un moteur de navigation plus évolué : il est indispensable de développer la capacité de déplacement par touches fléchées, d’annuler la saisie sur ‘Escape’…
  • un dictionnaire de cellules, pour limiter au maximum les informations mémorisées (évitons les 256*65535 enregistrements)
  • un gestionnaire d’événements ‘maison’, pour se prémunir des interactions hasardeuses
  • et enfin, le GROS bébé, un moteur de calcul capable de résoudre une équation formalisée en pseudo-langage

A) Du Datagrid vers l’ExcelSheet

3 axes d’intervention ici :

  1. le skinning pour ajouter la colonne 0 qui affichera les n° de ligne
  2. le moteur de navigation par flèches (Keyboard.DOWN, UP…)
  3. le peuplement du dataProvider par une matrice fictive

1) Les impressionnantes capacités de spark permettent l’intégration de la colonne des numéros de ligne en très peu de code :

Dans la classe Mère, (presque) une simple référence au skin qui sera utilisé.  A noter la variable rowList, qui sera le conteneur dans lequel nous insèrerons les pseudo-boutons des lignes

codewizxlssheet

Dans la class de skin, l’instance du conteneur (rowScroller)

codewizskin

2) Le moteur de navigation sera très fortement couplé au renderer, qui se chargera de dispatcher un événement générique, dans notre cas, un WizXlsEvent.

codexlsevent

Cet évenement va “bubbler” jusqu’au datagrid parent. C’est lui qui déterminera l’action à effectuer.

codenavigation1

L’action en retour est un simple re-positionnement, et le passage du focus au renderer de destination.

A noter ici un marge d’amélioration par l’utilisation d’une interface plutôt qu’un objet typé comme le WizCell. Cela permettra le cas échéant de varier les renderers sans intervention sur la classe ExcelGrid.

3) la génération de la matrice de cellules nécessite la création de x colonnes fictives, le datafield n’a ici aucune importance. Pour les lignes, nous créerons y items, fictifs eux aussi. Si l’on veux pousser la ressemblance avec Excel au-delà de la pertinence, il suffit donc de générer 256 colonnes, puis 65535 lignes (Excel <2003). Cela n’est pas justifiable pour une application métier. Mais bon, c’est possible.

codewizxlsgeneratematrix

Prochaines étapes

Un dictionnaire de cellule et un moteur de calcul

  • Twitter
  • Facebook
  • Viadeo
  • WordPress
  • Share/Bookmark

Discussion

Les commentaires sont fermés pour cet article.

  1. [...] Ce billet était mentionné sur Twitter par Daniel Langrand, Daniel Langrand. Daniel Langrand a dit: Reproduire le comportement de Excel dans Flex, un peu de technique … http://bit.ly/fRfCiJ [...]

    Posted by Les tweets qui mentionnent Un peu de e-vitamine ? | Composant Flex - FlexCell : gestion de la saisie et des formules, 1/2 -- Topsy.com | février 9, 2011, 21 h 06 min