Cette page a été traduite à partir d'une version précédente de la page en Anglais. Des modifications importantes n'ont pas encore été traduites.

Help translating this website. Contact jmol-users@lists.sourceforge.net.

Libraire JavaScript Jmol.js

Jmol.js est une librairie JavaScript qui peut être utilisée pour simplifier le développement de pages web qui incluent la JmolApplet.

Pourquoi utiliser Jmol.js?
Exempl de page HTML utilisant Jmol.js
Recommendations Générales
Commandes Basiques du Langage de Script
     jmolInitialize
     jmolApplet
     jmolButton
     jmolCheckbox
     jmolRadioGroup
     jmolLink
     jmolMenu
Commandes Intermédaires du Langage de Script
     jmolSetAppletColor
     jmolHtml
     jmolBr
     jmolAppletInline
     jmolLoadInline
     jmolScript
Langage de Script Avancé de l'Applet
     jmolDebugAlert
     jmolSetTarget
     jmolRadio
     jmolStartNewRadioGroup
     jmolCheckBrowser
Support du Cascading Style Sheet
     jmolSetAppletCssClass
     jmolSetButtonCssClass
     jmolSetCheckboxCssClass
     jmolSetRadioCssClass
     jmolSetLinkCssClass
     jmolSetMenuCssClass

Pourquoi utiliser Jmol.js?

Nous recommandons fortement d'utiliser Jmol.js pour construire vos pages web. Il automatise la génération de beaucoup de séquences de tag HTML, rendant le code plus simple, plus facile à comprendre et moins sujet aux erreurs.

La librairie Jmol.js devrait bien fonctionner avec la plupart des navigateurs web de ce siècle. De plus, sur les plateformes Win32, elle fonctionne généralement bien avec la série de navigateurs Netscape 4.* (du siècle précédent).

Il faut noter que sur Max OS X, Internet n'est pas supporté car il ne permet pas les communications LiveConnect entre JavaScript et les applets Java. Il faut aussi noter que la famille de navigateurs Mozilla (y compris FireFox et Camino) doivent être configurés pour utiliser Java 1.4.2 en utilisant javaplugin.sourceforge.net

Il y a quelques cas où vous pouvez choisir de ne pas utiliser la librairie Jmol.js. Par exemple, vous pouvez être en train de construire une application web avancée qui utilise de la génération HTML côté serveur, tel que PHP, JSP, ASP, CGI, etc. Dans ce cas, il peut être approprié de générer le code HTML directement sur votre serveur plutôt que d'utiliser la librairie Jmol.js. Si vous n'êtes pas sur, utilisez la librairie Jmol.js.

Exempl de page HTML utilisant Jmol.js

Cliquer ici pour ouvrir une nouvelle fenêtre du navigateur qui montre la page exemple générée par le code source html suivant

<html>
  <head>
    <title>Simple example</title>
    <script src="../jmol/Jmol.js"></script>
  </head>
  <body>
    <script>
      jmolInitialize("../jmol"); // REQUIRED
      jmolApplet(200, "load caffeine.xyz");
    </script>
  </body>
</html>

Cliquer ici pour voir un exemple légèrement plus compliqué qui démontre les différents types de contrôles pour l'interface utilisateur qui peuvent être générés en utilisant la librairie Jmol.js.

<html>
  <head>
    <title>UI Controls example</title>
    <script src="../jmol/Jmol.js"></script> <!-- REQUIRED -->
  </head>
  <body>
    <form> <!-- form tags must enclose button/checkbox/radio/menu controls -->
      <script>
        jmolInitialize("../jmol"); // REQUIRED
        jmolSetAppletColor("skyblue"); // if you don't want black

	// 200x200 + file from another directory
	jmolApplet(200, "load ../jssample0/caffeine.xyz");
	jmolBr();
	// a radio group
	jmolHtml("atoms ");
	jmolRadioGroup([
          ["spacefill off",  "off"],
	  ["spacefill 20%",  "20%", "checked"],
	  ["spacefill 100%", "100%"]
	]);
	jmolBr();
	// a button
	jmolButton("reset", "Reset to original orientation");
	jmolBr();
	// a checkbox
	jmolCheckbox("spin on", "spin off", "spin");
	jmolBr();
	// a link
	jmolLink("move 360 0 0 0 0 0 0 0 2", "Rotate once about the x axis");
	jmolBr();
	// a menu
	jmolMenu([
	"background white",
	["background skyblue", null, "selected"],
	"background yellow",
	"background salmon",
	"background palegreen",
	"background black"
	]);
      </script>
    </form>
  </body>
</html>

Recommendations Générales

Il y a un répertoire sur votre serveur web qui contient Jmol.js, JmolApplet.jar et tout autre fichiers spécifique Jmol. Pour les besoins de cette discussion nous appellerons ce répertoire ../your-jmol-directory.

Chaque page web de votre site devrait faire référence à ../your-jmol-directory en utilisant une url relative. Les chemins relatifs vers les répertoires qui commencent par . ou .. devraient toujours être utilisés. Les chemins relatifs de serveur qui commencent par / pourraient être acceptables dans des circonstances particulières. Les URLs absolues qui commencent par http:// sont diaboliques et ne devraient jamais être utilisées.
Chaque page doit contenir la commande HTML suivante dans la section head pour inclure la librairie Jmol.js:
  <head>
    ...
    <script src="../your-jmol-directory/Jmol.js"></script>
    ...
  </head>
Chaque page doit contenir un appel à jmolInitialize(codebaseDirectory) comme premier appel à la librairie Jmol.js.
Chaque page qui contient des contrôles de type boutons/ cases à cocher/sélecteurs/menu doit contenir les tags <form>/</form>. Il est généralement sûr d'ouvrir ce tag immédiatement après le tag body et de le fermer juste avant le tag /body.
  <body>
    <form>
    ...
    </form>
  </body>
</html>

Commandes Basiques du Langage de Script

jmolInitialize

jmolInitialize(codebaseDirectory) Initialise la librairie JavaScript Jmol.js. L'appel à jmolInitialize() doit être à l'intérieur du <body> de la page HTML. Le paramètre obligatoire codebaseDirectory précise le chemin relatif vers le répertoire contenant les fichiers de l'applet Jmol.

jmolApplet

jmolApplet(size, {script}, {nameSuffix}) Alloue une JmolApplet. size devrait généralement être un nombre entier de pixels dans la plage de valeurs 100 - 800. script est un script qui sera lancé après le chargement du modèle moléculaire.
Avancé: nameSuffix ne devrait être spécifié que si vous voulez expliciement contrôler les attributs name et id utilisés dans le tag applet. Le suffixe que vous fournissez sera ajouté à la chaîne de caractères "jmolApplet", donc si vous précisez "Foo" les attributs générés seront name='jmolAppletFoo' id='jmolAppletFoo'. Dans les applications de base de données ou vous écrivez des enregistrements dans une table, vous êtes libre de fournir un entier comme suffixe.

Avancé: les instances de JmolApplet devraient généralement être carrées. Si votre application nécessite une JmolApplet rectangulaire, alors le paramètre size peut être spécifié sous la forme d'un tableau contenant deux éléments ... largeur et hauteur spécifié en nombre de pixels. Il est habituellement plus facile de spécifier en utilisant la notation crochets JavaScript pour les tableaux de constantes ... comme dans [400, 200]. La taille doit être fixe; les pourcentages ne sont pas autorisés. Autrement, beaucoup de navigateurs meurent quand la fenêtre du navigateur est redimensionnée.

jmolButton

jmolButton(script, {label}, {id})
Dessine un bouton avec un texte. Si label n'est pas précisé, sa valeur par défaut est constituée des 32 premiers caractères du script. script est exécuté quand le bouton est pressé.

id fixera à la fois l'id HTML et le nom HTML. Par défaut, jmolButton0, jmolButton1, etc.

jmolCheckbox

jmolCheckbox(scriptWhenChecked, scriptWhenUnchecked, labelHtml, {isChecked}, {id})
Affiche une case à cocher. scriptWhenChecked est exécuté quand la case est cochée par l'utiilisateur. scriptWhenUnchecked est exécuté quand la case est décochée par l'utilisateur. labelHTML est placé juste après la case à cocher. isChecked devrait être mise à une valeur non-fausse si vous voulez l'état par défaut.

id fixera à la fois l'id HTML et le nom HTML. Par défaut, jmolCheckbox0, jmolCheckbox1, etc.

jmolRadioGroup

jmolRadioGroup(arrayOfRadioButtons, {separatorHtml}, {groupName})
Utilisé pour mettre en place un groupe de case à cocher mutuellement exclusives. arreyOfRadioButtons est généralement spécifié en utilisant la notation JavaScript des crochets [ entréeA, entréeB, ... ]. Chaque entrée est généralement un autre tableau qui contient un script, un texte, et un flag optionnel isChecked. Si une entrée est une chaîne de carctères au lieu d'un tableau, alors la chaîne est utilisé à la fois pour le script et le texte.

separatorHtml est utilisé pour spécifier du code HTML qui devrait être placé aprè chaque bouton radio. Par exemple, pour mettre les boutons radio sur des lignes séparées vous devriez passer <br> comme paramètre. Si separatorHtml n'est pas spécifié, sa valeur par défaut est " "

groupName sera utilisé comme le nom commun HTML pour tous les boutons radio du groupe. Sa valeur par défaut est jmolRadioGrou0, jmolRadioGroup1, etc.

jmolLink

jmolLink(script, text, {id})
text est écrit comme un lien. script est exécuté quand l'utilisateur clique sur le lien.

id sera utilisé à la fois pour l'id HTML et le nom HTML. Sa valeur par défaut est jmolLink0, jmolLink1, etc.

jmolMenu

jmolMenu(arrayOfMenuItems, {menuHeight}, {id})
Utilisé pour afficher des éléments de menu avec les scripts associés. arrayOfMenuItems est généralement spécifié en utilisant la notation crochets de JavaScript [ itemA, itmB, ... ]. Chaque item est généralement un autre tableau qui contient un script, un texte et un flag optionnel isChecked. Si un item est une simple chaîne de caractères au lieu d'un tableau, alors cette chaîne est utilisée à la fois pour le script et le texte.

menuHeight est utilisé pour spécifier la hauteur du menu. Si elle est non spécifié ou égale à 1, le menu est une liste déroulante qui s'ouvre quand l'utilisateur clique dessus. Si elle est supérieur ou égale à 2, alors un menu est affiché avec le nombre de lignes spécifiées. Si la valeur du paramètre menuHeight est -1 alors la hauteur du menu sera automatiquement calculée pour être de la même longueur que le nombre d'éléments, enlevant tout scrolling.

id sera utilisé à la fois pour l'id HTML et le nom HTML. Sa valeur par défaut est jmolMenu0, jmolMenu1, etc.

Commandes Intermédaires du Langage de Script

jmolSetAppletColor

jmolSetColor(bgcolor, {boxfgcolor}, {progresscolor}, {boxbgcolor}) Utilisé pour spécifier la couleur de fond de l'applet. bgcolor est spécifié en utilisation la notation HTML "#RRVVBB" ou comme l'un des 140 noms de couleur JavaScript .
Avancé: La couleur du texte et la couleur de la barre d'avancement peuvent éventuellement être choisies.

jmolHtml

jmolHtml(html)
Vous permet de passer du texte arbitraire, contenant éventuellement des tahs html, directement à la page ... quelque fois c'est plus pratique de fermer et réouvrir les tags script. Le résultat est identique:
</script>html<script>

jmolBr

jmolBr()
La même chose que jmolHtml("<br />") qui est identique à </script><br /><script>

jmolAppletInline

jmolAppletInline(size, inlineModel, {script}, {nameSuffix})
Crée une instance de JmolApplet, mais passe le contenu du modèle moléculaire plutôt qu'un nom de fichier ou une URL. Si vous ne récupérer pas vos modèles moléculaires depuis une base de données vous ne voulez probablement pas utiliser ceci.

jmolLoadInline

jmolLoadInline(model, {targetSuffix})
Utilisé dans des applications de bases de données où le modèle moléculaire est disponible sous la forme d'une chaîne de caractères. Ceci charge directement model dans l'applet. Il faut noter que ce n'est pas le nom de fichier ... c'est le contenu du fichier.

jmolScript

jmolScript(script, {targetSuffix})
Utilisez ceci si vous voulez construire vos propres contrôles IHM ou exécuter script sur des évènements JavaScript. Les contrôles IHM ci-dessus sont essentiellement implémentés en utilisant cette fonction jmolScript. Quand plus d'une JmolApplet est affichée, targetsuffix est utilisé pour une identifier une instance en particulier.

Langage de Script Avancé de l'Applet

jmolDebugAlert

jmolDebugAlert({enableAlerts})
Affiche des boôtes d'alerte pour le debug. Utiliser avec précaution ou vous aurez beaucoup d'alertes. Passer explicitement le paramètre false pour les désactiver.

jmolSetTarget

jmolSetTarget(targetSuffix)
N'utiliser pas ceci à moins d'afficher plusieurs applets en même temps et que vos contrôles IHM de jmol.js ne suivent pas séquentiellement leurs invocations associées jmolApplet.

Si vous avez compris la phrase précédente, alors vous pouvez probablement deviner ce que fait jmolSetTarget.

Toutes les JmolApplets générées par la librairies Jmol.js commencent avec le nom/id jmolApplet. Par défaut, ils sont numérotés séquentiellement en commençant à 0. Si vous avez besoin/envie de fournir votre propre suffixe alors faôtes la avec vos appels à jmolApplet.

jmolRadio

jmolRadio(script, {labelHtml}, {isChecked}, {separatorHtml})
D'abord, essayez très fort d'utiliser jmolRadioGroup. Si votre mis en forme ne vous permet pas de le faire, alors utilisez ceci pour allouer des radio boutons individuels. Les boutons radio seront associés au même groupe jusqu'à ce que vous appeliez jmolStartNewRadioGroup.

jmolStartNewRadioGroup

jmolStartNewRadioGroup()
N'utilisez pas ceci à moins de travailler avec plusieurs groupes radio dont la mise en forme est si compliquée que vous ne pouvez pas utiliser jmolRadioGroup.

jmolCheckBrowser

jmolCheckBrowser(action, urlOrMessage, nowOrOnClick)
Vérifie le navigateur web des utilisateurs pour leur conformité et leur compatibilité avec Jmol.

action est une chaône de caractères parmi "popup", "redirect" ou "alert". "popup" affichera une autre fenêtre du navigateur avec l'URL spécifiée dans urlOrMessage. "redirect" redirigera la page existante sur l'URL spécifiée dans urlOrMessage. "alert" affichera un message d'alerte JavaScript avec le texte spécifié dans urlOrMessage. action is a string which is one of

nowOrOnClick est une chaône parmi "now" ou "onClick". Elle indique quand la vérification du navigateur s'effectuera. "now" indique que la vérification s'effectuera immédiatement. "onClick" indique que la vérification s'effectuera la première fois qu'un contrôle tel que jmolButton() est pressé. La valeur par défaut de nowOrOnClick est "onClick";

Si cet appel n'est pas fait alors un message d'alerte par défaut est affiché quand un utilisateur avec un navigateur non conforme clique sur un contrôle jmol.

Support du Cascading Style Sheet

jmolSetAppletCssClass

jmolSetAppletCssClass(appletCssClass)
Précise la classe CSS qui doit être utilisée dans les tags applet générés par jmolApplet et jmolAppletInline.

jmolSetButtonCssClass

jmolSetButtonCssClass(buttonCssClass)
Précise la classe CSS qui doit être utilisée dans les tags input générés par jmolButton.

jmolSetCheckboxCssClass

jmolSetCheckboxCssClass(checkboxCssClass)
Précise la classe CSS qui doit être utilisée dans les tags input générés par jmolCheckBox.

jmolSetRadioCssClass

jmolSetRadioCssClass(radioCssClass)
Précise la classe CSS qui doit être utilisée dans les tags input générés par jmolRadioGroup et jmolRadio.

jmolSetLinkCssClass

jmolSetLinkCssClass(linkCssClass)
Précise la classe CSS qui doit être utilisée dans les tags a générés par jmolLink.

jmolSetMenuCssClass

jmolSetMenuCssClass(menuCssClass)
Précise la classe CSS qui doit être utilisée dans les tags select générés par jmolMenu.

Hébergé par