04-2-composite.html

<section id="composite" data-background="#fecc99">

  <section>
    <h2>Composite</h2>
  </section>

  <section>
    <h3>Présentation</h3>
    <p>
      Le pattern Composite permet de simplifier la gestion des données en arbre.
    </p>
    <img src="/assets/images/composite.png" alt="Composite">
    <footer>
      <a href="https://refactoring.guru/design-patterns/composite" target="_blank" class="info">refactoring.guru</a>
    </footer>
  </section>

  <section>
    <h3>Exemple théorique</h3>
    <p>
      Dans cet exemple, nous allons utiliser le design pattern Composite pour développer un programme permettant de
      générer un diagramme de Gantt.
    </p>
    <img src="/assets/images/composite-gantt.png" alt="Composite Gantt">
    <footer>
      <a href="/assets/files/code_examples.zip" class="info">Télécharger le code source des exemples</a>
    </footer>
  </section>

  <section>
    <h3>Composite dans le framework Symfony</h3>
    <p>
      Le framework Symfony utilise le design pattern composite dans son composant de gestion des formulaires :
    </p>
    <pre><code class="language-php">namespace Symfony\Component\Form;

class Form implements FormInterface
{
  private FormInterface $parent;
  private FormInterface $children;

  public function add(FormInterface $child)
  {
    $this->children[$child->getName()] = $child;
    $child->setParent($this);

    return $this;
  }
}</code></pre>
    <footer>
      <a href="https://github.com/symfony/form/blob/5.3/Form.php" target="_blank" class="info">
        Code complet de la classe Form
      </a>
    </footer>
  </section>

  <section>
    <h3>Exercice</h3>
    <p>
      Écrire le code source d'une librairie permettant de gérer des dossiers et des fichiers.
      Un dossier pouvant contenir plusieurs sous-dossiers / fichiers, il devra être possible ensuite de calculer la
      taille totale d'un dossier.
    </p>
    <div class="instructions">
      <ol>
        <li>Créer le diagramme de classe UML</li>
        <li>Écrire le code source correspondant</li>
      </ol>
    </div>
  </section>

</section>