Une machine à états complète faite avec des cases à cocher HTML et CSS

Il y a deux états (A et B) qui sont modifiés à partir de deux endroits différents dans la conception qui affectent les changements dans toute l'interface utilisateur. Ceci est possible car le vide

Composante générale à quatre états

L'objectif est un composant à usage général pour contrôler l'état souhaité de la page. «État de la page» se réfère ici à l'état souhaité de la page et «état de la machine» se réfère à l'état interne du contrôleur lui-même. Le diagramme ci-dessus montre cette machine à états générique avec quatre états (A, B, C et D). La machine à états complète du contrôleur est indiquée ci-dessous. Il est construit en utilisant trois des bits du contrôleur de réinitialisation radio. L'ajout de trois d'entre eux forme une machine d'état qui a huit états internes de la machine (trois boutons radio indépendants qui sont activés ou désactivés).

Les «états de la machine» sont écrits comme une combinaison des trois boutons radio (c'est-à-dire M001 ou M101). Pour passer du M111 initial au M011, le bouton radio de ce bit est désactivé en cliquant sur une autre radio dans le même groupe. Pour revenir en arrière, la réinitialisation pour le

attaché à ce bit est cliqué, ce qui restaure l'état vérifié par défaut. Bien que cette machine ait huit états au total, seules certaines transitions sont possibles. Par exemple, il n'y a aucun moyen de passer directement de M111 à M100 car cela nécessite deux bits pour être retournés. Mais si nous plions ces huit états en quatre états de sorte que chaque état de page partage deux états de machine (c'est-à-dire que A partage les états M111 et M000), alors il y a une seule transition de n'importe quel état de page à n'importe quel autre état de page.

Composant à quatre états réutilisable

Pour la réutilisation, le composant est construit avec des macros de modèle Nunjucks. Cela lui permet d'être déposé dans n'importe quelle page pour ajouter une machine à états avec les états et transitions valides souhaités. Il y a quatre sous-composants requis:

• Manette
• Logique CSS
• Contrôles de transition
• Classes d'État

Manette

Le contrôleur est construit avec trois balises de formulaire vides et trois boutons radio. Chacun des boutons radio checked l'attribut est checked par défaut. Chaque bouton est connecté à l'un des formulaires et ils sont indépendants les uns des autres avec leur propre nom de groupe radio. Ces entrées sont masquées avec display: none parce qu'ils ne sont pas directement modifiés ou vus. Les états de ces trois entrées comprennent l'état de la machine et ce contrôleur est placé en haut de la page.

{% macro FSM4S_controller()%}
  
  

  

  
  
  
{% endmacro %}

Logique CSS

La logique qui relie le contrôleur ci-dessus à l'état de la page est écrite en CSS. Le Checkbox Hack utilise une technique similaire pour contrôler les éléments frères ou descendants avec une case à cocher. La différence ici est que le bouton contrôlant l'état n'est pas étroitement couplé à l'élément qu'il sélectionne. La logique ci-dessous sélectionne en fonction de l'état «vérifié» de chacun des trois boutons radio du contrôleur et de tout élément descendant avec classe .M000. Cette machine d'état masque tout élément avec le .M000 classe en définissant display: none !important. le !important n'est pas une partie vitale de la logique ici et pourrait être supprimée; il donne simplement la priorité à la dissimulation d'être remplacée par d'autres CSS.

{%macro FSM4S_css()%}

{%endmacro%}

Contrôle de transition

La modification de l'état de la page nécessite un clic ou une frappe de la part de l'utilisateur. Pour modifier un seul bit de l'état de la machine, l'utilisateur clique sur un bouton radio qui est connecté au même formulaire et groupe radio de l'un des bits du contrôleur. Pour le réinitialiser, l'utilisateur clique sur un bouton de réinitialisation du formulaire connecté à ce même bouton radio. Le bouton radio ou le bouton de réinitialisation est uniquement affiché en fonction de l'état dans lequel ils se trouvent. Une macro de transition pour toute transition valide est ajoutée au HTML. Il peut y avoir plusieurs transitions placées n'importe où sur la page. Toutes les transitions des états actuellement inactifs seront masquées.

{%macro AtoB(text="B",class="", classBtn="",classLbl="",classInp="")%}
  {{text}}
  

{{text}} {%endmacro%}

Classe d'état

Les trois composants ci-dessus sont suffisants. Tout élément qui dépend de l'état doit avoir les classes appliquées pour le masquer pendant d'autres états. Cela devient compliqué. Les macros suivantes sont utilisées pour simplifier ce processus. Si un élément donné doit être affiché uniquement dans l'état A, le {{showA()}} macro ajoute les états à masquer.

{%macro showA() %}
  M001 M010 M100 M101 M110 M011
{%endmacro%}

Mettre tous ensemble

Le balisage de l'exemple de feu de signalisation est indiqué ci-dessous. Les macros de modèle sont importées dans la première ligne du fichier. La logique CSS est ajoutée à la tête et le contrôleur est en haut du corps. Les classes d'état sont sur chacune des lumières de la .traffic-light élément. Le signal allumé a un {{showA()}} alors que la version «off» du signal a les états de la machine pour le .M000 et .M111 classes pour le cacher dans l'état A. Le bouton de transition d'état se trouve au bas de la page.

{% import "rrc.njk" as rrc %}



  
  
  
  {{rrc.FSM4S_css()}}


  {{rrc.FSM4S_controller()}}
  

    

      

      

      

      

      

      

    
    

      

        {{rrc.AtoC(text="NEXT", classInp="control-input",
          classLbl="control-label",classBtn="control-button")}}
        {{rrc.CtoB(text="NEXT", classInp="control-input",
          classLbl="control-label",classBtn="control-button")}}
        {{rrc.BtoA(text="NEXT", classInp="control-input",
          classLbl="control-label",classBtn="control-button")}}
      
    
  

Extension à plus d'états

Le composant de machine à états comprend ici jusqu'à quatre états, ce qui est suffisant pour de nombreux cas d'utilisation, d'autant plus qu'il est possible d'utiliser plusieurs machines à états indépendantes sur une page.

Cela dit, cette technique peut être utilisée pour construire une machine à états avec plus de quatre états. Le tableau ci-dessous montre combien d'états de page peuvent être créés en ajoutant des bits supplémentaires. Notez qu'un nombre pair de bits ne se réduit pas efficacement, c'est pourquoi trois et quatre bits sont tous deux limités à quatre états de page.

Détails du contrôleur de réinitialisation radio

L'astuce pour pouvoir afficher, masquer ou contrôler un élément HTML n'importe où sur la page sans JavaScript est ce que j'appelle un contrôleur de réinitialisation radio. Avec trois balises et une ligne de CSS, le bouton de contrôle et l'élément contrôlé peuvent être placés n'importe où après ce contrôleur. Le côté contrôlé utilise un bouton radio caché qui est checked par défaut. Ce bouton radio est connecté à un vide

  Show