Différences entre versions de « Référence:Appliquettes imbriquées »
(à travailler) |
|||
Ligne 1 : | Ligne 1 : | ||
− | + | =Imbriquer en tant qu'''iframe''= | |
+ | {{Note|Dans le cas où vous souhaitez intégrer vos ressources dans une page Web sans avoir à programmer, vous pouvez simplement cliquer sur le bouton Partager sur la page de présentation (Infos ...) de cette ressource et sélectionner le menu Imbriquer dans la boîte de dialogue qui s'affiche. <br/>La méthode décrite sur cette page offre de meilleures performances, plus de flexibilité et permet une intégration plus profonde.}} | ||
− | + | Vous pouvez récupérer automatiquement le code pour l'''iframe''. Voici un exemple : | |
− | |||
− | Vous pouvez récupérer automatiquement le code pour l'''iframe'' | ||
<pre> | <pre> | ||
− | <iframe scrolling="no" | + | <iframe scrolling="no" title="Patron Soma1" src="https://www.geogebra.org/material/iframe/id/Y7AtGKpU/width/976/height/916/border/888888/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/true/ctl/false" width="976px" height="916px" style="border:0px;"> </iframe> |
− | src=" | ||
− | width=" | ||
− | height=" | ||
− | style="border:0px;"> | ||
− | </iframe> | ||
</pre> | </pre> | ||
− | |||
− | |||
− | |||
− | |||
{| class="wikitable" | {| class="wikitable" | ||
Ligne 41 : | Ligne 31 : | ||
|} | |} | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | =Imbriquer en utilisant ''deployggb.js''= | ||
+ | |||
+ | Vous pouvez utiliser JavaScript pour intégrer facilement GeoGebra Math Apps dans votre site Web et interagir avec en utilisant l' [https://wiki.geogebra.org/fr/Référence:JavaScript API JavaScript ]. | ||
+ | |||
+ | Cette méthode est recommandée lorsque plusieurs appliquettes HTML5 sont imbriquées dans une page. <br/>Dans ce cas elle peuvent partager une seule instance du code de base GeoGebraWeb et être chargées plus rapidement. | ||
+ | |||
+ | Voici un exemple de page web pour montrer comment imbriquer des appliquettes : | ||
+ | |||
+ | * [http://dev.geogebra.org/examples/html/example2.html Le résultat] | ||
+ | * [https://github.com/geogebra/math-apps-examples/blob/master/html/example-multiple.html Le code source ] | ||
+ | |||
+ | Vous devez inclure les trois parties suivantes dans votre fichier HTML : | ||
You need to include the following three parts in your HTML file: | You need to include the following three parts in your HTML file: | ||
− | {{Step|num=1}} | + | {{Step|num=1}} La bibliothèque javascript ''deployggb.js'' doit être appelée par cette balise : |
<pre> <script src="https://cdn.geogebra.org/apps/deployggb.js"></script></pre> | <pre> <script src="https://cdn.geogebra.org/apps/deployggb.js"></script></pre> | ||
− | {{Step|num=2}} | + | |
+ | {{Step|num=2}} Pour chaque appliquette, un objet javaScript de type GGBApplet doit être créé. | ||
+ | |||
<pre> <div id="applet_container1"></div> | <pre> <div id="applet_container1"></div> | ||
<div id="applet_container2"></div></pre> | <div id="applet_container2"></div></pre> | ||
− | {{Step|num=3}} | + | |
+ | {{Step|num=3}} Configurer et imbriquer les appliquettes | ||
+ | |||
<pre><script> | <pre><script> | ||
var applet1 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true); | var applet1 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true); | ||
Ligne 69 : | Ligne 67 : | ||
}); | }); | ||
</script></pre> | </script></pre> | ||
− | + | La bribe de code ci-dessus intègre une appliquette identifiée par "id" et une identifiée par "url" et les injecte en éléments avec les identifiants 'applet_container1' et 'applet_container2' respectivement (l'"id" d'élément est transmis à la méthode d'injection). Pour une utilisation hors ligne, vous devez spécifier le fichier en utilisant une chaîne codée base64 (appuyez sur Ctrl + Shift + B pour exporter la chaîne ggbBase64 vers le presse-papiers). | |
− | + | Lorsqu'elle est identifiée avec le paramètre "id", l'appliquette sera créée en utilisant les dimensions (largeur et hauteur) et les paramètres de l'appliquette tels que définis dans les paramètres de la ressource sur la Plateforme de ressources GeoGebra | |
+ | Vous pouvez éventuellement modifier cette configuration en affectant d'autres valeurs aux paramètres. Voir [Référence:Paramètres_Appliquette]] la liste de tous les paramètres. | ||
+ | |||
+ | Dans ces exemples, le paramètre 'showtoolbar:true' modifie la configuration des fichiers. | ||
+ | |||
+ | =Exemples (sans traductions)= | ||
+ | * [http://dev.geogebra.org/examples/html/example-single.html Unique appliquette] | ||
+ | * [http://dev.geogebra.org/examples/html/example-3d.html Unique appliquette 3D] | ||
+ | * [http://dev.geogebra.org/examples/html/example-multiple.html Deux appliquettes] | ||
+ | * [http://dev.geogebra.org/examples/html/example-api.html Unique appliquette + API] | ||
+ | * [http://dev.geogebra.org/examples/html/example-api-multiple.html Deux appliquettes + API] | ||
+ | * [http://dev.geogebra.org/examples/html/example-api-save-state.html Unique appliquette + API pour sauvegarde] | ||
+ | * [http://dev.geogebra.org/examples/html/example-tools.html Apps avec barre d'outils] | ||
+ | * [http://dev.geogebra.org/examples/html/example-popup.html Apps avec barre d'outils dans un dialogue] | ||
+ | * [http://dev.geogebra.org/examples/html/example-api-listeners.html Mouchards d'événements] | ||
+ | * [http://dev.geogebra.org/examples/html/example-api-sync.html Communication entre appliquettes] | ||
+ | * [http://dev.geogebra.org/examples/html/example-popup.html Math Apps dans pop-up] | ||
+ | * [http://dev.geogebra.org/examples/html/example-exercise.html Exercice(beta)] | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | = | + | =Solution hors ligne et autonome= |
− | + | Nous vous suggérons d'utiliser les ressources à partir de notre réseau de diffusion de contenu (cdn.geogebra.org) comme indiqué ci-dessus, mais au cas où vous devriez utiliser les ressources hors ligne ou héberger tous les fichiers nécessaires vous-même, vous pouvez le faire en utilisant le «Paquet Math Apps» . | |
− | [https://www.geogebra.org/partner/portal | + | [https://www.geogebra.org/partner/portal Télécharger Paquet Math Apps] |
− | + | ||
+ | Les codes d'imbriquation sont presque identiques à ceux ci-dessus, avec deux différences : la basile pour inclure deployggb.js doit être modifiée ainsi : | ||
<pre> <script src="GeoGebra/deployggb.js"></script></pre> | <pre> <script src="GeoGebra/deployggb.js"></script></pre> | ||
− | + | et vous devez inclure les deux lignes suivantes en dessous de la définition de l'appliquette 2 | |
<pre> applet1.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/'); | <pre> applet1.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/'); | ||
applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre> | applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
Les paramètres de la méthode <code>inject()</code> sont : | Les paramètres de la méthode <code>inject()</code> sont : | ||
Ligne 161 : | Ligne 140 : | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
[[es:Referencia:Applet Embebido]] | [[es:Referencia:Applet Embebido]] | ||
[[en:Reference:Math_Apps_Embedding]] | [[en:Reference:Math_Apps_Embedding]] |
Version du 26 avril 2017 à 15:58
Imbriquer en tant qu'iframe
La méthode décrite sur cette page offre de meilleures performances, plus de flexibilité et permet une intégration plus profonde.
Vous pouvez récupérer automatiquement le code pour l'iframe. Voici un exemple :
<iframe scrolling="no" title="Patron Soma1" src="https://www.geogebra.org/material/iframe/id/Y7AtGKpU/width/976/height/916/border/888888/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/true/ctl/false" width="976px" height="916px" style="border:0px;"> </iframe>
Description | Code | Exemple |
---|---|---|
Autorise Clic droit, Zoom et Édition au clavier | rc | /rc/true |
Affiche le champ de saisie | ai | /ai/true |
Autorise Glisser/Déposer & Zoom | sdz | /sdz/true |
Affiche la barre de menus | smb | /smb/true |
Affiche la barre d'outils | stb | /stb/true |
Affiche l'aide de la barre d'outils | stbh | /stbh/true |
Autorise le déplacement des étiquettes | ld | /ld/true |
Affiche l'icône de réinitialisation (coin supérieur droit) | sri | /sri/true |
Définit la langue de l'interface utilisateur (Notez le format différent pour ce paramètre ) | lang | ?lang=en |
Imbriquer en utilisant deployggb.js
Vous pouvez utiliser JavaScript pour intégrer facilement GeoGebra Math Apps dans votre site Web et interagir avec en utilisant l' API JavaScript .
Cette méthode est recommandée lorsque plusieurs appliquettes HTML5 sont imbriquées dans une page.
Dans ce cas elle peuvent partager une seule instance du code de base GeoGebraWeb et être chargées plus rapidement.
Voici un exemple de page web pour montrer comment imbriquer des appliquettes :
Vous devez inclure les trois parties suivantes dans votre fichier HTML : You need to include the following three parts in your HTML file:
1 La bibliothèque javascript deployggb.js doit être appelée par cette balise :
<script src="https://cdn.geogebra.org/apps/deployggb.js"></script>
2 Pour chaque appliquette, un objet javaScript de type GGBApplet doit être créé.
<div id="applet_container1"></div> <div id="applet_container2"></div>
3 Configurer et imbriquer les appliquettes
<script> var applet1 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true); var applet2 = new GGBApplet({filename: "../ggb/sine-curves.ggb","showtoolbar":true}, true); window.addEventListener("load", function() { applet1.inject('applet_container1'); applet2.inject('applet_container2'); }); </script>
La bribe de code ci-dessus intègre une appliquette identifiée par "id" et une identifiée par "url" et les injecte en éléments avec les identifiants 'applet_container1' et 'applet_container2' respectivement (l'"id" d'élément est transmis à la méthode d'injection). Pour une utilisation hors ligne, vous devez spécifier le fichier en utilisant une chaîne codée base64 (appuyez sur Ctrl + Shift + B pour exporter la chaîne ggbBase64 vers le presse-papiers).
Lorsqu'elle est identifiée avec le paramètre "id", l'appliquette sera créée en utilisant les dimensions (largeur et hauteur) et les paramètres de l'appliquette tels que définis dans les paramètres de la ressource sur la Plateforme de ressources GeoGebra Vous pouvez éventuellement modifier cette configuration en affectant d'autres valeurs aux paramètres. Voir [Référence:Paramètres_Appliquette]] la liste de tous les paramètres.
Dans ces exemples, le paramètre 'showtoolbar:true' modifie la configuration des fichiers.
Exemples (sans traductions)
- Unique appliquette
- Unique appliquette 3D
- Deux appliquettes
- Unique appliquette + API
- Deux appliquettes + API
- Unique appliquette + API pour sauvegarde
- Apps avec barre d'outils
- Apps avec barre d'outils dans un dialogue
- Mouchards d'événements
- Communication entre appliquettes
- Math Apps dans pop-up
- Exercice(beta)
Solution hors ligne et autonome
Nous vous suggérons d'utiliser les ressources à partir de notre réseau de diffusion de contenu (cdn.geogebra.org) comme indiqué ci-dessus, mais au cas où vous devriez utiliser les ressources hors ligne ou héberger tous les fichiers nécessaires vous-même, vous pouvez le faire en utilisant le «Paquet Math Apps» . Télécharger Paquet Math Apps
Les codes d'imbriquation sont presque identiques à ceux ci-dessus, avec deux différences : la basile pour inclure deployggb.js doit être modifiée ainsi :
<script src="GeoGebra/deployggb.js"></script>
et vous devez inclure les deux lignes suivantes en dessous de la définition de l'appliquette 2
applet1.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/'); applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
Les paramètres de la méthode inject()
sont :
Paramètre | Description |
---|---|
containerID | Une chaîne avec l'id de l'objet HTML devant être le parent de l'appliquette. |
appletType | l'un des mots-clés suivants :
|
es:Referencia:Applet Embebido
en:Reference:Math_Apps_Embedding