Richfaces Navigation dans l'arborescence à l'aide de la touche fléchée (gauche, droite, haut, bas), tabulation et saisie

Question

J'ai un composant arborescente qui fonctionne correctement. Cependant, nous aimerions rendre l'application plus conviviale pour les personnes handicapées. L'application doit permettre aux utilisateurs de:

• Naviguer TreeNodes à l'aide des touches fléchées (haut/bas) et onglet clés
• Déplacement vers un nœud en fait le nœud sélectionné/ciblé
• Alors que sur le noeud sélectionné , la flèche droite pour développer le nœud et l'entrer touche pour afficher le menu contextuel

Voici mon élément d'arbre courant qui fonctionne très bien:

<rich:tree id="fileTree" var="item" selection="#{FILES.selection}" binding="#{FILES.binding}" 

         rightClickSelection="true" toggleType="ajax" selectionType="ajax" render="fileTree" 
         oncomplete="set_resource_updated(#{FILES.selected});" 
         onmousedown="var_allow_select = mouse_right_click(event);" onbeforeselectionchange="return var_allow_select;" > 

       <rich:treeModelRecursiveAdaptor roots="#{FILES.list}" nodes="#{item.directories}" leaf="#{not item.directory}"> 
        <rich:treeNode expanded="#{item.expanded}" render="fileTree" > 
         <a href="#" class="treelnk" > 
         <a4j:outputPanel id="itemP1" > 
          <h:outputText value="#{item.name}" style="font-weight: #{item eq FILES.selectedNode ? 'bold':'normal'};"/> 
          <rich:dragSource dragValue="#{item}" type="typeT1" dragIndicator="fileI1"/> 
          <rich:dropTarget dropValue="#{item}" acceptedTypes="typeT1,typeT2" execute="itemP1,itemP2" 
              dropListener="#{FILES.dropListener}" immediate="true" render="popupDragDrop" oncomplete="#{rich:component('popupDragDrop')}.show()"/> 
         </a4j:outputPanel> 
         <rich:dragIndicator id="fileI1" acceptClass="accept" rejectClass="reject" draggingClass="default"> 
          <h:outputText value="#{item.name}" style="padding-left: 10px"/> 
         </rich:dragIndicator> 
         </a> 
        </rich:treeNode> 
        <rich:treeModelAdaptor nodes="#{item.files}"> 
         <rich:treeNode expanded="#{item.expanded}" render="fileTree" > 
          <a href="#" class="treelnk" > 
          <a4j:outputPanel id="itemP2" styleClass="panel"> 
           <h:outputText value="#{item.name}" style="font-weight: #{item eq FILES.selectedNode ? 'bold':'normal'};"/> 
           <rich:dragSource dragValue="#{item}" type="typeT2" dragIndicator="fileI2"/> 
           <rich:dropTarget dropValue="#{item}" acceptedTypes="typeT1,typeT2" execute="itemP1,itemP2" 
               dropListener="#{FILES.dropListener}" immediate="true" render="popupDragDrop" oncomplete="#{rich:component('popupDragDrop')}.show()"/> 
          </a4j:outputPanel> 
          <rich:dragIndicator id="fileI2" acceptClass="accept" rejectClass="reject" draggingClass="default"> 
           <h:outputText value="#{item.name}" style="padding-left: 10px; "/> 
          </rich:dragIndicator> 
          </a> 
         </rich:treeNode> 
        </rich:treeModelAdaptor> 
       </rich:treeModelRecursiveAdaptor> 
      </rich:tree> 

J'ai vérifié les solutions here, mais la plupart d'entre elles suggère la manipulation des serveurs et la gestion des événements. Y a-t-il un moyen de le faire totalement du côté des clients?

Answer 1

Basculement le nœud est facile, chaque noeud a une méthode toggle() et vous pouvez basculer l'actuel comme celui-ci:

tree.getSelection().getNodes()[0].toggle() 

Traversant l'arbre d'autre part est assez difficile. L'arbre garde des références à des ensembles de nœuds mais pas à la structure entière - c'est-à-dire qu'il n'y a pas de moyen facile de dire quel nœud devrait être le suivant sélectionné. jQuery pourrait vous aider.

$('.rf-trn-cnt') 

cela retourne une liste de tous les nœuds, vous pouvez alors appeler mousedown() sur un nœud pour le sélectionner.

Answer 2

L'application Web conviviale pour les personnes à mobilité réduite peut être constituée d'un composant de navigation externe qui permet de naviguer plus facilement dans le <rich:tree>. Vous pouvez envisager d'utiliser des boutons de style assistant: prev/suivant en développant les branches pertinentes et en les sélectionnant dans une commande.

Pour implémenter un tel composant, vous aurez besoin d'une communication avec le serveur, cependant.

Je garde toutes les sélections possibles pour naviguer avec prev/suivant dans la liste (flatTraversalOrder):

@ManagedBean 
@ViewScoped 
public class TreeNavigator { 

    private List<SequenceRowKey> flatTraversalOrder; 

    @ManagedProperty("#{treeBean}") 
    private YourTreeBean treeBean; 

    @PostConstruct 
    public void initialize() { 
     flatTraversalOrder = createTraversalOrder(treeBean.getRootNode()); 
    } 

    // Put desired nodes in desired order here, e.g. all children of root: 
    private List<SequenceRowKey> createTraversalOrder(YourTreeNode rootNode) { 
     List<SequenceRowKey> result = new ArrayList<>(); 
     for (Iterator<Object> i = rootNode.getChildrenKeysIterator(); i.hasNext();) { 
      result.add(new SequenceRowKey(i.next())); 
     } 
     return result; 
    } 

    public void selectNext() { 
     List<Object> selectionList = new ArrayList<>(treeBean.getSelection()); 
     SequenceRowKey selectionKey = (SequenceRowKey) selectionList.get(0); 
     int indexInTraversalList = flatTraversalOrder.indexOf(selectionKey); 
     if ((indexInTraversalList == -1) || (indexInTraversalList == flatTraversalOrder.size() - 1)) { 
      return; 
     } 
     SequenceRowKey toBeSelectedKey = flatTraversalOrder.get(indexInTraversalList + 1); 
     treeBean.getSelection().clear(); 
     treeBean.getSelection().add(toBeSelectedKey); 
    } 
} 

SelectNext() peut être appelé de grande suivant bouton ou déclenché par un événement de clavier.

Le haricot d'arbre:

@ManagedBean 
@ViewScoped 
public class YourTreeBean { 

    private YourTreeNode rootNode; 

    private Collection<Object> selection; 

    //getters and setters 

} 

J'ai mis en œuvre dans l'application que j'élargissons additionaly nœuds si la sélection va à l'intérieur. Vous trouverez l'exemple de travail, la description et repo GitHub ici:

Interactions with RichTree