formation

1-recuperer.md

Formation focus

Récupérer les sources:

git clone -b formation-detail https://github.com/KleeGroup/rodolphe-demo.git

detail.md

#Exercice 2 : développement d'un écran de détail

Le but de cet exercice est de réaliser un écran de détail de l'application de formation.

Pour cet exercice nous aurons besoin :

• d'une vue composite représentant le détail d'un film
• de plusieurs vues représentant chacune un bloc du détail d'un film
• de la documentation ici

Création de la vue composite de film

• créer un fichier index.jsx dans le répertoire suivant:

|app
  __views
    __movie
      *index.jsx
  

• créer un composant qui représentera notre vue composite et afficher un hello world

module.exports = React.createClass({
    render: function render() {
        return (
            ...
        );
    }
});

• exporter ce composant

Création d'une route

• dans le router, ajouter une route d'accès au détail d'un film par son id
• implémenter le handler de la route en affichant la vue composite

// importer la vue de recherche
focus.application.render(composant, selecteur) => rendre un composant react dans un element du DOM

Création de la sous vue de détail d'un film

• créer un fichier detail.jsx dans le répertoire suivant:

|app
 __views
   __movie
   *index.jsx
   *detail.jsx

• créer les services de chargement de la page de detail

• Utiliser la fonction fetch de focus focus.network.fetch
• Les urls sont disponibles dans le fichier config/server

* créer un composant de détail à partir du mixin de formulaire "focus.components.common.title.component"

```javascript
var detailView = React.createClass({
  mixins: [focus.components.common.title.component],

  ...
});

• lui ajouter les attributs actions,stores et definitionPath

Le store

Dans focus il y a un store : focus.store.CoreStore Il faut remplir la propriété définition avec les attributs du schéma du movie: movie, castings, producers, directors

Les actions

Une action doit appeller un service et est déclanchée par la vue. Une fois l'appel de service réalisé il faut dispatcher le résultat aux différents store.

// Récupérer le dispatcher
var AppDispatcher = focus.dispatcher;
// Code dans l'action
AppDispatcher.handleServerAction({		
  data: {movie: data},		
  type: "update"		
});

Implémenter les actions. Indice, pensez aux Promise.

action: {
  save: yoursaveFunction,
  load: yourLoadFunction,
  delete: yourDeleteFunction
}

• implémenter la méthode renderContent

fieldFor: Crée un champ correspondant au domaine dans un mode correspondant au mode edit ou non..
listFor: Rend un champ de type liste.
buttonSave: un bouton sauvegarder, idem pour cancel, edit
_renderActions: Rend les boutons edit, save, cancel en fonction de l'état de la page

• exporter la vue de détail
• rendre la vue de détail dans la vue composite et vérifier son fonctionnement

recherche-avancee.md

Exercice 4 : développement d'un écran de recherche avancée

Le but de cet exercice est de réaliser la recherche avancée de l'application de formation

pour cet exercice nous aurons besoin :

• d'une vue implémentant le mixin filtre-resultats

Création d'une route

• ajouter une route "filterResult" dans le routeur de l'application avec un handler vide

Initialisation de la vue de filtres-resultats

• créer un fichier index.jsx dans le répertoire suivant :

|app
  __views
    __filter-result
    *index.jsx  

Création de l'action de recherche

• ajouter l'action de recherche suivante dans le fichier de la vue :

Création d'une vue pour les lignes de résultats

• créer un composant de ligne de résultat à partir du mixin "focusComponents.list.selection.line.mixin"

var Line = React.createClass({
  mixins: [focusComponents.list.selection.line.mixin],

  ...
});

• implémenter la méthode renderLineContent pour le rendu de la ligne

création de la vue de filtres-résultats

• créer un composant de recherche résultat à partir du mixin "focusComponents.page.search.filterResult.mixin"

var searchView = React.createClass({
  mixins: [focusComponents.page.search.filterResult.mixin],

  ...
});

• lui ajouter les attributs actions et store
• implémenter la méthode render de votre composant

méthode utiles :
liveFilterComponent() => retourne le composant de facette de la recherche avancée
listSummaryComponent() => retourne la barre de résumé sur la liste de résultats
actionBarComponent() => retourne un composant pour la barre d'action sur la liste de résultats
resultListComponent => retourne le composant de liste de résultats

Rendu de la vue de filtres-résultats

• créer un composant qui rend votre vue de recherche avancée en lui passant les propriétés nécessaire à son fonctionnement:

//implémenter un composant avec juste une méthode render

React.createElement(composant, propriétés) => retourne un element React à insérer dans le DOM

• lui passer les propriétés nécessaire au fonctionnement de la searchView

facetConfig : definition des facettes et de leurs types {facet1: "text"}
orderableColumnList : list des colonnes triables {code: 'label'}
lineComponent : composant pour afficher la ligne
onlineClick : fonction a exécuter sur un click
criteria : critere de recherche général (scope + texte de recherche)  criteria: {scope: 'scope', searchText: 'text'}
idField : Id permettant d'identifier une ligne de résultat (par défaut id),

• exporter ce composant

Tester le rendu de la vue

• dans le routeur implémenter le handler de la route searchResult

// importer la vue de recherche avancée
focus.application.render(composant, selecteur) => rendre un composant react dans un element du DOM

recherche.md

Exercice 3 : développement d'un écran de recherche

Le but de cet exercice est de réaliser la recherche centralisée de l'application de formation

pour cet exercice nous aurons besoin :

• d'un service de recherche côté serveur
• d'un web service de recherche côté serveur
• d'un service focus
• d'une vue implémentant le mixin recherche-resultat
• d'une vue permettant d'afficher l'aperçu d'un résultat

Création d'une route

• ajouter une route "searchResult" dans le routeur de l'application avec un handler vide

Création d'un service focus

• écrire un service qui lance une recherche (en s'inspirant de ce qui a été fait pour le détail)

Initialisation de la vue de recherche-resultat

• créer un fichier index.jsx dans le répertoire suivant :

|app
  __actions
   [actionFile].jsx
  __views
    __search-result
    *index.jsx
  

Création de l'action de recherche

• ajouter l'action de recherche suivante dans le fichier de la vue :

var action = {
    search: function(criteria) {
        var page = 0;
        if((criteria.pageInfos.page !== undefined) && (criteria.pageInfos.page !== null)){
            page = criteria.pageInfos.page;
        }
        var critere = {
            criteria: {
                scope: 'MOVIE',
                query: criteria.criteria.query
            },
            pageInfos: {
                sortFieldName: undefined,
                sortDesc: undefined,
                skip: page
            },
            facets: [],
            group: ''
        };
        [appel du service de recherche].then(
            function success(data) {
                var list = data;
                if(data.list !== undefined){
                    list = data.list;
                }
                var dataRet = {
                    list: list,
                    facet: {},
                    pageInfos: {
                        currentPage: 1,
                        perPage: 1000,
                        totalRecords: data.totalRecords
                    },
                    searchContext: {
                        scope: criteria.criteria.scope,
                        query: criteria.criteria.query
                    }
                };
                focus.dispatcher.handleServerAction({data: dataRet, type: 'update'});
            },
            function error(errors) {
                console.info('Errrors ', errors);
            }
        );
    }
};

• appeler le service de recherche dans l'action

Création d'une vue pour les lignes de résultats

• créer un composant de ligne de résultat à partir du mixin "focusComponents.list.selection.line.mixin"

var Line = React.createClass({
  mixins: [focusComponents.list.selection.line.mixin],

  ...
});

• implémenter la méthode renderLineContent pour le rendu de la ligne

création de la vue de recherche-résultats

• créer un composant de recherche résultat à partir du mixin "focusComponents.page.search.searchResult.mixin"

var searchView = React.createClass({
  mixins: [focusComponents.page.search.searchResult.mixin],

  ...
});

• lui ajouter les attributs actions et store
• implémenter la méthode render de votre composant

méthode utiles :
quickSearchComponent() => retourne le composant du champs de recherche
listComponent() => retourne le composant de liste de résultats

Rendu de la vue de recherche-résultat

• créer un composant qui rend votre vue de recherche en lui passant les propriétés nécessaire à son fonctionnement:

//implémenter un composant avec juste une méthode render

React.createElement(composant, propriétés) => retourne un element React à insérer dans le DOM

• lui passer les propriétés nécessaire au fonctionnement de la searchView

lineComponent : composant pour afficher la ligne
onlineClick : fonction a exécuter sur un click
scopeList : la liste des scopes pour le champs de recherche
scope : le scope par défaut

• exporter ce composant

Tester le rendu de la vue

• dans le routeur implémenter le handler de la route searchResult

// importer la vue de recherche
focus.application.render(composant, selecteur) => rendre un composant react dans un element du DOM

Créer une vue pour l'apercu d'une ligne

• ajouter un fichier lineOverview.jsx

|app
  __views
    __search-result
    *index.jsx
    *lineOverView.jsx

• créer un composant d'apercu et implémenter sa méthode render

// quelques composants utiles
label : focus.components.common.label.component => composant de label
block : focus.components.common.block.component => composant de block de champs