Note de développement CEL version Head. Août 2009.
L'application est développée en Java/GWT.
Versions disponibles : gwtext 2.0.6 est sorti en Décembre 2008 et n'est compatible qu'avec gwt 1.5.3 et Extjs 2.0.2. Ce projet est arrêté.
Extjs 3.0.0 est sorti en Juillet 2009. Pas de compatibilté de prévue avec gwtext.
A terme, passage à http://extjs.com/products/gxt/ GXT qui est le projet officiel de portage Extjs vers gwt.
Versions disponibles :
Extensions utilisateurs de gwtext, utilisé pour le widget d'envoi de fichier principalement. Ce projet est arrêté.
A terme passage à GWT 1.7 ou 2.0.5 et abandon de gwtext au profit de GXT.
cf : cel2.gwt.xml
<inherits name='com.google.gwt.user.User'/> # Base de GWT
<inherits name='com.google.gwt.user.theme.standard.Standard'/> # Thème standard
<inherits name='com.google.gwt.user.theme.standard.Standard'/> # Parsing JSON
<inherits name='com.gwtextux.GwtExtUx'/> # Extension Utilisateur Gwtext
<stylesheet src="js/ext/resources/css/ext-all.css" /> # CSS gwtext, adaptée pour le projet
<script src="js/ext/adapter/ext/ext-base.js" /> # Extjs 2.0.2
<script src="js/ext/ext-all.js" /> # Extjs 2.0.2
<script src="js/UploadDialog/Ext.ux.UploadDialog.packed.js" /> # Ex Extension extension
Optimisation : ne pas charger ext-all.js mais les seules extensions utilisées
<entry-point class='org.tela_botanica.client.cel2'/> Point d'entrée
<stylesheet src='cel2.css' /> CSS
0) : Classe Cel2 (Cel2.java) :
Point d'entrée de l'application : instanciation du médiateur de l'application et mise en place de son panneau. Démarrage de l'application par appel aux informations utilisateur.
A) : Instanciation de CarnetEnligneMediateur (singleton)
Lors de l'instanciation sont disposés les éléments principaux de l'application : bandeau, zone d'identification, onglets de navigation et applications Observation et Image; puis sont instanciées les applications Observations et Images, dont les panneaux principaux sont ajoutés dans l'espace restant. Le modèle d'accès au données pourrait être instancié un peu plus tard.
B) : Instanciation de CarnetEnLigneModele (singleton), modèle d'accès aux données. --> B)
Lecture des parametres de l'application chargés depuis le fichier config.js
C) : Instanciation de ObservationMediateur (singleton)
Sont instanciées les vues qui composent l'application d'observation : Formulaire de saisie, Liste d'observation, Information repartition, Information Illustration et Zoom provenant de l'application Image. TODO : verifier si dépendance est obligatoire ? . Ajout également de la gestion des mots clefs (non affcihé) et des filtre par commune ou dates.
Environnement de développement :
L'application est développée en Java/GWT.
- Utilisation de gwt 1.5.3 (livré en Octobre 2008).
- Utilisation de gwtext 2.0.5 (livré en Septembre 2008)
Versions disponibles : gwtext 2.0.6 est sorti en Décembre 2008 et n'est compatible qu'avec gwt 1.5.3 et Extjs 2.0.2. Ce projet est arrêté.
Extjs 3.0.0 est sorti en Juillet 2009. Pas de compatibilté de prévue avec gwtext.
A terme, passage à http://extjs.com/products/gxt/ GXT qui est le projet officiel de portage Extjs vers gwt.
Versions disponibles :
- Ext GWT 1.2.4 parution Avril 2009 compatible gwt 1.5.3.
- Ext GWT 2.0.1 parution Juillet 2009 compatible gwt 1.7
- Utilisation de gwtextux 0.3 . Juin 2008.
Extensions utilisateurs de gwtext, utilisé pour le widget d'envoi de fichier principalement. Ce projet est arrêté.
A terme passage à GWT 1.7 ou 2.0.5 et abandon de gwtext au profit de GXT.
Paquetages utilisés
cf : cel2.gwt.xml
<inherits name='com.google.gwt.user.User'/> # Base de GWT
<inherits name='com.google.gwt.user.theme.standard.Standard'/> # Thème standard
<inherits name='com.google.gwt.user.theme.standard.Standard'/> # Parsing JSON
<inherits name='com.gwtextux.GwtExtUx'/> # Extension Utilisateur Gwtext
<stylesheet src="js/ext/resources/css/ext-all.css" /> # CSS gwtext, adaptée pour le projet
<script src="js/ext/adapter/ext/ext-base.js" /> # Extjs 2.0.2
<script src="js/ext/ext-all.js" /> # Extjs 2.0.2
<script src="js/UploadDialog/Ext.ux.UploadDialog.packed.js" /> # Ex Extension extension
Optimisation : ne pas charger ext-all.js mais les seules extensions utilisées
<entry-point class='org.tela_botanica.client.cel2'/> Point d'entrée
<stylesheet src='cel2.css' /> CSS
Exécution type
0) : Classe Cel2 (Cel2.java) :
Point d'entrée de l'application : instanciation du médiateur de l'application et mise en place de son panneau. Démarrage de l'application par appel aux informations utilisateur.
- Instanciation de CarnetEnligneMediateur, médiateur général aux deux applications Observation et Images. --> A)
- Ajout au navigateur du panneau principal fourni par CarnetEnLigneMediateur
- Recherche des informations de connexion depuis CarnetEnLigneMediateur , methode getEtatUtilisateur().
A) : Instanciation de CarnetEnligneMediateur (singleton)
Lors de l'instanciation sont disposés les éléments principaux de l'application : bandeau, zone d'identification, onglets de navigation et applications Observation et Image; puis sont instanciées les applications Observations et Images, dont les panneaux principaux sont ajoutés dans l'espace restant. Le modèle d'accès au données pourrait être instancié un peu plus tard.
- Création du PanneauPrincipal englobant, disposition RowLayout.
- Instanciation de CarnetEnLigneModele (singleton), modèle d'accès aux données. --> B)
- Création de l'entéte :
- de la banniere (images ...)
- Création de la vue EtatConnexionVue , disposition FitLayout
- Creation du PanneauAdmin
- Creation du TabPanel ObservationImage : onglets d'accès aux application
- Ajout de EtatConnexionVue , Banniere et PanneauAdmin au PanneauPrincipal, disposition RowLayoutData (20 px+10% de la place restante +20px)
- Masquage du PanneauAdmin
- Ajout de l'outil déploiement/fermeture du bandeau et armement de l'évenement associé.
- Ajout des onglets Observation et Images
- Instanciation de ObservationMediateur (singleton) --> C)
- Instanciation de ImageMediateur (singleton) : instanciation légère, l'initialisation véritable se fait lors du rendu, sur clic de l'onglet correspondant.
- Ajout des panneaux principaux des fournis par ObservationMediateur et ImageMediateur disposition RowLayout.
B) : Instanciation de CarnetEnLigneModele (singleton), modèle d'accès aux données. --> B)
Lecture des parametres de l'application chargés depuis le fichier config.js
C) : Instanciation de ObservationMediateur (singleton)
Sont instanciées les vues qui composent l'application d'observation : Formulaire de saisie, Liste d'observation, Information repartition, Information Illustration et Zoom provenant de l'application Image. TODO : verifier si dépendance est obligatoire ? . Ajout également de la gestion des mots clefs (non affcihé) et des filtre par commune ou dates.
- Instanciation de ObservationModele (singleton), modèle d'accès aux données.
- Instanciation de ListeObservation , grille d'affichage des observations
- Création du PanneauPrincipal englobant, disposition BorderLayout
- Instanciation de FormulaireSaisieObservation, formulaire de saisie
- Création d'un panneau Conteneur Formulaire, qui contient le Formulaire de Saisie Observation
- Creation d'un panneau Centre, RowLayout, qui contient le Conteneur Formulaire et la liste d'observation, disposition RowLayout (210px et place restante).
- Creation d'un panneau Conteneur Detail et Mots Clef, qui contient DetailEtMotClef (un TabPanel) dans une disposition FitLayout
- Instanciation de l'arbre des mots clefs, de InformationRepartition , ImageGenerique , et MiniZoom
- Disposition de ces 3 elements dans le panneau Detail en RowLayoutData de 33, 33 et 34%
- Ajout de panneau Detail au TabPanel DetailEtMotClef(pas de mots clefs affiché pour l'instant)
- Instanciation de l'arbre des filtres
- Ajout des filtres à l'Ouest, du panneau Centre au centre et du Conteneur Detail et Mot clef à l'est.