Scout

Ma première application

Dans cette partie du site, je vais vous présenter dans les grandes lignes un exemple d'application simple que l'on peut développer avec Eclipse Scout.

Création d’un projet

Dans un premier temps on va commencer par créer un nouveau projet. Il faut au préalable avoir téléchargé et installé Eclipse Scout. Maintenant nous pouvons faire un clique droit sur l'arborescence de packages et on devra choisir "New Scout Project". On aura l'aperçu suivant :

On pourra également créer un nouveau projet à partir du menu File > New > Project > Scout > Scout Project

Une fois l'action faite, une nouvelle fenêtre s'ouvre. C'est dans cette fenêtre que nous allons pouvoir choisir le nom de notre projet ainsi que les composant que nous souhaitons utiliser. On peut créer le nouveau projet de la manière suivante :

On remarque la présence de 6 éléments sélectionnable :

Une fois le projet créé, l'application est d'ores et déjà fonctionnel. Pour le confirmer il nous suffit de se rendre dans la partie "server" puis dans la zone de propriété pour démarrer le serveur.

Nous avons alors l'interface suivant qui se lance. Celle-ci est générée grâce au package SWT.

La création du projet est maintenant terminé. Nous allons pouvoir commencer à parler du développement de notre solution.



Ajout d’éléments

Nous souhaitons réaliser une application de QCM qui ressemblerait au schéma ci dessous. Pour ce faire, nous allons devoir créer un tableau contenant des chaines de caractère et lorsque l'on réalise un double clique sur une question, nous pouvons ouvrir un nouvelle qui nous permettra de répondre à la question.

Pour ajouter une élément il faut se rendre dans la vue Scout Explorer jusqu'à ce formulaire Scout Projects > test > client > Forms > DesktopForm. En le sélectionnant, la liste des propriétés s'affiche dans la vue " Scout Object ". Saisir " Questions " dans la propriété " Title ", nous validons en sélectionnant " New translated text… ". La fenêtre qui s'ouvre permet de saisir les traductions pour une application multilingue. Valider avec OK, le code Java correspondant, ainsi que les ajouts dans les fichiers de traduction sont effectués. Nous venons de changer le titre de notre formulaire.

De la même manière, nous allons ajouter un champ TableField qui contiendra la liste des questions. Dans la MainBox du DesktopForm, sélectionner " New Form Field… " avec le menu contextuel. Dans la liste des types de champ, choisir "table field" et cliquer sur " next > ". Donner un nom (name) " Questions ".

Une fois l'action réalisée, il nous faut ajouter des colonnes à afficher. Pour cela, rien de plus simple, il faut se rendre dans l'élément récemment créé : QuestionField > Table > Columns et choisir " New columns… " dans le menu contextuel. La première colonne sert à stocker l'ID de la question. Sélectionner Integer Column. Donner un nom " Nr ", et un Type Name " QuestionNrColumn ".

Pour spécifier que l'on souhaite que le numéro de ligne corresponde à l'ID, il faut se rendre dans la vue des propriétés de la colonne récemment créé. Puis on sélectionne dans "Data" l'élément "Primary key"

De la même manière on ajoute une autre colonne que l'on appellera "QuestionColumn" et ayant pour label "Question".

Nous pouvons dès à présent commencer à remplir notre formulaire. C'est du coté serveur que cela se passe maintenant. Pour cela rendez vous Scout Projects > test > server > Process Services > DesktopProcessService et double-cliquer sur la fonction load pour ouvrir le code Java correspondant à la fonction. On peut alors ajouter dans la fonction le morceau de code suivant : 

public DesktopFormData load(DesktopFormData formData) throws ProcessingException {
  formData.getQuestions().addRow(new Object[]{1, "Quel est le meilleur IDE ?"});
  formData.getQuestions().addRow(new Object[]{2, "Quel est le meilleur smartphone sous Android ?"});
  return formData;
}

De retour sur l'onglet des propriétés pour lancer le serveur. De cette manière nous pouvons voir les modifications apportées jusqu'a maintenant. Vous devriez avoir quelque chose ressemblant à l'image ci dessous :

Nous pouvons maintenant avancer dans le projet. On va pouvoir apprendre à connecter notre application à une base de données. Ce qui nous permettra de faire évoluer plus facilement les questions de notre formulaire.



Connexion à une base de données

Il s'agit tout d'abord d'ajouter le Service SQL qui sera utilisé par les processus services du serveur. Déplier l'arborescence de l'application : Server > Common Services > Sql Services. Sélectionner "New Sql Service…" dans le menu contextuel.

Donner un nom : TestMySQLSqlService et sélectionner la classe parente correspondant à MySQL comme Super Type : AbstractMySQLSqlService.

Le Service ainsi créé n'est pas encore configuré. Pour le faire, il faut le sélectionner dans l'arborescence server > Common Services > Sql Services > TestMySQLSqlService.

Dans la zone de propriété de cet élément il faut renseigner les informations suivantes :

Maintenant, il faut retourner sur l'élément DesktopProcessService du serveur que nous avons modifié un peu plus tôt. Nous allons y ajouter le code nous permettant de récupérer les éléments contenu dans la base de données. 

public QuestionsListFormData load(QuestionsListFormData formData) throws ProcessingException {
  SQL.selectInto(" select question_id, question_text " +
      " from  questions " +
      " into :QuestionNr, :QuestionText",
      formData.getQuestions());
  return formData;
}

Une fois le code modifié, relancer le serveur pour faire un test. Si tout c'est passé normalement, les questions sont directement chargées depuis la base de données.

Source permettant la création de la base de donées :



Liaison du contenu à la base de données

Pour aller plus vite j'ai réalisé le formulaire de réponse. A vous de faire de même en reprenant les concepts vus plus haut. Pour se faire reprenez le schéma sur lequel on s'est appuyé jusqu'a maintenant. Pour que la suite soit plus facile à comprendre créer cette forme en l'appelant "AnswerForm".

Il reste à ajouter le code java qui permet d'ouvrir notre formulaire. Dans l'arborescence sélectionner le menu nouvellement créé, et ajouter l'événement action en cliquant sur le + en face de "Exec Action". La fonction Java est créée au bon endroit du code.

@Override
protected void execAction() throws ProcessingException {
  AnswerForm form = new AnswerForm();
  form.getQuestionNrField().setValue(getQuestionNrColumn().getSelectedValue());
  form.startNew();
}

Il est possible à tout moment de lancer l'application pour voir les évolutions au fur et à mesure des modifications. Vous devriez avoir quelque chose ressemblant à ça :

Pour le champ choix, nous utilisons une ListBox. Nous allons lui associer un Lookup Service, pour définir le contenu de cette liste. Dans l'arborescence de l'application sélectionner Scout Projects > test > server > Process Services et choisir "New Lookup Service…" dans le menu contextuel. Choisir "ChoicesLookupService" et sélectionner "AbstractSqlLookupService" dans la première étape et ne rien changer dans la deuxième.

Ce Lookup Service permet de lister les choix (clé/valeur) correspondants à une question. Comme nous avons choisi d'étendre AbstractSqlLookupService, il suffit d'indiquer le code SQL réalisant cette requête dans la propriété SqlSelect. Naviguez jusqu'au service nouvellement créé et double-cliquer sur ce dernier.

Vous pouvez y ajouter le code suivant :

@Override
public String getConfiguredSqlSelect() {
  return "select choice_id, choice_text from choices where question_id = :master";
}

Le LookupService existe côté serveur, il manque un objet dans shared (présent dans le client et le serveur) permettant de transférer les données entre le formulaire (côté client) et le LookupService (côté serveur). Cet objet se nomme LookupCall, il s'agit de le créer. Naviguez dans l'application Scout Projects > test > shared > LookupCalls et sélectionner "new LookupCall…". Choisir comme nom "ChoicesLookupCall" et sélectionner l'option "use existing lookup service" en indiquant l'interface du service nouvellement créé "IChoicesLookupService". Il n'y a rien à changer dans la deuxième étape.

Il nous faut aussi indiquer que le champ ListBox du formulaire de réponse utilise ce Lookup Call. Sélectionner cette ListBox dans l'arborescence Scout Projects > test > client > Forms > AnswerForm > MainBox > ChoicesField. Dans la vue des propriétés indiquez "ChoicesLookupCall" pour la propriété "Lookup Call".

Dernière étape : compléter la fonction create() du process service pour persister les données saisies. Ouvrir à nouveau AnswerProcessService en navigant dans Scout Projects > test > server > Process Services > AnswerProcessService.

@Override
public AnswerFormData create(AnswerFormData formData) throws ProcessingException {
  if (!ACCESS.check(new CreateAnswerPermission())) {
    throw new VetoException(Texts.get("AuthorizationFailed"));
  }
  
  SQL.insert(" insert into answers (name, question_id) " +
      " values (:YourName, :QuestionNr) ", formData);
  
  SQL.selectInto(" values IDENTITY_VAL_LOCAL() " +
      " into  :AnswerNr", formData);
  
  if (formData.getChoices().isValueSet() && formData.getChoices().getValue() != null) {
    for (Long choiceId : formData.getChoices().getValue()) {
      SQL.insert(" insert into answers_choices (answer_id, choice_id) " +
          " values (:AnswerNr, :ChoiceId) ", formData, new NVPair("ChoiceId", choiceId));
    }
  }
}

Il reste à relancer l'application pour constater que le formulaire est opérationnel et observer le remplissage du formulaire.



Mise en production

Le déploiement sur un serveur Tomcat en compilant l'application depuis Eclipse est très simple. Sélectionner le serveur "Scout Projects > test > server" et sélectionner dans le menu contextuel "Export as war…".

Dans l'assistant ainsi ouvert, choisir le fichier *.product qui doit être compilé et le ficher de destination. Il est possible de compiler le client, qui sera inclus dans le serveur comme application à télécharger et à installer. Cocher : "Include Client application" et sélectionner le produit. Valider avec OK, la compilation commence.

Installer le war ainsi généré dans le dossier webapps du serveur Tomcat. Démarrer Tomcat, ouvrir l'URL correspondant au nom du war sur le serveur Tomcat.Dans la page se trouve un lien vers un zip à télécharger. Dans ce zip se trouve l'application que chaque utilisateur doit exécuter.

Voici le résultat final une fois l’application installée sur le client et une fois que le serveur à été lancé.