Fab_Blab/FreeDatas2HTML
1
1
Fork 0
Code Issues Pull Requests Projects Releases Activity

Adaptation d'une des pages démo pour montrer la possibilité d'adapter l'ordre des champs.

Browse Source
This commit is contained in:
Fabrice PENHOËT 2022-01-17 16:55:02 +01:00
parent 3a59afc3a5
commit 3db4e96c91
2 changed files with 4 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/withHTML.html
View File

@ -91,6 +91,7 @@
<p>C’est un cas d’usage possible de FreeDatas2HTML : vous listez des données dans une page via votre code backend (PHP, Python, node.js…). Vous souhaitez proposer à vos utilisateurs de <b>passer de pages en pages, d’effectuer des recherches… tout cela sans avoir à appeler de nouveau votre backend</b>. Le résultat est plus fluide et cela économise les ressources de votre serveur, <b>tout se faisant dans le navigateur</b> de l’utilisateur.</p> <p>C’est un cas d’usage possible de FreeDatas2HTML : vous listez des données dans une page via votre code backend (PHP, Python, node.js…). Vous souhaitez proposer à vos utilisateurs de <b>passer de pages en pages, d’effectuer des recherches… tout cela sans avoir à appeler de nouveau votre backend</b>. Le résultat est plus fluide et cela économise les ressources de votre serveur, <b>tout se faisant dans le navigateur</b> de l’utilisateur.</p>
<p>Il est aussi possible d’adapter le rendu à la taille de l’écran de votre utilisateur. C’est le cas dans cette page où les données ne sont pas réaffichées sous forme de tableau si l’écran est large de moins 800 px. Si vous visionnez cette page sur un grand écran, vous pouvez simuler cet affichage en faisant « Ctrl+Maj+M », puis « F5 ».</p> <p>Il est aussi possible d’adapter le rendu à la taille de l’écran de votre utilisateur. C’est le cas dans cette page où les données ne sont pas réaffichées sous forme de tableau si l’écran est large de moins 800 px. Si vous visionnez cette page sur un grand écran, vous pouvez simuler cet affichage en faisant « Ctrl+Maj+M », puis « F5 ».</p>
<p>Dans l’autre sens, il pouvez aussi <b>parser des données listées autrement que dans un tableau HTML</b>, du moment qu’il reste possible de cibler séparément le nom des champs et la liste des enregistrements via des sélecteurs CSS. Dans ce but, les sélecteurs listés ci-dessous, venant du <a href="https://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors" target="_blank" rel="noopener">site du W3C</a> pourront vous être utiles !</p> <p>Dans l’autre sens, il pouvez aussi <b>parser des données listées autrement que dans un tableau HTML</b>, du moment qu’il reste possible de cibler séparément le nom des champs et la liste des enregistrements via des sélecteurs CSS. Dans ce but, les sélecteurs listés ci-dessous, venant du <a href="https://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors" target="_blank" rel="noopener">site du W3C</a> pourront vous être utiles !</p>
<p>Cet exemple montre aussi que <b>les données peuvent être affichées dans un ordre différent de celui de la source de données</b>, le champ « Version CSS » y étant en dernière colonne. De même, il est tout à fait possible ne pas afficher tous les champs fournis par la source de données.</p>
</article> </article>
<aside> <aside>

3
src/demo/exampleWithHTML.ts
View File

@ -9,6 +9,9 @@ const initialise=async () =>
// Parsage des données, qui ne sont pas encore réaffichées : // Parsage des données, qui ne sont pas encore réaffichées :
await converter.run(); await converter.run();
// Choix de l'ordre dans lequel les champs sont à afficher :
converter.fields2Rend=[3,0,1,2];
// Adaptation du rendu suivant la taille de l'écran : // Adaptation du rendu suivant la taille de l'écran :
const myRender=new Render(); const myRender=new Render();
if(window.innerWidth < 800) if(window.innerWidth < 800)