Le plugin Eclipse Graphical Designer de NatJet

Le développement de sites Internet a occulté l’importance des outils de conception graphique des écrans. Et pour le développement d’applications «métier» que nous utilisions NS-DK, NatStar ou VB, un designer graphique d’écran nous paraît tellement naturel que nous n’en percevons plus très bien les enjeux.

Sommaire

Description d'écran Palette de contrôles graphiques de NatJet Vue properties Conclusion Pour en savoir plus

Deux de ces enjeux sortent du lot :

• Le premier est le plus évident : la construction de l’écran est grandement simplifiée et une quantité de code fastidieux à écrire est générée automatiquement
• Le second est moins évident mais probablement plus important : il augmente la lisibilité du code. On ne mélange plus la présentation (l’emplacement des contrôles) du code applicatif, on a tout de suite une vision d’ensemble de l’écran, l’impact de l’ajout d’un contrôle, du déplacement d’un autre sont immédiatement visibles...

Ce second enjeu est primordial pour le développement d’une application «métier» : ces applications possèdent généralement autour d’une centaine d’écrans (une cinquantaine pour les plus petites et de trois à cinq cents pour les plus importantes). Pour un tel volume, la lisibilité du code est un élément vital à la réussite du projet.

Description d'écran

NatJet 3.0, notre nouvel AGL J2ee, s’inscrit dans la droite lignée de ces prédécesseurs en prenant en compte cet aspect : son éditeur graphique d’écran permet de dessiner ses écrans :

• Le développeur dépose ses contrôles sur l’écran
• Il est capable de les sélectionner et de les glisser/déposer afin d’obtenir un positionnement précis : Les contrôles graphiques peuvent être positionnés au pixel près en valeurs absolues
• Il dispose d’outils facilitant l’alignement des différents contrôles
• Un système simple d’attachement (appelé également ancrage) des contrôles permet un repositionnement automatique des contrôles en fonction de l’espace disponible à l’exécution. Un contrôle, comme le contrôle ListView, peut ainsi afficher plus d’informations s’il dispose de plus d’espace.
• En phase de conception, le développeur peut se rendre compte du rendu que son écran aura en mode Ajax l’autorisant à un réglage fin et précis.

Graphical Designer

Ecran production

Toutes ces fonctionnalités du Graphical Designer de NatJet permettent :

• Un gain de productivité très important du développeur lors de la phase de réalisation des différents formulaires d’une application de gestion
• Une amélioration de la qualité des interfaces produites : ce point ne doit pas être négligé pour ce type d’applications pour lesquelles les utilisateurs sont généralement extrêmement exigeants

Palette de contrôles graphiques de NatJet

Le développeur possède une palette de composants graphiques très riche :

• TextField : champ de saisi permettant d’interdire la frappe de certains caractères par paramétrage ainsi que la définition d’une expression régulière de validation
• NumericalTextField : champ dédié à la saisie des montants. Il n’autorise que la saisie des montants. Il effectue automatiquement la conversion de la valeur saisie en un double Java libérant le développeur de cette préoccupation
• DatePicker : calendrier qui se déploie sur un clic permettant une saisie conviviale d’une date
• ComboBox : liste déroulante permettant de lier un code à un libellé. La sélection d’un élément de la liste permet de déclencher une mise à jour d’une autre partie de l’écran.
• CheckBox : case à cocher
• RadioButton : élément d'un groupe d'options permettant la sélection d’une option parmi plusieurs
• PushButton : contrôle pouvant prendre des aspects différents (lien, button, image…) permettant de déclencher une action (validation, annulation…)
• Label : un libellé tout simple qui permet de préciser l’utilité d’un contrôle
• TextArea : champ permettant de saisir un texte sur plusieurs lignes sans formatage
• RichTextArea : composant permettant l’édition sur plusieurs lignes d’un texte et sa mise en page
• ListView : liste multi-colonne équipée d’ascenseur vertical et horizontal. Un clic sur le titre d’une colonne permet de déclencher un tri suivant cette colonne
• TreeView : Liste arborescente
• ListBox : une liste mono-colonne permettant de faire de la multi-sélection
• Menu déroulant : barre de menus avec des sous-menus
• Image : contrôle permettant l’affichage d’une image quelconque (Jpeg, Png, GIF)
• GroupBox : permet le regroupement graphique de plusieurs contrôles
• Classeur et onglets
• WebBrowser : permet l’affichage d’une page HTML provenant de n’importe quel site. Ce composant autorise la réalisation de Mash-up comme par exemple avec GoogleMap
• FlashPlayer : permet l’affichage d’une animation Flash
• File Selector : permet la sélection d’un fichier sur le poste du navigateur et son chargement vers le serveur (Upload de fichier)
• Slider : composant permettant d’afficher une barre de progression ou un ascenseur

Grace à la technologie Ajax utilisé, la richesse et l’interactivité de ses contrôles est équivalente à celle des contrôles Windows traditionnels.

Vue properties

Le volet Properties des composants permet un paramétrage aisé et sans programmation du comportement des contrôles. Un effort tout particulier a été attaché à la présentation de cette vue Eclipse afin de regrouper ensemble les propriétés les plus utilisées.

Parmi les propriétés les plus communes on aura :

• la position
• la taille
• le tooltip (ou bulle d’aide qui apparaît lors du survol du contrôle)
• l’attachement (ou ancrage) d’un contrôle sur un coté de l’écran afin de permettre son repositionnement lorsque l’espace disponible augmente
• pour certain champ comme un TextField, on pourra définir le masque de saisie ou l’expression régulière
• les aspects du contrôle comme sa couleur, la police utilisée ou son style (si on utilise une feuille de styles)

A partir du Graphical Designer, vous pouvez accéder directement aux évènements correspondant aux différentes actions utilisateur. L’interaction avec l’utilisateur est programmée en Java (aucune notion de Javascript ou HTML n’est nécessaire).

Votre code est séparé du code de présentation généré à partir du dessin des écrans. Cela vous garantit une forte indépendance de votre code de la couche présentation.

Conclusion

NatJet 3.0 est un AGL de développement pour vos applications «métier» extrêmement productif et d’une très grande simplicité de prise en main :

• l’éditeur graphique d’écran libère vos développeurs de la charge de coder la construction et le paramétrage de vos contrôles
• le seul langage de programmation dans NatJet est Java que l’on code l’interaction avec l’interface ou ses règles métiers
• l’éditeur de DataObject vous permet de définir sans programmation des liens entre vos contrôles et un bean métier (objet dans le monde java), libérant ainsi vos développeurs du travail fastidieux de copie des informations entre l’écran et les objets mémoires
  

En plus de cette simplicité de développement, NatJet vous offre en exécution :

• Une interface Ajax riche et interactive comme une application Windows
• La simplicité de déploiement des applications Web
  

Avec NatJet, vous n’avez plus de raison de ne pas développer d’applications Web 2.0.

Pour en savoir plus

Vous pouvez trouver plus d'informations sur notre site Internet :

• Présentation générale de NatJet :
  Plugin Eclipse, NatJet est un atelier de développement graphique J2EE/Ajax conçu pour dessiner vos applications «métier».
• Richesse de l'interface :
  Les applications NatJet sont des applications Web J2EE dont la convivialité et l’interactivité de l’interface égalent celles des interfaces Windows clients lourds traditionnelles.
• Graphical Designer :
  Glisser/déposer les contrôles directement sur vos écrans.
• Architecture produit :
  NatJet est un plugin Eclipse qui étend les fonctionnalités de développement web.