Jmol JavaScript Object/Legacy - Revision history

AngelHerraez: /* Converting the oldest Jmol pages that used the <applet> syntax */

2022-08-28T08:44:13Z

‎Converting the oldest Jmol pages that used the <applet> syntax

AngelHerraez: /* Converting the oldest Jmol pages that used the <applet> syntax */

2022-08-13T16:49:30Z

‎Converting the oldest Jmol pages that used the <applet> syntax

AngelHerraez: Converting really old pages with the applet syntax to JSmol

2022-08-12T09:35:44Z

Converting really old pages with the applet syntax to JSmol

AngelHerraez: /* Table of equivalence old vs. new functions */

2019-11-22T09:57:58Z

‎Table of equivalence old vs. new functions

AngelHerraez: /* Table of equivalence old vs. new functions */

2019-11-22T09:07:42Z

‎Table of equivalence old vs. new functions

AngelHerraez: adapting legacy sites

2019-11-20T11:38:29Z

adapting legacy sites

AngelHerraez: old vs. new functions

2019-11-20T11:13:02Z

old vs. new functions

AngelHerraez: old vs. new functions

2019-11-20T11:08:08Z

old vs. new functions

AngelHerraez: Converting legacy web pages -> new subpage

2019-11-20T10:33:35Z

Converting legacy web pages -> new subpage

New page

== Converting legacy web pages to JSmol ==

=== Converting pages from Jmol to JSmol ===
It is not hard to convert pages that used the Jmol Applet to use the HTML5 versions of JSmol. The basic sequence includes:

* Switching from {{file|Jmol.js}} to {{file|JSmol.min.js}}
* Adding the {{folder|j2s}} folder/directory to your website.
* Setting parameters in the <code>Info</code> variable.
* Modifying function calls from the format <code>jmolXxxx(..., appletExtension)</code> to <code>Jmol.jmolXxxx(appletID, ...)</code> (see below). Depending upon the magnitude of the problem, you may want to write (''but read the next section first!'') a set of JavaScript functions that allow you to keep your page source code unchanged. For example, if you use the simplest form of jmolButton, the converting function would be:
<pre>
function jmolButton(script, label) {
Jmol.jmolButton(myJmol, script, label)
}
</pre>

Or you can modify your page source code to use the new format. Or, easiest solution, use the 'adapter' library described below.

The main methods formerly implemented in {{file|Jmol.js}} (and more!) have now [[Jmol_JavaScript_Object/Functions|equivalent functions]] that can be found in [{{SVN JSmol Trunk}}jsmoljs/JSmolApi.js JSmolApi.js]
-- also included in the distribution: {{file|jsmol.zip}} > {{folder|js}} > {{file|JSmolApi.js}}
You might consider taking this opportunity to find out how jQuery works, if you are not familiar with it, and work more with those functions.

=== Conversion using the Jmol2.js 'adapter' library ===
What has been just described (i.e., writing custom functions that allow to keep using the old calls as used with Jmol.js) has been implemented in a special new Jmol2.js 'adapter' library. If you use this, you can leave your existing calls to jmolApplet(), jmolButton(), jmolLink() etc. You just need to:

<table>
<tr>
<th>method A:
</th>
<th>method B:
</th>
</tr>
<tr>
<td>
* ''Step 1''
** In all your pages, add a call to {{file|JSmol.min.js}}
** In all your pages, change the existing call to {{file|Jmol.js}} into {{file|Jmol2.js}}
</td>
<td>
* ''Step 1''
** Open in a text editor both {{file|JSmol.min.js}}, {{file|Jmol2.js}} and a new blank document. Combine in this document the contents of {{file|JSmol.min.js}} followed by the contents of {{file|Jmol2.js}}. Save this new document as {{file|Jmol.js}}
** Do not change your pages, keep the existing call to {{file|Jmol.js}}
</td>
</tr>
<tr>
<td>
* ''Step 2:''
** Add the JSmol files and folders as appropriate &dagger;
</td>
<td>
* ''Step 2:''
** Add the JSmol files and folders as appropriate &dagger;
</td>
</tr>
</table>
(&dagger;) That is described in the Installation and Initialization sections of this page.

For more details, read inside the Jmol2.js file itself.

Locations to get {{file|Jmol2.js }}:
* In the Jmol download, Jmol-14.x.x-binary.zip > jsmol.zip > jsmol\js\Jmol2.js
* In the [{{SVN JSmol Trunk}}jsmoljs/Jmol2.js JSmol repository]
* [{{StOlaf}}jsmol/js/Jmol2.js at StOlaf]

=== Upgrading Jmol without using JSmol ===

If you have a "legacy" site that uses Jmol.js, and you would prefer to stick with Java and just upgrade your site so that it still works, then all you have to do is the following:

* Download the latest [http://sourceforge.net/projects/jmol/files Jmol ZIP file distribution].
* Extract all the {{file|JmolAppletSigned0*.jar}} files in the {{folder|applet}} directory (you should not be using the {{file|JmolApplet0*.jar}} files any more, unless you are certain what you are doing, since the unsigned applet will be blocked in browsers).
* Use the most recent version of Jmol.js that you have, or retrieve it from [http://chemapps.stolaf.edu/jmol/Jmol.js St. Olaf].
* Upgrade your site's Jmol.js and your JAR files with the files you have extracted.

Everything should work as before, but users will see a much kinder, more welcoming warning message the first time they access the new applet. Of course they will still have to give permission for the applet to be run, maybe in several dialogs. Please be aware that most users will not be able to see Jmol applets in their browser.

@@ Line 124: / Line 124: @@
 In the folder that contains your pages (or elsewhere if you adjust the paths), add these items extracted from the {{file|jsmol.zip}} package which is, in turn, contained in the downloaded distribution of Jmol:
-* the whole {{file|j2s}} folder
+* the whole {{folder|j2s}} folder
 * the whole {{folder|php}} folder
 * the {{file|JSmol.min.js}} file

@@ Line 113: / Line 113: @@
 == Converting the oldest Jmol pages that used the &lt;applet&gt; syntax ==
-The very ancient syntax (dating up to 2006 at least) for including JmolApplets in web pages used the html <code><applet></code> tag for both the Jmol panels and the buttons acting on them.
+The very ancient syntax (dating up to 2006 at least) for including Jmol Java applets in web pages used the html <code><applet></code> tag for both the Jmol panels and the buttons acting on them.
-These Jmol applets were embedded by using just the JmolApplet.jar file and applet tags in the page html.
+Both were embedded in the page by using just the JmolApplet.jar file and specific applet tags.
-Of course, in time web browsers abandoned the use of embedded Java applets and hence Jmol, then JSmol, evolved to new syntaxes, first with the use of the <code>Jmol.js</code> library (to facilitate the insertion of applets) and later with the <code>JSmol.min.js</code> library and its accessory files (to switch to fully html5-compliant objects instead of applets).
+Of course, with time web browsers abandoned the use of embedded Java applets and hence Jmol, then JSmol, evolved to new syntaxes, first with the use of the <code>Jmol.js</code> library (to facilitate the insertion of applets as such or as embed tags) and later with the <code>JSmol.min.js</code> library and its accessory files (to switch to fully html5-compliant objects instead of applets).
 So there are old pages that used the <code><applet></code> tags, and here is a method to resuscitate them without rewriting all their code to new JSmol syntax, just by adding calls to two JavaScript files. You only need the standard files composing the JSmol library (included in downloadable Jmol distribution) and an additional adapter file: {{file|convertJmolApplets.js}}.
@@ Line 126: / Line 127: @@
 * the whole {{folder|php}} folder
 * the {{file|JSmol.min.js}} file
-* the 'adapter' library, {{file|convertJmolApplets.js}} (extracted from [[:File:ConvertJmolApplets.zip|here]])
+* the 'adapter' library, {{file|convertJmolApplets.js}} (extracted from [[:File:ConvertJmolApplets.zip|this zipfile]])
 Then, in the <code>head</code> section of your page, include the calls to both js files, something like this:

← Older revision		Revision as of 09:35, 12 August 2022
Line 110:		Line 110:

	Everything should work as before, but users will see a much kinder, more welcoming warning message the first time they access the new applet. Of course they will still have to give permission for the applet to be run, maybe in several dialogs. Please be aware that most users will not be able to see Jmol applets in their browser.		Everything should work as before, but users will see a much kinder, more welcoming warning message the first time they access the new applet. Of course they will still have to give permission for the applet to be run, maybe in several dialogs. Please be aware that most users will not be able to see Jmol applets in their browser.
		+
		+	== Converting the oldest Jmol pages that used the <applet> syntax ==
		+
		+	The very ancient syntax (dating up to 2006 at least) for including JmolApplets in web pages used the html <code><applet></code> tag for both the Jmol panels and the buttons acting on them.
		+	These Jmol applets were embedded by using just the JmolApplet.jar file and applet tags in the page html.
		+
		+	Of course, in time web browsers abandoned the use of embedded Java applets and hence Jmol, then JSmol, evolved to new syntaxes, first with the use of the <code>Jmol.js</code> library (to facilitate the insertion of applets) and later with the <code>JSmol.min.js</code> library and its accessory files (to switch to fully html5-compliant objects instead of applets).
		+
		+	So there are old pages that used the <code><applet></code> tags, and here is a method to resuscitate them without rewriting all their code to new JSmol syntax, just by adding calls to two JavaScript files. You only need the standard files composing the JSmol library (included in downloadable Jmol distribution) and an additional adapter file: {{file\|convertJmolApplets.js}}.
		+
		+	'''Instructions:'''
		+
		+	In the folder that contains your pages (or elsewhere if you adjust the paths), add these items extracted from the {{file\|jsmol.zip}} package which is, in turn, contained in the downloaded distribution of Jmol:
		+	* the whole {{file\|j2s}} folder
		+	* the whole {{folder\|php}} folder
		+	* the {{file\|JSmol.min.js}} file
		+	* the 'adapter' library, {{file\|convertJmolApplets.js}} (extracted from [[:File:ConvertJmolApplets.zip\|here]])
		+
		+	Then, in the <code>head</code> section of your page, include the calls to both js files, something like this:
		+	<script src="JSmol.min.js"></script>
		+	<script src="convertJmolApplets.js"></script>
		+
		+	That's all ! <br>Save the modified page and test it in the web browser.
		+	If you need help, do not hesitate to contact the jmol-users list or [[User:AngelHerraez\|AngelHerraez]] ([[User talk:AngelHerraez\|talk]])

@@ Line 18: / Line 18: @@
 === Table of equivalence old vs. new functions ===
-The main [[Jmol_JavaScript_Object/Legacy/Jmol_Js|methods]] formerly implemented in {{file|Jmol.js}} (and more!) have now [[Jmol_JavaScript_Object/Functions|equivalent functions]] that can be found in [{{SVN JSmol Trunk}}jsmoljs/JSmolApi.js JSmolApi.js]
+The main methods formerly implemented in {{file|Jmol.js}} (and more!) have now [[Jmol_JavaScript_Object/Functions|equivalent functions]] that can be found in [{{SVN JSmol Trunk}}jsmoljs/JSmolApi.js JSmolApi.js]
 -- also included in the distribution: {{file|jsmol.zip}} > {{folder|js}} > {{file|JSmolApi.js}}
@@ Line 24: / Line 24: @@
 |-
 ! Legacy (Jmol.js) !! New (JSmol.min.js)
 |-
 | jmolInitialize || properties of the <code>Info</code> variable

@@ Line 18: / Line 18: @@
 === Table of equivalence old vs. new functions ===
-The main methods formerly implemented in {{file|Jmol.js}} (and more!) have now [[Jmol_JavaScript_Object/Functions|equivalent functions]] that can be found in [{{SVN JSmol Trunk}}jsmoljs/JSmolApi.js JSmolApi.js]
+The main [[Jmol_JavaScript_Object/Legacy/Jmol_Js|methods]] formerly implemented in {{file|Jmol.js}} (and more!) have now [[Jmol_JavaScript_Object/Functions|equivalent functions]] that can be found in [{{SVN JSmol Trunk}}jsmoljs/JSmolApi.js JSmolApi.js]
 -- also included in the distribution: {{file|jsmol.zip}} > {{folder|js}} > {{file|JSmolApi.js}}

@@ Line 67: / Line 67: @@
 What has been just described (i.e., writing custom functions that allow to keep using the old calls as used with Jmol.js) has been implemented in a special new Jmol2.js 'adapter' library. If you use this, you can leave your existing calls to jmolApplet(), jmolButton(), jmolLink() etc. You just need to:
-<table>
+{|
-<tr>
+|-
-<th>method A:
+! method A: !! method B:
-</th>
+|- style="vertical-align: top;"
-<th>method B:
-</th>
+* ''Step 1:''
 ** In all your pages, add a call to {{file|JSmol.min.js}}
 ** In all your pages, change the existing call to {{file|Jmol.js}} into {{file|Jmol2.js}}
-</td>
-<td>
+* ''Step 1:''
 ** Open in a text editor both {{file|JSmol.min.js}}, {{file|Jmol2.js}} and a new blank document. Combine in this document the contents of {{file|JSmol.min.js}} followed by the contents of {{file|Jmol2.js}}. Save this new document as {{file|Jmol.js}}
 ** Do not change your pages, keep the existing call to {{file|Jmol.js}}
-</td>
+|- style="vertical-align: top;"
-</tr>
 * ''Step 2:''
 ** Add the JSmol files and folders as appropriate &dagger;
-</td>
 * ''Step 2:''
 ** Add the JSmol files and folders as appropriate &dagger;
-</td>
+|}
-</tr>
-</table>
+(&dagger;) That is described in the Installation and Initialization sections of [[Jmol JavaScript Object|this page]].
 For more details, read inside the Jmol2.js file itself.
@@ Line 107: / Line 98: @@
 === Upgrading Jmol without using JSmol ===
-If you have a "legacy" site that uses Jmol.js, and you would prefer to stick with Java and just upgrade your site so that it still works, then all you have to do is the following:
+If you have a legacy site that uses Jmol.js, and you would prefer to stick with Java and just upgrade your site so that it still works, then all you have to do is the following:
 * Download the latest [http://sourceforge.net/projects/jmol/files Jmol ZIP file distribution].

@@ Line 1: / Line 1: @@
 == Converting legacy web pages to JSmol ==
 === Overview ===
@@ Line 16: / Line 17: @@
 Or you can modify your page source code to use the new format. Or, easiest solution, use the 'adapter' library described below.
 The main methods formerly implemented in {{file|Jmol.js}} (and more!) have now [[Jmol_JavaScript_Object/Functions|equivalent functions]] that can be found in [{{SVN JSmol Trunk}}jsmoljs/JSmolApi.js JSmolApi.js]
 -- also included in the distribution: {{file|jsmol.zip}} > {{folder|js}} > {{file|JSmolApi.js}}
 {| class="wikitable"
 |-
@@ Line 39: / Line 39: @@
 | jmolMenu || Jmol.jmolMenu
 |-
-| jmolSetAppletColor || <code>color</code> property of the <code>Info</code> variable
+| jmolSetAppletColor || <code>color</code> property of the <code>Info</code> variable, or use the <code>background</code> command in a script
 |-
 | jmolResizeApplet || Jmol.resizeApplet

@@ Line 1: / Line 1: @@
 == Converting legacy web pages to JSmol ==
-=== Converting pages from Jmol to JSmol ===
+=== Overview ===
 It is not hard to convert pages that used the Jmol Applet to use the HTML5 versions of JSmol. The basic sequence includes:
@@ Line 19: / Line 19: @@
 -- also included in the distribution: {{file|jsmol.zip}} > {{folder|js}} > {{file|JSmolApi.js}}
 You might consider taking this opportunity to find out how jQuery works, if you are not familiar with it, and work more with those functions.
 === Conversion using the Jmol2.js 'adapter' library ===