Masquer/Révéler du contenu avec le panneau réactif ASP.NET MVC

L’interface utilisateur Telerik pour le panneau réactif ASP.NET MVC facilite ridiculement le masquage d’une partie de votre interface utilisateur (et sa récupération) sur de petits écrans.

Lorsqu’il s’agit de créer une interface utilisateur réactive qui fait la bonne chose sur tous les différents appareils avec lesquels vos utilisateurs interagissent, vous avez besoin de contrôles qui « feront la bonne chose » dès le départ. Et parmi les différents contrôles de votre interface utilisateur, ce sont les composants de l’interface utilisateur qui occupent le plus d’espace qui vous préoccupent le plus. Le Interface utilisateur Telerik pour graphique ASP.NET MVCpar exemple, parce que tout l’intérêt d’avoir un graphique est d’afficher les informations avec clarté.

J’ai deux solutions ici : une que je pense que vous devriez faire tout le temps et une solution plus sophistiquée pour une interface utilisateur plus interactive.

Garder la bonne taille

La bonne nouvelle ici est que, par défaut, le graphique ASP.NET MVC (un wrapper côté serveur pour le widget kendo-chart) se redimensionnera pour s’afficher dans l’espace disponible sur l’écran de votre utilisateur. Cependant, le graphique n’ajuste pas sa taille ou sa position lorsque la taille ou l’orientation de l’écran change.

Essentiellement, cela signifie que vous obtiendrez la « bonne » taille lors de l’affichage initial de votre graphique, mais si, par exemple, l’utilisateur passe du portrait au paysage, le graphique ne mettra pas à jour son affichage.

Il existe une solution simple pour résoudre ce problème. Si vous avez un graphique qui commence par ceci :

<kendo-chart name="MyChart">
  …more…

Ensuite, ajoutez simplement ce code à votre page, en le remplaçant par ce qui se trouve dans votre graphique name attribut où j’ai MyChart dans ce code :

<script>
$(window).on('resize', function ()
{
  $("#MyChart").css("width", "100%")
    .data("kendoChart").resize();
}
);
</script>

Une fois ce code en place, votre graphique s’affichera désormais à la bonne taille à mesure que votre navigateur changera de forme ou de taille. Vous devriez, je pense, inclure ce code dans n’importe quelle page où vous affichez un graphique (je vais supposer que ce code est en place pour le reste de cet article, par exemple).

Plus d’interactivité

Mais maintenant, je vais profiter d’une solution plus sophistiquée pour gérer une interface utilisateur avec un graphique : exploiter le Panneau réactif pour ASP.NET MVC (un wrapper côté serveur pour le widget Kendo UI Responsive Panel). Le panneau réactif vous permet de supprimer automatiquement le contenu à mesure que l’écran de l’utilisateur devient plus petit, en remplaçant ce contenu par un bouton qui permet à l’utilisateur d’afficher le contenu masqué.

Cela signifie, par exemple, que vous pouvez avoir une grille et un graphique sur la page et faire disparaître le graphique lorsque l’espace devient restreint… tout en rendant le graphique disponible lorsque l’utilisateur le souhaite. Cette interface utilisateur, par exemple, comporte une grille, suivie d’un graphique, suivi de quelques informations supplémentaires.

Avec le panneau réactif, je peux faire disparaître ce graphique sur des écrans plus petits pour libérer de l’espace pour les autres sections tout en donnant à l’utilisateur la possibilité de ramener le graphique à la demande. Et cela s’avère ridiculement simple à mettre en œuvre.

Intégration du panneau réactif

Dans mon exemple, ma mise en page initiale ressemblerait à ceci :

<h2>Data</h2>
<kendo-grid name="MyGrid">
  …grid…
</kendo-grid>

<h2>Chart</h2>
<kendo-chart name="MyChart">
  …chart…
</kendo-chart>

<h2>Caveats and Warnings</h2>
  …content…

Pour que le graphique disparaisse lorsque l’espace devient restreint, tout ce que j’ai à faire est d’envelopper mon graphique (et tout contenu associé) dans l’assistant de balise Responsive Panel. Il vous suffit de définir trois attributs sur le tag helper du panneau :

• name: Quel que soit le nom que vous souhaitez utiliser pour faire référence à la grille.
• breakpoint: La largeur, en pixels, à laquelle le panneau doit disparaître.
• orientation: C’est ici que le contenu apparaîtra et peut être n’importe lequel des top, bottom, left ou right. N’hésitez pas à expérimenter, mais vous voulez probablement le meilleur.

Cet exemple fera disparaître mon graphique de l’écran lorsque la largeur de l’écran est inférieure à 700 pixels :

  …grid…
</kendo-grid>

<kendo-responsivepanel name="MyPanel"
  breakpoint="700"
  orientation="top">

  <h2>Chart</h2>
  <kendo-chart name="MyChart">
    …chart…
  </kendo-chart>

</kendo-responsivepanel>

<h2>Caveats and Warnings</h2>
  …content…

Enfin, quelque part sur la page (et en dehors du panneau responsive), ajoutez un bouton pour masquer et afficher le panneau, en lui attribuant la règle de classe CSS k-rpanel-toggle pour que le panneau puisse le trouver. Quelque chose comme ceci fonctionnerait :

<button id="panelButton" class="k-rpanel-toggle">
  Show Chart
</button>
<br/>
<kendo-repsonsivepanel …

Désormais, avec ces changements, lorsque la fenêtre devient trop petite (que ce soit parce que l’utilisateur a ajusté la taille de la fenêtre de son navigateur, qu’il consulte la page sur un smartphone ou qu’il passe du mode paysage au mode portrait sur sa tablette), votre graphique disparaîtra et sera remplacé par votre bouton :

Si l’utilisateur clique sur le bouton, le contenu du panneau (mon graphique, dans ce cas) réapparaît, dimensionné pour tenir dans l’espace approprié. Lorsque le graphique est affiché, cliquer sur le bouton fera disparaître le contenu.

Améliorer l’interface utilisateur

Vous souhaiterez peut-être apporter quelques améliorations. Premièrement, la légende que j’ai sur mon bouton – « Afficher le graphique » – n’est pas vraiment appropriée une fois que le panneau apparaît, car cliquer sur le bouton va maintenant cacher le graphique. Je pourrais utiliser une légende plus générique sur le bouton (par exemple, simplement « Graphique »), ou je pourrais modifier la légende sur le bouton lorsque le graphique est visible.

Deuxièmement, il peut également y avoir des scénarios dans lesquels je souhaite ouvrir (ou fermer) le panneau à partir du code côté client de mon application. Si, par exemple, j’autorise mon utilisateur à modifier les données dans la grille, je souhaiterai peut-être réafficher le graphique une fois que l’utilisateur a enregistré ses modifications afin que les utilisateurs puissent voir une représentation visuelle de leurs modifications. Je peux faire ces deux choses avec un peu de code.

Pour gérer la mise à jour de la légende du bouton, j’ajoute du code compatible jQuery à exécuter lorsque ma page est prête à être affichée. Dans ce code, je récupère les références au bouton qui contrôle mon panneau et au panneau lui-même. Avec ces références, je peux utiliser le panneau bind méthode pour câbler les fonctions selon lesquelles la légende du bouton est celle du panneau. open et close les événements se déclenchent (jQuery text la fonction me permettra de changer la légende du bouton).

Voici à quoi ressemble ce code :

  $( () => {
    let btn = $("#panelButton");
    let panel = $("#MyPanel").data("kendoResponsivePanel");
      panel.bind("open", () => btn.text("Hide Chart")  );
      panel.bind("close", () => btn.text("Show Chart")  );
    }
) ;

Pour mon autre scénario (ouverture ou fermeture du panneau à partir de mon code), je peux simplement appeler le panneau open ou close fonction. Il y a cependant une mise en garde ici : si vous ouvrez ou fermez le panneau à partir d’un événement interactif (par exemple, un onclick événement), votre fonction doit accepter le paramètre par défaut de l’événement et appeler le paramètre stopPropogation fonction. Un code typique ressemblerait à ceci :

const OpenPanel = (e) => {
  e.stopPropagation();
  $("#MyPanel").data("kendoResponsivePanel").open();
}

Bien sûr, comme pour tous les composants de l’interface utilisateur Telerik pour ASP.NET MVC, vous pouvez faire plus ici si vous le souhaitez. Plutôt que de fournir votre propre bouton, par exemple, le panneau générera un menu hamburger pour vous. Ce démo le démontre et intègre le panneau avec une barre latérale qui glisse depuis le côté de l’écran.

Mais si tout ce dont vous avez besoin est de supprimer du contenu lorsque l’espace devient restreint, vous avez tout ce dont vous avez besoin pour y parvenir.

Essayez tout cela vous-même avec un essai gratuit de 30 heures de la bibliothèque Telerik UI pour ASP.NET MVC :

Commencer